Added buttons to navigate to project/dataset directly

bento-platform · Dec 16, 2024 · 341e8e1 · 341e8e1
1 parent a00cecc
commit 341e8e1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/src/js/components/Provenance/Catalogue/CatalogueCard.tsx b/src/js/components/Provenance/Catalogue/CatalogueCard.tsx
@@ -6,14 +6,18 @@ import { isoDateToString } from '@/utils/strings';
 import { useTranslationFn } from '@/hooks';
 import { BOX_SHADOW } from '@/constants/overviewConstants';
 import Dataset from '@/components/Provenance/Catalogue/Dataset';
+import { scopeToUrl } from '@/utils/router';
+import { useLocation } from 'react-router-dom';
 
-const { Paragraph, Text, Title } = Typography;
+const { Paragraph, Text, Title, Link } = Typography;
 
 const MAX_KEYWORD_CHARACTERS = 50;
 
 const CatalogueCard = ({ project }: { project: Project }) => {
   const lang = i18n.language;
   const t = useTranslationFn();
+  const location = useLocation();
+  const baseURL = '/' + location.pathname.split('/')[1];
   const { datasets, created, updated, title, description, identifier } = project;
 
   const { selectedKeywords, extraKeywords, extraKeywordCount } = useMemo(() => {
@@ -71,9 +75,15 @@ const CatalogueCard = ({ project }: { project: Project }) => {
       <Flex justify="space-between" wrap>
         <div style={{ flex: 1, paddingRight: '10px', minWidth: '450px' }}>
           <Space direction="vertical">
-            <Title level={4} style={{ marginTop: 0 }}>
-              {t(title)}
-            </Title>
+            <Space direction="horizontal">
+              <Title level={4} style={{ marginTop: 0 }}>
+                {t(title)}
+              </Title>
+              <div style={{ marginBottom: '8px' }}>
+                <Link href={scopeToUrl({ project: identifier }, baseURL)}>{t('Explore Project')}</Link>
+              </div>
+            </Space>
+
             {description && (
               <Paragraph
                 ellipsis={{
@@ -108,7 +118,13 @@ const CatalogueCard = ({ project }: { project: Project }) => {
             style={{ border: '1px solid lightgray', borderRadius: '7px', height: '170px', padding: '16px' }}
           >
             {datasets.map((d) => (
-              <Dataset parentProjectID={identifier} key={d.identifier} dataset={d} format="carousel" />
+              <Dataset
+                parentProjectID={identifier}
+                key={d.identifier}
+                dataset={d}
+                format="carousel"
+                navigateLink={scopeToUrl({ project: identifier, dataset: d.identifier }, baseURL)}
+              />
             ))}
           </Carousel>
         </div>

diff --git a/src/js/components/Provenance/Catalogue/Dataset.tsx b/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, Title } = Typography;
+const { Paragraph, Title, Link } = Typography;
 
 const KEYWORDS_LIMIT = 2;
 
@@ -19,11 +19,13 @@ const Dataset = ({
   dataset,
   format,
   selected,
+  navigateLink,
 }: {
   parentProjectID: string;
   dataset: Dataset;
   format: 'list-item' | 'card' | 'carousel';
   selected?: boolean;
+  navigateLink?: string;
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -84,9 +86,14 @@ const Dataset = ({
   } else if (format === 'carousel') {
     return (
       <>
-        <Title level={5} style={{ marginTop: 0 }}>
-          {t(title)}
-        </Title>
+        <Space direction="horizontal">
+          <Title level={5} style={{ marginTop: 0 }}>
+            {t(title)}
+          </Title>
+          <div style={{ marginBottom: '8px' }}>
+            <Link href={navigateLink}>{t('Explore Dataset')}</Link>
+          </div>
+        </Space>
         <Paragraph ellipsis={{ rows: 4, tooltip: { title: t(dataset.description) } }}>{t(description)}</Paragraph>
       </>
     );