clean up legends

nismod · May 30, 2024 · f6fb2f0 · f6fb2f0
1 parent 7ae1aaf
commit f6fb2f0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 48 deletions.
diff --git a/frontend/src/config/backgrounds.ts b/frontend/src/config/backgrounds.ts
diff --git a/frontend/src/map/legend/GradientLegend.tsx b/frontend/src/map/legend/GradientLegend.tsx
@@ -1,10 +1,12 @@
 import { Box, Typography } from '@mui/material';
-import { FC } from 'react';
+import { FC, ReactNode, memo } from 'react';
+
+import { ColorValue } from './RasterLegend';
 
 const legendHeight = 10;
 
 const LegendGradient: FC<{
-  colorMapValues: any[];
+  colorMapValues: ColorValue[];
   getValueLabel: (value: number) => string;
 }> = ({ colorMapValues, getValueLabel }) => {
   return (
@@ -16,7 +18,20 @@ const LegendGradient: FC<{
   );
 };
 
-export const GradientLegend = ({ label, range, colorMapValues, getValueLabel }) => (
+export interface GradientLegendProps {
+  label: string | ReactNode;
+  description?: string;
+  range: [number, number];
+  colorMapValues: ColorValue[];
+  getValueLabel: (value: number) => string;
+}
+
+export const GradientLegend:FC<GradientLegendProps> = memo(({
+  label,
+  range,
+  colorMapValues,
+  getValueLabel
+}) => (
   <Box mb={2}>
     <Typography>{label}</Typography>
     <Box
@@ -44,4 +59,4 @@ export const GradientLegend = ({ label, range, colorMapValues, getValueLabel })
       )}
     </Box>
   </Box>
-);
+));
diff --git a/frontend/src/map/legend/RasterLegend.tsx b/frontend/src/map/legend/RasterLegend.tsx
@@ -4,6 +4,14 @@ import { ViewLayer } from 'lib/data-map/view-layers';
 import { FC, useCallback } from 'react';
 import { GradientLegend } from './GradientLegend';
 import { useRasterColorMapValues } from './use-color-map-values';
+export interface ColorValue {
+  color: string;
+  value: any;
+}
+export interface RasterColorMapValues {
+  colorMapValues: ColorValue[];
+  rangeTruncated: [boolean, boolean];
+}
 
 export const RasterLegend: FC<{ viewLayer: ViewLayer }> = ({ viewLayer }) => {
   const {