@abi-software/map-side-bar 2.12.4 → 2.13.0-acupoint.1

package/src/components/DatasetCard.vue

@@ -12,7 +12,6 @@
             :envVars="envVars"
             :label="label"
             :datasetThumbnail="thumbnail"
-            :dataset-biolucida="biolucidaData"
             :category="currentCategory"
             @card-clicked="galleryClicked"
             @datalink-clicked="galleryDatalinkClicked"
@@ -42,7 +41,6 @@
           <div class="badges-container">
             <BadgesGroup
               :entry="entry"
-              :dataset-biolucida="biolucidaData"
               @categoryChanged="categoryChanged"
             />
           </div>
@@ -60,7 +58,6 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { View as ElIconView } from '@element-plus/icons-vue'
-import { Base64  } from 'js-base64';
 import BadgesGroup from './BadgesGroup.vue'
 import {
   ElButton as Button,
@@ -109,7 +106,6 @@ export default {
       loading: true,
       version: 1,
       lastDoi: undefined,
-      biolucidaData: undefined,
       currentCategory: 'All',
       copyContent: '',
     }
@@ -237,7 +233,6 @@ export default {
             this.discoverId = data.id
             this.version = data.version
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo()
             this.loading = false
             this.updateCopyContent();
           })
@@ -252,31 +247,6 @@ export default {
     lastName: function (fullName) {
       return fullName.split(',')[0]
     },
-    getBiolucidaInfo: function () {
-      const dataset_images = [];
-      const biolucida2DItems = 'biolucida-2d' in this.entry ? this.entry['biolucida-2d'] :[];
-      const biolucida3DItems = 'biolucida-3d' in this.entry ? this.entry['biolucida-3d'] :[];
-      // We use information from SciCrunch to create the sharelink
-      biolucida2DItems.concat(biolucida3DItems).forEach((bObject) => {
-        const image_id = bObject.biolucida?.identifier;
-        if (image_id) {
-          const sourcepkg_id = 'identifier' in bObject ? bObject['identifier'] : "";
-          // The encoded string is in the following format -
-          // ${image_id}-col-${collection_id}, collection id can be any valid collection id
-          // and 260 is used for now.
-          const code = encodeURIComponent(Base64.encode(`${image_id}-col-260`));
-          const share_link = `https://sparc.biolucida.net/image?c=${code}`
-          dataset_images.push({
-            share_link,
-            image_id,
-            sourcepkg_id,
-          });
-        }
-      });
-      if (dataset_images.length > 0) {
-        this.biolucidaData = { dataset_images };
-      }
-    },
     updateCopyContent: function () {
       const contentArray = [];
 

package/src/components/DatasetExplorer.vue

@@ -499,7 +499,6 @@ export default {
             element['abi-contextual-information'].length > 0
               ? element['abi-contextual-information']
               : undefined,
-          segmentation: element['mbf-segmentation'],
           //omex format will be the preferred mimetype
           simulation: element['abi-simulation-omex-file'] ? element['abi-simulation-omex-file'] : element['abi-simulation-file'],
           flatmaps: element['abi-flatmap-file'],

package/src/components/ImageGallery.vue

@@ -40,12 +40,6 @@ export default {
   components: { Gallery },
   mixins: [GalleryHelper, S3Bucket],
   props: {
-    datasetBiolucida: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
     envVars: {
       type: Object,
       default: () => {},
@@ -89,13 +83,10 @@ export default {
       ro: null,
       maxWidth: 3,
       items: {
-        //Use the Images instead for Biolucida Images
-        //"Biolucida Images": [],
         Dataset: [],
         Flatmaps:[],
         Images: [],
         Scaffolds: [],
-        Segmentations: [],
         Simulations: [],
         Videos: [],
         Plots: [],
@@ -128,7 +119,6 @@ export default {
       this.createScaffoldItems()
       this.createSimulationItems()
       this.createPlotItems()
-      this.createSegmentationItems()
       /* Disable these two
       this.createImageItems();
       this.createVideoItems();
@@ -324,47 +314,6 @@ export default {
         })
       }
     },
-    createSegmentationItems: function () {
-      if (this.entry.segmentation) {
-        this.entry.segmentation.forEach((segmentation) => {
-          const id = segmentation.id
-          let filePath = segmentation.dataset.path
-          filePath = filePath.replaceAll(' ', '_')
-          filePath = filePath.replaceAll(',', '_')
-          const prefix = this.envVars.NL_LINK_PREFIX
-          const resource = {
-            share_link: `${prefix}/dataviewer?datasetId=${this.datasetId}&version=${this.datasetVersion}&path=files/${filePath}`,
-          }
-          let action = {
-            label: capitalise(this.label),
-            resource: resource,
-            datasetId: this.datasetId,
-            s3uri: this.entry.s3uri,
-            title: 'View segmentation',
-            type: 'Segmentation',
-          }
-          const thumbnailURL = this.getSegmentationThumbnailURL(
-            this.envVars.API_LOCATION,
-            {
-              id,
-              datasetId: this.datasetId,
-              datasetVersion: this.datasetVersion,
-              segmentationFilePath: filePath,
-              s3Bucket: this.s3Bucket,
-            }
-          )
-          this.items['Segmentations'].push({
-            id,
-            title: baseName(filePath),
-            type: 'Segmentation',
-            thumbnail: thumbnailURL,
-            userData: action,
-            hideType: true,
-            mimetype: 'image/png',
-          })
-        })
-      }
-    },
     createSimulationItems: function () {
       if (this.entry.simulation) {
         this.entry.simulation.forEach((simulation) => {
@@ -496,48 +445,6 @@ export default {
     galleryItems: function () {
       this.resetIndex = false
     },
-    datasetBiolucida: {
-      deep: true,
-      immediate: true,
-      handler: function (biolucidaData) {
-        let items = []
-        if ('dataset_images' in biolucidaData) {
-          items.push(
-            ...Array.from(biolucidaData.dataset_images, (dataset_image) => {
-              const thumbnailURL = this.getThumbnailURLFromBiolucida(
-                this.envVars.API_LOCATION,
-                {
-                  id: dataset_image.image_id,
-                }
-              )
-              const resource = {
-                share_link: dataset_image.share_link,
-                id: dataset_image.image_id,
-                itemId: dataset_image.sourcepkg_id,
-              }
-              let action = {
-                label: capitalise(this.label),
-                resource: resource,
-                datasetId: this.datasetId,
-                title: 'View image',
-                name: capitalise(this.label),
-                type: 'Biolucida',
-              }
-              return {
-                id: dataset_image.image_id,
-                title: `Image`,
-                type: 'Image',
-                thumbnail: thumbnailURL,
-                userData: action,
-                mimetype: 'image/png',
-                hideType: true,
-              }
-            })
-          )
-        }
-        this.items['Images'] = items
-      },
-    },
   },
   mounted() {
     this.ro = new ResizeObserver(this.onResize).observe(this.$el)

package/src/components/SearchFilters.vue

@@ -105,10 +105,10 @@
             trigger="hover"
             popper-class="filter-help-popover"
           >
-            <template #reference>
+            <template v-if="entry.helper" #reference>
               <MapSvgIcon icon="help" class="help" />
             </template>
-            <div>
+            <div v-if="entry.helper">
               <strong>Within categories:</strong> OR
               <br />
               example: {{ entry.helper.within }}
@@ -362,7 +362,7 @@ export default {
       })
 
       // trigger reactivity only once
-      Object.assign(this.options, processedOptions);
+      Object.assign(this.options, processedOptions)
     },
     populateCascader: function () {
       if (this.entry.options) {
@@ -542,6 +542,13 @@ export default {
         })
         return count
       }
+      const found = facet.children.find((item) => {
+        return item.label === "Show all"
+      })
+      if (found) {
+        return facet.children.length - 1
+      }
+
       return facet.children.length
     },
     /**

package/src/components/SideBar.vue

@@ -64,6 +64,15 @@
                 @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="acupointsClicked"
+                @acupoints-result="acupointsResult"
+                v-show="tab.id === activeTabId"
+              />
+            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -92,6 +101,7 @@ 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'
@@ -129,9 +139,8 @@ export default {
     },
     /**
      * The environment variables object with
-     * `API_LOCATION`, `ALGOLIA_KEY`, `ALGOLIA_ID`,
-     * `ALGOLIA_INDEX`, `PENNSIEVE_API_LOCATION`, `BL_SERVER_URL`,
-     * `NL_LINK_PREFIX`, `ROOT_URL`
+     * `API_LOCATION`, `ALGOLIA_KEY`, `ALGOLIA_ID`, `ALGOLIA_INDEX`,
+     * `PENNSIEVE_API_LOCATION`, `BL_SERVER_URL`, `ROOT_URL`
      */
     envVars: {
       type: Object,
@@ -151,6 +160,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.
      */
@@ -204,6 +220,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)
     },
@@ -295,9 +321,6 @@ 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) &&
@@ -407,6 +430,14 @@ 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
      */
@@ -503,6 +534,11 @@ 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" ||
         (
@@ -565,6 +601,16 @@ 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,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']
@@ -19,6 +21,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']

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,
+}