@abi-software/map-utilities 1.2.0 → 1.2.1-beta.0

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -106,7 +106,8 @@
       </div>
     </div>
 
-    <div class="connectivity-graph-error" v-if="errorMessage">
+    <div class="connectivity-graph-error" v-if="errorMessage || errorConnectivities">
+      <strong v-if="errorConnectivities">{{ errorConnectivities }}</strong>
       {{ errorMessage }}
     </div>
 
@@ -115,6 +116,7 @@
 
 <script>
 import { ConnectivityGraph } from './graph';
+import { capitalise } from '../utilities';
 
 const MIN_SCHEMA_VERSION = 1.3;
 const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
@@ -125,6 +127,7 @@ const ZOOM_IN_LABEL = 'Zoom in';
 const ZOOM_OUT_LABEL = 'Zoom out';
 const ZOOM_INCREMENT = 0.25;
 const APP_PRIMARY_COLOR = '#8300bf';
+const ERROR_TIMEOUT = 3000; // 3 seconds
 
 export default {
   name: 'ConnectivityGraph',
@@ -140,6 +143,10 @@ export default {
       type: String,
       default: '',
     },
+    selectedConnectivityData: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
@@ -158,6 +165,7 @@ export default {
       iconColor: APP_PRIMARY_COLOR,
       zoomEnabled: false,
       errorMessage: '',
+      errorConnectivities: '',
     };
   },
   mounted() {
@@ -245,13 +253,17 @@ export default {
 
       this.connectivityGraph.showConnectivity(graphCanvas);
 
+      // saved state from list view
+      if (this.selectedConnectivityData.length) {
+        this.connectivityGraph.selectConnectivity(this.selectedConnectivityData);
+      }
+
       this.connectivityGraph.on('tap-node', (event) => {
-        const { label } = event.detail;
-        const labels = label ? label.split(`\n`) : [];
+        const data = event.detail;
         /**
          * This event is triggered after a node on the connectivity graph is clicked.
          */
-        this.$emit('tap-node', labels);
+        this.$emit('tap-node', data);
       });
     },
     query: async function (sql, params) {
@@ -414,12 +426,41 @@ export default {
       this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
       this.connectivityGraph.enableZoom(!this.zoomEnabled);
     },
-    showErrorMessage: function (errorMessage) {
+    getErrorConnectivities: function (errorData) {
+      const errorDataToEmit = [...new Set(errorData)];
+      let errorConnectivities = '';
+
+      errorDataToEmit.forEach((connectivity, i) => {
+        const { label } = connectivity;
+        errorConnectivities += (i === 0) ? capitalise(label) : label;
+
+        if (errorDataToEmit.length > 1) {
+          if ((i + 2) === errorDataToEmit.length) {
+            errorConnectivities += ' and ';
+          } else if ((i + 1) < errorDataToEmit.length) {
+            errorConnectivities += ', ';
+          }
+        }
+      });
+
+      return errorConnectivities;
+    },
+    /**
+     * Function to show error message.
+     * `errorInfo` includes `errorData` array (optional) for error connectivities
+     * and `errorMessage` for error message.
+     * @arg `errorInfo`
+     */
+    showErrorMessage: function (errorInfo) {
+      const { errorData, errorMessage } = errorInfo;
+      this.errorConnectivities = this.getErrorConnectivities(errorData);
       this.errorMessage = errorMessage;
+
       // Show error for 3 seconds
       setTimeout(() => {
+        this.errorConnectivities = '';
         this.errorMessage = '';
-      }, 3000);
+      }, ERROR_TIMEOUT);
     },
   },
 };
@@ -584,6 +625,7 @@ export default {
   background: #f3ecf6 !important;
   border: 1px solid $app-primary-color;
   border-radius: var(--el-border-radius-base);
+  box-shadow: 1px 1px 6px 1px rgba($app-primary-color, 0.15);
   position: relative;
   top: 0;
   left: 0;

package/src/components/ConnectivityGraph/graph.js

@@ -84,6 +84,25 @@ export class ConnectivityGraph extends EventTarget
         });
     }
 
