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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.5.0-beta.1",
+  "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,7 +26,14 @@
         @mouseenter="onConnectivityHovered(origin)"
         @mouseleave="onConnectivityHovered()"
       >
-        {{ capitalise(origin) }}
+        <el-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="
@@ -55,7 +62,14 @@
         @mouseenter="onConnectivityHovered(component)"
         @mouseleave="onConnectivityHovered()"
       >
-      {{ capitalise(component) }}
+        <el-icon 
+          class="magnify-glass"
+          v-show="shouldShowMagnifyGlass(component)"
+          @click="onConnectivityClicked(component)"
+        >
+          <el-icon-search />
+        </el-icon>
+        <span>{{ capitalise(component) }}</span>
       </div>
     </div>
     <div
@@ -86,7 +100,14 @@
         @mouseenter="onConnectivityHovered(destination)"
         @mouseleave="onConnectivityHovered()"
       >
-        {{ capitalise(destination) }}
+        <el-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="
@@ -117,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>
@@ -130,6 +149,7 @@
 <script>
 import {
   Warning as ElIconWarning,
+  Search as ElIconSearch,
 } from '@element-plus/icons-vue'
 import {
   ElButton as Button,
@@ -145,6 +165,7 @@ export default {
     Container,
     Icon,
     ElIconWarning,
+    ElIconSearch
   },
   props: {
     entry: {
@@ -190,7 +211,7 @@ export default {
     },
     connectivityError: {
       type: Object,
-      default: () => null,
+      default: () => {},
     }
   },
   data: function () {
@@ -200,7 +221,6 @@ export default {
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
       facetList: [],
-      sckanVersion: '',
     }
   },
   watch: {
@@ -232,8 +252,18 @@ export default {
     onConnectivityHovered: function (name) {
       this.$emit('connectivity-hovered', name);
     },
-    onConnectivityClicked: function (id, type, label) {
-      this.$emit('connectivity-clicked', { id, type, label });
+    onConnectivityClicked: function (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) {
@@ -353,9 +383,23 @@ export default {
   transition: color 0.25s ease;
   position: relative;
   cursor: default;
+  padding-left: 16px;
+
+  .magnify-glass {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 
   &:hover {
     color: $app-primary-color;
+
+    .magnify-glass {
+      display: block;
+      padding-top: 4px;
+      cursor: pointer;
+    }
   }
 
   + .attribute-content {

package/src/components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
     ElIconLock: typeof import('@element-plus/icons-vue')['Lock']
+    ElIconSearch: typeof import('@element-plus/icons-vue')['Search']
     ElIconUnlock: typeof import('@element-plus/icons-vue')['Unlock']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconZoomIn: typeof import('@element-plus/icons-vue')['ZoomIn']

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",
         },
       },
     },