Configurable metrics for analysis page

app/scripts/components/analysis/define/index.tsx

@@ -102,7 +102,7 @@
 
 const findParentDataset = (layerId: string) => {
   const parentDataset = Object.values(datasets).find((dataset) =>
     (dataset as VedaDatum<DatasetData>).data.layers.find(
       (l) => l.id === layerId
     )
   );
@@ -112,9 +112,9 @@
 export const allAvailableDatasetsLayers: DatasetLayer[] = Object.values(
   datasets
 )
   .map((dataset) => (dataset as VedaDatum<DatasetData>).data.layers)
   .flat()
-  .filter((d) => d.type !== 'vector');
+  .filter((d) => d.type !== 'vector' && !d.analysis?.exclude);
 
 export default function Analysis() {
   const { params, setAnalysisParam } = useAnalysisParams();
@@ -167,7 +167,7 @@
   const onDatasetLayerChange = useCallback(
     (e) => {
       const id = e.target.id;
       let newDatasetsLayers = [...(datasetsLayers || [])];
       if (e.target.checked) {
         const newDatasetLayer = allAvailableDatasetsLayers.find(
           (l) => l.id === id
@@ -197,14 +197,14 @@
     const selectableDatasetLayersIds = selectableDatasetLayers.map(
       (layer) => layer.id
     );
     const cleanedDatasetsLayers = datasetsLayers?.filter((l) =>
       selectableDatasetLayersIds.includes(l.id)
     );
 
     setAnalysisParam('datasetsLayers', cleanedDatasetsLayers);
     // Only update when stac search gets updated to avoid triggering an infinite
     // read/set state loop
   }, [selectableDatasetLayers, setAnalysisParam]);
 
   const showTip = !readyToLoadDatasets || !datasetsLayers?.length;
 

app/scripts/components/analysis/results/analysis-head.tsx

@@ -0,0 +1,79 @@
+import React, { Fragment } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { media } from '@devseed-ui/theme-provider';
+import { Button } from '@devseed-ui/button';
+
+import { DATA_METRICS } from './analysis-metrics-dropdown';
+
+import { FoldHeadActions } from '$components/common/fold';
+import {
+  Legend,
+  LegendTitle,
+  LegendList,
+  LegendSwatch,
+  LegendLabel
+} from '$styles/infographics';
+
+const AnalysisFoldHeadActions = styled(FoldHeadActions)`
+  width: 100%;
+
+  ${media.mediumUp`
+    width: auto;
+  `}
+
+  ${Button} {
+    margin-left: auto;
+  }
+`;
+
+const AnalysisLegend = styled(Legend)`
+  flex-flow: column nowrap;
+  align-items: flex-start;
+
+  ${media.smallUp`
+    flex-flow: row nowrap;
+    align-items: center;
+  `};
+`;
+
+const AnalysisLegendList = styled(LegendList)`
+  display: grid;
+  grid-template-columns: repeat(6, auto);
+
+  ${media.smallUp`
+    display: flex;
+    flex-flow: row nowrap;
+  `};
+`;
+
+export default function AnalysisHead() {
+  const theme = useTheme();
+
+  return (
+    <AnalysisFoldHeadActions>
+      <AnalysisLegend>
+        <LegendTitle>Legend</LegendTitle>
+        <AnalysisLegendList>
+          {DATA_METRICS.map((metric) => {
+            return (
+              <Fragment key={metric.id}>
+                <LegendSwatch>
+                  <svg height='8' width='8'>
+                    <title>{theme.color?.[metric.themeColor]}</title>
+                    <circle
+                      cx='4'
+                      cy='4'
+                      r='4'
+                      fill={theme.color?.[metric.themeColor]}
+                    />
+                  </svg>
+                </LegendSwatch>
+                <LegendLabel>{metric.label}</LegendLabel>
+              </Fragment>
+            );
+          })}
+        </AnalysisLegendList>
+      </AnalysisLegend>
+    </AnalysisFoldHeadActions>
+  );
+}