* We need to use the "tree data" whether we want a tree or not because
  this is the only data window which associates nodes with their parent
  workflows directly.
* Allow edge deltas through.

* Construct a data tree in the workflow store to be used as the cenrtral
  data store.
* This stores everything Cylc:
  * UID objects `~user/a/b/workflow//cycle/task/job`.
  * $namespaces
  * $edges
* This fulfils common requirements e.g. sorting.

* Add a GraphNode component.
* Render nodes.
* Load GraphViz (WASM).
* Run GraphViz layout..
* Translate nodes to match layout coordinates.
* Render edges.

Make some adjustments to the central data store:

* flat index (cylcTree.$index)
* tree (cylcTree.children)

* VueX doesn't like circular references (e.g. node.parent).

* Auto refresh the graph at a hardcoded rate but only when the data has
  changed.

* Jobs are not clickable yet, however, we don't have any job mutations
  yet and the graph view might want to provide a custom job overview
  here so omitting this for now.

* Allow the graph to be transposed (i.e. switch from top-bottom to
  left-right edge orientation).

* Add a button to centre the graph.
* Increase the permitted zoom range.

* The old task icon modifiers didn't render correctly when loaded into a
  larger document due to some relative transformation problem.
* Simplified back to a regular template component.
* Tweaked the icons a little.
* Still needs work, the modifiers are too small!

* Enable the global callback by default irrespective of which views are
  open.
* Disable local callbacks for the central data store.

* Switch views to use the re-implemented task component.

* Add a `familyTree` node under each cycle point when families are
  recieved by the store.
* Populate this tree using `childTasks` and `ancestors` from the schema.
* Use the flat ID for families as it is not possible to reconstruct the
  hierarchical ID for updates as the ancestors list will not have
  change so will not be present in the delta.
* Test registration of children.
* Fix cycle/family insertion order issue
* Remove tasks from family tree when removed from childTasks

* Make queries mergable
  * In order to merge queries properly their definition names must
    match, otherwise the fragments can become isolated from the
    definitions which use them.
  * Fixed by standardising the naming of defintions so that they can
    merge cleanly.
* Fix re-issue of queries after merging
  * Closes cylc#1110
  * The query object has some derived properties which are not updated
    when we modify it in place.
  * The ApolloClient appears to by using these properties which causes it
    to see the query as it was *before* merging rather than after.
  * To fix we re-create the query object after merge in order to ensure
    its derived properties are set correctly.

* Remove root nodes from tree.
* Fix job-details nodes.
* Fix filtering.

* Remove local callbacks.
* Convert subscriptions to match the pattern of the others for merging
  purposes.
* Search and filter are broken for the moment.

* Adapt sort and filter mechanism to work with the central data store.

* When we used local callbacks we deleted the data obtained by the
  callback when the subscription was closed.
* Now we use a central data store we cannot rely on this mechanism so
  need to manually wipe the data the subscription requested.
* This is a crude initial implementation which assumes that no other
  subscriptions active at the time were requesting
  cycles/families/namespaces etc from the workflow(s) that were being
  requested. At the time of writing that is an accurate assumption.

* Delete styles/cylc/_task (these styles now reside in the Vue
  component).
* Fix the size of the task "hub" (the middle bit of the running icon).
* Re-calibrate the progress indicator (which needs to be fiddled
  whenever we change its size).

* Nanageddon i.e. a bug where the transform matrix of the pan-zoom
  layer (the SVG group that SVGPanZoom inserts for us) gets NaN
  (not a number) values causing an error (and broken pan/zoom
  functionality).
* Resolve this by registering the pan/zoom on the `$.nextTick` after mount
  rather than at mount time as the SVG was only initialised ~90% of the time.

* The progress icon was rotated but the point around which it was
  rotated was not specified. Safari/Webkit picked the centre of the
  object, Opera/Chromium picked the top-left corner. Hardcoded this
  into the rotation to avoid issues.
* Closes cylc#1078

* Setting stripNull for Added deltas could cause null-like values
  to be absent in the node data resulting in undefined errors.

* Caused by subscription omitting updates for the root family

* The central data store performs sorting so we don't need to bother
  the UIS to do this for us.

* Also add workflow icon and status columns to close cylc#1116

* Convert clunky buttons into slick toolbar.
* Allow the auto-refresh timer to be disabled and add a manual refresh
  option.
* Set edge colour to match node colour.

* Remove the old workflow store code which powered the local callbacks.
* Remove the local callbacks which have been replaced by the central
  data store.
  NOTE: Local callbacks are still possible, however, we don't need to provide
  a pattern for this as we currently have no uses.
