@cdc/map 4.26.3 → 4.26.5

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,17 +11,25 @@ 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
@@ -144,6 +152,9 @@ 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, row)
 

package/src/index.jsx

@@ -8,13 +8,16 @@ import CdcMap from './CdcMap'
 
 let isEditor = window.location.href.includes('editor=true')
 let domContainer = document.getElementsByClassName('react-container')[0]
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcMap
       isEditor={isEditor}
-      configUrl={domContainer.attributes['data-config'].value}
-      interactionLabel={domContainer.attributes['data-config'].value}
+      config={injectedConfig}
+      configUrl={injectedConfig ? undefined : configUrl}
+      interactionLabel={configUrl}
       containerEl={domContainer}
     />
   </React.StrictMode>

package/src/scss/main.scss

@@ -2,6 +2,7 @@
 @import 'editor-panel';
 @import '@cdc/core/styles/utils/accessibility';
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .type-map--has-error {
   .waiting {
@@ -17,7 +18,7 @@
   position: relative;
   display: flex; // Needed for the main content
 
-  .loading>div.la-ball-beat {
+  .loading > div.la-ball-beat {
     margin-top: 20%;
   }
 
@@ -125,33 +126,17 @@
       background: transparent;
 
       .cdc-callout {
-        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
-        border: 1px solid #dff2f6;
-        margin: 0;
-        padding: 1.25rem;
-        border-radius: 0.25rem;
-        position: relative;
-        background: transparent;
-
-        .cdc-callout__flag {
-          position: absolute;
-          top: -0.36rem;
-          right: 1.08rem;
-          width: 1.84rem;
-          height: auto;
-        }
+        --cdc-callout-background: transparent;
 
         .cove-visualization__title,
         .cove-visualization__header {
           background: transparent;
           border: 0;
-          color: var(--cool-gray-90, #1f2937);
           margin: 0 0 1rem;
           padding: 0;
           border-radius: 0;
 
           h2 {
-            color: var(--cool-gray-90, #1f2937);
             font-family: var(--fonts-nunito, var(--app-font-secondary));
             font-size: 1.1rem;
             font-weight: 700;
@@ -178,7 +163,7 @@
       flex-direction: column;
       row-gap: var(--cove-visualization-section-gap, 1.5rem);
 
-      >.legends {
+      > .legends {
         margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
       }
     }
@@ -271,7 +256,7 @@
     }
   }
 
-  .visualization-container.legend-wrapped-bottom>.legends,
+  .visualization-container.legend-wrapped-bottom > .legends,
   .legends.legend-wrapped-bottom {
     margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
   }
@@ -311,7 +296,7 @@
     label {
       flex-grow: 1;
 
-      >div.select-heading {
+      > div.select-heading {
         font-size: 1.1em;
         font-weight: 600;
         margin-bottom: 0.75em;

package/src/scss/map.scss

@@ -5,11 +5,13 @@
       flex-direction: row;
     }
   }
+
   .visualization-container.map {
     &.side {
       flex-direction: row;
     }
   }
+
   // Bubble Specific
   .visualization-container.bubble {
     &.side {
@@ -30,6 +32,7 @@ $medium: 768px;
 .single-geo {
   transition: 0.2s fill;
   cursor: pointer;
+
   &:focus {
     outline: 0;
   }
@@ -45,6 +48,20 @@ $medium: 768px;
   }
 }
 
+.svg-container,
+.county,
+.state-path,
+.bubble,
+.geo-point,
+.marker,
+.bubble *,
+.geo-point * {
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 .territories-label {
   font-weight: 700;
 }
@@ -52,6 +69,7 @@ $medium: 768px;
 // Cities and Territories
 .territories {
   gap: 0.5em;
+
   svg {
     max-width: var(--territory-svg-max-width, 30px);
     min-width: var(--territory-svg-min-width, 30px);
@@ -60,6 +78,7 @@ $medium: 768px;
     text {
       font-size: var(--territory-label-font-size);
       font-weight: 900;
+
       @include breakpointClass(sm) {
         font-size: var(--territory-label-font-size-mobile);
       }
@@ -71,6 +90,7 @@ $medium: 768px;
   .zoom-controls > button:not(.reset) {
     height: 2.5em;
     width: 2.5em;
+
     svg {
       height: 2.5em;
       width: 2.5em;

package/src/store/map.actions.ts

@@ -11,7 +11,10 @@ type SET_CONFIG = Action<'SET_CONFIG', MapConfig>
 type SET_COVE_LOADED_HAS_RAN = Action<'SET_COVE_LOADED_HAS_RAN', boolean>
 type SET_DISPLAY_PANEL = Action<'SET_DISPLAY_PANEL', boolean>
 type SET_FILTERED_COUNTRY_CODE = Action<'SET_FILTERED_COUNTRY_CODE', string>
-type SET_FILTERED_STATE_CODE = Action<'SET_FILTERED_STATE_CODE', string>
+type SET_FILTERED_STATE_COUNTY_CODE = Action<
+  'SET_FILTERED_STATE_COUNTY_CODE',
+  { stateCode?: string; countyCode?: string }
+>
 type SET_IS_DRAGGING_ANNOTATION = Action<'SET_IS_DRAGGING_ANNOTATION', boolean>
 type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_MODAL = Action<'SET_MODAL', Modal>
@@ -31,7 +34,7 @@ type MapActions =
   | SET_COVE_LOADED_HAS_RAN
   | SET_DISPLAY_PANEL
   | SET_FILTERED_COUNTRY_CODE
-  | SET_FILTERED_STATE_CODE
+  | SET_FILTERED_STATE_COUNTY_CODE
   | SET_IS_DRAGGING_ANNOTATION
   | SET_LOADING
   | SET_MODAL

package/src/store/map.reducer.ts

@@ -6,8 +6,11 @@ import _ from 'lodash'
 import { Modal } from '../types/Modal'
 import { GeneratedLegend } from '../helpers/generateRuntimeLegend'
 import { RuntimeData } from '../types/RuntimeData'
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
 
 export const getInitialState = (configObj = {}): MapState => {
+  const filteredStateCode = typeof window !== 'undefined' ? getQueryParam('state-code') || '' : ''
+  const filteredCountyCode = typeof window !== 'undefined' ? getQueryParam('county-code') || '' : ''
   // Create defaults without palette version to avoid overriding legacy configs
   const defaultsWithoutPaletteaName = { ...defaults }
 
@@ -24,7 +27,8 @@ export const getInitialState = (configObj = {}): MapState => {
     coveLoadedHasRan: false,
     displayPanel: false,
     filteredCountryCode: '',
-    filteredStateCode: '',
+    filteredCountyCode,
+    filteredStateCode,
     isDraggingAnnotation: false,
     topoData: null,
     translate: [0, 0],
@@ -47,6 +51,7 @@ export type MapState = {
   coveLoadedHasRan: boolean
   displayPanel: boolean
   filteredCountryCode: string
+  filteredCountyCode: string
   filteredStateCode: string
   isDraggingAnnotation: boolean
   topoData: object | null
@@ -77,8 +82,12 @@ const reducer = (state: MapState, action: MapActions): MapState => {
       return { ...state, displayPanel: action.payload }
     case 'SET_FILTERED_COUNTRY_CODE':
       return { ...state, filteredCountryCode: action.payload }
-    case 'SET_FILTERED_STATE_CODE':
-      return { ...state, filteredStateCode: action.payload }
+    case 'SET_FILTERED_STATE_COUNTY_CODE':
+      return {
+        ...state,
+        filteredStateCode: action.payload.stateCode || '',
+        filteredCountyCode: action.payload.countyCode || ''
+      }
     case 'SET_IS_DRAGGING_ANNOTATION':
       return { ...state, isDraggingAnnotation: action.payload }
     case 'SET_TOPO_DATA':

package/src/test/CdcMap.test.jsx

@@ -1,11 +1,35 @@
 import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
+
 describe('Map', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
     const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })

package/src/types/MapConfig.ts

@@ -5,6 +5,7 @@ import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
+import { AltTextConfig } from '@cdc/core/types/AltText'
 
 // Runtime data types
 export type RuntimeFilters = VizFilter[] & { fromHash?: number }
@@ -66,6 +67,7 @@ type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
 
 // Specific column types for better semantics
 type GeoColumnProperties = BaseColumnProperties & { displayColumn?: string }
+type HSAColumnProperties = SimpleColumnProperties
 type LatitudeColumnProperties = SimpleColumnProperties
 type LongitudeColumnProperties = SimpleColumnProperties
 type NavigateColumnProperties = SimpleColumnProperties
@@ -109,11 +111,13 @@ export type SmallMultiples = {
 }
 
 export type MapConfig = Visualization & {
+  altText?: AltTextConfig
   annotations: Annotation[]
   // map color palette
   color: string
   columns: {
     geo: GeoColumnProperties
+    hsa: HSAColumnProperties
     primary: PrimaryColumnProperties
     navigate: NavigateColumnProperties
     latitude: LatitudeColumnProperties
@@ -130,6 +134,7 @@ export type MapConfig = Visualization & {
     subtext: string
     introText: string
     allowMapZoom: boolean
+    showClearSelectionButton?: boolean
     convertFipsCodes: boolean
     displayAsHex: boolean
     displayStateLabels: boolean
@@ -164,7 +169,10 @@ export type MapConfig = Visualization & {
     showDownloadImgButton: boolean
     includeContextInDownload?: boolean
     showDownloadPdfButton: boolean
+    showHSABoundaries?: boolean
+    showNeighboringStates?: boolean
     showSidebar: boolean
+    showStateDropdown?: boolean
     showTitle: boolean
     statesPicked: {
       fipsCode: string
@@ -215,11 +223,14 @@ export type MapConfig = Visualization & {
     download: boolean
     downloadDataLabel?: string
     downloadImageLabel?: string
+    downloadUrlLabel?: string
     showDownloadUrl: boolean
     showFullGeoNameInCSV: boolean
     forceDisplay: boolean
     indexLabel: string
     cellMinWidth: string
+    search?: boolean
+    searchPlaceholder?: string
   }
   tooltips: {
     appearanceType: 'hover' | 'click'

package/src/types/MapContext.ts

@@ -7,12 +7,14 @@ import { MutableRefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
+  customNavigationHandler?: Function
   vizViewport?: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
   dimensions: DimensionsType
   displayDataAsText: string | number
   displayGeoName: (key: string, displayOverride?: string) => string
   filteredCountryCode: string
+  filteredCountyCode: string
   filteredStateCode: string
   generateRuntimeData: (
     configObj: MapConfig,
@@ -37,7 +39,10 @@ export type MapContext = {
   runtimeLegend
   setParentConfig: Function
   setRuntimeData: Function
-  setFilteredStateCode: (stateCode: string) => void
+  setFilteredStateCountyCode: (stateCode: string, countyCode?: string) => void
+  setSharedFilter?: Function
+  clearSharedFilter?: (key: string) => void
+  hasActiveSharedFilter?: boolean
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig

package/topojson-updater/README.txt

@@ -4,7 +4,7 @@ Node script to convert shapefile data from census.gov to topojson, and format/op
 
 
 Usage
-1. Run yarn install at root folder
+1. Run "yarn install" inside the packages/map/topojson-updater folder (this package is not part of the root Yarn workspace)
 2. Download shapefiles from census.gov (https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html) for the year that needs to be supported to the "shapefiles" folder of the project
     - Always choose the options with the smallest file size
     - Shapefiles for both states and counties should be downloaded for each year being added