@cdc/map 4.26.3 → 4.26.4

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

@@ -1,3648 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { within, userEvent, expect } from 'storybook/test'
-import CdcMap from '../CdcMap'
-import usaStateGradientConfig from './_mock/usa-state-gradient.json'
-import multiCountryConfig from './_mock/multi-country.json'
-import wastewaterMapSmallMultiplesConfig from './_mock/small_multiples/wastewater-map-small-multiples.json'
-import { performAndAssert, waitForEditor, waitForPresence, openAccordion } from '@cdc/core/helpers/testing'
-
-type Story = StoryObj<typeof CdcMap>
-
-const mapMeta: Meta<typeof CdcMap> = {
-  title: 'Components/Templates/Map/Editor Tests',
-  component: CdcMap,
-  parameters: {
-    layout: 'fullscreen'
-  }
-}
-
-export default mapMeta
-
-const DEFAULT_ARGS = {
-  isEditor: true,
-  config: usaStateGradientConfig
-}
-
-export const TypeSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Type')
-
-    const getMapContainerState = () => {
-      const container = canvasElement.querySelector('.map-container') as HTMLElement | null
-      const svg = canvasElement.querySelector('svg') as SVGElement | null
-
-      return {
-        classes: container ? Array.from(container.classList) : [],
-        hasSvg: Boolean(svg),
-        isBubble: container?.classList.contains('bubble') ?? false,
-        geoType: container?.classList.contains('us-county')
-          ? 'us-county'
-          : container?.classList.contains('us')
-          ? 'us'
-          : container?.classList.contains('single-state')
-          ? 'single-state'
-          : container?.classList.contains('world')
-          ? 'world'
-          : container?.classList.contains('us-region')
-          ? 'us-region'
-          : 'unknown'
-      }
-    }
-
-    // ==========================================================================
-    // TEST: Geography buttons change the geoType class on the map container
-    // ==========================================================================
-    const geoButtons = Array.from(canvasElement.querySelectorAll('.geo-buttons button')) as HTMLButtonElement[]
-    expect(geoButtons.length).toBeGreaterThanOrEqual(3)
-
-    const geographyButtonMap = geoButtons.reduce<Record<string, HTMLButtonElement>>((acc, button) => {
-      const label = button.textContent?.trim() ?? ''
-      acc[label.toLowerCase()] = button
-      return acc
-    }, {})
-
-    const targetButtons = [
-      { label: 'world', targetClasses: ['world'] },
-      { label: 'united states', targetClasses: ['us'] }
-    ]
-
-    for (const { label, targetClasses } of targetButtons) {
-      const button = geographyButtonMap[label]
-      expect(button).toBeTruthy()
-
-      await performAndAssert(
-        `GeoType → ${label}`,
-        getMapContainerState,
-        async () => {
-          await userEvent.click(button)
-        },
-        (before, after) =>
-          targetClasses.some(
-            targetClass => !before.classes.includes(targetClass) && after.classes.includes(targetClass)
-          )
-      )
-    }
-
-    // ==========================================================================
-    // TEST: Geography subtype select toggles county/state classes
-    // ==========================================================================
-    const subtypeSelect = canvas.getByLabelText(/Geography Subtype/i) as HTMLSelectElement
-    const subtypeValues = Array.from(subtypeSelect.options).map(option => option.value)
-    expect(subtypeValues).toContain('us-county')
-
-    await performAndAssert(
-      'GeoType Subtype → US County',
-      getMapContainerState,
-      async () => {
-        await userEvent.selectOptions(subtypeSelect, 'us-county')
-      },
-      (before, after) => !before.classes.includes('us-county') && after.classes.includes('us-county')
-    )
-
-    await performAndAssert(
-      'GeoType Subtype → Reset',
-      getMapContainerState,
-      async () => {
-        await userEvent.selectOptions(subtypeSelect, 'us')
-      },
-      (before, after) => before.classes.includes('us-county') && after.classes.includes('us')
-    )
-
-    // ==========================================================================
-    // TEST: Map Type select toggles classes/data representation
-    // ==========================================================================
-    // Use getAllByLabelText to avoid multiple elements error
-    const typeSelects = canvas.getAllByLabelText(/Map Type/i, { selector: 'select' }) as HTMLSelectElement[]
-    // Assume the first select is the correct one for the Type section
-    const typeSelect = typeSelects[0]
-    const initialType = typeSelect.value
-    const mapTypeOptions = Array.from(typeSelect.options).map(option => option.value)
-    expect(mapTypeOptions).toContain('navigation')
-
-    await performAndAssert(
-      'Map Type → Navigation',
-      getMapContainerState,
-      async () => {
-        await userEvent.selectOptions(typeSelect, 'navigation')
-      },
-      (before, after) => !before.classes.includes('navigation') && after.classes.includes('navigation')
-    )
-
-    await performAndAssert(
-      'Map Type → Reset',
-      getMapContainerState,
-      async () => {
-        await userEvent.selectOptions(typeSelect, initialType)
-      },
-      (before, after) =>
-        before.classes.includes('navigation') &&
-        !after.classes.includes('navigation') &&
-        after.classes.includes(initialType)
-    )
-
-    // ==========================================================================
-    // TEST: Data Classification Type radio buttons
-    // Verifies: Legend structure changes between numeric/quantitative and categorical
-    // ==========================================================================
-    const numericRadio = canvasElement.querySelector('input[type="radio"][value="equalnumber"]') as HTMLInputElement
-    const categoryRadio = canvasElement.querySelector('input[type="radio"][value="category"]') as HTMLInputElement
-    expect(numericRadio).toBeTruthy()
-    expect(categoryRadio).toBeTruthy()
-
-    const getLegendStructure = () => {
-      const legend = canvasElement.querySelector('.map-legend, .legend-container') as HTMLElement | null
-      const legendItems = canvasElement.querySelectorAll('.legend-item, .legend-container > div, .legend li')
-      const legendRects = legend?.querySelectorAll('rect')
-      const legendText = legend?.querySelectorAll('text')
-      return {
-        legendExists: Boolean(legend),
-        legendItemCount: legendItems.length,
-        legendRectCount: legendRects?.length || 0,
-        legendTextCount: legendText?.length || 0,
-        legendFullHTML: legend?.innerHTML || ''
-      }
-    }
-
-    await performAndAssert(
-      'Classification Type → Category',
-      getLegendStructure,
-      async () => {
-        await userEvent.click(categoryRadio)
-      },
-      (before, after) =>
-        before.legendRectCount !== after.legendRectCount &&
-        before.legendTextCount !== after.legendTextCount &&
-        before.legendFullHTML !== after.legendFullHTML
-    )
-
-    await performAndAssert(
-      'Classification Type → Numeric',
-      getLegendStructure,
-      async () => {
-        await userEvent.click(numericRadio)
-      },
-      (before, after) =>
-        before.legendRectCount !== after.legendRectCount &&
-        before.legendTextCount !== after.legendTextCount &&
-        before.legendFullHTML !== after.legendFullHTML
-    )
-
-    // ==========================================================================
-    // TEST: Display As Hex Map checkbox
-    // Verifies: Hexagon SVG polygons appear/disappear in map visualization
-    // ==========================================================================
-    const hexLabel = Array.from(canvasElement.querySelectorAll('label')).find(label =>
-      label.textContent?.includes('Display As Hex Map')
-    )
-    const actualHexCheckbox = hexLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(actualHexCheckbox).toBeTruthy()
-
-    const getHexVisualization = () => {
-      const hexElements = canvasElement.querySelectorAll('.territory-wrapper--hex, polygon[points*="22 0 44 12.702"]')
-      return {
-        hexElementCount: hexElements.length
-      }
-    }
-
-    await performAndAssert(
-      'Display As Hex Map → Enable',
-      getHexVisualization,
-      async () => {
-        await userEvent.click(actualHexCheckbox)
-      },
-      (before, after) => before.hexElementCount === 0 && after.hexElementCount > 0
-    )
-
-    await performAndAssert(
-      'Display As Hex Map → Disable',
-      getHexVisualization,
-      async () => {
-        await userEvent.click(actualHexCheckbox)
-      },
-      (before, after) => before.hexElementCount > 0 && after.hexElementCount === 0
-    )
-
-    // ==========================================================================
-    // TEST: Show state labels checkbox
-    // Verifies: State abbreviation text elements appear/disappear on map SVG
-    // ==========================================================================
-    const stateLabelsCheckbox = canvas.getByLabelText(/Show state labels/i) as HTMLInputElement
-    expect(stateLabelsCheckbox).toBeTruthy()
-
-    const getStateLabelsVisual = () => {
-      const mapSvg = canvasElement.querySelector('svg[role="img"]')
-      const textElements = mapSvg?.querySelectorAll('text')
-      // State labels are text elements with short state abbreviations (2 chars)
-      const stateLabelTexts = Array.from(textElements || []).filter(text => {
-        const content = text.textContent?.trim()
-        return content && content.length === 2 && /^[A-Z]{2}$/.test(content)
-      })
-      return {
-        stateLabelCount: stateLabelTexts.length
-      }
-    }
-
-    await performAndAssert(
-      'Show State Labels → Enable',
-      getStateLabelsVisual,
-      async () => {
-        await userEvent.click(stateLabelsCheckbox)
-      },
-      (before, after) => before.stateLabelCount === 0 && after.stateLabelCount > 0
-    )
-
-    await performAndAssert(
-      'Show State Labels → Disable',
-      getStateLabelsVisual,
-      async () => {
-        await userEvent.click(stateLabelsCheckbox)
-      },
-      (before, after) => before.stateLabelCount > 0 && after.stateLabelCount === 0
-    )
-
-    // ==========================================================================
-    // TEST: Show All Territories checkbox
-    // Verifies: Territory SVG elements appear/disappear in visualization
-    // ==========================================================================
-    const territoriesLabel = Array.from(canvasElement.querySelectorAll('label')).find(label =>
-      label.textContent?.includes('Show All Territories')
-    )
-    const territoriesCheckbox = territoriesLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(territoriesCheckbox).toBeTruthy()
-
-    const getTerritoriesVisual = () => {
-      const territorySection = canvasElement.querySelector('.territories')
-      const territorySvgs = territorySection?.querySelectorAll('svg')
-      return {
-        territorySvgCount: territorySvgs?.length || 0,
-        hasTerritorySection: Boolean(territorySection)
-      }
-    }
-
-    await performAndAssert(
-      'Show All Territories → Enable',
-      getTerritoriesVisual,
-      async () => {
-        await userEvent.click(territoriesCheckbox)
-      },
-      (before, after) => before.territorySvgCount !== after.territorySvgCount
-    )
-
-    await performAndAssert(
-      'Show All Territories → Disable',
-      getTerritoriesVisual,
-      async () => {
-        await userEvent.click(territoriesCheckbox)
-      },
-      (before, after) => before.territorySvgCount !== after.territorySvgCount
-    )
-  }
-}
-
-export const GeneralSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'General')
-
-    // ==========================================================================
-    // TEST: Title field
-    // Verifies: Title text appears in the Title component on the visualization
-    // ==========================================================================
-    const titleInput = canvasElement.querySelector('[data-testid="title-input"]') as HTMLInputElement
-    expect(titleInput).toBeTruthy()
-
-    const getTitleVisual = () => {
-      const titleElement = canvasElement.querySelector('.cove-title, .map-title')
-      return {
-        titleText: titleElement?.textContent || '',
-        hasTitleElement: Boolean(titleElement)
-      }
-    }
-
-    await performAndAssert(
-      'Title → Update text',
-      getTitleVisual,
-      async () => {
-        await userEvent.clear(titleInput)
-        await userEvent.type(titleInput, 'Test Map Title')
-      },
-      (before, after) => before.titleText !== after.titleText && after.titleText.includes('Test Map Title')
-    )
-
-    // ==========================================================================
-    // TEST: Show Title checkbox
-    // Verifies: Title element visibility is controlled by showTitle
-    // ==========================================================================
-    const generalAccordion = canvasElement.querySelector('[aria-expanded="true"]')?.closest('.accordion__item')
-    const showTitleLabel = Array.from(generalAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Show Title')
-    )
-    const showTitleCheckbox = showTitleLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(showTitleCheckbox).toBeTruthy()
-
-    const getTitleVisibility = () => {
-      const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
-      return {
-        isPresent: Boolean(titleElement)
-      }
-    }
-
-    // Test config has showTitle: true, so title starts visible (present in DOM)
-    await performAndAssert(
-      'Show Title → Hide',
-      getTitleVisibility,
-      async () => {
-        await userEvent.click(showTitleCheckbox)
-      },
-      (before, after) => before.isPresent && !after.isPresent
-    )
-
-    await performAndAssert(
-      'Show Title → Show',
-      getTitleVisibility,
-      async () => {
-        await userEvent.click(showTitleCheckbox)
-      },
-      (before, after) => !before.isPresent && after.isPresent
-    )
-
-    // ==========================================================================
-    // TEST: Super Title field
-    // Verifies: Super title text appears in the Title component
-    // ==========================================================================
-    const superTitleInput = canvas.getByLabelText(/Super Title/i) as HTMLInputElement
-    expect(superTitleInput).toBeTruthy()
-
-    const getSuperTitleVisual = () => {
-      const titleElement = canvasElement.querySelector('.cove-title, .map-title')
-      return {
-        titleText: titleElement?.textContent || ''
-      }
-    }
-
-    await performAndAssert(
-      'Super Title → Add text',
-      getSuperTitleVisual,
-      async () => {
-        await userEvent.clear(superTitleInput)
-        await userEvent.type(superTitleInput, 'Super Title Text')
-      },
-      (before, after) => !before.titleText.includes('Super Title Text') && after.titleText.includes('Super Title Text')
-    )
-
-    // ==========================================================================
-    // TEST: Title Style dropdown
-    // Verifies: Changing title style changes the heading element (h2/h3) used
-    // ==========================================================================
-    const titleStyleSelect = canvas.getByLabelText(/Title Style/i) as HTMLSelectElement
-    expect(titleStyleSelect).toBeTruthy()
-
-    const getTitleStyleVisual = () => {
-      const coveTitleElement = canvasElement.querySelector('.cove-title')
-      const legacyTitleElement = canvasElement.querySelector('header.cove-visualization__header')
-
-      // For modern titles, check for h2 (large) or h3 (small) elements
-      const hasH2 = Boolean(coveTitleElement?.querySelector('h2'))
-      const hasH3 = Boolean(coveTitleElement?.querySelector('h3'))
-
-      return {
-        hasCoveTitle: Boolean(coveTitleElement),
-        hasLegacyTitle: Boolean(legacyTitleElement),
-        isSmall: hasH3,
-        isLarge: hasH2
-      }
-    }
-
-    // Current config has titleStyle: 'small'
-    // Test: Change to 'large'
-    await performAndAssert(
-      'Title Style → Change to Large',
-      getTitleStyleVisual,
-      async () => {
-        await userEvent.selectOptions(titleStyleSelect, 'large')
-      },
-      (before, after) => before.isSmall && after.isLarge && after.hasCoveTitle && !after.hasLegacyTitle
-    )
-
-    // Test: Change to 'legacy'
-    await performAndAssert(
-      'Title Style → Change to Legacy',
-      getTitleStyleVisual,
-      async () => {
-        await userEvent.selectOptions(titleStyleSelect, 'legacy')
-      },
-      (before, after) => before.hasCoveTitle && !after.hasCoveTitle && after.hasLegacyTitle
-    )
-
-    // Test: Change back to 'small'
-    await performAndAssert(
-      'Title Style → Change back to Small',
-      getTitleStyleVisual,
-      async () => {
-        await userEvent.selectOptions(titleStyleSelect, 'small')
-      },
-      (before, after) => before.hasLegacyTitle && !after.hasLegacyTitle && after.isSmall && after.hasCoveTitle
-    )
-
-    // ==========================================================================
-    // TEST: Message/Intro Text field
-    // Verifies: Intro text appears in section with class 'introText'
-    // ==========================================================================
-    const messageInput = canvas.getByLabelText(/Message/i) as HTMLTextAreaElement
-    expect(messageInput).toBeTruthy()
-
-    const getIntroTextVisual = () => {
-      const introSection = canvasElement.querySelector('.introText')
-      return {
-        introText: introSection?.textContent || '',
-        hasIntroSection: Boolean(introSection)
-      }
-    }
-
-    await performAndAssert(
-      'Message → Add intro text',
-      getIntroTextVisual,
-      async () => {
-        await userEvent.clear(messageInput)
-        await userEvent.type(messageInput, 'This is test intro text')
-      },
-      (before, after) =>
-        !before.introText.includes('This is test intro text') &&
-        after.introText.includes('This is test intro text') &&
-        after.hasIntroSection
-    )
-
-    // ==========================================================================
-    // TEST: Subtext field
-    // Verifies: Subtext appears in paragraph with class 'subtext'
-    // ==========================================================================
-    const subtextInput = canvas.getByLabelText(/Subtext/i) as HTMLTextAreaElement
-    expect(subtextInput).toBeTruthy()
-
-    const getSubtextVisual = () => {
-      const subtextElement = canvasElement.querySelector('.subtext')
-      return {
-        subtextContent: subtextElement?.textContent || '',
-        hasSubtext: Boolean(subtextElement)
-      }
-    }
-
-    await performAndAssert(
-      'Subtext → Add text',
-      getSubtextVisual,
-      async () => {
-        await userEvent.clear(subtextInput)
-        await userEvent.type(subtextInput, 'This is test subtext')
-      },
-      (before, after) =>
-        !before.subtextContent.includes('This is test subtext') &&
-        after.subtextContent.includes('This is test subtext') &&
-        after.hasSubtext
-    )
-
-    // ==========================================================================
-    // TEST: Footnotes field
-    // Verifies: Footnotes appear in section with class 'footnotes'
-    // ==========================================================================
-    const footnotesInput = canvas.getByLabelText(/Footnotes/i) as HTMLTextAreaElement
-    expect(footnotesInput).toBeTruthy()
-
-    const getFootnotesVisual = () => {
-      const footnotesSection = canvasElement.querySelector('.footnotes')
-      return {
-        footnotesContent: footnotesSection?.textContent || '',
-        hasFootnotes: Boolean(footnotesSection)
-      }
-    }
-
-    await performAndAssert(
-      'Footnotes → Add text',
-      getFootnotesVisual,
-      async () => {
-        await userEvent.clear(footnotesInput)
-        await userEvent.type(footnotesInput, 'Test footnote text')
-      },
-      (before, after) =>
-        !before.footnotesContent.includes('Test footnote text') &&
-        after.footnotesContent.includes('Test footnote text') &&
-        after.hasFootnotes
-    )
-  }
-}
-
-export const ColumnsSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Columns')
-
-    // ==========================================================================
-    // TEST: Geography column select
-    // Verifies: Changing geo column to invalid data makes map gray and legend shows "No data"
-    // ==========================================================================
-    const columnsAccordion = canvasElement.querySelector('[aria-expanded="true"]')?.closest('.accordion__item')
-    const geoColumnLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label => {
-      const columnHeading = label.querySelector('.edit-label.column-heading')
-      return columnHeading?.textContent?.includes('Geography')
-    })
-    const geoSelect = geoColumnLabel?.querySelector('select') as HTMLSelectElement
-    expect(geoSelect).toBeTruthy()
-
-    const getMapAndLegendState = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendSvg = legendContainer?.querySelector('svg')
-      const gradientStops = legendSvg?.querySelectorAll('linearGradient stop')
-
-      // Gradient legend has color stops when data is valid
-      const hasGradientStops = (gradientStops?.length || 0) > 0
-
-      return {
-        legendHTML: legendContainer?.innerHTML || '',
-        hasGradientStops: hasGradientStops,
-        gradientStopCount: gradientStops?.length || 0
-      }
-    }
-
-    // Change to a column that's NOT valid geography data (Rate instead of STATE)
-    await performAndAssert(
-      'Geography Column → Change to invalid column',
-      getMapAndLegendState,
-      async () => {
-        await userEvent.selectOptions(geoSelect, 'Rate')
-      },
-      (before, after) => {
-        // Legend gradient should lose color stops when geo column is invalid
-        return before.hasGradientStops && !after.hasGradientStops
-      }
-    )
-
-    // Change back to valid geography column
-    await performAndAssert(
-      'Geography Column → Change back to valid column',
-      getMapAndLegendState,
-      async () => {
-        await userEvent.selectOptions(geoSelect, 'STATE')
-      },
-      (before, after) => {
-        // Legend gradient should regain color stops when geo column is valid
-        return !before.hasGradientStops && after.hasGradientStops
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Hide Geography Column Name in Tooltip checkbox
-    // Verifies: Tooltip content changes when geography label is hidden/shown
-    // ==========================================================================
-    const hideGeoLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Hide Geography Column Name in Tooltip')
-    )
-    const hideGeoCheckbox = hideGeoLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(hideGeoCheckbox).toBeTruthy()
-
-    const getTooltipContent = () => {
-      // Get a state geo-group and check its tooltip HTML
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-      return {
-        tooltipContent: tooltipHtml,
-        hasStatePrefix: tooltipHtml.includes('State:')
-      }
-    }
-
-    await performAndAssert(
-      'Hide Geography Column Name → Enable',
-      getTooltipContent,
-      async () => {
-        await userEvent.click(hideGeoCheckbox)
-      },
-      (before, after) => {
-        // "State:" prefix should disappear when hidden
-        return before.hasStatePrefix && !after.hasStatePrefix
-      }
-    )
-
-    await performAndAssert(
-      'Hide Geography Column Name → Disable',
-      getTooltipContent,
-      async () => {
-        await userEvent.click(hideGeoCheckbox)
-      },
-      (before, after) => {
-        // "State:" prefix should reappear when not hidden
-        return !before.hasStatePrefix && after.hasStatePrefix
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Geography Label field
-    // Verifies: Custom geography label appears in tooltip instead of default "State:"
-    // ==========================================================================
-    const geoLabelInput = canvas.getByLabelText(/Geography Label/i) as HTMLInputElement
-    expect(geoLabelInput).toBeTruthy()
-
-    await performAndAssert(
-      'Geography Label → Add custom label',
-      getTooltipContent,
-      async () => {
-        await userEvent.clear(geoLabelInput)
-        await userEvent.type(geoLabelInput, 'Region')
-      },
-      (before, after) => {
-        // Custom label "Region:" should appear in tooltip
-        return !before.tooltipContent.includes('Region:') && after.tooltipContent.includes('Region:')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Data Column select
-    // Verifies: Changing data column changes tooltip data values
-    // ==========================================================================
-    const dataColumnLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Data Column')
-    )
-    const dataColumnSelect = dataColumnLabel?.querySelector('select') as HTMLSelectElement
-    expect(dataColumnSelect).toBeTruthy()
-
-    const getDataTooltipContent = () => {
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-      return {
-        tooltipContent: tooltipHtml
-      }
-    }
-
-    await performAndAssert(
-      'Data Column → Change to STATE column',
-      getDataTooltipContent,
-      async () => {
-        await userEvent.selectOptions(dataColumnSelect, 'STATE')
-      },
-      (before, after) => {
-        // Tooltip should show STATE values (e.g., state names) instead of Rate values (numbers)
-        const beforeHasNumbers = /\d+/.test(before.tooltipContent)
-        const afterHasStateNames = /Alabama|Alaska|Arizona|Arkansas|California/.test(after.tooltipContent)
-        return beforeHasNumbers && afterHasStateNames
-      }
-    )
-
-    // Change back to Rate
-    await performAndAssert(
-      'Data Column → Change back to Rate',
-      getDataTooltipContent,
-      async () => {
-        await userEvent.selectOptions(dataColumnSelect, 'Rate')
-      },
-      (before, after) => {
-        // Tooltip should show numeric Rate values again
-        const beforeHasStateNames = /Alabama|Alaska|Arizona|Arkansas|California/.test(before.tooltipContent)
-        const afterHasNumbers = /\d+/.test(after.tooltipContent)
-        return beforeHasStateNames && afterHasNumbers
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Hide Data Column Name in Tooltip
-    // Verifies: Data column label disappears from tooltip when hidden
-    // ==========================================================================
-    const hideDataLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Hide Data Column Name in Tooltip')
-    )
-    const hideDataCheckbox = hideDataLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(hideDataCheckbox).toBeTruthy()
-
-    await performAndAssert(
-      'Hide Data Column Name → Enable',
-      getDataTooltipContent,
-      async () => {
-        await userEvent.click(hideDataCheckbox)
-      },
-      (before, after) => {
-        // The label prefix (e.g., "Rate:" or similar) should be removed
-        // Before should have a colon pattern indicating a label, after should have less structure
-        const beforeHasLabelStructure = before.tooltipContent.includes(':</li>') || before.tooltipContent.includes(': ')
-        const afterHasLessStructure = after.tooltipContent.length < before.tooltipContent.length
-        return beforeHasLabelStructure && afterHasLessStructure
-      }
-    )
-
-    await performAndAssert(
-      'Hide Data Column Name → Disable',
-      getDataTooltipContent,
-      async () => {
-        await userEvent.click(hideDataCheckbox)
-      },
-      (before, after) => {
-        // The label prefix should reappear
-        const beforeHasLessStructure = before.tooltipContent.length < after.tooltipContent.length
-        const afterHasLabelStructure = after.tooltipContent.includes(':</li>') || after.tooltipContent.includes(': ')
-        return beforeHasLessStructure && afterHasLabelStructure
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Data Label field
-    // Verifies: Custom data label appears in tooltip
-    // ==========================================================================
-    const dataLabelInputs = Array.from(columnsAccordion?.querySelectorAll('input') || [])
-    const dataLabelInput = dataLabelInputs.find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Data Label')
-    }) as HTMLInputElement
-    expect(dataLabelInput).toBeTruthy()
-
-    await performAndAssert(
-      'Data Label → Add custom label',
-      getDataTooltipContent,
-      async () => {
-        await userEvent.clear(dataLabelInput)
-        await userEvent.type(dataLabelInput, 'Value')
-      },
-      (before, after) => {
-        // Custom label "Value:" should appear in tooltip
-        return !before.tooltipContent.includes('Value:') && after.tooltipContent.includes('Value:')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Prefix field
-    // Verifies: Prefix appears before data values in both tooltip and legend
-    // ==========================================================================
-    const prefixInputs = Array.from(columnsAccordion?.querySelectorAll('input') || [])
-    const prefixInput = prefixInputs.find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Prefix')
-    }) as HTMLInputElement
-    expect(prefixInput).toBeTruthy()
-
-    const getPrefixVisualization = () => {
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendSvg = legendContainer?.querySelector('svg')
-      const legendText = legendSvg?.textContent || ''
-
-      return {
-        tooltipHasPrefix: tooltipHtml.includes('$'),
-        legendHasPrefix: legendText.includes('$'),
-        tooltipContent: tooltipHtml,
-        legendContent: legendText
-      }
-    }
-
-    await performAndAssert(
-      'Prefix → Add dollar sign',
-      getPrefixVisualization,
-      async () => {
-        await userEvent.clear(prefixInput)
-        await userEvent.type(prefixInput, '$')
-      },
-      (before, after) => {
-        // Dollar sign should appear in both tooltip and legend
-        return !before.tooltipHasPrefix && after.tooltipHasPrefix && !before.legendHasPrefix && after.legendHasPrefix
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Suffix field
-    // Verifies: Suffix appears after data values in both tooltip and legend
-    // ==========================================================================
-    const suffixInputs = Array.from(columnsAccordion?.querySelectorAll('input') || [])
-    const suffixInput = suffixInputs.find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Suffix')
-    }) as HTMLInputElement
-    expect(suffixInput).toBeTruthy()
-
-    const getSuffixVisualization = () => {
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendSvg = legendContainer?.querySelector('svg')
-      const legendText = legendSvg?.textContent || ''
-
-      return {
-        tooltipHasSuffix: tooltipHtml.includes('%'),
-        legendHasSuffix: legendText.includes('%'),
-        tooltipContent: tooltipHtml,
-        legendContent: legendText
-      }
-    }
-
-    await performAndAssert(
-      'Suffix → Add percent sign',
-      getSuffixVisualization,
-      async () => {
-        await userEvent.clear(suffixInput)
-        await userEvent.type(suffixInput, '%')
-      },
-      (before, after) => {
-        // Percent sign should appear in both tooltip and legend
-        return !before.tooltipHasSuffix && after.tooltipHasSuffix && !before.legendHasSuffix && after.legendHasSuffix
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Round field
-    // Verifies: Changing rounding adds decimal places in both tooltip and legend
-    // ==========================================================================
-    const roundInputs = Array.from(columnsAccordion?.querySelectorAll('input') || [])
-    const roundInput = roundInputs.find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Round')
-    }) as HTMLInputElement
-    expect(roundInput).toBeTruthy()
-
-    const getRoundingVisualization = () => {
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendSvg = legendContainer?.querySelector('svg')
-      const legendText = legendSvg?.textContent || ''
-
-      // Check for 2 decimal places pattern (e.g., "12.34", "0.50", etc.)
-      const twoDecimalPattern = /\d+\.\d{2}/
-
-      return {
-        tooltipHasTwoDecimals: twoDecimalPattern.test(tooltipHtml),
-        legendHasTwoDecimals: twoDecimalPattern.test(legendText),
-        tooltipContent: tooltipHtml,
-        legendContent: legendText
-      }
-    }
-
-    await performAndAssert(
-      'Round → Set to 2 decimal places',
-      getRoundingVisualization,
-      async () => {
-        await userEvent.clear(roundInput)
-        await userEvent.type(roundInput, '2')
-      },
-      (before, after) => {
-        // Numbers should now show 2 decimal places in both tooltip and legend
-        return (
-          !before.tooltipHasTwoDecimals &&
-          after.tooltipHasTwoDecimals &&
-          !before.legendHasTwoDecimals &&
-          after.legendHasTwoDecimals
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show in Data Table checkbox
-    // Verifies: Primary column appears/disappears in the data table
-    // ==========================================================================
-    const showInTableLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Show in Data Table')
-    )
-    const showInTableCheckbox = showInTableLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(showInTableCheckbox).toBeTruthy()
-
-    const getDataTableState = () => {
-      const dataTable = canvasElement.querySelector('.data-table-container, table')
-      const tableHeaders = Array.from(dataTable?.querySelectorAll('th') || [])
-      const tableHeaderText = tableHeaders.map(th => th.textContent?.trim() || '')
-
-      // Check if "Rate" column header appears in data table
-      const hasRateColumn = tableHeaderText.some(text => text.includes('Rate') || text.includes('Value'))
-
-      return {
-        hasDataTable: Boolean(dataTable),
-        tableHeaders: tableHeaderText,
-        hasRateColumn: hasRateColumn
-      }
-    }
-
-    // Test config has dataTable: true for primary column
-    await performAndAssert(
-      'Show in Data Table → Disable',
-      getDataTableState,
-      async () => {
-        await userEvent.click(showInTableCheckbox)
-      },
-      (before, after) => {
-        // Rate column should disappear from data table headers
-        return before.hasRateColumn && !after.hasRateColumn
-      }
-    )
-
-    await performAndAssert(
-      'Show in Data Table → Enable',
-      getDataTableState,
-      async () => {
-        await userEvent.click(showInTableCheckbox)
-      },
-      (before, after) => {
-        // Rate column should reappear in data table headers
-        return !before.hasRateColumn && after.hasRateColumn
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show in Tooltips checkbox
-    // Verifies: Primary column data appears/disappears in tooltips
-    // ==========================================================================
-    const showInTooltipsLabel = Array.from(columnsAccordion?.querySelectorAll('label') || []).find(label =>
-      label.textContent?.includes('Show in Tooltips')
-    )
-    const showInTooltipsCheckbox = showInTooltipsLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
-    expect(showInTooltipsCheckbox).toBeTruthy()
-
-    const getTooltipDataState = () => {
-      const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
-      const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
-
-      // Check if tooltip contains data values (numbers with potential $ and % from earlier tests)
-      // Look for patterns like list items with numeric values
-      const hasDataValues = tooltipHtml.includes('<li') && /\$?\d+\.\d{2}%?/.test(tooltipHtml)
-
-      return {
-        tooltipContent: tooltipHtml,
-        hasDataValues: hasDataValues,
-        tooltipLength: tooltipHtml.length
-      }
-    }
-
-    // Test config has tooltip: true for primary column
-    await performAndAssert(
-      'Show in Tooltips → Disable',
-      getTooltipDataState,
-      async () => {
-        await userEvent.click(showInTooltipsCheckbox)
-      },
-      (before, after) => {
-        // Tooltip should no longer contain data values, should be shorter
-        return before.hasDataValues && !after.hasDataValues && after.tooltipLength < before.tooltipLength
-      }
-    )
-
-    await performAndAssert(
-      'Show in Tooltips → Enable',
-      getTooltipDataState,
-      async () => {
-        await userEvent.click(showInTooltipsCheckbox)
-      },
-      (before, after) => {
-        // Tooltip should contain data values again, should be longer
-        return !before.hasDataValues && after.hasDataValues && after.tooltipLength > before.tooltipLength
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Add Special Class button
-    // Verifies: New special class item appears in legend
-    // ==========================================================================
-    const addSpecialClassButton = Array.from(columnsAccordion?.querySelectorAll('button') || []).find(button =>
-      button.textContent?.includes('Add Special Class')
-    ) as HTMLButtonElement
-    expect(addSpecialClassButton).toBeTruthy()
-
-    const getSpecialClassVisualization = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendSvg = legendContainer?.querySelector('svg')
-      const gradientStops = legendSvg?.querySelectorAll('linearGradient stop')
-      const gradientRects = legendSvg?.querySelectorAll('g.visx-group rect')
-
-      // Get all stop colors to detect changes
-      const stopColors = Array.from(gradientStops || []).map(stop => (stop as SVGStopElement).getAttribute('style'))
-
-      // Get all rect fills to detect new colors
-      const rectFills = Array.from(gradientRects || []).map(rect => (rect as SVGRectElement).getAttribute('fill'))
-
-      return {
-        gradientStopCount: gradientStops?.length || 0,
-        gradientRectCount: gradientRects?.length || 0,
-        stopColors: stopColors,
-        rectFills: rectFills,
-        legendHTML: legendContainer?.innerHTML || ''
-      }
-    }
-
-    await performAndAssert(
-      'Add Special Class → Configure with STATE=Alabama',
-      getSpecialClassVisualization,
-      async () => {
-        // Click the Add Special Class button
-        await userEvent.click(addSpecialClassButton)
-
-        // Find the newly added special class fields
-        const specialClassSection = Array.from(columnsAccordion?.querySelectorAll('.edit-block') || []).find(block =>
-          block.textContent?.includes('Special Class 1')
-        )
-
-        // Get all selects in the special class section
-        // First select is Data Key, second is Value
-        const selects = Array.from(specialClassSection?.querySelectorAll('select') || [])
-        const dataKeySelect = selects[0] as HTMLSelectElement
-        const valueSelect = selects[1] as HTMLSelectElement
-
-        // Set Data Key to STATE
-        await userEvent.selectOptions(dataKeySelect, 'STATE')
-
-        // Wait for the Value select to populate with options based on STATE column
-        await new Promise(resolve => setTimeout(resolve, 200))
-
-        // Select "Alabama" from the Value select
-        await userEvent.selectOptions(valueSelect, 'Alabama')
-
-        // Find and fill in the Label field
-        const labelInput = Array.from(specialClassSection?.querySelectorAll('input') || []).find(input => {
-          const label = input.closest('label')
-          return label?.textContent?.includes('Label')
-        }) as HTMLInputElement
-
-        await userEvent.clear(labelInput)
-        await userEvent.type(labelInput, 'Alabama')
-      },
-      (before, after) => {
-        // Check that "Alabama" text appears in the legend
-        const alabamaInLegend = after.legendHTML.includes('Alabama')
-
-        // Check that the special class gray color appears
-        const hasGrayColor = after.rectFills.includes('#b4b4b4')
-
-        // Legend should change
-        const legendChanged = after.legendHTML !== before.legendHTML
-
-        return alabamaInLegend && hasGrayColor && legendChanged
-      }
-    )
-  }
-}
-
-export const LegendSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Legend')
-
-    // ==========================================================================
-    // TEST: Legend Type
-    // ==========================================================================
-    const legendTypeSelect = Array.from(canvasElement.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Legend Type')
-    }) as HTMLSelectElement
-
-    const getLegendType = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      // For gradient legend, get labels from SVG text elements
-      const textElements = Array.from(legendContainer?.querySelectorAll('text tspan') || [])
-      const labels = textElements.map(el => el.textContent?.trim() || '')
-      return {
-        legendHTML: legendContainer?.innerHTML || '',
-        labels
-      }
-    }
-
-    await performAndAssert(
-      'Legend Type → Equal Interval',
-      getLegendType,
-      async () => {
-        await userEvent.selectOptions(legendTypeSelect, 'equalinterval')
-      },
-      (before, after) => {
-        // Equal interval creates evenly spaced ranges (e.g., "0 - < 43.33", "43.33 - < 86.67")
-        return after.labels.length > 0 && after.labels.join(',') !== before.labels.join(',')
-      }
-    )
-
-    await performAndAssert(
-      'Legend Type → Equal Number',
-      getLegendType,
-      async () => {
-        await userEvent.selectOptions(legendTypeSelect, 'equalnumber')
-      },
-      (before, after) => {
-        // Equal number (quantiles) creates ranges with equal counts (e.g., "0 - 40", "40 - 57")
-        return after.labels.length > 0 && after.labels.join(',') !== before.labels.join(',')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show Legend checkbox
-    // ==========================================================================
-    const showLegendCheckbox = canvas.getByLabelText('Show Legend')
-
-    const getLegendVisibility = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      return {
-        legendExists: Boolean(legendContainer),
-        isVisible: legendContainer ? !legendContainer.classList.contains('hidden') : false
-      }
-    }
-
-    await performAndAssert(
-      'Show Legend → Uncheck',
-      getLegendVisibility,
-      async () => {
-        await userEvent.click(showLegendCheckbox)
-      },
-      (before, after) => {
-        return before.isVisible && !after.isVisible
-      }
-    )
-
-    await performAndAssert(
-      'Show Legend → Check',
-      getLegendVisibility,
-      async () => {
-        await userEvent.click(showLegendCheckbox)
-      },
-      (before, after) => {
-        return !before.isVisible && after.isVisible
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Legend Position
-    // ==========================================================================
-    const legendPositionSelect = Array.from(canvasElement.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Legend Position')
-    }) as HTMLSelectElement
-
-    const getLegendPosition = () => {
-      const legendAside = canvasElement.querySelector('aside[aria-label="Legend"]') as HTMLElement
-      return {
-        classes: legendAside ? Array.from(legendAside.classList) : [],
-        isBottom: legendAside?.classList.contains('bottom') ?? false,
-        isSide: legendAside?.classList.contains('side') ?? false,
-        isTop: legendAside?.classList.contains('top') ?? false
-      }
-    }
-
-    await performAndAssert(
-      'Legend Position → Side',
-      getLegendPosition,
-      async () => {
-        await userEvent.selectOptions(legendPositionSelect, 'side')
-      },
-      (before, after) => {
-        return !before.isSide && after.isSide
-      }
-    )
-
-    await performAndAssert(
-      'Legend Position → Top',
-      getLegendPosition,
-      async () => {
-        await userEvent.selectOptions(legendPositionSelect, 'top')
-      },
-      (before, after) => {
-        return !before.isTop && after.isTop
-      }
-    )
-
-    await performAndAssert(
-      'Legend Position → Bottom',
-      getLegendPosition,
-      async () => {
-        await userEvent.selectOptions(legendPositionSelect, 'bottom')
-      },
-      (before, after) => {
-        return !before.isBottom && after.isBottom
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Legend Style
-    // ==========================================================================
-    const legendStyleSelect = Array.from(canvasElement.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Legend Style')
-    }) as HTMLSelectElement
-
-    const getLegendStyle = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendItems = legendContainer?.querySelectorAll('.legend-container__li')
-      const linearGradient = legendContainer?.querySelector('linearGradient')
-      const legendHTML = legendContainer?.innerHTML || ''
-
-      return {
-        hasLegendItems: (legendItems?.length ?? 0) > 0,
-        hasGradient: Boolean(linearGradient),
-        legendHTML
-      }
-    }
-
-    await performAndAssert(
-      'Legend Style → Circles',
-      getLegendStyle,
-      async () => {
-        await userEvent.selectOptions(legendStyleSelect, 'circles')
-      },
-      (before, after) => {
-        return after.hasLegendItems && !after.hasGradient && after.legendHTML !== before.legendHTML
-      }
-    )
-
-    await performAndAssert(
-      'Legend Style → Boxes',
-      getLegendStyle,
-      async () => {
-        await userEvent.selectOptions(legendStyleSelect, 'boxes')
-      },
-      (before, after) => {
-        return after.hasLegendItems && !after.hasGradient && after.legendHTML !== before.legendHTML
-      }
-    )
-
-    await performAndAssert(
-      'Legend Style → Gradient',
-      getLegendStyle,
-      async () => {
-        await userEvent.selectOptions(legendStyleSelect, 'gradient')
-      },
-      (before, after) => {
-        return !before.hasGradient && after.hasGradient
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Gradient Style (only visible when Legend Style is gradient)
-    // ==========================================================================
-    const gradientStyleSelect = Array.from(canvasElement.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      return label?.textContent?.includes('Gradient Style')
-    }) as HTMLSelectElement
-
-    const getGradientStyle = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const svgHTML = legendContainer?.querySelector('svg')?.outerHTML || ''
-
-      return {
-        svgHTML,
-        hasLinearGradient: svgHTML.includes('linearGradient')
-      }
-    }
-
-    await performAndAssert(
-      'Gradient Style → Linear blocks',
-      getGradientStyle,
-      async () => {
-        await userEvent.selectOptions(gradientStyleSelect, 'linear blocks')
-      },
-      (before, after) => {
-        return after.hasLinearGradient && after.svgHTML !== before.svgHTML
-      }
-    )
-
-    await performAndAssert(
-      'Gradient Style → Smooth',
-      getGradientStyle,
-      async () => {
-        await userEvent.selectOptions(gradientStyleSelect, 'smooth')
-      },
-      (before, after) => {
-        return after.hasLinearGradient && after.svgHTML !== before.svgHTML
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Tick Rotation (only visible when Legend Style is gradient)
-    // ==========================================================================
-    const tickRotationInput = Array.from(canvasElement.querySelectorAll('input[type="number"]') || []).find(input => {
-      const label = input.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Tick Rotation')
-    }) as HTMLInputElement
-
-    const getTickRotation = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const svgHTML = legendContainer?.querySelector('svg')?.outerHTML || ''
-      const textElements = Array.from(legendContainer?.querySelectorAll('text') || [])
-      const transforms = textElements.map(el => el.getAttribute('transform') || '')
-      return {
-        svgHTML,
-        transforms,
-        hasRotation: transforms.some(t => t.includes('rotate'))
-      }
-    }
-
-    await performAndAssert(
-      'Tick Rotation → Set to 45 degrees',
-      getTickRotation,
-      async () => {
-        await userEvent.clear(tickRotationInput)
-        await userEvent.type(tickRotationInput, '45')
-      },
-      (before, after) => {
-        // Check that rotation transform is applied to text elements
-        return after.hasRotation && after.svgHTML !== before.svgHTML
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Hide Legend Box
-    // ==========================================================================
-    const hideLegendBoxCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]') || []).find(
-      input => {
-        const label = input.closest('label')
-        const labelSpan = label?.querySelector('.edit-label')
-        return labelSpan?.textContent?.includes('Hide Legend Box')
-      }
-    ) as HTMLInputElement
-
-    const getLegendBorder = () => {
-      const legendAside = canvasElement.querySelector('aside[aria-label="Legend"]') as HTMLElement
-      return {
-        hasNoBorder: legendAside?.classList.contains('no-border') ?? false
-      }
-    }
-
-    await performAndAssert(
-      'Hide Legend Box → Uncheck',
-      getLegendBorder,
-      async () => {
-        await userEvent.click(hideLegendBoxCheckbox)
-      },
-      (before, after) => {
-        return before.hasNoBorder && !after.hasNoBorder
-      }
-    )
-
-    await performAndAssert(
-      'Hide Legend Box → Check',
-      getLegendBorder,
-      async () => {
-        await userEvent.click(hideLegendBoxCheckbox)
-      },
-      (before, after) => {
-        return !before.hasNoBorder && after.hasNoBorder
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Vertical sorted legend
-    // ==========================================================================
-    // First switch to boxes style and side position to enable vertical sorting
-    await userEvent.selectOptions(legendStyleSelect, 'boxes')
-    await userEvent.selectOptions(legendPositionSelect, 'side')
-
-    const verticalSortedCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]') || []).find(
-      input => {
-        const label = input.closest('label')
-        const labelSpan = label?.querySelector('.edit-label')
-        return labelSpan?.textContent?.includes('Vertical sorted legend')
-      }
-    ) as HTMLInputElement
-
-    const getVerticalSorted = () => {
-      const legendUl = canvasElement.querySelector('.legend-container__ul')
-      return {
-        hasVerticalSorted: legendUl?.classList.contains('vertical-sorted') ?? false
-      }
-    }
-
-    await performAndAssert(
-      'Vertical sorted legend → Check',
-      getVerticalSorted,
-      async () => {
-        await userEvent.click(verticalSortedCheckbox)
-      },
-      (before, after) => {
-        return !before.hasVerticalSorted && after.hasVerticalSorted
-      }
-    )
-
-    await performAndAssert(
-      'Vertical sorted legend → Uncheck',
-      getVerticalSorted,
-      async () => {
-        await userEvent.click(verticalSortedCheckbox)
-      },
-      (before, after) => {
-        return before.hasVerticalSorted && !after.hasVerticalSorted
-      }
-    )
-
-    // NOTE: Show Special Classes Last is skipped because it doesn't produce
-    // visible changes with the current test data (no special classes present)
-
-    // ==========================================================================
-    // TEST: Separate Zero
-    // ==========================================================================
-    const separateZeroCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]') || []).find(
-      input => {
-        const label = input.closest('label')
-        const labelSpan = label?.querySelector('.edit-label')
-        return labelSpan?.textContent?.includes('Separate Zero')
-      }
-    ) as HTMLInputElement
-
-    const getSeparateZero = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendItems = Array.from(legendContainer?.querySelectorAll('.legend-container__li') || [])
-      const itemLabels = legendItems.map(item => item.textContent?.trim() || '')
-      const hasZeroItem = itemLabels.some(label => label.includes('0') && !label.match(/[1-9]/))
-      return {
-        itemCount: legendItems.length,
-        itemLabels,
-        hasZeroItem
-      }
-    }
-
-    await performAndAssert(
-      'Separate Zero → Check',
-      getSeparateZero,
-      async () => {
-        await userEvent.click(separateZeroCheckbox)
-      },
-      (before, after) => {
-        // Should separate zero into its own legend item (e.g., "0" instead of "0 - 40")
-        return after.hasZeroItem && after.itemLabels.join(',') !== before.itemLabels.join(',')
-      }
-    )
-
-    await performAndAssert(
-      'Separate Zero → Uncheck',
-      getSeparateZero,
-      async () => {
-        await userEvent.click(separateZeroCheckbox)
-      },
-      (before, after) => {
-        // Should merge zero back into a range
-        return !after.hasZeroItem && after.itemLabels.join(',') !== before.itemLabels.join(',')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Number of Items
-    // ==========================================================================
-    const numberOfItemsSelect = Array.from(canvasElement.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Number of Items')
-    }) as HTMLSelectElement
-
-    const getNumberOfItems = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const legendItems = legendContainer?.querySelectorAll('.legend-container__li')
-      return {
-        itemCount: legendItems?.length ?? 0,
-        legendHTML: legendContainer?.innerHTML || ''
-      }
-    }
-
-    await performAndAssert(
-      'Number of Items → Set to 5',
-      getNumberOfItems,
-      async () => {
-        await userEvent.selectOptions(numberOfItemsSelect, '5')
-      },
-      (before, after) => {
-        // Should have 5 legend items
-        return after.itemCount === 5 && after.itemCount !== before.itemCount
-      }
-    )
-
-    await performAndAssert(
-      'Number of Items → Set to 3',
-      getNumberOfItems,
-      async () => {
-        await userEvent.selectOptions(numberOfItemsSelect, '3')
-      },
-      (before, after) => {
-        // Should have 3 legend items
-        return after.itemCount === 3 && after.itemCount !== before.itemCount
-      }
-    )
-
-    // Switch back to gradient for the legend title test
-    await userEvent.selectOptions(legendPositionSelect, 'bottom')
-    await userEvent.selectOptions(legendStyleSelect, 'gradient')
-
-    // ==========================================================================
-    // TEST: Legend Title
-    // ==========================================================================
-    const legendTitleInput = Array.from(canvasElement.querySelectorAll('input[type="text"]') || []).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Legend Title')
-    }) as HTMLInputElement
-
-    const getLegendTitle = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const titleElement = legendContainer?.querySelector('.legend-container__title, .legend-title')
-      return {
-        titleText: titleElement?.textContent?.trim() || '',
-        titleExists: Boolean(titleElement),
-        legendHTML: legendContainer?.innerHTML || ''
-      }
-    }
-
-    await performAndAssert(
-      'Legend Title → Set custom title',
-      getLegendTitle,
-      async () => {
-        await userEvent.clear(legendTitleInput)
-        await userEvent.type(legendTitleInput, 'Custom Legend Title')
-      },
-      (before, after) => {
-        return after.titleText.includes('Custom Legend Title') && after.legendHTML !== before.legendHTML
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Legend Description
-    // ==========================================================================
-    const legendDescriptionTextarea = Array.from(canvasElement.querySelectorAll('textarea') || []).find(textarea => {
-      const label = textarea.closest('label')
-      return label?.textContent?.includes('Legend Description')
-    }) as HTMLTextAreaElement
-
-    const getLegendDescription = () => {
-      const legendContainer = canvasElement.querySelector('.legend-container')
-      const descriptionElement = legendContainer?.querySelector('.legend-container__description, .legend-description')
-      return {
-        descriptionText: descriptionElement?.textContent?.trim() || '',
-        descriptionExists: Boolean(descriptionElement),
-        legendHTML: legendContainer?.innerHTML || ''
-      }
-    }
-
-    await performAndAssert(
-      'Legend Description → Set custom description',
-      getLegendDescription,
-      async () => {
-        await userEvent.clear(legendDescriptionTextarea)
-        await userEvent.type(legendDescriptionTextarea, 'This is a custom legend description for testing.')
-      },
-      (before, after) => {
-        return (
-          after.descriptionText.includes('This is a custom legend description') &&
-          after.legendHTML !== before.legendHTML
-        )
-      }
-    )
-  }
-}
-
-export const FiltersSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Filters')
-
-    // ==========================================================================
-    // TEST: Add Filter and configure it to filter by STATE
-    // ==========================================================================
-    const addFilterButton = canvas.getByRole('button', { name: /Add Filter/i })
-
-    await performAndAssert(
-      'Add Filter → Click button',
-      () => {
-        const filtersList = canvasElement.querySelector('.draggable-field-list')
-        const collapsedFilters = filtersList?.querySelectorAll('.editor-field-item') || []
-        return {
-          hasFiltersList: Boolean(filtersList),
-          hasCollapsedFilter: collapsedFilters.length > 0
-        }
-      },
-      async () => {
-        await userEvent.click(addFilterButton)
-      },
-      (before, after) => {
-        // Should create filters list and add a collapsed filter
-        return after.hasFiltersList && after.hasCollapsedFilter
-      }
-    )
-
-    // Find and expand the collapsed filter (click the header expand button)
-    const filtersList = canvasElement.querySelector('.draggable-field-list')
-    const expandButton = filtersList?.querySelector('.editor-field-item__header button') as HTMLButtonElement
-    await userEvent.click(expandButton)
-
-    // Wait for the expanded filter content
-    await waitForPresence('.draggable-field-list .editor-field-item__content', canvasElement)
-
-    // Find the newly added filter section content
-    const filterBlock = filtersList?.querySelector('.editor-field-item__content') as HTMLElement
-
-    // ==========================================================================
-    // TEST: Select STATE as the filter column
-    // ==========================================================================
-    const filterColumnSelect = Array.from(filterBlock?.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Filter') && !labelSpan?.textContent?.includes('Style')
-    }) as HTMLSelectElement
-
-    const getDefaultValueState = () => {
-      const updatedFilterBlock = filtersList?.querySelector('.editor-field-item__content') as HTMLElement
-      const defaultValueSelect = Array.from(updatedFilterBlock?.querySelectorAll('select') || []).find(select => {
-        const label = select.closest('label')
-        const labelSpan = label?.querySelector('.edit-label')
-        return labelSpan?.textContent?.includes('Filter Default Value')
-      }) as HTMLSelectElement
-      return {
-        hasDefaultValueSelect: Boolean(defaultValueSelect),
-        optionCount: defaultValueSelect?.options.length || 0
-      }
-    }
-
-    await performAndAssert(
-      'Filter Column → Select STATE',
-      getDefaultValueState,
-      async () => {
-        await userEvent.selectOptions(filterColumnSelect, 'STATE')
-      },
-      (before, after) => {
-        // Should populate the default value select with state options
-        return after.hasDefaultValueSelect && after.optionCount > 0
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Filter Intro Text
-    // ==========================================================================
-    const filterIntroTextarea = Array.from(canvasElement.querySelectorAll('textarea') || []).find(textarea => {
-      const label = textarea.closest('label')
-      return label?.textContent?.includes('Filter intro text')
-    }) as HTMLTextAreaElement
-
-    const getFilterIntroText = () => {
-      const filtersSection = canvasElement.querySelector('.filters-section')
-      const filterIntro = filtersSection?.querySelector('.filters-section__intro-text')
-      return {
-        introText: filterIntro?.textContent?.trim() || '',
-        hasIntro: Boolean(filterIntro)
-      }
-    }
-
-    await performAndAssert(
-      'Filter Intro Text → Set custom text',
-      getFilterIntroText,
-      async () => {
-        await userEvent.clear(filterIntroTextarea)
-        await userEvent.type(filterIntroTextarea, 'Select a state to filter the map data.')
-      },
-      (before, after) => {
-        return after.hasIntro && after.introText.includes('Select a state to filter the map data')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Select Alabama as the default filter value
-    // ==========================================================================
-    const updatedFilterBlock = filtersList?.querySelector('.editor-field-item__content') as HTMLElement
-    const defaultValueSelect = Array.from(updatedFilterBlock?.querySelectorAll('select') || []).find(select => {
-      const label = select.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Filter Default Value')
-    }) as HTMLSelectElement
-
-    await performAndAssert(
-      'Filter Default Value → Select Alabama',
-      () => {
-        // Check the legend text labels - when filtered to one state, shows single value
-        const legendContainer = canvasElement.querySelector('.legend-container')
-        const textElements = Array.from(legendContainer?.querySelectorAll('text tspan') || [])
-        const labels = textElements.map(el => el.textContent?.trim()).filter(t => t && t !== '')
-        const labelText = labels.join(',')
-
-        // Verify filter dropdown is rendered
-        const vizContainer = canvasElement.querySelector('.cove-visualization')
-        const filterSelect = Array.from(vizContainer?.querySelectorAll('select') || []).find(select => {
-          const options = Array.from(select.options).map(opt => opt.value)
-          return options.includes('Alabama')
-        })
-
-        return {
-          labelCount: labels.length,
-          labelText,
-          hasFilterSelect: Boolean(filterSelect),
-          selectedValue: filterSelect?.value || ''
-        }
-      },
-      async () => {
-        await userEvent.selectOptions(defaultValueSelect, 'Alabama')
-      },
-      (before, after) => {
-        // After filtering to Alabama: should have filter dropdown, Alabama selected, and exactly 1 legend label
-        // The legend shows a single value when only one state's data is displayed
-        return after.hasFilterSelect && after.selectedValue === 'Alabama' && after.labelCount === 1
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Filter Label
-    // ==========================================================================
-    const labelInput = Array.from(updatedFilterBlock?.querySelectorAll('input[type="text"]') || []).find(input => {
-      const label = input.closest('label')
-      const labelSpan = label?.querySelector('.edit-label')
-      return labelSpan?.textContent?.includes('Label') && !labelSpan?.textContent?.includes('Query')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Filter Label → Set custom label',
-      () => {
-        const filtersSection = canvasElement.querySelector('.filters-section')
-        const filterLabel = filtersSection?.querySelector('.form-group label')
-        return {
-          labelText: filterLabel?.textContent?.trim() || ''
-        }
-      },
-      async () => {
-        await userEvent.clear(labelInput)
-        await userEvent.type(labelInput, 'Select State')
-      },
-      (before, after) => {
-        return after.labelText.includes('Select State')
-      }
-    )
-  }
-}
-
-export const DataTableSectionTests: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Data Table')
-
-    // ==========================================================================
-    // TEST: Data Table Title
-    // ==========================================================================
-    const dataTableTitleInput = canvasElement.querySelector('#dataTableTitle') as HTMLInputElement
-
-    await performAndAssert(
-      'Data Table Title → Set custom title',
-      () => {
-        const dataTableHeading = canvasElement.querySelector('.data-table-heading')
-        return {
-          titleText: dataTableHeading?.textContent?.trim() || ''
-        }
-      },
-      async () => {
-        await userEvent.clear(dataTableTitleInput)
-        await userEvent.type(dataTableTitleInput, 'State Population Data')
-      },
-      (before, after) => {
-        return after.titleText.includes('State Population Data')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Wrap Data Table Columns
-    // ==========================================================================
-    // First expand the data table if it's collapsed
-    const dataTableHeadingButton = canvasElement.querySelector('.data-table-heading') as HTMLElement
-    const dataTableContainer = canvasElement.querySelector('.data-table-container')
-    const isCollapsed = dataTableHeadingButton?.classList.contains('collapsed')
-    if (isCollapsed) {
-      await userEvent.click(dataTableHeadingButton)
-      await new Promise(resolve => setTimeout(resolve, 200))
-    }
-
-    const wrapColumnsCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
-      const label = checkbox.closest('label')
-      return label?.textContent?.includes('WRAP DATA TABLE COLUMNS')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Wrap Columns → Toggle wrapping',
-      () => {
-        const dataTable = canvasElement.querySelector('.data-table')
-        const firstCell = dataTable?.querySelector('tbody td')
-        const whiteSpace = firstCell ? window.getComputedStyle(firstCell).whiteSpace : ''
-        return {
-          whiteSpace,
-          hasCells: Boolean(firstCell)
-        }
-      },
-      async () => {
-        await userEvent.click(wrapColumnsCheckbox)
-      },
-      (before, after) => {
-        // When wrap is enabled, white-space should be 'normal' or 'unset', not 'nowrap'
-        return after.hasCells && before.whiteSpace === 'nowrap' && after.whiteSpace !== 'nowrap'
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show Data Table
-    // ==========================================================================
-    const showDataTableCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
-      checkbox => {
-        const label = checkbox.closest('label')
-        return label?.textContent?.includes('Show Data Table') && !label?.textContent?.includes('Non Geographic')
-      }
-    ) as HTMLInputElement
-
-    await performAndAssert(
-      'Show Data Table → Hide data table',
-      () => {
-        const dataTableContainer = canvasElement.querySelector('.data-table-container')
-        const isVisible = dataTableContainer && window.getComputedStyle(dataTableContainer).display !== 'none'
-        return {
-          isVisible: Boolean(isVisible)
-        }
-      },
-      async () => {
-        await userEvent.click(showDataTableCheckbox)
-      },
-      (before, after) => {
-        // Should hide the data table
-        return before.isVisible && !after.isVisible
-      }
-    )
-
-    // Toggle it back on for the next test
-    await userEvent.click(showDataTableCheckbox)
-
-    // ==========================================================================
-    // TEST: Show Non Geographic Data
-    // ==========================================================================
-    const showNonGeoDataCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
-      checkbox => {
-        const label = checkbox.closest('label')
-        return label?.textContent?.includes('Show Non Geographic Data')
-      }
-    ) as HTMLInputElement
-
-    await performAndAssert(
-      'Show Non Geographic Data → Toggle visibility',
-      () => {
-        const dataTable = canvasElement.querySelector('.data-table')
-        const rows = Array.from(dataTable?.querySelectorAll('tbody tr') || [])
-        const rowCount = rows.length
-        return {
-          rowCount
-        }
-      },
-      async () => {
-        await userEvent.click(showNonGeoDataCheckbox)
-      },
-      (before, after) => {
-        // Toggling non-geographic data should add rows to the table (overall data object)
-        return after.rowCount > before.rowCount
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Index Column Header
-    // ==========================================================================
-    const indexColumnHeaderInput = Array.from(canvasElement.querySelectorAll('input[type="text"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Index Column Header')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Index Column Header → Set custom header',
-      () => {
-        const dataTable = canvasElement.querySelector('.data-table')
-        const firstHeader = dataTable?.querySelector('thead th')
-        return {
-          headerText: firstHeader?.textContent?.trim() || ''
-        }
-      },
-      async () => {
-        await userEvent.clear(indexColumnHeaderInput)
-        await userEvent.type(indexColumnHeaderInput, 'State/Territory')
-      },
-      (before, after) => {
-        return after.headerText.includes('State/Territory')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Screen Reader Description
-    // ==========================================================================
-    const screenReaderDescTextarea = Array.from(canvasElement.querySelectorAll('textarea')).find(textarea => {
-      const label = textarea.closest('label')
-      return label?.textContent?.includes('Screen Reader Description')
-    }) as HTMLTextAreaElement
-
-    await performAndAssert(
-      'Screen Reader Description → Set custom description',
-      () => {
-        const dataTable = canvasElement.querySelector('.data-table')
-        const caption = dataTable?.querySelector('caption')
-        return {
-          captionText: caption?.textContent?.trim() || ''
-        }
-      },
-      async () => {
-        await userEvent.clear(screenReaderDescTextarea)
-        await userEvent.type(screenReaderDescTextarea, 'Table showing state population data by region')
-      },
-      (before, after) => {
-        return after.captionText.includes('Table showing state population data')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Limit Table Height
-    // ==========================================================================
-    const limitHeightCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
-      const label = checkbox.closest('label')
-      return label?.textContent?.includes('Limit Table Height')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Limit Table Height → Enable height limit',
-      () => {
-        // Check if the "Data Table Height" input field appears (conditional rendering)
-        const heightInput = Array.from(canvasElement.querySelectorAll('input[type="number"]')).find(input => {
-          const label = input.closest('label')
-          return label?.textContent?.includes('Data Table Height')
-        })
-        return {
-          hasHeightInput: Boolean(heightInput)
-        }
-      },
-      async () => {
-        await userEvent.click(limitHeightCheckbox)
-      },
-      (before, after) => {
-        // After enabling, the "Data Table Height" input field should appear
-        return !before.hasHeightInput && after.hasHeightInput
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Table Cell Min Width
-    // ==========================================================================
-    const cellMinWidthInput = Array.from(canvasElement.querySelectorAll('input[type="number"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Table Cell Min Width')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Table Cell Min Width → Set minimum width',
-      () => {
-        const dataTable = canvasElement.querySelector('.data-table')
-        const firstCell = dataTable?.querySelector('thead th')
-        const minWidth = firstCell ? window.getComputedStyle(firstCell).minWidth : ''
-        return {
-          minWidth
-        }
-      },
-      async () => {
-        await userEvent.clear(cellMinWidthInput)
-        await userEvent.type(cellMinWidthInput, '150')
-      },
-      (before, after) => {
-        // After setting min width to 150px, cells should have minWidth of 150px
-        return before.minWidth !== after.minWidth && after.minWidth === '150px'
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show Download CSV Link
-    // ==========================================================================
-    const showDownloadCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
-      const label = checkbox.closest('label')
-      return label?.textContent?.includes('Show Download CSV Link')
-    }) as HTMLInputElement
-
-    // First toggle it off, then back on
-    await performAndAssert(
-      'Show Download CSV Link → Toggle off',
-      () => {
-        const downloadLink = Array.from(canvasElement.querySelectorAll('a')).find(link =>
-          link.textContent?.includes('Download Data')
-        )
-        return {
-          hasDownloadLink: Boolean(downloadLink)
-        }
-      },
-      async () => {
-        await userEvent.click(showDownloadCheckbox)
-      },
-      (before, after) => {
-        // After disabling, the download link should disappear
-        return before.hasDownloadLink && !after.hasDownloadLink
-      }
-    )
-
-    await performAndAssert(
-      'Show Download CSV Link → Toggle back on',
-      () => {
-        const downloadLink = Array.from(canvasElement.querySelectorAll('a')).find(link =>
-          link.textContent?.includes('Download Data')
-        )
-        return {
-          hasDownloadLink: Boolean(downloadLink)
-        }
-      },
-      async () => {
-        await userEvent.click(showDownloadCheckbox)
-      },
-      (before, after) => {
-        // After re-enabling, the download link should reappear
-        return !before.hasDownloadLink && after.hasDownloadLink
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show Link Below Table
-    // ==========================================================================
-    const showLinkBelowCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
-      checkbox => {
-        const label = checkbox.closest('label')
-        return label?.textContent?.includes('Show Link Below Table')
-      }
-    ) as HTMLInputElement
-
-    // First toggle it off (move link above), then back on (move link below)
-    await performAndAssert(
-      'Show Link Below Table → Toggle off (move above)',
-      () => {
-        const dataTableContainer = canvasElement.querySelector('.data-table-container')
-        const downloadSection = canvasElement.querySelector('.download-links')
-        // Check if download link is positioned after the data table
-        const containerRect = dataTableContainer?.getBoundingClientRect()
-        const downloadRect = downloadSection?.getBoundingClientRect()
-        const isBelow = downloadRect && containerRect && downloadRect.top > containerRect.bottom
-        return {
-          isBelow: Boolean(isBelow)
-        }
-      },
-      async () => {
-        await userEvent.click(showLinkBelowCheckbox)
-      },
-      (before, after) => {
-        // After disabling, download link should move above the table
-        return before.isBelow && !after.isBelow
-      }
-    )
-
-    await performAndAssert(
-      'Show Link Below Table → Toggle back on (move below)',
-      () => {
-        const dataTableContainer = canvasElement.querySelector('.data-table-container')
-        const downloadSection = canvasElement.querySelector('.download-links')
-        const containerRect = dataTableContainer?.getBoundingClientRect()
-        const downloadRect = downloadSection?.getBoundingClientRect()
-        const isBelow = downloadRect && containerRect && downloadRect.top > containerRect.bottom
-        return {
-          isBelow: Boolean(isBelow)
-        }
-      },
-      async () => {
-        await userEvent.click(showLinkBelowCheckbox)
-      },
-      (before, after) => {
-        // After re-enabling, download link should move back below the table
-        return !before.isBelow && after.isBelow
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Enable Image Download
-    // ==========================================================================
-    const enableImageDownloadCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
-      checkbox => {
-        const label = checkbox.closest('label')
-        return label?.textContent?.includes('Enable Image Download')
-      }
-    ) as HTMLInputElement
-
-    await performAndAssert(
-      'Enable Image Download → Enable button',
-      () => {
-        const downloadImgButton =
-          Array.from(canvasElement.querySelectorAll('button')).find(
-            btn => btn.textContent?.includes('Download Image') || btn.classList.contains('download-image')
-          ) ||
-          Array.from(canvasElement.querySelectorAll('a[role="button"]')).find(
-            link => link.textContent?.includes('Download Map') && link.textContent?.includes('PNG')
-          )
-        return {
-          hasDownloadImgButton: Boolean(downloadImgButton)
-        }
-      },
-      async () => {
-        await userEvent.click(enableImageDownloadCheckbox)
-      },
-      (before, after) => {
-        // After enabling, the download image button should appear
-        return !before.hasDownloadImgButton && after.hasDownloadImgButton
-      }
-    )
-  }
-}
-
-// =================================================================================================
-// Visual Section Tests
-// =================================================================================================
-export const VisualSectionTests: StoryObj<typeof CdcMap> = {
-  name: 'Visual Section Tests',
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    // Wait for the editor to load
-    await waitForEditor(canvas)
-
-    // Open the Visual accordion
-    await openAccordion(canvas, 'Visual')
-
-    // ==========================================================================
-    // TEST: Header Theme
-    // ==========================================================================
-    await performAndAssert(
-      'Header Theme → Select purple theme',
-      () => {
-        // Check via the HeaderThemeSelector's selected button state
-        const colorPalettes = canvasElement.querySelectorAll('.color-palette')
-        const themeColorPalette = Array.from(colorPalettes).find(palette =>
-          Array.from(palette.querySelectorAll('button')).some(btn => btn.classList.contains('theme-purple'))
-        )
-        const selectedThemeBtn = themeColorPalette?.querySelector('button.selected') as HTMLElement | null
-        return {
-          currentTheme: selectedThemeBtn
-            ? Array.from(selectedThemeBtn.classList).find(cls => cls.startsWith('theme-')) || ''
-            : ''
-        }
-      },
-      async () => {
-        // Find the header theme selector and click purple
-        const colorPalettes = canvasElement.querySelectorAll('.color-palette')
-        const themeColorPalette = Array.from(colorPalettes).find(palette =>
-          Array.from(palette.querySelectorAll('button')).some(btn => btn.classList.contains('theme-purple'))
-        )
-        const purpleTheme = themeColorPalette?.querySelector('button.theme-purple') as HTMLElement
-        await userEvent.click(purpleTheme)
-      },
-      (before, after) => {
-        // After clicking, the purple theme button should be selected
-        return after.currentTheme === 'theme-purple'
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Show Title
-    // ==========================================================================
-    const showTitleCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
-      const label = checkbox.closest('label')
-      return label?.textContent?.includes('Show Title')
-    }) as HTMLInputElement
-
-    await performAndAssert(
-      'Show Title → Toggle off',
-      () => {
-        const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
-        return {
-          isPresent: Boolean(titleElement)
-        }
-      },
-      async () => {
-        await userEvent.click(showTitleCheckbox)
-      },
-      (before, after) => {
-        // After toggling off, title should be removed from DOM
-        return before.isPresent && !after.isPresent
-      }
-    )
-
-    await performAndAssert(
-      'Show Title → Toggle back on',
-      () => {
-        const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
-        return {
-          isPresent: Boolean(titleElement)
-        }
-      },
-      async () => {
-        await userEvent.click(showTitleCheckbox)
-      },
-      (before, after) => {
-        // After toggling back on, title should be present in DOM
-        return !before.isPresent && after.isPresent
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Geo Border Color
-    // ==========================================================================
-    const geoBorderColorSelect = Array.from(canvasElement.querySelectorAll('select')).find(select => {
-      const label = select.closest('label')
-      return label?.textContent?.includes('Geo Border Color')
-    }) as HTMLSelectElement
-
-    await performAndAssert(
-      'Geo Border Color → Change to White',
-      () => {
-        // Check the stroke attribute on SVG paths with class 'single-geo'
-        const geoPaths = canvasElement.querySelectorAll('path.single-geo')
-        const firstPath = geoPaths[0] as SVGPathElement
-        // Get the actual stroke value - could be in attribute, style, or computed
-        const strokeAttr = firstPath?.getAttribute('stroke') || ''
-        const strokeStyle = firstPath?.style?.stroke || ''
-        const computedStroke = firstPath ? window.getComputedStyle(firstPath).stroke : ''
-        return {
-          strokeAttr,
-          strokeStyle,
-          computedStroke,
-          pathCount: geoPaths.length
-        }
-      },
-      async () => {
-        await userEvent.selectOptions(geoBorderColorSelect, 'sameAsBackground')
-      },
-      (before, after) => {
-        // After changing to white, one of the stroke values should change
-        const beforeStroke = before.strokeAttr || before.strokeStyle || before.computedStroke
-        const afterStroke = after.strokeAttr || after.strokeStyle || after.computedStroke
-        return beforeStroke !== '' && afterStroke !== '' && beforeStroke !== afterStroke
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Map Color Palette - Sequential Palette Selection
-    // ==========================================================================
-    await performAndAssert(
-      'Map Color Palette → Select different sequential palette',
-      () => {
-        // Check the fill colors of actual map path elements (same as we use for stroke)
-        const geoPaths = canvasElement.querySelectorAll('path.single-geo')
-        const firstPath = geoPaths[0] as SVGPathElement
-        // Get the fill value from any available source
-        const fillAttr = firstPath?.getAttribute('fill') || ''
-        const fillStyle = firstPath?.style?.fill || ''
-        const computedFill = firstPath ? window.getComputedStyle(firstPath).fill : ''
-        const firstColor = fillAttr || fillStyle || computedFill
-        return {
-          firstColor,
-          pathCount: geoPaths.length
-        }
-      },
-      async () => {
-        // Find the Sequential palette section
-        const spans = Array.from(canvasElement.querySelectorAll('span'))
-        const sequentialLabel = spans.find(span => span.textContent?.trim() === 'Sequential')
-        const paletteContainer = sequentialLabel?.nextElementSibling
-
-        // Try both li and button elements for palette selection
-        const palettes = Array.from(paletteContainer?.querySelectorAll('li, button') || []) as HTMLElement[]
-
-        // Select a different palette (skip the first one as it might be selected)
-        const alternativePalette = palettes.find((element, idx) => idx > 0 && !element.classList.contains('selected'))
-        if (alternativePalette) {
-          await userEvent.click(alternativePalette)
-
-          // Wait for changes to apply, then check for modal
-          await new Promise(resolve => setTimeout(resolve, 100))
-
-          // Check if modal appeared and handle it
-          const modal = canvasElement.querySelector('.modal-overlay')
-          if (modal) {
-            const confirmButton = Array.from(canvasElement.querySelectorAll('button')).find(btn =>
-              btn.textContent?.includes('Convert to New Palette')
-            )
-            if (confirmButton) {
-              await userEvent.click(confirmButton)
-              // Wait for modal to close and changes to apply
-              await new Promise(resolve => setTimeout(resolve, 500))
-            }
-          }
-        }
-      },
-      (before, after) => {
-        // After selecting a different palette, the map fill colors should change
-        return before.firstColor !== '' && after.firstColor !== '' && before.firstColor !== after.firstColor
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Map Color Palette - Reverse Order
-    // ==========================================================================
-    // The reverse toggle is an InputToggle component which renders as a div slider
-    // Find it via the hidden checkbox with name containing "isReversed"
-    const reversePaletteCheckbox = canvasElement.querySelector('input[name*="isReversed"]') as HTMLInputElement
-    const reversePaletteToggle = reversePaletteCheckbox?.parentElement as HTMLElement
-
-    expect(reversePaletteToggle).toBeTruthy()
-
-    await performAndAssert(
-      'Map Color Palette → Reverse palette order',
-      () => {
-        // Check the fill colors of map paths
-        const geoPaths = canvasElement.querySelectorAll('path.single-geo')
-        const firstPath = geoPaths[0] as SVGPathElement
-        const fillAttr = firstPath?.getAttribute('fill') || ''
-        const fillStyle = firstPath?.style?.fill || ''
-        const computedFill = firstPath ? window.getComputedStyle(firstPath).fill : ''
-        const firstColor = fillAttr || fillStyle || computedFill
-        return {
-          firstColor,
-          pathCount: geoPaths.length
-        }
-      },
-      async () => {
-        await userEvent.click(reversePaletteToggle)
-        // No modal should appear - reversing doesn't trigger conversion modal
-      },
-      (before, after) => {
-        // After reversing, the first color should be different
-        return before.firstColor !== '' && after.firstColor !== '' && before.firstColor !== after.firstColor
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Geocode Circle Size
-    // ==========================================================================
-    const geocodeCircleSizeInput = Array.from(canvasElement.querySelectorAll('input[type="number"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Geocode Circle Size')
-    }) as HTMLInputElement
-
-    expect(geocodeCircleSizeInput).toBeTruthy()
-
-    await performAndAssert(
-      'Geocode Circle Size → Set to 15',
-      () => {
-        // Check the actual visualization - DC appears as a glyph on the map
-        // The glyph class element is a path or circle, look for actual circle element
-        const geoPoints = canvasElement.querySelectorAll('g.geo-point')
-        const firstGeoPoint = geoPoints[0]
-        const circle = firstGeoPoint?.querySelector('circle')
-        const r = circle?.getAttribute('r') || ''
-        // Also check path elements that might have size in their d attribute
-        const path = firstGeoPoint?.querySelector('path')
-        const d = path?.getAttribute('d') || ''
-        return {
-          r,
-          d,
-          inputValue: geocodeCircleSizeInput.value
-        }
-      },
-      async () => {
-        await userEvent.clear(geocodeCircleSizeInput)
-        await userEvent.type(geocodeCircleSizeInput, '15')
-        await userEvent.tab() // Trigger blur/change event
-      },
-      (before, after) => {
-        // Verify the input value changed to 15
-        expect(after.inputValue).toBe('15')
-        // After changing the size, either the radius or path data should change
-        return (
-          (before.r !== '' && after.r !== '' && before.r !== after.r) ||
-          (before.d !== '' && after.d !== '' && before.d !== after.d)
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Default City Style
-    // ==========================================================================
-    const cityStyleSelect = Array.from(canvasElement.querySelectorAll('select')).find(select => {
-      const label = select.closest('label')
-      return label?.textContent?.includes('Default City Style')
-    }) as HTMLSelectElement
-
-    if (cityStyleSelect) {
-      await performAndAssert(
-        'Default City Style → Change to Triangle',
-        () => {
-          // Check the actual visualization - look for glyph shapes
-          const circles = canvasElement.querySelectorAll('.visx-glyph-circle')
-          const triangles = canvasElement.querySelectorAll('.visx-glyph-triangle')
-          return {
-            circleCount: circles.length,
-            triangleCount: triangles.length
-          }
-        },
-        async () => {
-          await userEvent.selectOptions(cityStyleSelect, 'triangle')
-        },
-        (before, after) => {
-          // After changing to triangle, should have triangles instead of circles
-          return before.triangleCount !== after.triangleCount || before.circleCount !== after.circleCount
-        }
-      )
-    }
-
-    // ==========================================================================
-    // TEST: Label (Optional)
-    // ==========================================================================
-    const cityStyleLabelInput = Array.from(canvasElement.querySelectorAll('input[type="text"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Label (Optional)')
-    }) as HTMLInputElement
-
-    if (cityStyleLabelInput) {
-      await performAndAssert(
-        'Label (Optional) → Set custom label',
-        () => {
-          // Check if the label appears in the legend
-          const legend = canvasElement.querySelector('.legends')
-          const legendText = legend?.textContent || ''
-          return {
-            legendText
-          }
-        },
-        async () => {
-          await userEvent.clear(cityStyleLabelInput)
-          await userEvent.type(cityStyleLabelInput, 'City Locations')
-        },
-        (before, after) => {
-          // After setting the label, it should appear in the legend
-          return after.legendText.includes('City Locations')
-        }
-      )
-    }
-  }
-}
-
-/**
- * Pattern Settings Section Tests
- * Tests controls in the Pattern Settings accordion (only visible for US maps)
- */
-export const PatternSettingsSectionTests: Story = {
-  args: {
-    config: usaStateGradientConfig,
-    isEditor: true
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    // Wait for editor to load
-    await waitForEditor(canvas)
-
-    // ==========================================================================
-    // TEST: Wait for Pattern Settings accordion to load (US topo JSON)
-    // ==========================================================================
-    let patternSettingsButton: HTMLElement | null = null
-
-    await performAndAssert(
-      'Pattern Settings → Wait for accordion to appear',
-      () => {
-        // Check if Pattern Settings accordion exists
-        const buttons = Array.from(canvasElement.querySelectorAll('.accordion__button'))
-        const button = buttons.find(btn => btn.textContent?.includes('Pattern Settings')) as HTMLElement
-        if (button) {
-          patternSettingsButton = button
-        }
-        return {
-          accordionExists: !!button
-        }
-      },
-      async () => {
-        // No action needed - just let performAndAssert's built-in polling wait for the accordion
-      },
-      (before, after) => {
-        // After waiting, the accordion should exist
-        return after.accordionExists
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Open Pattern Settings accordion and verify controls appear
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Open accordion',
-      () => {
-        // Check if the accordion panel is expanded (aria-expanded attribute)
-        const isExpanded = patternSettingsButton.getAttribute('aria-expanded') === 'true'
-        // Also check if the Add Geo Pattern button is visible
-        const buttons = Array.from(canvasElement.querySelectorAll('button'))
-        const addPatternButton = buttons.find(btn => btn.textContent?.includes('Add Geo Pattern'))
-        return {
-          isExpanded,
-          hasAddButton: !!addPatternButton
-        }
-      },
-      async () => {
-        await userEvent.click(patternSettingsButton)
-      },
-      (before, after) => {
-        // After clicking, accordion should be expanded and button should be visible
-        return !before.isExpanded && after.isExpanded && after.hasAddButton
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Add a geo pattern and verify pattern appears on map
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Add geo pattern',
-      () => {
-        // Look for pattern elements in ALL SVGs (there might be multiple)
-        // Pattern definitions are <pattern> elements, and they're used by paths with fill="url(#...)"
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternDefCount = 0
-        let patternPathCount = 0
-
-        allSvgs.forEach(svg => {
-          const patternDefs = svg.querySelectorAll('pattern')
-          patternDefCount += patternDefs.length
-
-          const allPaths = Array.from(svg.querySelectorAll('path'))
-          const patternPaths = allPaths.filter(path => {
-            const fill = path.getAttribute('fill')
-            return fill && fill.startsWith('url(#')
-          })
-          patternPathCount += patternPaths.length
-        })
-
-        return {
-          patternDefCount,
-          patternPathCount,
-          svgCount: allSvgs.length
-        }
-      },
-      async () => {
-        // Click "Add Geo Pattern" button
-        const buttons = Array.from(canvasElement.querySelectorAll('button'))
-        const addPatternButton = buttons.find(btn => btn.textContent?.includes('Add Geo Pattern'))
-        if (!addPatternButton) {
-          throw new Error('Add Geo Pattern button not found')
-        }
-        await userEvent.click(addPatternButton)
-      },
-      (before, after) => {
-        // After clicking, at minimum a new pattern definition should be created.
-        // Pattern paths may remain unchanged until dataKey/dataValue are configured.
-        return after.patternDefCount > before.patternDefCount
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Change pattern color to #111
-    // ==========================================================================
-    // First, open the pattern accordion
-    let patternAccordionButton: HTMLElement | null = null
-    await performAndAssert(
-      'Pattern Settings → Open pattern accordion',
-      () => {
-        const allButtons = Array.from(canvasElement.querySelectorAll('.accordion__button'))
-        const button = allButtons.find(btn => btn.textContent?.includes('Select Column')) as HTMLElement
-        if (button) {
-          patternAccordionButton = button
-        }
-        return {
-          isExpanded: button ? button.getAttribute('aria-expanded') === 'true' : false
-        }
-      },
-      async () => {
-        if (!patternAccordionButton) {
-          throw new Error('Pattern accordion not found')
-        }
-        await userEvent.click(patternAccordionButton)
-      },
-      (before, after) => {
-        return !before.isExpanded && after.isExpanded
-      }
-    )
-
-    // Now change the pattern color
-    await performAndAssert(
-      'Pattern Settings → Change pattern color to #111',
-      () => {
-        // Check pattern color in the SVG - look for circle elements inside pattern definitions
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternCircleColors: string[] = []
-
-        allSvgs.forEach(svg => {
-          const patterns = svg.querySelectorAll('pattern')
-          patterns.forEach(pattern => {
-            const circles = pattern.querySelectorAll('circle')
-            circles.forEach(circle => {
-              const fill = circle.getAttribute('fill')
-              if (fill) patternCircleColors.push(fill)
-            })
-          })
-        })
-
-        return {
-          patternColors: patternCircleColors
-        }
-      },
-      async () => {
-        // Find the pattern color input and change it to #111
-        const input = canvasElement.querySelector('input[name="patternColor"]') as HTMLInputElement
-        if (!input) {
-          throw new Error('Pattern color input not found')
-        }
-        await userEvent.clear(input)
-        // Use paste to enter the entire value at once, avoiding intermediate contrast check warnings
-        await userEvent.paste('#111')
-        // Blur to commit the change
-        await userEvent.tab()
-      },
-      (before, after) => {
-        // Pattern circles should now have fill color #111
-        return after.patternColors.some(color => color === '#111')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Set dataKey to STATE and dataValue to Colorado
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Set dataKey/dataValue to STATE/Colorado',
-      () => {
-        // Count pattern paths (paths with fill="url(#...)")
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternPathCount = 0
-
-        allSvgs.forEach(svg => {
-          const allPaths = Array.from(svg.querySelectorAll('path'))
-          const patternPaths = allPaths.filter(path => {
-            const fill = path.getAttribute('fill')
-            return fill && fill.startsWith('url(#')
-          })
-          patternPathCount += patternPaths.length
-        })
-
-        return {
-          patternPathCount
-        }
-      },
-      async () => {
-        // Select "STATE" from the dataKey dropdown
-        const dataKeySelect = canvasElement.querySelector('select[name^="pattern-dataKey--"]') as HTMLSelectElement
-        if (!dataKeySelect) {
-          throw new Error('DataKey select not found')
-        }
-        await userEvent.selectOptions(dataKeySelect, 'STATE')
-
-        // Type "Colorado" in the dataValue input
-        const dataValueInput = canvasElement.querySelector('input[id^="pattern-dataValue--"]') as HTMLInputElement
-        if (!dataValueInput) {
-          throw new Error('DataValue input not found')
-        }
-        await userEvent.clear(dataValueInput)
-        await userEvent.type(dataValueInput, 'Colorado')
-        // Tab to commit the change
-        await userEvent.tab()
-      },
-      (before, after) => {
-        // After setting STATE/Colorado, at least one matching patterned path should appear.
-        return after.patternPathCount > before.patternPathCount && after.patternPathCount > 0
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Numeric dataValue matching and hover persistence
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Set numeric dataKey/dataValue (Rate/55)',
-      () => {
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternPathCount = 0
-
-        allSvgs.forEach(svg => {
-          const allPaths = Array.from(svg.querySelectorAll('path'))
-          patternPathCount += allPaths.filter(path => path.getAttribute('fill')?.startsWith('url(#')).length
-        })
-
-        return { patternPathCount }
-      },
-      async () => {
-        const dataKeySelect = canvasElement.querySelector('select[name^="pattern-dataKey--"]') as HTMLSelectElement
-        const dataValueInput = canvasElement.querySelector('input[id^="pattern-dataValue--"]') as HTMLInputElement
-        if (!dataKeySelect || !dataValueInput) throw new Error('Pattern data controls not found')
-
-        await userEvent.selectOptions(dataKeySelect, 'Rate')
-        await userEvent.clear(dataValueInput)
-        await userEvent.type(dataValueInput, '55')
-        await userEvent.tab()
-      },
-      (before, after) => after.patternPathCount > 0
-    )
-
-    await performAndAssert(
-      'Pattern Settings → Broad match with blank dataKey (value 55)',
-      () => {
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternPathCount = 0
-
-        allSvgs.forEach(svg => {
-          const allPaths = Array.from(svg.querySelectorAll('path'))
-          patternPathCount += allPaths.filter(path => path.getAttribute('fill')?.startsWith('url(#')).length
-        })
-
-        return { patternPathCount }
-      },
-      async () => {
-        const dataKeySelect = canvasElement.querySelector('select[name^="pattern-dataKey--"]') as HTMLSelectElement
-        const dataValueInput = canvasElement.querySelector('input[id^="pattern-dataValue--"]') as HTMLInputElement
-        if (!dataKeySelect || !dataValueInput) throw new Error('Pattern data controls not found')
-
-        await userEvent.selectOptions(dataKeySelect, '')
-        await userEvent.clear(dataValueInput)
-        await userEvent.type(dataValueInput, '55')
-        await userEvent.tab()
-      },
-      (before, after) => after.patternPathCount > 0
-    )
-
-    await performAndAssert(
-      'Pattern Settings → Specific match beats broad match',
-      () => {
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        const patternTypeById: Record<string, 'lines' | 'circles' | 'waves' | 'unknown'> = {}
-        const appliedRatePatternTypes = new Set<string>()
-
-        allSvgs.forEach(svg => {
-          const patterns = svg.querySelectorAll('pattern')
-          patterns.forEach(pattern => {
-            const patternId = pattern.getAttribute('id')
-            if (!patternId) return
-
-            if (pattern.querySelector('circle')) patternTypeById[patternId] = 'circles'
-            else if (pattern.querySelector('line')) patternTypeById[patternId] = 'lines'
-            else if (pattern.querySelector('path')) patternTypeById[patternId] = 'waves'
-            else patternTypeById[patternId] = 'unknown'
-          })
-
-          const ratePatternNodes = Array.from(svg.querySelectorAll('path.pattern-geoKey--Rate')).filter(node =>
-            node.getAttribute('fill')?.startsWith('url(#')
-          )
-
-          ratePatternNodes.forEach(node => {
-            const fill = node.getAttribute('fill')
-            const match = fill?.match(/^url\(#(.+)\)$/)
-            const patternId = match?.[1]
-            if (!patternId) return
-            appliedRatePatternTypes.add(patternTypeById[patternId] || 'unknown')
-          })
-        })
-
-        return {
-          hasRateCircle: appliedRatePatternTypes.has('circles'),
-          hasRateWave: appliedRatePatternTypes.has('waves')
-        }
-      },
-      async () => {
-        const firstDataKey = canvasElement.querySelector('select[name="pattern-dataKey--0"]') as HTMLSelectElement
-        const firstDataValue = canvasElement.querySelector('input[id="pattern-dataValue--0"]') as HTMLInputElement
-        const firstPatternType = canvasElement.querySelector('select[name="pattern-type--0"]') as HTMLSelectElement
-        if (!firstDataKey || !firstDataValue || !firstPatternType) {
-          throw new Error('First pattern controls not found')
-        }
-        await userEvent.selectOptions(firstDataKey, 'Rate')
-        await userEvent.clear(firstDataValue)
-        await userEvent.type(firstDataValue, '55')
-        await userEvent.selectOptions(firstPatternType, 'circles')
-
-        const buttons = Array.from(canvasElement.querySelectorAll('button'))
-        const addPatternButton = buttons.find(btn => btn.textContent?.includes('Add Geo Pattern'))
-        if (!addPatternButton) throw new Error('Add Geo Pattern button not found')
-        await userEvent.click(addPatternButton)
-
-        const accordionButtons = Array.from(canvasElement.querySelectorAll('.accordion__button'))
-        const selectColumnButtons = accordionButtons.filter(btn => btn.textContent?.includes('Select Column'))
-        const secondPatternAccordionButton = selectColumnButtons[selectColumnButtons.length - 1] as HTMLElement
-        if (!secondPatternAccordionButton) throw new Error('Second pattern accordion not found')
-        await userEvent.click(secondPatternAccordionButton)
-
-        const secondDataKey = canvasElement.querySelector('select[name="pattern-dataKey--1"]') as HTMLSelectElement
-        const secondDataValue = canvasElement.querySelector('input[id="pattern-dataValue--1"]') as HTMLInputElement
-        const secondPatternType = canvasElement.querySelector('select[name="pattern-type--1"]') as HTMLSelectElement
-
-        if (!secondDataKey || !secondDataValue || !secondPatternType) {
-          throw new Error('Second pattern controls not found')
-        }
-
-        await userEvent.selectOptions(secondDataKey, '')
-        await userEvent.clear(secondDataValue)
-        await userEvent.type(secondDataValue, '55')
-        await userEvent.selectOptions(secondPatternType, 'waves')
-      },
-      (before, after) => after.hasRateCircle && !after.hasRateWave
-    )
-
-    await performAndAssert(
-      'Pattern Settings → Pattern remains after hover',
-      () => {
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternPathCount = 0
-
-        allSvgs.forEach(svg => {
-          const allPaths = Array.from(svg.querySelectorAll('path'))
-          patternPathCount += allPaths.filter(path => path.getAttribute('fill')?.startsWith('url(#')).length
-        })
-
-        return { patternPathCount }
-      },
-      async () => {
-        const geoGroup = canvasElement.querySelector('.geo-group') as HTMLElement
-        if (!geoGroup) throw new Error('Geo group not found for hover test')
-        await userEvent.hover(geoGroup)
-      },
-      (before, after) => after.patternPathCount === before.patternPathCount && after.patternPathCount > 0
-    )
-
-    // ==========================================================================
-    // TEST: Set label to "Colorado Pattern"
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Set label to "Colorado Pattern"',
-      () => {
-        // Check if the label appears in the legend
-        const legendText = canvasElement.textContent || ''
-        return {
-          hasLabelInLegend: legendText.includes('Colorado Pattern')
-        }
-      },
-      async () => {
-        // Find the label input - it's in a label element containing "Label (optional)"
-        const labels = Array.from(canvasElement.querySelectorAll('label'))
-        const labelElement = labels.find(l => l.textContent?.includes('Label (optional)'))
-        const labelInput = labelElement?.querySelector('input[type="text"]') as HTMLInputElement
-
-        if (!labelInput) {
-          throw new Error('Label input not found')
-        }
-        await userEvent.clear(labelInput)
-        await userEvent.type(labelInput, 'Colorado Pattern')
-        await userEvent.tab()
-      },
-      (before, after) => {
-        // After setting the label, it should appear in the legend
-        return !before.hasLabelInLegend && after.hasLabelInLegend
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Change pattern type to "lines"
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Change pattern type to lines',
-      () => {
-        // Check what type of pattern elements exist - lines patterns have <line> elements
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let hasCirclePattern = false
-        let hasLinePattern = false
-
-        allSvgs.forEach(svg => {
-          const patterns = svg.querySelectorAll('pattern')
-          patterns.forEach(pattern => {
-            if (pattern.querySelector('circle')) hasCirclePattern = true
-            if (pattern.querySelector('line')) hasLinePattern = true
-          })
-        })
-
-        return {
-          hasCirclePattern,
-          hasLinePattern
-        }
-      },
-      async () => {
-        // Find the pattern type dropdown and select "lines"
-        const patternTypeSelect = canvasElement.querySelector('select[name^="pattern-type--"]') as HTMLSelectElement
-        if (!patternTypeSelect) {
-          throw new Error('Pattern type select not found')
-        }
-        await userEvent.selectOptions(patternTypeSelect, 'lines')
-      },
-      (before, after) => {
-        // Before: has circle pattern, no line pattern
-        // After: has line pattern (may or may not still have circle pattern from other elements)
-        return before.hasCirclePattern && !before.hasLinePattern && after.hasLinePattern
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Change pattern size to "large"
-    // ==========================================================================
-    await performAndAssert(
-      'Pattern Settings → Change pattern size to large',
-      () => {
-        // Check the pattern element's width/height attributes
-        const allSvgs = canvasElement.querySelectorAll('svg')
-        let patternSizes: number[] = []
-
-        allSvgs.forEach(svg => {
-          const patterns = svg.querySelectorAll('pattern')
-          patterns.forEach(pattern => {
-            const width = pattern.getAttribute('width')
-            if (width) patternSizes.push(parseFloat(width))
-          })
-        })
-
-        return {
-          patternSizes
-        }
-      },
-      async () => {
-        // Find the pattern size dropdown and select "large"
-        const patternSizeSelect = canvasElement.querySelector('select[name^="pattern-size--"]') as HTMLSelectElement
-        if (!patternSizeSelect) {
-          throw new Error('Pattern size select not found')
-        }
-        await userEvent.selectOptions(patternSizeSelect, 'large')
-      },
-      (before, after) => {
-        // After changing to large, pattern sizes should increase
-        const beforeMax = Math.max(...before.patternSizes)
-        const afterMax = Math.max(...after.patternSizes)
-        return afterMax > beforeMax
-      }
-    )
-  }
-}
-
-/**
- * Text Annotations Section Tests
- * Tests controls in the Text Annotations accordion
- */
-export const TextAnnotationsSectionTests: Story = {
-  args: {
-    config: usaStateGradientConfig,
-    isEditor: true
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    // Wait for editor to load
-    await waitForEditor(canvas)
-
-    // Open the Text Annotations accordion
-    await openAccordion(canvas, 'Text Annotations')
-
-    // ==========================================================================
-    // TEST: Add Annotation
-    // ==========================================================================
-    const addAnnotationButton = Array.from(canvasElement.querySelectorAll('button')).find(btn => {
-      return btn.textContent?.includes('Add Annotation')
-    }) as HTMLButtonElement
-
-    expect(addAnnotationButton).toBeTruthy()
-
-    await performAndAssert(
-      'Add Annotation → Click to add default annotation',
-      () => {
-        // Check the actual visualization - annotations appear as divs with aria-label
-        // Default annotation text is "New Annotation"
-        const annotationElements = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
-        return {
-          annotationCount: annotationElements.length
-        }
-      },
-      async () => {
-        await userEvent.click(addAnnotationButton)
-      },
-      (before, after) => {
-        // After clicking, a new annotation should appear in the visualization
-        return after.annotationCount > before.annotationCount
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Change Annotation Text
-    // ==========================================================================
-    // Wait for the annotation sub-accordion to appear and find the button with "New Annotation" or "Select Column"
-    await waitForPresence('.cove-accordion__button', canvasElement)
-    const annotationAccordionButtons = canvasElement.querySelectorAll('.cove-accordion__button')
-    const annotationAccordionButton = Array.from(annotationAccordionButtons).find(
-      btn => btn.textContent?.includes('New annotation') || btn.textContent?.includes('Select Column')
-    ) as HTMLElement
-
-    expect(annotationAccordionButton).toBeTruthy()
-
-    // Open the annotation's sub-accordion
-    await userEvent.click(annotationAccordionButton)
-
-    // Find the annotation text textarea
-    const annotationTextarea = Array.from(canvasElement.querySelectorAll('textarea')).find(textarea => {
-      const label = textarea.closest('label')
-      return label?.textContent?.includes('Annotation Text')
-    }) as HTMLTextAreaElement
-
-    expect(annotationTextarea).toBeTruthy()
-
-    await performAndAssert(
-      'Annotation Text → Change to "Important Note"',
-      () => {
-        // Check the actual visualization - the annotation div should contain the text
-        const annotationDivs = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
-        const texts = Array.from(annotationDivs).map(div => div.innerHTML)
-        return {
-          annotationTexts: texts.join('|')
-        }
-      },
-      async () => {
-        // Select all text and replace it
-        await userEvent.click(annotationTextarea)
-        await userEvent.keyboard('{Control>}a{/Control}')
-        await userEvent.type(annotationTextarea, 'Important Note')
-        await userEvent.tab() // Trigger blur to commit the change
-      },
-      (before, after) => {
-        // After changing the text, the annotation should display the new text
-        return after.annotationTexts.includes('Important Note')
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Delete Annotation
-    // ==========================================================================
-    const deleteButton = Array.from(canvasElement.querySelectorAll('button')).find(btn => {
-      return btn.textContent?.includes('Delete Annotation')
-    }) as HTMLButtonElement
-
-    expect(deleteButton).toBeTruthy()
-
-    await performAndAssert(
-      'Delete Annotation → Remove annotation from map',
-      () => {
-        // Check the visualization - count the annotations
-        const annotationDivs = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
-        return {
-          annotationCount: annotationDivs.length
-        }
-      },
-      async () => {
-        await userEvent.click(deleteButton)
-      },
-      (before, after) => {
-        // After deleting, annotation count should decrease
-        return after.annotationCount < before.annotationCount
-      }
-    )
-  }
-}
-
-// ============================================================================
-// SMALL MULTIPLES SECTION TESTS
-// ============================================================================
-
-export const SmallMultiplesSectionTests: Story = {
-  name: 'Small Multiples Section Tests',
-  parameters: {},
-  args: {
-    config: {
-      ...wastewaterMapSmallMultiplesConfig,
-      general: {
-        ...wastewaterMapSmallMultiplesConfig.general,
-        title: 'Map Small Multiples Test'
-      },
-      smallMultiples: {
-        ...wastewaterMapSmallMultiplesConfig.smallMultiples,
-        mode: ''
-      }
-    },
-    isEditor: true
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    await openAccordion(canvas, 'Small Multiples')
-
-    // ============================================================================
-    // TEST: Enable Small Multiples Mode
-    // Verifies: Map visualization changes from single map to multiple maps
-    // ============================================================================
-
-    const getMapTileCount = () => {
-      const smallMultiplesContainer = canvasElement.querySelector('.small-multiples-container')
-      const tiles = canvasElement.querySelectorAll('.small-multiples-grid > .small-multiple-tile')
-
-      return {
-        hasSmallMultiplesContainer: !!smallMultiplesContainer,
-        tileCount: tiles.length
-      }
-    }
-
-    const tileByColumnSelect = canvas.getByLabelText(/tile by column/i) as HTMLSelectElement
-
-    await performAndAssert(
-      'Enable Small Multiples Mode - Map splits into multiple tiles',
-      getMapTileCount,
-      async () => {
-        await userEvent.selectOptions(tileByColumnSelect, 'pathogen')
-      },
-      (before, after) => {
-        return before.tileCount === 0 && after.tileCount === 3
-      }
-    )
-
-    // ============================================================================
-    // TEST: Tiles Per Row Desktop
-    // Verifies: Grid layout changes from 3 tiles per row to 2 tiles per row
-    // ============================================================================
-
-    const getTilesInFirstRow = () => {
-      const tiles = Array.from(canvasElement.querySelectorAll('.small-multiples-grid > .small-multiple-tile'))
-      if (tiles.length === 0) return { tilesInFirstRow: 0 }
-
-      const firstTileTop = tiles[0].getBoundingClientRect().top
-      const tilesInFirstRow = tiles.filter(tile => {
-        const tileTop = tile.getBoundingClientRect().top
-        return Math.abs(tileTop - firstTileTop) < 5
-      }).length
-
-      return { tilesInFirstRow }
-    }
-
-    const tilesPerRowInput = canvas.getByLabelText(/tiles per row \(desktop\)/i) as HTMLInputElement
-
-    await performAndAssert(
-      'Tiles Per Row Desktop - Layout changes from 3 to 2 tiles per row',
-      getTilesInFirstRow,
-      async () => {
-        await userEvent.clear(tilesPerRowInput)
-        await userEvent.type(tilesPerRowInput, '2')
-        tilesPerRowInput.blur()
-      },
-      (before, after) => {
-        return before.tilesInFirstRow === 3 && after.tilesInFirstRow === 2
-      }
-    )
-
-    // ============================================================================
-    // TEST: Tile Order
-    // Verifies: Changing tile order from custom to descending reverses tiles
-    // ============================================================================
-
-    const getTileTitles = () => {
-      const tiles = canvasElement.querySelectorAll('.small-multiples-grid > .small-multiple-tile')
-      const titles = Array.from(tiles).map(tile => {
-        const titleElement = tile.querySelector('.tile-title')
-        return titleElement?.textContent?.trim() || ''
-      })
-      return { titles }
-    }
-
-    const tileOrderSelect = canvas.getByLabelText(/tile order/i) as HTMLSelectElement
-
-    await performAndAssert(
-      'Tile Order - Descending sorts tiles alphabetically descending',
-      getTileTitles,
-      async () => {
-        await userEvent.selectOptions(tileOrderSelect, 'desc')
-      },
-      (before, after) => {
-        return before.titles[0] === 'Influenza AAA' && after.titles[0] === 'RSV' && after.titles[1] === 'Influenza AAA'
-      }
-    )
-
-    // ============================================================================
-    // TEST: Custom Tile Title
-    // Verifies: Custom tile title appears in visualization
-    // ============================================================================
-
-    const covid19TitleInput = canvasElement.querySelector('input[placeholder="COVID-19"]') as HTMLInputElement
-
-    await performAndAssert(
-      'Custom Tile Title - Changes tile display name',
-      getTileTitles,
-      async () => {
-        if (covid19TitleInput) {
-          await userEvent.clear(covid19TitleInput)
-          await userEvent.type(covid19TitleInput, 'Custom COVID Title')
-          covid19TitleInput.blur()
-        }
-      },
-      (before, after) => {
-        return after.titles.includes('Custom COVID Title') && !before.titles.includes('Custom COVID Title')
-      }
-    )
-  }
-}
-
-export const WorldDataMapZoomControlsTest: Story = {
-  args: {
-    ...DEFAULT_ARGS
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-    await openAccordion(canvas, 'Type')
-
-    const getZoomControlsState = () => {
-      const zoomControls = canvasElement.querySelector('.zoom-controls')
-      const zoomInButton = canvasElement.querySelector('button[aria-label="Zoom In"]')
-      const zoomOutButton = canvasElement.querySelector('button[aria-label="Zoom Out"]')
-      const mapContainer = canvasElement.querySelector('.map-container')
-
-      return {
-        hasZoomControls: Boolean(zoomControls),
-        hasZoomInButton: Boolean(zoomInButton),
-        hasZoomOutButton: Boolean(zoomOutButton),
-        mapClasses: mapContainer ? Array.from(mapContainer.classList) : []
-      }
-    }
-
-    const worldButton = Array.from(canvasElement.querySelectorAll('.geo-buttons button')).find(button =>
-      button.textContent?.trim().toLowerCase().includes('world')
-    ) as HTMLButtonElement
-    expect(worldButton).toBeTruthy()
-
-    await performAndAssert(
-      'World Data Map → Switch geo type to world',
-      getZoomControlsState,
-      async () => {
-        await userEvent.click(worldButton)
-      },
-      (before, after) => !before.mapClasses.includes('world') && after.mapClasses.includes('world')
-    )
-
-    const mapTypeSelect = canvas.getByLabelText(/Map Type/i) as HTMLSelectElement
-    await performAndAssert(
-      'World Data Map → Switch type to data',
-      getZoomControlsState,
-      async () => {
-        await userEvent.selectOptions(mapTypeSelect, 'data')
-      },
-      (_before, after) => after.mapClasses.includes('world')
-    )
-
-    const allowMapZoomingCheckbox = canvas.getByLabelText(/Allow Map Zooming/i) as HTMLInputElement
-    expect(allowMapZoomingCheckbox).toBeTruthy()
-
-    await performAndAssert(
-      'World Data Map → Enable map zooming',
-      getZoomControlsState,
-      async () => {
-        await userEvent.click(allowMapZoomingCheckbox)
-      },
-      (before, after) =>
-        !before.hasZoomControls && after.hasZoomControls && after.hasZoomInButton && after.hasZoomOutButton
-    )
-  }
-}
-
-// ==========================================================================
-// MULTI-COUNTRY MAP TESTS
-// ==========================================================================
-
-export const MultiCountryWorldMapTests: Story = {
-  args: {
-    ...DEFAULT_ARGS,
-    config: {
-      ...multiCountryConfig,
-      general: {
-        ...multiCountryConfig.general,
-        countriesPicked: [] // Start with no countries selected for testing
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    await waitForEditor(canvas)
-    await waitForPresence('.map-container', canvasElement)
-
-    // Ensure we're testing a world map - Type accordion should be open by default
-    await openAccordion(canvas, 'Type')
-
-    // Wait for world map to load (topology loads asynchronously)
-    // The config already starts with geoType: 'world', so we just need to wait for it to render
-    await waitForPresence('path[data-country-code]', canvasElement)
-
-    // Wait for the country selector to appear (only shows for world maps)
-    await waitForPresence('.cove-multiselect', canvasElement)
-
-    // Stay in Type accordion section - this is where multi-country controls are located
-
-    // ==========================================================================
-    // Helper functions to capture visual state
-    // ==========================================================================
-    const getCountryVisualState = () => {
-      const mapContainer = canvasElement.querySelector('.map-container')
-      const allCountryPaths = canvasElement.querySelectorAll('path[data-country-code]')
-      const visibleCountries = Array.from(allCountryPaths).filter(
-        path => !path.classList.contains('hidden') && !path.classList.contains('grayed-out')
-      )
-      const grayedCountries = Array.from(allCountryPaths).filter(path => path.classList.contains('grayed-out'))
-      const hiddenCountries = Array.from(allCountryPaths).filter(path => {
-        const hasHiddenClass = path.classList.contains('hidden')
-        const computedStyle = window.getComputedStyle(path as Element)
-        const isDisplayNone = computedStyle.display === 'none'
-        return hasHiddenClass || isDisplayNone
-      })
-
-      return {
-        totalCountries: allCountryPaths.length,
-        visibleCountries: visibleCountries.length,
-        grayedCountries: grayedCountries.length,
-        hiddenCountries: hiddenCountries.length,
-        mapClasses: mapContainer ? Array.from(mapContainer.classList) : [],
-        hasMultiCountryClass: mapContainer?.classList.contains('multi-country-selected') || false,
-        selectedCountryCodes: Array.from(
-          new Set(
-            Array.from(visibleCountries)
-              .map(path => path.getAttribute('data-country-code'))
-              .filter(Boolean)
-          )
-        )
-      }
-    }
-
-    // ==========================================================================
-    // TEST: Country Multi-Select Dropdown Interaction
-    // ==========================================================================
-    const countryMultiSelect = Array.from(canvasElement.querySelectorAll('.cove-multiselect')).find(ms => {
-      const parentLabel = ms.closest('label')
-      const labelSpan = parentLabel?.querySelector('span')
-      return labelSpan?.textContent?.includes('Countries Selector')
-    }) as HTMLElement
-    expect(countryMultiSelect).toBeTruthy()
-
-    // Get the expand button to open the dropdown
-    const expandButton = countryMultiSelect.querySelector('button[aria-label="Expand"]') as HTMLButtonElement
-    expect(expandButton).toBeTruthy()
-
-    // Test selecting first country (France)
-    await performAndAssert(
-      'Multi-Country → Select France',
-      getCountryVisualState,
-      async () => {
-        // Open the dropdown
-        await userEvent.click(expandButton)
-        // Find and click France option
-        const franceOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('France')
-        ) as HTMLElement
-        expect(franceOption).toBeTruthy()
-        await userEvent.click(franceOption)
-      },
-      (before, after) => {
-        // When countries are selected, map should show multi-country state
-        return (
-          after.hasMultiCountryClass &&
-          after.selectedCountryCodes.includes('FRA') &&
-          after.visibleCountries < before.totalCountries // Some countries should be filtered
-        )
-      }
-    )
-
-    // Test selecting second country (Germany)
-    await performAndAssert(
-      'Multi-Country → Add Germany to selection',
-      getCountryVisualState,
-      async () => {
-        // Expand dropdown again
-        const expandBtn = countryMultiSelect.querySelector('button[aria-label="Expand"]') as HTMLButtonElement
-        await userEvent.click(expandBtn)
-        // Find and click Germany option
-        const germanyOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Germany')
-        ) as HTMLElement
-        expect(germanyOption).toBeTruthy()
-        await userEvent.click(germanyOption)
-      },
-      (before, after) => {
-        // Both France and Germany should be selected
-        return (
-          after.selectedCountryCodes.includes('FRA') &&
-          after.selectedCountryCodes.includes('DEU') &&
-          after.selectedCountryCodes.length === 2
-        )
-      }
-    )
-
-    // Test adding a third country (Italy)
-    await performAndAssert(
-      'Multi-Country → Add Italy to selection',
-      getCountryVisualState,
-      async () => {
-        // Expand dropdown again
-        const expandBtn = countryMultiSelect.querySelector('button[aria-label="Expand"]') as HTMLButtonElement
-        await userEvent.click(expandBtn)
-        // Find and click Italy option
-        const italyOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Italy')
-        ) as HTMLElement
-        expect(italyOption).toBeTruthy()
-        await userEvent.click(italyOption)
-      },
-      (before, after) => {
-        // All three countries should be selected
-        return (
-          after.selectedCountryCodes.includes('FRA') &&
-          after.selectedCountryCodes.includes('DEU') &&
-          after.selectedCountryCodes.includes('ITA') &&
-          after.selectedCountryCodes.length === 3
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Hide Unselected Countries Toggle (Grey-out vs Hide behavior)
-    // ==========================================================================
-    // Ensure map has fully rendered with country paths before testing toggle
-    await waitForPresence('path[data-country-code]', canvasElement)
-
-    // InputToggle renders as a div with a hidden checkbox
-    const hideUnselectedToggle = Array.from(
-      canvasElement.querySelectorAll('input[name*="hideUnselectedCountries"]')
-    ).find(input => {
-      const label = input.closest('label') || input.parentElement?.querySelector('label')
-      return label?.textContent?.includes('Hide Unselected Countries')
-    }) as HTMLInputElement
-    expect(hideUnselectedToggle).toBeTruthy()
-
-    // By default (unchecked), unselected countries should be grayed out
-    // First, ensure the toggle is unchecked (hideUnselectedCountries = false, so countries are grayed)
-    if (hideUnselectedToggle.checked) {
-      await userEvent.click(hideUnselectedToggle)
-      await new Promise(resolve => setTimeout(resolve, 100))
-    }
-
-    const beforeState = getCountryVisualState()
-
-    // Now check it (should hide unselected countries)
-    await userEvent.click(hideUnselectedToggle)
-    await new Promise(resolve => setTimeout(resolve, 100)) // Give time for re-render
-
-    const afterState = getCountryVisualState()
-
-    const testResult =
-      afterState.hiddenCountries > beforeState.hiddenCountries &&
-      afterState.grayedCountries === 0 && // No grayed countries when hiding
-      afterState.selectedCountryCodes.length === 3 // Only our 3 selected countries (by unique ISO codes)
-
-    expect(testResult).toBe(true)
-
-    // Test unchecking "Hide Unselected Countries" again (should grey-out unselected countries)
-    await performAndAssert(
-      'Hide Unselected Countries → Grey-out unselected countries',
-      getCountryVisualState,
-      async () => {
-        await userEvent.click(hideUnselectedToggle)
-      },
-      (before, after) => {
-        // When not hiding (default), unselected countries should be grayed out
-        return (
-          after.grayedCountries > before.grayedCountries &&
-          after.hiddenCountries === 0 && // No hidden countries when showing grayed
-          after.selectedCountryCodes.length === 3 // Our 3 selected countries remain visible (by unique ISO codes)
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Map Centering and Bounds Changes
-    // ==========================================================================
-    await performAndAssert(
-      'Multi-Country Selection → Map centers on selected countries',
-      getCountryVisualState,
-      async () => {
-        // Clear selection and select different countries (Japan, Australia) to test centering
-        // Click expand button
-        const expandBtn = countryMultiSelect.querySelector('button[aria-label="Expand"]') as HTMLButtonElement
-        await userEvent.click(expandBtn)
-
-        // Clear existing selections first by clicking remove buttons
-        const removeButtons = countryMultiSelect.querySelectorAll('button[aria-label="Remove"]')
-        for (const button of Array.from(removeButtons)) {
-          await userEvent.click(button as HTMLButtonElement)
-        }
-
-        // Select Japan
-        await userEvent.click(expandBtn) // Reopen dropdown
-        const japanOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Japan')
-        ) as HTMLElement
-        expect(japanOption).toBeTruthy()
-        await userEvent.click(japanOption)
-
-        // Select Australia
-        await userEvent.click(expandBtn) // Reopen dropdown
-        const australiaOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Australia')
-        ) as HTMLElement
-        expect(australiaOption).toBeTruthy()
-        await userEvent.click(australiaOption)
-
-        // Wait for map to re-render with new selection
-        await new Promise(resolve => setTimeout(resolve, 300))
-      },
-      (before, after) => {
-        // Verify that the selected countries changed (Japan and Australia instead of France, Germany, Italy)
-        // The centering happens automatically via useCountryZoom hook
-        return (
-          after.selectedCountryCodes.includes('JPN') &&
-          after.selectedCountryCodes.includes('AUS') &&
-          !after.selectedCountryCodes.includes('FRA') &&
-          after.selectedCountryCodes.length === 2
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Clear Country Selection (Reset to full world map)
-    // ==========================================================================
-    await performAndAssert(
-      'Multi-Country → Clear all selections',
-      getCountryVisualState,
-      async () => {
-        // Remove all selected countries using the remove buttons
-        const removeButtons = countryMultiSelect.querySelectorAll('button[aria-label="Remove"]')
-        for (const button of Array.from(removeButtons)) {
-          await userEvent.click(button as HTMLButtonElement)
-        }
-      },
-      (before, after) => {
-        // When all countries are cleared, should return to normal world map state
-        // Note: selectedCountryCodes will contain ALL countries since all are visible (not grayed/hidden)
-        return (
-          !after.hasMultiCountryClass &&
-          after.grayedCountries === 0 &&
-          after.hiddenCountries === 0 &&
-          after.visibleCountries === after.totalCountries // All countries visible
-        )
-      }
-    )
-
-    // ==========================================================================
-    // TEST: Country Selection with Data Integration
-    // ==========================================================================
-    await performAndAssert(
-      'Multi-Country Data → Selected countries show data values',
-      getCountryVisualState,
-      async () => {
-        // Select countries that should have data (France, Germany, Italy - these have data in the config)
-        const expandBtn = countryMultiSelect.querySelector('button[aria-label="Expand"]') as HTMLButtonElement
-
-        // Select France
-        await userEvent.click(expandBtn)
-        const franceOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('France')
-        ) as HTMLElement
-
-        expect(franceOption).toBeTruthy()
-        await userEvent.click(franceOption)
-
-        // Select Germany
-        await userEvent.click(expandBtn)
-        const germanyOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Germany')
-        ) as HTMLElement
-
-        expect(germanyOption).toBeTruthy()
-        await userEvent.click(germanyOption)
-
-        // Select Italy
-        await userEvent.click(expandBtn)
-        const italyOption = Array.from(countryMultiSelect.querySelectorAll('li[role="option"]')).find(li =>
-          li.textContent?.includes('Italy')
-        ) as HTMLElement
-
-        expect(italyOption).toBeTruthy()
-        await userEvent.click(italyOption)
-
-        // Wait for data to be applied
-        await new Promise(resolve => setTimeout(resolve, 300))
-      },
-      (before, after) => {
-        // Verify that the countries with data are correctly selected
-        // (Data rendering and legend display are separate from multi-country selection functionality)
-        return (
-          after.selectedCountryCodes.includes('FRA') &&
-          after.selectedCountryCodes.includes('DEU') &&
-          after.selectedCountryCodes.includes('ITA') &&
-          after.hasMultiCountryClass &&
-          after.selectedCountryCodes.length === 3
-        )
-      }
-    )
-  }
-}