@cdc/dashboard 4.25.10 → 4.26.1

package/src/CdcDashboardComponent.tsx

@@ -23,7 +23,7 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
 
 import Grid from './components/Grid'
-import Header from './components/Header/Header'
+import Header from './components/Header'
 import DataTable from '@cdc/core/components/DataTable'
 import MediaControls from '@cdc/core/components/MediaControls'
 
@@ -32,7 +32,7 @@ import './scss/main.scss'
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
 import errorMessagesReducer from './store/errorMessage/errorMessage.reducer'
-import { filterData } from './helpers/filterData'
+import { filterData, isFilterAtResetState } from './helpers/filterData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
 import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
@@ -60,6 +60,7 @@ import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
 import DashboardEditors from './components/DashboardEditors'
+import { updateChildFilters } from './helpers/updateChildFilters'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -89,10 +90,27 @@ export default function CdcDashboard({
       return true
     }
 
+    // Check if any filters are at their reset state (incomplete)
+    const sharedFilters = state.config.dashboard?.sharedFilters || []
+    const hasResetFilters = sharedFilters.some(isFilterAtResetState)
+    if (hasResetFilters) {
+      return true
+    }
+
     const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
+
+    // Check if there are any visualizations that actually need data
+    // Markup-includes without dataKey don't require dashboard data
+    const visualizationsNeedingData = Object.values(state.config.visualizations).filter(viz => {
+      return viz.type !== 'markup-include' || viz.dataKey
+    })
+
+    // If no visualizations need data, don't show no-data state
+    if (!vals.length && visualizationsNeedingData.length === 0) return false
+
     if (!vals.length) return true
     return vals.some(val => val === undefined)
-  }, [state.data, state.config.visualizations, state.filtersApplied])
+  }, [state.data, state.config.visualizations, state.config.dashboard?.sharedFilters, state.filtersApplied])
 
   const vizRowColumnLocator = getVizRowColumnLocator(state.config.rows)
 
