refactor(frontend): raster layer renderLegend and renderTooltip

frontend/src/config/hazards/HazardHoverDescription.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+import { InteractionTarget, RasterTarget } from 'state/interactions/use-interactions';
+import { RasterHoverDescription } from 'map/tooltip/content/RasterHoverDescription';
+
+import { HAZARDS_METADATA, HAZARD_COLOR_MAPS } from './metadata';
+
+export const HazardHoverDescription: FC<{ hoveredObject: InteractionTarget<RasterTarget> }> = ({
+  hoveredObject,
+}) => {
+  const { target, viewLayer } = hoveredObject;
+
+  const { label, dataUnit } = HAZARDS_METADATA[viewLayer.id];
+  const { scheme, range } = HAZARD_COLOR_MAPS[viewLayer.id];
+  return (
+    <RasterHoverDescription
+      color={target.color}
+      label={label}
+      dataUnit={dataUnit}
+      scheme={scheme}
+      range={range}
+    />
+  );
+};

frontend/src/config/hazards/HazardLegend.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import { RasterLegend } from 'map/legend/RasterLegend';
+import { ViewLayer } from 'lib/data-map/view-layers';
+
+import { HAZARD_COLOR_MAPS, HAZARDS_METADATA } from 'config/hazards/metadata';
+
+export const HazardLegend: FC<{ viewLayer: ViewLayer }> = ({ viewLayer }) => {
+  const { id } = viewLayer;
+  const { label, dataUnit } = HAZARDS_METADATA[id];
+  const { scheme, range } = HAZARD_COLOR_MAPS[id];
+  return <RasterLegend label={label} dataUnit={dataUnit} scheme={scheme} range={range} />;
+};

frontend/src/config/hazards/hazard-view-layer.ts

@@ -1,10 +1,14 @@
+import { createElement } from 'react';
 import GL from '@luma.gl/constants';
 import { HazardParams } from 'config/hazards/domains';
 
 import { rasterTileLayer } from 'lib/deck/layers/raster-tile-layer';
 import { ViewLayer } from 'lib/data-map/view-layers';
+import { InteractionTarget, RasterTarget } from 'state/interactions/use-interactions';
 
-import { RASTER_COLOR_MAPS } from '../color-maps';
+import { HazardLegend } from './HazardLegend';
+import { HazardHoverDescription } from './HazardHoverDescription';
+import { HAZARD_COLOR_MAPS } from './metadata';
 import { HAZARD_SOURCE } from './source';
 
 export function getHazardId<
@@ -43,7 +47,7 @@ export function hazardViewLayer(hazardType: string, hazardParams: HazardParams):
     interactionGroup: 'hazards',
     params: { hazardType, hazardParams },
     fn: ({ deckProps }) => {
-      const { scheme, range } = RASTER_COLOR_MAPS[hazardType];
+      const { scheme, range } = HAZARD_COLOR_MAPS[hazardType];
 
       return rasterTileLayer(
         {
@@ -61,5 +65,16 @@ export function hazardViewLayer(hazardType: string, hazardParams: HazardParams):
         },
       );
     },
+    renderLegend() {
+      return createElement(HazardLegend, {
+        key: hazardType,
+        viewLayer: this,
+      });
+    },
+    renderTooltip(hover: InteractionTarget<RasterTarget>) {
+      return createElement(HazardHoverDescription, {
+        hoveredObject: hover,
+      });
+    },
   };
 }

frontend/src/config/hazards/metadata.ts

@@ -17,5 +17,24 @@ export const HAZARDS_METADATA = {
   },
 };
 
+export const HAZARD_COLOR_MAPS = {
+  fluvial: {
+    scheme: 'blues',
+    range: [0, 10],
+  },
+  coastal: {
+    scheme: 'greens',
+    range: [0, 10],
+  },
+  surface: {
+    scheme: 'purples',
+    range: [0, 10],
+  },
+  cyclone: {
+    scheme: 'reds',
+    range: [0, 75],
+  },
+};
+
 export const HAZARDS_MAP_ORDER = ['cyclone', 'fluvial', 'surface', 'coastal'];
 export const HAZARDS_UI_ORDER = ['fluvial', 'surface', 'coastal', 'cyclone'];

frontend/src/config/interaction-groups.ts

@@ -6,10 +6,9 @@ import {
   RasterTarget,
 } from 'state/interactions/use-interactions';
 
-import { HAZARDS_METADATA } from './hazards/metadata';
+import { HazardHoverDescription } from './hazards/HazardHoverDescription';
 
 import { VectorHoverDescription } from 'map/tooltip/content/VectorHoverDescription';
-import { RasterHoverDescription } from 'map/tooltip/content/RasterHoverDescription';
 import { RegionHoverDescription } from 'map/tooltip/content/RegionHoverDescription';
 import { SolutionHoverDescription } from 'map/tooltip/content/SolutionHoverDescription';
 import { DroughtHoverDescription } from 'map/tooltip/content/DroughtHoverDescription';
