refactor(frontend): tooltip component config (#49)

Configure tooltip components for each layer ID in `src/config/interaction-groups`, so that we can edit new layers in one place.

frontend/src/config/interaction-groups.ts

@@ -1,6 +1,19 @@
-import { InteractionGroupConfig } from 'state/interactions/use-interactions';
+import { FC } from 'react';
+import {
+  InteractionGroupConfig,
+  InteractionTarget,
+  VectorTarget,
+  RasterTarget,
+} from 'state/interactions/use-interactions';
+
 import { HAZARDS_METADATA } from './hazards/metadata';
 
+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';
+
 export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
   [
     'assets',
@@ -54,3 +67,16 @@ 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],
+  ['regions', RegionHoverDescription],
+  ['solutions', SolutionHoverDescription],
+  ['drought', DroughtHoverDescription],
+]);

frontend/src/map/tooltip/TooltipContent.tsx

@@ -2,39 +2,22 @@ import { Box, Paper } from '@mui/material';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { VectorHoverDescription } from './content/VectorHoverDescription';
-import { RasterHoverDescription } from './content/RasterHoverDescription';
-import { RegionHoverDescription } from './content/RegionHoverDescription';
+import { tooltipLayers } from 'config/interaction-groups';
 import { layerHoverStates } from 'state/interactions/interaction-state';
-import { InteractionTarget, VectorTarget, RasterTarget } from 'state/interactions/use-interactions';
-import { SolutionHoverDescription } from './content/SolutionHoverDescription';
-import { DroughtHoverDescription } from './content/DroughtHoverDescription';
 import { ErrorBoundary } from 'lib/react/ErrorBoundary';
 
-type MapDataLayer = InteractionTarget<VectorTarget | RasterTarget>;
-
 const TooltipSection = ({ children }) => (
   <Box p={1} borderBottom="1px solid #ccc">
     {children}
   </Box>
 );
 
-const tooltipLayers: Map<string, FC<{ hoveredObject: MapDataLayer }>> = new Map<
-  string,
-  FC<{ hoveredObject: MapDataLayer }>
->([
-  ['assets', VectorHoverDescription],
-  ['hazards', RasterHoverDescription],
-  ['regions', RegionHoverDescription],
-  ['solutions', SolutionHoverDescription],
-  ['drought', DroughtHoverDescription],
-]);
 const layerEntries = [...tooltipLayers.entries()];
 
 export const TooltipContent: FC = () => {
   const layerStates = useRecoilValue(layerHoverStates);
 
-  const doShow = [...layerStates.values()].some(({ isHovered }) => isHovered);
+  const doShow = [...layerStates.values()].some((layerState) => layerState.isHovered);
 
   if (!doShow) return null;