From bfb5a73ed258c795ef9fe082cf2b6cfd93e93980 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 15 Dec 2022 14:13:30 -0700
Subject: [PATCH 01/20] Add pinia, remove vuex

---
 package.json |  3 +--
 yarn.lock    | 44 +++++++++++++++++++-------------------------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 7f5b65f7..26cace11 100644
--- a/package.json
+++ b/package.json
@@ -26,15 +26,14 @@
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^2.0.0",
     "d3-selection": "^2.0.0",
-    "direct-vuex": "^0.12.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "multinet": "^0.21.4",
     "multinet-components": "^0.0.1",
+    "pinia": "^2.0.28",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.1",
     "vue": "^2.7.0",
     "vuetify": "^2.6.10",
-    "vuex": "^3.5.1",
     "yorkie": "^2.0.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 42bb5c88..90e35923 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2950,6 +2950,11 @@
     postcss "^8.4.14"
     source-map "^0.6.1"
 
+"@vue/devtools-api@^6.4.5":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
+  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
+
 "@vue/eslint-config-airbnb@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-airbnb/-/eslint-config-airbnb-7.0.0.tgz#eb61c44f96ce17b57dd866a4086bdf757c869e40"
@@ -3136,7 +3141,7 @@ accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -3146,11 +3151,6 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
-acorn@^7.1.1:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 acorn@^8.7.1:
   version "8.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
@@ -5247,11 +5247,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-direct-vuex@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/direct-vuex/-/direct-vuex-0.12.0.tgz#aba06acc5def3c5cd8e26b6dabb0557e9d074ddf"
-  integrity sha512-yhIlQl9nfKtP55ZEomljcEsxq9rWWc6Fo/DhuU2SIN24qIa4VfTY1dcCAAOQrYdZt4+id5hHjWMdDFa0BDGgSw==
-
 django-s3-file-field@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/django-s3-file-field/-/django-s3-file-field-0.1.2.tgz#eeee3c4fcc9debca1c07f800d175fd8e559c076f"
@@ -5937,15 +5932,6 @@ eslint@8:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
 espree@^9.0.0, espree@^9.4.0:
   version "9.4.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
@@ -9153,6 +9139,14 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.0.28:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.28.tgz#887c982d854972042d9bdfd5bc4fad3b9d6ab02a"
+  integrity sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+    vue-demi "*"
+
 pirates@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
@@ -11500,6 +11494,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@*:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -11573,11 +11572,6 @@ vuetify@^2.6.10:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.10.tgz#b86cd7a97bf8cd3828a72c349795b5b3c539ebc2"
   integrity sha512-fgUeRDDCwYkwu6WGEEKGe7IdfzOsXJCZGrqkn1pcS2ycuoDL8mR2/dejH5iFNnBY6MnsT365PAGn0J+9otjfQg==
 
-vuex@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"
-  integrity sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw==
-
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"

From d6b2b57ed6bf89320254a2336bbe8886e64dc0d6 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 15 Dec 2022 14:15:50 -0700
Subject: [PATCH 02/20] Add pinia to our vue app

---
 src/main.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 4bb0f7ff..36442fc2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,14 +3,19 @@ import App from '@/App.vue';
 import vuetify from '@/plugins/vuetify';
 import api from '@/api';
 import oauthClient from '@/oauth';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 
 Vue.config.productionTip = false;
 
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
+
 oauthClient.maybeRestoreLogin().then(() => {
   Object.assign(api.axios.defaults.headers.common, oauthClient.authHeaders);
 
   new Vue({
     vuetify,
+    pinia,
     render: (h) => h(App),
   }).$mount('#app');
 });

From 1a102eccba7fb5d4ff98b5b0520df4cfc93d57e1 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 15 Dec 2022 14:54:22 -0700
Subject: [PATCH 03/20] Fix on commit linting

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 26cace11..3e476676 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "serve": "vite --host 0.0.0.0 --port 8080",
     "build": "vite build",
     "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --no-fix src",
+    "lint:file": "eslint --ext .ts,.vue --ignore-path .gitignore --no-fix",
     "lint:fix": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
@@ -61,10 +62,10 @@
   },
   "lint-staged": {
     "*.ts": [
-      "yarn lint"
+      "yarn lint:file"
     ],
     "*.vue": [
-      "yarn lint"
+      "yarn lint:file"
     ]
   }
 }

From ad2d36f28606fd1f761126a04fbaaeeb48c0d969 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 14:18:28 -0700
Subject: [PATCH 04/20] Migrate some components to use pinia store

---
 src/App.vue                     |  34 +++++++----
 src/components/ControlPanel.vue | 101 +++++++++-----------------------
 src/components/LegendChart.vue  |  52 +++++++++-------
 src/components/LegendPanel.vue  |  36 +++++-------
 4 files changed, 97 insertions(+), 126 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1d844356..485c11ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
-import store from '@/store';
-import { getUrlVars } from '@/lib/utils';
+import 'multinet-components/dist/style.css';
+import { storeToRefs } from 'pinia';
+import { useStore } from '@/store';
+import { getUrlVars } from './lib/utils';
 
 import AlertBanner from '@/components/AlertBanner.vue';
 import ControlPanel from '@/components/ControlPanel.vue';
 import MultiLink from '@/components/MultiLink.vue';
 import ProvVis from '@/components/ProvVis.vue';
 
-import 'multinet-components/dist/style.css';
+
+
+const store = useStore();
+const {
+  network,
+  selectedNodes,
+  loadError,
+  showProvenanceVis,
+} = storeToRefs(store);
 
 const urlVars = getUrlVars(); // Takes workspace and network
