@cdc/core 4.26.1 → 4.26.3

package/_stories/PageBRFSS.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC Behavioral Risk Factor Surveillance System (BRFSS) Prevalence Data & Data Analysis Tools page (https://www.cdc.gov/brfss/brfssprevalence/index.html)'
+        component:
+          'Stories for visualizations from the CDC Behavioral Risk Factor Surveillance System (BRFSS) Prevalence Data & Data Analysis Tools page (https://www.cdc.gov/brfss/brfssprevalence/index.html)'
       }
     }
   },
@@ -93,12 +94,16 @@ const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
 
               newDatasets[absoluteKey] = {
                 ...dataset,
-                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataFileName,
-                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataUrl
+                dataFileName:
+                  (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataFileName
+                        .replace(/^(\.\.\/)+/, '')
+                        .replace(/^\//, '')}`
+                    : (dataset as any).dataFileName,
+                dataUrl:
+                  (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                    : (dataset as any).dataUrl
               }
             }
           })
@@ -140,7 +145,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 30000 // Longer timeout for external data loading
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         const loadingDiv = canvasElement.querySelector('div')
 
         // Log current state for debugging
@@ -161,12 +166,12 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
   })
 
   await step('Verify dashboard wrapper is present', async () => {
-    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    const dashboard = canvasElement.querySelector('.type-dashboard')
     expect(dashboard).toBeInTheDocument()
   })
 
   await step('Verify at least one visualization rendered', async () => {
-    const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+    const coveModules = canvasElement.querySelectorAll('.cove-visualization')
     expect(coveModules.length).toBeGreaterThan(0)
   })
 
@@ -224,15 +229,15 @@ export const All_BRFSS_Dashboards: StoryObj = {
     }
 
     return (
-      <div className="container-fluid p-4">
-        <h1 className="mb-4">BRFSS Prevalence Data - All Dashboards</h1>
+      <div className='container-fluid p-4'>
+        <h1 className='mb-4'>BRFSS Prevalence Data - All Dashboards</h1>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Explore by Location</h2>
           <Dashboard config={locationConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Explore by Topic</h2>
           <Dashboard config={topicConfig} />
         </section>
@@ -266,7 +271,7 @@ export const All_BRFSS_Dashboards: StoryObj = {
         const timeout = 40000
 
         const checkDashboards = () => {
-          const dashboards = canvasElement.querySelectorAll('.cove-dashboard')
+          const dashboards = canvasElement.querySelectorAll('.type-dashboard')
           if (dashboards.length >= 2) {
             resolve()
           } else if (Date.now() - startTime > timeout) {
@@ -280,7 +285,7 @@ export const All_BRFSS_Dashboards: StoryObj = {
     })
 
     await step('Verify both dashboards are present', async () => {
-      const dashboards = canvasElement.querySelectorAll('.cove-dashboard')
+      const dashboards = canvasElement.querySelectorAll('.type-dashboard')
       expect(dashboards.length).toBe(2)
     })
 

package/_stories/PageCancerRegistries.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC National Program of Cancer Registries (NPCR) Contact page (https://www.cdc.gov/national-program-cancer-registries/contact/index.html)'
+        component:
+          'Stories for visualizations from the CDC National Program of Cancer Registries (NPCR) Contact page (https://www.cdc.gov/national-program-cancer-registries/contact/index.html)'
       }
     }
   },
@@ -92,12 +93,16 @@ const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
 
               newDatasets[absoluteKey] = {
                 ...dataset,
-                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataFileName,
-                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataUrl
+                dataFileName:
+                  (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataFileName
+                        .replace(/^(\.\.\/)+/, '')
+                        .replace(/^\//, '')}`
+                    : (dataset as any).dataFileName,
+                dataUrl:
+                  (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                    : (dataset as any).dataUrl
               }
             }
           })
@@ -139,7 +144,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 20000
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         const loadingDiv = canvasElement.querySelector('div')
 
         // Log current state for debugging
@@ -160,20 +165,15 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
   })
 
   await step('Verify dashboard wrapper is present', async () => {
-    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    const dashboard = canvasElement.querySelector('.type-dashboard')
     expect(dashboard).toBeInTheDocument()
   })
 
   await step('Verify at least one visualization rendered', async () => {
-    const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+    const coveModules = canvasElement.querySelectorAll('.cove-visualization')
     expect(coveModules.length).toBeGreaterThan(0)
   })
 
