Dataset Catalog

src/js/components/Overview/PublicOverview.tsx

@@ -13,9 +13,10 @@ import Counts from './Counts';
 import LastIngestionInfo from './LastIngestion';
 import Loader from '@/components/Loader';
 import Dataset from '@/components/Provenance/Dataset';
+import Catalogue from '@/components/Provenance/Catalogue/Catalogue';
 
 import { useAppSelector } from '@/hooks';
-import { useSelectedProject, useSelectedScope } from '@/features/metadata/hooks';
+import { useMetadata, useSelectedProject, useSelectedScope } from '@/features/metadata/hooks';
 import { useTranslation } from 'react-i18next';
 import { RequestStatus } from '@/types/requests';
 
@@ -37,6 +38,7 @@ const PublicOverview = () => {
 
   const selectedProject = useSelectedProject();
   const { scope } = useSelectedScope();
+  const { projects } = useMetadata();
 
   useEffect(() => {
     // Save sections to localStorage when they change
@@ -59,6 +61,8 @@ const PublicOverview = () => {
     saveToLocalStorage(sections);
   }, [sections]);
 
+  if (!selectedProject && projects.length > 1) return <Catalogue />;
+
   return !isContentPopulated || isFetchingOverviewData ? (
     <Loader />
   ) : (

src/js/components/Provenance/Catalogue/Catalogue.tsx

@@ -0,0 +1,16 @@
+import { Space } from 'antd';
+import CatalogueCard from '@/components/Provenance/Catalogue/CatalogueCard';
+import { useMetadata } from '@/features/metadata/hooks';
+
+const Catalogue = () => {
+  const { projects } = useMetadata();
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      {projects.map((project) => (
+        <CatalogueCard project={project} key={project.identifier} />
+      ))}
+    </Space>
+  );
+};
+
+export default Catalogue;

src/js/components/Provenance/Catalogue/CatalogueCard.tsx

@@ -0,0 +1,101 @@
+import { Card, Carousel, Descriptions, Flex, Space, Tag, Typography } from 'antd';
+import CatalogueCarouselDataset from '@/components/Provenance/Catalogue/CatalogueCarouselDataset';
+import type { Project } from '@/types/metadata';
+import { isoDateToString } from '@/utils/strings';
+import { useTranslationFn } from '@/hooks';
+
+const { Paragraph } = Typography;
+
+const MAX_CHARACTERS = 50;
+
+const CatalogueCard = ({ project }: { project: Project }) => {
+  const t = useTranslationFn();
+
+  const keywords = project.datasets
+    .map((d) => d.dats_file.keywords ?? [])
+    .flat()
+    .map((k) => t(k.value as string));
+
+  let totalCharacters = 0;
+  const selectedKeywords = [];
+
+  for (const keyword of keywords) {
+    if (totalCharacters + keyword.length > MAX_CHARACTERS) {
+      break;
+    }
+    selectedKeywords.push(keyword);
+    totalCharacters += keyword.length;
+  }
+
+  const extraKeywordCount = Math.max(keywords.length - selectedKeywords.length, 0);
+
+  const projectInfo = [
+    {
+      key: '1',
+      label: t('Created'),
+      children: (
+        <Paragraph
+          ellipsis={{
+            rows: 1,
+            tooltip: { title: isoDateToString(project.created) },
+          }}
+        >
+          {isoDateToString(project.created)}
+        </Paragraph>
+      ),
+      span: 1.5,
+    },
+    {
+      key: '2',
+      label: t('Updated'),
+      children: (
+        <Paragraph ellipsis={{ rows: 1, tooltip: { title: isoDateToString(project.updated) } }}>
+          {isoDateToString(project.updated)}
+        </Paragraph>
+      ),
+      span: 1.5,
+    },
+  ];
+
+  return (
+    <Card key={project.identifier} style={{ boxShadow: '0 2px 10px rgba(0,0,0,0.05)', height: '260px' }}>
+      <Flex justify="space-between">
+        <div style={{ width: '50%', paddingRight: '10px' }}>
+          <Space direction="vertical">
+            <Typography.Title level={5} style={{ marginTop: 0 }}>
+              {t(project.title)}
+            </Typography.Title>
+            <Typography.Paragraph
+              ellipsis={{
+                rows: 3,
+                tooltip: { title: t(project.description) },
+              }}
+            >
+              {t(project.description)}
+            </Typography.Paragraph>
+            <div>
+              {selectedKeywords.map((kw) => (
+                <Tag key={kw} color="blue">
+                  {kw}
+                </Tag>
+              ))}
+              {extraKeywordCount !== 0 && <Typography.Text>+{extraKeywordCount} more</Typography.Text>}
+            </div>
+            <Descriptions items={projectInfo} />
+          </Space>
+        </div>
+        <div style={{ width: '50%', maxWidth: '600px' }}>
+          <Typography.Title level={4} style={{ marginTop: 0 }}>
+            {t('Datasets')}
+          </Typography.Title>
+          <Carousel arrows={project.datasets.length > 1} style={{ border: '1px solid lightgray', borderRadius: '7px' }}>
+            {project.datasets.map((d) => (
+              <CatalogueCarouselDataset key={d.identifier} dataset={d} />
+            ))}
+          </Carousel>
+        </div>
+      </Flex>
+    </Card>
+  );
+};
+export default CatalogueCard;

src/js/components/Provenance/Catalogue/CatalogueCarouselDataset.tsx

@@ -0,0 +1,19 @@
+import { Card, Typography } from 'antd';
+import type { Dataset } from '@/types/metadata';
+import { useTranslationFn } from '@/hooks';
+
+const CatalogueCarouselDataset = ({ dataset }: { dataset: Dataset }) => {
+  const t = useTranslationFn();
+  return (
+    <Card style={{ height: '180px' }}>
+      <Typography.Title level={5} style={{ marginTop: 0 }}>
+        {t(dataset.title)}
+      </Typography.Title>
+      <Typography.Paragraph ellipsis={{ rows: 4, tooltip: { title: dataset.description } }}>
+        {t(dataset.description)}
+      </Typography.Paragraph>
+    </Card>
+  );
+};
+
+export default CatalogueCarouselDataset;

src/js/types/metadata.ts

@@ -1,4 +1,4 @@
-import type { Layout as DiscoveryOverview, Fields as DiscoveryFields } from '@/types/overviewResponse';
+import type { Fields as DiscoveryFields, Layout as DiscoveryOverview } from '@/types/overviewResponse';
 import type { Section as DiscoverySearch } from '@/types/search';
 import type { DiscoveryRules } from '@/types/configResponse';
 import type { DatsFile } from '@/types/dats';
@@ -16,6 +16,8 @@ export interface Project {
   description: string;
   discovery: Discovery | null;
   datasets: Dataset[];
+  created: string;
+  updated: string;
 }
 
 export interface Dataset {

src/js/utils/strings.ts

@@ -5,3 +5,10 @@ export const stringToBoolean = (s: string | undefined) =>
 
 export const stringIsDOI = (s: string) => !!s.match(DOI_PATTERN);
 export const stringIsURL = (s: string) => !!s.match(URL_PATTERN);
+
+export const isoDateToString = (d: string) =>
+  new Date(d).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });

src/public/locales/en/default_translation_en.json

@@ -129,5 +129,7 @@
       "Coordinates are one-based.",
       "Leave this form blank to search by metadata only."
     ]
-  }
+  },
+  "Created": "Created",
+  "Updated": "Updated"
 }

src/public/locales/fr/default_translation_fr.json

@@ -129,5 +129,7 @@
       "Les coordonnées sont en base un.",
       "Laissez ce formulaire vide pour effectuer une recherche sur les métadonnées seulement."
     ]
-  }
+  },
+  "Created": "Créé",
+  "Updated": "Mis à jour"
 }

src/styles.css

@@ -119,6 +119,14 @@ body {
   gap: 20px;
 }
 
+.slick-arrow {
+  color: black !important; /* override slick-next/slick-prev color */
+}
+
+.slick-dots li button {
+  background-color: black !important; /* override slick-dots color */
+}
+
 /* END search results pane */