Feature/dsl graph vuex persist (#251)

* Pr branch (#214)

* added simple route to tree graph

* added new component for workflow graph

* now displaying a svg circle, added some styling

* added a simple line generator to display grah

* moved code from js project to graph vue component, added new data in data.json

* removed old file, fixed click issues by a temporay hack'

* trying to integrate cytoscape graph@

* removed and changed some imports to make cytoscape graph work

* updated store import

* added loading of workflow to history component for testing

* removed typescript files

* added new test data

* added demo-data

* added store

* added event function map but in pure js

* added old tree component which will be updated

* changed name of store

* updated npm package of cytoscape to 3.16.0

* renamed tree vue file

* changed to receive events as props@

* history now loads workflow container instead of graph

* modiefied graph container to receive new props and set a small delay of displaying graph

* changed with and height of graph to fix problem with zoom

* now looping over events instead of workflow@

* added a new event map to get event info

* changed all eventtypes to map to servers json format

* updated store to receive both workflow id and child id

* updated graph component to send correct data to store

* added a function to set route to child

* changed the way childworkflow route is set in event map

* changed how parent is routed to

* changed variable name for parent route

* removed old function for routing

* removed home btn

* added a simpler way to change the route@

* added query to route to route to the graph format and not grid

* renamed showGraph variable to showTimeLine

* renamed variables and functions from showGraph to showTimeline

* toggling with flag instead of true false variable

* added a function setWorkflow which rezises the split window based on the variable graphView

* removed old link to tree graph

* added a refresh btn which forces a reload of the graph container

* sending isworkflow running to the history component from index

* refresh functioning, only on mount needs to bw fixed

* removed debugging msg

* Refresh btn now only shows if there is more data to reload

* only sending the prop (events) to graphView if it has been fetched and has length

* removed redundant code and changed variable names to better represent their functionalities

* revomed debugging code

* displaying graph on right side works but is hacky - needs to be fixed

* added flexbox to the container when the dag graph is displayed to layout the slider on the right

* added functionality which check route query to determine how to split the window@

* new name for class to match current class naming style

* removed commented code and console log

* changed to listen to query updates rather than store to update currently selected node

* removed node list from graph and not used function

* removed commented code

* added new function zoomtonode which is called on mount, if a eventId exist on query

* removed old console log

* removed not used method in store set rendered nodes

* removed functionality regarding rendered nodes (only relevant when we have a node list to the graph

* removed old console logs

* removed another debug console log

* added omit to router query when routing from/to child to avoid trying to display a node with same eventId which doesnt exist@

* added a check to see if eventId is definied on graph mount

* update route query when a node is clicked

* added a watch function which watches changes in event id query and then scrolls the grid to that event

* removed old on click functioanlity and added new to allow deselection of node

* removed eventlist and moved childbtn to topbar

* removed event list and all css linked to it and node list

* added and extra if statement to check if you have already clicked on bg

* removed old getters and setters in vue store

* added functionality to check if a node is clicked or not

* added matching top bar to canvas (same as grid)

* added new btn styling to match rest of the page, using the predefinted mixins@

* added proper buttons for parent and child routes@

* removed unecessary css code

* styled refresh button

* added a check to enableSplitting to not do it on graph view

* removed clickinfo from eventmap

* updated name of event info and removed click info

* removed old static workflow loading functionality and its corresponding data and props

* removed old event map functions and renamed the current one

* removed old code and renamed some variables

* removed old demo data

* changed child btn text to To Child

* changed variable names for better readability. Added overflow ellipse for workflow name text

* added new variables names to store for better readability regarding childworkflow

* added functionality to show child btn for previous execution run id

* functionality for changing the name of the parent btn, and only use run id as route

* updated continued as new event to return run ID

* added a new mutation to update route for new executions

* Change cytoscape version

* added functionality to make graph display child btn on grid click

* refractored current code for better readability

* removed onNodeClick function which is not necessary anymore

* added an extra check to make sure refresh btn is not showed unecessarily

* updated even connection functionality to not break for different chunk sizes

* removed old console log

* removed legend imports in graph component

* added legend to graph container

* added graph legend component and changed its styling a bit

* small html and css fixes

* moved legend to bottom of graph

* removed chunckWorfklow and code that is not used

* removed old graph file

* fixed pr comment on this=self, and simplified zoom

* removed unused import

* passing eventId as prop instead of listening to changes in query

* removed unnecessary async prefix for viewInit

* update to check for prop and not for route query

* changed from let to const for zoom lvl

* added map mupations to connect to store

* resolved merge conflicts

* added demo data to gitignore

* commented out demo data

* making sure cytoscape version stays on 3.16.0

* added a new file for calculating the layout using timestamps

* added a new file which keeps track of events and nodes and builds the graph

* removed unused function

* Order nodes by timestamp in graph visualization

* Enable chrono edges

* Avoid overlapping edges

* Apply lint --fix

* Disable chrono edges for large workflows

* Fix timeline elements test

* Use showGraph url parameter in tests

Co-authored-by: Aliaksei Talkachou <[email protected]>

* removing git ignore file

* updating package-lock and updating ordering in cytoscape component

* refactoring get-event-connections. fixing lint. adding missing licenses.

* minor refactorings

* minor refactoring

* updating start date in license headers

* moving files to a more logical structure.

* small refactor

* small refactor for legend

* adding license header

* fixing lint

* moving constants

* small rename refactor for graphView values.

* adjusting line in legend

* moving constants out of helper into constants file.

* moving comments for constants.

* moving more constants out

* reordering constants

* minor refactoring. removing some warnings in console.

* adjusting whitespace in legend

* fixing lint

* minor refactoring of CytoscapeLayout for better readability.

* minor refactor

* minor refactoring

* adjusting ordering

* breaking apart cytoscape layout into smaller helpers

* moving graph styles from helpers to constants.

* fixed unnecessary code

* moving out helper function

* removing route.query

* setting split direction to computed field

* adjusting name for split size constant

* fixing error in console

* removing unused packages.

* breaking apart graph helper into smaller files.

* adding license headers

* fixing lint

* removing unused prop

* moving to computed prop

* moving constant. moving to computed field

* simplifying code

* reference helper

* removing unused variables

* moving out more constants

* separating get event connections into smaller files.

* minor refactoring

* moving more constants out

* fixing lint

* updating comment

* tweaking vuex store to have graph namespace for application separation.

* fixing lint

* removing direct import reference to store in components.

* addressing PR comments

* allow vuex to persist state between browser refresh via localStorage.

* fixing lint

Co-authored-by: Emma Tysk <[email protected]>
Co-authored-by: Aliaksei Talkachou <[email protected]>

Author: 3 people

client/store/index.js

@@ -21,6 +21,7 @@
 
 import Vue from 'vue';
 import Vuex from 'vuex';
+import VuexPersistence from 'vuex-persist';
 
 // Graph store
 
@@ -77,6 +78,10 @@ const state = getDefaultState();
 
 Vue.use(Vuex);
 
+const vuexLocal = new VuexPersistence({
+  storage: window.localStorage,
+});
+
 const store = new Vuex.Store({
   state: state,
   mutations: {
@@ -85,6 +90,7 @@ const store = new Vuex.Store({
   getters: {
     ...graphGetters,
   },
+  plugins: [vuexLocal.plugin],
 });
 
 export default store;

package-lock.json

@@ -85,6 +85,7 @@
     "vue-virtual-scroller": "^1.0.0-rc.2",
     "vue2-datepicker": "^3.4.1",
     "vuex": "^3.5.1",
+    "vuex-persist": "^3.1.3",
     "webpack": "^3.12.0"
   },
   "devDependencies": {