@cdc/map 4.26.4 → 4.26.5

package/src/_stories/CdcMap.smoke.stories.tsx

@@ -12,8 +12,10 @@ import MultiCountryHide from './_mock/multi-country-hide.json'
 import SingleStateWithFilters from './_mock/DEV-8942.json'
 import exampleCityState from './_mock/example-city-state.json'
 import USBubbleCities from './_mock/us-bubble-cities.json'
+import worldBubbleReset from './_mock/world-bubble-reset.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import exampleLegendBins from './_mock/legend-bins.json'
+import { performAndAssert, waitForPresence } from '@cdc/core/helpers/testing'
 
 // Fallback step function for test descriptions
 const step = async (description: string, fn: () => Promise<void> | void) => {
@@ -198,6 +200,52 @@ export const Bubble_Map: Story = {
   }
 }
 
+export const World_Bubble_Reset_Restores_All_Bubbles: Story = {
+  args: {
+    config: worldBubbleReset,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('circle.bubble.country--France', canvasElement)
+
+    const getBubbleState = () => ({
+      bubbleCount: canvasElement.querySelectorAll('circle.bubble[data-tooltip-id]').length
+    })
+
+    const dispatchBubblePointerClick = (bubble: Element) => {
+      const rect = bubble.getBoundingClientRect()
+      const clientX = rect.left + rect.width / 2
+      const clientY = rect.top + rect.height / 2
+
+      bubble.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX, clientY }))
+      bubble.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, clientX, clientY }))
+    }
+
+    await performAndAssert(
+      'World bubble click narrows the rendered bubble set',
+      getBubbleState,
+      async () => {
+        const franceBubble = canvasElement.querySelector('circle.bubble.country--France')
+        expect(franceBubble).toBeTruthy()
+        dispatchBubblePointerClick(franceBubble as Element)
+      },
+      (before, after) => after.bubbleCount > 0 && after.bubbleCount < before.bubbleCount
+    )
+
+    await performAndAssert(
+      'Reset Zoom restores all world bubbles',
+      getBubbleState,
+      async () => {
+        const resetButton = canvasElement.querySelector('button[aria-label="Reset Zoom"]') as HTMLButtonElement | null
+        expect(resetButton).toBeTruthy()
+        resetButton?.click()
+      },
+      (_before, after) => after.bubbleCount === worldBubbleReset.data.length
+    )
+  }
+}
+
 export const HHS_Region_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-hhs-regions-data.json'

package/src/_stories/_mock/alt_text_metadata.json

