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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.11.4-acupoints.1",
+  "version": "2.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -18,7 +18,6 @@
       <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
@@ -27,18 +26,14 @@
       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>
@@ -47,7 +42,6 @@
 <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'
@@ -127,14 +121,6 @@ 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",
@@ -170,12 +156,6 @@ 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}"
@@ -252,9 +232,6 @@ 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',
@@ -429,4 +406,4 @@ body {
   align-items: center;
   gap: 0.5rem;
 }
-</style>./acupoints.js
+</style>

package/src/algolia/algolia.js

@@ -187,24 +187,47 @@ export class AlgoliaClient {
    * This is using fetch from the Algolia API
    */
   search(filter, query = '', hitsperPage = 10, page = 1) {
+    const terms = query.replaceAll('"', '').split(",")
+    let processed = "";
+    const optionalWords = [];
+    if (terms) {
+      if (terms.length === 1 && (!(query.includes(" ")))) {
+        processed = query;
+      } else {
+        terms.forEach(term => {
+          optionalWords.push(term.trim())
+          processed += `"${term.trim()}" `;
+        });
+      }
+    }
+    processed = processed.trim()
+
+    const payload = {
+      advancedSyntax: true,
+      advancedSyntaxFeatures: ['exactPhrase'],
+      queryType: 'prefixAll',
+      facets: ['*'],
+      hitsPerPage: hitsperPage,
+      page: page - 1,
+      filters: filter,
+      attributesToHighlight: [],
+      attributesToRetrieve: [
+        'pennsieve.publishDate',
+        'pennsieve.updatedAt',
+        'item.curie',
+        'item.name',
+        'item.description',
+        'objectID',
+        'anatomy.organ.curie'
+      ],
+    }
+    if (optionalWords.length > 1) {
+      payload.optionalWords = optionalWords
+    }
+
     return new Promise(resolve => {
       this.index
-        .search(query, {
-          facets: ['*'],
-          hitsPerPage: hitsperPage,
-          page: page - 1,
-          filters: filter,
-          attributesToHighlight: [],
-          attributesToRetrieve: [
-            'pennsieve.publishDate',
-            'pennsieve.updatedAt',
-            'item.curie',
-            'item.name',
-            'item.description',
-            'objectID',
-            'anatomy.organ.curie'
-          ],
-        })
+        .search(processed, payload)
         .then(response => {
           let searchData = {
             items: this._processResultsForCards(response.hits),
@@ -299,7 +322,7 @@ export class AlgoliaClient {
     const anatomyOrganSubcategoryNames = anatomyOrganSubcategoryName ? Object.keys(anatomyOrganSubcategoryName) : []
     const anatomyOrganSubsubcategoryNames = anatomyOrganSubsubcategoryName ? Object.keys(anatomyOrganSubsubcategoryName) : []
     const filteredOrganNames = []
-  
+
     anatomyOrganCategoryNames.forEach((_categoryName) => {
       const categoryName = _categoryName.toLowerCase();
       anatomyOrganNames.forEach((_organName) => {
@@ -313,7 +336,7 @@ export class AlgoliaClient {
           } else {
             return anatomyOrganSubsubcategoryNames.find((name) => {
               const fullsubsubname = `${subcategoryName}.${organName}`
-              return (fullsubsubname === name) 
+              return (fullsubsubname === name)
             })
           }
         });

package/src/assets/searchPopover.scss

@@ -0,0 +1,90 @@
+
+.filter-help-popover {
+  font-family: 'Asap', sans-serif;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color !important;
+  border-radius: 4px !important;
+  color: #303133 !important;
+  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;
+  }
+
+  &[data-popper-placement^=bottom] .el-popper__arrow:before {
+    border-bottom-color: transparent !important;
+    border-right-color: transparent !important;
+  }
+
+  code {
+    font-size: 90%;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+
+  .el-button {
+    font-family: inherit;
+
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #ffffff;
+    }
+  }
+}
+
+.help {
+  width: 24px !important;
+  height: 24px;
+  transform: scale(1.1);
+  cursor: pointer;
+  color: #ffffff !important;
+}
+
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+  font-family: inherit;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
+}
+
+.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;
+    }
+  }
+}

package/src/components/ConnectivityExplorer.vue

@@ -646,6 +646,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/searchPopover.scss';
 @import '../assets/pagination.scss';
 
 .connectivity-card {
@@ -700,51 +701,6 @@ export default {
   }
 }
 
-.search-input {
-  width: 298px !important;
-  height: 40px;
-  padding-right: 14px;
-  font-family: inherit;
-
-  :deep(.el-input__inner) {
-    font-family: inherit;
-  }
-}
-
-.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;
-
-  .el-button {
-    font-family: inherit;
-
-    &:hover,
-    &:focus {
-      background: $app-primary-color;
-      box-shadow: -3px 2px 4px #00000040;
-      color: #ffffff;
-    }
-  }
-}
-
 .error-feedback {
   font-family: Asap;
   font-size: 14px;
@@ -864,48 +820,4 @@ export default {
   }
 }
 
-.help {
-  width: 24px !important;
-  height: 24px;
-  transform: scale(1.1);
-  cursor: pointer;
-  color: #ffffff !important;
-}
-
-.filter-help-popover {
-  font-family: 'Asap', sans-serif;
-  background: #f3ecf6 !important;
-  border: 1px solid $app-primary-color !important;
-  border-radius: 4px !important;
-  color: #303133 !important;
-  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;
-  }
-
-  &[data-popper-placement^=bottom] .el-popper__arrow:before {
-    border-bottom-color: transparent !important;
-    border-right-color: transparent !important;
-  }
-
-  code {
-    font-size: 90%;
-  }
-}
 </style>

package/src/components/DatasetExplorer.vue

@@ -2,14 +2,50 @@
   <el-card :body-style="bodyStyle" class="content-card">
     <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': searchInput}">
+          <el-input
+            class="search-input"
+            placeholder="Search"
+            v-model="searchInput"
+            @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>Multiple Terms:</strong> Separate terms with a comma (<code>,</code>).
+                  This will find dataset that match any of the terms (an "OR" search).
+                </li>
+                <li>
+                  <strong>Exact Phrase:</strong> Terms within a comma block will be matched as exact phrase.
+                </li>
+              </ul>
+              <br/>
+              <strong>Examples:</strong>
+              <ul>
+                <li>
+                  <strong>To find by exact phrase:</strong>
+                  Searching for <code>vagus nerve</code> will find any dataset containing <code>vagus nerve</code>.
+                </li>
+                <li>
+                  <strong>To find by multiple terms:</strong>
+                  Searching for <code>kidney, vagus</code> will find data that contains either <code>kidney</code> OR <code>vagus</code>.
+                  Due to the limitation of the search engine, space between words in a comma block will be treated as comma when multiple terms search is active.
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+        </div>
         <el-button
           type="primary"
           class="button"
@@ -90,6 +126,7 @@ import EventBus from './EventBus.js'
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
 import { markRaw } from 'vue'
+import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
@@ -130,7 +167,9 @@ export default {
     Drawer,
     Icon,
     Input,
-    Pagination
+    Pagination,
+    MapSvgIcon,
+    MapSvgSpriteColor
   },
   name: 'DatasetExplorer',
   props: {
@@ -537,6 +576,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/searchPopover.scss';
 @import '../assets/pagination.scss';
 
 .dataset-card {
@@ -577,29 +617,6 @@ export default {
   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;
-    }
-  }
-}
-
 .error-feedback {
   font-family: Asap;
   font-size: 14px;

package/src/components/SideBar.vue

@@ -64,14 +64,6 @@
                 @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"
@@ -100,7 +92,6 @@ 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'
@@ -160,13 +151,6 @@ export default {
       type: Array,
       default: [],
     },
-    /**
-     * The acupoints info to show in sidebar.
-     */
-    acupointsInfoList: {
-      type: Object,
-      default: null,
-    },
     /**
      * The annotation data to show in sidebar.
      */
@@ -220,13 +204,6 @@ 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)
     },
@@ -318,6 +295,9 @@ 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) &&
@@ -427,14 +407,6 @@ 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
      */
@@ -531,11 +503,6 @@ 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" ||
         (
@@ -598,16 +565,6 @@ 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,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']
@@ -21,8 +19,6 @@ 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']
@@ -42,7 +38,6 @@ 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']

package/src/acupoints.js

@@ -1,49 +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",
-      "Curated": false,
-  },
-  "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",
-      "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"
-  }
-}