@cdc/map 4.25.8 → 4.25.10

package/src/components/WorldMap/WorldMap.tsx

@@ -3,6 +3,7 @@ import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
 import ConfigContext, { MapDispatchContext } from '../../context'
+import { useLegendMemoContext } from '../../context/LegendMemoContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ZoomableGroup from '../ZoomableGroup'
 import Geo from '../Geo'
@@ -28,23 +29,23 @@ import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 
 import './worldMap.styles.css'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 let projection = geoMercator()
 
 const WorldMap = () => {
   // prettier-ignore
   const {
-    data,
+    runtimeData,
     position,
-    setRuntimeData,
     config,
     tooltipId,
     runtimeLegend,
-    legendMemo,
-    legendSpecialClassLastMemo,
     interactionLabel
   } = useContext(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   const { type, allowMapZoom } = config.general
 
   const [world, setWorld] = useState(null)
@@ -65,38 +66,97 @@ const WorldMap = () => {
     return <></>
   }
 
-  const handleReset = () => {
+  const handleFiltersReset = () => {
     const newRuntimeData = generateRuntimeData(config)
-    publishAnalyticsEvent('map_reset_zoom_level', 'click', interactionLabel, 'map')
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_filter_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
     dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
-    setRuntimeData(newRuntimeData)
+    dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
+  }
+
+  const handleZoomReset = _setRuntimeData => {
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_reset_zoom_level',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
   }
 
   const handleZoomIn = position => {
     if (position.zoom >= 4) return
-    publishAnalyticsEvent(
-      'map_zoomed_in',
-      'click',
-      `${interactionLabel}|zoom_level_${Math.floor(position.zoom * 1.5)}|${position.coordinates}`,
-      'map'
-    )
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom * 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom * 1.5 } })
   }
 
   const handleZoomOut = position => {
     if (position.zoom <= 1) return
-    publishAnalyticsEvent(
-      'map_zoomed_out',
-      'click',
-      `${interactionLabel}|zoom_level_${Math.floor(position.zoom / 1.5)}|${position.coordinates}`,
-      'map'
-    )
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom / 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom / 1.5 } })
   }
 
   const handleMoveEnd = position => {
-    publishAnalyticsEvent('map_panned', 'drag', interactionLabel, 'map')
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom: ${position.zoom}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `coordinates: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: position })
   }
 
@@ -105,7 +165,7 @@ const WorldMap = () => {
       // If the geo.properties.config value is found in the data use that, otherwise fall back to geo.properties.iso
       const dataHasStateName = config.data.some(d => d[config.columns.geo.name] === geo.properties.state)
       const geoKey =
-        geo.properties.state && data[geo.properties.state]
+        geo.properties.state && runtimeData[geo.properties.state]
           ? geo.properties.state
           : geo.properties.name
           ? geo.properties.name
@@ -116,7 +176,7 @@ const WorldMap = () => {
       }
       if (!geoKey) return null
 
-      let geoData = data[geoKey]
+      let geoData = runtimeData[geoKey]
 
       const geoDisplayName = displayGeoName(supportedCountries[geoKey]?.[0])
       let legendColors
@@ -169,6 +229,20 @@ const WorldMap = () => {
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
             onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            onMouseEnter={() => {
+              // Track hover analytics event if this is a new location
+              const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_hover`,
+                eventAction: 'hover',
+                eventLabel: interactionLabel,
+                vizTitle: getVizTitle(config),
+                location: geoDisplayName,
+                specifics: `location: ${locationName?.toLowerCase()}`
+              })
+            }}
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
             tabIndex={-1}