@@ -0,0 +1,65 @@
+{
+  "version": "4.26.4",
+  "color": "pinkpurple",
+  "general": {
+    "title": "COVID-19 Case Rates by State",
+    "geoType": "us",
+    "type": "data",
+    "showTitle": true
+  },
+  "type": "map",
+  "dataMetadata": {
+    "altDescription": "Choropleth map of the United States showing COVID-19 case rates per 100,000 population. Rates are highest in the Southeast, with Alabama, Mississippi, and Louisiana exceeding 50 per 100,000.",
+    "lastUpdated": "2024-09-21",
+    "source": "CDC COVID Data Tracker"
+  },
+  "columns": {
+    "geo": {
+      "name": "FIPS Codes",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "name": "Rate",
+      "label": "Rate per 100k",
+      "prefix": "",
+      "suffix": "",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "navigate": { "name": "" },
+    "latitude": { "name": "" },
+    "longitude": { "name": "" }
+  },
+  "legend": {
+    "type": "equalnumber",
+    "numberOfItems": 3,
+    "position": "side",
+    "style": "circles",
+    "title": "Rate per 100k",
+    "description": "",
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": false,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false,
+    "hideBorder": false
+  },
+  "filters": [],
+  "filterBehavior": "Filter Change",
+  "data": [
+    { "FIPS Codes": "01", "Rate": 55 },
+    { "FIPS Codes": "04", "Rate": 22 },
+    { "FIPS Codes": "06", "Rate": 31 },
+    { "FIPS Codes": "12", "Rate": 44 },
+    { "FIPS Codes": "13", "Rate": 48 },
+    { "FIPS Codes": "22", "Rate": 52 },
+    { "FIPS Codes": "28", "Rate": 58 },
+    { "FIPS Codes": "36", "Rate": 27 },
+    { "FIPS Codes": "48", "Rate": 38 }
+  ]
+}

package/src/_stories/_mock/world-bubble-reset.json

@@ -0,0 +1,138 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "World Bubble Reset Demo",
+    "subtext": "Click a bubble to zoom, then use Reset Zoom to restore all bubbles.",
+    "type": "bubble",
+    "geoType": "world",
+    "headerColor": "theme-blue",
+    "showSidebar": true,
+    "showTitle": true,
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "backgroundColor": "#ffffff",
+    "geoBorderColor": "darkGray",
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "showDownloadMediaButton": false,
+    "fullBorder": false,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "geoLabelOverride": "",
+    "noDataFoundMessage": "No data found"
+  },
+  "type": "map",
+  "color": "bluegreen",
+  "columns": {
+    "geo": {
+      "name": "country",
+      "label": "Country",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "cases",
+      "label": "Cases"
+    },
+    "navigate": {
+      "name": ""
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "dynamicDescription": false,
+    "type": "equalinterval",
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "Cases",
+    "showTitle": true,
+    "reversedOrder": false,
+    "singleColumnLegend": false,
+    "hideBorder": false
+  },
+  "filters": [],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 10,
+    "maxBubbleSize": 28,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 12,
+    "showBubbleZeros": true,
+    "cityStyleLabel": "Bubble",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 30],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": []
+  },
+  "data": [
+    {
+      "country": "France",
+      "cases": 120
+    },
+    {
+      "country": "Brazil",
+      "cases": 340
+    },
+    {
+      "country": "Japan",
+      "cases": 280
+    },
+    {
+      "country": "Australia",
+      "cases": 200
+    },
+    {
+      "country": "South Africa",
+      "cases": 160
+    },
+    {
+      "country": "Canada",
+      "cases": 240
+    }
+  ]
+}

package/src/_stories/_mock/world-data-zoom-filters.json

@@ -0,0 +1,166 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "World Data Map Zoom With Filters",
+    "subtext": "Use the region filter, zoom into countries, and test reset behavior on a world data map.",
+    "type": "data",
+    "geoType": "world",
+    "headerColor": "theme-blue",
+    "showSidebar": true,
+    "showTitle": true,
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "backgroundColor": "#ffffff",
+    "geoBorderColor": "darkGray",
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "showDownloadMediaButton": false,
+    "fullBorder": false,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "geoLabelOverride": "",
+    "noDataFoundMessage": "No data found"
+  },
+  "type": "map",
+  "color": "bluegreen",
+  "columns": {
+    "geo": {
+      "name": "Country",
+      "label": "Country",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "primary": {
+      "name": "Value",
+      "label": "Value",
+      "prefix": "",
+      "suffix": "",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "navigate": {
+      "name": ""
+    },
+    "additionalColumn1": {
+      "name": "Region",
+      "label": "Region",
+      "tooltip": true,
+      "dataTable": true,
+      "prefix": "",
+      "suffix": ""
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "dynamicDescription": false,
+    "type": "equalinterval",
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "Value",
+    "showTitle": true,
+    "reversedOrder": false,
+    "singleColumnLegend": false,
+    "hideBorder": false
+  },
+  "filters": [
+    {
+      "order": "asc",
+      "label": "Region",
+      "columnName": "Region",
+      "values": ["Europe", "Americas", "Asia-Pacific"],
+      "active": "Europe",
+      "filterStyle": "dropdown"
+    }
+  ],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 10,
+    "maxBubbleSize": 28,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 12,
+    "showBubbleZeros": true,
+    "cityStyleLabel": "Bubble",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 30],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": []
+  },
+  "data": [
+    {
+      "Country": "France",
+      "Value": 120,
+      "Region": "Europe"
+    },
+    {
+      "Country": "Germany",
+      "Value": 150,
+      "Region": "Europe"
+    },
+    {
+      "Country": "Italy",
+      "Value": 105,
+      "Region": "Europe"
+    },
+    {
+      "Country": "Brazil",
+      "Value": 210,
+      "Region": "Americas"
+    },
+    {
+      "Country": "Canada",
+      "Value": 175,
+      "Region": "Americas"
+    },
+    {
+      "Country": "Japan",
+      "Value": 190,
+      "Region": "Asia-Pacific"
+    },
+    {
+      "Country": "Australia",
+      "Value": 165,
+      "Region": "Asia-Pacific"
+    }
+  ]
+}