-store.dispatch.fetchNetwork({
-  workspaceName: urlVars.workspace,
-  networkName: urlVars.network,
-}).then(() => {
-  store.dispatch.createProvenance();
-  store.dispatch.guessLabel();
+store.fetchNetwork(
+  urlVars.workspace,
+  urlVars.network,
+).then(() => {
+  store.createProvenance();
+  store.guessLabel();
 });
 </script>
 
@@ -25,13 +35,13 @@ store.dispatch.fetchNetwork({
       <control-panel />
 
       <multi-link
-        v-if="store.state.network !== null && store.state.selectedNodes !== null"
+        v-if="network !== null && selectedNodes !== null"
       />
 
-      <alert-banner v-if="store.state.loadError.message !== ''" />
+      <alert-banner v-if="loadError.message !== ''" />
     </v-main>
 
-    <prov-vis v-if="store.state.showProvenanceVis" />
+    <prov-vis v-if="showProvenanceVis" />
   </v-app>
 </template>
 
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index b8ffbd74..1547da09 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -4,14 +4,30 @@ import { computed, Ref, ref } from 'vue';
 import LegendPanel from '@/components/LegendPanel.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 
-import store from '@/store';
+import { useStore } from '@/store/index';
 import { internalFieldNames } from '@/types';
 import oauthClient from '@/oauth';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  displayCharts,
+  layoutVars,
+  fontSize,
+  labelVariable,
+  selectNeighbors,
+  directionalEdges,
+  edgeLength,
+  controlsWidth,
+  simulationRunning,
+  columnTypes,
+  network,
+  selectedNodes,
+} = storeToRefs(store);
 
 const searchTerm = ref('');
 const searchErrors: Ref<string[]> = ref([]);
 const showMenu = ref(false);
-const network = computed(() => store.state.network);
 
 const multiVariableList = computed(() => {
   if (network.value !== null) {
@@ -30,73 +46,14 @@ const multiVariableList = computed(() => {
   return new Set();
 });
 
-const displayCharts = computed({
-  get() {
-    return store.state.displayCharts;
-  },
-  set(value: boolean) {
-    return store.commit.setDisplayCharts(value);
-  },
-});
-
-const layoutVars = computed(() => store.state.layoutVars);
 const markerSize = computed({
   get() {
-    return store.state.markerSize || 0;
+    return store.markerSize || 0;
   },
   set(value: number) {
-    store.commit.setMarkerSize({ markerSize: value, updateProv: false });
+    store.setMarkerSize({ markerSize: value, updateProv: false });
   },
 });
-
-const fontSize = computed({
-  get() {
-    return store.state.fontSize || 0;
-  },
-  set(value: number) {
-    store.commit.setFontSize({ fontSize: value, updateProv: false });
-  },
-});
-
-const labelVariable = computed({
-  get() {
-    return store.state.labelVariable;
-  },
-  set(value: string | undefined) {
-    store.commit.setLabelVariable(value);
-  },
-});
-
-const selectNeighbors = computed({
-  get() {
-    return store.state.selectNeighbors;
-  },
-  set(value: boolean) {
-    store.commit.setSelectNeighbors(value);
-  },
-});
-
-const directionalEdges = computed({
-  get() {
-    return store.state.directionalEdges;
-  },
-  set(value: boolean) {
-    store.commit.setDirectionalEdges(value);
-  },
-});
-
-const edgeLength = computed({
-  get() {
-    return store.state.edgeLength;
-  },
-  set(value: number) {
-    store.commit.setEdgeLength({ edgeLength: value, updateProv: false });
-  },
-});
-
-const controlsWidth = computed(() => store.state.controlsWidth);
-const simulationRunning = computed(() => store.state.simulationRunning);
-const columnTypes = computed(() => store.state.columnTypes);
 const autocompleteItems = computed(() => {
   if (network.value !== null && labelVariable.value !== undefined) {
     return network.value.nodes.map((node) => (node[labelVariable.value || '']));
@@ -130,7 +87,7 @@ function exportNetwork() {
       type: 'text/json',
     }),
   );
-  a.download = `${store.state.networkName}.json`;
+  a.download = `${store.networkName}.json`;
   a.click();
 }
 
@@ -142,7 +99,7 @@ function search() {
       .map((node) => node._id);
 
     if (nodeIDsToSelect.length > 0) {
-      store.commit.addSelectedNode(nodeIDsToSelect);
+      selectedNodes.value.add(nodeIDsToSelect);
     } else {
       searchErrors.value.push('Enter a valid node to search');
     }
@@ -151,15 +108,15 @@ function search() {
 
 function updateSliderProv(value: number, type: 'markerSize' | 'fontSize' | 'edgeLength') {
   if (type === 'markerSize') {
-    store.commit.setMarkerSize({ markerSize: value, updateProv: true });
+    store.setMarkerSize({ markerSize: value, updateProv: true });
   } else if (type === 'fontSize') {
-    store.commit.setFontSize({ fontSize: value, updateProv: true });
+    fontSize.value = value;
   } else if (type === 'edgeLength') {
-    store.commit.setEdgeLength({ edgeLength: value, updateProv: true });
+    store.setEdgeLength({ edgeLength: value, updateProv: true });
   }
 }
 
-const userInfo = computed(() => store.state.userInfo);
+const userInfo = computed(() => store.userInfo);
 </script>
 
 <template>
@@ -324,7 +281,7 @@ const userInfo = computed(() => store.state.userInfo);
                 color="grey darken-2"
                 depressed
                 small
-                @click="store.dispatch.releaseNodes()"
+                @click="store.releaseNodes()"
               >
                 <v-icon
                   left
@@ -342,7 +299,7 @@ const userInfo = computed(() => store.state.userInfo);
                 depressed
                 small
                 width="75"
-                @click="simulationRunning ? store.commit.stopSimulation() : store.commit.startSimulation()"
+                @click="simulationRunning ? store.stopSimulation() : store.startSimulation()"
               >
                 <v-icon
                   left
@@ -360,7 +317,7 @@ const userInfo = computed(() => store.state.userInfo);
               color="primary"
               block
               depressed
-              @click="store.commit.toggleShowProvenanceVis()"
+              @click="store.toggleShowProvenanceVis()"
             >
               Provenance Vis
             </v-btn>
diff --git a/src/components/LegendChart.vue b/src/components/LegendChart.vue
index 5b1e474d..7b37809e 100644
--- a/src/components/LegendChart.vue
+++ b/src/components/LegendChart.vue
@@ -8,11 +8,25 @@ import {
 } from 'd3-scale';
 import { select, selectAll } from 'd3-selection';
 import { Node, Edge } from '@/types';
-import store from '@/store';
+import { useStore } from '@/store/index';
 
 // Required for recursive definition of LegendChart
 // eslint-disable-next-line import/no-self-import
 import LegendChart from '@/components/LegendChart.vue';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  network,
+  columnTypes,
+  nestedVariables,
+  nodeBarColorScale,
+  nodeGlyphColorScale,
+  attributeRanges,
+  nodeSizeVariable,
+  nodeColorVariable,
+  edgeVariables,
+} = storeToRefs(store);
 
 const props = withDefaults(defineProps<{
   varName: string
@@ -30,16 +44,10 @@ const props = withDefaults(defineProps<{
 const yAxisPadding = 30;
 const svgHeight = props.mappedTo === 'bars' ? 75 : 50;
 
-const network = computed(() => store.state.network);
-const columnTypes = computed(() => store.state.columnTypes);
-const nestedVariables = computed(() => store.state.nestedVariables);
 const nodeSizeScale = computed(() => store.getters.nodeSizeScale);
 const nodeColorScale = computed(() => store.getters.nodeColorScale);
-const nodeBarColorScale = computed(() => store.state.nodeBarColorScale);
-const nodeGlyphColorScale = computed(() => store.state.nodeGlyphColorScale);
 const edgeWidthScale = computed(() => store.getters.edgeWidthScale);
 const edgeColorScale = computed(() => store.getters.edgeColorScale);
-const attributeRanges = computed(() => store.state.attributeRanges);
 
 // TODO: https://github.com/multinet-app/multilink/issues/176
 // use table name for var selection
@@ -68,15 +76,15 @@ function dragStart(event: DragEvent) {
 function unAssignVar(variable?: string) {
   if (props.type === 'node') {
     if (props.mappedTo === 'size') {
-      store.commit.setNodeSizeVariable('');
+      nodeSizeVariable.value = '';
     } else if (props.mappedTo === 'color') {
-      store.commit.setNodeColorVariable('');
+      nodeColorVariable.value = '';
     } else if (props.mappedTo === 'bars') {
       const newBarVars = nestedVariables.value.bar.filter(
         (barVar) => barVar !== variable,
       );
 
-      store.commit.setNestedVariables({
+      store.setNestedVariables({
         bar: newBarVars,
         glyph: nestedVariables.value.glyph,
       });
@@ -85,26 +93,26 @@ function unAssignVar(variable?: string) {
         (glyphVar) => glyphVar !== props.varName,
       );
 
-      store.commit.setNestedVariables({
+      store.setNestedVariables({
         bar: nestedVariables.value.bar,
         glyph: newGlyphVars,
       });
     } else if (props.mappedTo === 'x' || props.mappedTo === 'y') {
-      store.dispatch.applyVariableLayout({
+      store.applyVariableLayout({
         varName: null, axis: props.mappedTo,
       });
     }
   } else if (props.type === 'edge') {
     if (props.mappedTo === 'width') {
-      store.commit.setEdgeVariables({
+      edgeVariables.value = {
         width: '',
-        color: store.state.edgeVariables.color,
-      });
+        color: store.edgeVariables.color,
+      };
     } else if (props.mappedTo === 'color') {
-      store.commit.setEdgeVariables({
-        width: store.state.edgeVariables.width,
+      edgeVariables.value = {
+        width: store.edgeVariables.width,
         color: '',
-      });
+      };
     }
   }
 }
@@ -357,7 +365,7 @@ onMounted(() => {
 
     const bins = binGenerator(currentData);
 
-    store.commit.addAttributeRange({
+    store.addAttributeRange({
       attr: props.varName,
       min: xScale.domain()[0] || 0,
       max: xScale.domain()[1] || 0,
@@ -396,7 +404,7 @@ onMounted(() => {
     const binLabels: string[] = Array.from(bins.keys());
     const binValues: number[] = Array.from(bins.values());
 
-    store.commit.addAttributeRange({
+    store.addAttributeRange({
       attr: props.varName,
       min: parseFloat(min(binLabels) || '0'),
       max: parseFloat(max(binLabels) || '0'),
@@ -467,7 +475,7 @@ onMounted(() => {
           const firstIndex = Math.floor(((extent[0] - yAxisPadding) / (variableSvgWidth - yAxisPadding)) * attributeRanges.value[props.varName].binLabels.length);
           const secondIndex = Math.ceil(((extent[1] - yAxisPadding) / (variableSvgWidth - yAxisPadding)) * attributeRanges.value[props.varName].binLabels.length);
 
-          store.commit.addAttributeRange({
+          store.addAttributeRange({
             ...currentAttributeRange,
             currentBinLabels: currentAttributeRange.binLabels.slice(firstIndex, secondIndex),
             currentBinValues: currentAttributeRange.binValues.slice(firstIndex, secondIndex),
@@ -480,7 +488,7 @@ onMounted(() => {
           const newMin = (((extent[0] - yAxisPadding) / (variableSvgWidth - yAxisPadding)) * (currentAttributeRange.max - currentAttributeRange.min)) + currentAttributeRange.min;
           const newMax = (((extent[1] - yAxisPadding) / (variableSvgWidth - yAxisPadding)) * (currentAttributeRange.max - currentAttributeRange.min)) + currentAttributeRange.min;
 
-          store.commit.addAttributeRange({ ...currentAttributeRange, currentMax: newMax, currentMin: newMin });
+          store.addAttributeRange({ ...currentAttributeRange, currentMax: newMax, currentMin: newMin });
         }
       });
 
diff --git a/src/components/LegendPanel.vue b/src/components/LegendPanel.vue
index 0581f11c..daa67334 100644
--- a/src/components/LegendPanel.vue
+++ b/src/components/LegendPanel.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import store from '@/store';
+import { useStore } from '@/store/index';
 import { internalFieldNames, Edge, Node } from '@/types';
 import DragTarget from '@/components/DragTarget.vue';
 import LegendChart from '@/components/LegendChart.vue';
-
-const tab = ref(undefined);
-
-const network = computed(() => store.state.network);
-const nestedVariables = computed(() => store.state.nestedVariables);
-const edgeVariables = computed(() => store.state.edgeVariables);
-const nodeSizeVariable = computed(() => store.state.nodeSizeVariable);
-const nodeColorVariable = computed(() => store.state.nodeColorVariable);
-const columnTypes = computed(() => store.state.columnTypes);
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  network,
+  nestedVariables,
+  edgeVariables,
+  nodeSizeVariable,
+  nodeColorVariable,
+  columnTypes,
+  displayCharts,
+  layoutVars,
+} = storeToRefs(store);
+
+const tab = ref(0);
 
 function cleanVariableList(list: Set<string>): Set<string> {
   const cleanedVariables = new Set<string>();
@@ -59,17 +65,7 @@ const cleanedEdgeVariables = computed(() => {
   return new Set();
 });
 
-const displayCharts = computed({
-  get() {
-    return store.state.displayCharts;
-  },
-  set(value: boolean) {
-    return store.commit.setDisplayCharts(value);
-  },
-});
-
 const attributeLayout = ref(false);
-const layoutVars = computed(() => store.state.layoutVars);
 </script>
 
 <template>

From 65b4622a40567c559d30b5113e0b6d71991b6591 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 14:53:46 -0700
Subject: [PATCH 05/20] Fix issue with importing multinet components

---
 vite.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.js b/vite.config.js
index b4d6c4e1..300f2aca 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,5 +20,6 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
+    dedupe: ['vuetify/lib'],
   },
 });

From 20ea8c70c0d2a85999e290172fd71a272b16c81e Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:21:25 -0700
Subject: [PATCH 06/20] Fix some types for vue 2.7 reactivity

---
 src/App.vue  | 4 +---
 src/types.ts | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 485c11ef..4807f262 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,9 +34,7 @@ store.fetchNetwork(
     <v-main>
       <control-panel />
 
-      <multi-link
-        v-if="network !== null && selectedNodes !== null"
-      />
+      <multi-link v-if="network !== null" />
 
       <alert-banner v-if="loadError.message !== ''" />
     </v-main>
diff --git a/src/types.ts b/src/types.ts
index e6308910..7b141b94 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -90,7 +90,7 @@ export interface State {
   networkName: string | null;
   network: Network | null;
   columnTypes: ColumnTypes | null;
-  selectedNodes: Set<string>;
+  selectedNodes: string[];
   loadError: LoadError;
   displayCharts: boolean;
   markerSize: number;
@@ -103,11 +103,11 @@ export interface State {
   nodeColorVariable: string;
   attributeRanges: AttributeRanges;
   simulation: Simulation<Node, SimulationEdge> | null;
-  nodeColorScale: ScaleSequential<string> | ScaleOrdinal<string, string>;
+  nodeColorScaleNoDomain: ScaleSequential<string> | ScaleOrdinal<string, string>;
   nodeBarColorScale: ScaleOrdinal<string, string>;
   nodeGlyphColorScale: ScaleOrdinal<string, string>;
-  edgeWidthScale: ScaleLinear<number, number>;
-  edgeColorScale: ScaleSequential<string> | ScaleOrdinal<string, string>;
+  edgeWidthScaleNoDomain: ScaleLinear<number, number>;
+  edgeColorScaleNoDomain: ScaleSequential<string> | ScaleOrdinal<string, string>;
   provenance: Provenance<State, ProvenanceEventTypes, unknown> | null;
   directionalEdges: boolean;
   controlsWidth: number;

From 899d95781e31671d4b81c778c68af1179b985192 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:32:57 -0700
Subject: [PATCH 07/20] Fix up a some more components for the new store

---
 src/components/AlertBanner.vue  | 18 +++++++++---------
 src/components/ContextMenu.vue  | 18 +++++++++++-------
 src/components/ControlPanel.vue |  2 +-
 src/components/DragTarget.vue   | 31 +++++++++++++++++++------------
 src/components/LegendChart.vue  |  8 ++++----
 5 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/components/AlertBanner.vue b/src/components/AlertBanner.vue
index 2bfb7d11..66dc592e 100644
--- a/src/components/AlertBanner.vue
+++ b/src/components/AlertBanner.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import {
-  computed, Ref, ref, watchEffect,
-} from 'vue';
-import store from '@/store';
+import { ref, watchEffect } from 'vue';
+import { useStore } from '@/store/index';
 import api from '@/api';
+import { storeToRefs } from 'pinia';
 
-const loadError = computed(() => store.state.loadError);
+const store = useStore();
+const { loadError } = storeToRefs(store);
 
 // Vars to store the selected choices in
-const workspace: Ref<string | null> = ref(null);
-const network: Ref<string | null> = ref(null);
+const workspace = ref<string | null>(null);
+const network = ref<string | null>(null);
 
 // Compute the workspace/network options
-const workspaceOptions: Ref<string[]> = ref([]);
+const workspaceOptions = ref<string[]>([]);
 watchEffect(async () => {
   workspaceOptions.value = (await api.workspaces()).results.map((workspaceObj) => workspaceObj.name);
 });
 
-const networkOptions: Ref<string[]> = ref([]);
+const networkOptions = ref<string[]>([]);
 watchEffect(async () => {
   if (workspace.value !== null) {
     networkOptions.value = (await api.networks(workspace.value)).results.map((networkObj) => networkObj.name);
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index bc13903c..dc70b48b 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import store from '@/store';
+import { useStore } from '@/store/index';
+import { storeToRefs } from 'pinia';
 
-const network = computed(() => store.state.network);
-const selectedNodes = computed(() => store.state.selectedNodes);
+const store = useStore();
+const {
+  network,
+  selectedNodes,
+} = storeToRefs(store);
 
 function pinSelectedNodes() {
   if (network.value !== null) {
     network.value.nodes
-      .filter((node) => selectedNodes.value.has(node._id))
+      .filter((node) => selectedNodes.value.includes(node._id))
       .forEach((node) => {
         node.fx = node.x;
         node.fy = node.y;
@@ -18,7 +22,7 @@ function pinSelectedNodes() {
 function unPinSelectedNodes() {
   if (network.value !== null) {
     network.value.nodes
-      .filter((node) => selectedNodes.value.has(node._id))
+      .filter((node) => selectedNodes.value.includes(node._id))
       .forEach((node) => {
         delete node.fx;
         delete node.fy;
@@ -26,7 +30,7 @@ function unPinSelectedNodes() {
   }
 }
 
-const rightClickMenu = computed(() => store.state.rightClickMenu);
+const rightClickMenu = computed(() => store.rightClickMenu);
 </script>
 
 <template>
@@ -41,7 +45,7 @@ const rightClickMenu = computed(() => store.state.rightClickMenu);
       <v-list>
         <v-list-item
           dense
-          @click="store.commit.setSelected(new Set())"
+          @click="store.selectedNodes = []"
         >
           <v-list-item-content>
             <v-list-item-title>Clear Selection</v-list-item-title>
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 1547da09..96be7c63 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -99,7 +99,7 @@ function search() {
       .map((node) => node._id);
 
     if (nodeIDsToSelect.length > 0) {
-      selectedNodes.value.add(nodeIDsToSelect);
+      selectedNodes.value.push(...nodeIDsToSelect);
     } else {
       searchErrors.value.push('Enter a valid node to search');
     }
diff --git a/src/components/DragTarget.vue b/src/components/DragTarget.vue
index 1a769c54..af1b8a02 100644
--- a/src/components/DragTarget.vue
+++ b/src/components/DragTarget.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import store from '@/store';
+import { useStore } from '@/store/index';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  edgeVariables,
+  nestedVariables,
+  nodeSizeVariable,
+  nodeColorVariable,
+} = storeToRefs(store);
+
 
 const props = withDefaults(defineProps<{
   title: string
@@ -10,9 +20,6 @@ const props = withDefaults(defineProps<{
   showTitle: true,
 });
 
-const edgeVariables = computed(() => store.state.edgeVariables);
-const nestedVariables = computed(() => store.state.nestedVariables);
-
 function elementDrop(event: DragEvent) {
   if (event.dataTransfer === null) {
     return;
@@ -25,23 +32,23 @@ function elementDrop(event: DragEvent) {
       bar: [...nestedVariables.value.bar, droppedVarName],
       glyph: nestedVariables.value.glyph,
     };
-    store.commit.setNestedVariables(updatedNestedVars);
+    store.setNestedVariables(updatedNestedVars);
   } else if (props.type === 'node' && props.title === 'glyphs') {
     const updatedNestedVars = {
       bar: nestedVariables.value.bar,
       glyph: [...nestedVariables.value.glyph, droppedVarName],
     };
-    store.commit.setNestedVariables(updatedNestedVars);
+    store.setNestedVariables(updatedNestedVars);
   } else if (props.type === 'node' && props.title === 'size') {
-    store.commit.setNodeSizeVariable(droppedVarName);
+    nodeSizeVariable.value = droppedVarName;
   } else if (props.type === 'node' && props.title === 'color') {
-    store.commit.setNodeColorVariable(droppedVarName);
+    nodeColorVariable.value = droppedVarName;
   } else if (props.type === 'node' && props.title === 'x variable') {
-    store.dispatch.applyVariableLayout({
+    store.applyVariableLayout({
       varName: droppedVarName, axis: 'x',
     });
   } else if (props.type === 'node' && props.title === 'y variable') {
-    store.dispatch.applyVariableLayout({
+    store.applyVariableLayout({
       varName: droppedVarName, axis: 'y',
     });
   } else if (props.type === 'edge' && props.title === 'width') {
@@ -49,13 +56,13 @@ function elementDrop(event: DragEvent) {
       width: droppedVarName,
       color: edgeVariables.value.color,
     };
-    store.commit.setEdgeVariables(updatedEdgeVars);
+    edgeVariables.value = updatedEdgeVars;
   } else if (props.type === 'edge' && props.title === 'color') {
     const updatedEdgeVars = {
       width: edgeVariables.value.width,
       color: droppedVarName,
     };
-    store.commit.setEdgeVariables(updatedEdgeVars);
+    edgeVariables.value = updatedEdgeVars;
   }
 }
 </script>
diff --git a/src/components/LegendChart.vue b/src/components/LegendChart.vue
index 7b37809e..7e454b51 100644
--- a/src/components/LegendChart.vue
+++ b/src/components/LegendChart.vue
@@ -44,10 +44,10 @@ const props = withDefaults(defineProps<{
 const yAxisPadding = 30;
 const svgHeight = props.mappedTo === 'bars' ? 75 : 50;
 
-const nodeSizeScale = computed(() => store.getters.nodeSizeScale);
-const nodeColorScale = computed(() => store.getters.nodeColorScale);
-const edgeWidthScale = computed(() => store.getters.edgeWidthScale);
-const edgeColorScale = computed(() => store.getters.edgeColorScale);
+const nodeSizeScale = computed(() => store.nodeSizeScale);
+const nodeColorScale = computed(() => store.nodeColorScale);
+const edgeWidthScale = computed(() => store.edgeWidthScale);
+const edgeColorScale = computed(() => store.edgeColorScale);
 
 // TODO: https://github.com/multinet-app/multilink/issues/176
 // use table name for var selection

From 52f7bdfa454b1736792b2c65af336c9213f37400 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:34:49 -0700
Subject: [PATCH 08/20] Fix up multilink for the new store

---
 src/components/MultiLink.vue | 165 ++++++++++++++++++-----------------
 1 file changed, 85 insertions(+), 80 deletions(-)

diff --git a/src/components/MultiLink.vue b/src/components/MultiLink.vue
index 70bddbb8..d464498b 100644
--- a/src/components/MultiLink.vue
+++ b/src/components/MultiLink.vue
@@ -7,30 +7,47 @@ import {
   forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY,
 } from 'd3-force';
 import { select } from 'd3-selection';
-
 import {
   computed, getCurrentInstance, onMounted, ref, Ref, watch,
 } from 'vue';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { ColumnType } from 'multinet';
-import store from '@/store';
+import { useStore } from '@/store/index';
 import {
   Node, Edge, SimulationEdge, AttributeRange,
 } from '@/types';
-
 import ContextMenu from '@/components/ContextMenu.vue';
 import { applyForceToSimulation } from '@/lib/d3ForceUtils';
 import { isInternalField } from '@/lib/typeUtils';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const {
+  network,
+  selectedNodes,
+  nodeBarColorScale,
+  nestedVariables,
+  markerSize,
+  displayCharts,
+  labelVariable,
+  selectNeighbors,
+  attributeRanges,
+  columnTypes,
+  controlsWidth,
+  directionalEdges,
+  layoutVars,
+  nodeSizeVariable,
+  nodeColorVariable,
+  edgeVariables,
+  nodeGlyphColorScale,
+  simulation,
+} = storeToRefs(store);
 
 // Commonly used variables
 const currentInstance = getCurrentInstance();
-const network = computed(() => store.state.network);
 const multiLinkSvg: Ref<Element | null> = ref(null);
-const selectedNodes = computed(() => store.state.selectedNodes);
-const nodeBarColorScale = computed(() => store.state.nodeBarColorScale);
-const nodeTextStyle = computed(() => `font-size: ${store.state.fontSize || 0}pt;`);
-const nestedVariables = computed(() => store.state.nestedVariables);
-const markerSize = computed(() => store.state.markerSize || 0);
+const nodeTextStyle = computed(() => `font-size: ${store.fontSize || 0}pt;`);
+
 const nestedPadding = ref(5);
 const nestedBarWidth = computed(() => {
   const hasGlyphs = nestedVariables.value.glyph.length !== 0;
@@ -42,11 +59,6 @@ const nestedBarWidth = computed(() => {
   return (markerSize.value - totalPadding) / (totalColumns);
 });
 const nestedBarHeight = computed(() => markerSize.value - 24);
-const displayCharts = computed(() => store.state.displayCharts);
-const labelVariable = computed(() => store.state.labelVariable);
-const selectNeighbors = computed(() => store.state.selectNeighbors);
-const attributeRanges = computed(() => store.state.attributeRanges);
-const columnTypes = computed(() => store.state.columnTypes);
 const attributeScales = computed(() => {
   const scales: {[key: string]: ScaleLinear<number, number>} = {};
 
@@ -59,11 +71,8 @@ const attributeScales = computed(() => {
   }
   return scales;
 });
-const controlsWidth = computed(() => store.state.controlsWidth);
-const directionalEdges = computed(() => store.state.directionalEdges);
-const edgeColorScale = computed(() => store.getters.edgeColorScale);
+const edgeColorScale = computed(() => store.edgeColorScale);
 const clipRegionSize = 100;
-const layoutVars = computed(() => store.state.layoutVars);
 
 // Update height and width as the window size changes
 // Also update center attraction forces as the size changes
@@ -72,12 +81,12 @@ const svgDimensions = computed(() => {
   const width = currentInstance !== null ? currentInstance.proxy.$vuetify.breakpoint.width - controlsWidth.value : 0;
 
   applyForceToSimulation(
-    store.state.simulation,
+    store.simulation,
     'x',
     forceX<Node>(width / 2),
   );
   applyForceToSimulation(
-    store.state.simulation,
+    store.simulation,
     'y',
     forceY<Node>(height / 2),
   );
@@ -86,37 +95,37 @@ const svgDimensions = computed(() => {
     height,
     width,
   };
-  store.commit.setSvgDimensions(dimensions);
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+  store.svgDimensions = dimensions;
 
   return dimensions;
 });
 watch([svgDimensions], () => {
   // If we're in a static layout, then redraw the layout
-  const xLayout = store.state.layoutVars.x !== null;
-  const yLayout = store.state.layoutVars.y !== null;
+  const xLayout = layoutVars.value.x !== null;
+  const yLayout = layoutVars.value.y !== null;
   if (xLayout) {
-    store.dispatch.applyVariableLayout({ varName: store.state.layoutVars.x || '', axis: 'x' });
+    store.applyVariableLayout({ varName: layoutVars.value.x || '', axis: 'x' });
   }
 
   if (yLayout) {
-    store.dispatch.applyVariableLayout({ varName: store.state.layoutVars.y || '', axis: 'y' });
+    store.applyVariableLayout({ varName: layoutVars.value.y || '', axis: 'y' });
   }
 
   if (!xLayout && !yLayout) {
-    store.commit.startSimulation();
+    store.startSimulation();
   }
 });
 
 function selectNode(node: Node) {
-  if (selectedNodes.value.has(node._id)) {
-    store.commit.removeSelectedNode(node._id);
+  if (selectedNodes.value.includes(node._id)) {
+    selectedNodes.value = selectedNodes.value.filter((inside) => inside !== node._id);
   } else {
-    store.commit.addSelectedNode([node._id]);
+    selectedNodes.value.push(node._id);
   }
 }
 
-const nodeSizeVariable = computed(() => store.state.nodeSizeVariable);
-const nodeSizeScale = computed(() => store.getters.nodeSizeScale);
+const nodeSizeScale = computed(() => store.nodeSizeScale);
 function calculateNodeSize(node: Node) {
   // Don't render dynamic node size if the size variable is empty or
   // we want to display charts
@@ -153,7 +162,7 @@ function dragNode(node: Node, event: MouseEvent) {
     const eventX = evt.x - controlsWidth.value - (calculateNodeSize(node) / 2);
     const eventY = evt.y - (calculateNodeSize(node) / 2);
 
-    if (selectedNodes.value.has(node._id)) {
+    if (selectedNodes.value.includes(node._id)) {
       const nodeX = Math.floor(node.x || 0);
       const nodeY = Math.floor(node.y || 0);
       const dx = eventX - nodeX;
@@ -161,7 +170,7 @@ function dragNode(node: Node, event: MouseEvent) {
 
       if (network.value !== null) {
         network.value.nodes
-          .filter((innerNode) => selectedNodes.value.has(innerNode._id) && innerNode._id !== node._id)
+          .filter((innerNode) => selectedNodes.value.includes(innerNode._id) && innerNode._id !== node._id)
           .forEach((innerNode) => {
             innerNode.x = (innerNode.x || 0) + dx;
             innerNode.y = (innerNode.y || 0) + dy;
@@ -259,13 +268,13 @@ function arcPath(edge: Edge): string {
 }
 
 function isSelected(nodeID: string): boolean {
-  return selectedNodes.value.has(nodeID);
+  return selectedNodes.value.includes(nodeID);
 }
 
 const oneHop = computed(() => {
   if (network.value !== null) {
-    const inNodes = network.value.edges.map((edge) => (selectedNodes.value.has(edge._to) ? edge._from : null));
-    const outNodes = network.value.edges.map((edge) => (selectedNodes.value.has(edge._from) ? edge._to : null));
+    const inNodes = network.value.edges.map((edge) => (selectedNodes.value.includes(edge._to) ? edge._from : null));
+    const outNodes = network.value.edges.map((edge) => (selectedNodes.value.includes(edge._from) ? edge._to : null));
 
     const oneHopNodeIDs: Set<string | null> = new Set([...outNodes, ...inNodes]);
 
@@ -279,7 +288,7 @@ const oneHop = computed(() => {
   return new Set();
 });
 function nodeGroupClass(node: Node): string {
-  if (selectedNodes.value.size > 0) {
+  if (selectedNodes.value.length > 0) {
     const selected = isSelected(node._id);
     const inOneHop = selectNeighbors.value ? oneHop.value.has(node._id) : false;
     const selectedClass = selected || inOneHop || !selectNeighbors.value ? '' : 'muted';
@@ -295,8 +304,7 @@ function nodeClass(node: Node): string {
   return `node nodeBox ${selectedClass}`;
 }
 
-const nodeColorVariable = computed(() => store.state.nodeColorVariable);
-const nodeColorScale = computed(() => store.getters.nodeColorScale);
+const nodeColorScale = computed(() => store.nodeColorScale);
 function nodeFill(node: Node) {
   const calculatedValue = node[nodeColorVariable.value];
   const useCalculatedValue = !displayCharts.value && columnTypes.value !== null
@@ -320,7 +328,7 @@ function nodeFill(node: Node) {
 }
 
 function edgeGroupClass(edge: Edge): string {
-  if (selectedNodes.value.size > 0) {
+  if (selectedNodes.value.length > 0) {
     const selected = isSelected(edge._from) || isSelected(edge._to);
     const selectedClass = selected || !selectNeighbors.value ? '' : 'muted';
     return `edgeGroup ${selectedClass}`;
@@ -328,8 +336,7 @@ function edgeGroupClass(edge: Edge): string {
   return 'edgeGroup';
 }
 
-const edgeWidthScale = computed(() => store.getters.edgeWidthScale);
-const edgeVariables = computed(() => store.state.edgeVariables);
+const edgeWidthScale = computed(() => store.edgeWidthScale);
 function edgeStyle(edge: Edge): string {
   const edgeWidth = edgeVariables.value.width === '' ? 1 : edgeWidthScale.value(edge[edgeVariables.value.width]);
 
@@ -357,7 +364,6 @@ function edgeStyle(edge: Edge): string {
       `;
 }
 
-const nodeGlyphColorScale = computed(() => store.state.nodeGlyphColorScale);
 function glyphFill(node: Node, glyphVar: string) {
   // Figure out what values should be mapped to colors
   const possibleValues = [
@@ -429,7 +435,7 @@ function rectSelectDrag(event: MouseEvent) {
 
     // If x1 == x2 && y1 == y2, it was a click so deselect
     if (boxX1 === boxX2 && boxY1 === boxY2) {
-      store.commit.setSelected(new Set());
+      selectedNodes.value = [];
     }
 
     // Find which nodes are in the box
@@ -445,7 +451,7 @@ function rectSelectDrag(event: MouseEvent) {
     }
 
     // Select the nodes inside the box if there are any
-    store.commit.addSelectedNode(nodesInRect.map((node) => node._id));
+    nodesInRect.forEach((node) => selectedNodes.value.push(node._id));
 
     // Remove the listeners so that the box stops updating location
     if (!(multiLinkSvg.value instanceof Element)) {
@@ -473,11 +479,11 @@ function rectSelectDrag(event: MouseEvent) {
 }
 
 function showContextMenu(event: MouseEvent) {
-  store.commit.updateRightClickMenu({
+  store.rightClickMenu = {
     show: true,
     top: event.y,
     left: event.x,
-  });
+  };
 
   event.preventDefault();
 }
@@ -519,7 +525,7 @@ watch(attributeRanges, () => {
     });
 
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'edge',
       forceLink<Node, SimulationEdge>(simEdges).id((d) => { const datum = (d as Edge); return datum._id; }).strength(0.5),
     );
@@ -532,27 +538,27 @@ function resetSimulationForces() {
     // Double force to the middle of each axis if there's a layout var. Causes the nodes to be pulled to the middle.
     const forceStrength = layoutVars.value.x === null && layoutVars.value.y === null ? 1 : 2;
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'x',
       forceX<Node>(svgDimensions.value.width / 2).strength(forceStrength),
     );
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'y',
       forceY<Node>(svgDimensions.value.height / 2).strength(forceStrength),
     );
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'edge',
       forceLink<Node, SimulationEdge>(simulationEdges.value).id((d) => { const datum = (d as Edge); return datum._id; }).strength(1),
     );
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'charge',
       forceManyBody<Node>().strength(-500),
     );
     applyForceToSimulation(
-      store.state.simulation,
+      simulation.value,
       'collision',
       forceCollide((markerSize.value / 2) * 1.5),
     );
@@ -613,11 +619,11 @@ function makePositionScale(axis: 'x' | 'y', type: ColumnType, range: AttributeRa
   }
 
   if (axis === 'x') {
-    const minMax = [clipLow ? yAxisPadding + clipRegionSize : yAxisPadding, clipHigh ? store.state.svgDimensions.width - clipRegionSize : store.state.svgDimensions.width];
+    const minMax = [clipLow ? yAxisPadding + clipRegionSize : yAxisPadding, clipHigh ? svgDimensions.value.width - clipRegionSize : svgDimensions.value.width];
     positionScale = positionScale
       .range(minMax);
   } else {
-    const minMax = [clipLow ? store.state.svgDimensions.height - xAxisPadding - clipRegionSize : store.state.svgDimensions.height - xAxisPadding, clipHigh ? clipRegionSize : 0];
+    const minMax = [clipLow ? svgDimensions.value.height - xAxisPadding - clipRegionSize : svgDimensions.value.height - xAxisPadding, clipHigh ? clipRegionSize : 0];
     positionScale = positionScale
       .range(minMax);
   }
@@ -626,18 +632,18 @@ function makePositionScale(axis: 'x' | 'y', type: ColumnType, range: AttributeRa
 
   if (varName !== null) {
     // Set node size smaller
-    store.commit.setMarkerSize({ markerSize: 10, updateProv: true });
+    store.setMarkerSize({ markerSize: 10, updateProv: true });
 
     // Clear the label variable
-    store.commit.setLabelVariable(undefined);
+    labelVariable.value = undefined;
 
-    if (store.state.network !== null && store.state.columnTypes !== null) {
+    if (network.value !== null && columnTypes.value !== null) {
       const otherAxisPadding = axis === 'x' ? 80 : 60;
 
       if (type === 'number') {
         const scaleDomain = positionScale.domain();
         const scaleRange = positionScale.range();
-        store.state.network.nodes.forEach((node) => {
+        network.value.nodes.forEach((node) => {
           const nodeVal = node[varName];
           let position = positionScale(nodeVal);
 
@@ -653,7 +659,7 @@ function makePositionScale(axis: 'x' | 'y', type: ColumnType, range: AttributeRa
           node[axis] = position;
           node[`f${axis}`] = position;
 
-          if (store.state.layoutVars[otherAxis] === null) {
+          if (layoutVars.value[otherAxis] === null) {
             node[`f${otherAxis}`] = undefined;
           }
         });
@@ -661,34 +667,34 @@ function makePositionScale(axis: 'x' | 'y', type: ColumnType, range: AttributeRa
         let positionOffset: number;
 
         if (axis === 'x') {
-          positionOffset = (store.state.svgDimensions.width - otherAxisPadding) / ((range.binLabels.length) * 2);
+          positionOffset = (svgDimensions.value.width - otherAxisPadding) / ((range.binLabels.length) * 2);
         } else {
-          positionOffset = ((store.state.svgDimensions.height - xAxisPadding) / ((range.binLabels.length) * 2)) - 10;
+          positionOffset = ((svgDimensions.value.height - xAxisPadding) / ((range.binLabels.length) * 2)) - 10;
         }
 
         const force = axis === 'x' ? forceX<Node>((d) => positionScale(d[varName]) + positionOffset).strength(2) : forceY<Node>((d) => positionScale(d[varName]) + positionOffset).strength(2);
         applyForceToSimulation(
-          store.state.simulation,
+          simulation.value,
           axis,
           force,
         );
         applyForceToSimulation(
-          store.state.simulation,
+          simulation.value,
           'edge',
           forceLink<Node, SimulationEdge>(),
         );
         applyForceToSimulation(
-          store.state.simulation,
+          simulation.value,
           'charge',
           forceManyBody<Node>(),
         );
       }
     }
-  } else if (store.state.layoutVars[otherAxis] === null) {
-    store.dispatch.releaseNodes();
+  } else if (layoutVars.value[otherAxis] === null) {
+    store.releaseNodes();
   }
 
-  store.commit.startSimulation();
+  store.startSimulation();
   return positionScale;
 }
 
@@ -706,9 +712,9 @@ watch(layoutVars, () => {
   resetSimulationForces();
 
   // Add x layout
-  if (store.state.columnTypes !== null && layoutVars.value.x !== null) {
-    const type = store.state.columnTypes[layoutVars.value.x];
-    const range = store.state.attributeRanges[layoutVars.value.x];
+  if (columnTypes.value !== null && layoutVars.value.x !== null) {
+    const type = columnTypes.value[layoutVars.value.x];
+    const range = attributeRanges.value[layoutVars.value.x];
 
     const positionScale = makePositionScale('x', type, range);
 
@@ -732,7 +738,7 @@ watch(layoutVars, () => {
       .attr('fill', 'currentColor')
       .attr('font-size', '14px')
       .attr('font-weight', 'bold')
-      .attr('x', ((store.state.svgDimensions.width - yAxisPadding) / 2) + yAxisPadding)
+      .attr('x', ((svgDimensions.value.width - yAxisPadding) / 2) + yAxisPadding)
       .attr('y', xAxisPadding - 20);
 
     const labelRectPos = (label.node() as SVGTextElement).getBBox();
@@ -746,9 +752,9 @@ watch(layoutVars, () => {
   }
 
   // Add y layout
-  if (store.state.columnTypes !== null && layoutVars.value.y !== null) {
-    const type = store.state.columnTypes[layoutVars.value.y];
-    const range = store.state.attributeRanges[layoutVars.value.y];
+  if (columnTypes.value !== null && layoutVars.value.y !== null) {
+    const type = columnTypes.value[layoutVars.value.y];
+    const range = attributeRanges.value[layoutVars.value.y];
 
     const positionScale = makePositionScale('y', type, range);
 
@@ -774,7 +780,7 @@ watch(layoutVars, () => {
       .attr('font-size', '14px')
       .attr('font-weight', 'bold')
       .attr('text-anchor', 'middle')
-      .attr('x', ((store.state.svgDimensions.height - xAxisPadding - 10) / 2) + 10)
+      .attr('x', ((svgDimensions.value.height - xAxisPadding - 10) / 2) + 10)
       .attr('y', yAxisPadding - 20);
 
     const labelRectPos = (label.node() as SVGTextElement).getBBox();
@@ -797,7 +803,7 @@ const maximumY = svgDimensions.value.height - svgEdgePadding;
 onMounted(() => {
   if (network.value !== null && simulationEdges.value !== null) {
     // Make the simulation
-    const simulation = forceSimulation<Node, SimulationEdge>(network.value.nodes)
+    simulation.value = forceSimulation<Node, SimulationEdge>(network.value.nodes)
       .on('tick', () => {
         network.value?.nodes.forEach((node) => {
           if (node.x !== undefined && node.y !== undefined) {
@@ -819,12 +825,11 @@ onMounted(() => {
     // The next line handles the start stop button change in the controls.
     // It's not explicitly necessary for the simulation to work
       .on('end', () => {
-        store.commit.stopSimulation();
+        store.stopSimulation();
       });
 
-    store.commit.setSimulation(simulation);
     resetSimulationForces(); // Initialize simulation forces
-    store.commit.startSimulation();
+    store.startSimulation();
     resetAxesClipRegions();
   }
 });

From 332b30121aef180551722f2f464b8a4515cf2775 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:36:29 -0700
Subject: [PATCH 09/20] Fix up provenance vis for the new store

---
 src/components/ControlPanel.vue |  2 +-
 src/components/ProvVis.vue      | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 96be7c63..7fbc7454 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -317,7 +317,7 @@ const userInfo = computed(() => store.userInfo);
               color="primary"
               block
               depressed
-              @click="store.toggleShowProvenanceVis()"
+              @click="store.showProvenanceVis = true"
             >
               Provenance Vis
             </v-btn>
diff --git a/src/components/ProvVis.vue b/src/components/ProvVis.vue
index 8ae916b1..f08c85f8 100644
--- a/src/components/ProvVis.vue
+++ b/src/components/ProvVis.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ProvVisCreator } from '@visdesignlab/trrack-vis';
 import { computed, onMounted, ref } from 'vue';
-import store from '@/store';
+import { useStore } from '@/store/index';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const { provenance } = storeToRefs(store);
 
-const provenance = computed(() => store.state.provenance);
 const provDiv = ref();
 
 onMounted(() => {
@@ -11,7 +14,7 @@ onMounted(() => {
     ProvVisCreator(
       provDiv.value,
       provenance.value,
-      (newNode: string) => store.commit.goToProvenanceNode(newNode),
+      (newNode: string) => store.goToProvenanceNode(newNode),
       true,
       true,
       provenance.value.root.id,
@@ -30,7 +33,7 @@ onMounted(() => {
     <v-btn
       icon
       class="ma-2"
-      @click="store.commit.toggleShowProvenanceVis"
+      @click="store.showProvenanceVis = !store.showProvenanceVis"
     >
       <v-icon>mdi-close</v-icon>
     </v-btn>

From 12d20fc9959506e301eb16c5d06207a959270ec6 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:37:04 -0700
Subject: [PATCH 10/20] Migrate vuex to pinia, no more mutations, moved some to
 actions

---
 src/store/index.ts | 492 ++++++++++++++-------------------------------
 1 file changed, 156 insertions(+), 336 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 810af317..d885fe29 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,40 +1,25 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import { createDirectStore } from 'direct-vuex';
-import {
-  forceCollide, Simulation,
-} from 'd3-force';
-
-import { ColumnTypes, NetworkSpec, UserSpec } from 'multinet';
-import {
-  scaleLinear, scaleOrdinal, scaleSequential,
-} from 'd3-scale';
+import { defineStore } from 'pinia';
+import { forceCollide } from 'd3-force';
+import { ColumnTypes, NetworkSpec } from 'multinet';
+import { scaleLinear, scaleOrdinal, scaleSequential } from 'd3-scale';
 import { interpolateBlues, interpolateReds, schemeCategory10 } from 'd3-scale-chromatic';
-import { initProvenance, Provenance } from '@visdesignlab/trrack';
+import { initProvenance } from '@visdesignlab/trrack';
 import api from '@/api';
 import {
-  Edge, Node, Network, SimulationEdge, State, EdgeStyleVariables, LoadError, NestedVariables, ProvenanceEventTypes, Dimensions, AttributeRange,
+  Edge, Node, State, NestedVariables, ProvenanceEventTypes, AttributeRange,
 } from '@/types';
 import { undoRedoKeyHandler, updateProvenanceState } from '@/lib/provenanceUtils';
 import { isInternalField } from '@/lib/typeUtils';
 import { applyForceToSimulation } from '@/lib/d3ForceUtils';
 import oauthClient from '@/oauth';
 
-Vue.use(Vuex);
-
-const {
-  store,
-  rootActionContext,
-  moduleActionContext,
-  rootGetterContext,
-  moduleGetterContext,
-} = createDirectStore({
-  state: {
+export const useStore = defineStore('store', {
+  state: (): State => ({
     workspaceName: null,
     networkName: null,
     network: null,
     columnTypes: null,
-    selectedNodes: new Set(),
+    selectedNodes: [],
     loadError: {
       message: '',
       href: '',
@@ -56,11 +41,11 @@ const {
     nodeSizeVariable: '',
     nodeColorVariable: '',
     attributeRanges: {},
-    nodeColorScale: scaleOrdinal(schemeCategory10),
+    nodeColorScaleNoDomain: scaleOrdinal(schemeCategory10),
     nodeBarColorScale: scaleOrdinal(schemeCategory10),
     nodeGlyphColorScale: scaleOrdinal(schemeCategory10),
-    edgeWidthScale: scaleLinear(),
-    edgeColorScale: scaleOrdinal(schemeCategory10),
+    edgeWidthScaleNoDomain: scaleLinear(),
+    edgeColorScaleNoDomain: scaleOrdinal(schemeCategory10),
     provenance: null,
     directionalEdges: false,
     controlsWidth: 256,
@@ -81,7 +66,7 @@ const {
       x: null,
       y: null,
     },
-  } as State,
+  }),
 
   getters: {
     nodeColorScale(state) {
@@ -109,242 +94,32 @@ const {
     },
 
     nodeSizeScale(state) {
-      const minValue = state.attributeRanges[state.nodeSizeVariable].currentMin || state.attributeRanges[state.nodeSizeVariable].min;
-      const maxValue = state.attributeRanges[state.nodeSizeVariable].currentMax || state.attributeRanges[state.nodeSizeVariable].max;
-
-      return scaleLinear()
-        .domain([minValue, maxValue])
-        .range([10, 40]);
-    },
-
-    edgeWidthScale(state) {
-      const minValue = state.attributeRanges[state.edgeVariables.width].currentMin || state.attributeRanges[state.edgeVariables.width].min;
-      const maxValue = state.attributeRanges[state.edgeVariables.width].currentMax || state.attributeRanges[state.edgeVariables.width].max;
-
-      return state.edgeWidthScale.domain([minValue, maxValue]).range([1, 20]);
-    },
-  },
-  mutations: {
-    setWorkspaceName(state, workspaceName: string) {
-      state.workspaceName = workspaceName;
-    },
-
-    setNetworkName(state, networkName: string) {
-      state.networkName = networkName;
-    },
-
-    setNetwork(state, network: Network) {
-      state.network = network;
-    },
-
-    setColumnTypes(state, columnTypes: ColumnTypes) {
-      state.columnTypes = columnTypes;
-    },
-
-    setSelected(state, selectedNodes: Set<string>) {
-      state.selectedNodes = selectedNodes;
-
-      if (state.provenance !== null) {
-        if (selectedNodes.size === 0) {
-          updateProvenanceState(state, 'Clear Selection');
-        }
-      }
-    },
-
-    setLoadError(state, loadError: LoadError) {
-      state.loadError = {
-        message: loadError.message,
-        href: loadError.href,
-      };
-    },
-
-    setSimulation(state, simulation: Simulation<Node, SimulationEdge>) {
-      state.simulation = simulation;
-    },
-
-    startSimulation(state) {
-      if (state.simulation !== null) {
-        state.simulation.alpha(0.2);
-        state.simulation.restart();
-        state.simulationRunning = true;
-      }
-    },
-
-    stopSimulation(state) {
-      if (state.simulation !== null) {
-        state.simulation.stop();
-        state.simulationRunning = false;
-      }
-    },
-
-    addSelectedNode(state, nodesToAdd: string[]) {
-      // If no nodes, do nothing
-      if (nodesToAdd.length === 0) {
-        return;
-      }
-
-      state.selectedNodes = new Set([...state.selectedNodes, ...nodesToAdd]);
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Select Node(s)');
-      }
-    },
-
-    removeSelectedNode(state, nodeID: string) {
-      state.selectedNodes.delete(nodeID);
-      state.selectedNodes = new Set([...state.selectedNodes]);
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'De-select Node');
-      }
-    },
-
-    setDisplayCharts(state, displayCharts: boolean) {
-      state.displayCharts = displayCharts;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Display Charts');
-      }
-    },
-
-    setMarkerSize(state, payload: { markerSize: number; updateProv: boolean }) {
-      const { markerSize, updateProv } = payload;
-      state.markerSize = markerSize;
-
-      // Apply force to simulation and restart it
-      applyForceToSimulation(
-        state.simulation,
-        'collision',
-        forceCollide((markerSize / 2) * 1.5),
-      );
-
-      if (state.provenance !== null && updateProv) {
-        updateProvenanceState(state, 'Set Marker Size');
-      }
-    },
-
-    setFontSize(state, payload: { fontSize: number; updateProv: boolean }) {
-      state.fontSize = payload.fontSize;
-
-      if (state.provenance !== null && payload.updateProv) {
-        updateProvenanceState(state, 'Set Font Size');
-      }
-    },
-
-    setLabelVariable(state, labelVariable: string | undefined) {
-      state.labelVariable = labelVariable;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Label Variable');
-      }
-    },
-
-    setNodeColorVariable(state, nodeColorVariable: string) {
-      state.nodeColorVariable = nodeColorVariable;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Node Color Variable');
-      }
-    },
-
-    setSelectNeighbors(state, selectNeighbors: boolean) {
-      state.selectNeighbors = selectNeighbors;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Select Neighbors');
-      }
-    },
-
-    setNestedVariables(state, nestedVariables: NestedVariables) {
-      const newNestedVars = {
-        ...nestedVariables,
-        bar: [...new Set(nestedVariables.bar)],
-        glyph: [...new Set(nestedVariables.glyph)],
-      };
-
-      // Allow only 2 variables for the glyphs
-      newNestedVars.glyph.length = Math.min(2, newNestedVars.glyph.length);
-
-      state.nestedVariables = newNestedVars;
-    },
-
-    setEdgeVariables(state, edgeVariables: EdgeStyleVariables) {
-      state.edgeVariables = edgeVariables;
-    },
+      if (state.columnTypes !== null && Object.keys(state.columnTypes).length > 0 && state.columnTypes[state.nodeSizeVariable]) {
+        const minValue = state.attributeRanges[state.nodeSizeVariable].currentMin || state.attributeRanges[state.nodeSizeVariable].min;
+        const maxValue = state.attributeRanges[state.nodeSizeVariable].currentMax || state.attributeRanges[state.nodeSizeVariable].max;
 
-    setNodeSizeVariable(state, nodeSizeVariable: string) {
-      state.nodeSizeVariable = nodeSizeVariable;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Node Size Variable');
-      }
-    },
-
-    addAttributeRange(state, attributeRange: AttributeRange) {
-      state.attributeRanges = { ...state.attributeRanges, [attributeRange.attr]: attributeRange };
-    },
-
-    setProvenance(state, provenance: Provenance<State, ProvenanceEventTypes, unknown>) {
-      state.provenance = provenance;
-    },
-
-    setDirectionalEdges(state, directionalEdges: boolean) {
-      state.directionalEdges = directionalEdges;
-
-      if (state.provenance !== null) {
-        updateProvenanceState(state, 'Set Directional Edges');
+        return scaleLinear()
+          .domain([minValue, maxValue])
+          .range([10, 40]);
       }
+      return scaleLinear();
     },
 
-    setEdgeLength(state, payload: { edgeLength: number; updateProv: boolean }) {
-      const { edgeLength, updateProv } = payload;
-      state.edgeLength = edgeLength;
-
-      // Apply force to simulation and restart it
-      applyForceToSimulation(
-        state.simulation,
-        'edge',
-        undefined,
-        edgeLength * 10,
-      );
-      store.commit.startSimulation();
-
-      if (state.provenance !== null && updateProv) {
-        updateProvenanceState(state, 'Set Edge Length');
-      }
-    },
+    edgeWidthScale(state) {
+      if (state.columnTypes !== null && Object.keys(state.columnTypes).length > 0 && state.columnTypes[state.edgeVariables.width] === 'number') {
+        const minValue = state.attributeRanges[state.edgeVariables.width].currentMin || state.attributeRanges[state.edgeVariables.width].min;
+        const maxValue = state.attributeRanges[state.edgeVariables.width].currentMax || state.attributeRanges[state.edgeVariables.width].max;
 
-    goToProvenanceNode(state, node: string) {
-      if (state.provenance !== null) {
-        state.provenance.goToNode(node);
+        return state.edgeWidthScaleNoDomain.domain([minValue, maxValue]).range([1, 20]);
       }
-    },
-
-    toggleShowProvenanceVis(state) {
-      state.showProvenanceVis = !state.showProvenanceVis;
-    },
-
-    updateRightClickMenu(state, payload: { show: boolean; top: number; left: number }) {
-      state.rightClickMenu = payload;
-    },
-
-    setUserInfo(state, userInfo: UserSpec | null) {
-      state.userInfo = userInfo;
-    },
-
-    setSvgDimensions(state: State, payload: Dimensions) {
-      state.svgDimensions = payload;
-    },
-
-    setLayoutVars(state, layoutVars: { x: string | null; y: string | null }) {
-      state.layoutVars = layoutVars;
+      return state.edgeWidthScaleNoDomain;
     },
   },
+
   actions: {
-    async fetchNetwork(context, { workspaceName, networkName }) {
-      const { commit, dispatch } = rootActionContext(context);
-      commit.setWorkspaceName(workspaceName);
-      commit.setNetworkName(networkName);
+    async fetchNetwork(workspaceName: string, networkName: string) {
+      this.workspaceName = workspaceName;
+      this.networkName = networkName;
 
       let network: NetworkSpec | undefined;
 
@@ -355,34 +130,34 @@ const {
       } catch (error: any) {
         if (error.status === 404) {
           if (workspaceName === undefined || networkName === undefined) {
-            commit.setLoadError({
+            this.loadError = {
               message: 'Workspace and/or network were not defined in the url',
               href: 'https://multinet.app',
-            });
+            };
           } else {
-            commit.setLoadError({
+            this.loadError = {
               message: error.statusText,
               href: 'https://multinet.app',
-            });
+            };
           }
         } else if (error.status === 401) {
-          commit.setLoadError({
+          this.loadError = {
             message: 'You are not authorized to view this workspace',
             href: 'https://multinet.app',
-          });
+          };
         } else {
-          commit.setLoadError({
+          this.loadError = {
             message: 'An unexpected error ocurred',
             href: 'https://multinet.app',
-          });
+          };
         }
       } finally {
-        if (store.state.loadError.message === '' && typeof network === 'undefined') {
+        if (this.loadError.message === '' && typeof network === 'undefined') {
           // Catches CORS errors, issues when DB/API are down, etc.
-          commit.setLoadError({
+          this.loadError = {
             message: 'There was a network issue when getting data',
             href: `./?workspace=${workspaceName}&network=${networkName}`,
-          });
+          };
         }
       }
 
@@ -392,13 +167,13 @@ const {
 
       // Check network size
       if (network.node_count > 300) {
-        commit.setLoadError({
+        this.loadError = {
           message: 'The network you are loading is too large',
           href: 'https://multinet.app',
-        });
+        };
       }
 
-      if (store.state.loadError.message !== '') {
+      if (this.loadError.message !== '') {
         return;
       }
 
@@ -413,7 +188,7 @@ const {
         nodes: nodes.results as Node[],
         edges: edges.results as Edge[],
       };
-      commit.setNetwork(networkElements);
+      this.network = networkElements;
 
       const networkTables = await api.networkTables(workspaceName, networkName);
       // Get the network metadata promises
@@ -431,60 +206,124 @@ const {
         Object.assign(columnTypes, types);
       });
 
-      commit.setColumnTypes(columnTypes);
+      this.columnTypes = columnTypes;
 
       // Guess the best label variable and set it
       const allVars: Set<string> = new Set();
       networkElements.nodes.map((node: Node) => Object.keys(node).forEach((key) => allVars.add(key)));
 
-      dispatch.guessLabel();
+      this.guessLabel();
     },
 
-    async fetchUserInfo(context) {
-      const { commit } = rootActionContext(context);
-
+    async fetchUserInfo() {
       const info = await api.userInfo();
-      commit.setUserInfo(info);
+      this.userInfo = info;
     },
 
-    async logout(context) {
-      const { commit } = rootActionContext(context);
-
+    async logout() {
       // Perform the server logout.
       oauthClient.logout();
-      commit.setUserInfo(null);
+      this.userInfo = null;
     },
 
-    releaseNodes(context) {
-      const { commit } = rootActionContext(context);
-
-      if (context.state.network !== null) {
-        context.state.network.nodes.forEach((n: Node) => {
+    releaseNodes() {
+      if (this.network !== null) {
+        this.network.nodes.forEach((n: Node) => {
           n.fx = null;
           n.fy = null;
         });
-        commit.startSimulation();
+        this.startSimulation();
       }
     },
 
-    createProvenance(context) {
-      const { commit } = rootActionContext(context);
+    startSimulation() {
+      if (this.simulation !== null) {
+        this.simulation.alpha(0.2);
+        this.simulation.restart();
+        this.simulationRunning = true;
+      }
+    },
 
-      const storeState = context.state;
+    stopSimulation() {
+      if (this.simulation !== null) {
+        this.simulation.stop();
+        this.simulationRunning = false;
+      }
+    },
 
-      const stateForProv = JSON.parse(JSON.stringify(context.state));
-      stateForProv.selectedNodes = new Set<string>();
+    setMarkerSize(payload: { markerSize: number; updateProv: boolean }) {
+      const { markerSize, updateProv } = payload;
+      this.markerSize = markerSize;
 
-      commit.setProvenance(initProvenance<State, ProvenanceEventTypes, unknown>(
+      // Apply force to simulation and restart it
+      applyForceToSimulation(
+        this.simulation,
+        'collision',
+        forceCollide((markerSize / 2) * 1.5),
+      );
+
+      if (this.provenance !== null && updateProv) {
+        updateProvenanceState(this.$state, 'Set Marker Size');
+      }
+    },
+
+    setNestedVariables(nestedVariables: NestedVariables) {
+      const newNestedVars = {
+        ...nestedVariables,
+        bar: [...new Set(nestedVariables.bar)],
+        glyph: [...new Set(nestedVariables.glyph)],
+      };
+
+      // Allow only 2 variables for the glyphs
+      newNestedVars.glyph.length = Math.min(2, newNestedVars.glyph.length);
+
+      this.nestedVariables = newNestedVars;
+    },
+
+    addAttributeRange(attributeRange: AttributeRange) {
+      this.attributeRanges = { ...this.attributeRanges, [attributeRange.attr]: attributeRange };
+    },
+
+    setEdgeLength(payload: { edgeLength: number; updateProv: boolean }) {
+      const { edgeLength, updateProv } = payload;
+      this.edgeLength = edgeLength;
+
+      // Apply force to simulation and restart it
+      applyForceToSimulation(
+        this.simulation,
+        'edge',
+        undefined,
+        edgeLength * 10,
+      );
+      this.startSimulation();
+
+      if (this.provenance !== null && updateProv) {
+        updateProvenanceState(this.$state, 'Set Edge Length');
+      }
+    },
+
+    goToProvenanceNode(node: string) {
+      if (this.provenance !== null) {
+        this.provenance.goToNode(node);
+      }
+    },
+
+    createProvenance() {
+      const storeState = this.$state;
+
+      const stateForProv = JSON.parse(JSON.stringify(this));
+      stateForProv.selectedNodes = [];
+
+      this.provenance = initProvenance<State, ProvenanceEventTypes, unknown>(
         stateForProv,
         { loadFromUrl: false },
-      ));
+      );
 
       // Add a global observer to watch the state and update the tracked elements in the store
       // enables undo/redo + navigating around provenance graph
-      storeState.provenance.addGlobalObserver(
+      this.provenance.addGlobalObserver(
         () => {
-          const provenanceState = context.state.provenance.state;
+          const provenanceState = this.provenance.state;
 
           const { selectedNodes } = provenanceState;
 
@@ -493,7 +332,7 @@ const {
 
           // If the sets are not equal (happens when provenance is updated through provenance vis),
           // update the store's selectedNodes to match the provenance state
-          if (!setsAreEqual(selectedNodes, storeState.selectedNodes)) {
+          if (selectedNodes.sort().toString() !== storeState.selectedNodes.sort().toString()) {
             storeState.selectedNodes = selectedNodes;
           }
 
@@ -515,9 +354,9 @@ const {
             }
 
             if (primitiveVariable === 'markerSize') {
-              commit.setMarkerSize({ markerSize: provenanceState[primitiveVariable], updateProv: false });
+              this.setMarkerSize({ markerSize: provenanceState[primitiveVariable], updateProv: false });
             } else if (primitiveVariable === 'edgeLength') {
-              commit.setEdgeLength({ edgeLength: provenanceState[primitiveVariable], updateProv: false });
+              this.setEdgeLength({ edgeLength: provenanceState[primitiveVariable], updateProv: false });
             } else if (storeState[primitiveVariable] !== provenanceState[primitiveVariable]) {
               storeState[primitiveVariable] = provenanceState[primitiveVariable];
             }
@@ -531,63 +370,44 @@ const {
       document.addEventListener('keydown', (event) => undoRedoKeyHandler(event, storeState));
     },
 
-    guessLabel(context) {
-      const { commit } = rootActionContext(context);
-
+    guessLabel() {
+      if (this.network !== null && this.columnTypes !== null) {
       // Guess the best label variable and set it
-      const allVars: Set<string> = new Set();
-      context.state.network.nodes.forEach((node: Node) => Object.keys(node).forEach((key) => allVars.add(key)));
+        const allVars: Set<string> = new Set();
+        this.network.nodes.forEach((node: Node) => Object.keys(node).forEach((key) => allVars.add(key)));
 
-      // Remove _key from the search
-      allVars.delete('_key');
-      const bestLabelVar = [...allVars]
-        .find((colName) => !isInternalField(colName) && context.state.columnTypes[colName] === 'label');
+        // Remove _key from the search
+        allVars.delete('_key');
+        const bestLabelVar = [...allVars]
+          .find((colName) => !isInternalField(colName) && this.columnTypes?.[colName] === 'label');
 
-      // Use the label variable we found or _key if we didn't find one
-      commit.setLabelVariable(bestLabelVar || '_key');
+        // Use the label variable we found or _key if we didn't find one
+        this.labelVariable = bestLabelVar || '_key';
+      }
     },
 
-    applyVariableLayout(context, payload: { varName: string | null; axis: 'x' | 'y'}) {
-      const { commit, dispatch, state } = rootActionContext(context);
-
+    applyVariableLayout(payload: { varName: string | null; axis: 'x' | 'y'}) {
       const {
         varName, axis,
       } = payload;
       const otherAxis = axis === 'x' ? 'y' : 'x';
 
-      const updatedLayoutVars = { [axis]: varName, [otherAxis]: state.layoutVars[otherAxis] } as {
+      const updatedLayoutVars = { [axis]: varName, [otherAxis]: this.layoutVars[otherAxis] } as {
         x: string | null;
         y: string | null;
       };
-      commit.setLayoutVars(updatedLayoutVars);
+      this.layoutVars = updatedLayoutVars;
 
       // Reapply the layout if there is still a variable
-      if (varName === null && state.layoutVars[otherAxis] !== null) {
+      if (varName === null && this.layoutVars[otherAxis] !== null) {
         // Set marker size to 11 to trigger re-render (will get reset to 10 in dispatch again)
-        commit.setMarkerSize({ markerSize: 11, updateProv: false });
+        this.markerSize = 11;
 
-        dispatch.applyVariableLayout({ varName: state.layoutVars[otherAxis], axis: otherAxis });
-      } else if (varName === null && state.layoutVars[otherAxis] === null) {
+        this.applyVariableLayout({ varName: this.layoutVars[otherAxis], axis: otherAxis });
+      } else if (varName === null && this.layoutVars[otherAxis] === null) {
         // If both null, release
-        dispatch.releaseNodes();
+        this.releaseNodes();
       }
     },
   },
 });
-
-export default store;
-export {
-  rootActionContext,
-  moduleActionContext,
-  rootGetterContext,
-  moduleGetterContext,
-};
-
-// The following lines enable types in the injected store '$store'.
-export type ApplicationStore = typeof store;
-declare module 'vuex' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface Store<S> {
-    direct: ApplicationStore;
-  }
-}

From f77c446f1da6fe74807b93b437ca400f61c75dd3 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:49:48 -0700
Subject: [PATCH 11/20] Change an variable called vuexState to piniaState

---
 src/lib/provenanceUtils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/provenanceUtils.ts b/src/lib/provenanceUtils.ts
index 70e7e4a7..9b55b2d3 100644
--- a/src/lib/provenanceUtils.ts
+++ b/src/lib/provenanceUtils.ts
@@ -1,7 +1,7 @@
 import { createAction } from '@visdesignlab/trrack';
 import { ProvenanceEventTypes, State } from '@/types';
 
-export function updateProvenanceState(vuexState: State, label: ProvenanceEventTypes) {
+export function updateProvenanceState(piniaState: State, label: ProvenanceEventTypes) {
   const stateUpdateActions = createAction<State, State[], ProvenanceEventTypes>((provState, newProvState) => {
     if (label === 'Select Node(s)' || label === 'De-select Node' || label === 'Clear Selection') {
       provState.selectedNodes = newProvState.selectedNodes;
@@ -27,8 +27,8 @@ export function updateProvenanceState(vuexState: State, label: ProvenanceEventTy
   })
     .setLabel(label);
 
-  if (vuexState.provenance !== null) {
-    vuexState.provenance.apply(stateUpdateActions(vuexState));
+  if (piniaState.provenance !== null) {
+    piniaState.provenance.apply(stateUpdateActions(piniaState));
   }
 }
 

From 20ae9d1324ce0a16b05c8708a4cc78a7710ee61e Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 15:52:11 -0700
Subject: [PATCH 12/20] Fix linting issues

---
 src/App.vue                   | 3 ---
 src/components/DragTarget.vue | 2 --
 src/components/ProvVis.vue    | 2 +-
 src/store/index.ts            | 3 ---
 4 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4807f262..6f992925 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,12 +9,9 @@ import ControlPanel from '@/components/ControlPanel.vue';
 import MultiLink from '@/components/MultiLink.vue';
 import ProvVis from '@/components/ProvVis.vue';
 
-
-
 const store = useStore();
 const {
   network,
-  selectedNodes,
   loadError,
   showProvenanceVis,
 } = storeToRefs(store);
diff --git a/src/components/DragTarget.vue b/src/components/DragTarget.vue
index af1b8a02..4011c58e 100644
--- a/src/components/DragTarget.vue
+++ b/src/components/DragTarget.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useStore } from '@/store/index';
 import { storeToRefs } from 'pinia';
 
@@ -11,7 +10,6 @@ const {
   nodeColorVariable,
 } = storeToRefs(store);
 
-
 const props = withDefaults(defineProps<{
   title: string
   type: 'node' | 'edge',
diff --git a/src/components/ProvVis.vue b/src/components/ProvVis.vue
index f08c85f8..7076c729 100644
--- a/src/components/ProvVis.vue
+++ b/src/components/ProvVis.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ProvVisCreator } from '@visdesignlab/trrack-vis';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useStore } from '@/store/index';
 import { storeToRefs } from 'pinia';
 
diff --git a/src/store/index.ts b/src/store/index.ts
index d885fe29..254223d6 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -327,9 +327,6 @@ export const useStore = defineStore('store', {
 
           const { selectedNodes } = provenanceState;
 
-          // Helper function
-          const setsAreEqual = (a: Set<unknown>, b: Set<unknown>) => a.size === b.size && [...a].every((value) => b.has(value));
-
           // If the sets are not equal (happens when provenance is updated through provenance vis),
           // update the store's selectedNodes to match the provenance state
           if (selectedNodes.sort().toString() !== storeState.selectedNodes.sort().toString()) {

From dc91df8eff30d0b0fd60e6dc9f470bb9044f692f Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 16 Dec 2022 17:31:35 -0700
Subject: [PATCH 13/20] Bump multinet to 0.0.2

---
 package.json                    | 2 +-
 src/components/ControlPanel.vue | 5 +++--
 yarn.lock                       | 8 ++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 3e476676..8d1f7a70 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "d3-selection": "^2.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "multinet": "^0.21.4",
-    "multinet-components": "^0.0.1",
+    "multinet-components": "^0.0.2",
     "pinia": "^2.0.28",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.1",
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 7fbc7454..5b15a80d 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -156,9 +156,10 @@ const userInfo = computed(() => store.userInfo);
         </v-toolbar-title>
         <v-spacer />
         <login-menu
-          :store="store"
-          :oauth-client="oauthClient"
           :user-info="userInfo"
+          :oauth-client="oauthClient"
+          :logout="store.logout"
+          :fetch-user-info="store.fetchUserInfo"
         />
       </v-toolbar>
 
diff --git a/yarn.lock b/yarn.lock
index 90e35923..ab9eab7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8428,10 +8428,10 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multinet-components@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/multinet-components/-/multinet-components-0.0.1.tgz#41c2e4c2e716ed37f9b54a6dc0ba03899c16d8e3"
-  integrity sha512-M8FSfeZetigiHbHz6bT0OTKT6aV3gzfNJODZGEBoVNp/axRk3aHTLfSJ86/KMxbl5guUvlj+z3n1lXc7yRSC4g==
+multinet-components@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/multinet-components/-/multinet-components-0.0.2.tgz#172d6e68217c3089add1e2066a9eccfd5b73cf3e"
+  integrity sha512-D7OsIxzIjQEAEEb4asN9/8GD9NX/uck3w4wAJAkJrrmc46pB58dw3LnwPP4F4OyqHfwRfHdaX5iGYWPBukicJg==
 
 multinet@^0.21.4:
   version "0.21.4"

From 14d7c48dfb18b4d53a1725b100d2b6dcbc3e3a79 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 11:20:59 -0700
Subject: [PATCH 14/20] Use @ alias

---
 src/App.vue  | 2 +-
 src/oauth.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6f992925..1b556bd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 import 'multinet-components/dist/style.css';
 import { storeToRefs } from 'pinia';
 import { useStore } from '@/store';
-import { getUrlVars } from './lib/utils';
+import { getUrlVars } from '@/lib/utils';
 
 import AlertBanner from '@/components/AlertBanner.vue';
 import ControlPanel from '@/components/ControlPanel.vue';
diff --git a/src/oauth.ts b/src/oauth.ts
index 0f1fe075..1ad86c2a 100644
--- a/src/oauth.ts
+++ b/src/oauth.ts
@@ -1,4 +1,4 @@
 import OauthClient from '@girder/oauth-client';
-import { oauthApiRoot, oauthClientId } from './environment';
+import { oauthApiRoot, oauthClientId } from '@/environment';
 
 export default new OauthClient(oauthApiRoot, oauthClientId);

From 246a87a74812af5b94a7fce9d2c9553cd3e07cc6 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 11:21:11 -0700
Subject: [PATCH 15/20] Fix yarn lock

---
 yarn.lock | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index ab9eab7e..13e8bc99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3141,7 +3141,7 @@ accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-jsx@^5.3.2:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -3151,6 +3151,11 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
 acorn@^8.7.1:
   version "8.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
@@ -5932,6 +5937,15 @@ eslint@8:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
+espree@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
 espree@^9.0.0, espree@^9.4.0:
   version "9.4.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"

From 80921ff2044e84918c1831320dd2513fc59f4a27 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 12:52:46 -0700
Subject: [PATCH 16/20] @/store/index -> @/store

---
 src/components/AlertBanner.vue  | 2 +-
 src/components/ContextMenu.vue  | 2 +-
 src/components/ControlPanel.vue | 2 +-
 src/components/DragTarget.vue   | 2 +-
 src/components/LegendChart.vue  | 2 +-
 src/components/LegendPanel.vue  | 2 +-
 src/components/MultiLink.vue    | 2 +-
 src/components/ProvVis.vue      | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/AlertBanner.vue b/src/components/AlertBanner.vue
index 66dc592e..5f612962 100644
--- a/src/components/AlertBanner.vue
+++ b/src/components/AlertBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import api from '@/api';
 import { storeToRefs } from 'pinia';
 
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index dc70b48b..d62122e0 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 5b15a80d..9b7d00a2 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -4,7 +4,7 @@ import { computed, Ref, ref } from 'vue';
 import LegendPanel from '@/components/LegendPanel.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import { internalFieldNames } from '@/types';
 import oauthClient from '@/oauth';
 import { storeToRefs } from 'pinia';
diff --git a/src/components/DragTarget.vue b/src/components/DragTarget.vue
index 4011c58e..cdbc6549 100644
--- a/src/components/DragTarget.vue
+++ b/src/components/DragTarget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();
diff --git a/src/components/LegendChart.vue b/src/components/LegendChart.vue
index 7e454b51..a463d1da 100644
--- a/src/components/LegendChart.vue
+++ b/src/components/LegendChart.vue
@@ -8,7 +8,7 @@ import {
 } from 'd3-scale';
 import { select, selectAll } from 'd3-selection';
 import { Node, Edge } from '@/types';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 
 // Required for recursive definition of LegendChart
 // eslint-disable-next-line import/no-self-import
diff --git a/src/components/LegendPanel.vue b/src/components/LegendPanel.vue
index daa67334..0eff6a87 100644
--- a/src/components/LegendPanel.vue
+++ b/src/components/LegendPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import { internalFieldNames, Edge, Node } from '@/types';
 import DragTarget from '@/components/DragTarget.vue';
 import LegendChart from '@/components/LegendChart.vue';
diff --git a/src/components/MultiLink.vue b/src/components/MultiLink.vue
index d464498b..edb4c56d 100644
--- a/src/components/MultiLink.vue
+++ b/src/components/MultiLink.vue
@@ -12,7 +12,7 @@ import {
 } from 'vue';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { ColumnType } from 'multinet';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import {
   Node, Edge, SimulationEdge, AttributeRange,
 } from '@/types';
diff --git a/src/components/ProvVis.vue b/src/components/ProvVis.vue
index 7076c729..e84fff27 100644
--- a/src/components/ProvVis.vue
+++ b/src/components/ProvVis.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ProvVisCreator } from '@visdesignlab/trrack-vis';
 import { onMounted, ref } from 'vue';
-import { useStore } from '@/store/index';
+import { useStore } from '@/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();

From 77f241917892d8c05a0174f66d98f9755c874463 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 12:55:59 -0700
Subject: [PATCH 17/20] Remove Ref imports

---
 src/components/ControlPanel.vue | 4 ++--
 src/components/MultiLink.vue    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 9b7d00a2..eaab60b7 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LoginMenu } from 'multinet-components';
-import { computed, Ref, ref } from 'vue';
+import { computed, ref } from 'vue';
 import LegendPanel from '@/components/LegendPanel.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 
@@ -26,7 +26,7 @@ const {
 } = storeToRefs(store);
 
 const searchTerm = ref('');
-const searchErrors: Ref<string[]> = ref([]);
+const searchErrors = ref<string[]>([]);
 const showMenu = ref(false);
 
 const multiVariableList = computed(() => {
diff --git a/src/components/MultiLink.vue b/src/components/MultiLink.vue
index edb4c56d..ebb42bdd 100644
--- a/src/components/MultiLink.vue
+++ b/src/components/MultiLink.vue
@@ -8,7 +8,7 @@ import {
 } from 'd3-force';
 import { select } from 'd3-selection';
 import {
-  computed, getCurrentInstance, onMounted, ref, Ref, watch,
+  computed, getCurrentInstance, onMounted, ref, watch,
 } from 'vue';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { ColumnType } from 'multinet';
@@ -45,7 +45,7 @@ const {
 
 // Commonly used variables
 const currentInstance = getCurrentInstance();
-const multiLinkSvg: Ref<Element | null> = ref(null);
+const multiLinkSvg = ref<Element | null>(null);
 const nodeTextStyle = computed(() => `font-size: ${store.fontSize || 0}pt;`);
 
 const nestedPadding = ref(5);

From 1b55415b1937a1d956f45c2416ae3762fdc9ecfb Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 13:07:39 -0700
Subject: [PATCH 18/20] Move computed to storeToRefs

---
 src/components/ControlPanel.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index eaab60b7..9bba90da 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -23,6 +23,7 @@ const {
   columnTypes,
   network,
   selectedNodes,
+  userInfo,
 } = storeToRefs(store);
 
 const searchTerm = ref('');
@@ -115,8 +116,6 @@ function updateSliderProv(value: number, type: 'markerSize' | 'fontSize' | 'edge
     store.setEdgeLength({ edgeLength: value, updateProv: true });
   }
 }
-
-const userInfo = computed(() => store.userInfo);
 </script>
 
 <template>

From 3e3de7fb0120088752c8e7aa845cea09d24808d1 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 13:12:12 -0700
Subject: [PATCH 19/20] Move more computed(() => store...) to storeToRefs

---
 src/components/ContextMenu.vue |  4 +---
 src/components/LegendChart.vue | 11 +++++------
 src/components/MultiLink.vue   |  8 ++++----
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index d62122e0..9605efd3 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useStore } from '@/store';
 import { storeToRefs } from 'pinia';
 
@@ -7,6 +6,7 @@ const store = useStore();
 const {
   network,
   selectedNodes,
+  rightClickMenu,
 } = storeToRefs(store);
 
 function pinSelectedNodes() {
@@ -29,8 +29,6 @@ function unPinSelectedNodes() {
       });
   }
 }
-
-const rightClickMenu = computed(() => store.rightClickMenu);
 </script>
 
 <template>
diff --git a/src/components/LegendChart.vue b/src/components/LegendChart.vue
index a463d1da..b3aa0e8b 100644
--- a/src/components/LegendChart.vue
+++ b/src/components/LegendChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, watchEffect } from 'vue';
+import { onMounted, watchEffect } from 'vue';
 import { histogram, max, min } from 'd3-array';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { brushX, D3BrushEvent } from 'd3-brush';
@@ -26,6 +26,10 @@ const {
   nodeSizeVariable,
   nodeColorVariable,
   edgeVariables,
+  nodeSizeScale,
+  nodeColorScale,
+  edgeWidthScale,
+  edgeColorScale,
 } = storeToRefs(store);
 
 const props = withDefaults(defineProps<{
@@ -44,11 +48,6 @@ const props = withDefaults(defineProps<{
 const yAxisPadding = 30;
 const svgHeight = props.mappedTo === 'bars' ? 75 : 50;
 
-const nodeSizeScale = computed(() => store.nodeSizeScale);
-const nodeColorScale = computed(() => store.nodeColorScale);
-const edgeWidthScale = computed(() => store.edgeWidthScale);
-const edgeColorScale = computed(() => store.edgeColorScale);
-
 // TODO: https://github.com/multinet-app/multilink/issues/176
 // use table name for var selection
 function isQuantitative(varName: string, type: 'node' | 'edge') {
diff --git a/src/components/MultiLink.vue b/src/components/MultiLink.vue
index ebb42bdd..87abd881 100644
--- a/src/components/MultiLink.vue
+++ b/src/components/MultiLink.vue
@@ -41,6 +41,10 @@ const {
   edgeVariables,
   nodeGlyphColorScale,
   simulation,
+  edgeColorScale,
+  nodeSizeScale,
+  nodeColorScale,
+  edgeWidthScale,
 } = storeToRefs(store);
 
 // Commonly used variables
@@ -71,7 +75,6 @@ const attributeScales = computed(() => {
   }
   return scales;
 });
-const edgeColorScale = computed(() => store.edgeColorScale);
 const clipRegionSize = 100;
 
 // Update height and width as the window size changes
@@ -125,7 +128,6 @@ function selectNode(node: Node) {
   }
 }
 
-const nodeSizeScale = computed(() => store.nodeSizeScale);
 function calculateNodeSize(node: Node) {
   // Don't render dynamic node size if the size variable is empty or
   // we want to display charts
@@ -304,7 +306,6 @@ function nodeClass(node: Node): string {
   return `node nodeBox ${selectedClass}`;
 }
 
-const nodeColorScale = computed(() => store.nodeColorScale);
 function nodeFill(node: Node) {
   const calculatedValue = node[nodeColorVariable.value];
   const useCalculatedValue = !displayCharts.value && columnTypes.value !== null
@@ -336,7 +337,6 @@ function edgeGroupClass(edge: Edge): string {
   return 'edgeGroup';
 }
 
-const edgeWidthScale = computed(() => store.edgeWidthScale);
 function edgeStyle(edge: Edge): string {
   const edgeWidth = edgeVariables.value.width === '' ? 1 : edgeWidthScale.value(edge[edgeVariables.value.width]);
 

From 9f13ba7450611e5047903b8d885a2b3c36348da4 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 19 Dec 2022 13:16:35 -0700
Subject: [PATCH 20/20] Remove state scales with no domains

---
 src/store/index.ts | 7 ++-----
 src/types.ts       | 5 +----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 254223d6..e1b9366a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -41,11 +41,8 @@ export const useStore = defineStore('store', {
     nodeSizeVariable: '',
     nodeColorVariable: '',
     attributeRanges: {},
-    nodeColorScaleNoDomain: scaleOrdinal(schemeCategory10),
     nodeBarColorScale: scaleOrdinal(schemeCategory10),
     nodeGlyphColorScale: scaleOrdinal(schemeCategory10),
-    edgeWidthScaleNoDomain: scaleLinear(),
-    edgeColorScaleNoDomain: scaleOrdinal(schemeCategory10),
     provenance: null,
     directionalEdges: false,
     controlsWidth: 256,
@@ -110,9 +107,9 @@ export const useStore = defineStore('store', {
         const minValue = state.attributeRanges[state.edgeVariables.width].currentMin || state.attributeRanges[state.edgeVariables.width].min;
         const maxValue = state.attributeRanges[state.edgeVariables.width].currentMax || state.attributeRanges[state.edgeVariables.width].max;
 
-        return state.edgeWidthScaleNoDomain.domain([minValue, maxValue]).range([1, 20]);
+        return scaleLinear().domain([minValue, maxValue]).range([1, 20]);
       }
-      return state.edgeWidthScaleNoDomain;
+      return scaleLinear();
     },
   },
 
diff --git a/src/types.ts b/src/types.ts
index 7b141b94..d7d9957c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
 import { Provenance } from '@visdesignlab/trrack';
 import { Simulation } from 'd3-force';
-import { ScaleLinear, ScaleOrdinal, ScaleSequential } from 'd3-scale';
+import { ScaleOrdinal } from 'd3-scale';
 import { TableRow, UserSpec, ColumnTypes } from 'multinet';
 
 export interface Dimensions {
@@ -103,11 +103,8 @@ export interface State {
   nodeColorVariable: string;
   attributeRanges: AttributeRanges;
   simulation: Simulation<Node, SimulationEdge> | null;
-  nodeColorScaleNoDomain: ScaleSequential<string> | ScaleOrdinal<string, string>;
   nodeBarColorScale: ScaleOrdinal<string, string>;
   nodeGlyphColorScale: ScaleOrdinal<string, string>;
-  edgeWidthScaleNoDomain: ScaleLinear<number, number>;
-  edgeColorScaleNoDomain: ScaleSequential<string> | ScaleOrdinal<string, string>;
   provenance: Provenance<State, ProvenanceEventTypes, unknown> | null;
   directionalEdges: boolean;
   controlsWidth: number;