@abi-software/map-side-bar 2.11.2 → 2.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.2.0",
-    "@abi-software/map-utilities": "1.7.6",
+    "@abi-software/map-utilities": "1.7.7",
     "@abi-software/svg-sprite": "^1.0.2",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityExplorer.vue

@@ -3,14 +3,56 @@
     <MapSvgSpriteColor />
     <template #header>
       <div class="header">
-        <el-input
-          class="search-input"
-          placeholder="Search"
-          v-model="searchInput"
-          @keyup="searchEvent"
-          clearable
-          @clear="clearSearchClicked"
-        ></el-input>
+        <div class="search-input-container" :class="{'is-focus': inputFocus}">
+          <el-input
+            class="search-input"
+            placeholder="Search"
+            v-model="searchInput"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+            @input="onInputChange"
+            @keyup="searchEvent"
+            clearable
+            @clear="clearSearchClicked"
+          ></el-input>
+          <el-popover
+            width="350"
+            trigger="hover"
+            popper-class="filter-help-popover"
+          >
+            <template #reference>
+              <MapSvgIcon icon="help" class="help" />
+            </template>
+            <div>
+              <strong>Search rules:</strong>
+              <ul>
+                <li>
+                  <strong>Partial Matching:</strong> You don't need to type the full word or ID.
+                  The search will find items that contain your search term.
+                </li>
+                <li>
+                  <strong>Multiple Terms:</strong> Separate terms with a comma (<code>,</code>).
+                  This will find pathways that match any of the terms (an "OR" search).
+                </li>
+              </ul>
+              <br/>
+              <strong>Examples:</strong>
+              <ul>
+                <li>
+                  <strong>To find by partial ID:</strong>
+                  Searching for <code>kidney/132</code> will match the full <strong>Pathway ID</strong> <code>ilxtr:sparc-nlp/kidney/132</code>
+                </li>
+                <li>
+                  <strong>To find by keyword:</strong>
+                  Searching for (<code>vagus nerve</code>) will match <strong>pathways</strong> that have <code>vagus nerve</code> in their title OR are linked to a related component (like UBERON:0001759).
+                </li>
+                <li>
+                  <strong>To find by multiple terms:</strong>
+                  Searching for <code>kidney</code>, <code>vagus nerve</code> will find pathways that are related to either <code>kidney</code> OR <code>vagus nerve</code>.</li>
+              </ul>
+            </div>
+          </el-popover>
+        </div>
         <el-button
           type="primary"
           class="button"
@@ -216,6 +258,7 @@ export default {
       expanded: "",
       filterVisibility: true,
       expandedData: null,
+      inputFocus: false,
     };
   },
   computed: {
@@ -250,6 +293,7 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes();
           this.searchInput = '';
           this.filter = [];
+          this.updateInputFocus();
         }
       }
     },
