@cdc/map 4.26.3 → 4.26.5

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

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent, expect } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import SingleStateWithFilters from './_mock/DEV-8942.json'
+import MultiCountry from './_mock/multi-country.json'
+import CountyPatterns from './_mock/county-patterns.json'
+import { assertVisualizationRendered, performAndAssert, waitForPresence } from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof CdcMap>
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Zoom',
+  component: CdcMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+const readZoomState = (canvasElement: HTMLElement) => {
+  const zoomTarget = canvasElement.querySelector('[data-zoom-transform]') as HTMLElement | null
+
+  return {
+    transform: zoomTarget?.getAttribute('data-zoom-transform') || '',
+    scale: Number(zoomTarget?.getAttribute('data-zoom-scale') || '0')
+  }
+}
+
+const verifyBasicZoomCycle = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement)
+
+  await assertVisualizationRendered(canvasElement)
+  await waitForPresence('button[aria-label="Zoom In"]', canvasElement)
+
+  const zoomInButton = canvas.getByLabelText('Zoom In')
+
+  await performAndAssert(
+    'Map zooms in',
+    () => readZoomState(canvasElement),
+    async () => {
+      await userEvent.click(zoomInButton)
+    },
+    (before, after) => before.transform !== after.transform && after.scale > before.scale
+  )
+
+  const resetButton = canvas.queryByRole('button', { name: 'Reset Zoom' })
+
+  if (resetButton) {
+    await performAndAssert(
+      'Map reset returns zoom to default',
+      () => readZoomState(canvasElement),
+      async () => {
+        await userEvent.click(resetButton)
+      },
+      (before, after) => before.transform !== after.transform && after.scale === 1
+    )
+  } else {
+    expect(readZoomState(canvasElement).scale).toBeGreaterThan(1)
+  }
+}
+
+export const SingleState: Story = {
+  args: {
+    config: SingleStateWithFilters
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Single-state zoom baseline. Use this to confirm local zoom and reset behavior outside dashboards.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}
+
+export const County: Story = {
+  args: {
+    config: CountyPatterns
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'County-map zoom baseline. Useful for checking that pan/zoom controls still behave correctly on county geographies.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}
+
+export const World: Story = {
+  args: {
+    config: MultiCountry
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'World-map zoom baseline. Useful for checking that world-map zoom and reset controls still behave after single-state zoom changes.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}

package/src/_stories/{CdcMap.stories.tsx → CdcMap.smoke.stories.tsx}

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { within, expect } from 'storybook/test'
 import CdcMap from '../CdcMap'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import EqualNumberOptInExample from './_mock/DEV-7286.json'
 import EqualNumberMap from './_mock/equal-number.json'
@@ -11,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) => {
@@ -67,6 +70,17 @@ export const Equal_Number_Opt_In: Story = {
   }
 }
 
+export const Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.querySelector('.map-container')).toBeInTheDocument()
+    expect(canvasElement.textContent).toContain('Minimal US Map')
+  }
+}
+
 export const Equal_Number_Map: Story = {
   args: {
     isEditor: true,
@@ -186,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/legends/legend-tests.json

@@ -100,7 +100,7 @@
     "layers": [
       {
         "name": "Layer One",
-        "url": "./examples/testing-layer.json",
+        "url": "./examples/__data__/testing-layer.json",
         "namespace": "cove",
         "fill": "blue",
         "stroke": "orange",
@@ -108,7 +108,7 @@
       },
       {
         "name": "Layer Two",
-        "url": "./examples/testing-layer-2.json",
+        "url": "./examples/__data__/testing-layer-2.json",
         "namespace": "cove",
         "fill": "blue",
         "stroke": "orange",
@@ -769,4 +769,4 @@
       "URL": "https://www.cdc.gov/"
     }
   ]
-}
+}

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/Annotation/AnnotationList.tsx

@@ -8,7 +8,7 @@ type AnnotationListProps = {
 }
 
 const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
-  const { state: config } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   const annotations = config.annotations || []
 
   const ulClasses = () => {

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
                 }}