Dataset Catalog

src/js/components/Overview/PublicOverview.tsx

@@ -12,10 +12,11 @@ import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
 import Counts from './Counts';
 import LastIngestionInfo from './LastIngestion';
 import Loader from '@/components/Loader';
-import Dataset from '@/components/Provenance/Dataset';
+import Dataset from '@/components/Provenance/Catalogue/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 './CatalogueCard';
+import { useMetadata } from '@/features/metadata/hooks';
+
+const Catalogue = () => {
+  const { projects } = useMetadata();
+  return (
+    <Space align="center" direction="vertical" size="large" 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,116 @@
+import { useMemo } from 'react';
+import i18n from '@/i18n';
+import { Card, Carousel, Descriptions, Flex, Space, Tag, Tooltip, Typography } from 'antd';
+import type { Project } from '@/types/metadata';
+import { isoDateToString } from '@/utils/strings';
+import { useTranslationFn } from '@/hooks';
+import { BOX_SHADOW } from '@/constants/overviewConstants';
+import Dataset from '@/components/Provenance/Catalogue/Dataset';
+
+const { Paragraph, Text, Title } = Typography;
+
+const MAX_KEYWORD_CHARACTERS = 50;
+
+const CatalogueCard = ({ project }: { project: Project }) => {
+  const lang = i18n.language;
+  const t = useTranslationFn();
+
+  const { selectedKeywords, extraKeywords, extraKeywordCount } = useMemo(() => {
+    const keywords = project.datasets.flatMap((d) => d.dats_file.keywords ?? []).map((k) => t(k.value as string));
+
+    let totalCharacters = 0;
+    const selectedKeywords: string[] = [];
+    const extraKeywords: string[] = [];
+
+    for (const keyword of keywords) {
+      if (totalCharacters + keyword.length > MAX_KEYWORD_CHARACTERS) {
+        extraKeywords.push(keyword);
+      } else {
+        selectedKeywords.push(keyword);
+        totalCharacters += keyword.length;
+      }
+    }
+
+    return {
+      selectedKeywords,
+      extraKeywords,
+      extraKeywordCount: extraKeywords.length,
+    };
+  }, [project.datasets, t]);
+
+  const projectCreated = isoDateToString(project.created, lang);
+  const projectUpdated = isoDateToString(project.updated, lang);
+
+  const projectInfo = [
+    {
+      key: '1',
+      label: t('Created'),
+      children: (
+        <Paragraph
+          ellipsis={{
+            rows: 1,
+            tooltip: { title: projectCreated },
+          }}
+        >
+          {projectCreated}
+        </Paragraph>
+      ),
+      span: 1.5,
+    },
+    {
+      key: '2',
+      label: t('Updated'),
+      children: <Paragraph ellipsis={{ rows: 1, tooltip: { title: projectUpdated } }}>{projectUpdated}</Paragraph>,
+      span: 1.5,
+    },
+  ];
+
+  return (
+    <Card key={project.identifier} style={{ height: '260px', maxWidth: '1300px', ...BOX_SHADOW }}>
+      <Flex justify="space-between">
+        <div style={{ flex: 1, paddingRight: '10px' }}>
+          <Space direction="vertical">
+            <Title level={4} style={{ marginTop: 0 }}>
+              {t(project.title)}
+            </Title>
+            <Paragraph
+              ellipsis={{
+                rows: 3,
+                tooltip: { title: t(project.description) },
+              }}
+            >
+              {t(project.description)}
+            </Paragraph>
+            <div>
+              {selectedKeywords.map((kw) => (
+                <Tag key={kw} color="blue">
+                  {kw}
+                </Tag>
+              ))}
+              {extraKeywordCount !== 0 && (
+                <Tooltip title={extraKeywords.join(', ')}>
+                  <Text>+{extraKeywordCount} more</Text>
+                </Tooltip>
+              )}
+            </div>
+            <Descriptions items={projectInfo} />
+          </Space>
+        </div>
+        <div style={{ flex: 1, maxWidth: '600px' }}>
+          <Title level={5} style={{ marginTop: 0 }}>
+            {t('Datasets')}
+          </Title>
+          <Carousel
+            arrows={project.datasets.length > 1}
+            style={{ border: '1px solid lightgray', borderRadius: '7px', height: '170px', padding: '16px' }}
+          >
+            {project.datasets.map((d) => (
+              <Dataset parentProjectID={project.identifier} key={d.identifier} dataset={d} format="carousel" />
+            ))}
+          </Carousel>
+        </div>
+      </Flex>
+    </Card>
+  );
+};
+export default CatalogueCard;

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

@@ -10,7 +10,7 @@ import { RightOutlined } from '@ant-design/icons';
 import { useCallback } from 'react';
 import SmallChartCardTitle from '@/components/Util/SmallChartCardTitle';
 
-const { Paragraph } = Typography;
+const { Paragraph, Title } = Typography;
 
 const KEYWORDS_LIMIT = 2;
 
@@ -22,7 +22,7 @@ const Dataset = ({
 }: {
   parentProjectID: string;
   dataset: Dataset;
-  format: 'list-item' | 'card';
+  format: 'list-item' | 'card' | 'carousel';
   selected?: boolean;
 }) => {
   const location = useLocation();
@@ -81,6 +81,17 @@ const Dataset = ({
         </Space>
       </Card>
     );
+  } else if (format === 'carousel') {
+    return (
+      <>
+        <Title level={5} style={{ marginTop: 0 }}>
+          {t(dataset.title)}
+        </Title>
+        <Paragraph ellipsis={{ rows: 4, tooltip: { title: t(dataset.description) } }}>
+          {t(dataset.description)}
+        </Paragraph>
+      </>
+    );
   } else {
     return <span style={{ color: 'red' }}>UNIMPLEMENTED</span>;
   }

src/js/components/Scope/DatasetScopePicker.tsx

@@ -6,7 +6,7 @@ import type { DiscoveryScope } from '@/features/metadata/metadata.store';
 import { useTranslationFn } from '@/hooks';
 import type { Project } from '@/types/metadata';
 import { getCurrentPage, scopeToUrl } from '@/utils/router';
-import Dataset from '@/components/Provenance/Dataset';
+import Dataset from '@/components/Provenance/Catalogue/Dataset';
 import { useSelectedScope } from '@/features/metadata/hooks';
 
 type DatasetScopePickerProps = {

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

@@ -1,7 +1,17 @@
 import { DOI_PATTERN, URL_PATTERN } from '@/constants/patterns';
+// import i18n from '@/i18n';
 
 export const stringToBoolean = (s: string | undefined) =>
   ['true', 't', '1', 'yes'].includes((s || '').toLocaleLowerCase());
 
 export const stringIsDOI = (s: string) => !!s.match(DOI_PATTERN);
 export const stringIsURL = (s: string) => !!s.match(URL_PATTERN);
+
+export const isoDateToString = (d: string, lang?: string) => {
+  const dateLang = lang === 'fr' ? 'fr-CA' : 'en-US';
+  return new Date(d).toLocaleString(dateLang, {
+    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 */