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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.5.0-beta.2",
+  "version": "1.5.0",
   "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

@@ -1,151 +1,195 @@
 <template>
-  <div class="connectivity-list">
-    {{ entry.paths }}
-    <div v-if="origins && origins.length > 0" class="block">
-      <div class="attribute-title-container">
-        <span class="attribute-title">Origin</span>
-        <el-popover
-          width="250"
-          trigger="hover"
-          :teleported="false"
-          popper-class="popover-origin-help"
+  <div ref="connectivityList" class="connectivity-list">
+    <el-popover
+      width="250"
+      :show-arrow="false"
+      trigger="manual"
+      :teleported="false"
+      placement="left-start"
+      :visible="(connectivityError.errorConnectivities ? true: false)"
+      popper-class="connectivity-error-container"
+    >
+      <template #reference>
+        <div class="connectivity-alert"
+          :style="{ top: alertTop + 'px' }">
+        </div>
+      </template>
+      <template #default>
+        <strong>{{ connectivityError.errorConnectivities }}</strong>
+        {{ connectivityError.errorMessage }}
+      </template>
+    </el-popover>
+      {{ entry.paths }}
+      <div v-if="origins && origins.length > 0" class="block">
+        <div class="attribute-title-container">
+          <span class="attribute-title">Origin</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Origin</i> {{ originDescription }}
+            </span>
+          </el-popover>
+        </div>
+        <div
+          v-for="(origin, i) in origins"
+          class="attribute-content"
+          :origin-item-label="origin"
+          :key="origin"
+          @mouseenter="onConnectivityHovered(origin, $event)"
+          @mouseleave="onConnectivityHovered()"
         >
-          <template #reference>
-            <el-icon class="info"><el-icon-warning /></el-icon>
-          </template>
-          <span style="word-break: keep-all">
-            <i>Origin</i> {{ originDescription }}
-          </span>
-        </el-popover>
+          <el-popover
+            width="150"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon 
+                class="magnify-glass"
+                v-show="shouldShowMagnifyGlass(origin,)"
+                @click="onConnectivityClicked(origin)"
+              >
+                <el-icon-search />
+              </el-icon>
+            </template>
+            <span>Search connectivity</span>
+          </el-popover>
+          <span>{{ capitalise(origin) }}</span>
+        </div>
+        <el-button
+          v-show="
+            originsWithDatasets && originsWithDatasets.length > 0 &&
+            shouldShowExploreButton(originsWithDatasets)
+          "
+          class="button"
+          id="open-dendrites-button"
+          @click="openDendrites"
+        >
+          Explore origin data
+        </el-button>
       </div>
       <div
-        v-for="(origin, i) in origins"
-        class="attribute-content"
-        :origin-item-label="origin"
-        :key="origin"
-        @mouseenter="onConnectivityHovered(origin)"
-        @mouseleave="onConnectivityHovered()"
+        v-if="components && components.length > 0"
+        class="block"
       >
-        <span>{{ capitalise(origin) }}</span>
-        <el-icon 
-          class="connectivity-search-icon" 
-          @click="onConnectivityClicked(origin)"
+        <div class="attribute-title-container">
+          <span class="attribute-title">Components</span>
+        </div>
+        <div
+          v-for="(component, i) in components"
+          class="attribute-content"
+          :component-item-label="component"
+          :key="component"
+          @mouseenter="onConnectivityHovered(component, $event)"
+          @mouseleave="onConnectivityHovered()"
         >
-          <el-icon-search />
-        </el-icon>
-      </div>
-      <el-button
-        v-show="
-          originsWithDatasets && originsWithDatasets.length > 0 &&
-          shouldShowExploreButton(originsWithDatasets)
-        "
-        class="button"
-        id="open-dendrites-button"
-        @click="openDendrites"
-      >
-        Explore origin data
-      </el-button>
-    </div>
-    <div
-      v-if="components && components.length > 0"
-      class="block"
-    >
-      <div class="attribute-title-container">
-        <span class="attribute-title">Components</span>
+          <el-popover
+            width="150"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon 
+                class="magnify-glass"
+                v-show="shouldShowMagnifyGlass(component)"
+                @click="onConnectivityClicked(component)"
+              >
+                <el-icon-search />
+              </el-icon>
+            </template>
+            <span>Search connectivity</span>
+          </el-popover>
+          <span>{{ capitalise(component) }}</span>
+        </div>
       </div>
       <div
-        v-for="(component, i) in components"
-        class="attribute-content"
-        :component-item-label="component"
-        :key="component"
-        @mouseenter="onConnectivityHovered(component)"
-        @mouseleave="onConnectivityHovered()"
+        v-if="destinations && destinations.length > 0"
+        class="block"
       >
-      <span>{{ capitalise(component) }}</span>
-        <el-icon 
-          class="connectivity-search-icon" 
-          @click="onConnectivityClicked(component)"
+        <div class="attribute-title-container">
+          <span class="attribute-title">Destination</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Destination</i> is where the axons terminate
+            </span>
+          </el-popover>
+        </div>
+        <div
+          v-for="(destination, i) in destinations"
+          class="attribute-content"
+          :destination-item-label="destination"
+          :key="destination"
+          @mouseenter="onConnectivityHovered(destination, $event)"
+          @mouseleave="onConnectivityHovered()"
         >