package/src/components/BubbleList.tsx

@@ -64,11 +64,16 @@ const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
 
     // Zoom the map in...
     dispatch({ type: 'SET_POSITION', payload: { coordinates: reversedCoordinates, zoom: 3 } })
+    dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: _filteredCountryCode })
 
     // ...and show the data for the clicked country
     dispatch({ type: 'SET_RUNTIME_DATA', payload: _tempRuntimeData })
   }
 
+  const handleBubblePointerDown = (e: React.PointerEvent<SVGCircleElement> | React.MouseEvent<SVGCircleElement>) => {
+    e.preventDefault()
+  }
+
   const sortedRuntimeData: DataRow = Object.values(runtimeData).sort((a, b) =>
     a[primaryColumnName] < b[primaryColumnName] ? 1 : -1
   )
@@ -112,7 +117,9 @@ const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               strokeWidth={1.25}
               fillOpacity={0.4}
               onMouseEnter={() => {}}
+              onMouseDown={handleBubblePointerDown}
               onPointerDown={e => {
+                handleBubblePointerDown(e)
                 pointerX = e.clientX
                 pointerY = e.clientY
               }}
@@ -148,7 +155,9 @@ const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 stroke={'white'}
                 strokeWidth={0.5}
                 onMouseEnter={() => {}}
+                onMouseDown={handleBubblePointerDown}
                 onPointerDown={e => {
+                  handleBubblePointerDown(e)
                   pointerX = e.clientX
                   pointerY = e.clientY
                 }}
@@ -226,7 +235,9 @@ const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               strokeWidth={1.25}
               fillOpacity={0.4}
               onMouseEnter={() => {}}
+              onMouseDown={handleBubblePointerDown}
               onPointerDown={e => {
+                handleBubblePointerDown(e)
                 pointerX = e.clientX
                 pointerY = e.clientY
               }}
@@ -262,7 +273,9 @@ const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 strokeWidth={0.5}
                 fillOpacity={0.4}
                 onMouseEnter={() => {}}