+    selectConnectivity(selectedConnectivityData)
+    {
+        if (this.cyg?.cy) {
+            let eleId = ''
+            this.cyg.cy.elements().forEach((ele) => {
+                const label = ele.data('label')
+                const connectivityData = getConnectivityData(label)
+
+                if (areArraysIdentical(selectedConnectivityData, connectivityData)) {
+                    eleId = ele.id()
+                }
+            })
+
+            if (eleId) {
+                this.cyg.cy.$id(eleId).select()
+            }
+        }
+    }
+
     clearConnectivity()
     //=================
     {
@@ -183,6 +202,8 @@ export class ConnectivityGraph extends EventTarget
 
 //==============================================================================
 
+const APP_PRIMARY_COLOR = '#8300bf'
+const BG_COLOR = '#f3ecf6'
 const GRAPH_STYLE = [
     {
         'selector': 'node',
@@ -235,6 +256,21 @@ const GRAPH_STYLE = [
             'target-arrow-shape': 'triangle',
             'curve-style': 'bezier'
         }
+    },
+    {
+        'selector': 'node:active',
+        'style': {
+            'border-color': APP_PRIMARY_COLOR,
+            'border-width': 2
+        }
+    },
+    {
+        'selector': 'node:selected',
+        'style': {
+            'border-color': APP_PRIMARY_COLOR,
+            'background-color': BG_COLOR,
+            'background-opacity': 0.75,
+        }
     }
 ]
 
@@ -242,7 +278,7 @@ function trimLabel(label) {
     const labels = label.split('\n')
     const half = labels.length/2
     const trimLabels = labels.slice(half)
-    return trimLabels.join('\n')
+    return capitalizeLabels(trimLabels.join('\n'))
 }
 
 function capitalizeLabels(input) {
@@ -254,6 +290,40 @@ function capitalizeLabels(input) {
     }).join('\n')
 }
 
+function getConnectivityData(label) {
+    const labels = label ? label.split(`\n`) : []
+    const connectivityData = []
+
+    for (let i = 0; i < labels.length / 2; i++) {
+        connectivityData.push({
+            id: labels[i],
+            label: labels[i + labels.length / 2]
+        })
+    }
+    return connectivityData
+}
+
+function areArraysIdentical(arr1, arr2) {
+    arr1.sort((a, b) => {
+      if (a.id < b.id) return -1
+      if (a.id > b.id) return 1
+      return 0
+    })
+
+    arr2.sort((a, b) => {
+      if (a.id < b.id) return -1
+      if (a.id > b.id) return 1
+      return 0
+    })
+
+    for (let i = 0; i < arr1.length; i++) {
+      if (JSON.stringify(arr1[i]) !== JSON.stringify(arr2[i])) {
+        return false
+      }
+    }
+
+    return true
+}
 //==============================================================================
 
 class CytoscapeGraph extends EventTarget
@@ -308,12 +378,18 @@ class CytoscapeGraph extends EventTarget
     //==============
     {
         const node = event.target
-        const label = capitalizeLabels(node.data().label)
+        const data = node.data()
+        const { label } = data
+        const connectivityData = getConnectivityData(label)
+        const labels = connectivityData.map((data) => (
+            data.label + ' (' + data.id + ')'
+        ))
 
-        this.tooltip.innerText = label
+        this.tooltip.innerText = capitalizeLabels(labels.join('\n'))
         this.tooltip.style.left = `${event.renderedPosition.x}px`
         this.tooltip.style.top = `${event.renderedPosition.y}px`
         this.tooltip.style.maxWidth = '240px'
+        this.tooltip.style.zIndex = 2
         this.tooltip.hidden = false
 
         this.checkRightBoundary(event.renderedPosition.x)
@@ -339,8 +415,11 @@ class CytoscapeGraph extends EventTarget
     {
         const node = event.target
         const data = node.data()
+        const { label } = data
+        const connectivityData = getConnectivityData(label)
+
         const tapEvent = new CustomEvent('tap-node', {
-            detail: data
+            detail: connectivityData
         })
         this.dispatchEvent(tapEvent);
     }

package/src/components/utilities.js

@@ -0,0 +1,9 @@
+const capitalise = term => {
+  if (term)
+    return term.charAt(0).toUpperCase() + term.slice(1);
+  return term;
+};
+
+export {
+  capitalise,
+};