@cdc/map 4.25.3 → 4.25.6

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
@@ -19,27 +19,40 @@ import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
 import Territory from './Territory'
 
-import useMapLayers from '../../../hooks/useMapLayers'
-import ConfigContext from '../../../context'
+import ConfigContext, { MapDispatchContext } from '../../../context'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
-import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
-import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
-import { titleCase } from '../../../helpers/titleCase'
 import TerritoriesSection from './TerritoriesSection'
-import { displayGeoName } from '../../../helpers/displayGeoName'
 
+import { isMobileStateLabelViewport } from '@cdc/core/helpers/viewports'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+
+import useMapLayers from '../../../hooks/useMapLayers'
+import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
+import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
+import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
+import {
+  getGeoFillColor,
+  getGeoStrokeColor,
+  handleMapAriaLabels,
+  titleCase,
+  displayGeoName,
+  SVG_HEIGHT,
+  SVG_VIEWBOX,
+  SVG_WIDTH,
+  hashObj
+} from '../../../helpers'
 const { features: unitedStatesHex } = topoFeature(hexTopoJSON, hexTopoJSON.objects.states)
 
 const offsets = {
-  'US-VT': [50, -8],
-  'US-NH': [34, 2],
-  'US-MA': [30, -1],
-  'US-RI': [28, 2],
-  'US-CT': [35, 10],
-  'US-NJ': [42, 1],
+  'US-VT': [53, -7],
+  'US-NH': [38, 7],
+  'US-MA': [34, -1],
+  'US-RI': [29, 7],
+  'US-CT': [43, 20],
+  'US-NJ': [26, 7],
   'US-DE': [33, 0],
-  'US-MD': [47, 10]
+  'US-MD': [51, 16]
 }
 
 const nudges = {
@@ -55,22 +68,31 @@ const nudges = {
 }
 
 const UsaMap = () => {
-  // prettier-ignore
   const {
-      applyLegendToRow,
-      applyTooltipsToGeo,
-      data,
-      geoClickHandler,
-      setSharedFilterValue,
-      state,
-      tooltipId,
-      handleDragStateChange,
-      mapId,
-      logo,
-    } = useContext<MapContext>(ConfigContext)
+    data,
+    setSharedFilterValue,
+    config,
+    setConfig,
+    tooltipId,
+    mapId,
+    logo,
+    legendMemo,
+    legendSpecialClassLastMemo,
+    currentViewport,
+    translate,
+    runtimeLegend
+  } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
-  const { general, columns, feature, tooltips, hexMap, map, annotations } = state
+  const { general, columns, tooltips, hexMap, map, annotations } = config
+  const { displayAsHex } = general
+  const { geoClickHandler } = useGeoClickHandler()
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const dispatch = useContext(MapDispatchContext)
+
+  const handleDragStateChange = (dragState: any) => {
+    dispatch({ type: 'SET_IS_DRAGGING_ANNOTATION', payload: dragState })
+  }
 
   if (setSharedFilterValue) {
     Object.keys(supportedStates).forEach(supportedState => {
@@ -92,9 +114,20 @@ const UsaMap = () => {
   }
 
   // "Choose State" options
-  const [extent, setExtent] = useState(null)
   const [focusedStates, setFocusedStates] = useState(null)
-  const [translate, setTranslate] = useState([455, 200])
+
+  const dataRef = useRef(null)
+
+  const legendMemoUpdated = focusedStates?.every(geo => {
+    const geoKey = geo.properties.iso
+    const geoData = data[geoKey]
+    const hash = hashObj(geoData)
+    return legendMemo.current.has(hash)
+  })
+
+  // we use dataRef so that we can use the old data when legendMemo has not been updated yet
+  // prevents flickering of the map when filter is changed
+  if (legendMemoUpdated) dataRef.current = data
 
   useEffect(() => {
     const fetchData = async () => {
@@ -107,12 +140,9 @@ const UsaMap = () => {
 
   // When returning from another map we want to reset the state
   useEffect(() => {
-    setTranslate([455, 250])
-    setExtent(null)
+    dispatch({ type: 'SET_TRANSLATE', payload: [SVG_WIDTH / 2, SVG_HEIGHT / 2] })
   }, [general.geoType])
 
-  const isHex = general.displayAsHex
-
   const [territoriesData, setTerritoriesData] = useState([])
 
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
@@ -123,25 +153,25 @@ const UsaMap = () => {
       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
-      const territoriesList = territoriesKeys.filter(key => data[key])
+      const territoriesList = territoriesKeys.filter(key => data?.[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, general.territoriesAlwaysShow])
+  }, [data, dataRef.current, general.territoriesAlwaysShow])
 
-  const geoStrokeColor = getGeoStrokeColor(state)
-  const geoFillColor = getGeoFillColor(state)
+  const geoStrokeColor = getGeoStrokeColor(config)
+  const geoFillColor = getGeoFillColor(config)
 
   const territories = territoriesData.map((territory, territoryIndex) => {
-    const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
+    const Shape = displayAsHex ? Territory.Hexagon : Territory.Rectangle
 
-    const territoryData = data[territory]
+    const territoryData = data?.[territory]
 
     let toolTip
 
     let styles = {
       fill: geoFillColor,
       stroke: geoStrokeColor,
-      color: '#202020'
+      color: APP_FONT_COLOR
     }
 
     const label = supportedTerritories[territory][1]
@@ -152,7 +182,8 @@ const UsaMap = () => {
           key={label}
           label={label}
           style={styles}
-          text={styles.color}
+          textColor={styles.color}
+          strokeColor='#fff'
           territoryData={territoryData}
           backgroundColor={styles.fill}
         />
@@ -160,11 +191,9 @@ const UsaMap = () => {
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
-    const legendColors = applyLegendToRow(territoryData)
+    const legendColors = applyLegendToRow(territoryData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
 
     if (legendColors) {
-      const textColor = getContrastColor('#FFF', legendColors[0])
-
       let needsPointer = false
 
       // If we need to add a pointer cursor
@@ -172,6 +201,8 @@ const UsaMap = () => {
         needsPointer = true
       }
 
+      const { textColor, strokeColor } = outlinedTextColor(legendColors[0])
+
       styles = {
         color: textColor,
         fill: legendColors[0],
@@ -197,9 +228,9 @@ const UsaMap = () => {
           key={`label__${territoryIndex}`}
           label={label}
           style={styles}
-          text={styles.color}
           strokeWidth={1}
           textColor={textColor}
+          strokeColor={strokeColor}
           handleShapeClick={() => geoClickHandler(territory, territoryData)}
           dataTooltipId={`tooltip__${tooltipId}`}
           dataTooltipHtml={toolTip}
@@ -214,8 +245,8 @@ const UsaMap = () => {
 
   let pathGenerator = geoPath().projection(geoAlbersUsa().translate(translate))
 
-  // Note: Layers are different than patterns
-  const { pathArray } = useMapLayers(state, '', pathGenerator, tooltipId)
+  // Note: Layers are different from patterns
+  const { pathArray } = useMapLayers(config, setConfig, pathGenerator, tooltipId)
 
   if (!focusedStates) {
     return <></>
@@ -246,7 +277,7 @@ const UsaMap = () => {
     })
 
     const geosJsx = geographies.map(({ feature: geo, path = '' }, geoIndex) => {
-      const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
+      const key = displayAsHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
         fill: geoFillColor,
@@ -259,13 +290,13 @@ const UsaMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data[geoKey]
+      const geoData = data?.[geoKey]
 
       let legendColors
 
       // Once we receive data for this geographic item, setup variables.
       if (geoData !== undefined) {
-        legendColors = applyLegendToRow(geoData)
+        legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
       }
 
       const geoDisplayName = displayGeoName(geoKey)
@@ -275,7 +306,7 @@ const UsaMap = () => {
         const tooltip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
+          fill: config.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
           opacity:
             setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[columns.geo.name]
               ? 0.5
@@ -286,10 +317,10 @@ const UsaMap = () => {
               : geoStrokeColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'bubble' ? legendColors[1] : geoFillColor
+            fill: config.general.type !== 'bubble' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'bubble' ? legendColors[2] : geoFillColor
+            fill: config.general.type !== 'bubble' ? legendColors[2] : geoFillColor
           }
         }
 
@@ -307,7 +338,7 @@ const UsaMap = () => {
 
           return (
             <>
-              {hexMap.shapeGroups.map((group, groupIndex) => {
+              {hexMap.shapeGroups.map((group, _groupIndex) => {
                 return group.items.map((item, itemIndex) => {
                   switch (item.operator) {
                     case '=':
@@ -414,7 +445,7 @@ const UsaMap = () => {
               <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />
 
               {/* apply patterns on top of state path*/}
-              {map.patterns.map((patternData, patternIndex) => {
+              {map?.patterns?.map((patternData, _patternIndex) => {
                 const { pattern, dataKey, size } = patternData
                 const currentFill = styles.fill
                 const hasMatchingValues = patternData.dataValue === geoData?.[patternData.dataKey]
@@ -431,6 +462,7 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
+                        strokeWidth={0.25}
                       />
                     )}
                     {pattern === 'circles' && (
@@ -439,6 +471,8 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
+                        stroke={patternColor}
+                        radius={0.5}
                       />
                     )}
                     {pattern === 'lines' && (
@@ -447,7 +481,7 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
-                        strokeWidth={1}
+                        strokeWidth={0.75}
                         orientation={['diagonalRightToLeft']}
                       />
                     )}
@@ -461,8 +495,8 @@ const UsaMap = () => {
                   </>
                 )
               })}
-              {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
-              {isHex && hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
+              {(displayAsHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
+              {displayAsHex && hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
             </g>
           </g>
         )
@@ -473,27 +507,24 @@ const UsaMap = () => {
         <g data-name={geoName} key={key} tabIndex={-1}>
           <g className='geo-group' style={styles} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
-            {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
+            {(displayAsHex || showLabel) && geoLabel(geo, styles.fill, projection)}
           </g>
         </g>
       )
     })
 
-    if (isHex) return geosJsx
+    if (displayAsHex) return geosJsx
 
     // Cities
     geosJsx.push(
       <CityList
         applyLegendToRow={applyLegendToRow}
         applyTooltipsToGeo={applyTooltipsToGeo}
-        data={data}
-        displayGeoName={displayGeoName}
         geoClickHandler={geoClickHandler}
         isFilterValueSupported={isFilterValueSupported}
         key='cities'
         projection={projection}
         setSharedFilterValue={setSharedFilterValue}
-        state={state}
         titleCase={titleCase}
         tooltipId={tooltipId}
       />
@@ -501,18 +532,7 @@ const UsaMap = () => {
 
     // Bubbles
     if (general.type === 'bubble') {
-      geosJsx.push(
-        <BubbleList
-          key='bubbles'
-          data={state.data}
-          runtimeData={data}
-          state={state}
-          projection={projection}
-          applyLegendToRow={applyLegendToRow}
-          applyTooltipsToGeo={applyTooltipsToGeo}
-          displayGeoName={displayGeoName}
-        />
-      )
+      geosJsx.push(<BubbleList runtimeData={dataRef.current} projection={projection} />)
     }
 
     // })
@@ -526,13 +546,13 @@ const UsaMap = () => {
   }
 
   const geoLabel = (geo, bgColor = '#FFFFFF', projection) => {
-    let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
-    let abbr = geo.properties.iso
+    const centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
+    const abbr = geo.properties.iso
 
     if (undefined === abbr) return null
 
     // HI background is always white since it is off to the side
-    if (abbr === 'US-HI' && !general.displayAsHex) {
+    if ((abbr === 'US-HI' && !general.displayAsHex) || (Object.keys(offsets).includes(abbr) && !general.displayAsHex)) {
       bgColor = '#FFF'
     }
     const { textColor, strokeColor } = outlinedTextColor(bgColor)
@@ -541,21 +561,22 @@ const UsaMap = () => {
       y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
 
     // used to nudge/move some of the labels for better readability
-    if (nudges[abbr] && false === isHex) {
+    if (nudges[abbr] && false === displayAsHex) {
       x += nudges[abbr][0]
       y += nudges[abbr][1]
     }
 
-    if (undefined === offsets[abbr] || isHex) {
+    if (undefined === offsets[abbr] || displayAsHex) {
       return (
         <g transform={`translate(${centroid})`} tabIndex={-1}>
           <text
             x={x}
             y={y}
-            fontSize={14}
-            strokeWidth='0'
-            // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
-            // stroke={strokeColor}
+            fontSize={isMobileStateLabelViewport(currentViewport) ? 16 : 13}
+            fontWeight={900}
+            strokeWidth='1'
+            paintOrder='stroke'
+            stroke={strokeColor}
             style={{ fill: textColor }}
             textAnchor='middle'
           >
@@ -580,9 +601,9 @@ const UsaMap = () => {
         <text
           x={4}
           strokeWidth='0'
-          // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
-          // stroke={strokeColor}
-          fontSize={13}
+          stroke={APP_FONT_COLOR}
+          fontSize={isMobileStateLabelViewport(currentViewport) ? 16 : 13}
+          fontWeight={900}
           style={{ fill: textColor }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
@@ -595,20 +616,20 @@ const UsaMap = () => {
 
   return (
     <ErrorBoundary component='UsaMap'>
-      <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
         {general.displayAsHex ? (
           <Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </Mercator>
         ) : (
-          <AlbersUsa data={focusedStates} translate={translate} fitExtent={extent}>
+          <AlbersUsa data={focusedStates} translate={translate}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </AlbersUsa>
         )}
-        {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
+        {annotations?.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
-      <TerritoriesSection territories={territories} logo={logo} config={state} territoriesData={territoriesData} />
+      <TerritoriesSection territories={territories} logo={logo} config={config} territoriesData={territoriesData} />
     </ErrorBoundary>
   )
 }

package/src/components/UsaMap/helpers/map.ts

@@ -82,7 +82,7 @@ export const getCurrentTopoYear = (state, runtimeFilters) => {
 export const isTopoReady = (topoData, state, runtimeFilters) => {
   let currentYear = getCurrentTopoYear(state, runtimeFilters)
 
-  return topoData.year && (!currentYear || currentYear === topoData.year)
+  return topoData?.year && (!currentYear || currentYear === topoData?.year)
 }
 
 export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {

package/src/components/UsaMap/helpers/shapes.ts

@@ -109,34 +109,47 @@ export const drawStar = (star, context, state) => {
   const outerRadius = star.outerRadius * scaleVal
   const innerRadius = star.innerRadius * scaleVal
 
+  // Adjust for zoom (based on your existing logic)
   const adjustedOuterRadius = state.mapPosition.zoom > 1 ? outerRadius * percentOfOriginalSize : outerRadius
   const adjustedInnerRadius = state.mapPosition.zoom > 1 ? innerRadius * percentOfOriginalSize : innerRadius
 
+  // Set line width and color
   context.lineWidth = star.lineWidth
   context.fillStyle = star.color
   context.beginPath()
 
-  let rot = (Math.PI / 2) * 3
-  let step = Math.PI / spikes
+  // Start drawing the star from the top (no rotation)
+  const startAngle = Math.PI / 2 // 90 degrees (points upwards)
+  let rot = startAngle
+  const step = Math.PI / spikes // angle between each spike
 
-  // Starting coordinates for the first point
-  let x = star.x
-  let y = star.y
-  context.moveTo(x, y - adjustedOuterRadius)
+  // Starting coordinates for the first point of the star
+  let x = star.x + Math.cos(rot) * adjustedOuterRadius
+  let y = star.y + Math.sin(rot) * adjustedOuterRadius
+  context.moveTo(x, y)
 
+  // Draw the star
   for (let i = 0; i < spikes; i++) {
+    // Outer points of the star
     x = star.x + Math.cos(rot) * adjustedOuterRadius
     y = star.y + Math.sin(rot) * adjustedOuterRadius
     context.lineTo(x, y)
     rot += step
 
+    // Inner points of the star
     x = star.x + Math.cos(rot) * adjustedInnerRadius
     y = star.y + Math.sin(rot) * adjustedInnerRadius
     context.lineTo(x, y)
     rot += step
   }
 
-  context.lineTo(star.x, star.y - adjustedOuterRadius)
+  // Close the path by returning to the starting outer point
+  // This fixes the gap issue by making sure the first outer point is exactly the same
+  x = star.x + Math.cos(startAngle) * adjustedOuterRadius
+  y = star.y + Math.sin(startAngle) * adjustedOuterRadius
+  context.lineTo(x, y)
+
+  // Apply fill and stroke
   context.closePath()
   context.fill()
   context.stroke()