@cdc/dashboard 4.26.4 → 4.26.5

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

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+  assertVisualizationRendered,
+  getDisplayValue,
+  performAndAssert,
+  waitForOptionsToPopulate
+} from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+import StaleDatasetKeysConfig from '../../examples/dashboard-stale-dataset-keys.json'
+import MissingDatasetsSingleConfig from '../../examples/dashboard-missing-datasets-single.json'
+import MissingDatasetsMultiConfig from '../../examples/dashboard-missing-datasets-multi.json'
+import TieredFilterConfig from '../../examples/dashboard-tiered-filter-regression.json'
+import MultiDashboardVersionConfig from '../../examples/dashboard-multi-dashboard-version-regression.json'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard/Regression Smoke',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+const expectNoCrashText = (canvasElement: HTMLElement) => {
+  expect(canvasElement.textContent).not.toContain('Cannot read properties of undefined')
+  expect(canvasElement.textContent).not.toContain('Something went wrong')
+}
+
+export const Stale_Dataset_Keys_Are_Skipped_Safely: Story = {
+  args: {
+    config: StaleDatasetKeysConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('How to use this fixture')
+    expect(canvasElement.textContent).toContain('Valid viz.dataKey')
+    expect(getDisplayValue(canvasElement)).toContain('123')
+  }
+}
+
+export const Missing_Datasets_Single_Dashboard_Loads_Safely: Story = {
+  args: {
+    config: MissingDatasetsSingleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Fixture notes')
+    expect(canvasElement.textContent).toContain('Missing dataset')
+    expect(canvasElement.textContent).toContain('Empty dataset')
+  }
+}
+
+export const Missing_Datasets_Multi_Dashboard_Loads_Safely: Story = {
+  args: {
+    config: MissingDatasetsMultiConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('This tab has no datasets object entries for its chart.')
+
+    const emptyDatasetTab = canvas.getByRole('link', { name: 'Empty Dataset' })
+    await user.click(emptyDatasetTab)
+
+    await performAndAssert(
+      'Switch to multi-dashboard tab with empty dataset',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('This sub-dashboard has a datasets object, but the dataset is empty.')
+    )
+
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Please complete your selection to continue.')
+  }
+}
+
+export const Tiered_Filtering_Applies_Sequentially: Story = {
+  args: {
+    config: TieredFilterConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const categoryFilter = (await canvas.findByLabelText('Category', { selector: 'select' })) as HTMLSelectElement
+    const detailFilter = (await canvas.findByLabelText('Detail', { selector: 'select' })) as HTMLSelectElement
+
+    const getOptions = (select: HTMLSelectElement) =>
+      Array.from(select.options)
+        .map(option => option.value)
+        .filter(Boolean)
+
+    const getState = () => ({
+      regionSelected: regionFilter.value,
+      categorySelected: categoryFilter.value,
+      detailSelected: detailFilter.value,
+      categoryOptions: getOptions(categoryFilter),
+      detailOptions: getOptions(detailFilter),
+      svgCount: canvasElement.querySelectorAll('svg').length,
+      noDataVisible: !!canvas.queryByText('No Data Available')
+    })
+
+    await waitForOptionsToPopulate(regionFilter, 3)
+    await waitForOptionsToPopulate(categoryFilter, 3)
+    await waitForOptionsToPopulate(detailFilter, 3)
+
+    const initialState = getState()
+    expect(initialState.regionSelected).toBe('North')
+    expect(initialState.categorySelected).toBe('Alpha')
+    expect(initialState.detailSelected).toBe('One')
+    expect(initialState.svgCount).toBeGreaterThan(0)
+    expect(initialState.noDataVisible).toBe(false)
+
+    await performAndAssert(
+      'Change tier-1 filter and repopulate lower tiers',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['South']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categoryOptions.includes('Alpha') &&
+        after.categoryOptions.includes('Beta') &&
+        after.categoryOptions.includes(after.categorySelected) &&
+        after.detailOptions.includes(after.detailSelected) &&
+        after.svgCount > 0 &&
+        !after.noDataVisible
+    )
+
+    await performAndAssert(
+      'Change tier-2 filter and observe the intermediate no-data state',
+      getState,
+      async () => await user.selectOptions(categoryFilter, ['Beta']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categorySelected === 'Beta' &&
+        after.detailSelected === 'One' &&
+        after.noDataVisible
+    )
+
+    await performAndAssert(
+      'Change tier-3 filter to restore data after tier-2 change',
+      getState,
+      async () => await user.selectOptions(detailFilter, ['Two']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categorySelected === 'Beta' &&
+        after.detailSelected === 'Two' &&
+        after.svgCount > 0 &&
+        !after.noDataVisible
+    )
+  }
+}
+
+export const Multi_Dashboard_Versioning_Remains_Stable: Story = {
+  args: {
+    config: MultiDashboardVersionConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+
+    await user.click(canvas.getByRole('link', { name: 'Explicit Version' }))
+
+    await performAndAssert(
+      'Switch to explicit-version sub-dashboard',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('Because this sub-dashboard is already at')
+    )
+
+    await user.click(canvas.getByRole('link', { name: 'Fallback Version' }))
+
+    await performAndAssert(
+      'Switch to fallback-version sub-dashboard',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('This tab intentionally omits its own version.')
+    )
+
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Fallback version tab')
+  }
+}

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent } from 'storybook/test'
+import cloneDeep from 'lodash/cloneDeep'
+import Dashboard from '../CdcDashboard'
+import SingleStateDashboardFilters from './_mock/single-state-dashboard-filters.json'
+import {
+  assertVisualizationRendered,
+  performAndAssert,
+  waitForOptionsToPopulate,
+  waitForPresence
+} from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof Dashboard>
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard/Zoom',
+  component: Dashboard,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+const SingleStateDashboardZoomResetConfig = cloneDeep(SingleStateDashboardFilters)
+SingleStateDashboardZoomResetConfig.dashboard.title = 'Single-State Shared Filter Zoom Reset'
+SingleStateDashboardZoomResetConfig.dashboard.sharedFilters[0].key = 'State'
+SingleStateDashboardZoomResetConfig.dashboard.sharedFilters[0].active = 'California'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.title =
+  'Single-State Shared Filter Zoom Reset'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.filterControlsStatesPicked = 'State'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.statesPicked = [
+  {
+    fipsCode: '06',
+    stateName: 'California'
+  }
+]
+delete SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.filterControlsStatePicked
+delete SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.statePicked
+
+const readZoomTransform = (canvasElement: HTMLElement) => {
+  const zoomLayer = canvasElement.querySelector('svg > g > g[transform]') as SVGGElement | null
+  return zoomLayer?.getAttribute('transform') || ''
+}
+
+export const SingleStateSharedFilterReset: Story = {
+  args: {
+    config: SingleStateDashboardZoomResetConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Dashboard zoom regression story for DEV-13086. Zoom the single-state map, then change the shared State filter. The map should refit to the new single state instead of preserving the prior zoom.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await assertVisualizationRendered(canvasElement)
+
+    const stateFilter = canvas.getByLabelText('State', { selector: 'select' }) as HTMLSelectElement
+    await waitForOptionsToPopulate(stateFilter, 2)
+    await waitForPresence('button[aria-label="Zoom In"]', canvasElement)
+
+    const zoomInButton = canvas.getByLabelText('Zoom In')
+
+    await performAndAssert(
+      'Single-state dashboard map zooms in',
+      () => readZoomTransform(canvasElement),
+      async () => {
+        await userEvent.click(zoomInButton)
+      },
+      (before, after) => before !== after && !after.includes('scale(1)')
+    )
+
+    await performAndAssert(
+      'Shared filter change refits single-state zoom',
+      () => readZoomTransform(canvasElement),
+      async () => {
+        await userEvent.selectOptions(stateFilter, ['Florida'])
+      },
+      (before, after) => before !== after && after.includes('scale(1)')
+    )
+  }
+}

package/src/_stories/Dashboard.stories.tsx

@@ -55,6 +55,183 @@ DashboardFilterDesc.dashboard.sharedFilters[0].order = 'desc'
 DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
 NestedParentChildFiltersSubgroupOnly.dashboard.sharedFilters[1].displaySubgroupingOnly = true
 
+const DashboardConditionsConfig: Config = {
+  type: 'dashboard',
+  version: '4.26.4',
+  dashboard: {
+    theme: 'theme-blue',
+    title: 'Dashboard Conditions',
+    titleStyle: 'small',
+    sharedFilters: [
+      {
+        key: 'Required Selection',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'selection',
+        showDropdown: true,
+        usedBy: ['markup-filters-incomplete'],
+        values: ['Ready'],
+        resetLabel: 'Select a value',
+        active: 'Select a value',
+        order: 'asc',
+        parents: []
+      },
+      {
+        key: 'Availability',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'availability',
+        showDropdown: true,
+        usedBy: [2],
+        values: ['Show', 'Hide'],
+        active: 'Show',
+        order: 'asc',
+        parents: []
+      },
+      {
+        key: 'Region',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'region',
+        showDropdown: true,
+        usedBy: ['markup-condition-a'],
+        values: ['East', 'West'],
+        active: 'East',
+        order: 'asc',
+        parents: []
+      }
+    ]
+  },
+  data: [],
+  datasets: {
+    'visual-data': {
+      data: [{ title: 'Visualization dataset' }]
+    },
+    'row-condition-data': {
+      data: [{ availability: 'Show' }]
+    },
+    'column-condition-data': {
+      data: [
+        { region: 'East', visibility: 1 },
+        { region: 'West', visibility: 0 }
+      ]
+    }
+  },
+  rows: [
+    {
+      columns: [{ width: 12, widget: 'dashboard-filters-conditions' }],
+      expandCollapseAllButtons: false
+    },
+    {
+      columns: [
+        {
+          width: 12,
+          conditionalWidgets: [
+            {
+              widget: 'markup-filters-incomplete',
+              dashboardCondition: {
+                id: 'filters-incomplete-story',
+                operator: 'filtersIncomplete'
+              }
+            }
+          ]
+        }
+      ],
+      expandCollapseAllButtons: false
+    },
+    {
+      dashboardCondition: {
+        id: 'row-condition-story',
+        datasetKey: 'row-condition-data',
+        operator: 'hasData'
+      },
+      columns: [
+        {
+          width: 6,
+          conditionalWidgets: [
+            {
+              widget: 'markup-condition-a',
+              dashboardCondition: {
+                id: 'column-condition-story',
+                datasetKey: 'column-condition-data',
+                operator: 'columnHasAnyValue',
+                columnName: 'visibility',
+                values: ['1']
+              }
+            }
+          ]
+        },
+        {
+          width: 6,
+          widget: 'markup-condition-b'
+        }
+      ],
+      expandCollapseAllButtons: false
+    }
+  ],
+  visualizations: {
+    'dashboard-filters-conditions': {
+      uid: 'dashboard-filters-conditions',
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      sharedFilterIndexes: [0, 1, 2],
+      filterBehavior: 'Filter Change',
+      filters: [],
+      autoLoad: true
+    },
+    'markup-filters-incomplete': {
+      uid: 'markup-filters-incomplete',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This authored module appears because <strong>Required Selection</strong> starts incomplete. Choose Ready to hide it.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Filters Incomplete Condition',
+        useInlineHTML: true
+      }
+    },
+    'markup-condition-a': {
+      uid: 'markup-condition-a',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      dataKey: 'visual-data',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This column stays visible while <strong>Region</strong> is East and hides while keeping its width when Region is West.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Component-Level Condition',
+        useInlineHTML: true
+      }
+    },
+    'markup-condition-b': {
+      uid: 'markup-condition-b',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      dataKey: 'visual-data',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This companion column stays rendered so you can see row-level hiding separately from component-level hiding.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Always Visible Companion',
+        useInlineHTML: true
+      }
+    }
+  },
+  table: {
+    show: false
+  }
+}
+
 // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
 const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
 DashboardFilterCust.dashboard.sharedFilters[0].orderedValues = customOrder
