@abi-software/map-side-bar 2.5.0 → 2.5.2

package/package.json

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

package/src/App.vue

@@ -128,7 +128,14 @@ export default {
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
-      createData: null,
+      createData: {
+        toBeConfirmed: false,
+        points: [],
+        shape: "",
+        x: 0,
+        y: 0,
+      },
+      createDataSet: false,
     }
   },
   methods: {
@@ -239,7 +246,7 @@ export default {
       console.log('Algolia facets:', facets)
     },
     toggleCreateData : function() {
-      if (!this.createData) {
+      if (!this.createDataSet) {
         this.createData = {
           drawingBox: false,
           toBeConfirmed: true,
@@ -251,8 +258,16 @@ export default {
           faceIndex: -1,
           toBeDeleted: false,
         }
+        this.createDataSet = true
       } else {
-        this.createData = null
+        this.createData = {
+          toBeConfirmed: false,
+          points: [],
+          shape: "",
+          x: 0,
+          y: 0,
+        }
+        this.createDataSet = false
       }
     },
     onConnectivityComponentClick: function(data) {

package/src/components/ConnectivityInfo.vue

@@ -81,7 +81,7 @@
       </div>
     </div>
 
-    <div class="content-container" v-if="activeView === 'listView'">
+    <div class="content-container content-container-connectivity" v-if="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -106,15 +106,10 @@
           class="attribute-content"
           :origin-item-label="origin"
           :key="origin"
-          @mouseenter="toggleConnectivityTooltip(origin, true)"
-          @mouseleave="toggleConnectivityTooltip(origin, false)"
+          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
         >
           {{ capitalise(origin) }}
-          <!-- <el-checkbox
-            :label="capitalise(origin)"
-            size="small"
-            @change="toggleConnectivityHighlight"
-          /> -->
         </div>
         <el-button
           v-show="
@@ -140,15 +135,10 @@
           class="attribute-content"
           :component-item-label="component"
           :key="component"
-          @mouseenter="toggleConnectivityTooltip(component, true)"
-          @mouseleave="toggleConnectivityTooltip(component, false)"
+          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
         >
           {{ capitalise(component) }}
-          <!-- <el-checkbox
-            :label="capitalise(component)"
-            size="small"
-            @change="toggleConnectivityHighlight"
-          /> -->
         </div>
       </div>
       <div
@@ -176,15 +166,10 @@
           class="attribute-content"
           :destination-item-label="destination"
           :key="destination"
-          @mouseenter="toggleConnectivityTooltip(destination, true)"
-          @mouseleave="toggleConnectivityTooltip(destination, false)"
+          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
         >
           {{ capitalise(destination) }}
-          <!-- <el-checkbox
-            :label="capitalise(destination)"
-            size="small"
-            @change="toggleConnectivityHighlight"
-          /> -->
         </div>
         <el-button
           v-show="
@@ -213,6 +198,15 @@
           Search for data on components
         </el-button>
       </div>
+
+      <div v-if="connectivityError" class="connectivity-error-container">
+        <div class="connectivity-error">
+          <strong v-if="connectivityError.errorConnectivities">
+            {{ connectivityError.errorConnectivities }}
+          </strong>
+          {{ connectivityError.errorMessage }}
+        </div>
+      </div>
     </div>
 
     <div class="content-container" v-if="activeView === 'graphView'">
@@ -254,6 +248,8 @@ const capitalise = function (str) {
   return ''
 }
 
+const ERROR_TIMEOUT = 3000; // 3 seconds
+
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -306,6 +302,8 @@ export default {
       },
       componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
+      connectivityError: null,
+      timeoutID: undefined,
     }
   },
   watch: {
@@ -418,10 +416,9 @@ export default {
       }
     },
     onTapNode: function (data) {
-      /**
-       * This event is triggered by connectivity-graph's `tap-node` event.
-       */
-      this.$emit('connectivity-component-click', data);
+      // save selected state for list view
+      const name = data.map(t => t.label).join(', ');
+      this.toggleConnectivityTooltip(name, {show: true});
     },
     getUpdateCopyContent: function () {
       if (!this.entry) {
@@ -525,25 +522,82 @@ export default {
       ];
       const names = name.split(','); // some features have more than one value
       const data = [];
-      if (option) {
+      if (option.show) {
         names.forEach((n) => {
-          data.push(allWithDatasets.find((a) => a.name.trim() === n.trim()));
+          const foundData = allWithDatasets.find((a) =>
+            a.name.toLowerCase().trim() === n.toLowerCase().trim()
+          );
+
+          if (foundData) {
+            data.push({
+              id: foundData.id,
+              label: foundData.name
+            });
+          }
         });
       }
+
+      // type: to show error only for click event
       this.$emit('connectivity-component-click', data);
     },
-    // TODO: to keep the connection on the flatmap when the checkbox is ticked.
-    // toggleConnectivityHighlight: function (value) {
-    //   // value = true/false
-    // },
-  },
-  mounted: function () {
-    EventBus.on('connectivity-graph-error', (errorMessage) => {
+    getErrorConnectivities: function (errorData) {
+      const errorDataToEmit = [...new Set(errorData)];
+      let errorConnectivities = '';
+
+      errorDataToEmit.forEach((connectivity, i) => {
+        const { label } = connectivity;
+        errorConnectivities += (i === 0) ? capitalise(label) : label;
+
+        if (errorDataToEmit.length > 1) {
+          if ((i + 2) === errorDataToEmit.length) {
+            errorConnectivities += ' and ';
+          } else if ((i + 1) < errorDataToEmit.length) {
+            errorConnectivities += ', ';
+          }
+        }
+      });
+
+      return errorConnectivities;
+    },
+    /**
+     * Function to show error message.
+     * `errorInfo` includes `errorData` array (optional) for error connectivities
+     * and `errorMessage` for error message.
+     * @arg `errorInfo`
+     */
+    getConnectivityError: function (errorInfo) {
+      const { errorData, errorMessage } = errorInfo;
+      const errorConnectivities = this.getErrorConnectivities(errorData);
+
+      return {
+        errorConnectivities,
+        errorMessage,
+      };
+    },
+    pushConnectivityError: function (errorInfo) {
+      const connectivityError = this.getConnectivityError(errorInfo);
       const connectivityGraphRef = this.$refs.connectivityGraphRef;
 
+      // error for graph view
       if (connectivityGraphRef) {
-        connectivityGraphRef.showErrorMessage(errorMessage);
+        connectivityGraphRef.showErrorMessage(connectivityError);
+      }
+
+      // error for list view
+      this.connectivityError = {...connectivityError};
+
+      if (this.timeoutID) {
+        clearTimeout(this.timeoutID);
       }
+
+      this.timeoutID = setTimeout(() => {
+        this.connectivityError = null;
+      }, ERROR_TIMEOUT);
+    },
+  },
+  mounted: function () {
+    EventBus.on('connectivity-graph-error', (errorInfo) => {
+      this.pushConnectivityError(errorInfo);
     });
   },
 }
@@ -691,6 +745,7 @@ export default {
   font-size: 14px;
   font-weight: 500;
   transition: color 0.25s ease;
+  position: relative;
   cursor: default;
 
   &:hover {
@@ -698,8 +753,6 @@ export default {
   }
 
   + .attribute-content {
-    position: relative;
-
     &::before {
       content: "";
       width: 90%;
@@ -714,22 +767,6 @@ export default {
   &:last-of-type {
     margin-bottom: 0.5em;
   }
-
-  // TODO: if we have checkboxes
-  // :deep(.el-checkbox),
-  // :deep(.el-checkbox.el-checkbox--small .el-checkbox__label) {
-  //   font-size: inherit;
-  //   font-weight: inherit;
-  //   color: inherit;
-  // }
-
-  // :deep(.el-checkbox) {
-  //   gap: 8px;
-  // }
-
-  // :deep(.el-checkbox.el-checkbox--small .el-checkbox__label) {
-  //   padding: 0;
-  // }
 }
 
 .popover-container {
@@ -765,8 +802,15 @@ export default {
 }
 
 .el-button-secondary {
-  border-color: transparent;
-  background-color: transparent;
+  border-color: transparent !important;
+  background-color: transparent !important;
+  color: inherit !important;
+
+  &:hover {
+    color: $app-primary-color !important;
+    border-color: $app-primary-color !important;
+    background-color: #f9f2fc !important;
+  }
 }
 
 .buttons-row {
@@ -906,4 +950,27 @@ export default {
     background: #f3ecf6;
   }
 }
+
+.content-container-connectivity {
+  position: relative;
+}
+
+.connectivity-error-container {
+  position: sticky;
+  bottom: 0.5rem;
+  width: 100%;
+  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);
+}
 </style>

package/src/components/SideBar.vue

@@ -158,7 +158,13 @@ export default {
     },
     createData: {
       type: Object,
-      default: null,
+      default: {
+        toBeConfirmed: false,
+        points: [],
+        shape: "",
+        x: 0,
+        y: 0,
+      },
     }
   },
   data: function () {
@@ -300,6 +306,13 @@ export default {
     tabClose: function (id) {
       this.$emit('tab-close', id);
     },
+    /**
+     * To receive error message for connectivity graph
+     * @param {String} errorMessage
+     */
+    updateConnectivityGraphError: function (errorInfo) {
+      EventBus.emit('connectivity-graph-error', errorInfo);
+    },
   },
   computed: {
     activeTabs: function() {
@@ -314,13 +327,6 @@ export default {
       }
       return tabs;
     },
-    /**
-     * To receive error message for connectivity graph
-     * @param {String} errorMessage
-     */
-    updateConnectivityGraphError: function (errorMessage) {
-      EventBus.emit('connectivity-graph-error', errorMessage);
-    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart