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/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,35 @@
-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()} />{' '}
+              </>
             )),
         },
-      ]}
-    />
+      ] as ColumnsType<ExtraProperty>,
+    [td]
   );
+
+  return <BaseProvenanceTable dataSource={extraProperties} columns={columns} />;
 };
 
 export interface ExtraPropertiesTableProps {

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

@@ -1,70 +1,101 @@
-import React from 'react';
+import React, { ReactNode, useMemo } from 'react';
+
 import { Tag, Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
 
 import BaseProvenanceTable from './BaseProvenanceTable';
 import LinkIfUrl from '../../Util/LinkIfUrl';
 import { useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { ProvenanceStoreDataset } from '@/types/provenance';
+import { Person, PrimaryPublication, ProvenanceStoreDataset } from '@/types/provenance';
+
+import { stringIsDOI, stringIsURL } from '@/utils/strings';
+
+const URLLink = ({ url, children }: { url: string; children?: ReactNode }) => (
+  <Typography.Link href={url} target="_blank" rel="noopener noreferrer">
+    {children || url}
+  </Typography.Link>
+);
+
+const DOILink = ({ doi, children }: { doi: string; children?: ReactNode }) => (
+  <URLLink url={`https://dx.doi.org/${doi}`}>{children || doi}</URLLink>
+);
+
+const formatAuthorList = (authors: Person[]): string => {
+  const fullNames = authors.map((a) => a.fullName);
+  if (fullNames.length === 0) {
+    return '';
+  } else if (fullNames.length === 1) {
+    return `${fullNames[0]}.`;
+  } else if (fullNames.length === 2) {
+    return `${fullNames.join(' and ')}.`;
+  } else {
+    return `${fullNames.slice(0, -1).join(', ')}, and ${fullNames.at(-1)}.`;
+  }
+};
 
 const PublicationsTable = ({ publications }: PublicationsTableProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
 
-  return (
-    <BaseProvenanceTable
-      dataSource={publications}
-      columns={[
+  const columns = useMemo(
+    () =>
+      [
         {
-          title: td('Title'),
-          dataIndex: 'title',
+          title: td('Publication'),
+          key: 'publication',
 
-          render: (_, { title, identifier }) =>
-            identifier.identifier === '' ? (
-              t(title)
-            ) : (
-              <Typography.Link href={`https://dx.doi.org/${identifier.identifier}`} target="_blank">
-                {t(title)}
-              </Typography.Link>
-            ),
+          render: (_, { title, identifier: { identifier }, authors }) => {
+            const formattedTitle = `${t(title)}${title.endsWith('.') ? '' : '.'}`;
+            return (
+              <>
+                {stringIsDOI(identifier) ? (
+                  <DOILink doi={identifier}>{formattedTitle}</DOILink>
+                ) : stringIsURL(identifier) ? (
+                  <URLLink url={identifier}>{formattedTitle}</URLLink>
+                ) : (
+                  formattedTitle
+                )}
+                {!!authors?.length && (
+                  <>
+                    <br />
+                    <em>{formatAuthorList(authors)}</em>
+                  </>
+                )}
+              </>
+            );
+          },
         },
         {
           title: td('Publication Venue'),
           dataIndex: 'publicationVenue',
           render: (text) => t(text),
         },
         {
-          title: td('Authors'),
-          dataIndex: 'authors',
-          render: (_, { authors }) =>
-            authors.map((author, i) => (
-              <Tag key={i} color="cyan">
-                {author}
-              </Tag>
-            )),
-        },
-        {
-          title: td('Dates'),
+          title: td('Date'),
           dataIndex: 'dates',
           render: (_, { dates }) =>
-            dates.map((date, i) => (
+            (dates ?? []).map((date, i) => (
               <Tag key={i} color="cyan">
-                {date}
+                {new Date(Date.parse(date.date)).toLocaleDateString()}
               </Tag>
             )),
         },
         {
           title: td('Identifier'),
           dataIndex: 'identifier.identifier',
-          render: (_, { identifier }) => <LinkIfUrl text={identifier.identifier} />,
+          render: (_, { identifier: { identifier } }) =>
+            stringIsDOI(identifier) ? <DOILink doi={identifier} /> : <LinkIfUrl text={identifier} />,
         },
         {
           title: td('Identifier Source'),
           dataIndex: 'identifier.identifierSource',
-          render: (_, { identifier }) => t(identifier.identifierSource),
+          render: (_, { identifier: { identifierSource } }) => t(identifierSource),
         },
-      ]}
-    />
+      ] as ColumnsType<PrimaryPublication>,
+    [td]
   );
+
+  return <BaseProvenanceTable dataSource={publications} columns={columns} />;
 };
 
 export interface PublicationsTableProps {

src/js/components/Util/LinkIfUrl.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Typography } from 'antd';
+
+import { stringIsURL } from '@/utils/strings';
+
+// Renders text as link if the text provided is a valid url.
+const LinkIfUrl = ({ text }: { text: string }) => {
+  if (stringIsURL(text)) {
+    return (
+      <Typography.Link href={text} target="_blank">
+        {text}
+      </Typography.Link>
+    );
+  }
+  return <>{text}</>;
+};
+
+export default LinkIfUrl;