Add related datasets to file page

components/Gallery/Gallery.vue

@@ -23,6 +23,8 @@
                 :width="cardWidth" @card-clicked="cardClicked" />
               <component v-else-if="galleryItemType === 'inProgressDatasets'" :is="galleryItemComponent" :width="cardWidth"
                 :key="item" :item="item" />
+              <component v-else-if="galleryItemType === 'relatedDatasets'" :is="galleryItemComponent" :width="cardWidth"
+                :key="item.id" :item="item" />
             </template>
           </span>
         </template>
@@ -43,6 +45,7 @@ import DatasetCard from '~/components/Gallery/GalleryItems/DatasetCard.vue'
 import FileViewerCard from '~/components/Gallery/GalleryItems/FileViewerCard.vue'
 import FeaturedDataCard from '~/components/Gallery/GalleryItems/FeaturedDataCard.vue'
 import PennsieveDatasetCard from '~/components/Gallery/GalleryItems/PennsieveDatasetCard.vue'
+import RelatedDatasetCard from '~/components/Gallery/GalleryItems/RelatedDatasetCard.vue'
 
 import { defaultTo } from 'ramda'
 import { ref } from 'vue'
@@ -54,7 +57,8 @@ const galleryItemComponents = {
   datasets: DatasetCard,
   fileViewer: FileViewerCard,
   featuredData: FeaturedDataCard,
-  inProgressDatasets: PennsieveDatasetCard
+  inProgressDatasets: PennsieveDatasetCard,
+  relatedDatasets: RelatedDatasetCard
 }
 
 function convertRemToPixels(rem) {
@@ -66,7 +70,7 @@ function convertRemToPixels(rem) {
 
 export default {
   name: 'Gallery',
-  components: { DatasetCard, ResourceCard, MetricsCard, HighlightCard, FileViewerCard, FeaturedDataCard },
+  components: { DatasetCard, ResourceCard, MetricsCard, HighlightCard, FileViewerCard, FeaturedDataCard, RelatedDatasetCard },
   props: {
     items: {
       type: Array,

components/Gallery/GalleryItems/RelatedDatasetCard.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-card :style="{ border: 'none', maxWidth: width + 'rem' }" class="card">
+    <el-row :gutter="20">
+      <img class="banner-image" :src="datasetBanner" />
+      <!--<nuxt-link
+        class="dataset-name"
+        :to="{
+          name: 'datasets-datasetId',
+          params: {
+            datasetId: datasetId
+          }
+        }"
+      >
+        {{ datasetTitle }}
+      </nuxt-link>-->
+      <div class="description-container mb-4">
+        {{ datasetDescription }}
+      </div>
+      <nuxt-link
+        :to="{
+          name: 'datasets-datasetId',
+          params: {
+            datasetId: datasetId
+          },
+          query: {
+            datasetDetailsTab: 'images'
+          }
+        }"
+      >
+        <el-button>
+          View Gallery
+        </el-button>
+      </nuxt-link>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+
+import { propOr } from 'ramda'
+
+export default {
+  name: 'RelatedDatasetCard',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    },
+    width: {
+      type: Number,
+      default: 68
+    },
+  },
+  computed: {
+    datasetId() {
+      return propOr('', 'id', this.item)
+    },
+    datasetTitle() {
+      return propOr('', 'name', this.item)
+    },
+    datasetDescription() {
+      return propOr('', 'description', this.item)
+    },
+    datasetBanner() {
+      return propOr('', 'banner', this.item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  background-color: transparent;
+  position: relative;
+  cursor: default;
+  text-align: left;
+}
+.banner-image {
+  display: block;
+  width: 100%;
+  max-height: 150px;
+  object-fit: contain;
+}
+.dataset-name {
+  overflow-wrap: anywhere;
+}
+.description-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 6;
+}
+</style>

pages/datasets/file/[datasetId]/[datasetVersion]/index.vue

@@ -1,6 +1,6 @@
 <template>
   <client-only>
-    <div class="pb-32">
+    <div class="pb-32 page-data">
       <breadcrumb :breadcrumb="breadcrumb" :title="fileName" />
       <div class="container">
         <h1 hidden>File viewer for {{ file.path }}</h1>
@@ -25,6 +25,18 @@
         <file-viewer-metadata v-if="!hasViewer" :datasetInfo="datasetInfo" :file="file"
           @download-file="executeDownload" />
       </div>
+      <div v-if="hasRelatedDatasets" class="container">
+        <div class="subpage">
+          <div class="heading3 mb-16">Find related images from other datasets
+            <sparc-tooltip content="Find images among other datasets that share the same award id" placement="bottom-center">
+              <template #item>
+                <svgo-icon-help class="help-icon"/>
+              </template>
+            </sparc-tooltip>
+          </div>
+          <gallery galleryItemType="relatedDatasets" :items="relatedDatasets" :cardWidth="12" />
+        </div>
+      </div>
     </div>
   </client-only>
 </template>
@@ -41,6 +53,7 @@ import FileViewerMetadata from '@/components/ViewersMetadata/FileViewerMetadata.
 import FormatDate from '@/mixins/format-date'
 import FetchPennsieveFile from '@/mixins/fetch-pennsieve-file'
 import FileDetails from '@/mixins/file-details'
+import Gallery from '@/components/Gallery/Gallery.vue'
 
 import { extractS3BucketName } from '@/utils/common'
 
@@ -54,7 +67,8 @@ export default {
     SegmentationViewer,
     PlotViewer,
     VideoViewer,
-    FileViewerMetadata
+    FileViewerMetadata,
+    Gallery
   },
 
   mixins: [
@@ -67,7 +81,7 @@ export default {
     const router = useRouter()
     const route = useRoute()
     const config = useRuntimeConfig()
-    const { $axios, $pennsieveApiClient } = useNuxtApp()
+    const { $axios, $pennsieveApiClient, $algoliaClient } = useNuxtApp()
     const url = `${config.public.discover_api_host}/datasets/${route.params.datasetId}`
     var datasetUrl = route.params.datasetVersion ? `${url}/versions/${route.params.datasetVersion}` : url
     let datasetInfo = {}
@@ -198,6 +212,35 @@ export default {
       hasPlotViewer ? 'plotViewer' :
       hasVideoViewer ? 'videoViewer' : ''
 
+    const algoliaIndex = await $algoliaClient.initIndex(config.public.ALGOLIA_INDEX)
+    const { supportingAwards } = await algoliaIndex.getObject(route.params.datasetId)
+    const awardIds = supportingAwards.map(award => award.identifier).filter(identifier => identifier != undefined)
+    let relatedDatasets = []
+    try {
+      relatedDatasets = await Promise.all(
+        awardIds.map(async (awardId) => {
+          const { data } = await $axios.get(`${config.public.portal_api}/project/${awardId}`)
+          return data
+        })
+      )
+      relatedDatasets = relatedDatasets.flat()
+    } catch (error) {
+        console.error('Error fetching related datasets:', error)
+    }
+    relatedDatasets = relatedDatasets.map((dataset) => {
+      const datasetId = propOr('', 'objectID', dataset)
+      const datasetName = pathOr('', ['pennsieve', 'name'], dataset)
+      const datasetDescription = pathOr('', ['pennsieve', 'description'], dataset)
+      const datasetBanner = pathOr('', ['pennsieve', 'banner', 'uri'], dataset)
+
+      return {
+        'name': datasetName,
+        'description': datasetDescription,
+        'id': datasetId,
+        'banner': datasetBanner
+      }
+    })
+
     return {
       biolucidaData,
       videoData,
@@ -215,7 +258,8 @@ export default {
       signedUrl,
       packageType,
       activeTabId,
-      datasetInfo
+      datasetInfo,
+      relatedDatasets
     }
   },
 
@@ -258,6 +302,9 @@ export default {
     readme: function() {
       return propOr('', 'readme', this.datasetInfo)
     },
+    hasRelatedDatasets() {
+      return !isEmpty(this.relatedDatasets)
+    },
     breadcrumb: function() {
       return [
         {
@@ -388,11 +435,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import 'sparc-design-system-components-2/src/assets/_variables.scss';
+
+.page-data {
+  background-color: $background;
+}
 .help-link {
   float: right;
   @media screen and (max-width: 29rem) {
     float: none;
   }
 }
-</style>
+.help-icon {
+  color: $purple;
+    height: 1.5rem;
+    width: 1.5rem;
+}
+</style>