@abi-software/map-side-bar 2.6.2 → 2.6.3-acupoints.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.6.2",
+  "version": "2.6.3-acupoints.1",
   "files": [
     "dist/*",
     "src/*",
@@ -39,11 +39,12 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.3.1",
+    "@abi-software/map-utilities": "^1.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",
     "element-plus": "2.8.4",
+    "js-base64": "^3.7.7",
     "marked": "^4.1.1",
     "mitt": "^3.0.1",
     "unplugin-vue-components": "^0.26.0",

package/src/App.vue

@@ -16,6 +16,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>
     </div>
     <SideBar
       :envVars="envVars"
@@ -25,6 +26,7 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :annotationEntry="annotationEntry"
+      :acupointsInfoList="acupoints"
       :createData="createData"
       :connectivityInfo="connectivityInput"
       @tabClicked="tabClicked"
@@ -32,6 +34,8 @@
       @hover-changed="hoverChanged($event)"
       @connectivity-component-click="onConnectivityComponentClick"
       @actionClick="action"
+      @acupoints-clicked="onAcupointsClicked"
+      @acupoints-hovered="onAcupointsHovered"
     />
   </div>
 </template>
@@ -39,12 +43,14 @@
 <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'
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
+
 // let testContext = {
 //   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
 //   "heading": "Digital tracings of enteric plexus",
@@ -105,6 +111,7 @@ export default {
   },
   data: function () {
     return {
+      acupoints: acupointEntries,
       annotationEntry: {
         featureId :"epicardium",
         resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json","resource":"https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json"
@@ -114,6 +121,7 @@ export default {
         { title: 'Flatmap', id: 1, type: 'search'},
         { title: 'Connectivity', id: 2, type: 'connectivity' },
         { title: 'Annotation', id: 3, type: 'annotation' },
+        {title: 'Acupoints', id: 4, type: 'acupoints' },
       ],
       sideBarVisibility: true,
       envVars: {
@@ -140,6 +148,12 @@ export default {
     }
   },
   methods: {
+    onAcupointsClicked: function (data) {
+      console.log("acupoints-clicked", data)
+    },
+    onAcupointsHovered: function (data) {
+      console.log("acupoints-hovered", data)
+    },
     hoverChanged: function (data) {
       console.log('hoverChanged', data)
     },
@@ -171,6 +185,9 @@ export default {
         'http://purl.obolibrary.org/obo/UBERON_0001103'
       )
     },
+    searchAcupoints: function() {
+      this.$refs.sideBar.openAcupointsSearch("GB 6")
+    },
     singleFacets: function () {
       this.$refs.sideBar.addFilter({
         facet: 'Cardiovascular system',
@@ -320,4 +337,4 @@ body {
   align-items: center;
   gap: 0.5rem;
 }
-</style>
+</style>./acupoints.js

package/src/acupoints.js

@@ -0,0 +1,32 @@
+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/algolia/utils.js

@@ -40,6 +40,12 @@ export const facetPropPathMapping = [
     facetPropPath: 'attributes.subject.ageCategory.value',
     facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
   },
+  {
+    label: 'Funding Program',
+    id: 'pennsieve.organization',
+    facetPropPath: 'pennsieve.organization.name',
+    facetSubpropPath: 'pennsieve.organization.subcategory.name'
+  },
 ]
 
 // Same as above, but these show on the sidebar filters
@@ -48,6 +54,7 @@ export const shownFilters = {
   'organisms.primary.species.name' : 'Species',
   'attributes.subject.sex.value' : 'Sex',
   'attributes.subject.ageCategory.value' : 'Age Categories',
+  'pennsieve.organization.name' : 'Funding Program',
   'item.types.name' : 'Data type',
 }
 
@@ -60,9 +67,9 @@ export function getFilters(selectedFacetArray=undefined) {
     return 'NOT item.published.status:embargo'
   }
 
-  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  // Switch the 'term' attribute to 'label' if 'label' does not exist
   selectedFacetArray.forEach(f=>f.label=f.facet)
-  
+
 
   let facets = removeShowAllFacets(selectedFacetArray)
 

package/src/components/AcupointsCard.vue

@@ -0,0 +1,169 @@
+<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">
+            <div class="details" v-if="entry[field]">
+              <strong>{{ field }}:</strong> {{ entry[field] }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EventBus from './EventBus.js'
+/* eslint-disable no-alert, no-console */
+
+export default {
+  data() {
+    return {
+      displayFields: [
+        "Synonym",
+        "Chinese Name",
+        "English Name",
+        "Reference",
+        "Indications",
+        "Acupuncture Method",
+        "Vasculature",
+        "Innervation"
+      ]
+    }
+  },
+  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);
+    },
+  }
+}
+</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>

package/src/components/AcupointsInfoSearch.vue

@@ -0,0 +1,323 @@
+<template>
+  <div v-if="entry" class="main">
+    <div class="header">
+      <el-input
+        class="search-input"
+        placeholder="Search"
+        v-model="searchInput"
+        @keyup="search(searchInput)"
+        clearable
+        @clear="clearSearchClicked"
+      ></el-input>
+      <el-button
+        v-show="false"
+        type="primary"
+        class="button"
+        @click="search(searchInput)"
+        size="large"
+      >
+        Search
+      </el-button>
+    </div>
+    <div class="content scrollbar" ref="content">
+      <div v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
+        <AcupointsCard
+          class="dataset-card"
+          :entry="result"
+          @mouseenter="hoverChanged(result)"
+          @mouseleave="hoverChanged(undefined)"
+        />
+      </div>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="page"
+        hide-on-single-page
+        large
+        layout="prev, pager, next"
+        :page-size="numberPerPage"
+        :total="numberOfHits"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ElButton as Button,
+  ElCard as Card,
+  ElDrawer as Drawer,
+  ElIcon as Icon,
+  ElInput as Input,
+  ElPagination as Pagination,
+} from 'element-plus'
+import AcupointsCard from './AcupointsCard.vue'
+
+export default {
+  components: {
+    AcupointsCard,
+    Button,
+    Card,
+    Drawer,
+    Icon,
+    Input,
+    Pagination
+  },
+  name: 'AcupointsInfoSearch',
+  props: {
+    entry: {
+      type: Object,
+      default: () => initial_state,
+    },
+  },
+  data: function () {
+    return {
+      results: [],
+      paginatedResults: [],
+      searchInput: "",
+      lastSearch: "",
+      numberOfHits: 0,
+      numberPerPage: 10,
+      page: 1,
+    }
+  },
+  watch: {
+    entry: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    resetSearch: function () {
+      this.numberOfHits = 0
+      this.search(this.searchInput)
+    },
+    clearSearchClicked: function () {
+      this.searchInput = '';
+      this.search("");
+    },
+    search: function(input) {
+      this.results = []
+      if (input !== this.previousSearch) {
+        if (input === "") {
+          this.results = Object.values(this.entry)
+        } else {
+          const lowerCase = input.toLowerCase()
+          for (const value of Object.values(this.entry)) {
+            const searchFields = [
+              value["Acupoint"],
+              value["Synonym"],
+              value["Chinese Name"],
+              value["English Name"],
+              value["Reference"],
+              value["Indications"],
+              value["Acupuncture Method"],
+              value["Vasculature"],
+              value["Innervation"]
+            ];
+            const allstrings = searchFields.join();
+            const myJSON = allstrings.toLowerCase();
+            if (myJSON.includes(lowerCase)) {
+              this.results.push(value)
+            }
+          }
+        }
+      }
+      const start = this.numberPerPage * (this.page - 1)
+      this.paginatedResults = this.results.slice(start, start + this.numberPerPage)
+      this.numberOfHits = this.results.length
+      this.searchInput = input
+      this.lastSearch = input
+      console.log(this.numberOfHits)
+    },
+    numberPerPageUpdate: function (val) {
+      this.numberPerPage = val
+      this.pageChange(1)
+    },
+    pageChange: function (page) {
+      this.page = page
+      this.search( this.searchInput)
+    },
+    scrollToTop: function () {
+      if (this.$refs.content) {
+        this.$refs.content.scroll({ top: 0, behavior: 'smooth' })
+      }
+    },
+    resetPageNavigation: function () {
+      this.page = 1
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dataset-card {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: calc(100% - 15px);
+    height: 100%;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    border-style: solid;
+    border-radius: 5px;
+    border-color: transparent;
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  overflow-y: auto;
+  scrollbar-width: thin;
+  min-width: 16rem;
+  background-color: #f7faff;
+  height: 100%;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1rem;
+}
+
+.step-item {
+  font-size: 14px;
+  margin-bottom: 18px;
+  text-align: left;
+}
+
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
+}
+
+.header {
+  .el-button {
+    font-family: inherit;
+
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
+}
+
+.pagination {
+  padding-bottom: 16px;
+  background-color: white;
+  padding-left: 95px;
+  font-weight: bold;
+}
+
+.pagination :deep(button) {
+  background-color: white !important;
+}
+.pagination :deep(li) {
+  background-color: white !important;
+}
+.pagination :deep(li.is-active) {
+  color: $app-primary-color;
+}
+
+.error-feedback {
+  font-family: Asap;
+  font-size: 14px;
+  font-style: italic;
+  padding-top: 15px;
+}
+
+.content-card :deep(.el-card__header) {
+  background-color: #292b66;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-card__body) {
+  background-color: #f7faff;
+  overflow-y: hidden;
+  padding: 1rem;
+}
+
+.content {
+  // width: 515px;
+  flex: 1 1 auto;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
+}
+
+.content :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
+.content :deep(.step-item:first-child .seperator-path) {
+  display: none;
+}
+
+.content :deep(.step-item:not(:first-child) .seperator-path) {
+  width: 455px;
+  height: 0px;
+  border: solid 1px #e4e7ed;
+  background-color: #e4e7ed;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
+:deep(.el-input__suffix) {
+  padding-right: 0px;
+}
+
+:deep(.my-drawer) {
+  background: rgba(0, 0, 0, 0);
+  box-shadow: none;
+}
+</style>

package/src/components/ConnectivityInfo.vue

@@ -211,6 +211,7 @@
         <connectivity-graph
           :entry="entry.featureId[0]"
           :mapServer="envVars.FLATMAPAPI_LOCATION"
+          :sckanVersion="sckanVersion"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -313,6 +314,7 @@ export default {
       timeoutID: undefined,
       graphViewLoaded: false,
       updatedCopyContent: '',
+      sckanVersion: '',
     }
   },
   watch: {
@@ -599,6 +601,7 @@ export default {
     },
   },
   mounted: function () {
+    this.sckanVersion = this.entry['knowledge-source'];
     this.updatedCopyContent = this.getUpdateCopyContent();
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);