@@ -306,6 +350,7 @@ export default {
     onConnectivityClicked: function (data) {
       this.searchInput = data.query;
       this.searchAndFilterUpdate();
+      this.updateInputFocus();
     },
     collapseChange:function (data) {
       this.expanded = this.expanded === data.id ? "" : data.id;
@@ -380,6 +425,7 @@ export default {
     },
     openSearch: function (filter, search = "") {
       this.searchInput = search;
+      this.updateInputFocus();
       this.resetPageNavigation();
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
@@ -468,13 +514,27 @@ export default {
     clearSearchClicked: function () {
       this.searchInput = "";
       this.searchAndFilterUpdate();
+      this.updateInputFocus();
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
         this.searchInput = this.searchInput.trim();
         this.searchAndFilterUpdate();
+        this.updateInputFocus();
       }
     },
+    updateInputFocus: function () {
+      this.inputFocus = this.searchInput ? true : false;
+    },
+    onInputFocus: function () {
+      this.updateInputFocus();
+    },
+    onInputBlur: function () {
+      this.updateInputFocus();
+    },
+    onInputChange: function () {
+      this.updateInputFocus();
+    },
     filterUpdate: function (filters) {
       this.filter = [...filters];
       this.searchAndFilterUpdate();
@@ -554,6 +614,7 @@ export default {
       this.searchInput = item.search;
       this.filter = item.filters;
       this.openSearch([...item.filters], item.search);
+      this.updateInputFocus();
     },
     onConnectivityInfoLoaded: function (result) {
       const stepItemRef = this.$refs['stepItem-' + result.id];
@@ -650,6 +711,24 @@ export default {
   }
 }
 
+.search-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .map-icon {
+    position: absolute;
+    right: 18px;
+    color: $app-primary-color !important;
+  }
+
+  &.is-focus {
+    .map-icon {
+      display: none;
+    }
+  }
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -811,5 +890,9 @@ export default {
     border-bottom-color: transparent !important;
     border-right-color: transparent !important;
   }
+
+  code {
+    font-size: 90%;
+  }
 }
 </style>

package/src/components/ConnectivityInfo.vue

@@ -103,9 +103,9 @@
                 <el-icon class="info"><el-icon-warning /></el-icon>
               </template>
               <span style="word-break: keep-all">
-                <strong>Map</strong> - connectivity as defined in displayed map
+                <strong>Map</strong> - connectivity as defined in active map.
                 <br>
-                <strong>SCKAN</strong> - connectivity as defined in SCKAN
+                <strong>SCKAN</strong> - connectivity as defined in SCKAN.
               </span>
             </el-popover>
           </span>

package/src/components.d.ts

@@ -7,8 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AcupointsCard: typeof import('./components/AcupointsCard.vue')['default']
-    AcupointsInfoSearch: typeof import('./components/AcupointsInfoSearch.vue')['default']
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']

package/src/acupoints.js

@@ -1,32 +0,0 @@
-export const acupointEntries = {
-  "LU 1": {
-      "Acupoint": "LU 1",
-      "Label": "LU 1",
-      "Synonym": "Test data",
-      "UMLS CUI": "",
-      "Meridian": "LTest data",
-      "Chinese Name": "Zhongfu",
-      "English Name": "Central Treasury",
-      "Location": " z zxczc.",
-      "Reference": "Test data",
-      "Indications": "Test data",
-      "Acupuncture Method": "Test data",
-      "Vasculature": "Test data",
-      "Innervation": "Test data"
-  },
-  "LU 2": {
-      "Acupoint": "LU 2",
-      "Label": "LU 2",
-      "Synonym": "Test data",
-      "UMLS CUI": "",
-      "Meridian": "LTest data",
-      "Chinese Name": "Yunmen",
-      "English Name": "Cloud Gate",
-      "Location": " z zxczc.",
-      "Reference": "Test data",
-      "Indications": "Test data",
-      "Acupuncture Method": "Test data",
-      "Vasculature": "Test data",
-      "Innervation": "Test data"
-  }
-}

package/src/components/AcupointsCard.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="dataset-card-container" ref="container">
-    <div class="dataset-card" ref="card">
-      <div class="seperator-path"></div>
-      <div class="card"
-        @click="cardClicked(entry)"
-        @mouseover="cardHovered(entry)"
-        @mouseleave="cardHovered(undefined)"
-      >
-        <div class="card-right">
-          <div class="title">Acupoint: {{ entry.Acupoint }}</div>
-          <template v-for="field in displayFields" :key="field">
-            <div class="details" v-if="entry[field]">
-              <strong>{{ field }}:</strong> {{ entry[field] }}
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import EventBus from './EventBus.js'
-/* eslint-disable no-alert, no-console */
-
-export default {
-  data() {
-    return {
-      displayFields: [
-        "Synonym",
-        "Chinese Name",
-        "English Name",
-        "Reference",
-        "Indications",
-        "Acupuncture Method",
-        "Vasculature",
-        "Innervation"
-      ]
-    }
-  },
-  name: 'AcupointsCard',
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {
-    cardClicked: function (data) {
-      EventBus.emit('acupoints-clicked', data);
-    },
-    cardHovered: function (data) {
-      EventBus.emit('acupoints-hovered', data);
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dataset-card {
-  padding-left: 5px;
-  padding-right: 5px;
-  position: relative;
-  min-height: 17rem;
-}
-
-.title {
-  padding-bottom: 0.75rem;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-  cursor: pointer;
-}
-.card {
-  padding-top: 18px;
-  position: relative;
-  display: flex;
-}
-
-.card-left {
-  flex: 1;
-}
-
-.card-right {
-  flex: 1.3;
-  padding-left: 6px;
-}
-
-.button {
-  z-index: 10;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
-.button:hover {
-  background-color: $app-primary-color;
-  color: white;
-}
-
-.banner-img {
-  width: 128px;
-  height: 128px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.details {
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-}
-
-.badges-container {
-  margin-top: 0.75rem;
-}
-
-.loading-icon {
-  z-index: 20;
-  width: 40px;
-  height: 40px;
-  left: 80px;
-}
-
-.loading-icon :deep(.el-loading-mask) {
-  background-color: rgba(117, 190, 218, 0) !important;
-}
-
-.loading-icon :deep(.el-loading-spinner .path) {
-  stroke: $app-primary-color;
-}
-
-.float-button-container {
-  position: absolute;
-  bottom: 8px;
-  right: 16px;
-  opacity: 0;
-  visibility: hidden;
-
-  .card:hover & {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-</style>