@cdc/dashboard 4.24.12 → 4.25.2-25

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -37,6 +37,11 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     handleOnChange(fieldName, value) // fieldName is the sharedFilterIndex
   }
 
+  const stripDuplicateLabelIncrement = (label: string): string => {
+    // converts 'Label (1)' to 'Label'
+    return label.replace(/\s\(\d+\)$/, '')
+  }
+
   const getNestedDropdownOptions = (options?: DropdownOptions): NestedOptions => {
     if (!options) return []
     const getValueTextTuple = (value: string, text?: string): ValueTextPair => (text ? [value, text] : [value])
@@ -50,13 +55,13 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     <form className='d-flex flex-wrap'>
       {sharedFilters.map((filter, filterIndex) => {
         const urlFilterType = filter.type === 'urlfilter'
-        const label = filter.key
+        const label = stripDuplicateLabelIncrement(filter.key || '')
 
         if (
           (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
           (show && !show.includes(filterIndex))
         )
-          return <React.Fragment key={`${label}-filtersection-${filterIndex}-option`} />
+          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
         const _key = filter.apiFilter?.apiEndpoint
@@ -89,7 +94,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           }
         } else {
           // Data Filter
-          filter.values?.forEach((filterOption, index) => {
+          const orderedFilterValues = filter.orderedValues || filter.values
+          orderedFilterValues?.forEach((filterOption, index) => {
             const labeledOpt = filter.labels && filter.labels[filterOption]
             const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
 
@@ -122,12 +128,11 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           )
         }
 
-        const formGroupClass = `form-group mr-3 mb-1${loading ? ' loading-filter' : ''}`
-
+        const formGroupClass = `form-group me-4 mb-1${loading ? ' loading-filter' : ''}`
         return (
-          <div className={formGroupClass} key={`${label}-filtersection-${filterIndex}`}>
+          <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
             {label && (
-              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${filterIndex}`}>
+              <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
                 {label}
               </label>
             )}
@@ -143,8 +148,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
               />
             ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
               <NestedDropdown
-                activeGroup={filter.active as string}
-                activeSubGroup={_key ? filter.subGrouping?.active : activeSubGroupValue}
+                activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
+                activeSubGroup={_key ? filter.queuedActive?.[1] || filter.subGrouping?.active : activeSubGroupValue}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -20,6 +20,7 @@ import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import DeleteFilterModal from './components/DeleteFilterModal'
 import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboardFilters'
 import { FILTER_STYLE } from '../../../types/FilterStyles'
+import { handleSorting } from '@cdc/core/components/Filters'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -40,7 +41,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       Number
     )
     return config.dashboard.sharedFilters
-      .map<[number, string]>(({ key }, i) => [i, key])
+      ?.map<[number, string]>(({ key }, i) => [i, key])
       .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
       .map(([filterIndex, filterName]) => (
         <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>
@@ -60,11 +61,11 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       subgroupTextSelector: oldSubgroupTextSelector
     } = sharedFilters[index].apiFilter || {}
     const apiFilterChanged =
-      value.apiEndpoint !== oldEndpoint ||
-      value.valueSelector !== oldValueSelector ||
-      value.textSelector !== oldTextSelector ||
-      value.subgroupValueSelector !== oldSubgroupValueSelector ||
-      value.subgroupTextSelector !== oldSubgroupTextSelector
+      value?.apiEndpoint !== oldEndpoint ||
+      value?.valueSelector !== oldValueSelector ||
+      value?.textSelector !== oldTextSelector ||
+      value?.subgroupValueSelector !== oldSubgroupValueSelector ||
+      value?.subgroupTextSelector !== oldSubgroupTextSelector
 
     newSharedFilters[index][prop] = value
     if (prop === 'columnName') {
@@ -98,10 +99,22 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       // automatically dispatches SET_SHARED_FILTERS
       loadAPIFilters(newSharedFilters, {})
     } else {
+      handleSorting(newSharedFilters[index])
       dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
     }
   }
 
+  const toggleNestedQueryParameters = (index, checked: boolean) => {
+    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const filter = newSharedFilters[index]
+    const isUrlFilter = filter.type === 'urlfilter'
+    const groupColumnName = isUrlFilter ? filter.apiFilter.valueSelector : filter.columnName
+    const subGroupColumnName = isUrlFilter ? filter.apiFilter.subgroupValueSelector : filter.subGrouping.columnName
+    filter.setByQueryParameter = checked ? groupColumnName : undefined
+    filter.subGrouping.setByQueryParameter = checked ? subGroupColumnName : undefined
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+  }
+
   const removeFilter = index => {
     const newSharedFilters = _.cloneDeep(sharedFilters)
 
@@ -228,9 +241,13 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               >
                 <FilterEditor
                   filter={filter}
+                  filterIndex={index}
                   updateFilterProp={(name, value) => {
                     updateFilterProp(name, index, value)
                   }}
+                  toggleNestedQueryParameters={checked => {
+                    toggleNestedQueryParameters(index, checked)
+                  }}
                   config={config}
                 />
               </FieldSetWrapper>
@@ -274,9 +291,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </select>
             </label>
           ) : (
-
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
-
               Add Existing Dashboard Filter
             </button>
           )}

package/src/components/DashboardFilters/DashboardFiltersEditor/components/DeleteFilterModal.tsx

@@ -10,12 +10,22 @@ type DeleteFilterProps = {
   filterIndex: number
 }
 
-const DeleteFilterModal: React.FC<DeleteFilterProps> = ({ removeFilterCompletely, removeFilterFromViz, filterIndex }) => {
+const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
+  removeFilterCompletely,
+  removeFilterFromViz,
+  filterIndex
+}) => {
   const { overlay } = useGlobalContext()
   const { config } = useContext(DashboardContext)
-  const filterUsedByMany = Object.values(config.visualizations).filter(viz => (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))).length > 1
 
-  const message = filterUsedByMany ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.' : 'Are you sure you want to delete this filter?'
+  const filterUsedByMany =
+    Object.values(config.visualizations).filter(viz => {
+      return (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))
+    }).length > 1
+
+  const message = filterUsedByMany
+    ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.'
+    : 'Are you sure you want to delete this filter?'
   return (
     <Modal showClose={true}>
       <Modal.Content>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -1,10 +1,16 @@
 import _ from 'lodash'
 import { APIFilter } from '../../../../types/APIFilter'
 import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
-import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { useEffect, useMemo, useState } from 'react'
 import { SharedFilter } from '../../../../types/SharedFilter'
+
+// Add defaultValue to SharedFilter type
+interface SharedFilter {
+  defaultValue?: string
+  resetLabel?: string
+}
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -14,14 +20,24 @@ import { Visualization } from '@cdc/core/types/Visualization'
 import { hasDashboardApplyBehavior } from '../../../../helpers/hasDashboardApplyBehavior'
 import NestedDropDownDashboard from './NestedDropDownDashboard'
 import { FILTER_STYLE } from '../../../../types/FilterStyles'
+import { filterOrderOptions } from '@cdc/core/components/Filters'
+import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 
 type FilterEditorProps = {
   config: DashboardConfig
   filter: SharedFilter
+  filterIndex: number
   updateFilterProp: (name: keyof SharedFilter, value: any) => void
+  toggleNestedQueryParameters: (checked: boolean) => void
 }
 
-const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilterProp }) => {
+const FilterEditor: React.FC<FilterEditorProps> = ({
+  filter,
+  filterIndex,
+  config,
+  updateFilterProp,
+  toggleNestedQueryParameters
+}) => {
   const [columns, setColumns] = useState<string[]>([])
   const transform = new DataTransform()
   const filterStyles = Object.values(FILTER_STYLE)
@@ -59,6 +75,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     return [nameLookup, [...vizOptions, ...rowsNotSelected]]
   }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
 
+  const useParameters = useMemo(() => {
+    if (filter.subGrouping) return !!(filter.setByQueryParameter && filter.subGrouping?.setByQueryParameter)
+    return !!filter.setByQueryParameter
+  }, [config, filterIndex])
+
   const loadColumnData = async () => {
     const columns = {}
     const dataKeys = Object.keys(config.datasets)
@@ -94,21 +115,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     loadColumnData()
   }, [config.datasets])
 
-  const addFilterUsedBy = (filter, value) => {
-    if (value === '') return
-    if (!filter.usedBy) filter.usedBy = []
-    filter.usedBy.push(value)
-    updateFilterProp('usedBy', filter.usedBy)
-  }
-
-  const removeFilterUsedBy = (filter, value) => {
-    let usedByIndex = filter.usedBy.indexOf(value)
-    if (usedByIndex !== -1) {
-      filter.usedBy.splice(usedByIndex, 1)
-      updateFilterProp('usedBy', filter.usedBy)
-    }
-  }
-
   const updateAPIFilter = (key: keyof APIFilter, value: string | boolean) => {
     const filterClone = _.cloneDeep(filter)
     const _filter = filterClone.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
@@ -116,8 +122,12 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     updateFilterProp('apiFilter', newAPIFilter)
   }
 
-  const handleFilterStyleChange = value => {
-    updateFilterProp('filterStyle', value)
+  const updateLabel = (value: string) => {
+    const duplicateLabels = config.dashboard.sharedFilters.filter(
+      (filter, i) => filter.key === value && filterIndex !== i
+    )
+    // If there are duplicate labels, append the number of duplicates to the label similar functionality to duplicate file names
+    updateFilterProp('key', duplicateLabels.length ? value + ` (${duplicateLabels.length})` : value)
   }
 
   const isNestedDropDown = filter.filterStyle === FILTER_STYLE.nestedDropdown
@@ -215,7 +225,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
             <span className='edit-label column-heading'>Filter Style: </span>
             <select
               value={filter.filterStyle || FILTER_STYLE.dropdown}
-              onChange={e => handleFilterStyleChange(e.target.value)}
+              onChange={e => updateFilterProp('filterStyle', e.target.value)}
             >
               {filterStyles.map(dataKey => (
                 <option value={dataKey} key={`filter-style-select-item-${dataKey}`}>
@@ -226,7 +236,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
           </label>
           {filter.filterStyle === FILTER_STYLE.dropdown && (
             <label>
-              <span className='mr-1'>Show Dropdown</span>
+              <span className='me-1'>Show Dropdown</span>
               <input
                 type='checkbox'
                 checked={filter.showDropdown}
@@ -240,7 +250,9 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
           <TextField
             label='Label'
             value={filter.key}
-            updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
+            updateField={(_section, _subSection, _key, value) => {
+              updateLabel(value)
+            }}
           />
           {filter.filterStyle === FILTER_STYLE.multiSelect && (
             <TextField
@@ -361,6 +373,30 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
 
               {isNestedDropDown && <APIInputs isSubgroup={true} />}
 
+              <label>
+                <input
+                  type='checkbox'
+                  checked={useParameters}
+                  aria-label='Create query parameters'
+                  disabled={!filter.apiFilter?.valueSelector && !filter.apiFilter?.subgroupValueSelector}
+                  onChange={e => toggleNestedQueryParameters(e.target.checked)}
+                />
+                <span>
+                  {' '}
+                  Create query parameters{' '}
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Query parameters will be added to the URL which correspond to the respective value selector.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>
+              </label>
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -409,12 +445,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 value={filter.resetLabel || ''}
                 updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
               />
-
-              <TextField
-                label='Default Value Set By Query String Parameter: '
-                value={filter.setByQueryParameter || ''}
-                updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
-              />
             </>
           )}
 
@@ -439,6 +469,38 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                     </select>
                   </label>
 
+                  <Select
+                    value={filter.defaultValue}
+                    options={
+                      filter.resetLabel
+                        ? [filter.resetLabel, ...config.dashboard.sharedFilters[filterIndex].values]
+                        : config.dashboard.sharedFilters[filterIndex].values
+                    }
+                    updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
+                    label={'Filter Default Value'}
+                    initial={'Select'}
+                  />
+
+                  <Select
+                    value={filter.order || 'asc'}
+                    options={filterOrderOptions}
+                    updateField={(_section, _subSection, _key, value) => updateFilterProp('order', value)}
+                    label={'Filter Order'}
+                  />
+
+                  {/* if custom order is set use react-dnd library to sort the values */}
+                  {filter.order === 'cust' && (
+                    <FilterOrder
+                      orderedValues={filter.orderedValues || filter.values}
+                      handleFilterOrder={(index1, index2) => {
+                        const values = [...filter.values]
+                        const [removed] = values.splice(index1, 1)
+                        values.splice(index2, 0, removed)
+                        updateFilterProp('orderedValues', values)
+                      }}
+                    />
+                  )}
+
                   <label>
                     <span className='edit-label column-heading'>Show Dropdown</span>
                     <input
@@ -451,14 +513,39 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                   </label>
                 </>
               ) : (
-                <NestedDropDownDashboard
-                  filter={filter}
-                  updateFilterProp={(name, value) => {
-                    updateFilterProp(name, value)
-                  }}
-                  isDashboard={true}
-                  config={config}
-                />
+                <>
+                  <NestedDropDownDashboard
+                    filter={filter}
+                    updateFilterProp={(name, value) => {
+                      updateFilterProp(name, value)
+                    }}
+                    isDashboard={true}
+                    config={config}
+                  />
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={useParameters}
+                      aria-label='Create query parameters'
+                      disabled={!filter.columnName || !filter.subGrouping?.columnName}
+                      onChange={e => toggleNestedQueryParameters(e.target.checked)}
+                    />
+                    <span>
+                      {' '}
+                      Create query parameters{' '}
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            Query parameters will be added to the URL which correspond to the respective column name.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
+                  </label>
+                </>
               )}
               <label>
                 <span className='edit-label column-heading'>Set By: </span>
@@ -527,11 +614,13 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 </select>
               </label>
 
-              <TextField
-                label='Default Value Set By Query String Parameter: '
-                value={filter.setByQueryParameter || ''}
-                updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
-              />
+              {!isNestedDropDown && (
+                <TextField
+                  label='Default Value Set By Query String Parameter: '
+                  value={filter.setByQueryParameter || ''}
+                  updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
+                />
+              )}
             </>
           )}
         </>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -22,13 +22,16 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const datasets = Object.keys(config.datasets)
   const columnNameOptionsInDataset = []
   datasets.map(datasetKey => {
-    const columnNamesInDataset = Object.keys(config.datasets[datasetKey].data[0])
-    columnNamesInDataset.forEach(columnName =>
-      columnNameOptionsInDataset.push({
-        datasetKey,
-        columnName
-      })
-    )
+    const data = config.datasets[datasetKey].data
+    if (data) {
+      const columnNamesInDataset = Object.keys(data[0])
+      columnNamesInDataset.forEach(columnName =>
+        columnNameOptionsInDataset.push({
+          datasetKey,
+          columnName
+        })
+      )
+    }
   })
 
   const subGroupingColumnNameOptions = []

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -14,6 +14,7 @@ import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavi
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
 import './dashboardfilter.styles.css'
+import { updateChildFilters } from '../../helpers/updateChildFilters'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -64,17 +65,15 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         const queryParams = getQueryParams()
         let needsQueryUpdate = false
         dashboardConfig.sharedFilters.forEach(sharedFilter => {
-          if (sharedFilter.queuedActive) {
-            applyQueuedActive(sharedFilter)
-            if (
-              sharedFilter.setByQueryParameter &&
-              queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
-            ) {
-              queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
-                ? sharedFilter.active.join(',')
-                : sharedFilter.active
-              needsQueryUpdate = true
-            }
+          if (sharedFilter.queuedActive) applyQueuedActive(sharedFilter)
+          if (
+            sharedFilter.setByQueryParameter &&
+            queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
+          ) {
+            queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
+              ? sharedFilter.active.join(',')
+              : sharedFilter.active
+            needsQueryUpdate = true
           }
         })
 
@@ -183,7 +182,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
-              filters={dashboardConfig.dashboard.sharedFilters || []}
+              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
               apiFilterDropdowns={apiFilterDropdowns}
               handleOnChange={handleOnChange}
               showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -1,7 +1,7 @@
 .cove-dashboard-filters-container {
   :is(label) {
-    margin-bottom: 0;
-    margin-top: 0.5rem;
+    font-size: var(--filter-label-font-size);
+    font-weight: 700;
   }
   .btn {
     /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */

package/src/components/ExpandCollapseButtons.tsx

@@ -9,7 +9,7 @@ const ExpandCollapseButtons: React.FC<ExpandCollapseButtonsProps> = ({ setAllExp
         <button className='btn expand-collapse-buttons' onClick={() => setAllExpanded(false)}>
           - Collapse All
         </button>
-        <button className='btn expand-collapse-buttons mr-2' onClick={() => setAllExpanded(true)}>
+        <button className='btn expand-collapse-buttons me-2' onClick={() => setAllExpanded(true)}>
           + Expand All
         </button>
       </div>

package/src/components/Header/Header.tsx

@@ -6,7 +6,6 @@ import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
 import _ from 'lodash'
-import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
 
 type HeaderProps = {
   back?: any
@@ -29,7 +28,7 @@ const Header = (props: HeaderProps) => {
     // the Widget component will do a data fetch if no data is available for the visualization
     // this is intended to help visualization developers.
     type SampleData = Record<string, { sample: boolean }> & Object[]
-    if (Object.values(data).some((d: SampleData) => d.sample)) {
+    if (Object.values(data).some((d: SampleData) => d?.sample)) {
       const sampleDataRemoved = Object.keys(data).reduce((acc, key) => {
         if ((data[key] as SampleData).sample) {
           acc[key] = []

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -86,7 +86,7 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
         ) : (
           <>
             {name}
-            <button className='btn btn-danger border-0 ml-1' onClick={handleRemove}>
+            <button className='btn btn-danger border-0 ms-1' onClick={handleRemove}>
               X
             </button>
           </>
@@ -117,7 +117,7 @@ const MultiConfigTabs = () => {
 
   if (!config.multiDashboards) return null
   return (
-    <ul className='nav nav-tabs multi-config-tabs'>
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
       {tabs.map((tab, index) => (
         <Tab
           key={tab + index}

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -21,7 +21,7 @@ const MultiTabs = () => {
 
   if (!config.multiDashboards) return null
   return (
-    <ul className='nav nav-tabs multi-config-tabs'>
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
       {tabs.map((tab, index) => (
         <li key={tab + index} className='nav-item'>
           <a

package/src/components/VisualizationRow.tsx

@@ -3,7 +3,6 @@ import React, { useContext, useMemo } from 'react'
 import Toggle from './Toggle'
 import _ from 'lodash'
 import { ConfigRow } from '../types/ConfigRow'
-import CdcChart from '@cdc/chart/src/CdcChart'
 import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
 import CdcMap from '@cdc/map/src/CdcMap'
 import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
@@ -18,6 +17,7 @@ import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAl
 import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
 import { DashboardFilters } from '../types/DashboardFilters'
 import { hasDashboardApplyBehavior } from '../helpers/hasDashboardApplyBehavior'
+import CdcChart from '@cdc/chart/src/CdcChartComponent'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -68,6 +68,7 @@ type VizRowProps = {
   updateChildConfig: Function
   apiFilterDropdowns: APIFilterDropdowns
   currentViewport: ViewPort
+  isLastRow: boolean
 }
 
 const VisualizationRow: React.FC<VizRowProps> = ({
@@ -80,7 +81,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   setSharedFilter,
   updateChildConfig,
   apiFilterDropdowns,
-  currentViewport
+  currentViewport,
+  isLastRow
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
@@ -156,11 +158,19 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
 
+          const hiddenDashboardFilters =
+            visualizationConfig.type === 'dashboardFilters' &&
+            visualizationConfig.sharedFilterIndexes &&
+            visualizationConfig.sharedFilterIndexes.filter(
+              idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false
+            ).length === visualizationConfig.sharedFilterIndexes.length
+          const hasMarginBottom = !isLastRow && !hiddenDashboardFilters
+
           return (
             <div
               key={`vis__${index}__${colIndex}`}
               className={`col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
-                hideVisualization ? ' hide-parent-visualization' : ' mt-5 p-1'
+                hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
               }`}
             >
               {row.toggle && !hideVisualization && (