@cdc/map 4.26.3 → 4.26.5

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -57,6 +57,9 @@ const Rect: React.FC<RectProps> = ({ label, text, stroke, strokeWidth, ...props
 
 const UsaRegionMap = () => {
   const { runtimeData, config, tooltipId, runtimeLegend, interactionLabel } = useContext(ConfigContext)
+
+  const a11y = handleMapAriaLabels(config)
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const [focusedStates, setFocusedStates] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
@@ -250,7 +253,7 @@ const UsaRegionMap = () => {
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={CIRCLE_RADIUS} cy={CIRCLE_RADIUS} r={CIRCLE_RADIUS} />
-              <text fill='#333' x='15px' y='20px' textAnchor='middle'>
+              <text fill='var(--baseColor)' x='15px' y='20px' textAnchor='middle'>
                 {index + 1}
               </text>
             </g>
@@ -290,7 +293,7 @@ const UsaRegionMap = () => {
 
   return (
     <ErrorBoundary component='UsaRegionMap'>
-      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
         <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
           {({ features, projection }) => constructGeoJsx(features, projection)}
         </Mercator>

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo, useContext, useMemo } from 'react'
+import { useEffect, memo, useContext, useMemo, useRef } from 'react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoPath } from 'd3-geo'
 import { CustomProjection } from '@visx/geo'
@@ -26,10 +26,12 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
 import _ from 'lodash'
 import { getStatesPicked } from '../../../helpers/getStatesPicked'
+import { shouldAutoResetSingleStateZoom } from '../../../helpers/shouldAutoResetSingleStateZoom'
 
 const SingleStateMap: React.FC = () => {
   const {
     config,
+    isDashboard,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,
@@ -42,17 +44,17 @@ const SingleStateMap: React.FC = () => {
     useDynamicViewbox
   } = useContext<MapContext>(ConfigContext)
 
+  const a11y = handleMapAriaLabels(config)
+
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection, bounds } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, resetZoomState, projection, bounds } =
+    useStateZoom(topoData)
+  const previousRuntimeDataHashRef = useRef<number | null>(null)
 
   // Memoize statesPicked to prevent creating new arrays on every render
   const statesPicked = useMemo(() => {
     return getStatesPicked(config, runtimeData)
-  }, [
-    config.general.statesPicked?.length,
-    config.general.statesPicked?.[0]?.stateName
-    // Don't include runtimeData as it causes excessive re-renders
-  ])
+  }, [config.general.statesPicked?.length, config.general.statesPicked?.[0]?.stateName, (runtimeData as any)?.fromHash])
 
   const statesToShow = topoData?.states?.find(s => statesPicked.map(sp => sp.stateName).includes(s.properties.name))
 
@@ -84,6 +86,27 @@ const SingleStateMap: React.FC = () => {
     }
   }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
 
+  useEffect(() => {
+    const runtimeDataHash = (runtimeData as any)?.fromHash as number | undefined
+    const hasDashboardFilters = Boolean(config.dashboardFilters?.length)
+
+    if (
+      shouldAutoResetSingleStateZoom({
+        isDashboard,
+        previousRuntimeDataHash: previousRuntimeDataHashRef.current,
+        nextRuntimeDataHash: runtimeDataHash,
+        hasDashboardFilters,
+        allowMapZoom: config.general.allowMapZoom
+      })
+    ) {
+      resetZoomState({ publishEvent: false })
+    }
+
+    if (runtimeDataHash !== undefined) {
+      previousRuntimeDataHashRef.current = runtimeDataHash
+    }
+  }, [config.dashboardFilters, config.general.allowMapZoom, isDashboard, resetZoomState, runtimeData])
+
   if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
       <div style={{ height: `${SVG_HEIGHT}px` }}>
@@ -152,7 +175,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <ZoomableGroup
             center={position.coordinates}
@@ -215,7 +238,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <rect
             className='background center-container ocean'
@@ -268,7 +291,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <Text
             verticalAnchor='start'

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -20,6 +20,7 @@ import HexIcon from './HexIcon'
 import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
 import Territory from './Territory'
+import FilterControls from '../../FilterControls'
 
 import ConfigContext, { MapDispatchContext } from '../../../context'
 import { useLegendMemoContext } from '../../../context/LegendMemoContext'
@@ -88,9 +89,13 @@ const UsaMap = () => {
     dimensions,
     translate,
     runtimeLegend,
-    interactionLabel
+    interactionLabel,
+    clearSharedFilter,
+    hasActiveSharedFilter
   } = useContext<MapContext>(ConfigContext)
 
+  const a11y = handleMapAriaLabels(config)
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
 
   const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
@@ -161,7 +166,7 @@ const UsaMap = () => {
 
   useEffect(() => {
     if (general.territoriesAlwaysShow) {
-      // show all Territories whether in the data or not
+      // Show Available Territories whether in the data or not
       setTerritoriesData(territoriesKeys)
     } else {
       // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
@@ -668,7 +673,7 @@ const UsaMap = () => {
 
   return (
     <ErrorBoundary component='UsaMap'>
-      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
         {general.displayAsHex ? (
           <Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
@@ -681,6 +686,8 @@ const UsaMap = () => {
         {annotations?.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
+      <FilterControls />
+
       <TerritoriesSection territories={territories} logo={logo} config={config} territoriesData={territoriesData} />
     </ErrorBoundary>
   )