+                onMouseDown={handleBubblePointerDown}
                 onPointerDown={e => {
+                  handleBubblePointerDown(e)
                   pointerX = e.clientX
                   pointerY = e.clientY
                 }}

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState, useMemo, useRef } from 'react'
 import { filterColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
 
 // Third Party
 import {
@@ -1831,6 +1832,105 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         </Tooltip>
                       }
                     />
+
+                    {/* Accessible Alt Text Description */}
+                    {(() => {
+                      const metadataKeys = Object.keys(config.dataMetadata || {})
+                      const hasMetadata = metadataKeys.length > 0
+                      const descType = config.altText?.type || ''
+                      const resolvedDescription = resolveAltTextDescription(config.altText, config.dataMetadata)
+                      return (
+                        <>
+                          <Select
+                            value={descType}
+                            fieldName='altTextType'
+                            label='Alt Text Description'
+                            options={[
+                              { value: '', label: 'None' },
+                              { value: 'static', label: 'Static (manual text)' },
+                              { value: 'metadata', label: 'Data File Metadata' }
+                            ]}
+                            updateField={(_section, _subsection, _fieldName, value) => {
+                              if (value === '') {
+                                updateField(null, null, 'altText', undefined)
+                              } else {
+                                updateField(null, null, 'altText', { type: value as 'static' | 'metadata' })
+                              }
+                            }}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    Add a longer description for screen readers. The map title is always auto-generated.
+                                    Use "Static" for manually written text, or "Data File Metadata" to pull it from a
+                                    key in your data file.
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          {descType === 'static' && (
+                            <TextField
+                              value={config.altText?.value || ''}
+                              fieldName='altTextValue'
+                              type='textarea'
+                              label='Description Text'
+                              placeholder='Longer interpretive description of map insights...'
+                              updateField={(_section, _subsection, _fieldName, value) => {
+                                updateField(null, null, 'altText', { ...config.altText, value })
+                              }}
+                            />
+                          )}
+                          {descType === 'metadata' && (
+                            <>
+                              {hasMetadata ? (
+                                <Select
+                                  value={config.altText?.metadataKey || ''}
+                                  fieldName='altTextMetadataKey'
+                                  label='Description Metadata Field'
+                                  options={[
+                                    { value: '', label: 'Select Metadata Field...' },
+                                    ...metadataKeys.map(key => ({
+                                      value: key,
+                                      label: `${key}: ${config.dataMetadata[key]}`
+                                    }))
+                                  ]}
+                                  updateField={(_section, _subsection, _fieldName, value) => {
+                                    updateField(null, null, 'altText', { ...config.altText, metadataKey: value })
+                                  }}
+                                />
+                              ) : (
+                                <span className='subtext'>
+                                  No metadata fields are available. Your data file must be a JSON object with a{' '}
+                                  <code>data</code> array and sibling key-value pairs, for example:{' '}
+                                  <code>{`{ "altDescription": "...", "data": [...] }`}</code>
+                                </span>
+                              )}
+                            </>
+                          )}
+                          {resolvedDescription && (
+                            <div
+                              style={{
+                                marginTop: '1em',
+                                padding: '0.75em',
+                                background: '#f5f5f5',
+                                borderRadius: '4px',
+                                fontSize: '0.8em',
+                                textTransform: 'none'
+                              }}
+                            >
+                              <strong style={{ display: 'block', marginBottom: '0.25em' }}>Preview:</strong>
+                              <p data-testid='alt-text-desc-preview' style={{ margin: 0, fontStyle: 'italic' }}>
+                                {resolvedDescription}
+                              </p>
+                            </div>
+                          )}
+                        </>
+                      )
+                    })()}
                   </AccordionItemPanel>
                 </AccordionItem>
                 <AccordionItem>
@@ -3220,6 +3320,26 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         label='Show collapse below table'
                         updateField={updateField}
                       />
+                      <CheckBox
+                        value={config.table.search ?? false}
+                        section='table'
+                        subsection={null}
+                        fieldName='search'
+                        label='Enable Search'
+                        updateField={updateField}
+                      />
+                      {config.table.search && (
+                        <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+                          <TextField
+                            value={config.table.searchPlaceholder || ''}
+                            section='table'
+                            fieldName='searchPlaceholder'
+                            label='Search Placeholder Text'
+                            placeholder='Filter...'
+                            updateField={updateField}
+                          />
+                        </div>
+                      )}
                       <Select
                         value={config.table.defaultSort?.column || ''}
                         fieldName='column'
@@ -3755,6 +3875,20 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         <span className='edit-label'>Allow Map Zooming</span>
                       </label>
                     )}
+                    {config.general.geoType === 'us' && (
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={config.general.showClearSelectionButton !== false}
+                          onChange={event => {
+                            const _newConfig = cloneConfig(config)
+                            _newConfig.general.showClearSelectionButton = event.target.checked
+                            setConfig(_newConfig)
+                          }}
+                        />
+                        <span className='edit-label'>Show Clear Selection Button</span>
+                      </label>
+                    )}
                     {config.general.type === 'bubble' && (
                       <label className='checkbox'>
                         <input

package/src/components/FilterControls.tsx

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../context'
+import { MapContext } from '../types/MapContext'
+import './filterControls.styles.css'
+
+const FilterControls: React.FC = () => {
+  const { config, clearSharedFilter, hasActiveSharedFilter } = useContext<MapContext>(ConfigContext)
+
+  if (config.general.showClearSelectionButton === false) return null
+  if (!hasActiveSharedFilter || !clearSharedFilter) return null
+
+  return (
+    <div className='filter-controls' data-html2canvas-ignore='true'>
+      <button className='cove-button' onClick={() => clearSharedFilter(config.uid)} aria-label='Clear Selection'>
+        Clear Selection
+      </button>
+    </div>
+  )
+}
+
+export default FilterControls

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useRef, useEffect, useCallback } from 'react'
+import React, { useContext, useMemo, useRef, useCallback, useLayoutEffect } from 'react'
 import SmallMultipleTile from './SmallMultipleTile'
 import ConfigContext from '../../context'
 import { MapContext } from '../../types/MapContext'
@@ -71,7 +71,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = () => {
   )
 
   // Align tile header heights per row
-  useEffect(() => {
+  useLayoutEffect(() => {
     const headerEntries = Object.entries(headerRefs.current).filter(([_, ref]) => ref) as TileHeaderEntries
     if (headerEntries.length === 0) return