@abi-software/map-side-bar 2.19.1-demo.0 → 2.20.0-acuppoints.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.19.1-demo.0",
+  "version": "2.20.0-acuppoints.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -49,8 +49,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "1.6.0",
-    "@abi-software/map-utilities": "1.12.0",
+    "@abi-software/gallery": "1.7.0",
+    "@abi-software/map-utilities": "1.13.0",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",
     "algoliasearch": "^4.27.0",

package/src/App.vue

@@ -14,8 +14,8 @@
       <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>
-      <el-button @click="showCellCardExplorer()">Show Cell Card Explorer</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -23,15 +23,19 @@
       ref="sideBar"
       :visible="sideBarVisibility"
       :annotationEntry="annotationEntry"
+      :acupointsInfoList="acupoints"
       :createData="createData"
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
-      :showCellCards="showCellCards"
+      :tabs="tabArray"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
+      @acupoints-clicked="onAcupointsClicked"
+      @acupoints-hovered="onAcupointsHovered"
+      @acupoints-result="onAcupointsResult"
       @connectivity-collapse-change="onConnectivityCollapseChange"
     />
   </div>
@@ -39,10 +43,13 @@
 
 <script>
 // optionally import default styles
-import SideBar from './components/SideBar.vue';
-import EventBus from './components/EventBus.js';
-import exampleConnectivityInput from './exampleConnectivityInput.js';
-import { capitalise } from './utils/common.js';
+import { acupointEntries } from './acupoints.js'
+import SideBar from './components/SideBar.vue'
+import EventBus from './components/EventBus.js'
+import exampleConnectivityInput from './exampleConnectivityInput.js'
+
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 const flatmapQuery = (flatmapApi, sql) => {
   const data = { sql: sql };
@@ -116,6 +123,13 @@ export default {
   },
   data: function () {
     return {
+      acupoints: acupointEntries,
+      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',
@@ -135,7 +149,6 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
-        CELL_CARDS_API: import.meta.env.VITE_APP_CELL_CARDS_API,
       },
       connectivityEntry: [],
       createData: {
@@ -152,10 +165,18 @@ export default {
       query: '',
       filter: [],
       target: [],
-      showCellCards: false,
     };
   },
   methods: {
+    onAcupointsClicked: function (data) {
+      console.log("acupoints-clicked", data)
+    },
+    onAcupointsHovered: function (data) {
+      console.log("acupoints-hovered", data)
+    },
+    onAcupointsResult: function (data) {
+      console.log("acupoints-result", data)
+    },
     loadConnectivityKnowledge: async function () {
       const sql = `select knowledge from knowledge
         where source="${this.sckanVersion}"
@@ -231,6 +252,9 @@ export default {
     openSearch: function () {
       this.$refs.sideBar.openSearch([], 'http://purl.obolibrary.org/obo/UBERON_0001103');
     },
+    searchAcupoints: function() {
+      this.$refs.sideBar.openAcupointsSearch("LU 1")
+    },
     singleFacets: function () {
       this.$refs.sideBar.addFilter({
         facet: 'Cardiovascular system',
@@ -367,11 +391,6 @@ export default {
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput];
     },
-    showCellCardExplorer: function () {
-      this.showCellCards = true;
-      this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
-      this.$refs.sideBar.setDrawerOpen(true);
-    },
   },
   mounted: async function () {
     console.log('mounted app');

package/src/acupoints.js

@@ -0,0 +1,78 @@
+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,
+      "Meridian Point": true,
+      "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "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,
+      "Meridian Point": false,
+      "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "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,
+    "Meridian Point": false,
+    "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "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,
+    "Meridian Point": true,
+    "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  }
+}

package/src/components/AcupointsCard.vue

@@ -0,0 +1,316 @@
+<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">
+          <el-collapse class="collapse-card" v-model="expanded" @change="expandedChanged">
+            <el-collapse-item :title="entry.Acupoint" name="1" class="collapse-card">
+              <template #title>
+                <div>
+                  <span class="title">{{ entry.Acupoint }}</span>
+                  <el-tag
+                    v-for="tag in tags"
+                    :key="tag.name"
+                    :type="tag.type"
+                    effect="plain"
+                    class="acupointTags"
+                    size="small"
+                  >
+                    {{ tag.name }}
+                  </el-tag>
+                </div>
+              </template>
+              <template v-for="field in displayFields" :key="field['name']">
+                <div class="details">
+                  <strong>{{ field['name'] }}: </strong>
+                  <template v-if="field['name'] === 'Acupoint Curie'">
+                    <a :href="entry['Acupoint IRI']" target="_blank">
+                      <span>
+                        {{ entry['Acupoint Curie'] }}
+                      </span>
+                    </a>
+                  </template>
+                  <template v-else-if="field['name'] === 'Reference'">
+                    <div v-html="formatReference(entry[field['name']])"></div>
+                  </template>
+                  <template v-else>
+                    <span
+                      v-if="!field['isEditing']"
+                      @click="setFieldToEditing(field)"
+                    >
+                      {{ 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"
+                    />
+                  </template>
+                </div>
+              </template>
+          </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EventBus from './EventBus.js'
+import {
+  ElCollapse as Collapse,
+  ElCollapseItem as CollapseItem,
+  ElTag as Tag
+} from 'element-plus'
+/* eslint-disable no-alert, no-console */
+
+export default {
+  components: {
+    Collapse,
+    CollapseItem,
+    Tag
+  },
+  data() {
+    return {
+      expanded: [],
+      tags: [],
+      displayFields: [
+        {name: "Acupoint Curie", isEditing: false},
+        {name: "Acupoint", isEditing: false},
+        {name: "Acupoint Category", isEditing: false},
+        {name: "Synonym", isEditing: false},
+        {name: "Pinyin Name", isEditing: false},
+        {name: "Chinese Name", isEditing: false},
+        {name: "Meridian", isEditing: false},
+        {name: "Special Point Role", isEditing: false},
+        {name: "Location", isEditing: false},
+        {name: "Location Anatomy", isEditing: false},
+        {name: "Acupuncture Method", isEditing: false},
+        {name: "Indications", isEditing: false},
+        {name: "Innervation", isEditing: false},
+        {name: "Nearby Nerve", isEditing: false},
+        {name: "Vasculature", isEditing: false},
+        {name: "Nearby Artery", isEditing: false},
+        {name: "Nearby Vein", isEditing: false},
+        {name: "Reference", isEditing: false},
+        //{name: "Notes", isEditing: false},
+      ]
+    }
+  },
+  name: 'AcupointsCard',
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+    allowEditing: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created: function () {
+    if (this.entry["Meridian Point"]) {
+      this.tags.push({ name: 'WHO', type: 'info' })
+    }
+    if (this.entry.Meridian) {
+      this.tags.push({ name: this.entry.Meridian, type: 'info' })
+    }
+    if (this.entry.onMRI) {
+      this.tags.push({ name: 'Spotted', type: 'success' })
+    }
+    if (this.entry.userDefined) {
+      this.tags.push({ name: 'User Defined', type: 'warning' })
+    }
+  },
+  methods: {
+    expandedChanged: function() {
+      if (this.expanded.length > 0) {
+        EventBus.emit('acupoints-clicked', this.entry);
+      }
+    },
+    cardClicked: function (data) {
+      EventBus.emit('acupoints-clicked', data);
+    },
+    cardHovered: function (data) {
+      EventBus.emit('acupoints-hovered', data);
+    },
+    inputMounted: function(event) {
+      event.el?.querySelector('textarea')?.focus();
+    },
+    formatReference: function(text) {
+      if (!text) {
+        return 'Not Available';
+      }
+      // Escape HTML first so only the markup added below is rendered
+      const escaped = String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+      return escaped
+        // Bold and italicise square-bracketed labels, e.g. [Acupoint Location, Pinyin Label]
+        .replace(/\[([^\]\n]+)\]/g, '<strong><em>[$1]</em></strong>')
+        // Turn http(s) URLs into links, leaving trailing punctuation outside
+        .replace(/https?:\/\/[^\s<]+?(?=[.,;:!?)]*(?:\s|<|$))/g,
+          (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`)
+        .replace(/\n/g, '<br>');
+    },
+    setFieldToEditing: function(field) {
+      if (this.allowEditing) {
+        field['isEditing'] = true;
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+:deep(.el-collapse-item__header) {
+  font-weight: bold;
+}
+
+:deep(.el-collapse-item__content) {
+  padding-bottom: 4px;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border: none;
+}
+
+.collapse-card {
+  border-top: none;
+  :deep(.el-collapse-item__header) {
+    border-bottom: none;
+  }
+}
+
+.dataset-card {
+  padding-left: 5px;
+  padding-right: 5px;
+  position: relative;
+}
+
+.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: 12px;
+  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;
+}
+
+.title {
+  font: inherit;
+  margin-top:4px;
+  padding-right:30px;
+  vertical-align:middle;
+}
+
+.acupointTags {
+  margin-right:4px;
+}
+
+.float-button-container {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+  opacity: 0;
+  visibility: hidden;
+
+  .card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+</style>