@abi-software/mapintegratedvuer 1.10.1-beta.0 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.10.1-beta.0",
+  "version": "1.10.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -10,8 +10,10 @@
     "start": "vite build && vite preview",
     "test-unit": "mochapack --webpack-config test/unit/webpack.config.js --require test/unit/setup.js test/unit/**/*.spec.js",
     "test": "vitest --dom",
+    "cypress-prepare": "node cypress/support/fileUtils.js",
     "cypress": "cypress",
-    "cypress-component": "cypress run --component",
+    "cypress-open": "npm run cypress-prepare && cypress open",
+    "cypress-component": "npm run cypress-prepare && cypress run --component",
     "report:merge": "mochawesome-merge cypress/results/json/*json > cypress/results/mochawesome-bundle.json",
     "report:generate": "marge cypress/results/mochawesome-bundle.json -o cypress/reports/html",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
@@ -50,12 +52,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.9.3-beta.7",
-    "@abi-software/map-side-bar": "^2.8.3-beta.6",
-    "@abi-software/map-utilities": "^1.6.0-beta.0",
+    "@abi-software/flatmapvuer": "^1.10.0",
+    "@abi-software/map-side-bar": "^2.9.0",
+    "@abi-software/map-utilities": "^1.6.0",
     "@abi-software/plotvuer": "1.0.4",
-    "@abi-software/scaffoldvuer": "^1.10.0-beta.0",
-    "@abi-software/simulationvuer": "^2.0.11-beta.0",
+    "@abi-software/scaffoldvuer": "^1.10.0",
+    "@abi-software/simulationvuer": "^2.0.11",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/ContentVuer.vue

