Convert pinia options store to setup store

src/App.vue

@@ -31,7 +31,7 @@ store.fetchNetwork(
     <v-main>
       <control-panel />
 
-      <multi-link v-if="network !== null" />
+      <multi-link v-if="network.nodes.length > 0" />
 
       <alert-banner v-if="loadError.message !== ''" />
     </v-main>

src/components/AlertBanner.vue

@@ -27,7 +27,7 @@ watchEffect(async () => {
 const buttonHref = ref(loadError.value.href);
 const buttonText = ref('');
 watchEffect(async () => {
-  if (workspace.value !== null && network.value !== null) {
+  if (workspace.value !== null) {
     buttonHref.value = `./?workspace=${workspace.value}&network=${network.value}`;
     buttonText.value = 'Go To Network';
   } else if (loadError.value.message === 'There was a network issue when getting data') {

src/components/ContextMenu.vue

@@ -10,24 +10,20 @@ const {
 } = storeToRefs(store);
 
 function pinSelectedNodes() {
-  if (network.value !== null) {
-    network.value.nodes
-      .filter((node) => selectedNodes.value.includes(node._id))
-      .forEach((node) => {
-        node.fx = node.x;
-        node.fy = node.y;
-      });
-  }
+  network.value.nodes
+    .filter((node) => selectedNodes.value.includes(node._id))
+    .forEach((node) => {
+      node.fx = node.x;
+      node.fy = node.y;
+    });
 }
 function unPinSelectedNodes() {
-  if (network.value !== null) {
-    network.value.nodes
-      .filter((node) => selectedNodes.value.includes(node._id))
-      .forEach((node) => {
-        delete node.fx;
-        delete node.fy;
-      });
-  }
+  network.value.nodes
+    .filter((node) => selectedNodes.value.includes(node._id))
+    .forEach((node) => {
+      delete node.fx;
+      delete node.fy;
+    });
 }
 </script>
 

src/components/ControlPanel.vue

@@ -31,42 +31,35 @@ const searchErrors = ref<string[]>([]);
 const showMenu = ref(false);
 
 const multiVariableList = computed(() => {
-  if (network.value !== null) {
-    // Loop through all nodes, flatten the 2d array, and turn it into a set
-    const allVars: Set<string> = new Set();
-    network.value.nodes.forEach((node) => Object.keys(node).forEach((key) => allVars.add(key)));
+  // Loop through all nodes, flatten the 2d array, and turn it into a set
+  const allVars: Set<string> = new Set();
+  network.value.nodes.forEach((node) => Object.keys(node).forEach((key) => allVars.add(key)));
 
-    internalFieldNames.forEach((field) => allVars.delete(field));
-    allVars.delete('vx');
-    allVars.delete('vy');
-    allVars.delete('x');
-    allVars.delete('y');
-    allVars.delete('index');
-    return allVars;
-  }
-  return new Set();
+  internalFieldNames.forEach((field) => allVars.delete(field));
+  allVars.delete('vx');
+  allVars.delete('vy');
+  allVars.delete('x');
+  allVars.delete('y');
+  allVars.delete('index');
+  return allVars;
 });
 
 const markerSize = computed({
   get() {
     return store.markerSize || 0;
   },
   set(value: number) {
-    store.setMarkerSize({ markerSize: value, updateProv: false });
+    store.setMarkerSize(value, false);
   },
 });
 const autocompleteItems = computed(() => {
-  if (network.value !== null && labelVariable.value !== undefined) {
+  if (labelVariable.value !== undefined) {
     return network.value.nodes.map((node) => (node[labelVariable.value || '']));
   }
   return [];
 });
 
 function exportNetwork() {
-  if (network.value === null) {
-    return;
-  }
-
   const networkToExport = {
     nodes: network.value.nodes.map((node) => {
       const newNode = { ...node };
@@ -94,26 +87,24 @@ function exportNetwork() {
 
 function search() {
   searchErrors.value = [];
-  if (network.value !== null) {
-    const nodeIDsToSelect = network.value.nodes
-      .filter((node) => (labelVariable.value !== undefined ? node[labelVariable.value] === searchTerm.value : false))
-      .map((node) => node._id);
+  const nodeIDsToSelect = network.value.nodes
+    .filter((node) => (labelVariable.value !== undefined ? node[labelVariable.value] === searchTerm.value : false))
+    .map((node) => node._id);
 
-    if (nodeIDsToSelect.length > 0) {
-      selectedNodes.value.push(...nodeIDsToSelect);
-    } else {
-      searchErrors.value.push('Enter a valid node to search');
-    }
+  if (nodeIDsToSelect.length > 0) {
+    selectedNodes.value.push(...nodeIDsToSelect);
+  } else {
+    searchErrors.value.push('Enter a valid node to search');
   }
 }
 
 function updateSliderProv(value: number, type: 'markerSize' | 'fontSize' | 'edgeLength') {
   if (type === 'markerSize') {
-    store.setMarkerSize({ markerSize: value, updateProv: true });
+    store.setMarkerSize(value, true);
   } else if (type === 'fontSize') {
     fontSize.value = value;
   } else if (type === 'edgeLength') {
-    store.setEdgeLength({ edgeLength: value, updateProv: true });
+    store.setEdgeLength(value, true);
   }
 }
 </script>

src/components/LegendChart.vue

@@ -55,15 +55,9 @@ function isQuantitative(varName: string, type: 'node' | 'edge') {
     return columnTypes.value[varName] === 'number';
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let nodesOrEdges: any[];
-
-  if (network.value !== null) {
-    nodesOrEdges = type === 'node' ? network.value.nodes : network.value.edges;
-    const uniqueValues = [...new Set(nodesOrEdges.map((element) => parseFloat(element[varName])))];
-    return uniqueValues.length > 5;
-  }
-  return false;
+  const nodesOrEdges = type === 'node' ? network.value.nodes : network.value.edges;
+  const uniqueValues = [...new Set(nodesOrEdges.map((element) => parseFloat(element[varName])))];
+  return uniqueValues.length > 5;
 }
 
 function dragStart(event: DragEvent) {
@@ -129,10 +123,6 @@ onMounted(() => {
   let xScale: ScaleLinear<number, number> | ScaleBand<string>;
   let yScale: ScaleLinear<number, number>;
 
-  if (network.value === null) {
-    return;
-  }
-
   // Process data for bars/histogram
   if (props.mappedTo === 'size' && nodeSizeScale.value !== null) { // node size
     xScale = scaleLinear()

src/components/LegendPanel.vue

@@ -33,36 +33,30 @@ function cleanVariableList(list: Set<string>): Set<string> {
 }
 
 const cleanedNodeVariables = computed(() => {
-  if (network.value !== null) {
-    // Loop through all nodes, flatten the 2d array, and turn it into a set
-    const allVars: Set<string> = new Set();
-    network.value.nodes.forEach((node: Node) => Object.keys(node).forEach((key) => allVars.add(key)));
-
-    internalFieldNames.forEach((field) => allVars.delete(field));
-    allVars.delete('vx');
-    allVars.delete('vy');
-    allVars.delete('x');
-    allVars.delete('y');
-    allVars.delete('index');
-    return cleanVariableList(allVars);
-  }
-  return new Set();
+  // Loop through all nodes, flatten the 2d array, and turn it into a set
+  const allVars: Set<string> = new Set();
+  network.value.nodes.forEach((node: Node) => Object.keys(node).forEach((key) => allVars.add(key)));
+
+  internalFieldNames.forEach((field) => allVars.delete(field));
+  allVars.delete('vx');
+  allVars.delete('vy');
+  allVars.delete('x');
+  allVars.delete('y');
+  allVars.delete('index');
+  return cleanVariableList(allVars);
 });
 
 const cleanedEdgeVariables = computed(() => {
-  if (network.value !== null) {
-    // Loop through all edges, flatten the 2d array, and turn it into a set
-    const allVars: Set<string> = new Set();
-    network.value.edges.map((edge: Edge) => Object.keys(edge).forEach((key) => allVars.add(key)));
-
-    internalFieldNames.forEach((field) => allVars.delete(field));
-    allVars.delete('source');
-    allVars.delete('target');
-    allVars.delete('index');
-
-    return cleanVariableList(allVars);
-  }
-  return new Set();
+  // Loop through all edges, flatten the 2d array, and turn it into a set
+  const allVars: Set<string> = new Set();
+  network.value.edges.map((edge: Edge) => Object.keys(edge).forEach((key) => allVars.add(key)));
+
+  internalFieldNames.forEach((field) => allVars.delete(field));
+  allVars.delete('source');
+  allVars.delete('target');
+  allVars.delete('index');
+
+  return cleanVariableList(allVars);
 });
 
 const attributeLayout = ref(false);