From 79e1683fb072ce201f0dfe71858152abbcab147d Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 17 Dec 2024 15:54:14 -0500 Subject: [PATCH] nav callback for exploration for layer-info-modal --- .../components/datasets/dataset-list-item.tsx | 4 +++- .../components/datasets/dataset-list.tsx | 4 +++- .../components/layer-info-modal.tsx | 24 +++++++++---------- .../components/timeline/timeline.tsx | 6 +++-- .../components/exploration/container.tsx | 17 +++++++++---- app/scripts/components/exploration/index.tsx | 4 +++- 6 files changed, 38 insertions(+), 21 deletions(-) diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx index 34fab5edd..64390cda0 100644 --- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx +++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx @@ -94,10 +94,11 @@ interface DatasetListItemProps { xScaled?: ScaleTime; 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} /> )} diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/app/scripts/components/exploration/components/datasets/dataset-list.tsx index b0c7b538d..dc1178757 100644 --- a/app/scripts/components/exploration/components/datasets/dataset-list.tsx +++ b/app/scripts/components/exploration/components/datasets/dataset-list.tsx @@ -16,10 +16,11 @@ const DatasetListSelf = styled.ul` interface DatasetListProps { width: number; xScaled?: ScaleTime; + 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} /> ))} diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx index 977bbd254..8a4b8e10c 100644 --- a/app/scripts/components/exploration/components/layer-info-modal.tsx +++ b/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` - &&& { - ${({ 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 ( } footerContent={ - + } /> ); diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx index 8655f34bb..4881a6915 100644 --- a/app/scripts/components/exploration/components/timeline/timeline.tsx +++ b/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} > - + diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx index b8439c738..16020a585 100644 --- a/app/scripts/components/exploration/container.tsx +++ b/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 ( diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx index 5e4242cba..a809507f3 100644 --- a/app/scripts/components/exploration/index.tsx +++ b/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} />