@abi-software/map-side-bar 2.10.4 → 2.10.5

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.10.4",
+  "version": "2.10.5",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ABI-Software/map-sidebar.git"
+  },
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.2.0",
-    "@abi-software/map-utilities": "1.7.2",
+    "@abi-software/map-utilities": "1.7.4",
     "@abi-software/svg-sprite": "^1.0.2",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/App.vue

@@ -147,7 +147,7 @@ export default {
         y: 0,
       },
       createDataSet: false,
-      sckanVersion: 'sckan-2024-09-21-npo',
+      sckanVersion: 'sckan-2024-09-21',
       flatmapKnowledge: [],
       connectivityKnowledge: [],
       query: '',
@@ -164,7 +164,7 @@ export default {
       const mappedData = response.values.map(x => x[0]);
       const knowledge = mappedData.map(x => JSON.parse(x));
       this.flatmapKnowledge = knowledge.filter((item) => {
-        if (item.source === this.sckanVersion && item.connectivity?.length) return true;
+        if (item.connectivity?.length) return true;
         return false;
       });
       this.connectivityKnowledge = this.flatmapKnowledge;

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

@@ -42,10 +42,10 @@ export const facetPropPathMapping = [
     facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
   },
   {
-    label: 'Funding Program',
-    id: 'pennsieve.organization',
-    facetPropPath: 'pennsieve.organization.name',
-    facetSubpropPath: 'pennsieve.organization.subcategory.name'
+    label: 'Consortia',
+    id: 'supportingAwards.consortium',
+    facetPropPath: 'supportingAwards.consortium.name',
+    facetSubpropPath: 'supportingAwards.consortium.subcategory.name'
   },
 ]
 
@@ -55,7 +55,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',
+  'supportingAwards.consortium.name': 'Consortia',
   'item.types.name': 'Data type',
 }
 

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/BadgesGroup.vue

@@ -61,7 +61,7 @@ export default {
     },
     addSimulationsToCategories: function (array) {
       if (array && array.length > 0) {
-        const size = 1
+        const size = array.length
         this.categories['Simulations'] = { size }
         this.categories['All'].size += size
       }

package/src/components/ConnectivityExplorer.vue

@@ -518,7 +518,7 @@ export default {
 
       EventBus.emit('trackEvent', {
         'event_name': `portal_maps_connectivity_perPage`,
-        'category': val,
+        'category': val + '',
         'location': 'map_sidebar_connectivity',
       });
 

package/src/components/SearchFilters.vue

@@ -291,7 +291,7 @@ export default {
       if (children?.length) {
         children.forEach((facetItem, i) => {
           //copy the facets into
-          if (children[i].facetPropPath !== 'pennsieve.organization.name') {
+          if (children[i].facetPropPath !== 'supportingAwards.consortium.name') {
             children[i].label = convertReadableLabel(
               facetItem.label
             )

package/src/components/SideBar.vue

@@ -306,6 +306,9 @@ export default {
       const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
       const tabRef = tabInfo[0].type + 'Tab_' + tabInfo[0].id;
       if (switchTab) this.setActiveTab({ id: tabInfo[0].id, type: tabInfo[0].type });
+      if (!this.$refs[tabRef] || this.$refs[tabRef].length === 0) {
+        return null;
+      }
       return this.$refs[tabRef][0];
     },
     /**
@@ -414,15 +417,31 @@ export default {
       EventBus.emit('close-connectivity');
     },
     updateState: function () {
+      this.state.activeTabId = this.activeTabId;
+
+      // Update dataset explorer state if available
       const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer');
+      if (datasetExplorerTabRef) {
+        this.state.dataset.search = datasetExplorerTabRef.getSearch();
+        this.state.dataset.filters = removeShowAllFacets(datasetExplorerTabRef.getFilters());
+      }
+
+      // Update connectivity explorer state if available
       const connectivityExplorerTabRef = this.getTabRef(undefined, 'connectivityExplorer');
-      this.state.activeTabId = this.activeTabId;
-      this.state.dataset.search = datasetExplorerTabRef.getSearch();
-      this.state.dataset.filters = removeShowAllFacets(datasetExplorerTabRef.getFilters());
-      this.state.connectivity.search = connectivityExplorerTabRef.getSearch();
-      this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
-      this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
-      this.state.annotationEntries = this.annotationEntry.map((entry) => entry.models);
+      if (connectivityExplorerTabRef) {
+        this.state.connectivity.search = connectivityExplorerTabRef.getSearch();
+        this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
+      }
+
+      // Update connectivity entries if available
+      if (this.connectivityEntry && this.connectivityEntry.length > 0) {
+        this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
+      }
+
+      // Update annotation entries if available
+      if (this.annotationEntry && this.annotationEntry.length > 0) {
+        this.state.annotationEntries = this.annotationEntry.map((entry) => entry.models);
+      }
     },
     /**
      * This function returns the current state of the sidebar

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