Implement the toolbar from multinet-components

package.json

@@ -14,16 +14,16 @@
   "dependencies": {
     "@girder/oauth-client": "^0.7.7",
     "@trrack/core": "^1.0.1",
-    "@trrack/vis-react": "^1.0.0",
+    "@trrack/vis-react": "^1.2.2",
     "@types/d3": "^7.4.0",
     "@types/node": "^17.0.29",
     "@vitejs/plugin-vue2": "^2.2.0",
     "d3": "7.8.0",
     "d3-svg-legend": "^2.25.6",
     "eslint-import-resolver-alias": "^1.1.2",
     "lineupjs": "^4.2.0",
-    "multinet": "^0.21.7",
-    "multinet-components": "^0.0.4",
+    "multinet": "^0.21.10",
+    "multinet-components": "^0.0.6",
     "pinia": "^2.0.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.vue

@@ -9,13 +9,19 @@ import { useStore } from '@/store';
 import 'multinet-components/dist/style.css';
 import { storeToRefs } from 'pinia';
 import { undoRedoKeyHandler } from '@/lib/provenanceUtils';
+import { ref, computed } from 'vue';
+import { ToolBar } from 'multinet-components';
+import oauthClient from '@/oauth';
 
 const store = useStore();
 const {
   network,
   loadError,
   showProvenanceVis,
   slicedNetwork,
+  labelVariable,
+  selectedNodes,
+  userInfo,
 } = storeToRefs(store);
 
 const urlVars = getUrlVars();
@@ -27,12 +33,73 @@ store.fetchNetwork(
 // Set up provenance undo and redo, provenance is not a ref here
 const { provenance } = store;
 document.addEventListener('keydown', (event) => undoRedoKeyHandler(event, provenance));
+
+const showControlPanel = ref(false);
+
+const searchItems = computed(() => {
+  if (labelVariable.value !== undefined) {
+    return network.value.nodes.map((node) => (node[labelVariable.value || ''])) as string[];
+  }
+  return [];
+});
+
+function search(searchTerm: string) {
+  const nodeIDsToSelect = network.value.nodes
+    .filter((node) => (labelVariable.value !== undefined && node[labelVariable.value] === searchTerm))
+    .map((node) => node._id);
+
+  if (nodeIDsToSelect.length > 0) {
+    selectedNodes.value.push(...nodeIDsToSelect);
+  }
+}
+
+function exportNetwork() {
+  const networkToExport = {
+    nodes: network.value.nodes.map((node) => {
+      const newNode = { ...node };
+      newNode.id = newNode._key;
+
+      return newNode;
+    }),
+    edges: network.value.edges.map((edge) => {
+      const newEdge = { ...edge };
+      newEdge.source = `${edge._from.split('/')[1]}`;
+      newEdge.target = `${edge._to.split('/')[1]}`;
+      return newEdge;
+    }),
+  };
+
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(
+    new Blob([JSON.stringify(networkToExport)], {
+      type: 'text/json',
+    }),
+  );
+  a.download = `${store.networkName}.json`;
+  a.click();
+}
 </script>
 
 <template>
   <v-app>
     <v-main>
-      <control-panel />
+      <tool-bar
+        app-name="MultiMatrix"
+        :clear-selection="() => selectedNodes = []"
+        :prov-undo="() => provenance.undo()"
+        :prov-redo="() => provenance.redo()"
+        :search="search"
+        :search-items="searchItems"
+        :export-network="exportNetwork"
+        :show-trrack-vis="() => showProvenanceVis = true"
+        :toggle-side-bar="() => showControlPanel = !showControlPanel"
+        :user-info="userInfo"
+        :oauth-client="oauthClient"
+        :logout="store.logout"
+        :fetch-user-info="store.fetchUserInfo"
+      />
+
+      <control-panel v-show="showControlPanel" />
 
       <edge-slices v-if="slicedNetwork.length > 0" />