@@ -186,6 +260,20 @@ const WorldMap = () => {
           strokeWidth={strokeWidth}
           styles={styles}
           path={path}
+          onMouseEnter={() => {
+            // Track hover analytics event if this is a new location
+            const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_hover`,
+              eventAction: 'hover',
+              eventLabel: interactionLabel,
+              vizTitle: getVizTitle(config),
+              location: geoDisplayName,
+              specifics: `location: ${locationName?.toLowerCase()}`
+            })
+          }}
           data-tooltip-id={`tooltip__${tooltipId}`}
           data-tooltip-html={toolTip}
         />
@@ -207,7 +295,7 @@ const WorldMap = () => {
     <ErrorBoundary component='WorldMap'>
       {allowMapZoom ? (
         <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
-          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleReset} fill='white' />
+          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleFiltersReset} fill='white' />
           <ZoomableGroup
             zoom={position.zoom}
             center={position.coordinates}
@@ -236,7 +324,7 @@ const WorldMap = () => {
         </svg>
       )}
       {(type === 'data' || (type === 'world-geocode' && allowMapZoom) || (type === 'bubble' && allowMapZoom)) && (
-        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleReset={handleReset} />
+        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleZoomReset={handleZoomReset} />
       )}
     </ErrorBoundary>
   )

package/src/components/ZoomControls.tsx

@@ -7,10 +7,10 @@ import './zoomControls.styles.css'
 type ZoomControlsProps = {
   handleZoomIn: (coordinates: [Number, Number]) => void
   handleZoomOut: (coordinates: [Number, Number]) => void
-  handleReset: (setRuntimeData: Function) => void
+  handleZoomReset: (setRuntimeData: Function) => void
 }
 
-const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleReset }) => {
+const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleZoomReset }) => {
   const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
   if (!config.general.allowMapZoom) return
   return (
@@ -26,13 +26,10 @@ const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut
           <line x1='5' y1='12' x2='19' y2='12' />
         </svg>
       </button>
-      {config.general.type === 'bubble' && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-          Reset Filters
-        </button>
-      )}
-      {(config.general.type === 'world-geocode' || config.general.geoType === 'single-state') && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+      {(config.general.type === 'world-geocode' ||
+        config.general.geoType === 'single-state' ||
+        config.general.type === 'bubble') && (
+        <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
           Reset Zoom
         </button>
       )}

package/src/context/LegendMemoContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react'
+
+interface LegendMemoContextType {
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}
+
+const LegendMemoContext = createContext<LegendMemoContextType | null>(null)
+
+export const LegendMemoProvider: React.FC<{
+  children: React.ReactNode
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}> = ({ children, legendMemo, legendSpecialClassLastMemo }) => {
+  return (
+    <LegendMemoContext.Provider value={{ legendMemo, legendSpecialClassLastMemo }}>
+      {children}
+    </LegendMemoContext.Provider>
+  )
+}
+
+export const useLegendMemoContext = () => {
+  const context = useContext(LegendMemoContext)
+  if (!context) {
+    throw new Error('useLegendMemoContext must be used within a LegendMemoProvider')
+  }
+  return context
+}
+
+export default LegendMemoContext

package/src/context.ts

@@ -1,46 +1,7 @@
 import { createContext, Dispatch } from 'react'
-import { MapConfig } from './types/MapConfig'
+import { MapContext } from './types/MapContext'
 import MapActions from './store/map.actions'
 
-type MapContext = {
-  container
-  setSharedFilter
-  customNavigationHandler
-  tooltipRef
-  containerEl
-  applyLegendToRow
-  data
-  displayGeoName
-  filteredCountryCode
-  generateColorsArray
-  generateRuntimeData
-  geoClickHandler
-  handleCircleClick: Function
-  innerContainerRef
-  isDashboard
-  isEditor
-  mapId: string
-  loadConfig
-  position
-  resetLegendToggles
-  runtimeFilters
-  runtimeLegend
-  setParentConfig
-  setRuntimeData
-  setRuntimeFilters
-  setRuntimeLegend
-  setSharedFilterValue
-  setConfig: Function
-  config: MapConfig
-  tooltipId: string
-  legendMemo
-  legendSpecialClassLastMemo
-  translate
-  scale
-  annotations
-  interactionLabel?: string
-}
-
 export const MapDispatchContext = createContext<Dispatch<MapActions>>(() => {})
 
 const ConfigContext = createContext({} as MapContext)

package/src/data/initial-state.js

@@ -1,135 +1,148 @@
-export default {
-  annotations: [],
-  general: {
-    navigationTarget: '_self',
-    noStateFoundMessage: 'Map Unavailable',
-    annotationDropdownText: 'Annotations',
-    geoBorderColor: 'darkGray',
-    headerColor: 'theme-blue',
-    title: '',
-    showTitle: true,
-    showSidebar: true,
-    showDownloadMediaButton: false,
-    displayAsHex: false,
-    displayStateLabels: true,
-    territoriesAlwaysShow: false,
-    language: 'en',
-    geoType: 'single-state',
-    geoLabelOverride: '',
-    hasRegions: false,
-    fullBorder: false,
-    type: 'data',
-    convertFipsCodes: true,
-    palette: {
-      isReversed: false
-    },
-    allowMapZoom: true,
-    hideGeoColumnInTooltip: false,
-    hidePrimaryColumnInTooltip: false,
-    statesPicked: [
-      {
-        fipsCode: '01',
-        stateName: 'Alabama'
+import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
+
+// Dynamic initial state based on migration flag
+const createInitialState = () => {
+  const paletteDefaults = USE_V2_MIGRATION
+    ? {
+        isReversed: true,
+        name: 'sequential_bluereverse',
+        version: '2.0'
+      }
+    : {
+        isReversed: true,
+        name: 'bluegreen',
+        version: '1.0'
       }
-    ]
-  },
-  type: 'map',
-  color: 'pinkpurple',
-  columns: {
-    geo: {
-      name: 'FIPS Codes',
-      label: 'Location',
-      tooltip: false,
-      dataTable: true
+
+  return {
+    annotations: [],
+    general: {
+      navigationTarget: '_self',
+      noDataMessage: 'No State Selected',
+      annotationDropdownText: 'Annotations',
+      geoBorderColor: 'darkGray',
+      headerColor: 'theme-blue',
+      title: '',
+      showTitle: true,
+      showSidebar: true,
+      showDownloadMediaButton: false,
+      displayAsHex: false,
+      displayStateLabels: true,
+      territoriesAlwaysShow: false,
+      language: 'en',
+      geoType: 'single-state',
+      geoLabelOverride: '',
+      hasRegions: false,
+      fullBorder: false,
+      type: 'data',
+      convertFipsCodes: true,
+      palette: paletteDefaults,
+      allowMapZoom: true,
+      hideGeoColumnInTooltip: false,
+      hidePrimaryColumnInTooltip: false,
+      statesPicked: []
     },
-    primary: {
-      dataTable: true,
-      tooltip: true,
-      prefix: '',
-      suffix: '',
-      name: '',
-      label: '',
-      roundToPlace: 0
+    type: 'map',
+    columns: {
+      geo: {
+        name: 'FIPS Codes',
+        label: 'Location',
+        tooltip: false,
+        dataTable: true
+      },
+      primary: {
+        dataTable: true,
+        tooltip: true,
+        prefix: '',
+        suffix: '',
+        name: '',
+        label: '',
+        roundToPlace: 0
+      },
+      navigate: {
+        name: ''
+      },
+      latitude: { name: '' },
+      longitude: { name: '' }
     },
-    navigate: {
-      name: ''
+    legend: {
+      descriptions: {},
+      specialClasses: [],
+      unified: false,
+      singleColumn: false,
+      singleRow: false,
+      verticalSorted: false,
+      showSpecialClassesLast: false,
+      dynamicDescription: false,
+      type: 'equalnumber',
+      numberOfItems: 3,
+      position: 'side',
+      title: '',
+      style: 'circles',
+      subStyle: 'linear blocks',
+      tickRotation: '',
+      singleColumnLegend: false,
+      hideBorder: false,
+      groupBy: ''
     },
-    latitude: { name: '' },
-    longitude: { name: '' }
-  },
-  legend: {
-    descriptions: {},
-    specialClasses: [],
-    unified: false,
-    singleColumn: false,
-    singleRow: false,
-    verticalSorted: false,
-    showSpecialClassesLast: false,
-    dynamicDescription: false,
-    type: 'equalnumber',
-    numberOfItems: 3,
-    position: 'side',
-    title: '',
-    style: 'circles',
-    subStyle: 'linear blocks',
-    tickRotation: '',
-    singleColumnLegend: false,
-    hideBorder: false,
-    groupBy: ''
-  },
-  filters: [],
-  data: [],
-  table: {
-    wrapColumns: false,
-    label: 'Data Table',
-    expanded: false,
-    limitHeight: false,
-    height: '',
-    caption: '',
-    showDownloadUrl: false,
-    showDataTableLink: true,
-    showDownloadLinkBelow: true,
-    showFullGeoNameInCSV: false,
-    forceDisplay: true,
-    download: false,
-    indexLabel: '',
-    cellMinWidth: '0',
-    collapsible: true
-  },
-  tooltips: {
-    appearanceType: 'hover',
-    linkLabel: 'Learn More',
-    opacity: 90
-  },
-  runtime: {
-    editorErrorMessage: []
-  },
-  visual: {
-    minBubbleSize: 1,
-    maxBubbleSize: 20,
-    extraBubbleBorder: false,
-    cityStyle: 'circle',
-    cityStyleLabel: '',
-    showBubbleZeros: false,
-    additionalCityStyles: [],
-    geoCodeCircleSize: 8,
-    showBubbleZeros: false
-  },
-  mapPosition: { coordinates: [0, 30], zoom: 1 },
-  map: {
-    layers: [],
-    patterns: []
-  },
-  hexMap: {
-    type: '',
-    shapeGroups: [
-      {
-        legendTitle: '',
-        legendDescription: '',
-        items: [{ key: '', shape: 'Arrow Up', column: '', operator: '=', value: '' }]
-      }
-    ]
-  },
-  filterBehavior: 'Filter Change',
-  filterIntro: ''
+    filters: [],
+    data: [],
+    table: {
+      wrapColumns: false,
+      label: 'Data Table',
+      expanded: false,
+      limitHeight: false,
+      height: '',
+      caption: '',
+      showDownloadUrl: false,
+      showDataTableLink: true,
+      showDownloadLinkBelow: true,
+      showFullGeoNameInCSV: false,
+      forceDisplay: true,
+      download: false,
+      indexLabel: '',
+      cellMinWidth: '0',
+      collapsible: true
+    },
+    tooltips: {
+      appearanceType: 'hover',
+      linkLabel: 'Learn More',
+      opacity: 90
+    },
+    runtime: {
+      editorErrorMessage: []
+    },
+    visual: {
+      minBubbleSize: 1,
+      maxBubbleSize: 20,
+      extraBubbleBorder: false,
+      cityStyle: 'circle',
+      cityStyleLabel: '',
+      showBubbleZeros: false,
+      additionalCityStyles: [],
+      geoCodeCircleSize: 8,
+      showBubbleZeros: false
+    },
+    mapPosition: { coordinates: [0, 30], zoom: 1 },
+    map: {
+      layers: [],
+      patterns: []
+    },
+    hexMap: {
+      type: '',
+      shapeGroups: [
+        {
+          legendTitle: '',
+          legendDescription: '',
+          items: [{ key: '', shape: 'Arrow Up', column: '', operator: '=', value: '' }]
+        }
+      ]
+    },
+    filterBehavior: 'Filter Change',
+    filterIntro: '',
+    markupVariables: [],
+    enableMarkupVariables: false
+  }
 }
+
+export default createInitialState()

package/src/data/supported-geos.js

@@ -512,7 +512,14 @@ export const supportedCountries = {
   NIU: ['Niue', 'Niue (New Zealand)'],
   NFK: ['Norfolk Island', 'Norfolk Island (Australia)'],
   MKD: ['North Macedonia', 'Republic of North Macedonia', 'Macedonia'],
-  MNP: ['Northern Mariana Islands', 'N. Mariana Is.', 'Northern Mariana Islands (U.S.)'],
+  MNP: [
+    'Northern Mariana Islands',
+    'N. Mariana Is.',
+    'Northern Mariana Islands (U.S.)',
+    'Commonwealth of Northern Mariana Islands',
+    'Commonwealth of the Northern Mariana Islands',
+    'Commonwealth of the Northern Mariana Islands (CNMI)'
+  ],
   NOR: ['Norway'],
   OMN: ['Oman'],
   PAK: ['Pakistan'],
@@ -643,7 +650,15 @@ export const supportedTerritories = {
   'US-GU': ['GUAM', 'GU'],
   'US-PR': ['PUERTO RICO', 'PR'],
   'US-VI': ['U.S. VIRGIN ISLANDS', 'VI', 'US VIRGIN ISLANDS', 'VIRGIN ISLANDS'],
-  'US-MP': ['NORTHERN MARIANAS', 'MP', 'CNMI'],
+  'US-MP': [
+    'NORTHERN MARIANA ISLANDS',
+    'MP',
+    'CNMI',
+    'NORTHERN MARIANAS',
+    'COMMONWEALTH OF NORTHERN MARIANA ISLANDS',
+    'COMMONWEALTH OF THE NORTHERN MARIANA ISLANDS',
+    'COMMONWEALTH OF THE NORTHERN MARIANA ISLANDS (CNMI)'
+  ],
   'US-FM': ['MICRONESIA', 'FM', 'Federated States of Micronesia'], // Note: Key is not an official ISO code
   'US-PW': ['PALAU', 'PW'], // Note: Key is not an official ISO code
   'US-MH': ['MARSHALL ISLANDS', 'MH', 'RMI'] // Note: Key is not an official ISO code