@@ -115,6 +292,123 @@ export const Example_3: Story = {
   }
 }
 
+export const Dashboard_Conditions: Story = {
+  args: {
+    config: DashboardConditionsConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    const incompleteTitle = 'Filters Incomplete Condition'
+    const componentTitle = 'Component-Level Condition'
+    const companionTitle = 'Always Visible Companion'
+    const legacyIncompleteMessage = 'Please complete your selection to continue.'
+
+    const availabilityFilter = (await canvas.findByLabelText('Availability', {
+      selector: 'select'
+    })) as HTMLSelectElement
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const requiredSelectionFilter = (await canvas.findByLabelText('Required Selection', {
+      selector: 'select'
+    })) as HTMLSelectElement
+
+    await waitForOptionsToPopulate(requiredSelectionFilter, 2)
+
+    const getState = () => {
+      const visibleText = canvasElement.innerText
+      return {
+        availabilitySelected: availabilityFilter.value,
+        regionSelected: regionFilter.value,
+        requiredSelectionSelected: requiredSelectionFilter.value,
+        incompleteVisible: visibleText.includes(incompleteTitle),
+        componentVisible: visibleText.includes(componentTitle),
+        companionVisible: visibleText.includes(companionTitle),
+        legacyIncompleteVisible: visibleText.includes(legacyIncompleteMessage)
+      }
+    }
+
+    const initialState = getState()
+    expect(initialState.incompleteVisible).toBe(true)
+    expect(initialState.componentVisible).toBe(false)
+    expect(initialState.companionVisible).toBe(false)
+    expect(initialState.legacyIncompleteVisible).toBe(false)
+
+    await performAndAssert(
+      'Complete required filter -> row and component conditions render',
+      getState,
+      async () => await user.selectOptions(requiredSelectionFilter, ['Ready']),
+      (_before, after) =>
+        after.requiredSelectionSelected === 'Ready' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Region=West -> component-level condition hides only the conditioned component',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['West']),
+      (_before, after) =>
+        after.regionSelected === 'West' &&
+        !after.incompleteVisible &&
+        !after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Region=East -> component-level condition shows the conditioned component',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['East']),
+      (_before, after) =>
+        after.regionSelected === 'East' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Availability=Hide -> row-level condition hides the full conditioned row',
+      getState,
+      async () => await user.selectOptions(availabilityFilter, ['Hide']),
+      (_before, after) =>
+        after.availabilitySelected === 'Hide' &&
+        !after.incompleteVisible &&
+        !after.componentVisible &&
+        !after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Availability=Show -> row-level condition shows the full conditioned row',
+      getState,
+      async () => await user.selectOptions(availabilityFilter, ['Show']),
+      (_before, after) =>
+        after.availabilitySelected === 'Show' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Reset required filter -> authored filtersIncomplete module returns',
+      getState,
+      async () => await user.selectOptions(requiredSelectionFilter, ['Select a value']),
+      (_before, after) =>
+        after.requiredSelectionSelected === 'Select a value' &&
+        after.incompleteVisible &&
+        !after.componentVisible &&
+        !after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+  }
+}
+
 export const TP5_Test_Dashboard: Story = {
   args: {
     config: TP5TestConfig,

package/src/_stories/FilteredTextMigrationComparison.stories.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
+import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { expect, waitFor } from 'storybook/test'
+
+const comparisonData = [
+  {
+    State: 'CA',
+    Message: 'Representative filtered text output'
+  }
+]
+
+const meta: Meta = {
+  title: 'Components/Pages/Dashboard/Filtered Text Migration Comparison'
+}
+
+type Story = StoryObj
+
+export const Standalone_Handoff_And_Migrated_Output: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+      <CdcFilteredText
+        config={{
+          type: 'filtered-text',
+          title: 'Legacy filtered text',
+          textColumn: 'Message',
+          data: comparisonData,
+          filters: [{ columnName: 'State', columnValue: 'CA' }]
+        }}
+        isEditor={false}
+      />
+      <CdcMarkupInclude
+        config={
+          {
+            type: 'markup-include',
+            theme: 'theme-blue',
+            data: comparisonData,
+            enableMarkupVariables: true,
+            markupVariables: [
+              {
+                sourceType: 'column',
+                outputType: 'value',
+                name: 'Message',
+                tag: '{{message}}',
+                columnName: 'Message',
+                conditions: [{ columnName: 'State', isOrIsNotEqualTo: 'is', value: 'CA' }],
+                selectionMode: 'first'
+              }
+            ],
+            contentEditor: {
+              title: 'Migrated markup include',
+              inlineHTML: '{{message}}',
+              useInlineHTML: true,
+              srcUrl: '',
+              showHeader: true,
+              style: 'default'
+            },
+            visual: {
+              border: false,
+              accent: false,
+              background: false,
+              hideBackgroundColor: false,
+              borderColorTheme: false
+            }
+          } as any
+        }
+        configUrl=''
+        datasets={{}}
+        isEditor={false}
+        isDashboard={false}
+        setConfig={() => {}}
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitFor(() => {
+      expect(canvasElement.textContent).toContain('Filtered Text Has Been Migrated')
+      expect(canvasElement.textContent).toContain('Use the markup-include package to render this visualization.')
+      expect(canvasElement.textContent?.match(/Representative filtered text output/g)?.length).toBe(1)
+    })
+  }
+}
+
+export default meta