@cdc/map 4.25.8 → 4.25.10

package/src/hooks/useGeoClickHandler.ts

@@ -1,9 +1,17 @@
 import ConfigContext, { MapDispatchContext } from '../context'
 import { navigationHandler } from '../helpers'
 import { useContext } from 'react'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 const useGeoClickHandler = () => {
-  const { config: state, setConfig, setSharedFilter, customNavigationHandler } = useContext(ConfigContext)
+  const {
+    config: state,
+    setConfig,
+    setSharedFilter,
+    customNavigationHandler,
+    interactionLabel
+  } = useContext(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
 
   const geoClickHandler = (geoDisplayName: string, geoData: object): void => {
@@ -30,11 +38,37 @@ const useGeoClickHandler = () => {
       }
       dispatch({ type: 'SET_MODAL', payload: modalData })
 
+      // Track modal click analytics event
+      if (interactionLabel) {
+        const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          eventType: `modal_trigger` as any,
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(state),
+          specifics: `clicked on: ${String(locationName).toLowerCase()}`
+        })
+      }
+
       return
     }
 
     // Otherwise if this item has a link specified for it, do regular navigation.
     if (state.columns.navigate && geoData[state.columns.navigate.name]) {
+      // Track navigation click analytics event
+      if (interactionLabel) {
+        const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          eventType: `map_trigger` as any,
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(state),
+          specifics: `clicked on: ${String(locationName).toLowerCase()}`
+        })
+      }
+
       navigationHandler(state.general.navigationTarget, geoData[state.columns.navigate.name], customNavigationHandler)
     }
   }

package/src/hooks/useLegendMemo.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react'
+
+/**
+ * Custom hook to manage legend memoization refs
+ * Extracted from context to reduce context props and improve performance
+ */
+export const useLegendMemo = () => {
+  const legendMemo = useRef(new Map())
+  const legendSpecialClassLastMemo = useRef(new Map())
+
+  return {
+    legendMemo,
+    legendSpecialClassLastMemo
+  }
+}
+
+export default useLegendMemo

package/src/hooks/useMapLayers.tsx

