Configurable metrics for analysis page (#673)

Analysis metrics can now be selected on a chart basis.
<img width="690" alt="image"
src="https://github.com/NASA-IMPACT/veda-ui/assets/1090606/85d7728a-79e0-49d6-bdb1-61e1ba054703">

The default metrics are configurable through the dataset mdx file under
the `analysis.metrics` property of every layer.
<img width="213" alt="image"
src="https://github.com/NASA-IMPACT/veda-ui/assets/1090606/672c74b1-7cd4-4579-9e7b-d02a70b95503">

Any invalid id id discarded.

@ricardoduplos Please have a quick design sanity check

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

@@ -114,7 +114,7 @@ export const allAvailableDatasetsLayers: DatasetLayer[] = Object.values(
 )
   .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();

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