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

package/src/components/DatasetCard.vue

@@ -60,6 +60,7 @@
 <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,
@@ -236,7 +237,7 @@ export default {
             this.discoverId = data.id
             this.version = data.version
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo(this.discoverId)
+            this.getBiolucidaInfo()
             this.loading = false
             this.updateCopyContent();
           })
@@ -251,15 +252,30 @@ export default {
     lastName: function (fullName) {
       return fullName.split(',')[0]
     },
-    getBiolucidaInfo: function (id) {
-      let apiLocation = this.envVars.API_LOCATION
-      let endpoint = apiLocation + 'image_search/' + id
-      // Add parameters if we are sent them
-      fetch(endpoint)
-        .then((response) => response.json())
-        .then((data) => {
-          if (data.status == 'success') this.biolucidaData = data
-        })
+    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/ImageGallery.vue

@@ -33,7 +33,7 @@ import GalleryHelper from '@abi-software/gallery/src/mixins/GalleryHelpers.js'
 import Gallery from "@abi-software/gallery";
 import "@abi-software/gallery/dist/style.css";
 //provide the s3Bucket related methods and data.
-import S3Bucket from '../mixins/S3Bucket.vue'
+import S3Bucket from '../mixins/S3Bucket.vue';
 
 export default {
   name: 'ImageGallery',

package/src/components/SearchFilters.vue

@@ -241,9 +241,12 @@ export default {
 
               // populate second level of options
               this.options[i].children.forEach((facetItem, j) => {
-                this.options[i].children[j].label = convertReadableLabel(
-                  facetItem.label
-                )
+                // Format labels except funding program
+                if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
+                  this.options[i].children[j].label = convertReadableLabel(
+                    facetItem.label
+                  )
+                }
                 this.options[i].children[j].value =
                   this.createCascaderItemValue(facet.label, facetItem.label)
                 if (

package/src/components/SideBar.vue

@@ -53,16 +53,24 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
+            <template v-else-if="tab.type === 'acupoints' && acupointsInfoList">
+              <acupoints-info-search
+                :ref="'acupointsTab_' + tab.id"
+                :entry="acupointsInfoList"
+                @on-acupoints-click="acupointClicked"
+                v-show="tab.id === activeTabId"
+              />
+            </template>
             <template v-else>
-            <SidebarContent
-              class="sidebar-content-container"
-              v-show="tab.id === activeTabId"
-              :contextCardEntry="tab.contextCard"
-              :envVars="envVars"
-              :ref="'searchTab_' + tab.id"
-              @search-changed="searchChanged(tab.id, $event)"
-              @hover-changed="hoverChanged($event)"
-            />
+              <SidebarContent
+                class="sidebar-content-container"
+                v-show="tab.id === activeTabId"
+                :contextCardEntry="tab.contextCard"
+                :envVars="envVars"
+                :ref="'searchTab_' + tab.id"
+                @search-changed="searchChanged(tab.id, $event)"
+                @hover-changed="hoverChanged($event)"
+              />
             </template>
           </template>
         </div>
@@ -81,6 +89,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
+import AcupointsInfoSearch from './AcupointsInfoSearch.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
 
@@ -149,6 +158,13 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * The acupoints info to show in sidebar.
+     */
+    acupointsInfoList: {
+      type: Object,
+      default: null,
+    },
     /**
      * The annotation data to show in sidebar.
      */
@@ -174,6 +190,13 @@ export default {
     }
   },
   methods: {
+  /**
+     * This event is emitted with a mouse click on acupoint card
+     * @arg data
+     */
+    acupointClicked: function (data) {
+      this.$emit('acupoints-clicked', data)
+    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
@@ -224,6 +247,22 @@ export default {
         searchTabRef.openSearch(facets, query);
       })
     },
+    getFirstTabRefIdByType: function(type) {
+      const tabObj = this.activeTabs.find((tab) => tab.type === type);
+      if (tabObj) {
+        let refIdPrefix = 'searchTab_'; // default to search tab
+        if (type === 'connectivity') {
+          refIdPrefix = 'connectivityTab_';
+        } else if (type === 'annotation') {
+          refIdPrefix = 'annotationTab_';
+        } else if (type === 'acupoints') {
+          refIdPrefix = 'acupointsTab_';
+        }
+        const tabRefId = refIdPrefix + tabObj.id;
+        return tabRefId;
+      }
+      return "";
+    },
     /**
      * Get the tab object by tab id and type.
      * If not found, return the first available tab.
@@ -244,6 +283,8 @@ export default {
         refIdPrefix = 'connectivityTab_';
       } else if (type === 'annotation') {
         refIdPrefix = 'annotationTab_';
+      } else if (type === 'acupoints') {
+        refIdPrefix = 'acupointsTab_';
       }
       const tabObj = this.getTabByIdAndType(id, type);
       const tabRefId = refIdPrefix + tabObj.id;
@@ -313,18 +354,38 @@ export default {
     updateConnectivityGraphError: function (errorInfo) {
       EventBus.emit('connectivity-graph-error', errorInfo);
     },
+    openAcupointsSearch: function (term) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const tabRefId = this.getFirstTabRefIdByType("acupoints");
+        if (tabRefId && this.$refs[tabRefId]) {
+          const tab = this.$refs[tabRefId][0];
+          tab.search(term);
+        }
+      })
+    },
   },
   computed: {
     activeTabs: function() {
-      const tabs = [
-        { id: 1, title: 'Search', type: 'search' }
-      ];
-      if (this.connectivityInfo) {
-        tabs.push({ id: 2, title: 'Connectivity', type: 'connectivity' });
-      }
-      if (this.annotationEntry && Object.keys(this.annotationEntry).length > 0) {
-        tabs.push({ id: 3, title: 'Annotation', type: 'annotation' });
-      }
+      const tabs = []
+      this.tabs.forEach((tab) => {
+        if (tab.type === "search") {
+          tabs.push(tab)
+        } else if (tab.type === "connectivity") {
+          if (this.connectivityInfo) {
+            tabs.push(tab);
+          }
+        } else if (tab.type === "annotation") {
+          if (this.annotationEntry && Object.keys(this.annotationEntry).length > 0) {
+            tabs.push(tab);
+          }
+        } else if (tab.type === "acupoints") {
+          if (this.acupointsInfoList && Object.keys(this.acupointsInfoList).length > 0) {
+            tabs.push(tab);
+          }
+        }
+      })
       return tabs;
     },
   },
@@ -377,9 +438,14 @@ export default {
       this.$emit('actionClick', payLoad);
     })
 
-    // Get available anatomy facets for the connectivity info
-    EventBus.on('available-facets', (payLoad) => {
-        this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
+    // 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);
     })
 
   },

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']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']

package/src/exampleConnectivityInput.js

@@ -285,5 +285,6 @@ export default {
         "Homo sapiens",
         "Canis lupus familiaris",
         "Domestic Pig"
-    ]
-}
+    ],
+    "knowledge-source": "sckan-2024-03-26-npo",
+}