@@ -165,9 +183,13 @@ export default function CdcDashboard({
             }
 
             if (filter.apiFilter && filter.active) {
-              updatedQSParams[filter.apiFilter.valueSelector] = filter.active
-              if (filter.apiFilter.subgroupValueSelector && filter.subGrouping.active) {
-                updatedQSParams[filter.apiFilter.subgroupValueSelector] = filter.subGrouping.active
+              // Don't add filter to query params if it's set to its resetLabel
+              const isResetLabel = filter.resetLabel && filter.active === filter.resetLabel
+              if (!isResetLabel) {
+                updatedQSParams[filter.apiFilter.valueSelector] = filter.active
+                if (filter.apiFilter.subgroupValueSelector && filter.subGrouping.active) {
+                  updatedQSParams[filter.apiFilter.subgroupValueSelector] = filter.subGrouping.active
+                }
               }
             }
           }
@@ -292,8 +314,6 @@ export default function CdcDashboard({
   }
 
   const setEventData = ({ detail }, data, filteredData) => {
-    // eslint-disable-next-line no-console
-    console.log('Event: cove_set_data', detail)
     try {
       const newDatasets = Object.keys(detail).reduce((acc, key) => {
         if (data[key] !== undefined) {
@@ -321,7 +341,8 @@ export default function CdcDashboard({
   useEffect(() => {
     const { config } = state
     const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
-    const sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
+    let sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
+    sharedFiltersWithValues = updateChildFilters(sharedFiltersWithValues, state.data)
     setAPILoading(true)
     loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters)?.then(newFilters => {
       const allValuesSelected = newFilters.every(filter => {
@@ -484,10 +505,11 @@ export default function CdcDashboard({
             <Title
               title={title}
               isDashboard={true}
+              titleStyle={config.dashboard.titleStyle}
               classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]}
             />
             {/* Description */}
-            {description && <div className='subtext mb-3'>{parse(description)}</div>}
+            {description && <div className='subtext mb-4'>{parse(description)}</div>}
             {/* Visualizations */}
             {filteredRows?.map((row, index) => (
               <VisualizationRow
@@ -627,6 +649,9 @@ export default function CdcDashboard({
   }
 
   const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]
+  if (isEditor) {
+    dashboardContainerClasses.push('isDashboardEditor')
+  }
 
   return (
     <GlobalContextProvider>

package/src/DashboardContext.tsx

@@ -15,7 +15,9 @@ type ConfigCTX = DashboardState & {
   loadAPIFilters: (
     sharedFilters: SharedFilter[],
     dropdowns: APIFilterDropdowns,
-    recursiveLimit?: number
+    loadAll?: boolean,
+    recursiveLimit?: number,
+    isStale?: () => boolean
   ) => Promise<SharedFilter[]>
   setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
   setAPILoading: (loading: boolean) => void

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

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect, waitFor, userEvent } from 'storybook/test'
+import CdcEditor from '@cdc/editor/src/CdcEditor'
+
+const meta: Meta<typeof CdcEditor> = {
+  title: 'Components/Pages/Dashboard/Data Setup Integration Tests',
+  component: CdcEditor
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcEditor>
+
+// Helper function to wait
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+// ============================================================================
+// Multi-Visualization Configuration Workflow
+// ============================================================================
+// This test matches the Playwright codegen test exactly
+
+export const MultiVizConfigurationWorkflow: Story = {
+  args: {
+    config: {}
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tests multi-visualization configuration workflow (matches Playwright codegen):\n' +
+          '1. Click "Choose Visualization Type"\n' +
+          '2. Click "Dashboard" button\n' +
+          '3. Click "Load from URL"\n' +
+          '4. Enter "Demo" in dataset name textbox\n' +
+          '5. Fill "/custom-order-demo-data.csv" in URL textbox\n' +
+          '6. Click "Always load from URL"\n' +
+          '7. Click "Save & Load" button\n' +
+          '8. Click "Configure your visualization" button\n' +
+          '9. Click "gearMulti" button\n' +
+          '10. Select "Demo" from combobox\n' +
+          '11. Click "Vertical Values for map" button\n' +
+          '12. Click "No" button\n' +
+          '13. Click "Configure Multiple"\n' +
+          '14. Select "Location" from Multi-Visualization Column dropdown\n' +
+          '15. Click "Continue" button'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    // ========================================================================
+    // STEP 1: Click "Choose Visualization Type" (verify it's visible)
+    // ========================================================================
+    await waitFor(
+      async () => {
+        const chooseVizText = canvas.queryByText(/choose visualization type/i)
+        expect(chooseVizText).toBeTruthy()
+      },
+      { timeout: 5000 }
+    )
+
+    const chooseVizText = canvas.getByText(/choose visualization type/i)
+    await user.click(chooseVizText)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 2: Click "Dashboard" button
+    // ========================================================================
+    const dashboardButton = canvas.getByRole('button', { name: /dashboard/i })
+    await user.click(dashboardButton)
+    await sleep(1500)
+
+    // ========================================================================
+    // STEP 3: Click "Load from URL"
+    // ========================================================================
+    await sleep(500)
+
+    const loadFromUrlButton =
+      canvas.queryAllByText(/load from url/i)[0] ||
+      canvas.queryByRole('button', { name: /url/i }) ||
+      canvas.queryByRole('tab', { name: /url/i })
+
+    if (loadFromUrlButton) {
+      await user.click(loadFromUrlButton)
+      await sleep(500)
+    }
+
+    // ========================================================================
+    // STEP 4: Enter "Demo" in dataset name textbox
+    // ========================================================================
+    await sleep(500)
+
+    const datasetNameInput = canvas.getByRole('textbox', { name: /enter dataset name/i })
+    await user.click(datasetNameInput)
+    await user.clear(datasetNameInput)
+    await user.type(datasetNameInput, 'Demo')
+    await sleep(300)
+
+    // ========================================================================
+    // STEP 5: Fill "/custom-order-demo-data.csv" in URL textbox
+    // ========================================================================
+
+    // Press Tab to move to URL field
+    await user.tab()
+
+    const urlInput = canvas.getByRole('textbox', { name: /load data from external url/i })
+    await user.clear(urlInput)
+    await user.type(urlInput, '/custom-order-demo-data.csv')
+    await sleep(300)
+
+    // ========================================================================
+    // STEP 6: Click "Always load from URL"
+    // ========================================================================
+    await sleep(500)
+
+    const alwaysLoadText = canvas.getByText(/always load from url/i)
+    await user.click(alwaysLoadText)
+    await sleep(300)
+
+    // ========================================================================
+    // STEP 7: Click "Save & Load" button
+    // ========================================================================
+    await sleep(500)
+
+    const saveLoadButton = canvas.getByRole('button', { name: /save & load/i })
+    await user.click(saveLoadButton)
+    await sleep(2000) // Wait for data to load
+
+    // ========================================================================
+    // STEP 8: Click "Configure your visualization" button
+    // ========================================================================
+    await sleep(1000)
+
+    const configureButton = canvas.getByRole('button', { name: /configure your visualization/i })
+    await user.click(configureButton)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 9: Click "gearMulti" button
+    // ========================================================================
+    await sleep(500)
+
+    const gearMultiButton = canvas.getByRole('button', { name: /gearMulti/i })
+    await user.click(gearMultiButton)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 10: Select "Demo" from combobox
+    // ========================================================================
+    await sleep(500)
+
+    const dataSourceSelect = canvas.getByRole('combobox')
+    await user.selectOptions(dataSourceSelect, 'Demo')
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 11: Click "Vertical Values for map" button
+    // ========================================================================
+    await sleep(500)
+
+    const verticalValuesButton = canvas.getByRole('button', { name: /vertical values for map/i })
+    await user.click(verticalValuesButton)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 12: Click "No" button
+    // ========================================================================
+    await sleep(500)
+
+    const noButton = canvas.getByRole('button', { name: /^no$/i })
+    await user.click(noButton)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 13: Click "Configure Multiple"
+    // ========================================================================
+    await sleep(500)
+
+    const configureMultipleText = canvas.getByText(/configure multiple/i)
+    await user.click(configureMultipleText)
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 14: Select "Location" from Multi-Visualization Column dropdown
+    // ========================================================================
+    await sleep(500)
+
+    const multiVizColumnSelect = canvas.getByLabelText(/multi-visualization column/i)
+    await user.selectOptions(multiVizColumnSelect, 'Location')
+    await sleep(500)
+
+    // ========================================================================
+    // STEP 15: Click "Continue" button
+    // ========================================================================
+    await sleep(500)
+
+    const continueButton = canvas.getByRole('button', { name: /continue/i })
+    await user.click(continueButton)
+    await sleep(500)
+  }
+}