* Move a function for easier testing.
* Fix tests.
* tests/unit/task: remove in favour of component tests

* Custom outputs were broken with the removal of the local callbacks.
* Before that custom outputs weren't being correctly associated with the
  jobs which created them.
* Tied outputs into messages in order to filter out the job which
  created the outputs. Closes cylc#1129
* Added messages in with outputs (after the filtering the default
  messages out). Closes cylc#595

* Fix the description which appears at the top of the mutation menu.
* This currently shows the node type and status.

* Remove a coupld of fields which were never used.
* Remove a few fields which are no longer required since the data
  store changes.

* Match the previous store implementation which sorted families before
  tasks in the tree.
* This is similar to directory/file sort rules and makes the tree view
  easier to read.

* Fix issue where nodes could sometimes be filtered "in" when they
  shouldn't have been as a result of the filter logic following the task
  tree rather than the family tree.

* The task icon was a temporary development / debugging tool no longer
  required

* Increase the default modifier size.
* Remove the outline for the queued modifier and increase the size of
  the horizontal bars.
* Fix the modifier translation to better work for a wider range of
  modifier sizes.
* Test the task icon with different modifier sizes.
* Add icon for the expired task state.

* Remove unused getter.
* Move getTree getter (test utility) into the unit tests.
* Comments ++;

* Provide an efficnent tree walking function as a vuex getter.
* Use this to provide node lists for each of the Cylc "views".

Co-authored-by: Ronnie Dutta <[email protected]>

* package: move wasm-loader from dependencies into devDependencies.
* graph: change edge transformation for transposed graphs
  * We use static "fudge factors" to align the node and edge layers.
  * The graph now uses separate factors for transposed and non-transposed
    graphs for cleaner layout.
* store: remove unnecessary familyPath variable.

* Reduce task size.
* Increase cycle size.
* Increase size of first job.

* In some situations subscriptions were not being merged causing the new
  view to be missing data.

* Fix issue where the $edges & $namespaces indicies were not being
  cleared when switching workflows.
* This caused duplicate edges in the graph view.

* Fixes an issue where we tried to mount the svgPanZoom component before
  the dimensions of the SVG document could be measured.
* This resulted in the console error:
  `Error: <g> attribute transform: Expected number, "matrix(NaN,0,0,NaN,NaN,…"`
* The solution is to check the dimensions of the first item in the
  document, once it exists and has non-zero dimensions the SVG is ready.

* A vertial scrollbar could appear in some browsers as a result of the
  view toolbar pushing the SVG outside of the tab.
* This makes the view toolbar a floating component to allow more space
  for the graph and prevent this issue.

* Updates are "merged" into our reactivate data blobs.
* This merging used to use a nested algorithm which attempted to merge
  updates in arrays.
* This isn't what we want as our updates are atomic, e.g. if an update
  contains `{childTasks: [{'id': 'a'}, {'id': 'b'}]}`, that means please
  update childTasks to match this data NOT please change the IDs of the
  first two childTasks on the node to match these values.

* Prevent parallel layout.
  This was unlikely but possible if layout time was greater than
  refresh time (~2s).
* Wait for nodes to be rendered before attempting to layout.
  Sometimes one or more nodes hadn't yet rendered when layout was
  attempted causing an error reading the node dimensions.
  There's no "wait for everything to render" function so we must place a
  check in a loop.
* Wait for all edges to be rendered before centering the graph.
  Auto-centering the graph on first load sometimes failed if the graph
  took a while to render.
  Put another condition in a loop to delay centering until the SVG is
  ready.
* Catch layout errors.
  If anything does go wrong during layout, the graph will now re-try
  next time rather than crashing.

* The `graphvizlib.wasm` file provided by `@hpcc-js/wasm` needs to be
  included in `dist/js`.
* It is then loaded async by a JS script imported by the graph view.
* At the time of writing we are using Webpack 4 which doesn't seem to
  play nicely with this approach so the best solution I can come up with
  is to symlink the wasm file into the `public/js` directory.
* This symlink will be broken until you `yarn install`.
* This hack might not be needed when we upgrade to Webpack 5, however,
  this might just be due to the way HPCC packages graphviz.

* Add edges into the offline data to allow the graph view to be tested
  offline.
* Add a basic cypress test which checks the layout gets completed and the nodes
  and edges get rendered.

* Allow the graph view to display graphs which don't contain any edges.

Co-authored-by: Ronnie Dutta <[email protected]>