@@ -140,6 +140,37 @@ export default {
     onResize: function () {
       this.$refs.viewer?.onResize();
     },
+    //The following handle EventBus.on from SplitDialog
+    onConnectivityItemClose: function() {
+      this.$refs.viewer?.onConnectivityItemClose();
+    },
+    onConnectivitySourceChange: function(payload) {
+      this.$refs.viewer?.changeConnectivitySource(payload);
+    },
+    onFlatmapMarkerUpdate: function() {
+      this.$refs.viewer?.flatmapMarkerUpdate();
+    },
+    onGlobalViewerSettingsUpdate: function() {
+      this.$refs.viewer?.updateViewerSettings();
+    },
+    onHoverUpdate: function(payload) {
+      this.$refs.viewer?.sidebarHoverHighlight(payload);
+    },
+    onShowConnectivity: function(payload) {
+      this.$refs.viewer?.showConnectivity(payload);
+    },
+    onShowConnectivityTooltips: function(payload) {
+      this.$refs.viewer?.showConnectivityTooltips(payload);
+    },
+    onShowReferenceConnectivity: function(payload) {
+      this.$refs.viewer?.showConnectivitiesByReference(payload);
+    },
+    onSidebarAnnotationClose: function() {
+      this.$refs.viewer?.onSidebarAnnotationClose();
+    },
+    onStartHelp: function() {
+      this.$refs.viewer?.startHelp();
+    },
   },
   data: function () {
     return {

package/src/components/DialogToolbarContent.vue

@@ -290,7 +290,7 @@
         :virtual-ref="globalSettingRef"
         ref="settingPopover"
         placement="bottom"
-        width="133"
+        width="230"
         :teleported=false
         trigger="click"
         popper-class="setting-popover"
@@ -298,6 +298,7 @@
         :disabled="!mapLoaded"
         >
         <div class="setting-popover-inner">
+          <h4>Display options:</h4>
           <!-- <div class="setting-popover-block" v-if="'displayMarkers' in globalSettings">
             <el-checkbox
               v-model="globalSettings.displayMarkers"
@@ -336,7 +337,7 @@
           </div> -->
 
           <div class="setting-popover-block" v-if="'flightPathDisplay' in globalSettings">
-            <h5>Flight path display</h5>
+            <h5>Flight path</h5>
             <el-radio-group
               v-model="globalSettings.flightPathDisplay"
               @change="updateGlobalSettings"
@@ -346,7 +347,7 @@
             </el-radio-group>
           </div>
           <div class="setting-popover-block" v-if="'organsDisplay' in globalSettings">
-            <h5>Organs display</h5>
+            <h5>Organs</h5>
             <el-radio-group
               v-model="globalSettings.organsDisplay"
               @change="updateGlobalSettings"
@@ -356,7 +357,7 @@
             </el-radio-group>
           </div>
           <div class="setting-popover-block" v-if="'outlinesDisplay' in globalSettings">
-            <h5>Outlines display</h5>
+            <h5>Apply outlines</h5>
             <el-radio-group
               v-model="globalSettings.outlinesDisplay"
               @change="updateGlobalSettings"
@@ -366,7 +367,7 @@
             </el-radio-group>
           </div>
           <div class="setting-popover-block" v-if="'backgroundDisplay' in globalSettings">
-            <h5>Change background</h5>
+            <h5>Background color</h5>
             <el-radio-group
               class="bg-color-radio-group"
               v-model="globalSettings.backgroundDisplay"
@@ -580,24 +581,12 @@ export default {
         EventBus.emit('modeUpdate', this.globalSettings.interactiveMode);
       }
       // viewing mode update
-      if (updatedSettings.includes('viewingMode')) {
-        EventBus.emit('viewingModeUpdate', this.globalSettings.viewingMode);
-      }
-      // flight path update
-      if (updatedSettings.includes('flightPathDisplay')) {
-        EventBus.emit('flightPathUpdate', this.globalSettings.flightPathDisplay);
-      }
-      // organs display update
-      if (updatedSettings.includes('organsDisplay')) {
-        EventBus.emit('organsDisplayUpdate', this.globalSettings.organsDisplay);
-      }
-      // outlines display update
-      if (updatedSettings.includes('outlinesDisplay')) {
-        EventBus.emit('outlinesDisplayUpdate', this.globalSettings.outlinesDisplay);
-      }
-      // background display update
-      if (updatedSettings.includes('backgroundDisplay')) {
-        EventBus.emit('backgroundDisplayUpdate', this.globalSettings.backgroundDisplay);
+      if (updatedSettings.includes('viewingMode') ||
+        updatedSettings.includes('flightPathDisplay') ||
+        updatedSettings.includes('organsDisplay') ||
+        updatedSettings.includes('outlinesDisplay') ||
+        updatedSettings.includes('backgroundDisplay')) {
+        EventBus.emit('globalViewerSettingsUpdate');
       }
     },
     titleClicked: function(id) {
@@ -806,7 +795,7 @@ export default {
 }
 
 :deep(.setting-popover.el-popper) {
-  min-width: 200px !important;
+  min-width: 230px !important;
 }
 
 .viewing-mode-selector {
@@ -906,31 +895,28 @@ export default {
 }
 
 .setting-popover-inner {
-  padding: 4px 8px 12px 8px;
+  padding: 0.5rem 0.75rem;
   max-height: calc(100vh - 135px);
   overflow-y: auto;
   border-radius: var(--el-popover-border-radius);
   scrollbar-width: thin;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
+
+  > h4 {
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    color: $app-primary-color;
+    text-align: center;
+  }
 }
 
 .setting-popover-block {
-  + .setting-popover-block {
-    position: relative;
-
-    &:before {
-      content: "";
-      display: block;
-      width: 100%;
-      height: 0;
-      border-top: 1px solid var(--el-border-color);
-      position: absolute;
-      top: -0.5rem;
-      left: 0;
-    }
-  }
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
 
   h5 {
     margin: 0;
@@ -938,6 +924,7 @@ export default {
     font-size: 14px;
     font-weight: 500;
     line-height: 32px;
+    color: #303133;
   }
 }
 
@@ -979,7 +966,9 @@ export default {
 }
 
 .bg-color-radio-group {
+  display: flex;
   gap: 0.5rem;
+  margin-top: 0.25rem;
 
   .el-radio {
     margin-right: 0;
@@ -1000,7 +989,7 @@ export default {
     padding: 4px;
 
     > span {
-      display: inline-block;
+      display: block;
       width: 20px;
       height: 20px;
       background-color: var(--bg-color);

package/src/components/SplitDialog.vue

@@ -236,7 +236,7 @@ export default {
       }
     },
     getSearchedId: function (flatmap, term) {
-      let ids = [];
+      const ids = [];
       const searchResult = flatmap.mapImp.search(term);
       const featureIds = searchResult.__featureIds || searchResult.featureIds;
       featureIds.forEach((id) => {
@@ -259,7 +259,8 @@ export default {
     },
     connectivityQueryFilter: async function (data) {
       const activeContents = this.getActiveContents();
-      let searchOrders = [], searchHighlights = [], searchResults = [];
+      const searchOrders = [], searchHighlights = [], searchResults = [];
+      let processed = false;
 
       for (const activeContent of activeContents) {
         const viewer = activeContent.$refs.viewer;
@@ -283,59 +284,66 @@ export default {
           const uniqueFilterSources = this.connectivitiesStore.getUniqueFilterSourcesByKeys;
           if (currentFlatmap && currentFlatmap.$el.checkVisibility()) {
             let results = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
+
+            const filters = {};
+            let queryIds = [], facetIds = [];
             if (data) {
               this.query = data.query;
-              let filters = {}
+              // get query search result ids and order
+              if (data.query) {
+                const searchTerms = this.query
+                  .replace(/["']/g, "")
+                  .split(",")
+                  .map(term => term.trim())
+                  .filter(term => term);
+                const nestedIds = [];
+                for (let index = 0; index < searchTerms.length; index++) {
+                  nestedIds.push(this.getSearchedId(currentFlatmap, searchTerms[index]));
+                }
+                // within query search (split terms by comma) -> OR
+                const flatIds = [...new Set(nestedIds.flat())];
+                searchOrders.push(...flatIds);
+                queryIds = await currentFlatmap.retrieveConnectedPaths(flatIds);
+              }
+
+              // get facet search result ids
               data.filter.forEach((item) => {
                 const facetKey = item.facetPropPath.split('.').pop();;
-                if (!(facetKey in filters)) {
-                  filters[facetKey] = [];
-                }
                 const matchedFilter = uniqueFilters.find(filter => filter.key.includes(facetKey));
                 if (matchedFilter) {
                   matchedFilter.children.forEach((child) => {
                     if (child.label === item.facet && child.key) {
                       const childKey = child.key.split('.').pop();
-                      filters[facetKey].push(childKey);
+                      if (!(facetKey in filters)) {
+                        filters[facetKey] = [];
+                      }
+                      // within facet search category -> OR
+                      filters[facetKey].push(...uniqueFilterSources[facetKey][childKey]);
                     }
                   });
                 }
               });
-              let ids = [];
-              for (const [key, value] of Object.entries(filters)) {
-                if (value.length) {
-                  let valueToIds = [];
-                  // within AND
-                  value.forEach((v) => valueToIds.push(...uniqueFilterSources[key][v]));
-                  ids.push(valueToIds);
-                }
-              }
-              // between AND
-              this.filter = ids.length ?
-                [...new Set(ids.reduce((acc, curr) => acc.filter(id => curr.includes(id))))] :
+              this.filter = Object.values(filters);
+              // between facet search categories -> AND
+              facetIds = this.filter.length ?
+                this.filter.reduce((acc, curr) => acc.filter(id => curr.includes(id))) :
                 [];
-              if (data.type === "query-update") {
-                this.query = data.value;
-              } else if (data.type === "filter-update") {
-                this.filter = data.value;
-              }
             }
-            if (this.query) {
-              let options = {};
-              const searchTerms = this.query.split(",").map((term) => term.trim());
-              const nestedIds = [];
-              for (let index = 0; index < searchTerms.length; index++) {
-                nestedIds.push(this.getSearchedId(currentFlatmap, searchTerms[index]));
-              }
-              const ids = [...new Set(nestedIds.flat())];
-              searchOrders.push(...ids);
-              const paths = await currentFlatmap.retrieveConnectedPaths(ids, options);
-              searchHighlights.push(...paths);
-              results = results.filter((item) => paths.includes(item.id));
+
+            let target;
+            if (this.query && !this.filter.length) { // pure query search
+              target = queryIds;
+            } else if (!this.query && this.filter.length) { // pure facet search
+              target = facetIds;
+            } 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));
             }
-            if (this.filter.length) {
-              searchHighlights.push(...this.filter);
-              results = results.filter((item) => this.filter.includes(item.id));
+            // This can be empty array due to the AND operation
+            if (target) {
+              searchHighlights.push(...target);
+              results = results.filter((item) => target.includes(item.id));
+              processed = true;
             }
             searchResults.push(...results);
           }
@@ -355,8 +363,9 @@ export default {
       ];
 
       const connectivitiesPayload = {
-        highlight: uniqueHighlights,
         data: uniqueResults,
+        highlight: uniqueHighlights,
+        processed: processed
       };
 
       EventBus.emit("connectivity-knowledge", connectivitiesPayload);
@@ -421,6 +430,67 @@ export default {
     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) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onHoverUpdate(payload);
+      });
+    });
+    EventBus.on("startHelp", () => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onStartHelp();
+      });
+    });
+    EventBus.on('connectivity-item-close', () => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onConnectivityItemClose();
+      });
+    });
+    EventBus.on('sidebar-annotation-close', () => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onSidebarAnnotationClose();
+      });
+    });
+    EventBus.on('globalViewerSettingsUpdate', () => {
+      const contents = this.$refs['content'];
+      contents.forEach((content) => {
+        content.onGlobalViewerSettingsUpdate();
+      });
+    });
+    EventBus.on("markerUpdate", () => {
+      const contents = this.$refs['content'];
+      contents.forEach((content) => {
+        content.onFlatmapMarkerUpdate();
+      });
+    });
+    EventBus.on('connectivity-hovered', (payload) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onShowConnectivityTooltips(payload);
+      });
+    });
+    EventBus.on('connectivity-source-change', (payload) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onConnectivitySourceChange(payload);
+      });
+    });
+    EventBus.on('show-connectivity', (payload) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onShowConnectivity(payload);
+      });
+    });
+    EventBus.on('show-reference-connectivities', (payload) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onShowReferenceConnectivity(payload);
+      });
+    });
   },
 };
 </script>

