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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.11.3",
+  "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>