Acupoints search and information card

package.json

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

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

src/acupoints.js

@@ -0,0 +1,70 @@
+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,
+      "onMRI": true
+  },
+  "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,
+      "onMRI": 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",
+    "Curated": true,
+    "onMRI": false
+  },
+  "LR 4": {
+    "Acupoint": "LR 4",
+    "Label": "LR 4",
+    "Synonym": "Test data",
+    "UMLS CUI": "",
+    "Meridian": "STest data",
+    "Chinese Name": "Zhongfeng",
+    "English Name": "Not Available",
+    "Location": " z zxcxadadadzc.",
+    "Reference": "Test data",
+    "Indications": "Test data",
+    "Acupuncture Method": "Test data",
+    "Vasculature": "Test data",
+    "Innervation": "Test data",
+    "Curated": false,
+    "onMRI": false
+  }
+}

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']