@cdc/map 4.25.7 → 4.25.8

package/src/helpers/handleMapAriaLabels.ts

@@ -3,7 +3,7 @@ export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
   try {
     if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
     const {
-      general: { title, geoType, statePicked }
+      general: { title, geoType, statesPicked }
     } = state
     let ariaLabel = ''
     switch (geoType) {
@@ -17,7 +17,7 @@ export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
         ariaLabel += `United States county map`
         break
       case 'single-state':
-        ariaLabel += `${statePicked.stateName} county map`
+        ariaLabel += `${statesPicked.map(sp => sp.stateName).join(', ')} county map`
         break
       case 'us-region':
         ariaLabel += `United States HHS Region map`

package/src/hooks/useStateZoom.tsx

@@ -1,12 +1,12 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useMemo, useCallback } from 'react'
 import ConfigContext, { MapDispatchContext } from '../context'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
 import { MapContext } from '../types/MapContext'
 import { geoPath, GeoPath } from 'd3-geo'
-import { getFilterControllingStatePicked } from '../components/UsaMap/helpers/map'
+import { getFilterControllingStatesPicked } from '../components/UsaMap/helpers/map'
 import { supportedStatesFipsCodes } from '../data/supported-geos'
 import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
-import _ from 'lodash'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 interface StateData {
   geometry: { type: 'MultiPolygon'; coordinates: number[][][][] }
@@ -18,116 +18,146 @@ interface StateData {
 }
 
 const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
-  const { config, runtimeData, position } = useContext<MapContext>(ConfigContext)
-  const statePicked = getFilterControllingStatePicked(config, runtimeData)
+  const { config, runtimeData, position, interactionLabel } = useContext<MapContext>(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
 
+  // Get statesPicked with memoization
+  const statesPicked = useMemo(() => {
+    const result = getFilterControllingStatesPicked(config, runtimeData)
+    if (!result) return []
+    if (!Array.isArray(result)) return [result]
+    return result
+  }, [config.general.statesPicked, runtimeData])
+
+  // Memoize expensive computations
+  const statesData = useMemo(() => {
+    return statesPicked.map(state => ({
+      fipsCode: Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === state),
+      stateName: state
+    }))
+  }, [statesPicked])
+
+  // Memoize projection calculations
+  const projectionData = useMemo(() => {
+    const projection = geoAlbersUsaTerritories()
+      .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
+      .scale(1)
+
+    const _statesPickedData = topoData?.states?.filter(s => statesPicked.includes(s.properties.name))
+
+    const combinedData = _statesPickedData?.length
+      ? {
+          type: 'FeatureCollection',
+          features: _statesPickedData
+        }
+      : null
+
+    const newProjection = combinedData
+      ? projection.fitExtent(
+          [
+            [SVG_PADDING, SVG_PADDING],
+            [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
+          ],
+          combinedData
+        )
+      : projection
+
+    const path: GeoPath = geoPath().projection(projection)
+    const featureCenter = combinedData ? path.centroid(combinedData as any) : [0, 0]
+    const stateCenter = newProjection.invert(featureCenter)
+
+    return { projection, newProjection, stateCenter }
+  }, [topoData, statesPicked])
+
+  const setScaleAndTranslate = useCallback(
+    (zoomFunction: string = '') => {
+      const _prevPosition = config.mapPosition
+      let newZoom = _prevPosition.zoom
+      let newCoordinates = _prevPosition.coordinates
+      if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
+        newZoom = _prevPosition.zoom * 1.5
+        newCoordinates =
+          _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
+            ? _prevPosition.coordinates
+            : projectionData.stateCenter
+        publishAnalyticsEvent('map_zoomed_in', 'click', `${interactionLabel}|${newZoom}|${newCoordinates}`, 'map')
+      } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
+        newZoom = _prevPosition.zoom / 1.5
+        newCoordinates =
+          _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
+            ? _prevPosition.coordinates
+            : projectionData.stateCenter
+      } else if (zoomFunction === 'reset') {
+        newZoom = 1
+        newCoordinates = projectionData.stateCenter
+      }
+
+      dispatch({ type: 'SET_POSITION', payload: { coordinates: newCoordinates, zoom: newZoom } })
+
+      if (zoomFunction === 'reset') {
+        dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] }) // needed for state switcher
+        dispatch({ type: 'SET_SCALE', payload: 1 }) // needed for state switcher
+        publishAnalyticsEvent('map_reset_zoom_level', 'click', interactionLabel, 'map')
+      }
+    },
+    [config.mapPosition, projectionData.stateCenter, interactionLabel, dispatch]
+  )
+
+  // Essential fix: Remove config from dependencies to prevent infinite loops
   useEffect(() => {
-    const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
-    const stateName = statePicked
-    const stateData = { fipsCode, stateName }
-    const newConfig = _.cloneDeep(config)
-    newConfig.general.statePicked = stateData
-    const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked)
+    if (!topoData) return
 
     dispatch({ type: 'SET_SCALE', payload: 1 })
     dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] })
