@cdc/dashboard 4.25.10 → 4.25.11

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -1,9 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 import DashboardFilters from '../DashboardFilters'
+import '../../../scss/main.scss'
 
 const meta: Meta<typeof DashboardFilters> = {
   title: 'Components/Atoms/Inputs/DashboardFilters',
-  component: DashboardFilters
+  component: DashboardFilters,
+  decorators: [
+    Story => (
+      <div className='cdc-open-viz-module type-dashboard'>
+        <Story />
+      </div>
+    )
+  ]
 }
 
 type Story = StoryObj<typeof DashboardFilters>
@@ -11,11 +19,62 @@ type Story = StoryObj<typeof DashboardFilters>
 export const Example_1: Story = {
   args: {
     filters: [
-      { type: 'datafilter', key: 'label here', values: [1, 2, 3, 4] },
-      { type: 'datafilter', key: 'something' }
+      {
+        type: 'datafilter',
+        key: 'label here',
+        values: ['1', '2', '3', '4'],
+        columnName: 'label',
+        showDropdown: true,
+        id: 0,
+        parents: []
+      } as any,
+      {
+        type: 'datafilter',
+        key: 'something',
+        values: ['A', 'B', 'C'],
+        columnName: 'something',
+        showDropdown: true,
+        id: 1,
+        parents: []
+      } as any
     ],
+    show: [0, 1],
+    apiFilterDropdowns: {},
     handleOnChange: () => {}
   }
 }
 
+export const WithClearButton: Story = {
+  args: {
+    filters: [
+      {
+        type: 'datafilter',
+        key: 'Category',
+        values: ['Option 1', 'Option 2', 'Option 3'],
+        active: 'Option 1',
+        columnName: 'category',
+        showDropdown: true,
+        id: 0,
+        parents: []
+      } as any,
+      {
+        type: 'datafilter',
+        key: 'Status',
+        values: ['Active', 'Inactive', 'Pending'],
+        active: 'Active',
+        columnName: 'status',
+        showDropdown: true,
+        id: 1,
+        parents: []
+      } as any
+    ],
+    show: [0, 1],
+    apiFilterDropdowns: {},
+    handleOnChange: () => {},
+    showSubmit: true,
+    applyFilters: () => {},
+    handleReset: () => {}
+  }
+}
+
 export default meta

package/src/components/DataDesignerModal.tsx

