Add analysis metrics menu to chart (#860)

This PR adds the analysis metrics menu back to each layer list item in
the explorations page.

Ticket [here](#856)
Design
[here](#856 (comment))

Question for @faustoperez related to icon button location. I moved the
button closer to the right-aligned because of the overlapping arrows.
Please let me know what you think. I discuss this more in the demo video
if you can take a look. Thanks!

Demo vid:
https://www.loom.com/share/56d013aade7945fdb40bff8cd2f3dc56

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,13 +70,18 @@ export function DatasetChart(props: DatasetChartProps) {
     );
   }, [yExtent, height]);
 
+  const chartAnalysisIconTrigger: JSX.Element = <CollecticonCog meaningful title='View layer options' />;
+
   return (
     <div>
       {!activeMetrics.length && (
         <DatasetTrackMessage>
           There are no active metrics to visualize.
         </DatasetTrackMessage>
       )}
+      <ChartAnalysisMenu>
+        <LayerChartAnalysisMenu activeMetrics={activeMetrics} onChange={onUpdateSettings} triggerIcon={chartAnalysisIconTrigger} />
+      </ChartAnalysisMenu>
       <svg width={width + RIGHT_AXIS_SPACE} height={height}>
         <clipPath id='data-clip'>
           <rect width={width} height={height} />
@@ -195,12 +212,13 @@ function AxisGrid(props: AxisGridProps) {
         >
           {yLabel && (
             <text
-              y={width + RIGHT_AXIS_SPACE - 20}
+              y={width + RIGHT_AXIS_SPACE - 45}
               x={-height / 2}
               transform='rotate(-90)'
               textAnchor='middle'
               fontSize='0.75rem'
               fill={theme.color?.base}
+              margin-right='2rem'
             >
               {yLabel}
             </text>

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<LayerInfoModalData>();
+  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}
                 />
               )}
             </>

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 (
+    <Dropdown
+      alignment='right'
+      direction='up'
+      triggerElement={(props) => (
+        <IconButton
+          tipContent='Analysis metrics'
+          variation='base-text'
+          size='small'
+          fitting='skinny'
+          {...props}
+        >
+          {triggerIcon}
+        </IconButton>
+      )}
+    >
+      <AnalysisMetrics
+        activeMetrics={activeMetrics}
+        onMetricsChange={(m) => onChange('analysisMetrics', m)}
+      />
+    </Dropdown>
+  );
+}