@abi-software/map-side-bar 2.11.2 → 2.11.4-acupoints.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.11.2",
+  "version": "2.11.4-acupoints.1",
   "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/App.vue

@@ -18,6 +18,7 @@
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
+      <el-button @click="searchAcupoints">Search Acupoints</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
     </div>
     <SideBar
@@ -26,14 +27,18 @@
       ref="sideBar"
       :visible="sideBarVisibility"
       :annotationEntry="annotationEntry"
+      :acupointsInfoList="acupoints"
       :createData="createData"
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
+      :tabs="tabArray"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
+      @acupoints-clicked="onAcupointsClicked"
+      @acupoints-hovered="onAcupointsHovered"
       @connectivity-collapse-change="onConnectivityCollapseChange"
     />
   </div>
@@ -42,6 +47,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
+import { acupointEntries } from './acupoints.js'
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
@@ -121,6 +127,14 @@ export default {
   },
   data: function () {
     return {
+      acupoints: acupointEntries,
+      contextArray: [null, null],
+      tabArray: [
+        { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
+        { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
+        { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+        {title: 'Acupoints', id: 4, type: 'acupoints' },
+      ],
       annotationEntry: [{
         featureId: "epicardium",
         resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
@@ -156,6 +170,12 @@ export default {
     }
   },
   methods: {
+    onAcupointsClicked: function (data) {
+      console.log("acupoints-clicked", data)
+    },
+    onAcupointsHovered: function (data) {
+      console.log("acupoints-hovered", data)
+    },
     loadConnectivityKnowledge: async function () {
       const sql = `select knowledge from knowledge
         where source="${this.sckanVersion}"
@@ -232,6 +252,9 @@ export default {
         'http://purl.obolibrary.org/obo/UBERON_0001103'
       )
     },
+    searchAcupoints: function() {
+      this.$refs.sideBar.openAcupointsSearch("LU 1")
+    },
     singleFacets: function () {
       this.$refs.sideBar.addFilter({
         facet: 'Cardiovascular system',
@@ -406,4 +429,4 @@ body {
   align-items: center;
   gap: 0.5rem;
 }
-</style>
+</style>./acupoints.js

package/src/acupoints.js

@@ -12,7 +12,8 @@ export const acupointEntries = {
       "Indications": "Test data",
       "Acupuncture Method": "Test data",
       "Vasculature": "Test data",
-      "Innervation": "Test data"
+      "Innervation": "Test data",
+      "Curated": false,
   },
   "LU 2": {
       "Acupoint": "LU 2",
@@ -27,6 +28,22 @@ export const acupointEntries = {
       "Indications": "Test data",
       "Acupuncture Method": "Test data",
       "Vasculature": "Test data",
-      "Innervation": "Test data"
+      "Innervation": "Test data",
+      "Curated": true,
+  },
+  "ST 3": {
+    "Acupoint": "ST 3",
+    "Label": "ST 3",
+    "Synonym": "Test data",
+    "UMLS CUI": "",
+    "Meridian": "STest data",
+    "Chinese Name": "Cheng Qi",
+    "English Name": "Not Available",
+    "Location": " z zxcxadadadzc.",
+    "Reference": "Test data",
+    "Indications": "Test data",
+    "Acupuncture Method": "Test data",
+    "Vasculature": "Test data",
+    "Innervation": "Test data"
   }
 }

package/src/components/AcupointsCard.vue

@@ -8,12 +8,30 @@
         @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 class="title">{{ entry.Acupoint }}</div>
+          <el-collapse class="collapse-card" v-model="expanded" @change="expandedChanged">
+            <el-collapse-item :title="showDetailsText" name="1" class="collapse-card">
+              <template v-for="field in displayFields" :key="field['name']">
+                <div class="details" >
+                  <strong>{{ field['name'] }}: </strong>
+                  <span
+                    v-if="!field['isEditing']"
+                    @click="field['isEditing'] = true"
+                  >
+                    {{ entry[field['name']] || 'Not Available' }}
+                  </span>
+                  <el-input
+                    v-else
+                    v-model="entry[field['name']]"
+                    @blur="field['isEditing'] = false"
+                    @keyup.enter="field['isEditing'] = false"
+                    @vue:mounted="inputMounted"
+                    type="textarea"
+                  />
+                </div>
+              </template>
+          </el-collapse-item>
+          </el-collapse>
         </div>
       </div>
     </div>
@@ -27,19 +45,30 @@ import EventBus from './EventBus.js'
 export default {
   data() {
     return {
+      expanded: [],
       displayFields: [
-        "Synonym",
-        "Chinese Name",
-        "English Name",
-        "Reference",
-        "Indications",
-        "Acupuncture Method",
-        "Vasculature",
-        "Innervation"
+        {name: "Synonym", isEditing: false},
+        {name: "Chinese Name", isEditing: false},
+        {name: "English Name", isEditing: false},
+        {name: "Reference", isEditing: false},
+        {name: "Indications", isEditing: false},
+        {name: "Acupuncture Method", isEditing: false},
+        {name: "Vasculature", isEditing: false},
+        {name: "Innervation", isEditing: false},
+        {name: "Notes", isEditing: false},
       ]
     }
   },
   name: 'AcupointsCard',
+  computed: {
+    showDetailsText: function() {
+      if (this.expanded.length > 0) {
+        return "Click here to hide information"
+      } else {
+        return "Click here to show more information"
+      }
+    }
+  },
   props: {
     /**
      * Object containing information for
@@ -51,22 +80,36 @@ export default {
     },
   },
   methods: {
+    expandedChanged: function() {
+      if (this.expanded.length > 0) {
+        EventBus.emit('acupoints-clicked', this.entry);
+      }
+    },
     cardClicked: function (data) {
       EventBus.emit('acupoints-clicked', data);
     },
     cardHovered: function (data) {
       EventBus.emit('acupoints-hovered', data);
     },
+    inputMounted: function(event) {
+      event.el?.querySelector('textarea')?.focus();
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.collapse-card {
+  border-top: none;
+  :deep(.el-collapse-item__header) {
+    border-bottom: none;
+  }
+}
+
 .dataset-card {
   padding-left: 5px;
   padding-right: 5px;
   position: relative;
-  min-height: 17rem;
 }
 
 .title {

package/src/components/AcupointsInfoSearch.vue

@@ -1,26 +1,41 @@
 <template>
   <div v-if="entry" class="main">
     <div class="header">
-      <el-input
-        class="search-input"
-        placeholder="Search"
-        v-model="searchInput"
-        @keyup="search(searchInput)"
-        clearable
-        @clear="clearSearchClicked"
-      ></el-input>
-      <el-button
-        v-show="false"
-        type="primary"
-        class="button"
-        @click="search(searchInput)"
-        size="large"
-      >
-        Search
-      </el-button>
+      <el-row>
+        <el-input
+          class="search-input"
+          placeholder="Search"
+          v-model="searchInput"
+          @keyup="search(searchInput)"
+          clearable
+          @clear="clearSearchClicked"
+        ></el-input>
+        <el-button
+          v-show="false"
+          type="primary"
+          class="button"
+          @click="search(searchInput)"
+          size="large"
+        >
+          Search
+        </el-button>
+      </el-row>
+      <el-row>
+        <span class="filterText">
+          Display:&nbsp;&nbsp;
+        </span>
+        <el-radio-group v-model="currentFilter" size="small" class="acuRadioGroup">
+          <el-radio-button
+            v-for="(value, key) in filters"
+            :key="key"
+            :label="key"
+            :value="value"
+          />
+        </el-radio-group>
+      </el-row>
     </div>
     <div class="content scrollbar" ref="content">
-      <div v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
+      <div v-if="paginatedResults.length > 0" v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
         <AcupointsCard
           class="dataset-card"
           :entry="result"
@@ -28,6 +43,9 @@
           @mouseleave="hoverChanged(undefined)"
         />
       </div>
+      <div v-else class="error-feedback">
+        No results found - Please change your search / filter criteria.
+      </div>
       <el-pagination
         class="pagination"
         v-model:current-page="page"
@@ -47,10 +65,13 @@
 import {
   ElButton as Button,
   ElCard as Card,
+  ElRadioButton as RadioButton,
+  ElRadioGroup as RadioGroup,
   ElDrawer as Drawer,
   ElIcon as Icon,
   ElInput as Input,
   ElPagination as Pagination,
+  ElRow as Row,
 } from 'element-plus'
 import AcupointsCard from './AcupointsCard.vue'
 
@@ -59,20 +80,31 @@ export default {
     AcupointsCard,
     Button,
     Card,
+    RadioButton,
+    RadioGroup,
     Drawer,
     Icon,
     Input,
-    Pagination
+    Pagination,
+    Row
   },
   name: 'AcupointsInfoSearch',
   props: {
     entry: {
       type: Object,
-      default: () => initial_state,
+      default: () => {},
     },
   },
   data: function () {
     return {
+      filters: {
+        "Curated Only": "Curated",
+        "Uncurated Only": "Uncurated",
+        "Both": "Both"
+      },
+      currentFilter: "Both",
+      previousFilter: undefined,
+      previousInput: undefined,
       results: [],
       paginatedResults: [],
       searchInput: "",
@@ -83,6 +115,15 @@ export default {
     }
   },
   watch: {
+    currentFilter: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+    },
     entry: {
       handler: function () {
         this.search(
@@ -109,12 +150,21 @@ export default {
     },
     search: function(input) {
       this.results = []
-      if (input !== this.previousSearch) {
+      if ((input !== this.previousInput) ||
+        (this.currentFilter !== this.previousFilter)) {
+        this.previousFilter = this.currentFilter
+        this.previousInput = this.input
+        let filteredList = Object.values(this.entry)
+        if (this.currentFilter !== "Both") {
+          const curated = this.currentFilter === "Curated" ? true : false
+          filteredList = filteredList.filter(
+            item => (item.Curated ? true : false) === curated)
+        }
         if (input === "") {
-          this.results = Object.values(this.entry)
+          this.results = filteredList
         } else {
           const lowerCase = input.toLowerCase()
-          for (const value of Object.values(this.entry)) {
+          for (const value of filteredList) {
             const searchFields = [
               value["Acupoint"],
               value["Synonym"],
@@ -124,7 +174,8 @@ export default {
               value["Indications"],
               value["Acupuncture Method"],
               value["Vasculature"],
-              value["Innervation"]
+              value["Innervation"],
+              value["Note"],
             ];
             const allstrings = searchFields.join();
             const myJSON = allstrings.toLowerCase();
@@ -139,7 +190,6 @@ export default {
       this.numberOfHits = this.results.length
       this.searchInput = input
       this.lastSearch = input
-      console.log(this.numberOfHits)
     },
     numberPerPageUpdate: function (val) {
       this.numberPerPage = val
@@ -162,6 +212,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.acuRadioGroup {
+  padding-top: 8px;
+}
+
 .dataset-card {
   position: relative;
 
@@ -201,7 +256,7 @@ export default {
   border-top: 1px solid var(--el-border-color);
   display: flex;
   flex-direction: column;
-  gap: 1.75rem;
+  gap: 1rem;
   padding: 1rem;
 }
 
@@ -295,6 +350,10 @@ export default {
   background-color: #e4e7ed;
 }
 
+.filterText {
+  margin-top:8px;
+}
+
 .scrollbar::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #f5f5f5;
@@ -320,4 +379,11 @@ export default {
   background: rgba(0, 0, 0, 0);
   box-shadow: none;
 }
+
+.error-feedback {
+  font-family: Asap;
+  font-size: 14px;
+  font-style: italic;
+  padding-top: 15px;
+}
 </style>

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;
@@ -802,6 +881,19 @@ export default {
   font-size: 12px !important;
   line-height: 18px !important;
 
+  > div {
+    word-break: break-word;
+    text-align: initial;
+  }
+
+  ul {
+    padding-left: 1.5rem;
+
+    > li + li {
+      margin-top: 0.5rem;
+    }
+  }
+
   .el-popper__arrow::before {
     background: #f3ecf6 !important;
     border-color: $app-primary-color !important;
@@ -811,5 +903,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>