@cdc/dashboard 4.26.1 → 4.26.3

package/src/CdcDashboardComponent.tsx

@@ -1,7 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useReducer, useContext } from 'react'
-
-// IE11
-// import 'core-js/stable'
+import React, { useState, useEffect, useCallback, useMemo, useReducer, useContext, useRef } from 'react'
 import 'whatwg-fetch'
 import ResizeObserver from 'resize-observer-polyfill'
 
@@ -42,7 +39,9 @@ import { type SharedFilter } from './types/SharedFilter'
 import { type WCMSProps } from '@cdc/core/types/WCMSProps'
 import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import pick from 'lodash/pick'
+import pickBy from 'lodash/pickBy'
 import EditorContext from '@cdc/core/contexts/EditorContext'
 import { APIFilterDropdowns } from './components/DashboardFilters'
 import { ViewPort } from '@cdc/core/types/ViewPort'
@@ -50,7 +49,7 @@ import VisualizationRow from './components/VisualizationRow'
 import { getVizConfig } from './helpers/getVizConfig'
 import { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
-import Layout from '@cdc/core/components/Layout'
+import { Responsive, VisualizationContainer } from '@cdc/core/components/Layout'
 import * as reloadURLHelpers from './helpers/reloadURLHelpers'
 import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilters'
 import { DashboardFilters } from './types/DashboardFilters'
@@ -210,9 +209,9 @@ export default function CdcDashboard({
 
           setAPILoading(true)
           await fetchRemoteData(dataUrlFinal)
-            .then(responseData => {
-              let data: any[] = responseData
-              if (responseData && dataset.dataDescription) {
+            .then(({ data: fetchedData, dataMetadata }) => {
+              let data: any[] = fetchedData
+              if (data && dataset.dataDescription) {
                 try {
                   data = transform.autoStandardize(data)
                   data = transform.developerStandardize(data, dataset.dataDescription)
@@ -222,6 +221,7 @@ export default function CdcDashboard({
                 }
               }
               newDatasets[datasetKey].data = data
+              newDatasets[datasetKey].dataMetadata = dataMetadata
               newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
               newData[datasetKey] = data
             })
@@ -239,7 +239,7 @@ export default function CdcDashboard({
       }
     }
 
-    const datasetsWithFiles = _.pickBy(newDatasets, dataset => !dataset.dataUrl)
+    const datasetsWithFiles = pickBy(newDatasets, dataset => !dataset.dataUrl)
 
     if (dataWasFetched || Object.keys(datasetsWithFiles).length) {
       const dataFiles = Object.keys(datasetsWithFiles).reduce((acc, key) => {
@@ -294,7 +294,7 @@ export default function CdcDashboard({
   }
 
   const setSharedFilter = (key, datum) => {
-    const { config: newConfig, filteredData } = _.cloneDeep(state)
+    const { config: newConfig, filteredData } = cloneDeep(state)
 
     for (let i = 0; i < newConfig.dashboard.sharedFilters.length; i++) {
       const filter = newConfig.dashboard.sharedFilters[i]
@@ -322,7 +322,7 @@ export default function CdcDashboard({
         return acc
       }, {})
       const newConfig = { ...state, data: { ...data, ...newDatasets } }
-      const newFilteredData = getFilteredData(newConfig, _.cloneDeep(filteredData))
+      const newFilteredData = getFilteredData(newConfig, cloneDeep(filteredData))
       dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
       dispatch({ type: 'SET_DATA', payload: { ...data, ...newDatasets } })
     } catch (e) {
@@ -378,14 +378,14 @@ export default function CdcDashboard({
 
   const updateChildConfig = (visualizationKey, newConfig) => {
     const config = cloneConfig(state.config)
-    const updatedConfig = _.pick(config, ['visualizations', 'multiDashboards'])
+    const updatedConfig = pick(config, ['visualizations', 'multiDashboards'])
     updatedConfig.visualizations[visualizationKey] = newConfig
     updatedConfig.visualizations[visualizationKey].formattedData = config.visualizations[visualizationKey].formattedData
     if (config.multiDashboards) {
       const activeDashboard = config.activeDashboard
       const multiDashboards = [...config.multiDashboards]
       const label = multiDashboards[activeDashboard].label
-      const toSave = { label, visualizations: updatedConfig.visualizations, ..._.pick(config, ['dashboard', 'rows']) }
+      const toSave = { label, visualizations: updatedConfig.visualizations, ...pick(config, ['dashboard', 'rows']) }
       multiDashboards[activeDashboard] = toSave
       updatedConfig.multiDashboards = multiDashboards
     }
@@ -397,17 +397,31 @@ export default function CdcDashboard({
     }
   }
 
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      let newViewport = getViewport(entry.contentRect.width)
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
-      setCurrentViewport(newViewport)
+  const outerContainerRef = useCallback(node => {
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect()
+      resizeObserverRef.current = null
     }
-  })
 
-  const outerContainerRef = useCallback(node => {
     if (node !== null) {
-      resizeObserver.observe(node)
+      resizeObserverRef.current = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          const newViewport = getViewport(entry.contentRect.width)
+          setCurrentViewport(newViewport)
+        }
+      })
+      resizeObserverRef.current.observe(node)
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+        resizeObserverRef.current = null
+      }
     }
   }, [])
 
@@ -500,7 +514,7 @@ export default function CdcDashboard({
             autoDismiss={true}
           />
         ))}
-        <Layout.Responsive isEditor={isEditor}>
+        <Responsive isEditor={isEditor}>
           <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
             <Title
               title={title}
@@ -643,16 +657,11 @@ export default function CdcDashboard({
                 })
                 .filter(Boolean)}
           </div>
-        </Layout.Responsive>
+        </Responsive>
       </>
     )
   }
 
-  const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]
-  if (isEditor) {
-    dashboardContainerClasses.push('isDashboardEditor')
-  }
-
   return (
     <GlobalContextProvider>
       <DashboardContext.Provider
@@ -669,9 +678,17 @@ export default function CdcDashboard({
         }}
       >
         <DashboardDispatchContext.Provider value={dispatch}>
-          <div className={dashboardContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
+          <VisualizationContainer
+            className={isEditor ? 'is-dashboard-editor' : undefined}
+            config={state.config}
+            currentViewport={currentViewport}
+            imageId={imageId}
+            isEditor={false}
+            ref={outerContainerRef}
+            renderResponsive={false}
+          >
             {body}
-          </div>
+          </VisualizationContainer>
           <OverlayFrame />
         </DashboardDispatchContext.Provider>
       </DashboardContext.Provider>

package/src/_stories/Dashboard.DataSetup.stories.tsx

@@ -151,14 +151,20 @@ export const MultiVizConfigurationWorkflow: Story = {
     // ========================================================================
     await sleep(500)
 
-    const dataSourceSelect = canvas.getByRole('combobox')
+    const comboboxes = canvas.getAllByRole('combobox')
+    const dataSourceSelect = comboboxes[comboboxes.length - 1]
     await user.selectOptions(dataSourceSelect, 'Demo')
     await sleep(500)
 
     // ========================================================================
     // STEP 11: Click "Vertical Values for map" button
     // ========================================================================
-    await sleep(500)
+    await waitFor(
+      () => {
+        expect(canvas.getByRole('button', { name: /vertical values for map/i })).toBeTruthy()
+      },
+      { timeout: 5000 }
+    )
 
     const verticalValuesButton = canvas.getByRole('button', { name: /vertical values for map/i })
     await user.click(verticalValuesButton)

package/src/_stories/Dashboard.Pages.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Pages/NWSS',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+export const FluA_Top_Modules: Story = {
+  name: 'FluA Top Modules',
+  args: {
+    configUrl: 'https://www.cdc.gov/nwss/rv/modules/flua/flua-top-modules.json',
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}