@abi-software/mapintegratedvuer 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,13 +50,13 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.6.0",
-    "@abi-software/map-side-bar": "^2.5.1",
-    "@abi-software/map-utilities": "^1.2.0",
+    "@abi-software/flatmapvuer": "^1.6.1",
+    "@abi-software/map-side-bar": "^2.5.2",
+    "@abi-software/map-utilities": "^1.2.1",
     "@abi-software/plotvuer": "^1.0.3",
     "@abi-software/scaffoldvuer": "^1.6.2",
     "@abi-software/simulationvuer": "^1.0.1",
-    "@abi-software/sparc-annotation": "0.3.1",
+    "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue": "^4.6.2",
@@ -86,7 +86,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.19.2",
-    "happy-dom": "^13.3.8",
+    "happy-dom": "^15.11.6",
     "jsdom": "^16.2.2",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.4.0",

package/src/components/ContentBar.vue

@@ -337,6 +337,21 @@ export default {
   position: relative;
   top: auto;
   font-size: 12px;
+  align-items: center;
+
+  :deep(.el-tooltip__trigger) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .hide {
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .info-icon {

package/src/components/DialogToolbarContent.vue

@@ -306,6 +306,10 @@ export default {
         view,
         entries: this.entriesStore.entries,
       });
+
+      if (this.$refs.viewPopover) {
+        this.$refs.viewPopover.hide();
+      }
     }
   },
   mounted: function () {
@@ -433,6 +437,7 @@ export default {
   padding: 4px 8px 12px 8px;
   min-width:unset!important;
   width:unset!important;
+  background-color: #f3ecf6;
   cursor:default;
   .el-popper__arrow {
     &:before {

package/src/components/SplitFlow.vue

@@ -309,7 +309,7 @@ export default {
     onConnectivityComponentClick: function (data) {
       EventBus.emit('connectivity-component-click', {
         connectivityInfo: this.connectivityInfo,
-        data
+        data: data,
       });
     },
     hoverChanged: function (data) {

package/src/components/viewers/Flatmap.vue

@@ -15,8 +15,12 @@
       @help-mode-last-item="onHelpModeLastItem"
       @shown-tooltip="onTooltipShown"
       @shown-map-tooltip="onMapTooltipShown"
+      @annotation-open="onAnnotationOpen"
+      @annotation-close="onAnnotationClose"
+      :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
+      @connectivity-graph-error="onConnectivityGraphError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       :pathControls="true"
       ref="flatmap"
@@ -131,7 +135,8 @@ export default {
     searchSuggestions: function (term, suggestions) {
       if (term && this.$refs.flatmap.mapImp) {
         const results = this.$refs.flatmap.mapImp.search(term);
-        results.__featureIds.forEach(id => {
+        const featureIds = results.__featureIds || results.featureIds;
+        featureIds.forEach(id => {
           const annotation = this.$refs.flatmap.mapImp.annotation(id);
           if (annotation && annotation.label)
             suggestions.push(annotation.label);
@@ -166,6 +171,12 @@ export default {
     },
   },
   mounted: function() {
+    EventBus.on('annotation-close', (payload) => {
+      const currentFlatmap = this.$refs.flatmap;
+      if (payload?.tabClose && currentFlatmap) {
+        this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
+      }
+    });
     EventBus.on("markerUpdate", () => {
       this.flatmapMarkerUpdate(undefined);
     });

package/src/components/viewers/MultiFlatmap.vue

@@ -19,6 +19,7 @@
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
+      @connectivity-graph-error="onConnectivityGraphError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       ref="multiflatmap"
       :displayMinimap="true"
@@ -417,136 +418,10 @@ export default {
       const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
       flatmap.changeViewingMode(modeName);
     },
-    removeConnectivityTooltips: function () {
-      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
-      if (flatmap?.$el) {
-        // close all tooltips on the current flatmap element
-        const tooltips = flatmap.$el.querySelectorAll('.flatmap-tooltip-popup');
-        tooltips.forEach(tooltip => tooltip.remove());
-      }
-    },
-    createTooltipForConnectivity: function (filteredConnectivityData, mapImp) {
-      // combine all labels to show together
-      // content type must be DOM object to use HTML
-      const labelsContainer = document.createElement('div');
-      labelsContainer.classList.add('flatmap-feature-label');
-
-      filteredConnectivityData.forEach((connectivity, i) => {
-        const { label } = connectivity;
-        labelsContainer.append(capitalise(label));
-
-        if ((i + 1) < filteredConnectivityData.length) {
-          const hr = document.createElement('hr');
-          labelsContainer.appendChild(hr);
-        }
-      });
-
-      mapImp.showPopup(
-        filteredConnectivityData[0].featureId,
-        labelsContainer,
-        {
-          className: 'custom-popup flatmap-tooltip-popup',
-          positionAtLastClick: false,
-          preserveSelection: true,
-        }
-      );
-    },
-    emitConnectivityGraphError: function (errorData) {
-      if (errorData.length) {
-        const errorDataToEmit = [...new Set(errorData)];
-        let errorMessage = '';
-
-        errorDataToEmit.forEach((connectivity, i) => {
-          const { label } = connectivity;
-          errorMessage += (i === 0) ? capitalise(label) : label;
-
-          if (errorDataToEmit.length > 1) {
-            if ((i + 2) === errorDataToEmit.length) {
-              errorMessage += ' and ';
-            } else if ((i + 1) < errorDataToEmit.length) {
-              errorMessage += ', ';
-            }
-          }
-        });
-        errorMessage += ' cannot be found on the map!';
-        EventBus.emit('connectivity-graph-error', {
-          data: errorMessage
-        });
-      }
-    },
     showConnectivityTooltips: function (payload) {
-      const { connectivityInfo, data } = payload;
-      const featuresToHighlight = [];
-      const connectivityData = [];
-      const filteredConnectivityData = [];
-      const errorData = [];
-
-      if (!data.length) {
-        this.removeConnectivityTooltips();
-      } else {
-        if (typeof data[0] === 'object') {
-          // Connectivity list hover emits array of objects
-          data.forEach((item) => {
-            connectivityData.push({
-              id: item.id,
-              label: item.name,
-            });
-          })
-        } else {
-          // Connectivity graph node click emits an array of data,
-          // a combination of ids and labels.
-          // The first half is ids and the second half is labels.
-          for (let i = 0; i < data.length / 2; i++) {
-            connectivityData.push({
-              id: data[i],
-              label: data[i + data.length / 2]
-            });
-          }
-        }
-      }
-
-      // to keep the highlighted path on map
-      if (connectivityInfo && connectivityInfo.featureId) {
-        featuresToHighlight.push(...connectivityInfo.featureId);
-      }
-
-      // search the features on the map first
       if (this.flatmapReady) {
         const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
-        if (flatmap.mapImp) {
-          connectivityData.forEach((connectivity, i) => {
-            const {id, label} = connectivity;
-            const response = flatmap.mapImp.search(id);
-
-            if (response?.results.length) {
-              const featureId = response?.results[0].featureId;
-
-              filteredConnectivityData.push({
-                featureId,
-                id,
-                label,
-              });
-              featuresToHighlight.push(id);
-            } else {
-              errorData.push(connectivity);
-            }
-          });
-
-          if (filteredConnectivityData.length) {
-            // show tooltip of the first item
-            // with all labels
-            this.createTooltipForConnectivity(filteredConnectivityData, flatmap.mapImp);
-          } else {
-            errorData.push(...connectivityData);
-            this.removeConnectivityTooltips();
-          }
-
-          // Emit error message for connectivity graph
-          this.emitConnectivityGraphError(errorData);
-
-          // highlight all available features
-          flatmap.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
-        }
+        flatmap.showConnectivityTooltips(payload);
       }
     },
   },

package/src/mixins/ContentMixin.js

@@ -502,6 +502,9 @@ export default {
     onConnectivityInfoClose: function () {
       EventBus.emit('connectivity-info-close');
     },
+    onConnectivityGraphError: function (errorInfo) {
+      EventBus.emit('connectivity-graph-error', errorInfo);
+    },
   },
   data: function () {
     return {