package-lock.json

@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@mdi/font": "^7.4.47",
-        "@metabohub/mth-ui-viz": "^0.2.4",
+        "@metabohub/mth-ui-viz": "^0.3.2",
         "roboto-fontface": "*",
         "vue": "^3.5.11",
         "vuetify": "^3.5.2",
@@ -1016,16 +1016,16 @@
       }
     },
     "node_modules/@metabohub/mth-ui-viz": {
-      "version": "0.2.4",
-      "resolved": "https://forgemia.inra.fr/api/v4/projects/14155/packages/npm/@metabohub/mth-ui-viz/-/@metabohub/mth-ui-viz-0.2.4.tgz",
-      "integrity": "sha1-u1nbE6+dMGBGca5+8mY7dg6lohY=",
+      "version": "0.3.2",
+      "resolved": "https://forgemia.inra.fr/api/v4/projects/14155/packages/npm/@metabohub/mth-ui-viz/-/@metabohub/mth-ui-viz-0.3.2.tgz",
+      "integrity": "sha1-VhvlTuDYDFJ4NFsSjgVPH8+eeKI=",
       "dependencies": {
         "@mdi/font": "^7.4.47",
         "@metabohub/convert-to-json": "^0.1.10",
         "@metabohub/drop-down-menu": "^0.1.6",
         "@metabohub/viz-context-menu": "^0.0.8",
         "@metabohub/viz-convexhulls-panel": "^0.3.0",
-        "@metabohub/viz-core": "^0.11.36",
+        "@metabohub/viz-core": "^0.11.38",
         "@metabohub/viz-dynamic-data": "^0.1.8",
         "@metabohub/viz-flux": "^0.1.2",
         "@metabohub/viz-force-manager": "^0.1.4",
@@ -1080,9 +1080,9 @@
       }
     },
     "node_modules/@metabohub/viz-core": {
-      "version": "0.11.36",
-      "resolved": "https://forgemia.inra.fr/api/v4/projects/8209/packages/npm/@metabohub/viz-core/-/@metabohub/viz-core-0.11.36.tgz",
-      "integrity": "sha1-Sk9ZPxtiLijpHIIde7Ub4iRu9HM=",
+      "version": "0.11.38",
+      "resolved": "https://forgemia.inra.fr/api/v4/projects/8209/packages/npm/@metabohub/viz-core/-/@metabohub/viz-core-0.11.38.tgz",
+      "integrity": "sha1-PY11ZR9udpbL+UQCHEfzG3lxWQo=",
       "dependencies": {
         "@vueuse/core": "^11.1.0",
         "d3-brush": "^3.0.0",

package.json

@@ -32,7 +32,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "@metabohub/mth-ui-viz": "^0.2.4",
+    "@metabohub/mth-ui-viz": "^0.3.2",
     "roboto-fontface": "*",
     "vue": "^3.5.11",
     "vuetify": "^3.5.2",

src/App.vue

 <template>
   <v-app>
     <v-main>
-      <!-- <div style="background-color: black; height: 150px;"></div> -->
-      <div style="width: 100%; height: 100%; position: fixed; overflow: hidden;">
-        <MetExploreViz 
-          :network="network"
-          :networkStyle="networkStyle"
-          :mappingData="mappings"
-          @removeNode="testEmit"
-        />
+      <div class="box">
+        <button @click="loadData">LOAD</button>
+        <button @click="changeData">CHANGE</button>
+        <button @click="switchViz">SWITCH</button>
+        <div class="header">
+          <div style="height: 150px; background-color: black;" />
+        </div>
+        <div class="networkViz" v-if="boolSwitch">
+          <MetExploreViz 
+            :network="network"
+            :networkStyle="networkStyle"
+            :mappingData="mappings"
+            @removeNode="testEmit"
+          />
+        </div>
       </div>
     </v-main>
   </v-app>
@@ -17,13 +24,16 @@
 <script setup lang="ts">
 import MetExploreViz from "./components/MetExploreViz.vue";
 import { importNetworkFromURL } from '@metabohub/mth-ui-viz';
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref } from "vue";
 import type { Network, GraphStyleProperties } from '@metabohub/mth-ui-viz';
 
 const network = ref<Network>({id: '', nodes: {}, links: []});
 const networkStyle = ref<GraphStyleProperties>({nodeStyles: {}, linkStyles: {}});
 
-const mappings = {
+const networkTmp = ref<Network>({id: '', nodes: {}, links: []});
+const boolSwitch = ref<boolean>(true);
+
+let mappings = {
   CA1: {
     conditions: ['cond1'],
     data: "nodeIdentifier\tcond1\nA\t12\nR1\t24\nB\t48\nR2\t-1\nC\t42"
@@ -32,11 +42,7 @@ const mappings = {
     conditions: ['cond1', 'cond2'],
     data: "nodeIdentifier\tcond1\tcond2\nA\t12\t10\nR1\t24\t30\nB\t48\t55\nR2\t-1\t-2\nC\t42\t67"
   }
-}
-
-const moduleURL = reactive({
-  baseURL: ''
-});
+} as {[key: string]: any}
 
 onMounted(() => {
 	importNetworkFromURL("/glycolysis_krebs.json", network, networkStyle);
@@ -44,7 +50,50 @@ onMounted(() => {
 });
 
 function testEmit(nodeID: string): void {
-  console.log(nodeID);
+  delete network.value.nodes[nodeID];
+}
+
+function loadData() {
+  boolSwitch.value = false;
+  importNetworkFromURL("/large_demo_dataset.json", networkTmp, networkStyle);
+}
+
+function changeData() {
+  network.value = networkTmp.value;
+  mappings = {
+    1: {
+      conditions: ['cond1'],
+      data: "nodeIdentifier\tcond1\nA\t12\nR1\t24\nB\t48\nR2\t-1\nC\t42"
+    },
+    2: {
+      conditions: ['cond1', 'cond2'],
+      data: "nodeIdentifier\tcond1\tcond2\nA\t12\t10\nR1\t24\t30\nB\t48\t55\nR2\t-1\t-2\nC\t42\t67"
+    }
+  } as {[key: string]: any}
+  boolSwitch.value = true;
 }
 
-</script>
\ No newline at end of file
+function switchViz() {
+  boolSwitch.value = !boolSwitch.value;
+}
+
+</script>
+
+<style>
+.box {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.header {
+  flex: 0 1 auto;
+}
+
+.networkViz {
+  height: 100%;
+  position: relative;
+}
+</style>
\ No newline at end of file

src/components/MetExploreViz.vue

 <template>
-	<VizTool 
+	<VizTool
 		:network="props.network" 
 		:network-style="props.networkStyle" 
 		:mapping-data="props.mappingData"