-    dispatch({ type: 'SET_CONFIG', payload: newConfig })
-    dispatch({ type: 'SET_STATE_TO_SHOW', payload: stateToShow })
-  }, [topoData])
+    dispatch({ type: 'SET_STATES_TO_SHOW', payload: statesPicked })
+  }, [topoData, statesPicked, dispatch])
 
   useEffect(() => {
-    const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
-    const stateName = statePicked
-    const stateData = { fipsCode, stateName }
-    const newConfig = _.cloneDeep(config)
-    newConfig.general.statePicked = stateData
-    dispatch({ type: 'SET_CONFIG', payload: newConfig })
-    setScaleAndTranslate('reset')
-  }, [statePicked])
-
-  // TODO: same as city list projection?
-  const projection = geoAlbersUsaTerritories()
-    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
-    .scale(1)
-
-  const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
-  const newProjection = projection.fitExtent(
-    [
-      [SVG_PADDING, SVG_PADDING],
-      [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
-    ],
-    _statePickedData
-  )
+    const currentStatesPicked = config.general.statesPicked?.map(state => state.stateName) || []
 
-  // Work for centering the state.
-  let [x, y] = newProjection.translate()
-  x = x - SVG_WIDTH / 2
-  y = y - SVG_HEIGHT / 2
+    const alreadySet =
+      currentStatesPicked.length === statesPicked.length &&
+      currentStatesPicked.every((s: string) => statesPicked.includes(s))
 
-  const path: GeoPath = geoPath().projection(projection)
-  const featureCenter = path.centroid(_statePickedData)
-  const stateCenter = newProjection.invert(featureCenter)
+    if (alreadySet) return
 
-  const switchState = () => {
-    dispatch({ type: 'SET_STATE_TO_SHOW', payload: _statePickedData })
-    setScaleAndTranslate('reset')
-  }
+    const newConfig = { ...config }
+    newConfig.general = { ...config.general, statesPicked: statesData }
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
+  }, [statesPicked, statesData, dispatch])
 
-  const setScaleAndTranslate = (zoomFunction: string = '') => {
-    const _prevPosition = position
-    let newZoom = _prevPosition.zoom
-    let newCoordinates = _prevPosition.coordinates
-    if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
-      newZoom = _prevPosition.zoom * 1.5
-      newCoordinates =
-        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
-          ? _prevPosition.coordinates
-          : stateCenter
-    } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
-      newZoom = _prevPosition.zoom / 1.5
-      newCoordinates =
-        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
-          ? _prevPosition.coordinates
-          : stateCenter
-    } else if (zoomFunction === 'reset') {
-      newZoom = 1
-      newCoordinates = stateCenter
-    }
-
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: newCoordinates, zoom: newZoom } })
-
-    if (zoomFunction === 'reset') {
-      dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] }) // needed for state switcher
-      dispatch({ type: 'SET_SCALE', payload: 1 }) // needed for state switcher
-    }
-  }
+  const switchState = useCallback(() => {
+    dispatch({ type: 'SET_STATES_TO_SHOW', payload: statesPicked })
+  }, [statesPicked, setScaleAndTranslate, dispatch])
 
