@cdc/map 4.26.2 → 4.26.4

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

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest'
+import { getMatchingPatternForRow } from '../getMatchingPatternForRow'
+import { PatternSelection } from '../../types/MapConfig'
+
+describe('getMatchingPatternForRow', () => {
+  it('uses the last matching specific pattern when multiple specific patterns match', () => {
+    const row = { Rate: 55 }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: 'Rate',
+        dataValue: '55',
+        pattern: 'lines',
+        size: 'small',
+        color: '#111',
+        label: '',
+        contrastCheck: true
+      },
+      {
+        dataKey: 'Rate',
+        dataValue: '55',
+        pattern: 'circles',
+        size: 'medium',
+        color: '#000',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    const result = getMatchingPatternForRow(row, patterns)
+
+    expect(result?.patternIndex).toBe(1)
+    expect(result?.pattern.pattern).toBe('circles')
+  })
+
+  it('matches specific dataKey patterns first', () => {
+    const row = { Rate: 55, Status: '55' }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: '',
+        dataValue: '55',
+        pattern: 'lines',
+        size: 'small',
+        color: '#111',
+        label: '',
+        contrastCheck: true
+      },
+      {
+        dataKey: 'Rate',
+        dataValue: '55',
+        pattern: 'circles',
+        size: 'medium',
+        color: '#000',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    const result = getMatchingPatternForRow(row, patterns)
+
+    expect(result?.patternIndex).toBe(1)
+    expect(result?.matchedDataKey).toBe('Rate')
+    expect(result?.pattern.pattern).toBe('circles')
+  })
+
+  it('falls back to broad matching when dataKey is blank', () => {
+    const row = { State: 'Colorado', Rate: 55 }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: '',
+        dataValue: 'Colorado',
+        pattern: 'waves',
+        size: 'large',
+        color: '#333',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    const result = getMatchingPatternForRow(row, patterns)
+
+    expect(result?.patternIndex).toBe(0)
+    expect(result?.matchedDataKey).toBe('State')
+  })
+
+  it('does not match when dataValue is empty', () => {
+    const row = { State: 'Colorado', Rate: 55 }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: '',
+        dataValue: '   ',
+        pattern: 'waves',
+        size: 'large',
+        color: '#333',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    expect(getMatchingPatternForRow(row, patterns)).toBeNull()
+  })
+
+  it('supports numeric string and number matching for broad patterns', () => {
+    const row = { Rate: 55 }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: '',
+        dataValue: '55',
+        pattern: 'waves',
+        size: 'large',
+        color: '#333',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    const result = getMatchingPatternForRow(row, patterns)
+
+    expect(result?.matchedDataKey).toBe('Rate')
+    expect(result?.patternIndex).toBe(0)
+  })
+
+  it('uses the last matching broad pattern when multiple broad patterns match', () => {
+    const row = { Category: 'Target' }
+    const patterns: PatternSelection[] = [
+      {
+        dataKey: '',
+        dataValue: 'Target',
+        pattern: 'lines',
+        size: 'small',
+        color: '#111',
+        label: '',
+        contrastCheck: true
+      },
+      {
+        dataKey: '',
+        dataValue: 'Target',
+        pattern: 'waves',
+        size: 'large',
+        color: '#333',
+        label: '',
+        contrastCheck: true
+      }
+    ]
+
+    const result = getMatchingPatternForRow(row, patterns)
+
+    expect(result?.patternIndex).toBe(1)
+    expect(result?.pattern.pattern).toBe('waves')
+  })
+})

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

@@ -4,8 +4,24 @@ import { getPatternForRow } from '../getPatternForRow'
 const baseConfig: any = {
   map: {
     patterns: [
-      { dataKey: 'Percent Vaccinated', dataValue: '99.99', pattern: 'circles', size: 'medium', color: '#000' },
-      { dataKey: 'Status', dataValue: 'NA', pattern: 'lines', size: 'small', color: '#111' }
+      {
+        dataKey: 'Percent Vaccinated',
+        dataValue: '99.99',
+        pattern: 'circles',
+        size: 'medium',
+        color: '#000',
+        label: '',
+        contrastCheck: true
+      },
+      {
+        dataKey: 'Status',
+        dataValue: 'NA',
+        pattern: 'lines',
+        size: 'small',
+        color: '#111',
+        label: '',
+        contrastCheck: true
+      }
     ]
   }
 }