@@ -4,14 +4,13 @@ import { useContext, useMemo, useState } from 'react'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 import Modal from '@cdc/core/components/ui/Modal'
 import Loader from '@cdc/core/components/Loader'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import _ from 'lodash'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ConfigureData } from '@cdc/core/types/ConfigureData'
 import Icon from '@cdc/core/components/ui/Icon'
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
 
 type DataDesignerModalProps = {
   rowIndex: number
@@ -134,10 +133,18 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
         {loadingAPIData && <Loader fullScreen />}
         <div className='dataset-selector-container'>
           Select a dataset:&nbsp;
-          <select className='dataset-selector' value={configureData.dataKey || ''} onChange={changeDataset}>
+          <select
+            className='dataset-selector cove-form-select'
+            value={configureData.dataKey || ''}
+            onChange={changeDataset}
+          >
             <option value=''>Select a dataset</option>
             {config.datasets &&
-              Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
+              Object.keys(config.datasets).map(datasetKey => (
+                <option key={datasetKey} value={datasetKey}>
+                  {datasetKey}
+                </option>
+              ))}
           </select>
           {vizKey && (
             // only shows for visualizations
@@ -186,7 +193,7 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
             />
           ) : (
             <>
-              <InputSelect
+              <Select
                 options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
                 value={config.rows[rowIndex].multiVizColumn}
                 label='Multi-Visualization Column'

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext } from 'react'
+import { useContext, useRef } from 'react'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
@@ -56,21 +56,22 @@ const Header = (props: HeaderProps) => {
     return strippedState
   }
 
-  useEffect(() => {
-    const parsedData = convertStateToConfig()
+  const configStringRef = useRef<string>()
 
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: JSON.stringify(parsedData) })
+  // Only update parent when config content actually changes (not just reference)
+  const configString = JSON.stringify(convertStateToConfig())
+  if (configStringRef.current !== configString) {
+    configStringRef.current = configString
 
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: configString })
     window.dispatchEvent(event)
 
     // Pass up to Editor if needed
     if (setParentConfig) {
-      setParentConfig(parsedData)
+      setParentConfig(JSON.parse(configString))
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
+  }
 
   const handleCheck = e => {
     const { checked } = e.currentTarget

package/src/components/Toggle/Toggle.tsx

@@ -1,48 +1,48 @@
-import { ConfigRow } from '../../types/ConfigRow'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-import { getIcon } from '../../helpers/iconHash'
-import { labelHash } from '@cdc/core/helpers/labelHash'
-import './toggle-style.css'
-import _ from 'lodash'
-
-type ToggleProps = {
-  active: number
-  row: ConfigRow
-  visualizations: Record<string, AnyVisualization>
-  setToggled: (colIndex: number) => void
-}
-const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
-  const selectItem = (colIndex, e = null) => {
-    if (e?.key && e.key !== 'Enter' && e.key !== ' ') return
-    if (e?.key === ' ') e.preventDefault() // Prevent page scroll
-    setToggled(colIndex)
-  }
-
-  return (
-    <div className='toggle-component' role='radiogroup' aria-label='Visualization options'>
-      {row.columns.map((col, colIndex) => {
-        if (!col.widget) return null
-        const type = visualizations[col.widget].type
-        // Get the column toggele Text or default to the type
-        const text = col.toggleName ? col.toggleName : labelHash[type]
-        const selected = colIndex === active
-        return (
-          <div
-            role='radio'
-            className={selected ? 'selected' : ''}
-            key={colIndex}
-            onClick={() => selectItem(colIndex)}
-            onKeyUp={e => selectItem(colIndex, e)}
-            aria-checked={selected}
-            tabIndex={0}
-            aria-label={`Toggle ${type}`}
-          >
-            <span aria-hidden='true'>{getIcon(visualizations[col.widget])}</span> <span>{text}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-export default Toggle
+import { ConfigRow } from '../../types/ConfigRow'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { getIcon } from '../../helpers/iconHash'
+import { labelHash } from '@cdc/core/helpers/labelHash'
+import './toggle-style.css'
+import _ from 'lodash'
+
+type ToggleProps = {
+  active: number
+  row: ConfigRow
+  visualizations: Record<string, AnyVisualization>
+  setToggled: (colIndex: number) => void
+}
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
+  const selectItem = (colIndex, e = null) => {
+    if (e?.key && e.key !== 'Enter' && e.key !== ' ') return
+    if (e?.key === ' ') e.preventDefault() // Prevent page scroll
+    setToggled(colIndex)
+  }
+
+  return (
+    <div className='toggle-component' role='radiogroup' aria-label='Visualization options'>
+      {row.columns.map((col, colIndex) => {
+        if (!col.widget) return null
+        const type = visualizations[col.widget].type
+        // Get the column toggele Text or default to the type
+        const text = col.toggleName ? col.toggleName : labelHash[type]
+        const selected = colIndex === active
+        return (
+          <div
+            role='radio'
+            className={selected ? 'selected' : ''}
+            key={colIndex}
+            onClick={() => selectItem(colIndex)}
+            onKeyUp={e => selectItem(colIndex, e)}
+            aria-checked={selected}
+            tabIndex={0}
+            aria-label={`Toggle ${text}`}
+          >
+            <span aria-hidden='true'>{getIcon(visualizations[col.widget])}</span> <span>{text}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Toggle

package/src/components/VisualizationRow.tsx

@@ -223,11 +223,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             type === 'dashboardFilters' &&
             sharedFilterIndexes &&
             sharedFilterIndexes.filter(idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false).length ===
-            sharedFilterIndexes.length
+              sharedFilterIndexes.length
           const hasMarginBottom = !isLastRow && !hiddenDashboardFilters
 
-          const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
-            }`
+          const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
+            hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
+          }`
           const link =
             config.table && config.table.show && config.datasets && table && table.showDataTableLink
               ? tableLink

package/src/helpers/addValuesToDashboardFilters.ts

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
 import { handleSorting } from '@cdc/core/components/Filters'
+import { mergeCustomOrderValues } from '@cdc/core/helpers/mergeCustomOrderValues'
 
 // Gets filter values from dataset
 const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
@@ -34,13 +35,16 @@ export const addValuesToDashboardFilters = (
   data: Record<string, any[]>,
   filtersToSkip: number[] = []
 ): Array<SharedFilter> => {
-  return filters?.map((filter, index) => {
+  const result = filters?.map((filter, index) => {
     if (filtersToSkip.includes(index)) return filter
     if (filter.type === 'urlfilter') return filter
     const filterCopy = _.cloneDeep(filter)
     const filterValues = generateValuesForFilter(getSelector(filter), data)
     filterCopy.values = filterValues
 
+    // Merge new values with existing custom order (fixes DEV-11740 & DEV-11376)
+    filterCopy.orderedValues = mergeCustomOrderValues(filterValues, filterCopy.orderedValues, filterCopy.order)
+
     if (filterValues.length > 0) {
       const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
       if (queryStringFilterValue) {
@@ -50,9 +54,29 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        const hasResetLabel = filters.find(filter => filter.resetLabel)
-        const defaultValue = hasResetLabel ? hasResetLabel.resetLabel : filterCopy.active || filterCopy.values[0]
-        filterCopy.active = filterCopy.defaultValue || defaultValue
+        // Preserve existing active value if it's valid in the new filter values
+        const currentActive = filterCopy.active as string
+        const isResetLabelValue = currentActive && currentActive === filterCopy.resetLabel
+        const isCurrentActiveValid = currentActive && (filterValues.includes(currentActive) || isResetLabelValue)
+
+        // Check if this is an intentional clear (empty string, but not undefined during initial load)
+        const isIntentionalClear = currentActive === ''
+
+        // Priority: defaultValue > valid current active > reset label > first value
+        if (filterCopy.defaultValue) {
+          // If defaultValue is explicitly set, always use it
+          filterCopy.active = filterCopy.defaultValue
+        } else if (isCurrentActiveValid) {
+          // Keep the current active value if valid
+          filterCopy.active = currentActive
+        } else if (isIntentionalClear) {
+          // Don't override intentional clears
+          filterCopy.active = currentActive
+        } else {
+          // Set to reset label or first value
+          const defaultValue = filterCopy.resetLabel || filterCopy.values[0]
+          filterCopy.active = defaultValue
+        }
       }
     }
 
@@ -83,4 +107,5 @@ export const addValuesToDashboardFilters = (
 
     return handleSorting(filterCopy)
   })
+  return result
 }

package/src/helpers/apiFilterHelpers.ts

@@ -53,7 +53,31 @@ export const getParentParams = (
   })
 }
 
-export const notAllParentsSelected = parentParams => parentParams?.some(({ value }) => value === '')
+/**
+ * Checks if any parent filters are unselected or at their reset state.
+ * Returns true if at least one parent is not properly selected.
+ */
+export const hasUnselectedParents = (parentParams, sharedFilters?: SharedFilter[]): boolean => {
+  if (!parentParams) return false
+
+  return parentParams.some(({ key, value }) => {
+    // Check if value is empty
+    if (value === '') return true
+
+    // Check if value equals the parent filter's resetLabel
+    if (sharedFilters) {
+      const parentFilter = sharedFilters.find(f => f.queryParameter === key || f.apiFilter?.valueSelector === key)
+      if (parentFilter?.resetLabel && value === parentFilter.resetLabel) {
+        return true
+      }
+    }
+
+    return false
+  })
+}
+
+// Keep old name for backward compatibility
+export const notAllParentsSelected = hasUnselectedParents
 
 export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
   const { textSelector, valueSelector, subgroupTextSelector, subgroupValueSelector } = apiFilter
@@ -86,7 +110,7 @@ export const getToFetch = (
     if (apiFilterDropdowns[_key]) return // don't reload cached filter
     const parentParams = getParentParams(filter, sharedFilters)
 
-    if (notAllParentsSelected(parentParams)) return // don't send request for dependent children filter options
+    if (notAllParentsSelected(parentParams, sharedFilters)) return // don't send request for dependent children filter options
 
     const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
     toFetch[endpoint] = [_key, index]

package/src/helpers/filterData.ts

@@ -2,7 +2,11 @@ import _ from 'lodash'
 import { SharedFilter } from '../types/SharedFilter'
 import { FILTER_STYLE } from '../types/FilterStyles'
 
-const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
+/**
+ * Recursively calculates the tier/depth of a filter based on its parent dependencies.
+ * Root filters (no parents) are tier 1, children of root filters are tier 2, etc.
+ */
+const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter): number => {
   if (!sharedFilter.parents?.length) {
     return 1
   } else {
@@ -12,6 +16,10 @@ const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) =>
   }
 }
 
+/**
+ * Calculates and assigns tier values to all filters, returns the maximum tier.
+ * Mutates the filter objects by setting their tier property.
+ */
 function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   let maxTier = 1
   filters.forEach(sharedFilter => {
@@ -23,7 +31,30 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   return maxTier
 }
 
-function filter(data = [], filters: SharedFilter[], condition) {
+/**
+ * Checks if a filter is currently at its reset/incomplete state.
+ * A filter is incomplete if it's visible AND:
+ * - The active value is empty/null/undefined, OR
+ * - The active value equals the resetLabel (if one is defined)
+ */
+export const isFilterAtResetState = (filter: SharedFilter): boolean => {
+  // Only check filters that are visible to the user
+  if (!filter.showDropdown) return false
+
+  // Check if active value is empty/null/undefined
+  const isEmptyValue = filter.active === '' || filter.active === null || filter.active === undefined
+
+  // Check if active value equals the resetLabel
+  const equalsResetLabel = filter.resetLabel && filter.resetLabel === filter.active
+
+  return isEmptyValue || equalsResetLabel
+}
+
+/**
+ * Filters data by applying filters of a specific tier.
+ * Filters are applied hierarchically by tier to handle parent-child dependencies.
+ */
+function filterDataByTier(data = [], filters: SharedFilter[], tier: number) {
   const activeFilters = _.filter(filters, f => (f.resetLabel === f.active ? f.values?.includes(f.resetLabel) : true))
   return data.filter(row => {
     const foundMatchingFilter = activeFilters.find(filter => {
@@ -51,8 +82,9 @@ function filter(data = [], filters: SharedFilter[], condition) {
         isNotTheSelectedValue = subGroupActive && selectedSubGroupValue !== subGroupActive
       }
 
-      const isFirstOccurrenceOfTier = filter.tier === condition
-      if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
+      const isMatchingTier = filter.tier === tier
+      // Only apply client-side filtering for datafilter (urlfilters modify the API endpoint instead)
+      if (filter.type !== 'urlfilter' && isMatchingTier && isNotTheSelectedValue) {
         return true
       }
     })
@@ -60,17 +92,30 @@ function filter(data = [], filters: SharedFilter[], condition) {
   })
 }
 
+/**
+ * Filters data based on shared filter configurations.
+ * Returns empty array if any filter is at its reset state (incomplete selection).
+ * Otherwise applies filters hierarchically by tier to handle parent-child dependencies.
+ */
 export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] => {
   const maxTier = getMaxTierAndSetFilterTiers(filters)
 
+  // Check if any filters are currently at their reset state
+  const hasResetFilters = filters.some(isFilterAtResetState)
+
+  // If any filter is at reset state, return empty data to show "no data" message
+  if (hasResetFilters) {
+    return []
+  }
+
   for (let i = 0; i < maxTier; i++) {
     const lastIteration = i === maxTier - 1
 
-    const filteredData = filter(_data, filters, i + 1)
+    const filteredData = filterDataByTier(_data, filters, i + 1)
 
     if (lastIteration) {
-      // not sure if this last run of filter() function is necessary.
-      return filter(filteredData, filters, maxTier - 1)
+      // not sure if this last run of filterDataByTier() function is necessary.
+      return filterDataByTier(filteredData, filters, maxTier - 1)
     }
   }
 }

package/src/helpers/filterResetHelpers.ts

@@ -0,0 +1,102 @@
+import { SharedFilter } from '../types/SharedFilter'
+import { APIFilterDropdowns } from '../components/DashboardFilters'
+import { FILTER_STYLE } from '../types/FilterStyles'
+
+/**
+ * Determines the reset value for a filter based on its configuration.
+ * When forceEmpty is true (like when clicking "Clear Filters"), always returns empty.
+ * Otherwise uses priority: defaultValue > empty string (for resetLabel) > first API option
+ * Note: resetLabel is for display purposes only. When present, we return empty string
+ * so the placeholder option renders correctly in the dropdown.
+ */
+export const getFilterResetValue = (
+  filter: SharedFilter,
+  apiFilterDropdowns: APIFilterDropdowns,
+  forceEmpty: boolean = false
+): string | undefined => {
+  // When clearing filters, always reset to empty/resetLabel state
+  if (forceEmpty) {
+    // Return empty string to show reset label or placeholder, undefined falls back to first value
+    return ''
+  }
+
+  // If filter has a defaultValue, use that (for initial load)
+  if (filter.defaultValue) {
+    return filter.defaultValue
+  }
+  // If filter has a resetLabel, return empty string so placeholder renders
+  if (typeof filter.resetLabel === 'string') {
+    return ''
+  }
+  // Otherwise, use first available value if API filter
+  if (filter.apiFilter) {
+    const _key = filter.apiFilter.apiEndpoint
+    const options = apiFilterDropdowns[_key]
+    if (options && options.length > 0) {
+      return options[0].value
+    }
+  }
+  return undefined
+}
+
+/**
+ * Resets a filter's active and queuedActive values based on its filter style.
+ * Handles multi-select, nested-dropdown, and standard dropdown styles.
+ */
+export const resetFilterToValue = (
+  filter: SharedFilter,
+  resetValue: string | undefined,
+  apiFilterDropdowns: APIFilterDropdowns
+): void => {
+  // Handle multi-select filters
+  if (filter.filterStyle === FILTER_STYLE.multiSelect) {
+    filter.active = resetValue ? [resetValue] : []
+    filter.queuedActive = undefined
+  } else if (filter.filterStyle === FILTER_STYLE.nestedDropdown) {
+    // For nested dropdowns, reset both group and subgroup
+    const _key = filter.apiFilter?.apiEndpoint
+    const options = apiFilterDropdowns[_key]
+
+    // When resetValue is explicitly empty/undefined, clear both group and subgroup
+    if (resetValue === '' || resetValue === undefined) {
+      filter.active = resetValue || ''
+      filter.subGrouping.active = ''
+    } else if (options && options.length > 0) {
+      // Use specific resetValue or fall back to first option
+      const selectedOption = options.find(opt => opt.value === resetValue) || options[0]
+      filter.active = selectedOption.value
+      if (selectedOption.subOptions && selectedOption.subOptions.length > 0) {
+        filter.subGrouping.active = selectedOption.subOptions[0].value
+      } else {
+        filter.subGrouping.active = ''
+      }
+    } else {
+      // No options available, use resetValue or empty
+      filter.active = resetValue || ''
+      filter.subGrouping.active = ''
+    }
+    filter.queuedActive = undefined
+  } else {
+    // Standard dropdown
+    filter.active = resetValue
+    filter.queuedActive = undefined
+  }
+}
+
+/**
+ * Clears dropdown cache for child filters that have parent dependencies.
+ * Sets them to empty arrays so they appear disabled without loading state.
+ */
+export const clearChildFilterDropdowns = (
+  sharedFilters: SharedFilter[],
+  apiFilterDropdowns: APIFilterDropdowns
+): APIFilterDropdowns => {
+  const updatedDropdowns = { ...apiFilterDropdowns }
+  sharedFilters.forEach(filter => {
+    if (filter.apiFilter && filter.parents && filter.parents.length > 0) {
+      // Set to empty array so they show as disabled without loading state
+      updatedDropdowns[filter.apiFilter.apiEndpoint] = []
+    }
+  })
+  return updatedDropdowns
+}

package/src/helpers/getVizConfig.ts

@@ -8,7 +8,7 @@ import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 const transform = new DataTransform()
 
-export const getFootnotesVizConfig = (
+const getFootnotesVizConfig = (
   visualizationConfig: AnyVisualization,
   rowNumber: number,
   config: MultiDashboardConfig,
@@ -100,7 +100,7 @@ export const getVizConfig = (
     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'
-    visualizationConfig.data = data[dataKey] || []
+    visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =
         transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) ||