@cdc/core 4.26.1 → 4.26.3

package/_stories/PageOralHealth.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC Oral Health Data page (https://www.cdc.gov/oral-health-data-systems/oral_health_data/oral-health-dashboard.html)'
+        component:
+          'Stories for visualizations from the CDC Oral Health Data page (https://www.cdc.gov/oral-health-data-systems/oral_health_data/oral-health-dashboard.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 = 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
@@ -160,12 +165,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)
   })
 

package/_stories/PageRespiratory.stories.tsx

@@ -127,7 +127,7 @@ const testMapRendering = async (canvasElement: HTMLElement, storyName: string) =
   })
 
   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()
   })
 
@@ -154,7 +154,7 @@ const testChartRendering = async (canvasElement: HTMLElement, storyName: string)
   })
 
   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()
   })
 
@@ -304,7 +304,7 @@ export const All_Visualizations: StoryObj = {
         const timeout = 20000
 
         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) {
@@ -323,7 +323,7 @@ export const All_Visualizations: StoryObj = {
     })
 
     await step('Verify exactly 4 COVE modules are present', async () => {
-      const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+      const coveModules = canvasElement.querySelectorAll('.cove-visualization')
       expect(coveModules.length).toBe(4)
     })
 

package/_stories/PageSmokingTobacco.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC Global Tobacco Surveillance System (GTSS) Data Explorer page (https://www.cdc.gov/tobacco/global/gtss/data-explorer/index.html)'
+        component:
+          'Stories for visualizations from the CDC Global Tobacco Surveillance System (GTSS) Data Explorer page (https://www.cdc.gov/tobacco/global/gtss/data-explorer/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 = 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
@@ -160,12 +165,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)
   })
 

package/_stories/PageStateDiabetesProfiles.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC State Diabetes Profiles page (https://www.cdc.gov/diabetes-state-local/php/state-profiles/index.html)'
+        component:
+          'Stories for visualizations from the CDC State Diabetes Profiles page (https://www.cdc.gov/diabetes-state-local/php/state-profiles/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 = 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
@@ -160,12 +165,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)
   })
 

package/_stories/PageWastewater.stories.tsx

@@ -115,22 +115,36 @@ type MapStory = StoryObj<typeof CdcMap>
 type ChartStory = StoryObj<typeof Chart>
 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()
   })
 
@@ -152,7 +166,7 @@ const testChartRendering = async (canvasElement: HTMLElement, storyName: string)
   })
 
   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()
   })
 
@@ -167,7 +181,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) {
@@ -181,7 +195,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()
   })
 
@@ -289,14 +303,14 @@ export const COVID_Time_Period_Map: MapStory = {
  *
  * COVID-19 wastewater data visualization by state.
  */
-export const COVID_State_Level: ChartStory = {
+export const COVID_State_Level: MapStory = {
   render: () => {
     const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.covidStateLevel)
     if (!config) return <div>Loading...</div>
-    return <Chart config={config} />
+    return <CdcMap config={config} />
   },
   play: async ({ canvasElement }) => {
-    await testChartRendering(canvasElement, 'COVID State Level')
+    await testMapRendering(canvasElement, 'COVID State Level')
   }
 }
 
@@ -325,10 +339,10 @@ export const COVID_State_Level_Rest: ChartStory = {
   render: () => {
     const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.covidStateLevelRest)
     if (!config) return <div>Loading...</div>
-    return <Chart config={config} />
+    return <Dashboard config={config} />
   },
   play: async ({ canvasElement }) => {
-    await testChartRendering(canvasElement, 'COVID State Level Rest')
+    await testDashboardRendering(canvasElement, 'COVID State Level Rest')
   }
 }
 
@@ -365,50 +379,50 @@ export const All_Wastewater_Visualizations: StoryObj = {
     }
 
     return (
-      <div className="container-fluid p-4">
-        <h1 className="mb-4">NWSS - All Wastewater Visualizations</h1>
+      <div className='container-fluid p-4'>
+        <h1 className='mb-4'>NWSS - All Wastewater Visualizations</h1>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>NWSS Home Page</h2>
           <Dashboard config={homePageConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Measles - Summary Modules</h2>
           <Dashboard config={measlesTopConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Measles - US Map</h2>
           <CdcMap config={measlesMapConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Measles - Time Period</h2>
           <Dashboard config={measlesTimePeriodConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>COVID-19 - Summary Modules</h2>
           <Dashboard config={covidTopConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>COVID-19 - State Map</h2>
           <CdcMap config={covidMapConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>COVID-19 - State Level Data</h2>
           <Chart config={covidStateLevelConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>COVID-19 - National and Regional Trends</h2>
           <Chart config={covidNationalRegionalConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>COVID-19 - State Trends</h2>
           <Chart config={covidStateRestConfig} />
         </section>
@@ -440,7 +454,7 @@ export const All_Wastewater_Visualizations: StoryObj = {
         const timeout = 30000
 
         const checkModules = () => {
-          const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+          const coveModules = canvasElement.querySelectorAll('.cove-visualization')
           if (coveModules.length >= 9) {
             resolve()
           } else if (Date.now() - startTime > timeout) {
@@ -454,7 +468,7 @@ export const All_Wastewater_Visualizations: StoryObj = {
     })
 
     await step('Verify at least 9 visualizations are present', async () => {
-      const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+      const coveModules = canvasElement.querySelectorAll('.cove-visualization')
       expect(coveModules.length).toBeGreaterThanOrEqual(9)
     })