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

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

@@ -21,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']
@@ -40,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']