package/src/components/SplitFlow.vue

@@ -131,6 +131,7 @@ export default {
       confirmDeleteCallback: undefined,
       confirmCommentCallback: undefined,
       createData: {},
+      connectivitySearch: false,
       connectivityHighlight: [],
       connectivityKnowledge: [],
       connectivityExplorerClicked: [], // to support multi views
@@ -353,7 +354,7 @@ export default {
         hoverConnectivity = data.models ? [data.models] : this.annotationHighlight;
       }
       this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI, hoverConnectivity);
-      EventBus.emit("hoverUpdate");
+      EventBus.emit("hoverUpdate", { connectivitySearch: this.connectivitySearch });
     },
     searchChanged: function (data) {
       if (data.tabType === 'dataset') {
@@ -493,8 +494,13 @@ export default {
     setState: function (state) {
       this.entriesStore.setAll(state.entries);
       //Support both old and new permalink.
-      if (state.splitFlow) this.splitFlowStore.setState(state.splitFlow);
-      else this.entries.forEach(entry => this.splitFlowStore.setIdToPrimaryPane(entry.id));
+      if (state.splitFlow) {
+        this.splitFlowStore.setState(state.splitFlow);
+      }
+      else {
+        this.entries.forEach(entry => this.splitFlowStore.setIdToPrimaryPane(entry.id));
+      }
+      this.updateGlobalSettingsFromState(state);
     },
     getState: function (anonymousAnnotations = false) {
       let state = JSON.parse(JSON.stringify(this.entriesStore.$state));
@@ -519,6 +525,7 @@ export default {
         }
       }
       state.splitFlow = this.splitFlowStore.getState();
+      state.globalSettings = this.settingsStore.getGlobalSettings();
       return state;
     },
     removeEntry: function (id) {
@@ -616,7 +623,9 @@ export default {
       this.$refs.dialogToolbar.loadGlobalSettings();
     },
     onSidebarTabClosed: function (tab) {
-      if (tab.id === 3 && tab.type === "annotation") EventBus.emit('annotation-close');
+      if (tab.id === 3 && tab.type === "annotation") {
+        EventBus.emit('sidebar-annotation-close');
+      }
     },
     updateGlobalSettingsFromStorage: function () {
       const globalSettingsFromStorage = localStorage.getItem('mapviewer.globalSettings');
@@ -625,28 +634,8 @@ export default {
       }
     },
     updateGlobalSettingsFromState: function (state) {
-      let mappedSettings = null;
-      state.entries.forEach((entry) => {
-        if (entry.state?.state) {
-          const {
-            background,
-            colour,
-            flightPath3D,
-            outlines,
-            viewingMode
-          } = entry.state.state;
-
-          mappedSettings = {
-            viewingMode: viewingMode,
-            flightPathDisplay: flightPath3D,
-            organsDisplay: colour,
-            outlinesDisplay: outlines,
-            backgroundDisplay: background,
-          };
-        }
-      })
-      if (mappedSettings) {
-        this.settingsStore.updateGlobalSettings(mappedSettings);
+      if (state?.globalSettings) {
+        this.settingsStore.updateGlobalSettings(state.globalSettings);
       }
     },
   },
@@ -690,7 +679,7 @@ export default {
         this.$refs.sideBar.setDrawerOpen(true);
       }
     });
-    EventBus.on('annotation-close', () => {
+    EventBus.on('sidebar-annotation-close', () => {
       const globalSettings = { ...this.settingsStore.globalSettings };
       const { interactiveMode, viewingMode } = globalSettings;
 
@@ -766,6 +755,7 @@ export default {
     EventBus.on("connectivity-knowledge", payload => {
       this.connectivityKnowledge = payload.data;
       this.connectivityHighlight = payload.highlight || [];
+      this.connectivitySearch = payload.processed;
     })
     EventBus.on("modeUpdate", payload => {
       if (payload === "dataset") {

package/src/components/viewers/Flatmap.vue

@@ -70,6 +70,11 @@ export default {
     FlatmapVuer,
     HelpModeDialog,
   },
+  data: function () {
+    return {
+      flatmapReady: false,
+    }
+  },
   methods: {
     getState: function () {
       return this.$refs.flatmap.getState();
@@ -105,12 +110,13 @@ export default {
       }
     },
     flatmapReadyCall: function (flatmap) {
+      this.flatmapReady = true;
       let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
       const flatmapImp = flatmap.mapImp;
       EventBus.emit("mapImpProv", provClone); // send clone to context card
       this.$emit("flatmap-provenance-ready", provClone);
       this.flatmapReadyForMarkerUpdates(flatmap);
-      this.updateSettings();
+      this.updateViewerSettings();
       this.loadConnectivityExplorerConfig(flatmap);
       EventBus.emit("mapLoaded", flatmap);
     },
@@ -125,6 +131,14 @@ export default {
         'location': selectionsTitle
       });
     },
+    onSidebarAnnotationClose: function() {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
+        }
+      }
+    },
     highlightFeatures: function(info) {
       let name = info.name;
       const flatmap = this.$refs.flatmap.mapImp;
@@ -151,6 +165,26 @@ export default {
         });
       }
     },
+    showConnectivity: function (payload) {
+      if (this?.alive) {
+        const { featureIds, offset } = payload;
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          currentFlatmap.moveMap(featureIds, {
+            offsetX: offset ? -150 : 0,
+            zoom: 4,
+          });
+        }
+      }
+    },
+    showConnectivitiesByReference: function (payload) {
+      if (this?.alive) {
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          currentFlatmap.showConnectivitiesByReference(payload);
+        }
+      }
+    },
     zoomToFeatures: function(info, forceSelect) {
       let name = info.name;
       const flatmap = this.$refs.flatmap.mapImp;
@@ -172,13 +206,13 @@ export default {
     changeViewingMode: function (modeName) {
       this.$refs.flatmap.changeViewingMode(modeName);
     },
-    updateSettings: function () {
+    updateViewerSettings: function () {
       const {
         backgroundDisplay,
         viewingMode,
         flightPathDisplay,
         organsDisplay,
-        outlines,
+        outlinesDisplay,
       } = this.settingsStore.globalSettings;
 
       const currentFlatmap = this.$refs.flatmap;
@@ -186,7 +220,7 @@ export default {
       currentFlatmap.changeViewingMode(viewingMode);
       currentFlatmap.setFlightPath3D(flightPathDisplay);
       currentFlatmap.setColour(organsDisplay);
-      currentFlatmap.setOutlines(outlines);
+      currentFlatmap.setOutlines(outlinesDisplay);
       currentFlatmap.backgroundChangeCallback(backgroundDisplay);
     },
   },
@@ -195,57 +229,6 @@ export default {
       return this.settingsStore.facets.species;
     },
   },
-  mounted: function() {
-    EventBus.on('annotation-close', () => {
-      if (this?.alive) {
-        const currentFlatmap = this.$refs.flatmap;
-        if (currentFlatmap) {
-          this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
-        }
-      }
-    });
-    EventBus.on("markerUpdate", () => {
-      if (this?.alive) this.flatmapMarkerUpdate(undefined);
-    });
-    EventBus.on("hoverUpdate", () => {
-      if (this?.alive) this.cardHoverHighlight();
-    });
-    EventBus.on('viewingModeUpdate', (payload) => {
-      if (this?.alive) this.$refs.flatmap.changeViewingMode(payload);
-    });
-    EventBus.on('flightPathUpdate', (payload) => {
-      if (this?.alive) this.$refs.flatmap.setFlightPath3D(payload);
-    });
-    EventBus.on('organsDisplayUpdate', (payload) => {
-      if (this?.alive) this.$refs.flatmap.setColour(payload);
-    });
-    EventBus.on('outlinesDisplayUpdate', (payload) => {
-      if (this?.alive) this.$refs.flatmap.setOutlines(payload);
-    });
-    EventBus.on('backgroundDisplayUpdate', (payload) => {
-      if (this?.alive) this.$refs.flatmap.backgroundChangeCallback(payload);
-    });
-    EventBus.on('show-connectivity', (payload) => {
-      if (this?.alive) {
-        const { featureIds, offset } = payload;
-        const currentFlatmap = this.$refs.flatmap;
-        if (currentFlatmap) {
-          currentFlatmap.moveMap(featureIds, {
-            offsetX: offset ? -150 : 0,
-            zoom: 4,
-          });
-        }
-      }
-    });
-    EventBus.on('show-reference-connectivities', (payload) => {
-      if (this?.alive) {
-        const currentFlatmap = this.$refs.flatmap;
-        if (currentFlatmap) {
-          currentFlatmap.showConnectivitiesByReference(payload);
-        }
-      }
-    });
-  },
 };
 </script>