@@ -3,6 +3,7 @@ import { feature } from 'topojson-client'
 import { Group } from '@visx/group'
 import { MapConfig } from '../types/MapConfig'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 /**
  * This is the starting structure for adding custom geoJSON shape layers to a projection.
@@ -46,10 +47,10 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
 
   const handleRemoveLayer = (e: MouseEvent<HTMLButtonElement>, index: number) => {
     e.preventDefault()
-    const newConfig = _.cloneDeep(config)
+    const newConfig = cloneConfig(config)
     const layers = newConfig.map.layers.filter((_layer, i) => i !== index)
     newConfig.map.layers = layers
-    setConfig(newConfig )
+    setConfig(newConfig)
   }
 
   const handleAddLayer = (e: Event) => {
@@ -58,9 +59,9 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
       name: 'New Custom Layer',
       url: ''
     }
-    const newConfig = _.cloneDeep(config)
+    const newConfig = cloneConfig(config)
     newConfig.map.layers.unshift(placeHolderLayer)
-    setConfig( newConfig )
+    setConfig(newConfig)
   }
 
   const handleMapLayer = (e: ChangeEvent<HTMLInputElement>, index: number, layerKey: string) => {

package/src/hooks/useStateZoom.tsx

@@ -7,6 +7,7 @@ import { getFilterControllingStatesPicked } from '../components/UsaMap/helpers/m
 import { supportedStatesFipsCodes } from '../data/supported-geos'
 import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 interface StateData {
   geometry: { type: 'MultiPolygon'; coordinates: number[][][][] }
@@ -80,7 +81,15 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
           _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
             ? _prevPosition.coordinates
             : projectionData.stateCenter
-        publishAnalyticsEvent('map_zoomed_in', 'click', `${interactionLabel}|${newZoom}|${newCoordinates}`, 'map')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'zoom_in',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: `zoom: ${newZoom}, coordinates:${newCoordinates}`
+        })
       } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
         newZoom = _prevPosition.zoom / 1.5
         newCoordinates =
@@ -97,7 +106,14 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
       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')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'map_reset_zoom_level',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
       }
     },
     [config.mapPosition, projectionData.stateCenter, interactionLabel, dispatch]
@@ -145,9 +161,12 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     [dispatch]
   )
 
-  const handleReset = useCallback(() => {
-    setScaleAndTranslate('reset')
-  }, [setScaleAndTranslate])
+  const handleZoomReset = useCallback(
+    _setRuntimeData => {
+      setScaleAndTranslate('reset')
+    },
+    [setScaleAndTranslate]
+  )
 
   return {
     statesPicked,
@@ -156,7 +175,7 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     handleZoomIn,
     handleZoomOut,
     handleMoveEnd,
-    handleReset,
+    handleZoomReset,
     projection: projectionData.projection
   }
 }

package/src/hooks/useTooltip.ts

@@ -1,10 +1,9 @@
-import { displayDataAsText } from '../../../core/helpers/displayDataAsText'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import { displayGeoName } from '../helpers/displayGeoName'
 
 const useTooltip = props => {
   const { config, supportedStatesFipsCodes } = props
 
-
   /**
    * On county maps there's a need to append the state name
    * @param {String} toolTipText - previous tooltip text to build upon

package/src/index.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
-import 'react-tooltip/dist/react-tooltip.css'
-import './coreStyles_map.scss'
 
 import CdcMap from './CdcMap'
 

package/src/store/map.reducer.ts

@@ -1,13 +1,24 @@
-import { MapConfig } from '../types/MapConfig'
+import { MapConfig, RuntimeFilters } from '../types/MapConfig'
 import MapActions from './map.actions'
 import defaults from './../data/initial-state'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import _ from 'lodash'
+import { Modal } from '../types/Modal'
+import { GeneratedLegend } from '../helpers/generateRuntimeLegend'
+import { RuntimeData } from '../types/RuntimeData'
 
 export const getInitialState = (configObj = {}): MapState => {
+  // Create defaults without palette version to avoid overriding legacy configs
+  const defaultsWithoutPaletteaName = { ...defaults }
+
+  // Only apply palette defaults if the loaded config explicitly has general.palette
+  // if (!configObj?.general?.palette?.name) {
+  //   delete defaultsWithoutPaletteaName.general?.palette.name
+  // }
+
   return {
     dataUrl: configObj.dataUrl || '',
-    config: _.merge({}, defaults, configObj),
+    config: _.merge({}, defaultsWithoutPaletteaName, configObj),
     loading: false,
     accessibleStatus: '',
     coveLoadedHasRan: false,
@@ -42,10 +53,10 @@ export type MapState = {
   projection: object | null
   requiredColumns: string[]
   scale: number
-  modal: object | null
-  runtimeData: object
-  runtimeFilters: object[]
-  runtimeLegend: object[]
+  modal: Modal | null
+  runtimeData: RuntimeData | { init: boolean }
+  runtimeFilters: RuntimeFilters
+  runtimeLegend: GeneratedLegend | []
   statesToShow: string[]
   dataUrl: string
 }

package/src/test/CdcMap.test.jsx

@@ -0,0 +1,11 @@
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
+describe('Map', () => {
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
+  })
+})

package/src/types/MapConfig.ts

@@ -3,6 +3,10 @@ import { type Visualization } from '@cdc/core/types/Visualization'
 import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
 import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
+
+// Runtime data types
+export type RuntimeFilters = VizFilter[] & { fromHash?: number }
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -38,14 +42,19 @@ export type PatternSelection = {
   contrastCheck: boolean
 }
 
-export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>
-export type LatitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type LongitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type NavigateColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type PrimaryColumnProperties = Pick<
-  EditorColumnProperties,
-  'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'
->
+// Base column properties with name required, all others optional
+export type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
+  Partial<Pick<EditorColumnProperties, 'label' | 'tooltip' | 'dataTable' | 'prefix' | 'suffix'>>
+
+// Simple column type for name-only columns
+export type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
+
+// Specific column types for better semantics
+export type GeoColumnProperties = BaseColumnProperties
+export type LatitudeColumnProperties = SimpleColumnProperties
+export type LongitudeColumnProperties = SimpleColumnProperties
+export type NavigateColumnProperties = SimpleColumnProperties
+export type PrimaryColumnProperties = BaseColumnProperties
 
 export type LegendShapeItem = {
   column: string
@@ -70,15 +79,13 @@ export type Coordinate = [number, number]
 
 export type DataRow = {
   uid?: string // optional 'uid' property
-  [key: string]: any // allowing any additional properties with a dynamic key (e.g., for `configPrimaryName`)
+  [key: string]: string | number | boolean | null | undefined // allowing primitive data types for dynamic columns
 }
 
 export type MapConfig = Visualization & {
   annotations: Annotation[]
   // map color palette
   color: string
-  // custom color palette
-  customColors: string[]
   columns: {
     geo: GeoColumnProperties
     primary: PrimaryColumnProperties
@@ -93,6 +100,7 @@ export type MapConfig = Visualization & {
   filters: VizFilter[]
   general: {
     navigationTarget: '_self' | '_blank'
+    noDataMessage: string // single-state no data message
     subtext: string
     introText: string
     allowMapZoom: boolean
@@ -121,6 +129,9 @@ export type MapConfig = Visualization & {
     language: string
     palette: {
       isReversed: boolean
+      name: string
+      version: string
+      customColors?: string[]
     }
     showDownloadMediaButton: boolean
     showDownloadImgButton: boolean
@@ -180,8 +191,6 @@ export type MapConfig = Visualization & {
   }
   runtime: {
     editorErrorMessage: string[]
-    // when a single state map doesn't include a fips code show a message...
-    noStateFoundMessage: string
   }
   mapPosition: { coordinates: Coordinate; zoom: number }
   map: {
@@ -196,4 +205,4 @@ export type MapConfig = Visualization & {
   type: 'map'
   // version of the map
   version: Version
-}
+} & MarkupConfig

package/src/types/MapContext.ts

@@ -2,12 +2,10 @@ import { DataRow, type MapConfig } from './MapConfig'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { VizFilter } from '@cdc/core/types/VizFilter'
-import { type RefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
-  data: DataRow[]
   dimensions: DimensionsType
   displayDataAsText: string | number
   displayGeoName: (key: string, convertFipsCodes: boolean) => string
@@ -22,7 +20,6 @@ export type MapContext = {
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  innerContainerRef: RefObject<HTMLDivElement>
   isDashboard: boolean
   isEditor: boolean
   isFilterValueSupported: boolean
@@ -32,13 +29,9 @@ export type MapContext = {
   position: 'side' | 'top' | 'bottom'
   resetLegendToggles: Function
   runtimeFilters: Function
-  legendMemo: Function
-  legendSpecialClassLastMemo: Function
   runtimeLegend
   setParentConfig: Function
   setRuntimeData: Function
-  setRuntimeFilters: Function
-  setRuntimeLegend: Function
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig

package/src/types/runtimeLegend.ts

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

package/vite.config.js

@@ -1,9 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
-export default GenerateViteConfig(moduleName, null, {
-  jsxImportSource: '@emotion/react',
-  babel: {
-    plugins: ['@emotion/babel-plugin']
-  }
-})
+export default GenerateViteConfig(moduleName)

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})

package/src/coreStyles_map.scss

@@ -1,3 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/components/ui/tooltip';

package/src/helpers/colorDistributions.ts

@@ -1,12 +0,0 @@
-export const colorDistributions = {
-  1: [1],
-  2: [1, 3],
-  3: [1, 3, 5],
-  4: [0, 2, 4, 6],
-  5: [0, 2, 4, 6, 7],
-  6: [0, 2, 3, 4, 5, 7],
-  7: [0, 2, 3, 4, 5, 6, 7],
-  8: [0, 2, 3, 4, 5, 6, 7, 8],
-  9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
-  10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-}

package/src/helpers/generateColorsArray.ts

@@ -1,14 +0,0 @@
-import chroma from 'chroma-js'
-import { DEFAULT_MAP_BACKGROUND } from './constants'
-
-/**
- * Generate an array of colors based on a given color [color, hoverColor, darkColor]
- * @param {string} color - The base color to generate the array from
- * @param {boolean} special - A flag to determine if the hover color should be brighter or saturated
- * @returns {string[]} - An array of colors
- */
-export const generateColorsArray = (color: string = DEFAULT_MAP_BACKGROUND, special: boolean = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}

