@abi-software/map-utilities 1.5.0-beta.2 → 1.5.0-beta.3

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -110,10 +110,8 @@
       </div>
     </div>
 
-    <div v-if="connectivityError" class="connectivity-graph-error">
-      <strong v-if="connectivityError.errorConnectivities">
-        {{ connectivityError.errorConnectivities }}
-      </strong>
+    <div v-show="connectivityError.errorConnectivities" class="connectivity-graph-error">
+      <strong>{{ connectivityError.errorConnectivities }}</strong>
       {{ connectivityError.errorMessage }}
     </div>
 
@@ -136,7 +134,6 @@ 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',
@@ -164,6 +161,10 @@ export default {
       type: Object,
       default: () => null,
     },
+    connectivityError: {
+      type: Object,
+      default: () => {},
+    }
   },
   data: function () {
     return {
@@ -183,8 +184,6 @@ export default {
       zoomOutLabel: ZOOM_OUT_LABEL,
       iconColor: APP_PRIMARY_COLOR,
       zoomEnabled: false,
-      connectivityError: null,
-      timeoutID: undefined,
       connectivityGraphContainer: null,
     };
   },
@@ -505,18 +504,7 @@ export default {
       this.zoomEnabled = !this.zoomEnabled;
       this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
       this.connectivityGraph.enableZoom(!this.zoomEnabled);
-    },
-    showErrorMessage: function (connectivityError) {
-      this.connectivityError = {...connectivityError};
-
-      if (this.timeoutID) {
-        clearTimeout(this.timeoutID);
-      }
-
-      this.timeoutID = setTimeout(() => {
-        this.connectivityError = null;
-      }, ERROR_TIMEOUT);
-    },
+    }
   },
 };
 </script>

package/src/components/ConnectivityList/ConnectivityList.vue

@@ -26,13 +26,14 @@
         @mouseenter="onConnectivityHovered(origin)"
         @mouseleave="onConnectivityHovered()"
       >
-        <span>{{ capitalise(origin) }}</span>
         <el-icon 
-          class="connectivity-search-icon" 
+          class="magnify-glass"
+          v-show="shouldShowMagnifyGlass(origin)"
           @click="onConnectivityClicked(origin)"
         >
           <el-icon-search />
         </el-icon>
+        <span>{{ capitalise(origin) }}</span>
       </div>
       <el-button
         v-show="
@@ -61,13 +62,14 @@
         @mouseenter="onConnectivityHovered(component)"
         @mouseleave="onConnectivityHovered()"
       >
-      <span>{{ capitalise(component) }}</span>
         <el-icon 
-          class="connectivity-search-icon" 
+          class="magnify-glass"
+          v-show="shouldShowMagnifyGlass(component)"
           @click="onConnectivityClicked(component)"
         >
           <el-icon-search />
         </el-icon>
+        <span>{{ capitalise(component) }}</span>
       </div>
     </div>
     <div
@@ -98,13 +100,14 @@
         @mouseenter="onConnectivityHovered(destination)"
         @mouseleave="onConnectivityHovered()"
       >
-        <span>{{ capitalise(destination) }}</span>
         <el-icon 
-          class="connectivity-search-icon" 
+          class="magnify-glass"
+          v-show="shouldShowMagnifyGlass(destination)"
           @click="onConnectivityClicked(destination)"
         >
           <el-icon-search />
         </el-icon>
+        <span>{{ capitalise(destination) }}</span>
       </div>
       <el-button
         v-show="
@@ -135,10 +138,8 @@
     </div>
 
     <div class="connectivity-error-container">
-      <div class="connectivity-error" v-if="connectivityError">
-        <strong v-if="connectivityError.errorConnectivities">
-          {{ connectivityError.errorConnectivities }}
-        </strong>
+      <div class="connectivity-error" v-show="connectivityError.errorConnectivities">
+        <strong>{{ connectivityError.errorConnectivities }}</strong>
         {{ connectivityError.errorMessage }}
       </div>
     </div>
@@ -210,7 +211,7 @@ export default {
     },
     connectivityError: {
       type: Object,
-      default: () => null,
+      default: () => {},
     }
   },
   data: function () {
@@ -220,7 +221,6 @@ export default {
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
       facetList: [],
-      sckanVersion: '',
     }
   },
   watch: {
@@ -253,7 +253,17 @@ export default {
       this.$emit('connectivity-hovered', name);
     },
     onConnectivityClicked: function (name) {
-      this.$emit('connectivity-clicked', name);
+      const connectivity = this.connectivityError.errorConnectivities;
+      // Remove the invalid term while searching
+      const label = connectivity
+        ? name.replace(new RegExp(`\\s*,?\\s*${connectivity}\\s*,?\\s*`, 'gi'), '').trim()
+        : name;
+      this.$emit('connectivity-clicked', label);
+    },
+    // shouldShowMagnifyGlass: Checks whether the hovered terms contain valid term or not
+    shouldShowMagnifyGlass: function (features) {
+      const connectivity = this.connectivityError.errorConnectivities;
+      return connectivity?.toLowerCase() !== features.toLowerCase();
     },
     // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
     shouldShowExploreButton: function (features) {
@@ -368,25 +378,27 @@ export default {
 }
 
 .attribute-content {
-  display: flex;
-  justify-content: space-between;
   font-size: 14px;
   font-weight: 500;
   transition: color 0.25s ease;
   position: relative;
   cursor: default;
+  padding-left: 16px;
 
-  .connectivity-search-icon {
+  .magnify-glass {
     display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
   &:hover {
     color: $app-primary-color;
 
-    .connectivity-search-icon {
+    .magnify-glass {
+      display: block;
       padding-top: 4px;
       cursor: pointer;
-      display: block;
     }
   }
 

package/vite.config.js

@@ -38,10 +38,11 @@ export default defineConfig({
       fileName: "map-utilities",
     },
     rollupOptions: {
-      external: ["vue"],
+      external: ["vue", "@element-plus/icons-vue"],
       output: {
         globals: {
           vue: "Vue",
+          "@element-plus/icons-vue": "@element-plus/icons-vue",
         },
       },
     },