IQSS · GPortas · Nov 3, 2023 · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/dataset/domain/models/Dataset.ts b/src/dataset/domain/models/Dataset.ts
@@ -288,7 +288,8 @@ export class Dataset {
     public readonly locks: DatasetLock[],
     public readonly hasValidTermsOfAccess: boolean,
     public readonly isValid: boolean,
-    public readonly isReleased: boolean
+    public readonly isReleased: boolean,
+    public readonly thumbnail?: string
   ) {}
 
   public getTitle(): string {
@@ -333,7 +334,8 @@ export class Dataset {
       public readonly hasValidTermsOfAccess: boolean,
       public readonly isValid: boolean,
       public readonly isReleased: boolean,
-      public readonly privateUrl?: string
+      public readonly privateUrl?: string,
+      public readonly thumbnail?: string
     ) {
       this.withLabels()
       this.withAlerts()
@@ -428,7 +430,8 @@ export class Dataset {
         this.locks,
         this.hasValidTermsOfAccess,
         this.isValid,
-        this.isReleased
+        this.isReleased,
+        this.thumbnail
       )
     }
   }

diff --git a/src/dataset/infrastructure/mappers/JSDatasetMapper.ts b/src/dataset/infrastructure/mappers/JSDatasetMapper.ts
@@ -16,30 +16,6 @@ import {
   MetadataBlockName
 } from '../../domain/models/Dataset'
 