@@ -36,4 +52,126 @@ describe('getPatternForRow', () => {
     const row = { 'Percent Vaccinated': 75.06, Status: '*' }
     expect(getPatternForRow(row, baseConfig)).toBeNull()
   })
+
+  it('matches blank dataKey patterns against any row value', () => {
+    const config = {
+      map: {
+        patterns: [
+          {
+            dataKey: '',
+            dataValue: 'Colorado',
+            pattern: 'waves',
+            size: 'large',
+            color: '#222',
+            label: '',
+            contrastCheck: true
+          }
+        ]
+      }
+    }
+    const row = { STATE: 'Colorado', Rate: 55 }
+    const result = getPatternForRow(row, config)
+
+    expect(result).toEqual({
+      pattern: 'waves',
+      dataKey: 'STATE',
+      size: 'large',
+      patternIndex: 0,
+      color: '#222'
+    })
+  })
+
+  it('prioritizes specific dataKey matches over broad matches', () => {
+    const config = {
+      map: {
+        patterns: [
+          {
+            dataKey: '',
+            dataValue: '55',
+            pattern: 'lines',
+            size: 'small',
+            color: '#111',
+            label: '',
+            contrastCheck: true
+          },
+          {
+            dataKey: 'Rate',
+            dataValue: '55',
+            pattern: 'circles',
+            size: 'medium',
+            color: '#000',
+            label: '',
+            contrastCheck: true
+          }
+        ]
+      }
+    }
+    const row = { Rate: 55, Category: '55' }
+    const result = getPatternForRow(row, config)
+
+    expect(result).toEqual({
+      pattern: 'circles',
+      dataKey: 'Rate',
+      size: 'medium',
+      patternIndex: 1,
+      color: '#000'
+    })
+  })
+
+  it('does not match blank dataKey patterns with empty values', () => {
+    const config = {
+      map: {
+        patterns: [
+          {
+            dataKey: '',
+            dataValue: '   ',
+            pattern: 'lines',
+            size: 'small',
+            color: '#111',
+            label: '',
+            contrastCheck: true
+          }
+        ]
+      }
+    }
+    const row = { STATE: 'Colorado' }
+    expect(getPatternForRow(row, config)).toBeNull()
+  })
+
+  it('returns the last matching specific pattern to preserve dominant visual overlay behavior', () => {
+    const config = {
+      map: {
+        patterns: [
+          {
+            dataKey: 'Rate',
+            dataValue: '55',
+            pattern: 'lines',
+            size: 'small',
+            color: '#111',
+            label: '',
+            contrastCheck: true
+          },
+          {
+            dataKey: 'Rate',
+            dataValue: '55',
+            pattern: 'waves',
+            size: 'large',
+            color: '#222',
+            label: '',
+            contrastCheck: true
+          }
+        ]
+      }
+    }
+    const row = { Rate: 55 }
+    const result = getPatternForRow(row, config)
+
+    expect(result).toEqual({
+      pattern: 'waves',
+      dataKey: 'Rate',
+      size: 'large',
+      patternIndex: 1,
+      color: '#222'
+    })
+  })
 })

package/src/helpers/urlDataHelpers.ts

@@ -5,6 +5,7 @@ import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import { MapConfig } from '../types/MapConfig'
 import { CSV_PARSE_CONFIG } from './constants'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+import { extractDataAndMetadata } from '@cdc/core/helpers/extractDataAndMetadata'
 
 const buildQueryString = (params: Record<string, string>): string =>
   Object.keys(params)