package/src/helpers/tests/generateColorsArray.test.ts

@@ -1,18 +0,0 @@
-import { generateColorsArray } from '../generateColorsArray'
-
-describe('generateColorsArray', () => {
-  it('should return an array of colors', () => {
-    const colors = generateColorsArray('#fde0dd', false)
-    expect(colors).toEqual(expect.arrayContaining(['#fde0dd', '#ffd0c9', '#edd1ce']))
-  })
-
-  it('should return a brighter hover color when special flag is true', () => {
-    const colors = generateColorsArray('#fde0dd', true)
-    expect(colors[1]).toEqual('#fffaf7')
-  })
-
-  it('should return a darker color for the third element in the array', () => {
-    const colors = generateColorsArray('#fde0dd', false)
-    expect(colors[2]).toBe('#edd1ce')
-  })
-})

package/src/helpers/tests/generateRuntimeLegendHash.test.ts

@@ -1,11 +0,0 @@
-import { generateRuntimeLegendHash } from '../generateRuntimeLegendHash'
-import usaExample from './../../../examples/default-usa.json'
-
-describe('generateRuntimeLegendHash', () => {
-  it('should return a hash value for a given state and runtime filters', () => {
-    const runtimeFilters = []
-    const expectedHash = 1253406922
-    const result = generateRuntimeLegendHash(usaExample, runtimeFilters)
-    expect(result).toBe(expectedHash)
-  })
-})