@abi-software/map-side-bar 2.11.0 → 2.11.2-acupoints.0

package/package.json

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

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/components/AcupointsCard.vue

@@ -9,9 +9,23 @@
       >
         <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] }}
+          <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>
         </div>
@@ -28,14 +42,15 @@ export default {
   data() {
     return {
       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},
       ]
     }
   },
@@ -57,6 +72,9 @@ export default {
     cardHovered: function (data) {
       EventBus.emit('acupoints-hovered', data);
     },
+    inputMounted: function(event) {
+      event.el?.querySelector('textarea')?.focus();
+    }
   }
 }
 </script>

package/src/components/AcupointsInfoSearch.vue

@@ -18,6 +18,25 @@
       >
         Search
       </el-button>
+      <el-button
+        v-show="false"
+        type="primary"
+        class="button"
+        @click="save()"
+        size="large"
+      >
+        Save
+      </el-button>
+      <el-button
+        v-show="false"
+        type="primary"
+        class="button"
+        @click="load()"
+        size="large"
+      >
+        Load
+      </el-button>
+
     </div>
     <div class="content scrollbar" ref="content">
       <div v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
@@ -68,7 +87,7 @@ export default {
   props: {
     entry: {
       type: Object,
-      default: () => initial_state,
+      default: () => {},
     },
   },
   data: function () {
@@ -124,7 +143,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 +159,6 @@ export default {
       this.numberOfHits = this.results.length
       this.searchInput = input
       this.lastSearch = input
-      console.log(this.numberOfHits)
     },
     numberPerPageUpdate: function (val) {
       this.numberPerPage = val

package/src/components/SearchFilters.vue

@@ -362,7 +362,7 @@ export default {
       })
 
       // trigger reactivity only once
-      this.options = processedOptions;
+      Object.assign(this.options, processedOptions);
     },
     populateCascader: function () {
       if (this.entry.options) {

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