diff --git a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx index cfb89f1f2..35482afc8 100644 --- a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx +++ b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx @@ -3,12 +3,15 @@ import { useTheme } from 'styled-components'; import { extent, scaleLinear, ScaleTime, line, ScaleLinear } from 'd3'; import { useAtomValue } from 'jotai'; import { AnimatePresence, motion } from 'framer-motion'; - +import styled from 'styled-components'; +import { + CollecticonCog, +} from '@devseed-ui/collecticons'; import { isExpandedAtom } from '../../atoms/timeline'; import { RIGHT_AXIS_SPACE } from '../../constants'; import { DatasetTrackMessage } from './dataset-track-message'; import { DataMetric } from './analysis-metrics'; - +import LayerChartAnalysisMenu from './layer-chart-analysis-menu'; import { getNumForChart } from '$components/common/chart/utils'; import { TimelineDatasetAnalysisSuccess, @@ -24,10 +27,19 @@ interface DatasetChartProps { dataset: TimelineDatasetSuccess; activeMetrics: DataMetric[]; highlightDate?: Date; + onUpdateSettings: (type: string, m: DataMetric[]) => void; } +const ChartAnalysisMenu = styled.div` + width: inherit; + position: relative; + display: flex; + justify-content: end; + margin-right: 2.3rem; +`; + export function DatasetChart(props: DatasetChartProps) { - const { xScaled, width, isVisible, dataset, activeMetrics, highlightDate } = + const { xScaled, width, isVisible, dataset, activeMetrics, highlightDate, onUpdateSettings } = props; const analysisData = dataset.analysis as TimelineDatasetAnalysisSuccess; @@ -58,6 +70,8 @@ export function DatasetChart(props: DatasetChartProps) { ); }, [yExtent, height]); + const chartAnalysisIconTrigger: JSX.Element = ; + return (
{!activeMetrics.length && ( @@ -65,6 +79,9 @@ export function DatasetChart(props: DatasetChartProps) { There are no active metrics to visualize. )} + + + @@ -195,12 +212,13 @@ function AxisGrid(props: AxisGridProps) { > {yLabel && ( {yLabel} 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 a324596fd..ad61a39ca 100644 --- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx +++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx @@ -31,6 +31,7 @@ import { import { useDatasetHover } from '$components/exploration/hooks/use-dataset-hover'; import { useTimelineDatasetAtom, + useTimelineDatasetSettings, useTimelineDatasetVisibility } from '$components/exploration/atoms/hooks'; import { @@ -102,6 +103,8 @@ export function DatasetListItem(props: DatasetListItemProps) { const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom); const [modalLayerInfo, setModalLayerInfo] = React.useState(); + const [, setSetting] = useTimelineDatasetSettings(datasetAtom); + const queryClient = useQueryClient(); const retryDatasetMetadata = useCallback(() => { @@ -252,6 +255,7 @@ export function DatasetListItem(props: DatasetListItemProps) { dataset={dataset} activeMetrics={analysisMetrics} highlightDate={dataPoint?.date} + onUpdateSettings={setSetting} /> )} diff --git a/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx b/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx new file mode 100644 index 000000000..bf597036b --- /dev/null +++ b/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Dropdown } from '@devseed-ui/dropdown'; +import AnalysisMetrics, { DataMetric } from './analysis-metrics'; +import { TipButton } from '$components/common/tip-button'; + + +interface ChartAnalysisProps { + triggerIcon: JSX.Element; + onChange: (changeType: string, item) => void; + activeMetrics: DataMetric[]; +} + +const IconButton = styled(TipButton)` + z-index: 1; +`; + +export default function LayerChartAnalysisMenu ({activeMetrics, triggerIcon, onChange}: ChartAnalysisProps) { + return ( + ( + + {triggerIcon} + + )} + > + onChange('analysisMetrics', m)} + /> + + ); +} \ No newline at end of file