-          <el-icon-search />
-        </el-icon>
-      </div>
-    </div>
-    <div
-      v-if="destinations && destinations.length > 0"
-      class="block"
-    >
-      <div class="attribute-title-container">
-        <span class="attribute-title">Destination</span>
-        <el-popover
-          width="250"
-          trigger="hover"
-          :teleported="false"
-          popper-class="popover-origin-help"
+          <el-popover
+            width="150"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon 
+                class="magnify-glass"
+                v-show="shouldShowMagnifyGlass(destination)"
+                @click="onConnectivityClicked(destination)"
+              >
+                <el-icon-search />
+              </el-icon>
+            </template>
+            <span>Search connectivity</span>
+          </el-popover>
+          <span>{{ capitalise(destination) }}</span>
+        </div>
+        <el-button
+          v-show="
+            destinationsWithDatasets &&
+            destinationsWithDatasets.length > 0 &&
+            shouldShowExploreButton(destinationsWithDatasets)
+          "
+          class="button"
+          @click="openAxons"
         >
-          <template #reference>
-            <el-icon class="info"><el-icon-warning /></el-icon>
-          </template>
-          <span style="word-break: keep-all">
-            <i>Destination</i> is where the axons terminate
-          </span>
-        </el-popover>
+          Explore destination data
+        </el-button>
       </div>
       <div
-        v-for="(destination, i) in destinations"
-        class="attribute-content"
-        :destination-item-label="destination"
-        :key="destination"
-        @mouseenter="onConnectivityHovered(destination)"
-        @mouseleave="onConnectivityHovered()"
-      >
-        <span>{{ capitalise(destination) }}</span>
-        <el-icon 
-          class="connectivity-search-icon" 
-          @click="onConnectivityClicked(destination)"
-        >
-          <el-icon-search />
-        </el-icon>
-      </div>
-      <el-button
         v-show="
-          destinationsWithDatasets &&
-          destinationsWithDatasets.length > 0 &&
-          shouldShowExploreButton(destinationsWithDatasets)
+          componentsWithDatasets &&
+          componentsWithDatasets.length > 0 &&
+          shouldShowExploreButton(componentsWithDatasets)
         "
-        class="button"
-        @click="openAxons"
-      >
-        Explore destination data
-      </el-button>
-    </div>
-    <div
-      v-show="
-        componentsWithDatasets &&
-        componentsWithDatasets.length > 0 &&
-        shouldShowExploreButton(componentsWithDatasets)
-      "
-      class="block"
-    >
-      <el-button
-        class="button"
-        @click="openAll"
+        class="block"
       >
-        Search for data on components
-      </el-button>
-    </div>
-
-    <div class="connectivity-error-container">
-      <div class="connectivity-error" v-if="connectivityError">
-        <strong v-if="connectivityError.errorConnectivities">
-          {{ connectivityError.errorConnectivities }}
-        </strong>
-        {{ connectivityError.errorMessage }}
+        <el-button
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
       </div>
-    </div>
   </div>
 </template>
 
 <script>
+import { shallowRef } from 'vue';
 import {
   Warning as ElIconWarning,
   Search as ElIconSearch,
@@ -210,17 +254,17 @@ export default {
     },
     connectivityError: {
       type: Object,
-      default: () => null,
+      default: () => {},
     }
   },
   data: function () {
     return {
+      alertTop: 0,
       originDescriptions: {
         motor: 'is the location of the initial cell body of the circuit',
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
       facetList: [],
-      sckanVersion: '',
     }
   },
   watch: {
@@ -249,11 +293,24 @@ export default {
     capitalise: function (text) {
       return capitalise(text)
     },
-    onConnectivityHovered: function (name) {
+    onConnectivityHovered: function (name, ele) {
       this.$emit('connectivity-hovered', name);
+      if (ele) {
+        this.alertTop = ele.srcElement.offsetParent.offsetTop + ele.srcElement.offsetTop;
+      }
     },
     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) {
@@ -296,7 +353,7 @@ export default {
         labels: this.originsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
-  }
+  },
 }
 </script>
 
@@ -368,25 +425,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;
     }
   }
 
@@ -407,24 +466,20 @@ export default {
   }
 }
 
-.connectivity-error-container {
-  position: sticky;
-  bottom: 0.5rem;
-  width: 100%;
+.connectivity-alert {
+  position: absolute;
+  width: 1px;
+  right:0px;
+}
+
+:deep(.connectivity-error-container.el-popover) {
   min-height: 31px; // placeholder
-  margin-top: -10px !important;
-  display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-}
-
-.connectivity-error {
-  width: fit-content;
-  font-size: 12px;
   padding: 0.25rem 0.5rem;
   background-color: var(--el-color-error-light-9);
   border-radius: var(--el-border-radius-small);
   border: 1px solid var(--el-color-error);
+  pointer-events: none;
 }
 </style>

package/src/components/Tooltip/ProvenancePopup.vue

@@ -87,6 +87,7 @@
           :componentsWithDatasets="componentsWithDatasets"
           :destinationsWithDatasets="destinationsWithDatasets"
           :availableAnatomyFacets="availableAnatomyFacets"
+          :connectivityError="connectivityError"
           @connectivity-action-click="onConnectivityActionClick"
         />
         <external-resource-card
@@ -134,6 +135,7 @@ export default {
       },
       entryIndex: 0,
       availableAnatomyFacets: [],
+      connectivityError: {},
     };
   },
   computed: {

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