nav callback for exploration for layer-info-modal

app/scripts/components/exploration/components/datasets/dataset-list-item.tsx

@@ -94,10 +94,11 @@ interface DatasetListItemProps {
   xScaled?: ScaleTime<number, number>;
   onDragStart?: () => void;
   onDragEnd?: () => void;
+  onNavigation?: (path: string) => void;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
+  const { datasetId, width, xScaled, onDragStart, onDragEnd, onNavigation } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -235,6 +236,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
                 revealed={!!modalLayerInfo}
                 close={() => setModalLayerInfo(undefined)}
                 layerData={modalLayerInfo}
+                onNavigation={onNavigation}
               />
             )}
           </DatasetHeaderInner>

app/scripts/components/exploration/components/datasets/dataset-list.tsx

@@ -16,10 +16,11 @@ const DatasetListSelf = styled.ul`
 interface DatasetListProps {
   width: number;
   xScaled?: ScaleTime<number, number>;
+  onNavigation?: (path: string) => void;
 }
 
 export function DatasetList(props: DatasetListProps) {
-  const { width, xScaled } = props;
+  const { width, xScaled, onNavigation } = props;
   const [isDragging, setIsDragging] = useState(false);
 
   const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
@@ -40,6 +41,7 @@ export function DatasetList(props: DatasetListProps) {
           xScaled={xScaled}
           onDragStart={() => setIsDragging(true)}
           onDragEnd={() => setIsDragging(false)}
+          onNavigation={onNavigation}
         />
       ))}
     </Reorder.Group>

app/scripts/components/exploration/components/layer-info-modal.tsx

@@ -9,9 +9,8 @@ import {
   ModalHeadline
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { createButtonStyles } from '@devseed-ui/button';
+import { Button } from '@devseed-ui/button';
 import { LayerInfo } from 'veda';
-
 import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
@@ -53,13 +52,6 @@ const ParentDatasetHeading = styled.h2`
   padding: ${glsp(0.5)} 0;
 `;
 
-// override with 'as' as LinkComponent
-const ButtonStyleLink = styled.a<any>`
-  &&& {
-    ${({ variation, size }) => createButtonStyles({ variation, size })}
-  }
-`;
-
 export interface LayerInfoModalData {
   name: string;
   info?: LayerInfo;
@@ -75,6 +67,7 @@ interface LayerInfoModalProps {
   revealed: boolean;
   close: () => void;
   layerData: LayerInfoModalData
+  onNavigation?: (path: string) => void;
 }
 
 export function LayerInfoLiner(props: { info: LayerInfo }) {
@@ -100,10 +93,17 @@ const LayerInfoLinerModal = styled.div`
 `;
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
-  const { revealed, close, layerData } = props;
+  const { revealed, close, layerData, onNavigation } = props;
 
   const { parentData } = layerData;
   const dataCatalogPage = getDatasetPath(parentData.id);
+
+  const handleButtonClick = () => {
+    close();
+    if (onNavigation) {
+      onNavigation(dataCatalogPage)
+    }
+  };
   return (
     <DatasetModal
       id='modal'
@@ -133,9 +133,9 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
         <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
       }
       footerContent={
-        <ButtonStyleLink href={dataCatalogPage} rel='noopener noreferrer' onClick={close} variation='primary-fill' size='medium' target='_blank'>
+        <Button onClick={handleButtonClick} variation='primary-fill' size='medium'>
           Open in Data Catalog
-        </ButtonStyleLink>
+        </Button>
       }
     />
   );

app/scripts/components/exploration/components/timeline/timeline.tsx

@@ -170,6 +170,7 @@ interface TimelineProps {
   setSelectedCompareDay: (d: Date | null) => void;
   onDatasetAddClick?: () => void;
   panelHeight: number;
+  onNavigation?: (path: string) => void;
 }
 
 const getIntervalFromDate = (selectedDay: Date, dataDomain: [Date, Date]) => {
@@ -200,7 +201,8 @@ export default function Timeline(props: TimelineProps) {
     selectedCompareDay,
     setSelectedCompareDay,
     onDatasetAddClick,
-    panelHeight
+    panelHeight,
+    onNavigation,
   } = props;
 
   // Refs for non react based interactions.
@@ -798,7 +800,7 @@ export default function Timeline(props: TimelineProps) {
           ref={datasetsContainerRef}
           panelHeight={panelHeight}
         >
-          <DatasetList width={width} xScaled={xScaled} />
+          <DatasetList width={width} xScaled={xScaled} onNavigation={onNavigation} />
         </TimelineContentInner>
       </TimelineContent>
     </TimelineWrapper>

app/scripts/components/exploration/container.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
+import { useNavigate } from "react-router-dom";
 import { DevTools } from 'jotai-devtools';
 import { useAtom, useSetAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
@@ -39,6 +40,7 @@ export default function ExplorationAndAnalysisContainer() {
   const [datasetModalRevealed, setDatasetModalRevealed] = useState(
     !timelineDatasets.length
   );
+  const navigate = useNavigate();
 
   // @NOTE: When Exploration page is preloaded (ex. Linked with react-router)
   // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
@@ -49,6 +51,15 @@ export default function ExplorationAndAnalysisContainer() {
   const openModal = () => setDatasetModalRevealed(true);
   const closeModal = () => setDatasetModalRevealed(false);
 
+  const handleNavigation = (path: string) => {
+    navigate(path);
+  };
+
+  const linkProps = {
+    LinkElement: SmartLink,
+    pathAttributeKeyName: 'to'
+  };
+
   return (
     <TourProvider
       steps={[]}
@@ -68,6 +79,7 @@ export default function ExplorationAndAnalysisContainer() {
           datasets={timelineDatasets}
           setDatasets={setTimelineDatasets}
           openDatasetsSelectionModal={openModal}
+          onNavigation={handleNavigation}
         />
         <DatasetSelectorModal
           revealed={datasetModalRevealed}
@@ -76,10 +88,7 @@ export default function ExplorationAndAnalysisContainer() {
           timelineDatasets={timelineDatasets}
           setTimelineDatasets={setTimelineDatasets}
           datasetPathName={DATASETS_PATH}
-          linkProperties={{
-            LinkElement: SmartLink,
-            pathAttributeKeyName: 'to'
-          }}
+          linkProperties={linkProps} // @TODO: To be removed and replaced with handleNavigation callback
         />
       </PageMainContent>
     </TourProvider>

app/scripts/components/exploration/index.tsx

@@ -59,10 +59,11 @@ interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
   openDatasetsSelectionModal?: () => void;
+  onNavigation?: (path: string) => void;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
+  const { datasets, setDatasets, openDatasetsSelectionModal, onNavigation } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -111,6 +112,7 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedCompareDay={setSelectedCompareDay}
             onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
+            onNavigation={onNavigation}
           />
         </Panel>
       </PanelGroup>