@cdc/dashboard 4.26.1 → 4.26.3

package/src/helpers/addVisualization.ts

@@ -0,0 +1,71 @@
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import type { Table } from '@cdc/core/types/Table'
+
+export const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<AnyVisualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      break
+    case 'data-bite':
+    case 'waffle-chart':
+    case 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'table': {
+      const tableConfig: Table = {
+        label: 'Data Table',
+        show: true,
+        showDownloadUrl: false,
+        showVertical: true,
+        expanded: true,
+        collapsible: true
+      }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    case 'markup-include':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'dashboardFilters': {
+      newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}

package/src/helpers/apiFilterHelpers.ts

@@ -119,35 +119,31 @@ export const getToFetch = (
 }
 
 export const setActiveNestedDropdown = (dropdownOptions, sharedFilter) => {
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const defaultValue = dropdownOptions[0]?.value
-  const subDefaultValue = dropdownOptions[0]?.subOptions[0].value
-  const subDefaultQueryParamValue = getQueryParam(sharedFilter?.subGrouping.setByQueryParameter)
-  if (!sharedFilter.active) {
-    sharedFilter.active = defaultQueryParamValue || defaultValue
-    sharedFilter.subGrouping.active = subDefaultQueryParamValue || subDefaultValue
-  } else {
-    const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
-    sharedFilter.active = currentOption ? currentOption.value : defaultValue
-    if (currentOption) {
-      const currentSubOption = currentOption.subOptions.find(option => option.value === sharedFilter.subGrouping.active)
-      sharedFilter.subGrouping.active = currentSubOption?.value || subDefaultValue
-    } else {
-      sharedFilter.subGrouping.active = subDefaultValue
-    }
-  }
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const subQueryValue = getQueryParam(sharedFilter?.subGrouping?.setByQueryParameter)
+
+  // Priority: query string > configured defaultValue > existing active (if valid) > first option
+  // Note: use loose equality here to match values across possible string/number differences
+  const validActive = dropdownOptions.find(option => option.value == sharedFilter.active)
+  sharedFilter.active =
+    queryValue || sharedFilter.defaultValue || (validActive ? sharedFilter.active : dropdownOptions[0]?.value)
+
+  const options = dropdownOptions.find(option => option.value == sharedFilter.active)?.subOptions || []
+  const validSubActive = options.find(o => o.value == sharedFilter.subGrouping?.active)
+  sharedFilter.subGrouping.active =
+    subQueryValue ||
+    sharedFilter.subGrouping?.defaultValue ||
+    (validSubActive ? sharedFilter.subGrouping.active : options[0]?.value)
 }
 
 export const setActiveMultiDropdown = (dropdownOptions, sharedFilter) => {
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const multiDefaultQueryParamValue = Array.isArray(defaultQueryParamValue)
-    ? defaultQueryParamValue
-    : defaultQueryParamValue?.split(',')
-  const multiDefaultValue = defaultQueryParamValue ? multiDefaultQueryParamValue : [dropdownOptions[0]?.value]
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const queryValues = Array.isArray(queryValue) ? queryValue : queryValue?.split(',')
+  const defaultValues = queryValue ? queryValues : [dropdownOptions[0]?.value]
   const currentOption = (Array.isArray(sharedFilter.active) ? sharedFilter.active : []).filter(activeVal =>
     dropdownOptions.find(option => option.value === activeVal)
   )
-  sharedFilter.active = currentOption.length ? currentOption : multiDefaultValue
+  sharedFilter.active = currentOption.length ? currentOption : defaultValues
 }
 
 export const setAutoLoadDefaultValue = (
@@ -158,20 +154,20 @@ export const setAutoLoadDefaultValue = (
 ): SharedFilter => {
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
   const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const hasQueryParameter = sharedFilter.setByQueryParameter ? defaultQueryParamValue !== undefined : false
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const hasQuery = sharedFilter.setByQueryParameter ? queryValue !== undefined : false
   if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) {
-    if (hasQueryParameter && sharedFilter.apiFilter) {
+    if (hasQuery && sharedFilter.apiFilter) {
       const subQueryValue = getQueryParam(sharedFilter.subGrouping?.setByQueryParameter)
-      const isNestedDropdown = subQueryValue !== undefined
-      sharedFilter.queuedActive = isNestedDropdown ? [defaultQueryParamValue, subQueryValue] : defaultQueryParamValue
+      const isNested = subQueryValue !== undefined
+      sharedFilter.queuedActive = isNested ? [queryValue, subQueryValue] : queryValue
     }
     return sharedFilter // no autoLoading happening
   }
-  if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQueryParameter) {
+  if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQuery) {
     const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
-    const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
-    if (filterParents && notAllParentFiltersSelected) return sharedFilter
+    const missingParents = filterParents.some(p => !(p.active || p.queuedActive))
+    if (missingParents) return sharedFilter
     if (sharedFilter.filterStyle === FILTER_STYLE.multiSelect) {
       setActiveMultiDropdown(dropdownOptions, sharedFilter)
     } else if (sharedFilter.filterStyle === FILTER_STYLE.nestedDropdown) {
@@ -179,7 +175,7 @@ export const setAutoLoadDefaultValue = (
     } else {
       const defaultValue = dropdownOptions[0]?.value
       if (!sharedFilter.active) {
-        sharedFilter.active = defaultQueryParamValue || defaultValue
+        sharedFilter.active = queryValue ?? defaultValue
       } else {
         const currentOption = dropdownOptions.find(option => option.value == sharedFilter.active) // loose equality required: 2017 should equal '2017'
         sharedFilter.active = currentOption ? currentOption.value : defaultValue

package/src/helpers/formatConfigBeforeSave.ts

@@ -129,7 +129,7 @@ export const stripConfig = (configToStrip, isEditor = false) => {
   } else {
     delete strippedConfig.runtime
     delete strippedConfig.formattedData
-    if (strippedConfig.dataUrl) {
+    if (strippedConfig.dataUrl && !isEditor) {
       delete strippedConfig.data
     }
   }

package/src/helpers/getVizConfig.ts

@@ -90,6 +90,9 @@ export const getVizConfig = (
 
   if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
   const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+  const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+
+  visualizationConfig.dataMetadata = config.datasets[dataKey]?.dataMetadata || {}
 
   if (filteredVizData) {
     visualizationConfig.data = filteredVizData || []
@@ -97,9 +100,16 @@ export const getVizConfig = (
       visualizationConfig.formattedData = visualizationConfig.data
     }
   } else {
-    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    // Markup-includes need data even when shared filters exist (for markup variables)
-    const shouldClearData = sharedFilterColumns.length && visualizationConfig.type !== 'markup-include'
+    // Clear data for charts/maps when shared filters exist but filtered data
+    // hasn't arrived yet — prevents rendering the full unfiltered dataset as DOM.
+    // Lighter types (data-bite, waffle-chart, filtered-text, markup-include) are
+    // excluded: they only compute scalars or single elements, and their editor
+    // panels need data to populate column dropdowns. Ideally data filters would
+    // apply synchronously before render, but they currently go through the same
+    // async loadAPIFilters pipeline as API filters, so filtered data isn't
+    // available on first render.
+    const heavyVizTypes = ['chart', 'map']
+    const shouldClearData = sharedFilterColumns.length && heavyVizTypes.includes(visualizationConfig.type)
     visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =

package/src/helpers/iconHash.tsx

@@ -1,36 +1,45 @@
-import Icon from '@cdc/core/components/ui/Icon'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-
-export const iconHash = {
-  'data-bite': <Icon display='databite' base />,
-  Bar: <Icon display='chartBar' base />,
-  'Spark Line': <Icon display='chartLine' />,
-  'Bump Chart': <Icon display='chartLine' />,
-  'waffle-chart': <Icon display='grid' base />,
-  'markup-include': <Icon display='code' base />,
-  Line: <Icon display='chartLine' base />,
-  Pie: <Icon display='chartPie' base />,
-  us: <Icon display='mapUsa' base />,
-  'us-county': <Icon display='mapUsa' base />,
-  world: <Icon display='mapWorld' base />,
-  'single-state': <Icon display='mapAl' base />,
-  gear: <Icon display='gear' base />,
-  gearMulti: <Icon display='gearMulti' base />,
-  tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />,
-  dashboardFilters: <Icon display='dashboardFilters' base />,
-  table: <Icon display='table' base />,
-  Sankey: <Icon display='sankey' base />
-}
-
-export const getIcon = (visualization: AnyVisualization) => {
-  const { type, visualizationType, general } = visualization
-  if (visualizationType) return iconHash[visualizationType]
-  if (general?.geoType) {
-    // for visualizations, mismatching state and state icon is not desired
-    // so instead of showing alabama as the default state icon we show the US icon.
-    if (general.geoType === 'single-state') return iconHash['us']
-    return iconHash[general.geoType]
-  }
-  return iconHash[type]
-}
+import Icon from '@cdc/core/components/ui/Icon'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export const iconHash = {
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'Bump Chart': <Icon display='chartLine' />,
+  'waffle-chart': <Icon display='grid' base />,
+  'markup-include': <Icon display='code' base />,
+  Line: <Icon display='chartLine' base />,
+  Pie: <Icon display='chartPie' base />,
+  us: <Icon display='mapUsa' base />,
+  'us-county': <Icon display='mapUsa' base />,
+  world: <Icon display='mapWorld' base />,
+  'single-state': <Icon display='mapAl' base />,
+  gear: <Icon display='gear' base />,
+  gearMulti: <Icon display='gearMulti' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />,
+  dashboardFilters: <Icon display='dashboardFilters' base />,
+  table: <Icon display='table' base />,
+  Sankey: <Icon display='sankey' base />,
+  Combo: <Icon display='chartBar' base />,
+  'Scatter Plot': <Icon display='chartBar' base />,
+  'Area Chart': <Icon display='chartLine' base />,
+  'Deviation Bar': <Icon display='chartBar' base />,
+  'Paired Bar': <Icon display='chartBar' base />,
+  'Box Plot': <Icon display='chartBar' base />,
+  'Forest Plot': <Icon display='chartBar' base />,
+  Forecasting: <Icon display='chartLine' base />,
+  'Warming Stripes': <Icon display='chartBar' base />
+}
+
+export const getIcon = (visualization: AnyVisualization) => {
+  const { type, visualizationType, general } = visualization
+  if (visualizationType) return iconHash[visualizationType]
+  if (general?.geoType) {
+    // for visualizations, mismatching state and state icon is not desired
+    // so instead of showing alabama as the default state icon we show the US icon.
+    if (general.geoType === 'single-state') return iconHash['us']
+    return iconHash[general.geoType]
+  }
+  return iconHash[type]
+}

package/src/helpers/processDataLegacy.ts

@@ -1,14 +1,19 @@
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import { getFormattedData } from './getFormattedData'
-
-export const processDataLegacy = async (response: any) => {
-  let dataset = response.formattedData || response.data
-
-  if (response.dataUrl) {
-    dataset = await fetchRemoteData(`${response.dataUrl}`)
-
-    dataset = getFormattedData(dataset, response.dataDescription)
-  }
-
-  return dataset
-}
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processDataLegacy = async (
+  response: any
+): Promise<{ data: any[]; dataMetadata: Record<string, string> }> => {
+  let dataset = response.formattedData || response.data
+  let dataMetadata: Record<string, string> = {}
+
+  if (response.dataUrl) {
+    const result = await fetchRemoteData(`${response.dataUrl}`)
+    dataset = result.data
+    dataMetadata = result.dataMetadata
+
+    dataset = getFormattedData(dataset, response.dataDescription)
+  }
+
+  return { data: dataset, dataMetadata }
+}

package/src/helpers/tests/addValuesToDashboardFilters.test.ts

@@ -1,44 +1,141 @@
-import { SharedFilter } from '../../types/SharedFilter'
-import { addValuesToDashboardFilters } from '../addValuesToDashboardFilters'
-
-describe('addValuesToDashboardFilters', () => {
-  const colA = { columnName: 'colA', id: 11, active: 'apple', values: [], type: 'datafilter' } as SharedFilter
-  const colB = { columnName: 'colB', id: 22, active: '1', values: [], type: 'datafilter' } as SharedFilter
-  const colC = { columnName: 'colC', id: 33, values: [], setByQueryParameter: 'colC', type: 'datafilter' } as SharedFilter
-
-  const data = {
-    key: [
-      { colA: 'apple', colB: 3, colC: 'abc' },
-      { colA: 'apple', colB: 1, colC: 'bcd' },
-      { colA: 'pear', colB: 4, colC: 'test' }
-    ]
-  }
-  const filters = [colA, colC, colB]
-  it('adds filter values', () => {
-    const newFilters = addValuesToDashboardFilters(filters, data)
-    expect(newFilters[0].values).toEqual(['apple', 'pear'])
-  })
-  it('converts to multiselect', () => {
-    colA.multiSelect = true
-    const newFilters = addValuesToDashboardFilters(filters, data)
-    expect(newFilters[0].active).toEqual(['apple'])
-  })
-
-  it('sets active value by query string', () => {
-    delete window.location
-    window.location = new URL('https://www.example.com?colC=test')
-    const newFilters = addValuesToDashboardFilters(filters, data)
-    expect(newFilters[1].active).toEqual('test')
-  })
-  const colA2 = { apiFilter: { valueSelector: 'colA' }, id: 11, active: 'apple', values: [], type: 'urlfilter' } as SharedFilter
-  const colB2 = { apiFilter: { valueSelector: 'colB' }, id: 22, active: '1', values: [], type: 'urlfilter' } as SharedFilter
-  const colC2 = { apiFilter: { valueSelector: 'colC' }, id: 33, values: [], setByQueryParameter: 'colC', type: 'urlfilter' } as SharedFilter
-  const filters2 = [colA2, colC2, colB2]
-  it('skips urlfilters', () => {
-    // urlfilter reloading happens in the dashboard in the loadAPIFilters function
-    delete window.location
-    window.location = new URL('https://www.example.com?colC=test')
-    const newFilters = addValuesToDashboardFilters(filters2, data)
-    expect(newFilters[1].active).toEqual(undefined)
-  })
-})
+import { SharedFilter } from '../../types/SharedFilter'
+import { addValuesToDashboardFilters } from '../addValuesToDashboardFilters'
+
+describe('addValuesToDashboardFilters', () => {
+  const colA = { columnName: 'colA', id: 11, active: 'apple', values: [], type: 'datafilter' } as SharedFilter
+  const colB = { columnName: 'colB', id: 22, active: '1', values: [], type: 'datafilter' } as SharedFilter
+  const colC = {
+    columnName: 'colC',
+    id: 33,
+    values: [],
+    setByQueryParameter: 'colC',
+    type: 'datafilter'
+  } as SharedFilter
+
+  const data = {
+    key: [
+      { colA: 'apple', colB: 3, colC: 'abc' },
+      { colA: 'apple', colB: 1, colC: 'bcd' },
+      { colA: 'pear', colB: 4, colC: 'test' }
+    ]
+  }
+  const filters = [colA, colC, colB]
+  it('adds filter values', () => {
+    const newFilters = addValuesToDashboardFilters(filters, data)
+    expect(newFilters[0].values).toEqual(['apple', 'pear'])
+  })
+  it('converts to multiselect', () => {
+    colA.multiSelect = true
+    const newFilters = addValuesToDashboardFilters(filters, data)
+    expect(newFilters[0].active).toEqual(['apple'])
+  })
+
+  it('sets active value by query string', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?colC=test')
+    const newFilters = addValuesToDashboardFilters(filters, data)
+    expect(newFilters[1].active).toEqual('test')
+  })
+  const colA2 = {
+    apiFilter: { valueSelector: 'colA' },
+    id: 11,
+    active: 'apple',
+    values: [],
+    type: 'urlfilter'
+  } as SharedFilter
+  const colB2 = {
+    apiFilter: { valueSelector: 'colB' },
+    id: 22,
+    active: '1',
+    values: [],
+    type: 'urlfilter'
+  } as SharedFilter
+  const colC2 = {
+    apiFilter: { valueSelector: 'colC' },
+    id: 33,
+    values: [],
+    setByQueryParameter: 'colC',
+    type: 'urlfilter'
+  } as SharedFilter
+  const filters2 = [colA2, colC2, colB2]
+  it('skips urlfilters', () => {
+    // urlfilter reloading happens in the dashboard in the loadAPIFilters function
+    delete window.location
+    window.location = new URL('https://www.example.com?colC=test')
+    const newFilters = addValuesToDashboardFilters(filters2, data)
+    expect(newFilters[1].active).toEqual(undefined)
+  })
+
+  it('respects nested dropdown default values for both group and subgroup', () => {
+    const nestedData = {
+      key: [
+        { year: '2022', quarter: 'Q1', region: 'North' },
+        { year: '2022', quarter: 'Q2', region: 'North' },
+        { year: '2023', quarter: 'Q1', region: 'North' },
+        { year: '2023', quarter: 'Q2', region: 'North' },
+        { year: '2023', quarter: 'Q3', region: 'North' },
+        { year: '2024', quarter: 'Q1', region: 'North' }
+      ]
+    }
+
+    const nestedFilter = {
+      columnName: 'year',
+      id: 1,
+      values: ['2022', '2023', '2024'],
+      type: 'datafilter',
+      filterStyle: 'nested-dropdown',
+      defaultValue: '2023',
+      subGrouping: {
+        columnName: 'quarter',
+        defaultValue: 'Q2',
+        valuesLookup: {
+          '2022': { values: ['Q1', 'Q2'] },
+          '2023': { values: ['Q1', 'Q2', 'Q3'] },
+          '2024': { values: ['Q1'] }
+        }
+      }
+    } as SharedFilter
+
+    const result = addValuesToDashboardFilters([nestedFilter], nestedData)
+
+    // Should use configured defaultValue for main group
+    expect(result[0].active).toBe('2023')
+
+    // Should use configured defaultValue for subgroup
+    expect(result[0].subGrouping.active).toBe('Q2')
+  })
+
+  it('uses first available subgroup value when defaultValue is not in current group', () => {
+    const nestedData = {
+      key: [
+        { year: '2022', quarter: 'Q1', region: 'North' },
+        { year: '2024', quarter: 'Q1', region: 'North' }
+      ]
+    }
+
+    const nestedFilter = {
+      columnName: 'year',
+      id: 1,
+      values: ['2022', '2024'],
+      type: 'datafilter',
+      filterStyle: 'nested-dropdown',
+      defaultValue: '2024',
+      subGrouping: {
+        columnName: 'quarter',
+        defaultValue: 'Q2', // Q2 doesn't exist for 2024
+        valuesLookup: {
+          '2022': { values: ['Q1'] },
+          '2024': { values: ['Q1'] }
+        }
+      }
+    } as SharedFilter
+
+    const result = addValuesToDashboardFilters([nestedFilter], nestedData)
+
+    // Should use configured defaultValue for main group
+    expect(result[0].active).toBe('2024')
+
+    // Should fall back to first available value since Q2 doesn't exist for 2024
+    expect(result[0].subGrouping.active).toBe('Q1')
+  })
+})

package/src/helpers/tests/addVisualization.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest'
+import { addVisualization } from '../addVisualization'
+
+describe('addVisualization', () => {
+  it('creates chart visual settings with extra theme toggles disabled by default', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    const visualization = addVisualization('chart', 'Bar')
+
+    expect(visualization).toMatchObject({
+      uid: 'chart12345',
+      type: 'chart',
+      visualizationType: 'Bar',
+      visual: {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+    })
+  })
+
+  it('creates map visual settings with extra theme toggles disabled by default', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    const visualization = addVisualization('map', 'single-state')
+
+    expect(visualization).toMatchObject({
+      uid: 'map12345',
+      type: 'map',
+      general: {
+        geoType: 'single-state'
+      },
+      visual: {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+    })
+  })
+
+  it('preserves visualizationType for data-bite family visualizations', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    expect(addVisualization('data-bite')).toMatchObject({ visualizationType: 'data-bite' })
+    expect(addVisualization('waffle-chart')).toMatchObject({ visualizationType: 'waffle-chart' })
+    expect(addVisualization('filtered-text')).toMatchObject({ visualizationType: 'filtered-text' })
+  })
+})