add file tags, tabular variables, and observation into the item card information

src/files/domain/models/FileItemTypePreview.ts

@@ -1,5 +1,6 @@
 import { CollectionItemType } from '../../../collection/domain/models/CollectionItemType'
 import { PublicationStatus } from '../../../shared/core/domain/models/PublicationStatus'
+import { FileLabel } from './FileMetadata'
 
 export interface FileItemTypePreview {
   type: CollectionItemType.FILE
@@ -21,6 +22,9 @@ export interface FileItemTypePreview {
   datasetCitation: string
   publicationStatuses: PublicationStatus[]
   releaseOrCreateDate: Date
+  variables?: number
+  observations?: number
+  tags?: FileLabel[]
   restricted: boolean
   canDownloadFile: boolean
 }

src/files/domain/models/FileMetadata.ts

@@ -99,8 +99,8 @@ export class FileEmbargo {
 }
 
 export interface FileTabularData {
-  variablesCount: number
-  observationsCount: number
+  variables: number
+  observations: number
   unf?: string
 }
 

src/files/infrastructure/mappers/JSFileItemTypePreviewMapper.ts

@@ -1,8 +1,20 @@
 import { FilePreview as JSFilePreview } from '@iqss/dataverse-client-javascript'
 import { FileItemTypePreview } from '../../domain/models/FileItemTypePreview'
+import { FileLabelType } from '@/files/domain/models/FileMetadata'
+import { FileLabel } from '@/files/domain/models/FileMetadata'
 
 export class JSFileItemTypePreviewMapper {
   static toFileItemTypePreview(jsFilePreview: JSFilePreview): FileItemTypePreview {
+    const tabularTagsAsLabels: FileLabel[] = (jsFilePreview.tabularTags || []).map((tag) => ({
+      type: FileLabelType.TAG,
+      value: tag
+    }))
+
+    const categoriesAsLabels: FileLabel[] = (jsFilePreview.categories || []).map((category) => ({
+      type: FileLabelType.CATEGORY,
+      value: category
+    }))
+
     return {
       type: jsFilePreview.type,
       id: jsFilePreview.fileId,
@@ -23,6 +35,9 @@ export class JSFileItemTypePreviewMapper {
       datasetCitation: jsFilePreview.datasetCitation,
       publicationStatuses: jsFilePreview.publicationStatuses,
       releaseOrCreateDate: jsFilePreview.releaseOrCreateDate,
+      tags: [...categoriesAsLabels, ...tabularTagsAsLabels] as FileLabel[],
+      variables: jsFilePreview.variables,
+      observations: jsFilePreview.observations,
       restricted: jsFilePreview.restricted,
       canDownloadFile: jsFilePreview.canDownloadFile
     }

src/files/infrastructure/mappers/JSFileMetadataMapper.ts

@@ -124,8 +124,8 @@ export class JSFileMetadataMapper {
 
   static toFileTabularData(jsTabularData: JSFileTabularData[]): FileTabularData {
     return {
-      variablesCount: jsTabularData[0].varQuantity ?? 0,
-      observationsCount: jsTabularData[0].caseQuantity ?? 0,
+      variables: jsTabularData[0].varQuantity ?? 0,
+      observations: jsTabularData[0].caseQuantity ?? 0,
       unf: jsTabularData[0].UNF
     }
   }

src/sections/collection/collection-items-panel/items-list/file-card/FileCardInfo.tsx

@@ -6,6 +6,7 @@ import { FileCardHelper } from './FileCardHelper'
 import { Route } from '@/sections/Route.enum'
 import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode'
 import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage'
+import { FileLabels } from '@/sections/file/file-labels/FileLabels'
 import { CopyToClipboardButton } from '@/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/copy-to-clipboard-button/CopyToClipboardButton'
 import styles from './FileCard.module.scss'
 
@@ -15,6 +16,8 @@ interface FileCardInfoProps {
 
 export function FileCardInfo({ filePreview }: FileCardInfoProps) {
   const bytesFormatted = FileCardHelper.formatBytesToCompactNumber(filePreview.sizeInBytes)
+  const variables = filePreview.variables || 0
+  const observations = filePreview.observations || 0
 
   return (
     <div className={styles['card-info-container']}>
@@ -39,14 +42,20 @@ export function FileCardInfo({ filePreview }: FileCardInfoProps) {
         <div className={styles.info}>
           <span>{filePreview.fileType}</span>
           <span>{`- ${bytesFormatted}`}</span>
+          {filePreview.fileType === 'Tab-Delimited' && (
+            <span>{`- ${variables} variables, ${observations} observations`}</span>
+          )}
           {filePreview.checksum && (
             <Stack direction="horizontal" gap={0}>
               <span>{`- ${filePreview.checksum.type}:`}</span>
               <CopyToClipboardButton text={filePreview.checksum.value} />
             </Stack>
           )}
         </div>
-        <p className={styles.description}>{filePreview.description}</p>
+        <div>
+          <FileLabels labels={filePreview.tags || []} />
+        </div>
+        {filePreview.description && <p className={styles.description}>{filePreview.description}</p>}
       </Stack>
     </div>
   )

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTabularData.tsx

@@ -13,8 +13,8 @@ export function FileTabularData({
   }
   return (
     <div>
-      {tabularData.variablesCount} {t('table.tabularData.variables')},{' '}
-      {tabularData.observationsCount} {t('table.tabularData.observations')}{' '}
+      {tabularData.variables} {t('table.tabularData.variables')}, {tabularData.observations}{' '}
+      {t('table.tabularData.observations')}{' '}
       {tabularData.unf && <CopyToClipboardButton text={tabularData.unf} />}
     </div>
   )

src/sections/file/file-labels/FileLabels.module.scss

@@ -1,3 +1,4 @@
 .container > * {
   margin-right: 0.5em;
+  font-size: 12px;
 }

src/sections/file/file-metadata/FileMetadata.tsx

@@ -157,13 +157,13 @@ export function FileMetadata({
                 <Col sm={3}>
                   <strong>{t('metadata.fields.variables')}</strong>
                 </Col>
-                <Col>{metadata.tabularData.variablesCount}</Col>
+                <Col>{metadata.tabularData.variables}</Col>
               </Row>
               <Row className={styles.row}>
                 <Col sm={3}>
                   <strong>{t('metadata.fields.observations')}</strong>
                 </Col>
-                <Col>{metadata.tabularData.observationsCount}</Col>
+                <Col>{metadata.tabularData.observations}</Col>
               </Row>
             </>
           )}

tests/component/files/domain/models/FileItemTypePreviewMother.ts

@@ -2,7 +2,9 @@ import { faker } from '@faker-js/faker'
 import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
 import { FileItemTypePreview } from '@/files/domain/models/FileItemTypePreview'
 import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus'
+import { FileLabelType } from '@/files/domain/models/FileMetadata'
 import { FakerHelper } from '../../../shared/FakerHelper'
+import { FileLabelMother } from './FileMetadataMother'
 
 export class FileItemTypePreviewMother {
   static create(props?: Partial<FileItemTypePreview>): FileItemTypePreview {
@@ -29,6 +31,12 @@ export class FileItemTypePreviewMother {
       datasetCitation: faker.lorem.paragraph(),
       publicationStatuses: [PublicationStatus.Published],
       releaseOrCreateDate: faker.date.past(),
+      tags: [
+        FileLabelMother.create({ type: FileLabelType.TAG }),
+        FileLabelMother.create({ type: FileLabelType.CATEGORY })
+      ],
+      observations: faker.datatype.number(),
+      variables: faker.datatype.number(),
       restricted: faker.datatype.boolean(),
       canDownloadFile: faker.datatype.boolean(),
       ...props

tests/component/files/domain/models/FileLabelMother.ts

@@ -0,0 +1,11 @@
+import { faker } from '@faker-js/faker'
+import { FileLabel, FileLabelType } from '@/files/domain/models/FileMetadata'
+
+export class FileLabelMother {
+  static create(props?: Partial<FileLabel>): FileLabel {
+    return {
+      type: props?.type ?? FileLabelType.CATEGORY,
+      value: props?.value ?? faker.lorem.word()
+    }
+  }
+}

tests/component/files/domain/models/FileMetadataMother.ts

@@ -58,8 +58,8 @@ export class FileTypeMother {
 export class FileTabularDataMother {
   static create(props?: Partial<FileTabularData>): FileTabularData {
     return {
-      variablesCount: faker.datatype.number(100),
-      observationsCount: faker.datatype.number(100),
+      variables: faker.datatype.number(100),
+      observations: faker.datatype.number(100),
       unf: `UNF:6:xXw6cIZnwHWvmRdwhYCQZA==`,
       ...props
     }

tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx

@@ -17,5 +17,27 @@ describe('FileCard', () => {
     cy.contains(FileCardHelper.formatBytesToCompactNumber(filePreview.sizeInBytes)).should('exist')
     filePreview.description && cy.findByText(filePreview.description).should('exist')
     filePreview.datasetName && cy.findByText(filePreview.datasetName).should('exist')
+    filePreview.tags &&
+      filePreview.tags.forEach((tag) => {
+        cy.findByText(tag.value).should('exist')
+      })
+  })
+
+  it('should render the card if file is tabular', () => {
+    const filePreview = FileItemTypePreviewMother.create({ fileType: 'Tab-Delimited' })
+    cy.customMount(<FileCard filePreview={filePreview} />)
+
+    cy.contains(DateHelper.toDisplayFormat(filePreview.releaseOrCreateDate)).should('exist')
+    cy.contains(filePreview.fileType).should('exist')
+    filePreview.checksum?.type && cy.contains(filePreview.checksum?.type).should('exist')
+    cy.contains(FileCardHelper.formatBytesToCompactNumber(filePreview.sizeInBytes)).should('exist')
+    filePreview.description && cy.findByText(filePreview.description).should('exist')
+    filePreview.datasetName && cy.findByText(filePreview.datasetName).should('exist')
+    filePreview.tags &&
+      filePreview.tags.forEach((tag) => {
+        cy.findByText(tag.value).should('exist')
+      })
+    filePreview.variables && cy.contains(filePreview.variables).should('exist')
+    filePreview.observations && cy.contains(filePreview.observations).should('exist')
   })
 })

tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileTabularData.spec.tsx

@@ -4,8 +4,8 @@ import styles from '../../../../../../../../../src/sections/dataset/dataset-file
 describe('FileTabularData', () => {
   it('renders the tabular data and CopyToClipboardButton when tabularData is provided', () => {
     const tabularData = {
-      variablesCount: 10,
-      observationsCount: 100,
+      variables: 10,
+      observations: 100,
       unf: 'UNF:6:xXw6cIZnwHWvmRdwhYCQZA=='
     }
     cy.customMount(<FileTabularData tabularData={tabularData} />)

tests/component/sections/file/file-metadata/FileMetadata.spec.tsx

@@ -385,7 +385,7 @@ describe('FileMetadata', () => {
 
   it('renders the tabular data if it exists', () => {
     const metadataWithTabularData = FileMetadataMother.create({
-      tabularData: FileTabularDataMother.create({ variablesCount: 123, observationsCount: 321 })
+      tabularData: FileTabularDataMother.create({ variables: 123, observations: 321 })
     })
     cy.customMount(
       <FileMetadata

tests/e2e-integration/integration/files/FileJSDataverseRepository.spec.ts

@@ -408,15 +408,15 @@ describe('File JSDataverse Repository', () => {
         .getAllByDatasetPersistentId(dataset.persistentId, dataset.version)
         .then((files) => {
           const expectedTabularData = {
-            variablesCount: 7,
-            observationsCount: 10
+            variables: 7,
+            observations: 10
           }
           files.forEach((file) => {
-            expect(file.metadata.tabularData?.variablesCount).to.deep.equal(
-              expectedTabularData.variablesCount
+            expect(file.metadata.tabularData?.variables).to.deep.equal(
+              expectedTabularData.variables
             )
-            expect(file.metadata.tabularData?.observationsCount).to.deep.equal(
-              expectedTabularData.observationsCount
+            expect(file.metadata.tabularData?.observations).to.deep.equal(
+              expectedTabularData.observations
             )
             expect(file.metadata.tabularData?.unf).to.not.be.undefined
           })