@abi-software/mapintegratedvuer 1.17.3-simulation.2 → 1.17.4

package/src/components/viewers/Scaffold.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="viewer-container">
     <ScaffoldVuer
+      v-if="activated"
       :state="entry.state"
       :url="entry.resource"
       :region="entry.region"
@@ -53,6 +54,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { markRaw } from "vue";
 import EventBus from "../EventBus";
 import ContentMixin from "../../mixins/ContentMixin";
 
@@ -71,61 +73,67 @@ export default {
   },
   methods: {
     showConnectivitiesByReference: async function (resource) {
-      const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
-      let featureIds = [];
-      if (flatmapKnowledge) {
-        featureIds = await getReferenceConnectivitiesFromStorage(resource);
-      } else {
-        featureIds = await getReferenceConnectivitiesByAPI(this.flatmapService.mapImp, resource, this.flatmapService.flatmapQueries);
-      }
-      const nerveLabels = [];
-      for (const id of featureIds) {
-        const knowledge = this.nervesKnowledge.find(k => k.id === id);
-        if (!knowledge) continue;
+      if (this.$refs.scaffold) {
+        const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
+        let featureIds = [];
+        if (flatmapKnowledge) {
+          featureIds = await getReferenceConnectivitiesFromStorage(resource);
+        } else {
+          featureIds = await getReferenceConnectivitiesByAPI(this.flatmapService.mapImp, resource, this.flatmapService.flatmapQueries);
+        }
+        const nerveLabels = [];
+        for (const id of featureIds) {
+          const knowledge = this.nervesKnowledge.find(k => k.id === id);
+          if (!knowledge) continue;
 
-        const nerves = knowledge['nerve-label'];
-        if (nerves) {
-          const subNerves = nerves.flatMap(n => n.subNerves);
-          nerveLabels.push(...subNerves);
+          const nerves = knowledge['nerve-label'];
+          if (nerves) {
+            const subNerves = nerves.flatMap(n => n.subNerves);
+            nerveLabels.push(...subNerves);
+          }
         }
+        this.$refs.scaffold.changeHighlightedByName(nerveLabels, "", false);
       }
-      this.$refs.scaffold.changeHighlightedByName(nerveLabels, "", false);
     },
     setNerveGreyScale: function () {
-      if (this.nervesKnowledge.length) {
-        const nerves = this.nervesKnowledge.reduce((acc, val) => {
-          return acc.concat(val['nerve-label'] || []);
-        }, []);
-        const excludedLabels = nerves.reduce((acc, nerve) => {
-          return acc.concat(nerve.subNerves || []);
-        }, []);
-        this.$refs.scaffold.setGreyScale(true, excludedLabels);
+      if (this.$refs.scaffold) {
+        if (this.nervesKnowledge.length) {
+          const nerves = this.nervesKnowledge.reduce((acc, val) => {
+            return acc.concat(val['nerve-label'] || []);
+          }, []);
+          const excludedLabels = nerves.reduce((acc, nerve) => {
+            return acc.concat(nerve.subNerves || []);
+          }, []);
+          this.$refs.scaffold.setGreyScale(true, excludedLabels);
+        }
       }
     },
     setVisibilityFilter: function (payload) {
-      let names = [];
-      const processed = payload ? true : false;
-      if (payload) {
-        const ids = [];
-        payload['OR'].forEach(orData => {
-          if ('AND' in orData) {
-            if (orData['AND'].length >= 2 && 'models' in orData['AND'][1]) {
-              ids.push(...orData['AND'][1]['models']);
+      if (this.$refs.scaffold) {
+        let names = [];
+        const processed = payload ? true : false;
+        if (payload) {
+          const ids = [];
+          payload['OR'].forEach(orData => {
+            if ('AND' in orData) {
+              if (orData['AND'].length >= 2 && 'models' in orData['AND'][1]) {
+                ids.push(...orData['AND'][1]['models']);
+              }
+            }
+          });
+          for (const id of ids) {
+            const nerveKnowledge = this.nervesKnowledge.find((knowledge) => knowledge.id === id);
+            if (nerveKnowledge) {
+              const nerves = nerveKnowledge['nerve-label'].map(n => n.subNerves).flat(Infinity);
+              names.push(...nerves);
             }
-          }
-        });
-        for (const id of ids) {
-          const nerveKnowledge = this.nervesKnowledge.find((knowledge) => knowledge.id === id);
-          if (nerveKnowledge) {
-            const nerves = nerveKnowledge['nerve-label'].map(n => n.subNerves).flat(Infinity);
-            names.push(...nerves);
           }
         }
+        this.$refs.scaffold.zoomToNerves(names, processed);
       }
-      this.$refs.scaffold.zoomToNerves(names, processed);
     },
     syncFilter: function (data) {
-      if (this.$refs.scaffold.viewingMode === "Neuron Connection") {
+      if (this.$refs.scaffold?.viewingMode === "Neuron Connection") {
         this.filter = data.filter(f => f.facet?.toLowerCase() !== 'show all');
       }
     },
@@ -217,16 +225,27 @@ export default {
       }
     },
     onResize: function () {
-      this.scaffoldCamera.onResize();
+      if (!this.scaffoldCamera) {
+        this.scaffoldCamera = markRaw(this.$refs.scaffold?.$module?.scene?.getZincCameraControls());
+      }
+      if (this.scaffoldCamera) {
+        this.scaffoldCamera.onResize();
+      }
     },
     getState: function () {
-      return this.$refs.scaffold.getState();
+      if (this.$refs.scaffold) {
+        return this.$refs.scaffold.getState();
+      } else {
+        return this.entry.state;
+      }
     },
     /**
      * Perform a local search on this contentvuer
      */
     search: function (term) {
-      return this.$refs.scaffold.search(term, true);
+      if (this.$refs.scaffold) {
+        return this.$refs.scaffold.search(term, true);
+      }
     },
     searchSuggestions: function(term, suggestions){
       if (term === "" || !this.$refs.scaffold) {
@@ -238,33 +257,42 @@ export default {
       });
     },
     showConnectivityTooltips: function (payload) {
-      if (payload.label) {
-        this.$refs.scaffold.changeHighlightedByName([payload.label], "", false);
-        this.$refs.scaffold.showRegionTooltip(payload.label, false, false);
-      } else {
-        const nerves = payload.connectivityInfo['nerve-label'];
-        if (nerves) {
-          const nerveLabels = nerves.flatMap(n => n.subNerves);
-          this.$refs.scaffold.changeHighlightedByName(nerveLabels, "", false);
+      if (this.$refs.scaffold) {
+        if (payload.label) {
+          this.$refs.scaffold.changeHighlightedByName([payload.label], "", false);
+          this.$refs.scaffold.showRegionTooltip(payload.label, false, false);
+        } else {
+          const nerves = payload.connectivityInfo['nerve-label'];
+          if (nerves) {
+            const nerveLabels = nerves.flatMap(n => n.subNerves);
+            this.$refs.scaffold.changeHighlightedByName(nerveLabels, "", false);
+          }
+          this.$refs.scaffold.hideRegionTooltip();
         }
-        this.$refs.scaffold.hideRegionTooltip();
       }
     },
     zoomToFeatures: function(info, forceSelect) {
-      let names = undefined;
-      if (Array.isArray(info)) names = info;
-      else names = [ info.name ];
-      if (forceSelect) {
-        this.$refs.scaffold.changeActiveByName(names, "", false);
+      if (this.$refs.scaffold) {
+        let names = undefined;
+        if (Array.isArray(info)) names = info;
+        else names = [ info.name ];
+        if (forceSelect) {
+          this.$refs.scaffold.changeActiveByName(names, "", false);
+        }
+        this.$refs.scaffold.viewRegion(names);
       }
-      this.$refs.scaffold.viewRegion(names);
     },
     scaffoldIsReady: function () {
       this.scaffoldLoaded = true;
       this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1];
-      if (this.visible) {
-        let rotation = "free";
-        if (this.entry.rotation) rotation = this.entry.rotation;
+      if (!this.scaffoldRef) {
+        this.scaffoldRef = markRaw(this.$refs.scaffold);
+        if (this.scaffoldRef) {
+          this.loadExplorerConfig();
+          this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
+          this.connectivityFilterOptions = this.connectivitiesStore.filterOptions;
+          this.connectivityFilterSources = this.connectivitiesStore.filterSources;
+        }
       }
       this.updateViewerSettings();
       EventBus.emit("mapLoaded", this.$refs.scaffold);
@@ -306,25 +334,31 @@ export default {
       }
     },
     updateWithViewUrl: function(viewUrl) {
-      this.$refs.scaffold.updateViewURL(viewUrl);
+      if (this.$refs.scaffold) {
+        this.$refs.scaffold.updateViewURL(viewUrl);
+      }
     },
     /**
      * Change the view mode of the current scaffold
      */
     changeViewingMode: function (modeName) {
-      this.$refs.scaffold.changeViewingMode(modeName);
+      if (this.$refs.scaffold) {
+        this.$refs.scaffold.changeViewingMode(modeName);
+      }
     },
     updateViewerSettings: function () {
-      const {
-        backgroundDisplay,
-        organsDisplay,
-        outlinesDisplay,
-        viewingMode,
-      } = this.settingsStore.globalSettings;
-      this.$refs.scaffold.backgroundChangeCallback(backgroundDisplay);
-      this.$refs.scaffold.changeViewingMode(viewingMode);
-      this.$refs.scaffold.setColour(organsDisplay);
-      this.$refs.scaffold.setOutlines(outlinesDisplay);
+      if (this.$refs.scaffold) {
+        const {
+          backgroundDisplay,
+          organsDisplay,
+          outlinesDisplay,
+          viewingMode,
+        } = this.settingsStore.globalSettings;
+        this.$refs.scaffold.backgroundChangeCallback(backgroundDisplay);
+        this.$refs.scaffold.changeViewingMode(viewingMode);
+        this.$refs.scaffold.setColour(organsDisplay);
+        this.$refs.scaffold.setOutlines(outlinesDisplay);
+      }
     },
   },
   computed: {
@@ -340,6 +374,27 @@ export default {
     },
   },
   watch: {
+    visible: {
+      handler(visible) {
+        // Only activate scaffoldvuer when the pane becomes active
+        if (visible && (!this.activated)) {
+          this.activated = true;
+          this.$nextTick(() => {
+            if (this.$refs.scaffold) {
+              this.scaffoldRef = markRaw(this.$refs.scaffold);
+              if (this.scaffoldRef) {
+                this.loadExplorerConfig();
+                this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
+                this.connectivityFilterOptions = this.connectivitiesStore.filterOptions;
+                this.connectivityFilterSources = this.connectivitiesStore.filterSources;
+              }
+            }
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
     connectivityKnowledge: {
       handler(newVal, oldVal) {
         // Store scaffold knowledge locally
@@ -359,6 +414,7 @@ export default {
   },
   data: function () {
     return {
+      activated: false,
       apiLocation: process.env.VUE_APP_API_LOCATION,
       scaffoldCamera: undefined,
       scaffoldLoaded: false,
@@ -368,10 +424,6 @@ export default {
       query: '',
     };
   },
-  mounted: function () {
-    this.scaffoldCamera =
-      this.$refs.scaffold.$module.scene.getZincCameraControls();
-  },
 };
 </script>
 

package/src/components/viewers/Simulation.vue

@@ -1,136 +1,29 @@
 <template>
   <SimulationVuer
     :apiLocation="apiLocation"
-    :id="id" ref="simulation"
-    @data-notification="handleDataNotification"
-    @externalData="handleExternalEvent"
-    @file="handleFileEvent"
-
+    :id="id"
+    ref="simulation"
   />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import EventBus from '../EventBus'
-import ContentMixin from '../../mixins/ContentMixin'
-import { SimulationVuer } from '@abi-software/simulationvuer'
-import '@abi-software/simulationvuer/dist/style.css'
+import ContentMixin from "../../mixins/ContentMixin";
+import { SimulationVuer } from "@abi-software/simulationvuer";
+import "@abi-software/simulationvuer/dist/style.css";
 
 export default {
-  name: 'Simulation',
-  mixins: [ContentMixin],
+  name: "Simulation",
+  mixins: [ ContentMixin ],
   components: {
     SimulationVuer,
   },
   computed: {
-    id: function () {
+    id: function() {
       //resource field is only available for simulation omex file and it will run locally.
       //discoverId field is used for simulations running on O2SPARC.
-      return this.entry.resource ? this.entry.resource : this.entry.discoverId
-    },
-  },
-  data: function () {
-    return {
-      columns: undefined,
-      csv: undefined,
-      fileOpened: false,
+      return this.entry.resource ? this.entry.resource: this.entry.discoverId;
     }
-  },
-  methods: {
-    handleDataNotification: function (update) {
-      EventBus.emit('simulation-response', update)
-    },
-    handleDataRequest(payload) {
-      this.processRequest(payload);
-    },
-    handleExternalEvent(payload) {
-      console.log("handleExternalEvent", payload)
-    },
-    handleFileEvent(payload) {
-      if (payload?.type === "opened") {
-        this.$nextTick(() => {
-          this.fileOpened = true
-          if (this.entry.csv_file || this.csv_file) {
-            this.addExternalData(
-              {
-                targetEntryId: this.entry.id,
-                action: this.entry
-              }
-            )
-          }
-        })
-      }
-    },
-    handleWindowClosed(payload) {
-      this.$refs.simulation?.removeDataSubscription(payload.id);
-    },
-    processRequest: function (req) {
-      // strict check against the literal type
-      if (req.id !== 'nz.ac.auckland.simulation-data-request') return
-
-      const requestMajorVersion = parseInt(req.version.split('.')[0])
-      if (requestMajorVersion !== 0) {
-        console.warn('Unsupported simulation request version:', req.version)
-        return
-      }
-
-      if (req.payload.protocol?.resource !== this.id) {
-        return
-      }
-
-      this.$refs.simulation?.addDataSubscription({
-        id: req.id,
-        version: req.version,
-        payload: {
-          windowId: req.payload.windowId,
-          ownerId: req.payload.ownerId,
-          component: req.payload.component,
-          variable: req.payload.variable,
-          withVOI: true,
-        },
-      })
-    },
-    addExternalData: function(payload) {
-      if (this.entry.id === payload.targetEntryId) {
-        const data = payload.action
-        if (data.csv_file) {
-          this.csv_file = data.csv_file
-          this.columns = data.columns
-        }
-        if (this.csv_file && this.fileOpened) {
-          const parameters = []
-          if (this.columns) {
-            this.columns.forEach((col) => {
-              if (col.cellml_variable && col.cellml_variable !== "main/t") {
-                parameters.push(col.cellml_variable)
-              }
-            })
-          }
-          this.$refs.simulation.addExternalData(this.csv_file, undefined, parameters)
-        }
-      }
-    }
-  },
-  mounted: function () {
-    EventBus.on('simulation-external-data', this.addExternalData)
-    EventBus.on('simulation-data-request', this.handleDataRequest)
-    EventBus.on('plot-window-closed', this.handleWindowClosed)
-
-    EventBus.emit('simulation-ready', {
-      resourceId: this.id,
-      entryId: this.entry.id,
-      ready: true,
-    })
-    console.log(this.entry)
-  },
-  beforeUnmount: function () {
-    EventBus.emit('simulation-ready', {
-      resourceId: this.id,
-      entryId: this.entry.id,
-      ready: false,
-    })
-    EventBus.off('simulation-data-request', this.handleDataRequest)
-    EventBus.off('plot-window-closed', this.handleWindowClosed)
-  },
-}
+  }
+};
 </script>

package/src/components.d.ts

@@ -15,7 +15,6 @@ declare module 'vue' {
     CustomSplitter: typeof import('./components/CustomSplitter.vue')['default']
     DatasetHeader: typeof import('./components/DatasetHeader.vue')['default']
     DialogToolbarContent: typeof import('./components/DialogToolbarContent.vue')['default']
-    DummyRouteComponent: typeof import('./components/DummyRouteComponent.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@@ -45,12 +44,10 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     Flatmap: typeof import('./components/viewers/Flatmap.vue')['default']
     FlatmapContextCard: typeof import('./components/FlatmapContextCard.vue')['default']
-    FloatingWindow: typeof import('./components/FloatingWindow.vue')['default']
     Iframe: typeof import('./components/viewers/Iframe.vue')['default']
     MapContent: typeof import('./components/MapContent.vue')['default']
     MultiFlatmap: typeof import('./components/viewers/MultiFlatmap.vue')['default']
     Plot: typeof import('./components/viewers/Plot.vue')['default']
-    PlotComponent: typeof import('./components/PlotComponent.vue')['default']
     ResizeSensor: typeof import('./components/ResizeSensor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package/src/main.js

@@ -1,16 +1,12 @@
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
-
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-
 import { useMainStore } from './stores/index'
-import DummyRouteComponent from './components/DummyRouteComponent.vue'
 
 const routes = [
-  { path: '/', component: DummyRouteComponent },
+  { path: '/' },
 ]
 
 const router = VueRouter.createRouter({
@@ -25,8 +21,6 @@ const app = createApp(App)
 app.use(pinia)
 app.use(router)
 
-app.use(ElementPlus)
-
 const mainStore = useMainStore()
 const token = document.cookie
   .split("; ")
@@ -35,4 +29,4 @@ if (mainStore && token) {
   mainStore.setUserToken(token.split("=")[1])
 }
 
-app.mount('#app')
+app.mount('#app')