@abi-software/map-utilities 1.2.1-beta.2 → 1.2.1

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -12,7 +12,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="reset"
           >
@@ -30,7 +29,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="toggleZoom"
           >
@@ -53,7 +51,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="zoomIn"
           >
@@ -71,7 +68,6 @@
         >
           <el-button
             class="control-button"
-            :class="theme"
             size="small"
             @click="zoomOut"
           >
@@ -167,6 +163,7 @@ export default {
       iconColor: APP_PRIMARY_COLOR,
       zoomEnabled: false,
       connectivityError: null,
+      timeoutID: undefined,
     };
   },
   mounted() {
@@ -430,8 +427,11 @@ export default {
     showErrorMessage: function (connectivityError) {
       this.connectivityError = {...connectivityError};
 
-      // Show error for 3 seconds
-      setTimeout(() => {
+      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>