-/*
-
-  static Builder = class {
-    public readonly labels: DatasetLabel[] = []
-    public readonly alerts: DatasetAlert[] = []
-
-    constructor(
-      public readonly persistentId: string,
-      public readonly version: DatasetVersion,
-      public readonly citation: string,
-      public readonly summaryFields: DatasetMetadataBlock[],
-      public readonly license: DatasetLicense = defaultLicense,
-      public readonly metadataBlocks: DatasetMetadataBlocks,
-      public readonly permissions: DatasetPermissions,
-      public readonly locks: DatasetLock[],
-      public readonly hasValidTermsOfAccess: boolean,
-      public readonly isValid: boolean,
-      public readonly isReleased: boolean,
-      public readonly privateUrl?: string
-    ) {
-      this.withLabels()
-      this.withAlerts()
-    }
- */
 export class JSDatasetMapper {
   static toDataset(
     jsDataset: JSDataset,
@@ -72,7 +48,8 @@ export class JSDatasetMapper {
       true, // TODO Connect with dataset hasValidTermsOfAccess
       true, // TODO Connect with dataset isValid
       !!jsDataset.versionInfo.releaseTime, // TODO Connect with dataset isReleased,
-      privateUrl
+      privateUrl,
+      undefined // TODO: get dataset thumbnail from Dataverse https://github.com/IQSS/dataverse-frontend/issues/203
     ).build()
   }
 

diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx
@@ -44,7 +44,12 @@ export function Dataset({ fileRepository }: DatasetProps) {
           <div className={styles.container}>
             <Row>
               <Col sm={9}>
-                <DatasetCitation citation={dataset.citation} version={dataset.version} />
+                <DatasetCitation
+                  title={dataset.getTitle()}
+                  thumbnail={dataset.thumbnail}
+                  citation={dataset.citation}
+                  version={dataset.version}
+                />
               </Col>
               <Col sm={3}>
                 <DatasetActionButtons dataset={dataset} />

diff --git a/src/sections/dataset/dataset-citation/CitationThumbnail.tsx b/src/sections/dataset/dataset-citation/CitationThumbnail.tsx
@@ -0,0 +1,21 @@
+import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset'
+import styles from './DatasetCitation.module.scss'
+import { Icon, IconName } from '@iqss/dataverse-design-system'
+
+interface CitationThumbnailProps {
+  thumbnail?: string
+  title: string
+  publishingStatus: DatasetPublishingStatus
+}
+
+export function CitationThumbnail({ thumbnail, title, publishingStatus }: CitationThumbnailProps) {
+  if (thumbnail && publishingStatus !== DatasetPublishingStatus.DEACCESSIONED) {
+    return <img className={styles['preview-image']} src={thumbnail} alt={title} />
+  }
+
+  return (
+    <div className={styles.icon}>
+      <Icon name={IconName.DATASET} />
+    </div>
+  )
+}
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
@@ -1,10 +1,10 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
+min-height: 150px;
     margin: 0.5rem 0;
     padding: 10px;
     border: 1px solid $dv-info-border-color;
-
 }
 
 .citation {
@@ -23,6 +23,13 @@
     line-height: 1.1;
 }
 
+.preview-image {
+    width: 100%;
+    max-width: 140px;
+    height: auto;
+    max-height: 140px;
+}
+
 .row {
     margin-right: -15px;
     margin-left: -15px;

diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
@@ -1,15 +1,18 @@
-import { Col, IconName, Icon, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system'
+import { Col, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system'
 import styles from './DatasetCitation.module.scss'
 import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import parse from 'html-react-parser'
+import { CitationThumbnail } from './CitationThumbnail'
 
 interface DatasetCitationProps {
+  thumbnail?: string
+  title: string
   citation: string
   version: DatasetVersion
 }
 
-export function DatasetCitation({ citation, version }: DatasetCitationProps) {
+export function DatasetCitation({ thumbnail, title, citation, version }: DatasetCitationProps) {
   const { t } = useTranslation('dataset')
   return (
     <>
@@ -20,10 +23,12 @@ export function DatasetCitation({ citation, version }: DatasetCitationProps) {
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={3}>
-            <div className={styles.icon}>
-              <Icon name={IconName.DATASET} />
-            </div>
+          <Col sm={2}>
+            <CitationThumbnail
+              thumbnail={thumbnail}
+              title={title}
+              publishingStatus={version.publishingStatus}
+            />
           </Col>
           <Col>
             <Row>
@@ -48,7 +53,7 @@ export function DatasetCitation({ citation, version }: DatasetCitationProps) {
   )
 }
 
-function CitationDescription({ citation, version }: DatasetCitationProps) {
+function CitationDescription({ citation, version }: { citation: string; version: DatasetVersion }) {
   const citationAsReactElement = parse(citation)
 
   return (

diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
 import { DatasetCitation } from '../../../sections/dataset/dataset-citation/DatasetCitation'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { faker } from '@faker-js/faker'
 import { DatasetMother } from '../../../../tests/component/dataset/domain/models/DatasetMother'
 
 const meta: Meta<typeof DatasetCitation> = {
@@ -20,7 +21,30 @@ export const Default: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
+      </div>
+    )
+  }
+}
+
+export const WithThumbnail: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
+    console.log(dataset)
+    return (
+      <div>
+        <br></br>
+        <br></br>
+        <DatasetCitation
+          title={dataset.getTitle()}
+          thumbnail={dataset.thumbnail}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -47,7 +71,11 @@ export const DraftVersion: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -76,7 +104,11 @@ export const Deaccessioned: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -96,7 +128,11 @@ export const Anonymized: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }

diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts
@@ -287,6 +287,8 @@ export class DatasetMother {
       hasValidTermsOfAccess: faker.datatype.boolean(),
       isValid: faker.datatype.boolean(),
       isReleased: faker.datatype.boolean(),
+      thumbnail: undefined,
+      privateUrl: undefined,
       ...props
     }
 
@@ -301,7 +303,9 @@ export class DatasetMother {
       dataset.locks,
       dataset.hasValidTermsOfAccess,
       dataset.isValid,
-      dataset.isReleased
+      dataset.isReleased,
+      dataset.privateUrl,
+      dataset.thumbnail
     ).build()
   }
 

diff --git a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts b/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts
@@ -45,7 +45,8 @@ const jsDataset = {
     name: 'CC0 1.0',
     uri: 'http://creativecommons.org/publicdomain/zero/1.0',
     iconUri: 'https://licensebuttons.net/p/zero/1.0/88x31.png'
-  }
+  },
+  thumbnail: undefined
 }
 const citation =
   'Finch, Fiona, 2023, "Darwin\'s Finches", <a href="https://doi.org/10.5072/FK2/B4B2MJ" target="_blank">https://doi.org/10.5072/FK2/B4B2MJ</a>, Root, DRAFT VERSION'
@@ -120,7 +121,8 @@ const expectedDataset = {
   locks: [],
   hasValidTermsOfAccess: true,
   isValid: true,
-  isReleased: false
+  isReleased: false,
+  thumbnail: undefined
 }
 const expectedDatasetAlternateVersion = {
   persistentId: 'doi:10.5072/FK2/B4B2MJ',
@@ -203,7 +205,8 @@ const expectedDatasetAlternateVersion = {
     canManageFilesPermissions: true,
     canPublishDataset: true,
     canUpdateDataset: true
-  }
+  },
+  thumbnail: undefined
 }
 describe('JS Dataset Mapper', () => {
   it('maps jsDataset model to the domain Dataset model', () => {

diff --git a/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx
@@ -0,0 +1,39 @@
+import { DatasetPublishingStatus } from '../../../../../src/dataset/domain/models/Dataset'
+import { CitationThumbnail } from '../../../../../src/sections/dataset/dataset-citation/CitationThumbnail'
+
+describe('CitationThumbnail', () => {
+  it('renders the dataset icon when there is no thumbnail', () => {
+    cy.customMount(
+      <CitationThumbnail
+        title="Dataset title"
+        publishingStatus={DatasetPublishingStatus.RELEASED}
+      />
+    )
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset icon when the dataset is deaccessioned', () => {
+    cy.customMount(
+      <CitationThumbnail
+        title="Dataset title"
+        thumbnail="https://example.com/image.png"
+        publishingStatus={DatasetPublishingStatus.DEACCESSIONED}
+      />
+    )
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => {
+    cy.customMount(
+      <CitationThumbnail
+        thumbnail="https://example.com/image.png"
+        title="Dataset title"
+        publishingStatus={DatasetPublishingStatus.RELEASED}
+      />
+    )
+
+    cy.findByRole('img', { name: 'Dataset title' }).should('exist')
+  })
+})