@@ -64,18 +63,14 @@ export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
   ],
 ]);
 
-export const labelsMetadata = {
-  ...HAZARDS_METADATA,
-};
-
 type MapDataLayer = InteractionTarget<VectorTarget | RasterTarget>;
 
 export const tooltipLayers: Map<string, FC<{ hoveredObject: MapDataLayer }>> = new Map<
   string,
   FC<{ hoveredObject: MapDataLayer }>
 >([
   ['assets', VectorHoverDescription],
-  ['hazards', RasterHoverDescription],
+  ['hazards', HazardHoverDescription],
   ['regions', RegionHoverDescription],
   ['solutions', SolutionHoverDescription],
   ['drought', DroughtHoverDescription],

frontend/src/lib/data-map/view-layers.ts

@@ -56,6 +56,8 @@ export interface ViewLayer {
   legendDataFormatsFn?: ViewLayerDataFormatFunction;
   spatialType?: string;
   interactionGroup?: string;
+  renderLegend?: () => JSX.Element;
+  renderTooltip?: (hoveredObject: InteractionTarget<RasterTarget>) => JSX.Element;
 }
 
 export function viewOnlyLayer(id, fn): ViewLayer {

frontend/src/map/legend/MapLegend.tsx

@@ -4,7 +4,6 @@ import { ColorMap, FormatConfig } from 'lib/data-map/view-layers';
 import { useRecoilValue } from 'recoil';
 import { viewLayersFlatState } from 'state/layers/view-layers-flat';
 import { viewLayersParamsState } from 'state/layers/view-layers-params';
-import { RasterLegend } from './RasterLegend';
 import { VectorLegend } from './VectorLegend';
 import { Stack, Box, Paper, Divider } from '@mui/material';
 import { MobileTabContentWatcher } from 'pages/map/layouts/mobile/tab-has-content';
@@ -63,9 +62,7 @@ export const MapLegend: FC = () => {
       <MobileTabContentWatcher tabId="legend" />
       <Box p={1} maxWidth={270}>
         <Stack gap={0.3} divider={<Divider />}>
-          {hazardViewLayers.map((viewLayer) => (
-            <RasterLegend key={viewLayer.id} viewLayer={viewLayer} />
-          ))}
+          {hazardViewLayers.map((viewLayer) => viewLayer.renderLegend())}
           {Object.entries(dataColorMaps).map(([legendKey, { colorMap, formatConfig }]) => (
             <VectorLegend key={legendKey} colorMap={colorMap} legendFormatConfig={formatConfig} />
           ))}

frontend/src/map/legend/RasterLegend.tsx

@@ -1,23 +1,21 @@
-import { RASTER_COLOR_MAPS } from 'config/color-maps';
-import { labelsMetadata } from 'config/interaction-groups';
-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;
+  value: number;
 }
 export interface RasterColorMapValues {
   colorMapValues: ColorValue[];
   rangeTruncated: [boolean, boolean];
 }
 
-export const RasterLegend: FC<{ viewLayer: ViewLayer }> = ({ viewLayer }) => {
-  const { id } = viewLayer;
-  const { label, dataUnit } = labelsMetadata[id];
-  const { scheme, range } = RASTER_COLOR_MAPS[id];
-
+export const RasterLegend: FC<{
+  label: string;
+  dataUnit: string;
+  scheme: string;
+  range: [number, number];
+}> = ({ label, dataUnit, scheme, range }) => {
   const { error, loading, colorMapValues } = useRasterColorMapValues(scheme, range);
 
   const getValueLabel = useCallback(

frontend/src/map/tooltip/content/RasterHoverDescription.tsx

@@ -1,10 +1,5 @@
 import { FC, useMemo } from 'react';
 
-import { InteractionTarget, RasterTarget } from 'state/interactions/use-interactions';
-
-import { RASTER_COLOR_MAPS } from 'config/color-maps';
-import { labelsMetadata } from 'config/interaction-groups';
-
 import { useRasterColorMapValues } from '../../legend/use-color-map-values';
 import { ColorBox } from './ColorBox';
 import { Box } from '@mui/material';
@@ -28,17 +23,13 @@ function formatHazardValue(color, value, dataUnit) {
   );
 }
 
-export const RasterHoverDescription: FC<{ hoveredObject: InteractionTarget<RasterTarget> }> = ({
-  hoveredObject,
-}) => {
-  const { color } = hoveredObject.target;
-
-  const {
-    viewLayer: { id },
-  } = hoveredObject;
-  const { label, dataUnit } = labelsMetadata[id];
-  const { scheme, range } = RASTER_COLOR_MAPS[id];
-
+export const RasterHoverDescription: FC<{
+  color: [number, number, number, number];
+  label: string;
+  dataUnit: string;
+  scheme: string;
+  range: [number, number];
+}> = ({ color, label, dataUnit, scheme, range }) => {
   const title = `${label}`;
 
   const { colorMapValues } = useRasterColorMapValues(scheme, range);