@abi-software/map-utilities 1.2.1-beta.1 → 1.2.1-beta.3

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -106,9 +106,11 @@
       </div>
     </div>
 
-    <div class="connectivity-graph-error" v-if="errorMessage || errorConnectivities">
-      <strong v-if="errorConnectivities">{{ errorConnectivities }}</strong>
-      {{ errorMessage }}
+    <div v-if="connectivityError" class="connectivity-graph-error">
+      <strong v-if="connectivityError.errorConnectivities">
+        {{ connectivityError.errorConnectivities }}
+      </strong>
+      {{ connectivityError.errorMessage }}
     </div>
 
   </div>
@@ -164,8 +166,8 @@ export default {
       zoomOutLabel: ZOOM_OUT_LABEL,
       iconColor: APP_PRIMARY_COLOR,
       zoomEnabled: false,
-      errorMessage: '',
-      errorConnectivities: '',
+      connectivityError: null,
+      timeoutID: undefined,
     };
   },
   mounted() {
@@ -426,40 +428,15 @@ export default {
       this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
       this.connectivityGraph.enableZoom(!this.zoomEnabled);
     },
-    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 += ', ';
-          }
-        }
-      });
+    showErrorMessage: function (connectivityError) {
+      this.connectivityError = {...connectivityError};
 
-      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 = '';
+      if (this.timeoutID) {
+        clearTimeout(this.timeoutID);
+      }
+
+      this.timeoutID = setTimeout(() => {
+        this.connectivityError = null;
       }, ERROR_TIMEOUT);
     },
   },

package/src/components/ConnectivityGraph/graph.js

@@ -258,14 +258,7 @@ const GRAPH_STYLE = [
         }
     },
     {
-        'selector': 'node:active',
-        'style': {
-            'border-color': APP_PRIMARY_COLOR,
-            'border-width': 2
-        }
-    },
-    {
-        'selector': 'node:selected',
+        'selector': 'node.active',
         'style': {
             'border-color': APP_PRIMARY_COLOR,
             'background-color': BG_COLOR,
@@ -350,7 +343,6 @@ 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', this.tapNode.bind(this))
 
         this.tooltip = document.createElement('div')
         this.tooltip.className = 'cy-graph-tooltip'
@@ -393,6 +385,8 @@ class CytoscapeGraph extends EventTarget
         this.tooltip.hidden = false
 
         this.checkRightBoundary(event.renderedPosition.x)
+
+        this.tapNode(event, true)
     }
 
     moveNode(event)
@@ -408,16 +402,21 @@ class CytoscapeGraph extends EventTarget
     //==============
     {
         this.tooltip.hidden = true
+
+        this.tapNode(event, false)
     }
 
-    tapNode(event)
+    tapNode(event, show)
     //============
     {
         const node = event.target
         const data = node.data()
         let { label } = data
 
-        if (label && node.isNode() && node.selected()) {
+        if (show) {
+            node.addClass('active')
+        } else {
+            node.removeClass('active')
             label = ''
             setTimeout(() => {
                 node.unselect()

package/src/components/TreeControls/TreeControls.vue

@@ -11,7 +11,7 @@
           <el-input
             class="tree-filter-input"
             v-model="filterText"
-            placeholder="Filter keyword"
+            :placeholder="'Filter ' + title"
           />
         </div>
       </el-col>