@abi-software/mapintegratedvuer 1.17.3 → 1.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -53,10 +53,10 @@
   ],
   "dependencies": {
     "@abi-software/flatmapvuer": "1.13.1",
-    "@abi-software/map-side-bar": "2.14.1",
+    "@abi-software/map-side-bar": "2.14.2",
     "@abi-software/map-utilities": "1.8.1",
     "@abi-software/plotvuer": "1.0.7",
-    "@abi-software/scaffoldvuer": "1.15.1",
+    "@abi-software/scaffoldvuer": "1.15.4",
     "@abi-software/simulationvuer": "3.0.16",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.0.4",

package/src/components/SplitDialog.vue

@@ -353,7 +353,6 @@ export default {
       const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
       const uniqueFilterSources = this.connectivitiesStore.getUniqueFilterSourcesByKeys;
       let results = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
-
       for (const activeContent of activeContents) {
         const viewer = activeContent.$refs.viewer;
         if (viewer) {

package/src/components/SplitFlow.vue

@@ -596,6 +596,7 @@ export default {
     onShowConnectivityGraph: function (data) {
       const previousPrimaryId = this.splitFlowStore.customLayout?.['pane-1']?.id;
       const connectivityGraphId = this.createNewEntry({
+        connectivityInfo: data.connectivityInfo,
         resource: data.entry,
         type: 'ConnectivityGraph',
         label: data.title || data.label || data.entry ||'Connectivity Graph',

package/src/components/viewers/ConnectivityGraph.vue

@@ -86,18 +86,10 @@ export default {
     onTapNode: function (data) {
       const name = data.map(t => t.label).join(', ');
       this.onConnectivityHovered(name);
-
-      // Hover outside of node area
-      if (!name) {
-        EventBus.emit('show-connectivity', {
-          featureIds: [this.entry.resource]
-        });
-      }
-
     },
     onConnectivityHovered: function (label) {
       const payload = {
-        connectivityInfo: this.graphEntry,
+        connectivityInfo: this.entry.connectivityInfo,
         label: label,
         data: label ? this.getConnectivityDatasets(label) : [],
       };

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/mixins/ContentMixin.js

@@ -65,14 +65,13 @@ export default {
     this.alive = false;
   },
   mounted: function () {
-    this.multiflatmapRef = this.$refs.multiflatmap;
-    this.flatmapRef = this.$refs.flatmap;
-    this.scaffoldRef = this.$refs.scaffold;
-    this.iframeRef = this.$refs.iframe;
-    this.plotRef = this.$refs.plot;
-    this.simulationRef = this.$refs.simulation;
+    this.multiflatmapRef = markRaw(this.$refs.multiflatmap);
+    this.flatmapRef = markRaw(this.$refs.flatmap);
+    this.iframeRef = markRaw(this.$refs.iframe);
+    this.plotRef = markRaw(this.$refs.plot);
+    this.simulationRef = markRaw(this.$refs.simulation);
     // load connectivity with mock human male flatmap
-    if (this.scaffoldRef || this.iframeRef || this.plotRef || this.simulationRef) {
+    if (this.iframeRef || this.plotRef || this.simulationRef) {
       this.loadExplorerConfig();
     }
     this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
@@ -274,59 +273,6 @@ export default {
         )
       );
     },
-    /**
-     * Get the term to zoom/highlight in a synchronisation event,
-     * if it cannot be found in the map, it will perform several
-     * calls to try to ge a valid name/id.
-     */
-    getNameAndIdFromSyncData: async function (data) {
-      let name = data.internalName;
-      if (name === undefined && data.resource) {
-        name = data.resource.label;
-      }
-      let id = undefined;
-      if (data.resource && data.resource.resource) {
-        id = data.resource.resource[0];
-      }
-      if (this.entry.type === "Scaffold") {
-        const objects = this.$refs.scaffold.findObjectsWithGroupName(name);
-        // If a region is not found use a hardcoded list to determine
-        // its parents region first
-        if (objects.length === 0) {
-          //Use nerve mapping
-          if (data.resource && data.resource.feature) {
-            const matched = getNerveNames(data.resource.feature.models);
-            if (matched.length > 0) return matched;
-          }
-          let matched = getParentsRegion(name);
-          if (matched) {
-            return matched;
-          }
-          // Hardcoded list failed - use an endpoint to find its parents
-          if (id && data.eventType === "selected") {
-            return fetch(`${this.apiLocation}get-related-terms/${id}`)
-              .then(response => response.json())
-              .then(data => {
-                if (data.uberon?.array.length > 0) {
-                  name =
-                    data.uberon.array[0].name.charAt(0).toUpperCase() +
-                    data.uberon.array[0].name.slice(1);
-                  id = data.uberon.array[0].id.toUpperCase();
-                  return { id, name };
-                }
-              });
-          }
-        }
-      } else if (this.entry.type === "MultiFlatmap") {
-        if (name === "Bladder") {
-          name = "Urinary Bladder";
-        } else {
-          const matched = getNerveNames(name);
-          if (matched.length > 0) name = matched[0];
-        }
-      }
-      return { id, name };
-    },
     // Get the species and andaotmy info for the featured datasets
     getDatasetAnatomyInfo: function (identifier) {
       fetch(`${this.apiLocation}dataset_info/anatomy?identifier=${identifier}`)
@@ -837,6 +783,9 @@ export default {
       multiflatmapRef: null,
       flatmapRef: null,
       scaffoldRef: null,
+      iframeRef: null,
+      plotRef: null,
+      simulationRef: null,
       scaffoldLoaded: false,
       isInHelp: false,
       mapManager: undefined,

package/src/stores/connectivities.js

@@ -8,6 +8,7 @@ export const useConnectivitiesStore = defineStore('connectivities', {
       globalConnectivities: {},
       filterOptions: {},
       filterSources: {},
+      connectivitiesUpdated: true,
     };
   },
   getters: {
@@ -74,11 +75,19 @@ export const useConnectivitiesStore = defineStore('connectivities', {
       if (!listsAreEqual(this.activeConnectivityKeys, activeConnectivityKeys)) {
         this.activeConnectivityKeys = activeConnectivityKeys;
         return true;
+      } else if (this.connectivitiesUpdated) {
+        this.connectivitiesUpdated = !activeConnectivityKeys.every(ele => ele in this.globalConnectivities);
+        return true;
       }
       return false;
     },
     updateGlobalConnectivities(globalConnectivities) {
-      this.globalConnectivities = globalConnectivities;
+      if (globalConnectivities) {
+        if (JSON.stringify(globalConnectivities) !== JSON.stringify(this.globalConnectivities)) {
+          this.globalConnectivities = globalConnectivities;
+          this.connectivitiesUpdated = true;
+        }
+      }
     },
     updateFilterOptions(filterOptions) {
       this.filterOptions = filterOptions;