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

package/src/components/AcupointsInfoSearch.vue

@@ -0,0 +1,389 @@
+<template>
+  <div v-if="entry" class="main">
+    <div class="header">
+      <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-if="paginatedResults.length > 0" v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
+        <AcupointsCard
+          class="dataset-card"
+          :entry="result"
+          @mouseenter="hoverChanged(result)"
+          @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"
+        hide-on-single-page
+        large
+        layout="prev, pager, next"
+        :page-size="numberPerPage"
+        :total="numberOfHits"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+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'
+
+export default {
+  components: {
+    AcupointsCard,
+    Button,
+    Card,
+    RadioButton,
+    RadioGroup,
+    Drawer,
+    Icon,
+    Input,
+    Pagination,
+    Row
+  },
+  name: 'AcupointsInfoSearch',
+  props: {
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data: function () {
+    return {
+      filters: {
+        "Curated Only": "Curated",
+        "Uncurated Only": "Uncurated",
+        "Both": "Both"
+      },
+      currentFilter: "Both",
+      previousFilter: undefined,
+      previousInput: undefined,
+      results: [],
+      paginatedResults: [],
+      searchInput: "",
+      lastSearch: "",
+      numberOfHits: 0,
+      numberPerPage: 10,
+      page: 1,
+    }
+  },
+  watch: {
+    currentFilter: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+    },
+    entry: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    resetSearch: function () {
+      this.numberOfHits = 0
+      this.search(this.searchInput)
+    },
+    clearSearchClicked: function () {
+      this.searchInput = '';
+      this.search("");
+    },
+    search: function(input) {
+      this.results = []
+      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 = filteredList
+        } else {
+          const lowerCase = input.toLowerCase()
+          for (const value of filteredList) {
+            const searchFields = [
+              value["Acupoint"],
+              value["Synonym"],
+              value["Chinese Name"],
+              value["English Name"],
+              value["Reference"],
+              value["Indications"],
+              value["Acupuncture Method"],
+              value["Vasculature"],
+              value["Innervation"],
+              value["Note"],
+            ];
+            const allstrings = searchFields.join();
+            const myJSON = allstrings.toLowerCase();
+            if (myJSON.includes(lowerCase)) {
+              this.results.push(value)
+            }
+          }
+        }
+      }
+      const start = this.numberPerPage * (this.page - 1)
+      this.paginatedResults = this.results.slice(start, start + this.numberPerPage)
+      this.numberOfHits = this.results.length
+      this.searchInput = input
+      this.lastSearch = input
+    },
+    numberPerPageUpdate: function (val) {
+      this.numberPerPage = val
+      this.pageChange(1)
+    },
+    pageChange: function (page) {
+      this.page = page
+      this.search( this.searchInput)
+    },
+    scrollToTop: function () {
+      if (this.$refs.content) {
+        this.$refs.content.scroll({ top: 0, behavior: 'smooth' })
+      }
+    },
+    resetPageNavigation: function () {
+      this.page = 1
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.acuRadioGroup {
+  padding-top: 8px;
+}
+
+.dataset-card {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: calc(100% - 15px);
+    height: 100%;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    border-style: solid;
+    border-radius: 5px;
+    border-color: transparent;
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  overflow-y: auto;
+  scrollbar-width: thin;
+  min-width: 16rem;
+  background-color: #f7faff;
+  height: 100%;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.step-item {
+  font-size: 14px;
+  margin-bottom: 18px;
+  text-align: left;
+}
+
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
+}
+
+.header {
+  .el-button {
+    font-family: inherit;
+
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
+}
+
+.pagination {
+  padding-bottom: 16px;
+  background-color: white;
+  padding-left: 95px;
+  font-weight: bold;
+}
+
+.pagination :deep(button) {
+  background-color: white !important;
+}
+.pagination :deep(li) {
+  background-color: white !important;
+}
+.pagination :deep(li.is-active) {
+  color: $app-primary-color;
+}
+
+.error-feedback {
+  font-family: Asap;
+  font-size: 14px;
+  font-style: italic;
+  padding-top: 15px;
+}
+
+.content-card :deep(.el-card__header) {
+  background-color: #292b66;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-card__body) {
+  background-color: #f7faff;
+  overflow-y: hidden;
+  padding: 1rem;
+}
+
+.content {
+  // width: 515px;
+  flex: 1 1 auto;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
+}
+
+.content :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
+.content :deep(.step-item:first-child .seperator-path) {
+  display: none;
+}
+
+.content :deep(.step-item:not(:first-child) .seperator-path) {
+  width: 455px;
+  height: 0px;
+  border: solid 1px #e4e7ed;
+  background-color: #e4e7ed;
+}
+
+.filterText {
+  margin-top:8px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
+:deep(.el-input__suffix) {
+  padding-right: 0px;
+}
+
+:deep(.my-drawer) {
+  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/SideBar.vue

@@ -64,6 +64,14 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
+            <template v-else-if="tab.type === 'acupoints' && acupointsInfoList">
+              <acupoints-info-search
+                :ref="'acupointsTab_' + tab.id"
+                :entry="acupointsInfoList"
+                @on-acupoints-click="acupointClicked"
+                v-show="tab.id === activeTabId"
+              />
+            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -92,6 +100,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import DatasetExplorer from './DatasetExplorer.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
+import AcupointsInfoSearch from './AcupointsInfoSearch.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityExplorer from './ConnectivityExplorer.vue'
 import { removeShowAllFacets } from '../algolia/utils.js'
@@ -151,6 +160,13 @@ export default {
       type: Array,
       default: [],
     },
+    /**
+     * The acupoints info to show in sidebar.
+     */
+    acupointsInfoList: {
+      type: Object,
+      default: null,
+    },
     /**
      * The annotation data to show in sidebar.
      */
@@ -204,6 +220,13 @@ export default {
     }
   },
   methods: {
+  /**
+     * This event is emitted with a mouse click on acupoint card
+     * @arg data
+     */
+    acupointClicked: function (data) {
+      this.$emit('acupoints-clicked', data)
+    },
     onConnectivityCollapseChange: function (data) {
       this.$emit('connectivity-collapse-change', data)
     },
@@ -295,9 +318,6 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
-    /**
-     * Get the ref id of the tab by id and type.
-     */
     getTabRef: function (id, type, switchTab = false) {
       const matchedTab = this.tabEntries.filter((tabEntry) => {
         return (id === undefined || tabEntry.id === id) &&
@@ -407,6 +427,14 @@ export default {
     updateConnectivityError: function (errorInfo) {
       EventBus.emit('connectivity-error', errorInfo);
     },
+    openAcupointsSearch: function (term) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const tabRef = this.getTabRef(undefined, 'acupoints', true);
+        tabRef.search(term);
+      })
+    },
     /**
      * Store available anatomy facets data for connectivity list component
      */
@@ -503,6 +531,11 @@ export default {
     // This should respect the information provided by the property
     tabEntries: function () {
       return this.tabs.filter((tab) =>
+        (tab.type === "acupoints" && 
+          (
+            this.acupointsInfoList &&
+            Object.keys(this.acupointsInfoList).length > 0
+        )) ||
         tab.type === "datasetExplorer" ||
         tab.type === "connectivityExplorer" ||
         (
@@ -565,6 +598,16 @@ export default {
       this.$emit('connectivity-source-change', payLoad);
     })
 
+    // Emit acupoints clicked event
+    EventBus.on('acupoints-clicked', (payLoad) => {
+      this.$emit('acupoints-clicked', payLoad);
+    })
+
+    // Emit acupoints hovered event
+    EventBus.on('acupoints-hovered', (payLoad) => {
+      this.$emit('acupoints-hovered', payLoad);
+    })
+
     // Get available anatomy facets for the connectivity info
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children

package/src/components.d.ts

@@ -7,6 +7,8 @@ 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']
@@ -19,6 +21,8 @@ declare module 'vue' {
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -38,6 +42,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']