-  const handleZoomIn = () => {
+  const handleZoomIn = useCallback(() => {
     setScaleAndTranslate('zoomIn')
-  }
+  }, [setScaleAndTranslate])
 
-  const handleZoomOut = () => {
+  const handleZoomOut = useCallback(() => {
     setScaleAndTranslate('zoomOut')
-  }
+  }, [setScaleAndTranslate])
 
-  const handleMoveEnd = position => {
-    dispatch({ type: 'SET_POSITION', payload: position })
-  }
+  const handleMoveEnd = useCallback(
+    position => {
+      dispatch({ type: 'SET_POSITION', payload: position })
+    },
+    [dispatch]
+  )
 
-  const handleReset = () => {
+  const handleReset = useCallback(() => {
     setScaleAndTranslate('reset')
-  }
+  }, [setScaleAndTranslate])
 
   return {
-    statePicked,
+    statesPicked,
     setScaleAndTranslate,
     switchState,
     handleZoomIn,
     handleZoomOut,
     handleMoveEnd,
     handleReset,
-    projection
+    projection: projectionData.projection
   }
 }
 

package/src/index.jsx

@@ -12,6 +12,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcMap isEditor={isEditor} configUrl={domContainer.attributes['data-config'].value} containerEl={domContainer} />
+    <CdcMap
+      isEditor={isEditor}
+      configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={domContainer.attributes['data-config'].value}
+      containerEl={domContainer}
+    />
   </React.StrictMode>
 )

package/src/scss/main.scss

@@ -15,7 +15,8 @@
 .cdc-map-outer-container {
   position: relative;
   display: flex; // Needed for the main content
-  .loading > div.la-ball-beat {
+
+  .loading>div.la-ball-beat {
     margin-top: 20%;
   }
 
@@ -52,12 +53,14 @@
     &.bottom {
       flex-direction: column;
     }
+
     &.top {
       flex-direction: column-reverse;
     }
 
     &.modal-background {
       position: relative;
+
       &::before {
         content: ' ';
         position: absolute;
@@ -65,6 +68,7 @@
         bottom: 0;
         z-index: 7;
       }
+
       .modal-content {
         background: #fff;
         position: absolute;
@@ -80,8 +84,10 @@
         padding: 16px 40px;
         min-width: 250px;
         width: auto;
-        max-height: 90vh; /* Constrain the modal's height to 90% of the viewport */
-        overflow-y: auto; /* Enable vertical scrolling if content overflows */
+        max-height: 90vh;
+        /* Constrain the modal's height to 90% of the viewport */
+        overflow-y: auto;
+        /* Enable vertical scrolling if content overflows */
         font-size: 1rem;
         line-height: 1.4em;
       }
@@ -122,16 +128,15 @@
         margin-left: 0.5em;
       }
 
-      .modal-content.capitalize p {
-        text-transform: capitalize;
-      }
-
       /* Responsive adjustments for smaller screens */
       @media (max-width: 1048px) {
         .modal-content {
-          width: 90%; /* Adjust width to fit smaller screens */
-          top: 10%; /* Offset from the top for better usability */
-          transform: translate(-50%, 0); /* Remove vertical centering */
+          width: 90%;
+          /* Adjust width to fit smaller screens */
+          top: 10%;
+          /* Offset from the top for better usability */
+          transform: translate(-50%, 0);
+          /* Remove vertical centering */
         }
       }
     }
@@ -141,6 +146,7 @@
     em {
       font-style: italic;
     }
+
     strong {
       font-weight: bold;
     }
@@ -167,25 +173,30 @@
     z-index: 6;
     width: 100%;
     border-top: var(--lightGray) 1px solid;
+
     label {
       flex-grow: 1;
-      > div.select-heading {
+
+      >div.select-heading {
         font-size: 1.1em;
         font-weight: 600;
         margin-bottom: 0.75em;
       }
     }
+
     form {
       max-width: 400px;
       display: flex;
       align-items: flex-end;
     }
+
     select {
       font-size: 1.2em;
       display: inline-block;
       vertical-align: top;
       width: 100%;
     }
+
     input {
       color: #fff;
       font-weight: 700;
@@ -202,4 +213,4 @@
   [tabIndex]:focus {
     outline-color: rgb(0, 95, 204);
   }
-}
+}

package/src/store/map.actions.ts

@@ -20,7 +20,7 @@ type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
 type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
 type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
 type SET_SCALE = Action<'SET_SCALE', number>
-type SET_STATE_TO_SHOW = Action<'SET_STATE_TO_SHOW', string>
+type SET_STATES_TO_SHOW = Action<'SET_STATES_TO_SHOW', string[]>
 type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
 type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
 
@@ -39,7 +39,7 @@ export type MapActions =
   | SET_RUNTIME_FILTERS
   | SET_RUNTIME_LEGEND
   | SET_SCALE
-  | SET_STATE_TO_SHOW
+  | SET_STATES_TO_SHOW
   | SET_TOPO_DATA
   | SET_TRANSLATE
 

package/src/store/map.reducer.ts

@@ -24,7 +24,7 @@ export const getInitialState = (configObj = {}): MapState => {
     runtimeData: { init: true },
     runtimeFilters: [],
     runtimeLegend: [],
-    stateToShow: ''
+    statesToShow: []
   }
 }
 