-  await step('Verify map visualization is present', async () => {
-    const mapElement = canvasElement.querySelector('svg')
-    expect(mapElement).toBeInTheDocument()
-  })
-
   console.log(` ${storyName} dashboard rendered successfully`)
 }
 

package/_stories/PageEasternEquineEncephalitis.stories.tsx

@@ -37,22 +37,36 @@ const CONFIG_URLS = {
 type MapStory = StoryObj<typeof CdcMap>
 type DashboardStory = StoryObj<typeof Dashboard>
 
-// Helper function to test map rendering
+// Helper function to test map rendering (supports both SVG and canvas-based maps)
 const testMapRendering = async (canvasElement: HTMLElement, storyName: string) => {
-  const canvas = within(canvasElement)
-
   await step('Wait for map to render', async () => {
-    const mapElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
-    expect(mapElement).toBeInTheDocument()
+    await new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 15000
+
+      const checkMap = () => {
+        const svgMap = canvasElement.querySelector('svg[role="img"]')
+        const canvasMap = canvasElement.querySelector('canvas')
+        if (svgMap || canvasMap) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: No map element (svg or canvas) found after ${timeout}ms`))
+        } else {
+          setTimeout(checkMap, 100)
+        }
+      }
+      checkMap()
+    })
   })
 
-  await step('Verify SVG element is present', async () => {
-    const svgElement = canvasElement.querySelector('svg')
-    expect(svgElement).toBeInTheDocument()
+  await step('Verify map visualization is present', async () => {
+    const svgMap = canvasElement.querySelector('svg[role="img"]')
+    const canvasMap = canvasElement.querySelector('canvas')
+    expect(svgMap || canvasMap).toBeTruthy()
   })
 
   await step('Verify COVE module wrapper is present', async () => {
-    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    const coveModule = canvasElement.querySelector('.cove-visualization')
     expect(coveModule).toBeInTheDocument()
   })
 
@@ -67,7 +81,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 15000
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         if (dashboardElement) {
           resolve()
         } else if (Date.now() - startTime > timeout) {
@@ -81,7 +95,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
   })
 
   await step('Verify dashboard wrapper is present', async () => {
-    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    const dashboard = canvasElement.querySelector('.type-dashboard')
     expect(dashboard).toBeInTheDocument()
   })
 
@@ -144,25 +158,25 @@ export const Connecticut_2022: MapStory = {
  */
 export const All_EEE_Visualizations: StoryObj = {
   render: () => (
-    <div className="container-fluid p-4">
-      <h1 className="mb-4">Eastern Equine Encephalitis - Historic Data</h1>
+    <div className='container-fluid p-4'>
+      <h1 className='mb-4'>Eastern Equine Encephalitis - Historic Data</h1>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Cumulative Data for 2003–2024</h2>
         <Dashboard configUrl={CONFIG_URLS.cumulativeData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Explore Human Data for 2003–2024</h2>
         <Dashboard configUrl={CONFIG_URLS.exploreHumanData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Explore County Level Data for 2003–2024</h2>
         <CdcMap configUrl={CONFIG_URLS.exploreCountyData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Connecticut 2022 Data</h2>
         <CdcMap configUrl={CONFIG_URLS.ct2022} />
       </section>
@@ -179,7 +193,7 @@ export const All_EEE_Visualizations: StoryObj = {
         const timeout = 30000
 
         const checkModules = () => {
-          const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+          const coveModules = canvasElement.querySelectorAll('.cove-visualization')
           if (coveModules.length >= 4) {
             resolve()
           } else if (Date.now() - startTime > timeout) {
@@ -193,7 +207,7 @@ export const All_EEE_Visualizations: StoryObj = {
     })
 
     await step('Verify at least 4 visualizations are present', async () => {
-      const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+      const coveModules = canvasElement.querySelectorAll('.cove-visualization')
       expect(coveModules.length).toBeGreaterThanOrEqual(4)
     })
 

package/_stories/PageExcessiveAlcoholUse.stories.tsx

@@ -5,171 +5,176 @@ import { useEffect, useState } from 'react'
 
 // Fallback step function for test descriptions
 const step = async (description: string, fn: () => Promise<void> | void) => {
-    console.log(`▶ ${description}`)
-    await fn()
-    console.log(`✓ ${description}`)
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
 }
 
 const meta: Meta = {
-    title: 'Regression Tests/Pages/Excessive Alcohol Use',
-    parameters: {
-        layout: 'fullscreen',
-        docs: {
-            description: {
-                component: 'Stories for visualizations from the CDC Excessive Alcohol Use page (https://www.cdc.gov/alcohol/fact-sheets/states/excessive-alcohol-use-united-states.html)'
-            }
-        }
-    },
-    tags: ['autodocs']
+  title: 'Regression Tests/Pages/Excessive Alcohol Use',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Stories for visualizations from the CDC Excessive Alcohol Use page (https://www.cdc.gov/alcohol/fact-sheets/states/excessive-alcohol-use-united-states.html)'
+      }
+    }
+  },
+  tags: ['autodocs']
 }
 
 export default meta
 
 // Config URL from the excessive alcohol use page
 const CONFIG_URLS = {
-    excessiveAlcoholUse: 'https://www.cdc.gov/alcohol/fact-sheets/states/alcohol-data-for-50-states.json'
+  excessiveAlcoholUse: 'https://www.cdc.gov/alcohol/fact-sheets/states/alcohol-data-for-50-states.json'
 }
 
 // Helper to fetch config and update data URLs to use absolute cdc.gov paths
 const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
-    const [config, setConfig] = useState(null)
-
-    useEffect(() => {
-        fetch(configUrl)
-            .then(res => res.json())
-            .then(data => {
-                // Convert relative data URLs to absolute cdc.gov URLs
-                if (data.dataUrl) {
-                    // Handle different relative path formats (../../path or /path)
-                    const dataUrl = data.dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
-                    data.dataUrl = `https://www.cdc.gov/${dataUrl}`
-                }
-                if (data.dataFileName) {
-                    const dataFileName = data.dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
-                    data.dataFileName = `https://www.cdc.gov/${dataFileName}`
-                }
+  const [config, setConfig] = useState(null)
+
+  useEffect(() => {
+    fetch(configUrl)
+      .then(res => res.json())
+      .then(data => {
+        // Convert relative data URLs to absolute cdc.gov URLs
+        if (data.dataUrl) {
+          // Handle different relative path formats (../../path or /path)
+          const dataUrl = data.dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+          data.dataUrl = `https://www.cdc.gov/${dataUrl}`
+        }
+        if (data.dataFileName) {
+          const dataFileName = data.dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+          data.dataFileName = `https://www.cdc.gov/${dataFileName}`
+        }
 
-                // For dashboard configs with multiDashboards, convert dataKey references in visualizations
-                if (data.multiDashboards) {
-                    data.multiDashboards.forEach((dashboard: any) => {
-                        if (dashboard.visualizations) {
-                            Object.values(dashboard.visualizations).forEach((viz: any) => {
-                                // Only convert dataKey if it's a URL path (starts with / or ../)
-                                if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
-                                    const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
-                                    viz.dataKey = `https://www.cdc.gov/${dataKey}`
-                                }
-                            })
-                        }
-                    })
+        // For dashboard configs with multiDashboards, convert dataKey references in visualizations
+        if (data.multiDashboards) {
+          data.multiDashboards.forEach((dashboard: any) => {
+            if (dashboard.visualizations) {
+              Object.values(dashboard.visualizations).forEach((viz: any) => {
+                // Only convert dataKey if it's a URL path (starts with / or ../)
+                if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+                  const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                  viz.dataKey = `https://www.cdc.gov/${dataKey}`
                 }
+              })
+            }
+          })
+        }
 
-                // For dashboard configs, convert dataKey references in visualizations
-                if (data.visualizations) {
-                    Object.values(data.visualizations).forEach((viz: any) => {
-                        // Only convert dataKey if it's a URL path (starts with / or ../)
-                        if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
-                            const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
-                            viz.dataKey = `https://www.cdc.gov/${dataKey}`
-                        }
-                    })
-                }
+        // For dashboard configs, convert dataKey references in visualizations
+        if (data.visualizations) {
+          Object.values(data.visualizations).forEach((viz: any) => {
+            // Only convert dataKey if it's a URL path (starts with / or ../)
+            if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+              const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+              viz.dataKey = `https://www.cdc.gov/${dataKey}`
+            }
+          })
+        }
 
-                // For dashboard configs, convert datasets only if they reference external files
-                if (data.datasets) {
-                    const newDatasets = {}
-                    Object.entries(data.datasets).forEach(([key, dataset]: [string, any]) => {
-                        // Check if dataset has embedded data
-                        const hasEmbeddedData = (dataset as any).data && Array.isArray((dataset as any).data)
-
-                        // If data is embedded, keep the original key
-                        if (hasEmbeddedData) {
-                            newDatasets[key] = dataset
-                        } else {
-                            // Otherwise, convert paths to absolute URLs (but keep absolute URLs as-is)
-                            const newKey = key.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
-                            const absoluteKey = key.startsWith('http') ? key : `https://www.cdc.gov/${newKey}`
-
-                            newDatasets[absoluteKey] = {
-                                ...dataset,
-                                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
-                                    ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                                    : (dataset as any).dataFileName,
-                                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
-                                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                                    : (dataset as any).dataUrl
-                            }
-                        }
-                    })
-                    data.datasets = newDatasets
-                }
+        // For dashboard configs, convert datasets only if they reference external files
+        if (data.datasets) {
+          const newDatasets = {}
+          Object.entries(data.datasets).forEach(([key, dataset]: [string, any]) => {
+            // Check if dataset has embedded data
+            const hasEmbeddedData = (dataset as any).data && Array.isArray((dataset as any).data)
+
+            // If data is embedded, keep the original key
+            if (hasEmbeddedData) {
+              newDatasets[key] = dataset
+            } else {
+              // Otherwise, convert paths to absolute URLs (but keep absolute URLs as-is)
+              const newKey = key.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+              const absoluteKey = key.startsWith('http') ? key : `https://www.cdc.gov/${newKey}`
+
+              newDatasets[absoluteKey] = {
+                ...dataset,
+                dataFileName:
+                  (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataFileName
+                        .replace(/^(\.\.\/)+/, '')
+                        .replace(/^\//, '')}`
+                    : (dataset as any).dataFileName,
+                dataUrl:
+                  (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                    : (dataset as any).dataUrl
+              }
+            }
+          })
+          data.datasets = newDatasets
+        }
 
-                // Set activeDashboard to 0 if it's null and multiDashboards exist
-                if (data.multiDashboards && data.multiDashboards.length > 0 && data.activeDashboard === null) {
-                    data.activeDashboard = 0
-                }
+        // Set activeDashboard to 0 if it's null and multiDashboards exist
+        if (data.multiDashboards && data.multiDashboards.length > 0 && data.activeDashboard === null) {
+          data.activeDashboard = 0
+        }
+
+        // Log config info for debugging
+        console.log('✓ Config loaded:', {
+          type: data.type,
+          hasMultiDashboards: !!data.multiDashboards,
+          dashboardCount: data.multiDashboards?.length || 0,
+          activeDashboard: data.activeDashboard,
+          datasetCount: Object.keys(data.datasets || {}).length,
+          dashboardLabels: data.multiDashboards?.map((d: any) => d.label)
+        })
 
-                // Log config info for debugging
-                console.log('✓ Config loaded:', {
-                    type: data.type,
-                    hasMultiDashboards: !!data.multiDashboards,
-                    dashboardCount: data.multiDashboards?.length || 0,
-                    activeDashboard: data.activeDashboard,
-                    datasetCount: Object.keys(data.datasets || {}).length,
-                    dashboardLabels: data.multiDashboards?.map((d: any) => d.label)
-                })
-
-                setConfig(data)
-            })
-            .catch(err => {
-                console.error('Failed to fetch config:', configUrl, err)
-            })
-    }, [configUrl])
-
-    return config
+        setConfig(data)
+      })
+      .catch(err => {
+        console.error('Failed to fetch config:', configUrl, err)
+      })
+  }, [configUrl])
+
+  return config
 }
 
 type DashboardStory = StoryObj<typeof Dashboard>
 
 // Helper function to test dashboard rendering
 const testDashboardRendering = async (canvasElement: HTMLElement, storyName: string) => {
-    await step('Wait for dashboard to render', async () => {
-        await new Promise<void>((resolve, reject) => {
-            const startTime = Date.now()
-            const timeout = 30000 // Longer timeout for external data loading
-
-            const checkDashboard = () => {
-                const dashboardElement = canvasElement.querySelector('.cove-dashboard')
-                const loadingDiv = canvasElement.querySelector('div')
-
-                // Log current state for debugging
-                if (!dashboardElement && loadingDiv?.textContent?.includes('Loading')) {
-                    console.log('Still loading config...')
-                }
+  await step('Wait for dashboard to render', async () => {
+    await new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 30000 // Longer timeout for external data loading
+
+      const checkDashboard = () => {
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
+        const loadingDiv = canvasElement.querySelector('div')
+
+        // Log current state for debugging
+        if (!dashboardElement && loadingDiv?.textContent?.includes('Loading')) {
+          console.log('Still loading config...')
+        }
 
-                if (dashboardElement) {
-                    resolve()
-                } else if (Date.now() - startTime > timeout) {
-                    reject(new Error(`Timeout: Dashboard element not found after ${timeout}ms`))
-                } else {
-                    setTimeout(checkDashboard, 100)
-                }
-            }
-            checkDashboard()
-        })
+        if (dashboardElement) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: Dashboard element not found after ${timeout}ms`))
+        } else {
+          setTimeout(checkDashboard, 100)
+        }
+      }
+      checkDashboard()
     })
+  })
 
-    await step('Verify dashboard wrapper is present', async () => {
-        const dashboard = canvasElement.querySelector('.cove-dashboard')
-        expect(dashboard).toBeInTheDocument()
-    })
+  await step('Verify dashboard wrapper is present', async () => {
+    const dashboard = canvasElement.querySelector('.type-dashboard')
+    expect(dashboard).toBeInTheDocument()
+  })
 
-    await step('Verify at least one visualization rendered', async () => {
-        const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
-        expect(coveModules.length).toBeGreaterThan(0)
-    })
+  await step('Verify at least one visualization rendered', async () => {
+    const coveModules = canvasElement.querySelectorAll('.cove-visualization')
+    expect(coveModules.length).toBeGreaterThan(0)
+  })
 
-    console.log(`✓ ${storyName} dashboard rendered successfully`)
+  console.log(`✓ ${storyName} dashboard rendered successfully`)
 }
 
 /**
@@ -185,12 +190,12 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
  * - State-specific alcohol consumption trends
  */
 export const Excessive_Alcohol_Use_Dashboard: DashboardStory = {
-    render: () => {
-        const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.excessiveAlcoholUse)
-        if (!config) return <div>Loading...</div>
-        return <Dashboard config={config} />
-    },
-    play: async ({ canvasElement }) => {
-        await testDashboardRendering(canvasElement, 'Excessive Alcohol Use Dashboard')
-    }
+  render: () => {
+    const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.excessiveAlcoholUse)
+    if (!config) return <div>Loading...</div>
+    return <Dashboard config={config} />
+  },
+  play: async ({ canvasElement }) => {
+    await testDashboardRendering(canvasElement, 'Excessive Alcohol Use Dashboard')
+  }
 }

package/_stories/PageMaternalMortality.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC Pregnancy Mortality Surveillance System (PMSS) page (https://www.cdc.gov/maternal-mortality/php/pregnancy-mortality-surveillance-data/index.html)'
+        component:
+          'Stories for visualizations from the CDC Pregnancy Mortality Surveillance System (PMSS) page (https://www.cdc.gov/maternal-mortality/php/pregnancy-mortality-surveillance-data/index.html)'
       }
     }
   },
@@ -140,7 +141,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 20000
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         const loadingDiv = canvasElement.querySelector('div')
 
         // Log current state for debugging
@@ -161,12 +162,12 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
   })
 
   await step('Verify dashboard wrapper is present', async () => {
-    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    const dashboard = canvasElement.querySelector('.type-dashboard')
     expect(dashboard).toBeInTheDocument()
   })
 
   await step('Verify at least one visualization rendered', async () => {
-    const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+    const coveModules = canvasElement.querySelectorAll('.cove-visualization')
     expect(coveModules.length).toBeGreaterThan(0)
   })