@abi-software/map-utilities 1.1.3-beta.6 → 1.1.3-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.1.3-beta.6",
+  "version": "1.1.3-beta.8",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="connectivity-graph" v-loading="loading">
+
     <div ref="graphCanvas" class="graph-canvas"></div>
+
     <div class="control-panel">
       <div class="node-key">
         <div class="key-head">Node type:</div>
@@ -53,6 +55,11 @@
         </el-tooltip>
       </div>
     </div>
+
+    <div class="connectivity-graph-error" v-if="errorMessage">
+      {{ errorMessage }}
+    </div>
+
   </div>
 </template>
 
@@ -95,6 +102,7 @@ export default {
       zoomLockLabel: ZOOM_LOCK_LABEL,
       iconColor: APP_PRIMARY_COLOR,
       zoomEnabled: false,
+      errorMessage: '',
     };
   },
   mounted() {
@@ -184,7 +192,7 @@ export default {
 
       this.connectivityGraph.on('tap-node', (event) => {
         const { label } = event.detail;
-        const labels = label.split(`\n`);
+        const labels = label ? label.split(`\n`) : [];
         /**
          * This event is triggered after a node on the connectivity graph is clicked.
          */
@@ -345,6 +353,13 @@ export default {
       this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
       this.connectivityGraph.enableZoom(!this.zoomEnabled);
     },
+    showErrorMessage: function (errorMessage) {
+      this.errorMessage = errorMessage;
+      // Show error for 3 seconds
+      setTimeout(() => {
+        this.errorMessage = '';
+      }, 3000);
+    },
   },
 };
 </script>
@@ -439,6 +454,19 @@ export default {
   z-index: 1;
 }
 
+.connectivity-graph-error {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: fit-content;
+  font-size: 12px;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--el-color-error-light-9);
+  border-radius: var(--el-border-radius-small);
+  border: 1px solid var(--el-color-error);
+}
+
 .visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);

package/src/components/ConnectivityGraph/graph.js

@@ -226,7 +226,7 @@ class CytoscapeGraph extends EventTarget
         }).on('mouseover', 'node', this.overNode.bind(this))
           .on('mouseout', 'node', this.exitNode.bind(this))
           .on('position', 'node', this.moveNode.bind(this))
-          .on('tap', 'node', this.tapNode.bind(this))
+          .on('tap', this.tapNode.bind(this))
 
         this.tooltip = document.createElement('div')
         this.tooltip.className = 'cy-graph-tooltip'