@abi-software/mapintegratedvuer 1.21.1 → 1.22.0

package/src/components/SplitDialog.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="tab-container" ref="tabContainer">
-    <custom-splitter
-      index="split-1"
-      key="split-1"
-    />
+    <custom-splitter index="split-1" key="split-1" />
     <div
       v-for="entry in entries"
       :key="entry.id"
@@ -22,23 +19,18 @@
   </div>
 </template>
 
-
 <script>
-/* eslint-disable no-alert, no-console */
-import ContentVuer from "./ContentVuer.vue";
-import CustomSplitter from "./CustomSplitter.vue";
+import ContentVuer from './ContentVuer.vue';
+import CustomSplitter from './CustomSplitter.vue';
 import EventBus from './EventBus';
 import { mapStores } from 'pinia';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { useSettingsStore } from '../stores/settings';
 import { useConnectivitiesStore } from '../stores/connectivities';
-import {
-  queryPathsByRoute,
-  queryAllConnectedPaths,
-} from "@abi-software/map-utilities";
+import { queryPathsByRoute, queryAllConnectedPaths } from '@abi-software/map-utilities';
 
 export default {
-  name: "SplitDialog",
+  name: 'SplitDialog',
   components: {
     ContentVuer,
     CustomSplitter,
@@ -46,36 +38,36 @@ export default {
   props: {
     entries: {
       type: Array,
-      default: function() {
+      default: function () {
         return [];
-      }
-    }
+      },
+    },
   },
-  data: function() {
+  data: function () {
     return {
-      styles: { },
-      query: "",
+      styles: {},
+      query: '',
       filter: [],
-    }
+    };
   },
   methods: {
     /**
      * Callback when the vuers emit a selected event.
      */
-    resourceSelected: function(result) {
-      this.$emit("resource-selected", result);
+    resourceSelected: function (result) {
+      this.$emit('resource-selected', result);
     },
     speciesChanged: function (species) {
-      this.$emit("species-changed", species);
+      this.$emit('species-changed', species);
     },
-    getClass: function(id) {
+    getClass: function (id) {
       if (this.isIdVisible(id)) {
         return this.getRefsName(id);
       } else {
-        return "inactive";
+        return 'inactive';
       }
     },
-    getRefsName: function(id) {
+    getRefsName: function (id) {
       const refName = this.splitFlowStore.getPaneNameById(id);
       if (refName) {
         if (!(refName in this.styles)) {
@@ -84,7 +76,7 @@ export default {
       }
       return refName;
     },
-    getStyle: function(id) {
+    getStyle: function (id) {
       /*
         Set the style based on the position of the spltters
         Header is 30px in height and the splitter is 1px in
@@ -97,18 +89,17 @@ export default {
       }
       return {};
     },
-    getActiveContents: function() {
+    getActiveContents: function () {
       const activeContents = [];
       const vuers = this.$refs['content'];
       if (vuers) {
-        vuers.forEach(vuer => {
-          if (vuer.visible)
-            activeContents.push(vuer);
+        vuers.forEach((vuer) => {
+          if (vuer.visible) activeContents.push(vuer);
         });
       }
       return activeContents;
     },
-    isIdVisible: function(id) {
+    isIdVisible: function (id) {
       const paneName = this.splitFlowStore.getPaneNameById(id);
       let visible = false;
       if (paneName !== undefined) {
@@ -116,8 +107,8 @@ export default {
       }
       return visible;
     },
-    getContentsWithId: function(id) {
-      let contents = this.$refs["content"];
+    getContentsWithId: function (id) {
+      let contents = this.$refs['content'];
       for (let i = 0; i < contents.length; i++) {
         if (contents[i].getId() == id) {
           return contents[i];
@@ -125,44 +116,44 @@ export default {
       }
       return undefined;
     },
-    getContentsState: function() {
+    getContentsState: function () {
       let states = [];
-      let contents = this.$refs["content"];
+      let contents = this.$refs['content'];
       for (let i = 0; i < contents.length; i++) {
         states.push(contents[i].getState());
       }
       return states;
     },
-    setStyles: function(refName, rect) {
+    setStyles: function (refName, rect) {
       if (this.$refs && this.$refs.tabContainer) {
         const bound = this.$refs.tabContainer.getBoundingClientRect();
         const style = {};
-        style["width"] = `${rect.width}px`;
-        style["left"] = `${rect.left - bound.left}px`;
-        style["height"] = `${rect.height}px`;
-        style["top"] = `${rect.top - bound.top}px`;
-        style["display"] = "block";
+        style['width'] = `${rect.width}px`;
+        style['left'] = `${rect.left - bound.left}px`;
+        style['height'] = `${rect.height}px`;
+        style['top'] = `${rect.top - bound.top}px`;
+        style['display'] = 'block';
         this.styles[refName] = style;
       }
     },
-    hidePane: function(refName) {
-      if (this.$refs && ('tabContainer' in this.$refs)) {
+    hidePane: function (refName) {
+      if (this.$refs && 'tabContainer' in this.$refs) {
         const style = {};
         // style["display"] = "none";
-        style["visibility"] = "hidden";
-        style["pointer-events"] = "none";
-        style["opacity"] = "0";
+        style['visibility'] = 'hidden';
+        style['pointer-events'] = 'none';
+        style['opacity'] = '0';
         this.styles[refName] = style;
       }
     },
-    resize: function() {
+    resize: function () {
       this.__userResize__ = true;
     },
-    resized: function(splitterName, event) {
+    resized: function (splitterName, event) {
       if (this.__userResize__) {
         this.splitFlowStore.setSplitter({
           name: splitterName,
-          value: event[0].size
+          value: event[0].size,
         });
       }
       this.__userResize__ = false;
@@ -171,34 +162,29 @@ export default {
       let activePaneIDs = this.splitFlowStore.getActivePaneIds();
       // body scaffold id may be a string depends on situation
       const wholeBodyScaffoldIDs = [307, '307'];
-      const sckanVersion = Object.keys(this.connectivitiesStore.globalConnectivities)
-        .find(key => key.includes('sckan'));
+      const sckanVersion = Object.keys(this.connectivitiesStore.globalConnectivities).find((key) =>
+        key.includes('sckan'),
+      );
       const uuids = Array.from(
         new Set(
           this.entries
             .filter((entry) => {
               return (
                 activePaneIDs.includes(entry.id) &&
-                (
-                  (
-                    entry.uuid &&
-                    (entry.type === 'Flatmap' || entry.type === 'MultiFlatmap')
-                  ) ||
-                  (
-                    entry.type === 'Scaffold' && entry.resource &&
-                    (entry.isBodyScaffold || wholeBodyScaffoldIDs.includes(entry.discoverId))
-                  )
-                )
-              )
+                ((entry.uuid && (entry.type === 'Flatmap' || entry.type === 'MultiFlatmap')) ||
+                  (entry.type === 'Scaffold' &&
+                    entry.resource &&
+                    (entry.isBodyScaffold || wholeBodyScaffoldIDs.includes(entry.discoverId))))
+              );
             })
             .map((entry) => {
-              if ((entry.type === 'Flatmap' || entry.type === 'MultiFlatmap')) {
+              if (entry.type === 'Flatmap' || entry.type === 'MultiFlatmap') {
                 return entry.uuid;
               } else if (entry.type === 'Scaffold') {
                 return entry.resource;
               }
-            })
-        )
+            }),
+        ),
       );
 
       // mix connectivites of available maps
@@ -206,36 +192,38 @@ export default {
         // emit connectivity-knowledge event only if active connectivity keys are updated
         if (this.connectivitiesStore.updateActiveConnectivityKeys(uuids)) {
           const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
-          EventBus.emit("connectivity-filter-options", uniqueFilters);
+          EventBus.emit('connectivity-filter-options', uniqueFilters);
         }
       } else {
         const connectivityData = this.connectivitiesStore.globalConnectivities[sckanVersion] || [];
-        EventBus.emit("connectivity-knowledge", {
-            data: connectivityData,
-            highlight: [],
-            processed: false,
+        EventBus.emit('connectivity-knowledge', {
+          data: connectivityData,
+          highlight: [],
+          processed: false,
+          // Marks this as the default/global fallback
+          // (no active map's connectivity keys resolved yet)
+          // rather than data scoped to the currently active viewers.
+          isDefaultKnowledge: true,
         });
-        EventBus.emit("connectivity-filter-options", []);
+        EventBus.emit('connectivity-filter-options', []);
         this.connectivitiesStore.updateActiveConnectivityKeys([sckanVersion]);
       }
     },
-    getGeneralSearchedId: function (entry, term, type = 'query') {
+    getGeneralSearchedId: function (entry, term, _type = 'query') {
       const ids = [];
       entry.forEach((data) => {
-        let compareRanges = [
-          JSON.stringify(data['nerve-label'])
-        ];
-        if (type = 'query') {
+        let compareRanges = [JSON.stringify(data['nerve-label'])];
+        if (_type === 'query') {
           compareRanges = [
             ...compareRanges,
             data.id,
             data.label,
             data['long-label'],
-            JSON.stringify(data['nerves'])
-          ]
+            JSON.stringify(data['nerves']),
+          ];
         }
         const isMatched = compareRanges.some((data) => {
-          return data?.toLowerCase().includes(term.toLowerCase())
+          return data?.toLowerCase().includes(term.toLowerCase());
         });
         if (isMatched && !ids.includes(data.id)) {
           ids.push(data.id);
@@ -269,7 +257,7 @@ export default {
 
       const searchTerm = term.toLowerCase();
       const minTermLength = 3;
-      const hasDelimiters = /[-_:\s\/]+/.test(searchTerm);
+      const hasDelimiters = /[-_:\s/]+/.test(searchTerm);
 
       if (hasDelimiters) {
         return pathwayModels
@@ -277,30 +265,31 @@ export default {
             const pathwayId = pathway.id?.toLowerCase() || '';
             return pathwayId.includes(searchTerm);
           })
-          .map(pathway => pathway.id);
+          .map((pathway) => pathway.id);
       }
 
       if (searchTerm.length < minTermLength) {
         return pathwayModels
           .filter((pathway) => {
             const pathwayId = pathway.id?.toLowerCase() || '';
-            const segments = pathwayId.split(/[-_:\s\/]+/);
+            const segments = pathwayId.split(/[-_:\s/]+/);
             return segments.includes(searchTerm);
           })
-          .map(pathway => pathway.id);
+          .map((pathway) => pathway.id);
       }
 
       return pathwayModels
         .filter((pathway) => {
           const pathwayId = pathway.id?.toLowerCase() || '';
-          const segments = pathwayId.split(/[-_:\s\/]+/);
+          const segments = pathwayId.split(/[-_:\s/]+/);
 
-          return segments.some(segment =>
-            segment === searchTerm ||
-            (segment.length >= minTermLength && segment.includes(searchTerm))
+          return segments.some(
+            (segment) =>
+              segment === searchTerm ||
+              (segment.length >= minTermLength && segment.includes(searchTerm)),
           );
         })
-        .map(pathway => pathway.id);
+        .map((pathway) => pathway.id);
     },
     getFlatmapSearchedId: function (flatmap, term) {
       const ids = [];
@@ -313,10 +302,10 @@ export default {
           annotation.name,
           annotation.label,
           annotation.models,
-          annotation.source
+          annotation.source,
         ];
         const isMatched = compareRanges.some((item) => {
-          return item && item.toLowerCase().includes(term.toLowerCase())
+          return item && item.toLowerCase().includes(term.toLowerCase());
         });
         if (isMatched && annotation.models && !ids.includes(annotation.models)) {
           ids.push(annotation.models);
@@ -328,27 +317,29 @@ export default {
       const flatmapResponse = await fetch(flatmapAPI);
       const flatmapJson = await flatmapResponse.json();
       const latestFlatmap = flatmapJson
-        .filter(f => f.id === id)
+        .filter((f) => f.id === id)
         .sort((a, b) => b.created.localeCompare(a.created))[0];
       const flatmapUUID = latestFlatmap.uuid;
       return flatmapUUID;
     },
     parseSearchTerms: function (query) {
       return query
-        .split(",")
-        .map(term => term.trim().replace(/["']/g, ""))
-        .filter(term => term);
+        .split(',')
+        .map((term) => term.trim().replace(/["']/g, ''))
+        .filter((term) => term);
     },
     connectivityQueryFilter: async function (data) {
-      this.query = "";
+      this.query = '';
       this.filter = [];
       const activeContents = this.getActiveContents();
       const flatmapAPI = this.settingsStore.flatmapAPI;
-      const searchOrders = [], searchResults = [];
+      const searchOrders = [],
+        searchResults = [];
       let searchHighlights = [];
       let processed = false;
-      let queryIds = [], facetIds = [];
-      let sourceId = "";
+      let queryIds = [],
+        facetIds = [];
+      let sourceId = '';
 
       const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
       const uniqueFilterSources = this.connectivitiesStore.getUniqueFilterSourcesByKeys;
@@ -363,7 +354,7 @@ export default {
           const plot = viewer.$refs.plot;
           const simulation = viewer.$refs.simulation;
           let currentMap = null;
-          if (multiflatmap) {
+          if (multiflatmap && viewer.flatmapIsReady()) {
             const _currentMap = multiflatmap.getCurrentFlatmap();
             if (_currentMap && _currentMap.mapImp) {
               currentMap = _currentMap;
@@ -386,9 +377,9 @@ export default {
               const nestedIds = [];
               for (let index = 0; index < searchTerms.length; index++) {
                 const term = searchTerms[index];
-                const searchResult = isFlatmap ?
-                  this.getFlatmapSearchedId(currentMap, term) :
-                  this.getGeneralSearchedId(results, term, 'query');
+                const searchResult = isFlatmap
+                  ? this.getFlatmapSearchedId(currentMap, term)
+                  : this.getGeneralSearchedId(results, term, 'query');
                 nestedIds.push(searchResult);
                 // search if the term is a part of a pathway
                 if (isFlatmap) {
@@ -400,7 +391,9 @@ export default {
               const flatIds = [...new Set(nestedIds.flat())];
               if (flatIds.length) {
                 searchOrders.push(...flatIds);
-                const ids = isFlatmap ? await queryAllConnectedPaths(flatmapAPI, sourceId, flatIds) : flatIds;
+                const ids = isFlatmap
+                  ? await queryAllConnectedPaths(flatmapAPI, sourceId, flatIds)
+                  : flatIds;
                 queryIds.push(...ids);
               }
             }
@@ -426,7 +419,7 @@ export default {
               // generate connectivityQueries to query related ids
               if (isNeuronConnection && item.facet?.toLowerCase() !== 'show all') {
                 // string format with a space for CQ
-                const feature = item.facet.replace(",\[", ", \[");
+                const feature = item.facet.replace(',[', ', [');
                 const mode = item.facetPropPath.split('.').pop();
 
                 if (mode === 'origin') {
@@ -447,12 +440,16 @@ export default {
                     filters[facetKey] = [];
                   }
                   // within facet search category -> OR
-                  filters[facetKey].push(...this.getGeneralSearchedId(results, item.facet, 'facet'));
+                  filters[facetKey].push(
+                    ...this.getGeneralSearchedId(results, item.facet, 'facet'),
+                  );
                 }
               } else if (isFlatmap) {
                 if (!isNeuronConnection) {
                   // all other flatmap filter logic
-                  const matchedFilter = uniqueFilters.find(filter => filter.key.includes(facetKey));
+                  const matchedFilter = uniqueFilters.find((filter) =>
+                    filter.key.includes(facetKey),
+                  );
                   if (matchedFilter) {
                     matchedFilter.children.forEach((child) => {
                       if (child.label.toLowerCase() === item.facet.toLowerCase() && child.key) {
@@ -489,31 +486,38 @@ export default {
               if (!('ovd' in filters)) {
                 filters['ovd'] = [];
               }
-              filters['ovd'].push(...await queryPathsByRoute(options));
+              filters['ovd'].push(...(await queryPathsByRoute(options)));
             } else if (connectivityQueries.all.length) {
               if (!('all' in filters)) {
                 filters['all'] = [];
               }
-              filters['all'].push(...await queryAllConnectedPaths(flatmapAPI, sourceId, connectivityQueries.all));
+              filters['all'].push(
+                ...(await queryAllConnectedPaths(flatmapAPI, sourceId, connectivityQueries.all)),
+              );
             }
 
             const nestedIds = Object.values(filters);
             this.filter = [...this.filter, ...nestedIds];
             // between facet search categories -> AND
-            const ids = this.filter.length ? this.filter.reduce((acc, curr) => acc.filter(id => curr.includes(id))) : [];
+            const ids = this.filter.length
+              ? this.filter.reduce((acc, curr) => acc.filter((id) => curr.includes(id)))
+              : [];
             facetIds.push(...ids);
           }
         }
       }
 
       let target;
-      if (this.query && !this.filter.length) { // pure query search
+      if (this.query && !this.filter.length) {
+        // pure query search
         target = queryIds;
-      } else if (!this.query && this.filter.length) { // pure facet search
+      } else if (!this.query && this.filter.length) {
+        // pure facet search
         target = facetIds;
-      } else if (this.query && this.filter.length) { // combined query and facet search
+      } else if (this.query && this.filter.length) {
+        // combined query and facet search
         // between query search and facet search -> AND
-        target = queryIds.filter(id => facetIds.includes(id));
+        target = queryIds.filter((id) => facetIds.includes(id));
       }
       // This can be empty array due to the AND operation
       if (target) {
@@ -526,22 +530,22 @@ export default {
       const uniqueOrders = [...new Set(searchOrders)];
       const uniqueHighlights = [...new Set(searchHighlights)];
       let uniqueResults = Array.from(
-        new Map(searchResults.map((item) => [item.id, item])).values()
+        new Map(searchResults.map((item) => [item.id, item])).values(),
       );
       // Ensure that the results always show search items first
       // and the rest ordered by alphabetical order
       uniqueResults = [
         ...uniqueResults.filter((r) => uniqueOrders.includes(r.id)),
-        ...uniqueResults.filter((r) => !uniqueOrders.includes(r.id))
+        ...uniqueResults.filter((r) => !uniqueOrders.includes(r.id)),
       ];
 
       const connectivitiesPayload = {
         data: uniqueResults,
         highlight: uniqueHighlights,
-        processed: processed
+        processed: processed,
       };
 
-      EventBus.emit("connectivity-knowledge", connectivitiesPayload);
+      EventBus.emit('connectivity-knowledge', connectivitiesPayload);
     },
     updateFlatmapMinimap: function () {
       const activePaneIDs = this.splitFlowStore.getActivePaneIds();
@@ -573,7 +577,7 @@ export default {
   computed: {
     ...mapStores(useSplitFlowStore, useConnectivitiesStore, useSettingsStore),
     horizontal() {
-      if (this.splitFlowStore.activeView === "2horpanel") {
+      if (this.splitFlowStore.activeView === '2horpanel') {
         return true;
       }
       return false;
@@ -583,27 +587,27 @@ export default {
     },
   },
   mounted: function () {
-    EventBus.on("PaneResize", payload => {
+    EventBus.on('PaneResize', (payload) => {
       this.setStyles(payload.refName, payload.rect);
       this.updateFlatmapMinimap();
     });
-    EventBus.on("PaneUnmounted", payload => {
+    EventBus.on('PaneUnmounted', (payload) => {
       this.hidePane(payload.refName);
     });
     EventBus.on('species-layout-connectivity-update', () => {
       this.onSpeciesLayoutConnectivityUpdate();
-    })
-    EventBus.on("connectivity-query-filter", (payload) => {
+    });
+    EventBus.on('connectivity-query-filter', (payload) => {
       this.connectivityQueryFilter(payload);
     });
     //The followings are migrated from ContentVuer and its child components to here
-    EventBus.on("hoverUpdate", (payload) => {
+    EventBus.on('hoverUpdate', (payload) => {
       const contents = this.getActiveContents();
       contents.forEach((content) => {
         content.onHoverUpdate(payload);
       });
     });
-    EventBus.on("startHelp", () => {
+    EventBus.on('startHelp', () => {
       const contents = this.getActiveContents();
       contents.forEach((content) => {
         content.onStartHelp();
@@ -627,7 +631,7 @@ export default {
         content.onGlobalViewerSettingsUpdate();
       });
     });
-    EventBus.on("markerUpdate", () => {
+    EventBus.on('markerUpdate', () => {
       const contents = this.$refs['content'];
       contents.forEach((content) => {
         content.onFlatmapMarkerUpdate();
@@ -646,7 +650,7 @@ export default {
       //TODO: This can be improved with using just one viewer to give us
       //the new knowlegdge with the species/sources specified which
       //will require some UI changes on the sidebar
-      const ongoingSources = []
+      const ongoingSources = [];
       contents.forEach((content) => {
         content.onConnectivitySourceChange(payload, ongoingSources);
       });
@@ -683,7 +687,7 @@ export default {
   margin: 0px 0px 0px 0px !important;
   z-index: 6 !important;
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;
@@ -737,7 +741,13 @@ export default {
 
 .contentvuer {
   position: absolute;
-  transition: opacity 0s, visibility 0s, left 0s ease, top 0s ease, width 0s ease, height 0s ease;
+  transition:
+    opacity 0s,
+    visibility 0s,
+    left 0s ease,
+    top 0s ease,
+    width 0s ease,
+    height 0s ease;
   background: rgba(255, 255, 255, 1);
   visibility: visible;
   opacity: 1;