@@ -34,6 +35,7 @@ export const reloadURLData = async (config: MapConfig, setConfig: (config: MapCo
 
   let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${buildQueryString(qsParams)}`
   let data
+  let dataMetadata: Record<string, string> = {}
 
   try {
     const regex = /(?:\.([^.]+))?$/
@@ -47,7 +49,10 @@ export const reloadURLData = async (config: MapConfig, setConfig: (config: MapCo
           return parsedCsv.data
         })
     } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
-      data = await fetch(dataUrlFinal).then(response => response.json())
+      const json = await fetch(dataUrlFinal).then(response => response.json())
+      const extracted = extractDataAndMetadata(json)
+      data = extracted.data
+      dataMetadata = extracted.dataMetadata
     } else {
       data = []
     }
@@ -64,6 +69,7 @@ export const reloadURLData = async (config: MapConfig, setConfig: (config: MapCo
 
   const newConfig = cloneConfig(config)
   newConfig.data = data
+  newConfig.dataMetadata = dataMetadata
   newConfig.runtimeDataUrl = dataUrlFinal
 
   setConfig(newConfig)

package/src/hooks/useApplyTooltipsToGeo.tsx

@@ -1,8 +1,7 @@
 import { type ReactNode, useContext } from 'react'
-import { displayGeoName, navigationHandler } from '../helpers'
+import { navigationHandler } from '../helpers'
 import ConfigContext from '../context'
 import useTooltip from './useTooltip'
-import { supportedStatesFipsCodes } from './../data/supported-geos'
 import parse from 'html-react-parser'
 import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
 import ExternalIcon from './../images/external-link.svg'
@@ -10,7 +9,7 @@ import ExternalIcon from './../images/external-link.svg'
 const useApplyTooltipsToGeo = () => {
   const { config, customNavigationHandler } = useContext(ConfigContext)
   const navigationColumnName = config.columns.navigate.name
-  const { buildTooltip } = useTooltip({ config, displayGeoName, supportedStatesFipsCodes })
+  const { buildTooltip } = useTooltip(config)
 
   const applyTooltipsToGeo = (geoName: string, row: Object, returnType = 'string') => {
     let toolTipText: string | ReactNode = buildTooltip(row, geoName, '')
@@ -18,7 +17,11 @@ const useApplyTooltipsToGeo = () => {
     // We convert the markup into JSX and add a navigation link if it's going into a modal.
     if ('jsx' === returnType) {
       if (typeof toolTipText === 'string') {
-        toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
+        toolTipText = [
+          <div key='modal-content' className='cove-prose'>
+            {parse(toolTipText)}
+          </div>
+        ]
       }
 
       if (config.columns.hasOwnProperty('navigate') && row[navigationColumnName]) {

package/src/hooks/useMapLayers.tsx

@@ -53,7 +53,7 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
     setConfig(newConfig)
   }
 
-  const handleAddLayer = (e: Event) => {
+  const handleAddLayer = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     const placeHolderLayer = {
       name: 'New Custom Layer',

package/src/hooks/useResizeObserver.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useRef } from 'react'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { type DimensionsType } from '@cdc/core/types/Dimensions'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
@@ -11,37 +11,51 @@ export const useResizeObserver = (isEditor: boolean) => {
   const [vizViewport, setVizViewport] = useState<ViewPort>(null)
   const [container, setContainer] = useState<HTMLElement | null>(null)
 
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      let { width, height } = entry.contentRect
+  // Keep isEditor fresh in the observer callback without recreating the observer
+  const isEditorRef = useRef(isEditor)
+  isEditorRef.current = isEditor
 
-      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
-      width = editorIsOpen ? width - EDITOR_WIDTH : width
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
-      // Account for 1rem padding in editor mode
-      width = width - (isEditor ? 36 : 0)
+  const outerContainerRef = useCallback(node => {
+    // Tear down any previous observer (node swap or unmount)
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect()
+      resizeObserverRef.current = null
+    }
 
-      const newViewport = getViewport(width)
+    if (node !== null) {
+      resizeObserverRef.current = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          let { width, height } = entry.contentRect
 
-      setCurrentViewport(newViewport)
-      setVizViewport(newViewport)
+          const editorIsOpen = isEditorRef.current && !!document.querySelector('.editor-panel:not(.hidden)')
+          width = editorIsOpen ? width - EDITOR_WIDTH : width
 
-      setDimensions([width, height])
-    }
-  })
+          // Account for 1rem padding in editor mode
+          width = width - (isEditorRef.current ? 36 : 0)
 
-  const outerContainerRef = useCallback(node => {
-    if (node !== null) {
-      resizeObserver.observe(node)
-    }
-    setContainer(node)
+          const newViewport = getViewport(width)
 
-    return () => {
-      resizeObserver.disconnect()
+          setCurrentViewport(newViewport)
+          setVizViewport(newViewport)
+          setDimensions([width, height])
+        }
+      })
+      resizeObserverRef.current.observe(node)
     }
+
+    setContainer(node)
   }, [])
 
-  return { resizeObserver, dimensions, currentViewport, vizViewport, outerContainerRef, container }
+  return {
+    resizeObserver: resizeObserverRef.current,
+    dimensions,
+    currentViewport,
+    vizViewport,
+    outerContainerRef,
+    container
+  }
 }
 
 export default useResizeObserver

package/src/hooks/useTooltip.test.tsx

@@ -0,0 +1,64 @@
+import { renderHook } from '@testing-library/react'
+import useTooltip from './useTooltip'
+
+const supportedStatesFipsCodes = {
+  '01': 'Alabama'
+}
+
+const createConfig = (hideGeoColumnInTooltip: boolean) => ({
+  general: {
+    geoType: 'world',
+    type: 'map',
+    hideGeoColumnInTooltip,
+    hidePrimaryColumnInTooltip: false,
+    geoLabelOverride: ''
+  },
+  columns: {
+    geo: {
+      name: 'Country',
+      label: 'Location',
+      tooltip: true,
+      displayColumn: ''
+    },
+    primary: {
+      name: 'Value',
+      label: 'Value',
+      tooltip: true
+    },
+    navigate: {
+      name: ''
+    }
+  },
+  legend: {
+    specialClasses: []
+  },
+  tooltips: {
+    noDataLabel: 'No Data'
+  }
+})
+
+describe('useTooltip', () => {
+  it('hides the geography column label in the tooltip body when configured', () => {
+    const row = { Country: 'ssd', Value: 10 }
+
+    const { result: visibleResult } = renderHook(() =>
+      useTooltip({
+        config: createConfig(false),
+        supportedStatesFipsCodes
+      })
+    )
+    const { result: hiddenResult } = renderHook(() =>
+      useTooltip({
+        config: createConfig(true),
+        supportedStatesFipsCodes
+      })
+    )
+
+    const visibleTooltip = visibleResult.current.buildTooltip(row, 'South Sudan')
+    const hiddenTooltip = hiddenResult.current.buildTooltip(row, 'South Sudan')
+
+    expect(visibleTooltip).toContain('Location: South Sudan')
+    expect(hiddenTooltip).not.toContain('Location: South Sudan')
+    expect(hiddenTooltip).toContain('<li class="tooltip-body">South Sudan</li>')
+  })
+})

package/src/hooks/useTooltip.ts

@@ -1,9 +1,9 @@
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import { displayGeoName } from '../helpers/displayGeoName'
+import { MapConfig } from '../types/MapConfig'
+import { supportedStatesFipsCodes } from '../data/supported-geos'
 
-const useTooltip = props => {
-  const { config, supportedStatesFipsCodes } = props
-
+const useTooltip = (config: MapConfig) => {
   /**
    * On county maps there's a need to append the state name
    * @param {String} toolTipText - previous tooltip text to build upon
@@ -11,24 +11,33 @@ const useTooltip = props => {
    * @returns {String} toolTipText - new toolTipText
    */
   const handleTooltipStateNameColumn = (toolTipText, row) => {
-    const { geoType, type, hideGeoColumnInTooltip } = config.general
+    const { geoType, type, hideGeoColumnInTooltip, showHSABoundaries } = config.general
     if (geoType === 'us-county' && type !== 'us-geocode') {
       let stateFipsCode = row[config.columns.geo.name].substring(0, 2)
       const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += hideGeoColumnInTooltip
-        ? `<strong>${stateName}</strong><br/>`
-        : `<strong>Location:  ${stateName}</strong><br/>`
+      toolTipText +=
+        hideGeoColumnInTooltip || showHSABoundaries
+          ? `<strong>${stateName}</strong><br/>`
+          : `<strong>Location:  ${stateName}</strong><br/>`
     }
     return toolTipText
   }
 
+  const getHSAColumnText = (config: MapConfig, row: Object) => {
+    const { hsa } = config.columns
+    if (!hsa || !config.general.showHSABoundaries) return ''
+    const hsaDescription = row[hsa.name]
+    return `<p class="tooltip-heading">HSA: ${hsaDescription}</p>`
+  }
+
   /**
    * On county and state maps, adds the ability to hide the geo column name (prefix)
    * @param {String} geoName - feature name
    * @returns {String} text to be appended to toolTipText
    */
-  const handleTooltipGeoColumn = (geoName: string) => {
+  const handleTooltipGeoColumn = (geoName: string, row?) => {
     const { hideGeoColumnInTooltip } = config.general as { hideGeoColumnInTooltip: boolean }
+    const displayOverride = row?.[config.columns.geo?.displayColumn]
 
     const handleTooltipPrefix = (toolTipText: string) => {
       const { geoType, geoLabelOverride } = config.general
@@ -54,8 +63,11 @@ const useTooltip = props => {
 
     const prefix = handleTooltipPrefix('')
 
-    if (hideGeoColumnInTooltip) return `<strong>${displayGeoName(geoName)}</strong>`
-    return `<p class="tooltip-heading" style="text-transform: none;">${prefix}${displayGeoName(geoName)}</p>`
+    if (hideGeoColumnInTooltip) return `<strong>${displayGeoName(geoName, displayOverride)}</strong>`
+    return `<p class="tooltip-heading" style="text-transform: none;">${prefix}${displayGeoName(
+      geoName,
+      displayOverride
+    )}</p>`
   }
 
   /**
@@ -74,13 +86,29 @@ const useTooltip = props => {
   }
 
   const handleTooltipPrimaryColumn = (tooltipValue, column) => {
-    const { hidePrimaryColumnInTooltip } = config.general as { hidePrimaryColumnInTooltip: boolean }
+    const { hidePrimaryColumnInTooltip, hideGeoColumnInTooltip } = config.general as {
+      hidePrimaryColumnInTooltip: boolean
+      hideGeoColumnInTooltip: boolean
+    }
     let tooltipPrefix = column.label?.length > 0 ? column.label : ''
-    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix)
-      return `<li class="tooltip-body">${tooltipValue}</li>`
+    const hidePrimaryLabel = column.name === config.columns.primary.name && hidePrimaryColumnInTooltip
+    const hideGeoLabel = column.name === config.columns.geo.name && hideGeoColumnInTooltip
+
+    if (hidePrimaryLabel || hideGeoLabel || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
     return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
   }
 
+  const formatTooltipColumnValue = (row, column, columnKey) => {
+    if (!row) return config.tooltips?.noDataLabel || 'No Data'
+
+    if (column.name === config.columns.geo.name) {
+      const displayOverride = row?.[config.columns.geo?.displayColumn]
+      return displayGeoName(row[column.name], displayOverride)
+    }
+
+    return displayDataAsText(row[column.name], columnKey, config)
+  }
+
   /**
    *
    * @param {String} toolTipText - previous tooltipText to build upon
@@ -106,7 +134,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = row ? displayDataAsText(row[column.name], columnKey, config) : 'No Data'
+            tooltipValue = formatTooltipColumnValue(row, column, columnKey)
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
@@ -124,8 +152,11 @@ const useTooltip = props => {
     // Handle County Location Columns
     toolTipText += handleTooltipStateNameColumn(toolTipText, row)
 
+    // Handle HSA Column
+    toolTipText += getHSAColumnText(config, row)
+
     // Handle Columns > Data Column In tooltips
-    toolTipText += handleTooltipGeoColumn(geoName)
+    toolTipText += handleTooltipGeoColumn(geoName, row)
 
     // Handle Columns > Geography Column In tooltips
     toolTipText = handleTooltipColumns(toolTipText, row)

package/src/scss/editor-panel.scss

@@ -18,7 +18,7 @@
   }
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
   .editor-panel {
     .cove-input-group,
     .cove-accordion__small-inputs {