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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.11.2-acupoints.0",
+  "version": "2.11.3",
   "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/components/ConnectivityInfo.vue

@@ -103,9 +103,9 @@
                 <el-icon class="info"><el-icon-warning /></el-icon>
               </template>
               <span style="word-break: keep-all">
-                <strong>Map</strong> - connectivity as defined in displayed map
+                <strong>Map</strong> - connectivity as defined in active map.
                 <br>
-                <strong>SCKAN</strong> - connectivity as defined in SCKAN
+                <strong>SCKAN</strong> - connectivity as defined in SCKAN.
               </span>
             </el-popover>
           </span>

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

package/src/acupoints.js

@@ -1,32 +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"
-  },
-  "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"
-  }
-}

package/src/components/AcupointsCard.vue

@@ -1,187 +0,0 @@
-<template>
-  <div class="dataset-card-container" ref="container">
-    <div class="dataset-card" ref="card">
-      <div class="seperator-path"></div>
-      <div class="card"
-        @click="cardClicked(entry)"
-        @mouseover="cardHovered(entry)"
-        @mouseleave="cardHovered(undefined)"
-      >
-        <div class="card-right">
-          <div class="title">Acupoint: {{ entry.Acupoint }}</div>
-          <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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import EventBus from './EventBus.js'
-/* eslint-disable no-alert, no-console */
-
-export default {
-  data() {
-    return {
-      displayFields: [
-        {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},
-      ]
-    }
-  },
-  name: 'AcupointsCard',
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {
-    cardClicked: function (data) {
-      EventBus.emit('acupoints-clicked', data);
-    },
-    cardHovered: function (data) {
-      EventBus.emit('acupoints-hovered', data);
-    },
-    inputMounted: function(event) {
-      event.el?.querySelector('textarea')?.focus();
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dataset-card {
-  padding-left: 5px;
-  padding-right: 5px;
-  position: relative;
-  min-height: 17rem;
-}
-
-.title {
-  padding-bottom: 0.75rem;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-  cursor: pointer;
-}
-.card {
-  padding-top: 18px;
-  position: relative;
-  display: flex;
-}
-
-.card-left {
-  flex: 1;
-}
-
-.card-right {
-  flex: 1.3;
-  padding-left: 6px;
-}
-
-.button {
-  z-index: 10;
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
-.button:hover {
-  background-color: $app-primary-color;
-  color: white;
-}
-
-.banner-img {
-  width: 128px;
-  height: 128px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.details {
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: 1.05px;
-  color: #484848;
-}
-
-.badges-container {
-  margin-top: 0.75rem;
-}
-
-.loading-icon {
-  z-index: 20;
-  width: 40px;
-  height: 40px;
-  left: 80px;
-}
-
-.loading-icon :deep(.el-loading-mask) {
-  background-color: rgba(117, 190, 218, 0) !important;
-}
-
-.loading-icon :deep(.el-loading-spinner .path) {
-  stroke: $app-primary-color;
-}
-
-.float-button-container {
-  position: absolute;
-  bottom: 8px;
-  right: 16px;
-  opacity: 0;
-  visibility: hidden;
-
-  .card:hover & {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-</style>