@@ -46,7 +46,7 @@ export type MapState = {
   runtimeData: object
   runtimeFilters: object[]
   runtimeLegend: object[]
-  stateToShow: string
+  statesToShow: string[]
   dataUrl: string
 }
 
@@ -84,8 +84,8 @@ const reducer = (state: MapState, action: MapActions): MapState => {
       return { ...state, runtimeFilters: action.payload }
     case 'SET_RUNTIME_LEGEND':
       return { ...state, runtimeLegend: action.payload }
-    case 'SET_STATE_TO_SHOW':
-      return { ...state, stateToShow: action.payload }
+    case 'SET_STATES_TO_SHOW':
+      return { ...state, statesToShow: action.payload }
     default:
       return state
   }

package/src/types/MapConfig.ts

@@ -127,10 +127,10 @@ export type MapConfig = Visualization & {
     showDownloadPdfButton: boolean
     showSidebar: boolean
     showTitle: boolean
-    statePicked: {
+    statesPicked: {
       fipsCode: string
       stateName: string
-    }
+    }[]
     territoriesAlwaysShow: boolean
     territoriesLabel: string
     title: string
@@ -176,7 +176,6 @@ export type MapConfig = Visualization & {
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
-    capitalizeLabels: boolean
     opacity: number
   }
   runtime: {

package/src/types/MapContext.ts

@@ -43,10 +43,11 @@ export type MapContext = {
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig
   viewport: ViewPort
-  stateToShow: string
+  statesToShow: string[]
   scale: number
   translate: [number, number]
   topoData: object
   runtimeData: Object[]
   tooltipId: string
+  interactionLabel?: string
 }

package/src/types/runtimeLegend.ts

@@ -1,15 +1 @@
-export type RuntimeLegend = {
-  items: {
-    disabled?: boolean
-    bin?: number
-    color?: string
-    special?: boolean
-    value?: any
-    label?: string
-    min?: number
-    max?: number
-  }[]
-  disabledAmt?: number
-  fromHash?: number
-  runtimeDataHash?: number
-}
+export type RuntimeLegend = { disabled; bin; color; special }[]