feat: improve provenance display across multiple facets

src/js/components/Provenance/DatasetProvenance.tsx

@@ -30,7 +30,7 @@ const DatasetProvenance = ({ metadata, loading }: DatasetProvenanceProps) => {
             {t(metadata.version)}
           </Title>,
         ]}
-        style={{ borderRadius: '11px', maxWidth: '1400px' }}
+        style={{ borderRadius: '11px' }}
         loading={loading}
       >
         {/* --- DESCRIPTION ---*/}
@@ -44,7 +44,7 @@ const DatasetProvenance = ({ metadata, loading }: DatasetProvenanceProps) => {
                 {t(metadata.privacy)}
               </Item>
             )}
-            {metadata.licenses.length && (
+            {!!metadata.licenses?.length && (
               <Item span={12} label={<DescriptionTitle title={td('Licenses')} />}>
                 {metadata.licenses.map((l, i) => (
                   <Tag key={i} color="cyan">
@@ -53,11 +53,11 @@ const DatasetProvenance = ({ metadata, loading }: DatasetProvenanceProps) => {
                 ))}
               </Item>
             )}
-            {metadata.keywords.length && (
+            {!!metadata.keywords?.length && (
               <Item span={24} label={<DescriptionTitle title={td('Keywords')} />}>
                 {metadata.keywords.map((keyword, i) => (
                   <Tag key={i} color="cyan">
-                    {t(keyword.value)}
+                    {t(keyword.value.toString())}
                   </Tag>
                 ))}
               </Item>
@@ -67,32 +67,60 @@ const DatasetProvenance = ({ metadata, loading }: DatasetProvenanceProps) => {
 
         {/* TableTitle has translation in it*/}
         {/* --- CREATED BY ---*/}
-        <TableTitleWitTranslation title="Created By" />
-        <CreatedByTable creators={metadata.creators} />
+        {!!metadata.creators?.length && (
+          <>
+            <TableTitleWithTranslation title="Created By" />
+            <CreatedByTable creators={metadata.creators} />
+          </>
+        )}
 
         {/* --- DISTRIBUTIONS ---*/}
-        <TableTitleWitTranslation title="Distributions" />
-        <DistributionsTable distributions={metadata.distributions} />
+        {!!metadata.distributions?.length && (
+          <>
+            <TableTitleWithTranslation title="Distributions" />
+            <DistributionsTable distributions={metadata.distributions} />
+          </>
+        )}
 
         {/* --- IS ABOUT ---*/}
-        <TableTitleWitTranslation title="Is About" />
-        <IsAboutTable isAbout={metadata.isAbout} />
+        {!!metadata.isAbout?.length && (
+          <>
+            <TableTitleWithTranslation title="Is About" />
+            <IsAboutTable isAbout={metadata.isAbout} />
+          </>
+        )}
 
         {/* --- PUBLICATIONS ---*/}
-        <TableTitleWitTranslation title="Primary Publications" />
-        <PublicationsTable publications={metadata.primaryPublications} />
+        {!!metadata.primaryPublications?.length && (
+          <>
+            <TableTitleWithTranslation title="Primary Publications" />
+            <PublicationsTable publications={metadata.primaryPublications} />
+          </>
+        )}
 
         {/* --- ACKNOWLEDGES ---*/}
-        <TableTitleWitTranslation title="Acknowledges" />
-        <AcknowledgesTable acknowledges={metadata.acknowledges} />
+        {!!metadata.acknowledges?.length && (
+          <>
+            <TableTitleWithTranslation title="Acknowledgements" />
+            <AcknowledgesTable acknowledges={metadata.acknowledges} />
+          </>
+        )}
 
         {/* --- SPATIAL COVERAGE ---*/}
-        <TableTitleWitTranslation title="Spatial Coverage" />
-        <SpatialCoverageTable spatialCoverage={metadata.spatialCoverage} />
+        {!!metadata.spatialCoverage?.length && (
+          <>
+            <TableTitleWithTranslation title="Spatial Coverage" />
+            <SpatialCoverageTable spatialCoverage={metadata.spatialCoverage} />
+          </>
+        )}
 
         {/* --- EXTRA PROPERTIES ---*/}
-        <TableTitleWitTranslation title="Extra Properties" />
-        <ExtraPropertiesTable extraProperties={metadata.extraProperties} />
+        {!!metadata.extraProperties?.length && (
+          <>
+            <TableTitleWithTranslation title="Extra Properties" />
+            <ExtraPropertiesTable extraProperties={metadata.extraProperties} />
+          </>
+        )}
 
         {/* --- DOWNLOAD DATS --- */}
         <DownloadDats metadata={metadata} />
@@ -108,7 +136,7 @@ export type DatasetProvenanceProps = {
 
 export default DatasetProvenance;
 
-const TableTitleWitTranslation = ({ title }: { title: string }) => {
+const TableTitleWithTranslation = ({ title }: { title: string }) => {
   const { t } = useTranslation(DEFAULT_TRANSLATION);
 
   return (

src/js/components/Provenance/Tables/AcknowledgesTable.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Tag } from 'antd';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
@@ -24,10 +23,11 @@ const AcknowledgesTable = ({ acknowledges }: AcknowledgesTableProps) => {
           dataIndex: 'funders',
           render: (_, { funders }) =>
             funders.map((f, i) => (
-              <Tag key={i} color="cyan">
+              <React.Fragment key={i}>
                 <LinkIfUrl text={f.name} />
-                {f.abbreviation ? `(${t(f.abbreviation)})` : ''}
-              </Tag>
+                {f.abbreviation ? ` (${t(f.abbreviation)})` : ''}
+                {i < funders.length - 1 ? '; ' : ''}
+              </React.Fragment>
             )),
         },
       ]}

src/js/components/Provenance/Tables/CreatedByTable.tsx

@@ -33,7 +33,7 @@ const CreatedByTable = ({ creators }: CreatedByTableProps) => {
             roles &&
             roles.map((r, i) => (
               <Tag key={i} color="cyan">
-                {t(r.value)}
+                {t(r.value.toString())}
               </Tag>
             )),
         },

src/js/components/Provenance/Tables/DistributionsTable.tsx

@@ -1,19 +1,20 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+
 import { Tag, Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
 const { Link } = Typography;
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import { useTranslationDefault, useTranslationCustom } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import { Distribution, ProvenanceStoreDataset } from '@/types/provenance';
 
 const DistributionsTable = ({ distributions }: DistributionsTableProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
 
-  return (
-    <BaseProvenanceTable
-      dataSource={distributions}
-      columns={[
+  const columns = useMemo(
+    () =>
+      [
         {
           title: td('Formats'),
           dataIndex: 'formats',
@@ -27,7 +28,7 @@ const DistributionsTable = ({ distributions }: DistributionsTableProps) => {
         {
           title: td('Unit'),
           dataIndex: 'unit',
-          render: (_, { unit }) => t(unit.value),
+          render: (_, { unit }) => t(unit.value.toString()),
         },
         {
           title: td('Access'),
@@ -47,15 +48,17 @@ const DistributionsTable = ({ distributions }: DistributionsTableProps) => {
               render: (_, { access }) =>
                 access.authorizations.map((a, i) => (
                   <Tag key={i} color="cyan">
-                    {t(a.value)}
+                    {t(a.value.toString())}
                   </Tag>
                 )),
             },
           ],
         },
-      ]}
-    />
+      ] as ColumnsType<Distribution>,
+    [td]
   );
+
+  return <BaseProvenanceTable dataSource={distributions} columns={columns} />;
 };
 
 export interface DistributionsTableProps {

src/js/components/Provenance/Tables/ExtraPropertiesTable.tsx

@@ -1,33 +1,36 @@
-import React from 'react';
-import { Tag } from 'antd';
+import React, { useMemo } from 'react';
+
+import { ColumnsType } from 'antd/es/table';
 
 import BaseProvenanceTable from '@/components/Provenance/Tables/BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import { ExtraProperty, ProvenanceStoreDataset } from '@/types/provenance';
 
 const ExtraPropertiesTable = ({ extraProperties }: ExtraPropertiesTableProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
 
-  return (
-    <BaseProvenanceTable
-      dataSource={extraProperties}
-      columns={[
+  const columns = useMemo(
+    () =>
+      [
         { title: td('Category'), dataIndex: 'category', render: (text) => t(text) },
         {
           title: td('Values'),
           dataIndex: 'values',
           render: (_, { values }) =>
             values.map((v, i) => (
-              <Tag key={i} color="cyan">
-                <LinkIfUrl text={v.value} />
-              </Tag>
+              <>
+                <LinkIfUrl key={i} text={v.value.toString()} />
+                {i < values.length - 1 ? '; ' : ''}
+              </>
             )),
         },
-      ]}
-    />
+      ] as ColumnsType<ExtraProperty>,
+    [td]
   );
+
+  return <BaseProvenanceTable dataSource={extraProperties} columns={columns} />;
 };
 
 export interface ExtraPropertiesTableProps {