refactor(frontend): tooltip hover descriptions (#52)

Move hover descriptions to `src/config`, so that each map layer has `config/{layer}/{layer}HoverDescription`.`

frontend/src/config/assets/AssetHoverDescription.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { VectorHoverDescription } from 'map/tooltip/content/VectorHoverDescription';
+
+export const AssetHoverDescription: FC<{ hoveredObject: InteractionTarget<VectorTarget> }> = ({
+  hoveredObject,
+}) => {
+  const {
+    viewLayer,
+    target: { feature },
+  } = hoveredObject;
+
+  return (
+    <VectorHoverDescription
+      viewLayer={viewLayer}
+      feature={feature}
+    />
+  );
+};

frontend/src/map/tooltip/content/DroughtHoverDescription.tsx → frontend/src/config/drought/DroughtHoverDescription.tsx

@@ -9,7 +9,7 @@ import {
   droughtRegionsColorSpecState,
   droughtRegionsFieldSpecState,
 } from 'state/layers/modules/drought';
-import { DataDescription } from '../DataDescription';
+import { DataDescription } from 'map/tooltip/DataDescription';
 
 const DroughtRiskDescription: FC<{
   hoveredObject: InteractionTarget<VectorTarget>;

frontend/src/config/interaction-groups.ts

@@ -6,12 +6,11 @@ import {
   RasterTarget,
 } from 'state/interactions/use-interactions';
 
+import { AssetHoverDescription } from './assets/AssetHoverDescription';
 import { HazardHoverDescription } from './hazards/HazardHoverDescription';
-
-import { VectorHoverDescription } from 'map/tooltip/content/VectorHoverDescription';
-import { RegionHoverDescription } from 'map/tooltip/content/RegionHoverDescription';
-import { SolutionHoverDescription } from 'map/tooltip/content/SolutionHoverDescription';
-import { DroughtHoverDescription } from 'map/tooltip/content/DroughtHoverDescription';
+import { SolutionHoverDescription } from './solutions/SolutionHoverDescription';
+import { RegionHoverDescription } from './regions/RegionHoverDescription';
+import { DroughtHoverDescription } from './drought/DroughtHoverDescription';
 
 export const INTERACTION_GROUPS = new Map<string, InteractionGroupConfig>([
   [
@@ -69,7 +68,7 @@ export const tooltipLayers: Map<string, FC<{ hoveredObject: MapDataLayer }>> = n
   string,
   FC<{ hoveredObject: MapDataLayer }>
 >([
-  ['assets', VectorHoverDescription],
+  ['assets', AssetHoverDescription],
   ['hazards', HazardHoverDescription],
   ['regions', RegionHoverDescription],
   ['solutions', SolutionHoverDescription],

frontend/src/map/tooltip/content/RegionHoverDescription.tsx → frontend/src/config/regions/RegionHoverDescription.tsx

@@ -1,4 +1,4 @@
-import { REGIONS_METADATA } from '../../../config/regions/metadata';
+import { REGIONS_METADATA } from './metadata';
 import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
 import { useRecoilValue } from 'recoil';
 import { showPopulationState } from 'state/regions';

frontend/src/map/tooltip/content/SolutionHoverDescription.tsx → frontend/src/config/solutions/SolutionHoverDescription.tsx

@@ -7,8 +7,8 @@ import startCase from 'lodash/startCase';
 import { FC } from 'react';
 import { habitatColorMap } from 'state/layers/modules/marine';
 import { landuseColorMap } from 'state/layers/modules/terrestrial';
-import { DataDescription } from '../DataDescription';
-import { ColorBox } from './ColorBox';
+import { DataDescription } from 'map/tooltip/DataDescription';
+import { ColorBox } from 'map/tooltip/content/ColorBox';
 
 const slopeFieldSpec = {
   fieldGroup: 'properties',

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

@@ -1,21 +1,18 @@
 import { Typography } from '@mui/material';
 import { NETWORKS_METADATA } from 'config/networks/metadata';
 import { DataItem } from 'details/features/detail-components';
-import { InteractionTarget, VectorTarget } from 'state/interactions/use-interactions';
+import { VectorTarget } from 'state/interactions/use-interactions';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 import { singleViewLayerParamsState } from 'state/layers/view-layers-params';
 import { DataDescription } from '../DataDescription';
 import { ColorBox } from './ColorBox';
+import { ViewLayer } from 'lib/data-map/view-layers';
 
 export const VectorHoverDescription: FC<{
-  hoveredObject: InteractionTarget<VectorTarget>;
-}> = ({ hoveredObject }) => {
-  const {
-    viewLayer,
-    target: { feature },
-  } = hoveredObject;
-
+  viewLayer: ViewLayer;
+  feature: VectorTarget['feature'];
+}> = ({ viewLayer, feature }) => {
   const layerParams = useRecoilValue(singleViewLayerParamsState(viewLayer.id));
   const { styleParams } = layerParams;
   const { colorMap } = styleParams ?? {};