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

package/src/components/SearchFilters.vue

@@ -92,6 +92,7 @@
         </el-cascader>
         <div v-if="showFiltersText" class="filter-default-value">Filters</div>
         <el-popover
+          v-if="entry.helper"
           title="How do filters work?"
           width="250"
           trigger="hover"
@@ -143,7 +144,10 @@ import '@abi-software/svg-sprite/dist/style.css';
 import { AlgoliaClient } from '../algolia/algolia.js';
 import { facetPropPathMapping } from '../algolia/utils.js';
 import EventBus from './EventBus.js';
-import { capitalise } from '../utils/common.js';
+
+const capitalise = function (txt) {
+  return txt.charAt(0).toUpperCase() + txt.slice(1);
+};
 
 const convertReadableLabel = function (original) {
   const name = original.toLowerCase();
@@ -270,22 +274,16 @@ export default {
       return value;
     },
     createChildrenCascaderValue: function (children, facet, facets) {
-      const parentKey = facet.key;
-
       if (children?.length) {
         for (let i = 0; i < children.length; i++) {
           const facetItem = children[i];
           //copy the facets into
           if (children[i].facetPropPath !== 'supportingAwards.consortium.name') {
-            // `sourceNomenclatureLabel` is from cell card explorer filters
-            if (parentKey === 'sourceNomenclatureLabel') {
-              children[i].label = facetItem.label;
-            } else {
-              children[i].label = convertReadableLabel(facetItem.label);
-            }
+            children[i].label = convertReadableLabel(facetItem.label);
           }
-          if (facetItem.key && parentKey.includes('flatmap.connectivity.source.')) {
+          if (facetItem.key && facet.key.includes('flatmap.connectivity.source.')) {
             const childKey = facetItem.key;
+            const parentKey = facet.key;
             const key = childKey.replace(`${parentKey}.`, '');
             children[i].value = this.createCascaderItemValue([facet.label, key]);
           } else {
@@ -343,7 +341,7 @@ export default {
       });
 
       // trigger reactivity only once
-      Object.assign(this.options, processedOptions);
+      Object.assign(this.options, processedOptions)
     },
     populateCascader: function () {
       if (this.entry.options) {
@@ -523,7 +521,14 @@ export default {
         });
         return count;
       }
-      return facet.children.length;
+      const found = facet.children.find((item) => {
+        return item.label === "Show all"
+      })
+      if (found) {
+        return facet.children.length - 1
+      }
+
+      return facet.children.length
     },
     /**
      * When check/uncheck all child items, automatically check "Show all"

package/src/components/SearchHistory.vue

@@ -125,10 +125,23 @@
 
 <script>
 import EventBus from './EventBus.js';
-import { generateUUID } from '../utils/common.js';
 
 const MAX_SEARCH_HISTORY = 12;
 
+function generateUUID() {
+  const arr = new Uint8Array(16);
+  window.crypto.getRandomValues(arr);
+
+  arr[6] = (arr[6] & 0x0f) | 0x40;
+  arr[8] = (arr[8] & 0x3f) | 0x80;
+
+  const hex = Array.from(arr)
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('');
+
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+
 export default {
   name: 'SearchHistory',
   props: {
@@ -304,14 +317,7 @@ export default {
     getParentComponentName: function () {
       const isConnectivity = this.localStorageKey?.indexOf('connectivity') !== -1;
       const isDataset = this.localStorageKey?.indexOf('dataset') !== -1;
-      const isCellCard = this.localStorageKey?.indexOf('cell-card') !== -1;
-      const location = isConnectivity
-        ? 'connectivity'
-        : isDataset
-          ? 'dataset'
-          : isCellCard
-            ? 'cell_card'
-            : '';
+      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : '';
       return location;
     },
     search: function (item) {

package/src/components/SideBar.vue

@@ -65,18 +65,13 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
-            <template v-else-if="tab.type === 'cellCardExplorer' && showCellCards">
-              <CellCardExplorer
-                :ref="'cellCardExplorerTab_' + tab.id"
-                class="sidebar-content-container"
+            <template v-else-if="tab.type === 'acupoints' && acupointsInfoList">
+              <acupoints-info-search
+                :ref="'acupointsTab_' + tab.id"
+                :entry="acupointsInfoList"
+                @on-acupoints-click="acupointsClicked"
+                @acupoints-result="acupointsResult"
                 v-show="tab.id === activeTabId"
-                :envVars="envVars"
-                :activeSpecies="activeSpeciesForEntries"
-                @search-changed="searchChanged(tab.id, $event)"
-                @dataset-search="openDatasetSearchFromCellCard($event)"
-                @connectivity-search="openConnectivitySearch($event.facets, $event.query)"
-                @soma-location-hovered="showSomaLocation"
-                @soma-locations-ready="onSomaLocationsReady"
               />
             </template>
             <template v-else>
@@ -101,14 +96,16 @@
 import {
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
-} from '@element-plus/icons-vue';
-import DatasetExplorer from './DatasetExplorer.vue';
-import EventBus from './EventBus.js';
-import Tabs from './Tabs.vue';
-import AnnotationTool from './AnnotationTool.vue';
-import ConnectivityExplorer from './ConnectivityExplorer.vue';
-import CellCardExplorer from './CellCardExplorer.vue';
-import { removeShowAllFacets } from '../algolia/utils.js';
+} from '@element-plus/icons-vue'
+/* eslint-disable no-alert, no-console */
+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'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -121,7 +118,6 @@ export default {
     ElIconArrowRight,
     AnnotationTool,
     ConnectivityExplorer,
-    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
@@ -131,7 +127,6 @@ export default {
         { 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: 'Cell Card Explorer', id: 4, type: 'cellCardExplorer', closable: false },
       ],
     },
     /**
@@ -164,6 +159,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.
      */
@@ -197,10 +199,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showCellCards: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: function () {
     return {
@@ -209,7 +207,6 @@ export default {
       activeTabId: 1,
       activeAnnotationData: { tabType: 'annotation' },
       activeConnectivityData: { tabType: 'connectivity' },
-      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
@@ -219,10 +216,6 @@ export default {
           search: '',
           filters: [],
         },
-        cellCards: {
-          search: '',
-          filters: [],
-        },
         connectivityEntries: [],
         annotationEntries: [],
         activeTabId: this.activeTabId,
@@ -230,6 +223,16 @@ export default {
     };
   },
   methods: {
+  /**
+     * This event is emitted with a mouse click on acupoint card
+     * @arg data
+     */
+    acupointsClicked: function (data) {
+      this.$emit('acupoints-clicked', data)
+    },
+    acupointsResult: function (data) {
+      this.$emit('acupoints-result', data)
+    },
     onConnectivityCollapseChange: function (data) {
       this.$emit('connectivity-collapse-change', data);
     },
@@ -257,16 +260,6 @@ export default {
         this.activeAnnotationData = data;
       }
     },
-    /**
-     * This event is emitted when the mouse hover on or off a soma location in cell card explorer.
-     * @param name Soma location
-     */
-    showSomaLocation: function (name) {
-      this.$emit('soma-location-hovered', name);
-    },
-    onSomaLocationsReady: function (somaLocations) {
-      this.$emit('soma-locations-ready', somaLocations);
-    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds
@@ -309,6 +302,14 @@ export default {
     toggleDrawer: function () {
       this.drawerOpen = !this.drawerOpen;
     },
+    openAcupointsSearch: function (facets, query) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const acupointTabRef = this.getTabRef(undefined, 'acupoints', true);
+        acupointTabRef.openSearch(facets, query)
+      })
+    },
     openConnectivitySearch: function (facets, query) {
       this.drawerOpen = true;
       // Because refs are in v-for, nextTick is needed here
@@ -331,45 +332,6 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       });
     },
-    openCellCardExplorerSearch: function (filters, query) {
-      this.drawerOpen = true;
-      // Because refs are in v-for, nextTick is needed here
-      this.$nextTick(() => {
-        const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer', true);
-        if (cellCardExplorerTabRef && typeof cellCardExplorerTabRef.openSearch === 'function') {
-          cellCardExplorerTabRef.openSearch(filters, query);
-        }
-      });
-    },
-    openDatasetSearchFromCellCard: function (payload) {
-      if (!payload || typeof payload !== 'object') {
-        this.openSearch([], payload);
-        return;
-      }
-
-      const facets = [];
-      if (payload.species) {
-        facets.push({
-          facet: payload.species,
-          term: 'Species',
-          facetPropPath: 'organisms.primary.species.name',
-        });
-      }
-
-      if (payload.location) {
-        facets.push({
-          facet: payload.location,
-          term: 'Anatomical structure',
-          facetPropPath: 'anatomy.organ.category.name',
-          AND: true,
-        });
-      }
-
-      this.openSearch(facets, '');
-    },
-    /**
-     * Get the ref id of the tab by id and type.
-     */
     getTabRef: function (id, type, switchTab = false) {
       const matchedTab = this.tabEntries.filter((tabEntry) => {
         return (
@@ -504,13 +466,6 @@ export default {
         this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
       }
 
-      // Update cell card explorer state if available
-      const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer');
-      if (cellCardExplorerTabRef) {
-        this.state.cellCards.search = cellCardExplorerTabRef.getSearch();
-        this.state.cellCards.filters = cellCardExplorerTabRef.getFilters();
-      }
-
       // Update connectivity entries if available
       if (this.connectivityEntry && this.connectivityEntry.length > 0) {
         this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
@@ -540,15 +495,11 @@ export default {
     setState: function (state) {
       // if state is not provided or formatted incorrectly, do nothing
       if (!state || !state.dataset || !state.connectivity) return;
-      // Create a deep copy while preserving the original state structure for future extensibility
-      const newState = JSON.parse(JSON.stringify(state));
-      this.state = { ...this.state, ...newState };
-      const datasetFilters = this.state.dataset.filters;
-      const connectivityFilters = this.state.connectivity.filters;
-      const datasetSearch = this.state.dataset.search;
-      const connectivitySearch = this.state.connectivity.search;
-      const cellCardFilters = this.state.cellCards.filters || [];
-      const cellCardSearch = this.state.cellCards.search || '';
+      this.state = JSON.parse(JSON.stringify(state)); // deep copy to avoid reference issues
+      const datasetFilters = state.dataset.filters;
+      const connectivityFilters = state.connectivity.filters;
+      const datasetSearch = state.dataset.search;
+      const connectivitySearch = state.connectivity.search;
 
       if (datasetFilters.length || datasetSearch) {
         this.openSearch(datasetFilters, datasetSearch);
@@ -558,10 +509,6 @@ export default {
         this.openConnectivitySearch(connectivityFilters, connectivitySearch);
       }
 
-      if (cellCardFilters.length || cellCardSearch) {
-        this.openCellCardExplorerSearch(cellCardFilters, cellCardSearch);
-      }
-
       if (state.activeTabId) {
         this.$nextTick(() => {
           const hasTab = this.tabEntries.find((t) => t.id === state.activeTabId);
@@ -584,26 +531,23 @@ export default {
       };
       this.$emit('trackEvent', taggingData);
     },
-    /**
-     * @public
-     * Update the active species to use in filters.
-     * Used by SplitFlow component.
-     * @param activeSpecies
-     */
-    updateActiveSpeciesForEntries: function (activeSpecies) {
-      const speciesEntries = Array.isArray(activeSpecies) ? activeSpecies : [activeSpecies];
-      this.activeSpeciesForEntries = [...new Set(speciesEntries.filter(Boolean))];
-    },
   },
   computed: {
     // This should respect the information provided by the property
     tabEntries: function () {
-      return this.tabs.filter(
-        (tab) =>
-          tab.type === 'datasetExplorer' ||
-          tab.type === 'connectivityExplorer' ||
-          (tab.type === 'annotation' && this.annotationEntry && this.annotationEntry.length > 0) ||
-          (tab.type === 'cellCardExplorer' && this.showCellCards),
+      return this.tabs.filter((tab) =>
+        (tab.type === "acupoints" &&
+          (
+            this.acupointsInfoList &&
+            Object.keys(this.acupointsInfoList).length > 0
+        )) ||
+        tab.type === "datasetExplorer" ||
+        tab.type === "connectivityExplorer" ||
+        (
+          tab.type === "annotation" &&
+          this.annotationEntry &&
+          this.annotationEntry.length > 0
+        )
       );
     },
   },
@@ -662,6 +606,16 @@ export default {
       this.$emit('show-connectivity-graph', 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(

package/src/components/Tabs.vue

@@ -4,7 +4,7 @@
       class="tab"
       v-for="tab in tabs"
       :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId, 'closable-tab': tab.closable }"
+      :class="{ 'active-tab': tab.id == activeId }"
       @click="tabClicked(tab)"
     >
       <span class="tab-title">{{ tab.title }}</span>
@@ -98,23 +98,14 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 0.75rem;
-
-  .closable-tab & {
-    padding-right: 0.25rem;
-  }
+  padding: 0 1rem;
 }
 
 .tab-close-icon {
-  width: 18px !important;
-  height: 18px !important;
-  font-size: 18px !important;
-  margin-right: 4px !important;
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  padding-right: 4px !important;
   color: $app-primary-color !important;
-  border-radius: 2px;
-
-  &:hover {
-    background-color: rgba($app-primary-color, 0.15) !important;
-  }
 }
 </style>

package/src/components.d.ts

@@ -11,10 +11,10 @@ export {}
 /* prettier-ignore */
 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']
-    CellCard: typeof import('./components/CellCard.vue')['default']
-    CellCardExplorer: typeof import('./components/CellCardExplorer.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
@@ -26,6 +26,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']
@@ -50,7 +52,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
-    IconOpenExternal: typeof import('./components/icons/IconOpenExternal.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']

package/src/services/flatmapKnowledge.js

@@ -0,0 +1,94 @@
+async function getReferenceConnectivitiesFromStorage(resource) {
+  const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
+
+  if (flatmapKnowledgeRaw) {
+    const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
+    const dataWithRefs = flatmapKnowledge.filter((x) => x.references && x.references.length);
+    const foundData = dataWithRefs.filter((x) => x.references.includes(resource));
+
+    if (foundData.length) {
+      const featureIds = foundData.map((x) => x.id);
+      return featureIds;
+    }
+  }
+  return [];
+}
+
+async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries) {
+  const knowledgeSource = getKnowledgeSource(mapImp);
+  const sql = `select knowledge from knowledge
+    where source="${knowledgeSource}" and
+    knowledge like "%${resource}%" order by source desc`;
+  console.log(sql)
+  const response = await flatmapQueries.flatmapQuery(sql);
+  const mappedData = response.values.map((x) => x[0]);
+  const parsedData = mappedData.map((x) => JSON.parse(x));
+  const featureIds = parsedData.map((x) => x.id);
+  return featureIds;
+}
+
+function getKnowledgeSource(mapImp) {
+  let mapKnowledgeSource = '';
+  if (mapImp.provenance?.connectivity) {
+    const sckanProvenance = mapImp.provenance.connectivity;
+    if ('knowledge-source' in sckanProvenance) {
+      mapKnowledgeSource = sckanProvenance['knowledge-source'];
+    } else if ('npo' in sckanProvenance) {
+      mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
+    }
+  }
+
+  return mapKnowledgeSource;
+}
+
+function loadAndStoreKnowledge(mapImp, flatmapQueries) {
+  const knowledgeSource = getKnowledgeSource(mapImp);
+  const sql = `select knowledge from knowledge
+    where source="${knowledgeSource}"
+    order by source desc`;
+  const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
+
+  if (!flatmapKnowledge) {
+    flatmapQueries.flatmapQuery(sql).then((response) => {
+      const mappedData = response.values.map(x => x[0]);
+      const parsedData = mappedData.map(x => JSON.parse(x));
+      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
+      updateFlatmapKnowledgeCache();
+    });
+  }
+}
+
+function updateFlatmapKnowledgeCache() {
+  const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
+  const now = new Date();
+  const expiry = now.getTime() + CACHE_LIFETIME;
+
+  sessionStorage.setItem('flatmap-knowledge-expiry', expiry);
+}
+
+function removeFlatmapKnowledgeCache() {
+  const keys = [
+    'flatmap-knowledge',
+    'flatmap-knowledge-expiry',
+  ];
+  keys.forEach((key) => {
+    sessionStorage.removeItem(key);
+  });
+}
+
+function refreshFlatmapKnowledgeCache() {
+  const expiry = sessionStorage.getItem('flatmap-knowledge-expiry');
+  const now = new Date();
+
+  if (now.getTime() > expiry) {
+    removeFlatmapKnowledgeCache();
+  }
+}
+
+export {
+  getReferenceConnectivitiesFromStorage,
+  getReferenceConnectivitiesByAPI,
+  loadAndStoreKnowledge,
+  getKnowledgeSource,
+  refreshFlatmapKnowledgeCache,
+}