@abi-software/map-side-bar 2.5.0-beta.7 → 2.5.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.0-beta.7",
+  "version": "2.5.0-beta.9",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.2.1-beta.2",
+    "@abi-software/map-utilities": "^1.2.1-beta.3",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityInfo.vue

@@ -104,12 +104,10 @@
         <div
           v-for="(origin, i) in entry.origins"
           class="attribute-content"
-          :class="{'active': origin === selectedConnectivity}"
           :origin-item-label="origin"
           :key="origin"
           @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
           @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
-          @click="selectConnectivity(origin)"
         >
           {{ capitalise(origin) }}
         </div>
@@ -135,12 +133,10 @@
         <div
           v-for="(component, i) in entry.components"
           class="attribute-content"
-          :class="{'active': component === selectedConnectivity}"
           :component-item-label="component"
           :key="component"
           @mouseenter="toggleConnectivityTooltip(component, {show: true})"
           @mouseleave="toggleConnectivityTooltip(component, {show: false})"
-          @click="selectConnectivity(component)"
         >
           {{ capitalise(component) }}
         </div>
@@ -168,12 +164,10 @@
         <div
           v-for="(destination, i) in entry.destinations"
           class="attribute-content"
-          :class="{'active': destination === selectedConnectivity}"
           :destination-item-label="destination"
           :key="destination"
           @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
           @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
-          @click="selectConnectivity(destination)"
         >
           {{ capitalise(destination) }}
         </div>
@@ -219,7 +213,6 @@
       <connectivity-graph
         :entry="entry.featureId[0]"
         :mapServer="envVars.FLATMAPAPI_LOCATION"
-        :selectedConnectivityData="selectedConnectivityData"
         @tap-node="onTapNode"
         ref="connectivityGraphRef"
       />
@@ -309,9 +302,8 @@ export default {
       },
       componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
-      selectedConnectivity: '',
-      selectedConnectivityData: [],
       connectivityError: null,
+      timeoutID: undefined,
     }
   },
   watch: {
@@ -426,13 +418,7 @@ export default {
     onTapNode: function (data) {
       // save selected state for list view
       const name = data.map(t => t.label).join(', ');
-      this.selectedConnectivity = name;
-      this.toggleConnectivityTooltip(name, {show: true, type: 'click'});
-
-      /**
-       * This event is triggered by connectivity-graph's `tap-node` event.
-       */
-      this.$emit('connectivity-component-click', data);
+      this.toggleConnectivityTooltip(name, {show: true});
     },
     getUpdateCopyContent: function () {
       if (!this.entry) {
@@ -529,12 +515,6 @@ export default {
       return contentArray.join('\n\n<br>');
     },
     toggleConnectivityTooltip: function (name, option) {
-      // if there has selected item
-      if (!option.show && this.selectedConnectivity) {
-        name = this.selectedConnectivity;
-        option.show = true;
-      }
-
       const allWithDatasets = [
         ...this.entry.componentsWithDatasets,
         ...this.entry.destinationsWithDatasets,
@@ -557,23 +537,8 @@ export default {
         });
       }
 
-      // saved state for graph view
-      this.selectedConnectivityData = data;
       // type: to show error only for click event
-      this.$emit('connectivity-component-click', {
-        data,
-        type: option.type
-      });
-    },
-    selectConnectivity: function (name) {
-      // clicking on the same item will unselect it
-      if (this.selectedConnectivity === name) {
-        this.selectedConnectivity = '';
-        this.toggleConnectivityTooltip(name, {show: false});
-      } else {
-        this.selectedConnectivity = name;
-        this.toggleConnectivityTooltip(name, {show: true, type: 'click'});
-      }
+      this.$emit('connectivity-component-click', data);
     },
     getErrorConnectivities: function (errorData) {
       const errorDataToEmit = [...new Set(errorData)];
@@ -621,7 +586,11 @@ export default {
       // error for list view
       this.connectivityError = {...connectivityError};
 
-      setTimeout(() => {
+      if (this.timeoutID) {
+        clearTimeout(this.timeoutID);
+      }
+
+      this.timeoutID = setTimeout(() => {
         this.connectivityError = null;
       }, ERROR_TIMEOUT);
     },
@@ -774,28 +743,15 @@ export default {
 
 .attribute-content {
   font-size: 14px;
+  font-weight: 500;
   transition: color 0.25s ease;
   position: relative;
-  cursor: pointer;
+  cursor: default;
 
-  &.active,
   &:hover {
-    font-weight: 500;
     color: $app-primary-color;
   }
 
-  &.active {
-    font-weight: 600;
-
-    &::after {
-      content: "📌";
-      display: inline-block;
-      width: 1em;
-      font-size: 0.75em;
-      padding-left: 4px;
-    }
-  }
-
   + .attribute-content {
     &::before {
       content: "";