Refactor D3 Map to Support Both Rate Charts and Unknowns Charts

frontend/src/cards/MapCard.tsx

@@ -1,8 +1,8 @@
 import { GridView } from '@mui/icons-material'
 import { useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import ChoroplethMap from '../charts/ChoroplethMap'
 import { Legend } from '../charts/Legend'
+import ChoroplethMap from '../charts/choroplethMap/index'
 import { type CountColsMap, RATE_MAP_SCALE } from '../charts/mapGlobals'
 import { getHighestLowestGroupsByFips } from '../charts/mapHelperFunctions'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
@@ -553,8 +553,8 @@ function MapCardWithKey(props: MapCardProps) {
                       }
                       signalListeners={signalListeners}
                       mapConfig={mapConfig}
-                      scaleConfig={scale}
                       isPhrmaAdherence={isPhrmaAdherence}
+                      updateFipsCallback={props.updateFipsCallback}
                     />
                   </div>
 

frontend/src/cards/UnknownsMapCard.tsx

@@ -2,9 +2,12 @@ import { useLocation } from 'react-router-dom'
 import type { Topology } from 'topojson-specification'
 import ChoroplethMap from '../charts/choroplethMap/index'
 import type { DataPoint } from '../charts/choroplethMap/types'
-import { MAP_SCHEMES, type MapConfig } from '../charts/choroplethMap/types'
+import { MAP_SCHEMES } from '../charts/mapGlobals'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
-import type { DataTypeConfig } from '../data/config/MetricConfigTypes'
+import type {
+  DataTypeConfig,
+  MapConfig,
+} from '../data/config/MetricConfigTypes'
 import {
   Breakdowns,
   DEMOGRAPHIC_DISPLAY_TYPES_LOWER_CASE,

frontend/src/charts/ChoroplethMap.tsx

@@ -308,7 +308,7 @@ export default function ChoroplethMap(props: ChoroplethMapProps) {
           ? UNKNOWNS_MAP_SCALE
           : RATE_MAP_SCALE,
         /* fieldRange? */ props.fieldRange,
-        /* scaleColorScheme? */ props.mapConfig.scheme,
+        /* scaleColorScheme? */ props.mapConfig.scheme as string,
         /* isTerritoryCircle? */ props.fips.isTerritory(),
         /* reverse? */ !props.mapConfig.higherIsBetter && !props.isUnknownsMap,
       )

frontend/src/charts/choroplethMap/TooltipContent.tsx

@@ -0,0 +1,62 @@
+import type React from 'react'
+import type { MetricConfig } from '../../data/config/MetricConfigTypes'
+import { het } from '../../styles/DesignTokens'
+
+import { formatMetricValue } from './mapHelpers'
+import type { TooltipFeature } from './types'
+
+const { borderColor } = het
+
+interface TooltipContentProps {
+  feature: TooltipFeature
+  dataMap: Map<string, any>
+  metricConfig: MetricConfig
+  geographyType?: string
+}
+
+const TooltipContent: React.FC<TooltipContentProps> = ({
+  feature,
+  dataMap,
+  metricConfig,
+  geographyType = '',
+}) => {
+  const name = feature.properties?.name || String(feature.id)
+  const data = dataMap.get(feature.id as string)
+
+  if (!data) {
+    return (
+      <div>
+        <strong>
+          {name} {geographyType}
+        </strong>
+        <br />
+        No data available
+      </div>
+    )
+  }
+
+  const entries = Object.entries(data).filter(([key]) => key !== 'value')
+  const [firstLabel, firstValue] = entries[0] ?? ['', 0]
+  const remainingEntries = entries.slice(1)
+
+  return (
+    <div>
+      <strong>
+        {name} {geographyType}
+      </strong>
+      <div style={{ textAlign: 'center' }}>
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: borderColor }}>{firstLabel}:</span>{' '}
+          {formatMetricValue(firstValue as number, metricConfig)}
+        </div>
+        {remainingEntries.map(([label, value]) => (
+          <div key={label} style={{ marginBottom: 4 }}>
+            <span style={{ color: borderColor }}>{label}:</span> {String(value)}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default TooltipContent

frontend/src/charts/choroplethMap/colorSchemes.ts

@@ -0,0 +1,47 @@
+import * as d3 from 'd3'
+import type { ColorScheme } from 'vega'
+import { het } from '../../styles/DesignTokens'
+
+export const interpolateDarkGreen = d3.piecewise(d3.interpolateRgb.gamma(2.2), [
+  het.mapDarkest,
+  het.mapDarker,
+  het.mapDark,
+  het.mapLight,
+  het.mapLighter,
+  het.mapLightest,
+  het.mapLightZero,
+])
+
+export const interpolatePlasma = d3.piecewise(d3.interpolateRgb.gamma(2.2), [
+  het.mapWomenDarkZero,
+  het.mapWomenDarkest,
+  het.mapWomenDarker,
+  het.mapWomenDark,
+  het.mapWomenLight,
+  het.mapWomenLighter,
+  het.mapWomenLightest,
+  het.mapWomenLightZero,
+])
+
+export const interpolatedarkRed = d3.piecewise(d3.interpolateRgb.gamma(2.2), [
+  het.mapYouthDarkZero,
+  het.mapYouthDarkest,
+  het.mapYouthDarker,
+  het.mapYouthDark,
+  het.mapYouthMid,
+  het.mapYouthLight,
+  het.mapYouthLighter,
+  het.mapYouthLightest,
+  het.mapYouthLightZero,
+])
+
+export const D3_MAP_SCHEMES: Partial<
+  Record<ColorScheme, (t: number) => string>
+> = {
+  darkgreen: interpolateDarkGreen,
+  plasma: interpolatePlasma,
+  inferno: d3.interpolateInferno,
+  viridis: d3.interpolateViridis,
+  greenblue: d3.interpolateGnBu,
+  darkred: interpolatedarkRed,
+}

frontend/src/charts/choroplethMap/index.tsx

@@ -1,120 +1,140 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { scaleType } from 'vega-lite/build/src/compile/scale/type'
+import { CAWP_METRICS } from '../../data/providers/CawpProvider'
+import { PHRMA_METRICS } from '../../data/providers/PhrmaProvider'
 import { useIsBreakpointAndUp } from '../../utils/hooks/useIsBreakpointAndUp'
 import { useResponsiveWidth } from '../../utils/hooks/useResponsiveWidth'
 import { INVISIBLE_PRELOAD_WIDTH } from '../mapGlobals'
+import { embedHighestLowestGroups } from '../mapHelperFunctions'
 import { HEIGHT_WIDTH_RATIO } from '../utils'
 import {
   createColorScale,
   createFeatures,
   createProjection,
+  processPhrmaData,
 } from './mapHelpers'
 import { renderMap } from './renderMap'
-import {
-  createTooltipContainer,
-  createTooltipLabel,
-  getTooltipPairs,
-} from './tooltipUtils'
-import type { ChoroplethMapProps } from './types'
+import { createTooltipContainer } from './tooltipUtils'
+import type { ChoroplethMapProps, DataPoint } from './types'
 
 const ChoroplethMap = (props: ChoroplethMapProps) => {
-  const {
-    data,
-    metric,
-    isUnknownsMap,
-    activeDemographicGroup,
-    demographicType,
-    fips,
-    geoData,
-    showCounties,
-    overrideShapeWithCircle,
-    updateFipsCallback,
-    mapConfig,
-  } = props
+  const { data, metric, highestLowestGroupsByFips } = props
+  const isMobile = !useIsBreakpointAndUp('md')
   const [ref, width] = useResponsiveWidth()
   const svgRef = useRef<SVGSVGElement | null>(null)
-  const isMobile = !useIsBreakpointAndUp('md')
 
-  const heightWidthRatio = overrideShapeWithCircle
+  const tooltipContainerRef = useRef<ReturnType<
+    typeof createTooltipContainer
+  > | null>(null)
+
+  const isCawp = CAWP_METRICS.includes(metric.metricId)
+  const isPhrma = PHRMA_METRICS.includes(metric.metricId)
+
+  const suppressedData = useMemo(
+    () => (isPhrma ? processPhrmaData(data, props.countColsMap) : data),
+    [data, isPhrma, props.countColsMap],
+  )
+
+  const dataWithHighestLowest: DataPoint[] = useMemo(
+    () =>
+      !props.isUnknownsMap && !props.isMulti
+        ? embedHighestLowestGroups(suppressedData, highestLowestGroupsByFips)
+        : suppressedData,
+    [
+      suppressedData,
+      highestLowestGroupsByFips,
+      props.isUnknownsMap,
+      props.isMulti,
+    ],
+  )
+
+  const heightWidthRatio = props.overrideShapeWithCircle
     ? HEIGHT_WIDTH_RATIO * 2
     : HEIGHT_WIDTH_RATIO
-
   const height = width * heightWidthRatio
 
-  const tooltipContainer = createTooltipContainer()
-
   useEffect(() => {
     if (!data.length || !svgRef.current || !width) return
 
+    if (!tooltipContainerRef.current) {
+      tooltipContainerRef.current = createTooltipContainer()
+    }
+
     const initializeMap = async () => {
       const colorScale = createColorScale({
-        data,
+        dataWithHighestLowest,
         metricId: metric.metricId,
-        scaleType: 'sequentialSymlog',
-        colorScheme: mapConfig.scheme,
-      })
-
-      const features = await createFeatures({
-        showCounties,
-        parentFips: fips.code,
-        geoData,
+        colorScheme: props.mapConfig.scheme,
+        isUnknown: props.isUnknownsMap,
+        fips: props.fips,
+        reverse: !props.mapConfig.higherIsBetter && !props.isUnknownsMap,
       })
 
-      const projection = createProjection({ fips, width, height, features })
-
-      const tooltipLabel = createTooltipLabel(
-        metric,
-        activeDemographicGroup,
-        demographicType,
-        isUnknownsMap,
+      const features = await createFeatures(
+        props.showCounties,
+        props.fips.code,
+        props.geoData,
       )
 
-      const tooltipPairs = getTooltipPairs(tooltipLabel)
+      const projection = createProjection(props.fips, width, height, features)
 
       renderMap({
         svgRef,
         geoData: { features, projection },
-        data,
+        dataWithHighestLowest,
         metric,
         width,
         height,
-        tooltipContainer,
-        tooltipPairs,
-        tooltipLabel,
-        showCounties,
-        updateFipsCallback,
-        mapConfig,
+        tooltipContainer: tooltipContainerRef.current!,
+        showCounties: props.showCounties,
+        updateFipsCallback: props.updateFipsCallback,
         colorScale,
-        fips,
+        fips: props.fips,
         isMobile,
+        activeDemographicGroup: props.activeDemographicGroup,
+        demographicType: props.demographicType,
+        isCawp,
+        countColsMap: props.countColsMap,
+        isUnknownsMap: props.isUnknownsMap,
+        extremesMode: props.extremesMode,
       })
     }
+
     initializeMap()
+
     return () => {
-      tooltipContainer.remove()
+      if (tooltipContainerRef.current) {
+        tooltipContainerRef.current.remove()
+        tooltipContainerRef.current = null
+      }
     }
   }, [
     data,
-    geoData,
+    props.geoData,
     width,
     height,
-    showCounties,
-    overrideShapeWithCircle,
+    props.showCounties,
+    props.overrideShapeWithCircle,
     metric,
+    dataWithHighestLowest,
+    props.updateFipsCallback,
+    props.mapConfig,
+    props.fips,
+    isMobile,
+    props.activeDemographicGroup,
+    props.demographicType,
+    isCawp,
+    props.countColsMap,
+    props.isUnknownsMap,
+    scaleType,
   ])
 
   return (
     <div
-      className={`justify-center ${
-        width === INVISIBLE_PRELOAD_WIDTH ? 'hidden' : 'block'
-      }`}
-      ref={overrideShapeWithCircle ? undefined : ref}
+      className={`justify-center ${width === INVISIBLE_PRELOAD_WIDTH ? 'hidden' : 'block'}`}
+      ref={props.overrideShapeWithCircle ? undefined : ref}
     >
-      <svg
-        ref={svgRef}
-        style={{
-          width: '100%',
-        }}
-      />
+      <svg ref={svgRef} style={{ width: '100%' }} />
     </div>
   )
 }