@cdc/dashboard 4.26.2 → 4.26.4

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -9,8 +9,10 @@ import NestedDropdown from '@cdc/core/components/NestedDropdown'
 import { getNestedOptions } from '@cdc/core/components/Filters/helpers/getNestedOptions'
 import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
+import Button from '@cdc/core/components/elements/Button'
 import _ from 'lodash'
 import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
+import Tabs from '@cdc/core/components/Filters/components/Tabs'
 
 type DashboardFilterProps = {
   show: number[]
@@ -63,7 +65,12 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         const urlFilterType = filter.type === 'urlfilter'
         const label = stripDuplicateLabelIncrement(filter.key || '')
 
-        if (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown)
+        if (
+          !urlFilterType &&
+          !filter.showDropdown &&
+          filter.filterStyle !== FILTER_STYLE.nestedDropdown &&
+          filter.filterStyle !== FILTER_STYLE.tabSimple
+        )
           return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
@@ -125,7 +132,10 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           )
         }
 
-        const formGroupClass = `form-group me-4 mb-1${loading ? ' loading-filter' : ''}`
+        const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
+        const formGroupClass = `form-group${isTabSimple ? '' : ' me-4'} mb-1${loading ? ' loading-filter' : ''}${
+          isTabSimple ? ' w-100' : ''
+        }`
         return (
           <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
             {label && (
@@ -133,7 +143,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                 {label}
               </label>
             )}
-            {filter.filterStyle === FILTER_STYLE.multiSelect ? (
+            {filter.filterStyle === FILTER_STYLE.tabSimple ? (
+              <Tabs
+                filter={filter}
+                index={filterIndex}
+                changeFilterActive={(index, value) => handleOnChange(index, value)}
+                loading={loading}
+              />
+            ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
               <MultiSelect
                 label={label}
                 options={multiValues}
@@ -147,6 +164,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
                 activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
+                displaySubgroupingOnly={filter.displaySubgroupingOnly}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}
@@ -197,9 +215,10 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         )
       })}
       {showSubmit && (
-        <>
-          <button
-            className='btn btn-primary mb-1 me-2'
+        <div className='dashboard-filters__actions'>
+          <Button
+            variant='primary'
+            className='mb-1 me-2'
             onClick={applyFilters}
             disabled={show.some(filterIndex => {
               const emptyFilterValues = [undefined, '', '- Select -']
@@ -210,13 +229,13 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
             })}
           >
             {applyFiltersButtonText || 'GO!'}
-          </button>
+          </Button>
           {handleReset && (
-            <button className='btn btn-link mb-1' onClick={handleReset}>
+            <Button variant='link' className='mb-1' onClick={handleReset}>
               Clear Filters
-            </button>
+            </Button>
           )}
-        </>
+        </div>
       )}
     </form>
   )

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

@@ -12,7 +12,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import FieldSetWrapper from '@cdc/core/components/EditorPanel/FieldSetWrapper'
 import FilterEditor from './components/FilterEditor'
 import { DashboardContext, DashboardDispatchContext } from '../../../DashboardContext'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { DashboardFilters } from '../../../types/DashboardFilters'
 import { SharedFilter } from '../../../types/SharedFilter'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
@@ -22,6 +22,7 @@ import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
 import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
+import Button from '@cdc/core/components/elements/Button'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -55,7 +56,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
 
   const updateFilterProp = (prop: string, index: number, value) => {
-    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = cloneDeep(sharedFilters)
     const {
       apiEndpoint: oldEndpoint,
       valueSelector: oldValueSelector,
@@ -102,6 +103,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       // changing a api filter and want to load the api data into the preview.
       // automatically dispatches SET_SHARED_FILTERS
       loadAPIFilters(newSharedFilters, {})
+    } else if (prop === 'defaultValue') {
+      newSharedFilters[index].active = value
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
     } else {
       handleSorting(newSharedFilters[index])
       dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
@@ -109,7 +113,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   }
 
   const toggleNestedQueryParameters = (index, checked: boolean) => {
-    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = cloneDeep(sharedFilters)
     const filter = newSharedFilters[index]
     const isUrlFilter = filter.type === 'urlfilter'
     const groupColumnName = isUrlFilter ? filter.apiFilter.valueSelector : filter.columnName
@@ -149,7 +153,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   }
 
   const addNewFilter = () => {
-    const _sharedFilters = _.cloneDeep(sharedFilters) || []
+    const _sharedFilters = cloneDeep(sharedFilters) || []
     const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
     const newFilter = { key: columnName, showDropdown: true, values: [] } as SharedFilter
     dispatch({ type: 'SET_SHARED_FILTERS', payload: [..._sharedFilters, newFilter] })
@@ -311,9 +315,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               )}
             </Droppable>
           </DragDropContext>
-          <button onClick={addNewFilter} className='btn btn-primary full-width'>
+          <Button variant='primary' fullWidth onClick={addNewFilter}>
             Add Filter
-          </button>
+          </Button>
           {canAddExisting ? (
             <label>
               <span className='edit-label column-heading'>
@@ -344,9 +348,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               />
             </label>
           ) : (
-            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
+            <Button variant='primary' fullWidth className='mt-2' onClick={() => setCanAddExisting(true)}>
               Add Existing Dashboard Filter
-            </button>
+            </Button>
           )}
         </AccordionItemPanel>
       </AccordionItem>

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

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 
 type APIModalProps = {
   filter: SharedFilter
@@ -16,7 +17,7 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
   const [APISubGroupValueSelector, setAPISubGroupValueSelector] = useState(filter.apiFilter?.subgroupValueSelector)
   const [APISubGroupTextSelector, setAPISubGroupTextSelector] = useState(filter.apiFilter?.subgroupTextSelector)
   return (
-    <fieldset className='mb-1 px-3 cdc-open-viz-module'>
+    <fieldset className='mb-1 px-3 cove-visualization'>
       <label className='d-block'>
         <span>API Endpoint: </span>
         <textarea
@@ -107,8 +108,9 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
         )}
       </div>
       <div className='d-flex justify-content-end mt-2'>
-        <button
-          className='btn btn-primary mt-2'
+        <Button
+          variant='primary'
+          className='mt-2'
           onClick={() =>
             updateAPIFilter(
               APIEndpoint,
@@ -120,7 +122,7 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
           }
         >
           Save
-        </button>
+        </Button>
       </div>
     </fieldset>
   )

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

@@ -1,58 +1,59 @@
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { DashboardContext } from '../../../../DashboardContext'
-import { useContext } from 'react'
-import { DashboardFilters } from '../../../../types/DashboardFilters'
-
-type DeleteFilterProps = {
-  removeFilterCompletely: (number) => void
-  removeFilterFromViz: (number) => void
-  filterIndex: number
-}
-
-const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
-  removeFilterCompletely,
-  removeFilterFromViz,
-  filterIndex
-}) => {
-  const { overlay } = useGlobalContext()
-  const { config } = useContext(DashboardContext)
-
-  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>
-        <p>{message}</p>
-        {filterUsedByMany && (
-          <button
-            className='btn btn-warning'
-            onClick={() => {
-              removeFilterFromViz(filterIndex)
-              overlay?.actions.toggleOverlay()
-            }}
-          >
-            Delete from Visualization
-          </button>
-        )}
-        <button
-          className='btn btn-danger'
-          onClick={() => {
-            removeFilterCompletely(filterIndex)
-            overlay?.actions.toggleOverlay()
-          }}
-        >
-          Delete{filterUsedByMany ? ' Completely' : ''}
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-export default DeleteFilterModal
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { DashboardContext } from '../../../../DashboardContext'
+import { useContext } from 'react'
+import { DashboardFilters } from '../../../../types/DashboardFilters'
+import Button from '@cdc/core/components/elements/Button'
+
+type DeleteFilterProps = {
+  removeFilterCompletely: (number) => void
+  removeFilterFromViz: (number) => void
+  filterIndex: number
+}
+
+const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
+  removeFilterCompletely,
+  removeFilterFromViz,
+  filterIndex
+}) => {
+  const { overlay } = useGlobalContext()
+  const { config } = useContext(DashboardContext)
+
+  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>
+        <p>{message}</p>
+        {filterUsedByMany && (
+          <Button
+            variant='warning'
+            onClick={() => {
+              removeFilterFromViz(filterIndex)
+              overlay?.actions.toggleOverlay()
+            }}
+          >
+            Delete from Visualization
+          </Button>
+        )}
+        <Button
+          variant='danger'
+          onClick={() => {
+            removeFilterCompletely(filterIndex)
+            overlay?.actions.toggleOverlay()
+          }}
+        >
+          Delete{filterUsedByMany ? ' Completely' : ''}
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default DeleteFilterModal

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

@@ -0,0 +1,127 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import FilterEditor from './FilterEditor'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const baseConfig = {
+  dashboard: {
+    sharedFilters: []
+  },
+  datasets: {
+    'nested-data.json': {
+      data: [
+        { region: 'North', year: '2023', quarter: 'Q1' },
+        { region: 'North', year: '2023', quarter: 'Q2' }
+      ]
+    }
+  },
+  rows: [],
+  visualizations: {}
+} as any
+
+const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
+  ({
+    key: 'Year and Quarter',
+    type,
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    subGrouping: {
+      columnName: 'quarter',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    },
+    ...(type === 'urlfilter'
+      ? {
+          apiFilter: {
+            apiEndpoint: '/api/nested-options',
+            valueSelector: 'year',
+            subgroupValueSelector: 'quarter'
+          }
+        }
+      : {})
+  } as any)
+
+describe('FilterEditor nested dropdown display toggle', () => {
+  it.each([
+    ['data-backed nested filters', createNestedFilter('datafilter')],
+    ['api-backed nested filters', createNestedFilter('urlfilter')]
+  ])('renders the checkbox below Create query parameters for %s', (_label, filter) => {
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    const queryParameters = screen.getByLabelText('Create query parameters')
+    const displaySubgroupingOnly = screen.getByLabelText('Display subgrouping only')
+
+    expect(displaySubgroupingOnly).not.toBeChecked()
+
+    const queryParametersLabel = queryParameters.closest('label')
+    const displaySubgroupingOnlyLabel = displaySubgroupingOnly.closest('label')
+    const isBelowQueryParameters = !!(
+      queryParametersLabel &&
+      displaySubgroupingOnlyLabel &&
+      queryParametersLabel.compareDocumentPosition(displaySubgroupingOnlyLabel) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+
+    expect(isBelowQueryParameters).toBe(true)
+
+    fireEvent.click(displaySubgroupingOnly)
+
+    expect(updateFilterProp).toHaveBeenCalledWith('displaySubgroupingOnly', true)
+  })
+
+  it.each([
+    [
+      'data-backed non-nested filters',
+      {
+        ...createNestedFilter('datafilter'),
+        filterStyle: 'dropdown'
+      }
+    ],
+    [
+      'api-backed non-nested filters',
+      {
+        ...createNestedFilter('urlfilter'),
+        filterStyle: 'dropdown'
+      }
+    ]
+  ])('does not render the checkbox for %s', (_label, filter) => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
+  })
+})

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

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
 import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
@@ -20,6 +19,7 @@ import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
 import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
+import Button from '@cdc/core/components/elements/Button'
 
 type FilterEditorProps = {
   config: DashboardConfig
@@ -57,7 +57,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const getVizTitle = (viz, vizKey) => {
     let vizName = viz.general?.title || viz.title || vizKey
     if (viz.visualizationType === 'markup-include') {
-      vizName = viz.contentEditor.title || vizKey
+      vizName = viz.contentEditor?.title || vizKey
     }
     return vizName
   }
@@ -105,7 +105,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
       let _dataSet = config.datasets[dataKey]
       if (!_dataSet.data && _dataSet.dataUrl) {
         setDataFiltersLoading(true)
-        let data = await fetchRemoteData(_dataSet.dataUrl)
+        let data = (await fetchRemoteData(_dataSet.dataUrl)).data
         if (_dataSet.dataDescription && data && data.length > 0) {
           try {
             data = transform.autoStandardize(data)
@@ -420,12 +420,13 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                   </div>
                 )}
 
-                <button
+                <Button
+                  variant='primary'
+                  className='mt-2'
                   onClick={() => handleEditAPIValues(filter, isNestedDropdown, updateAPIFilter)}
-                  className='btn btn-primary mt-2'
                 >
                   Edit API Values
-                </button>
+                </Button>
               </div>
 
               <label>
@@ -452,6 +453,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 </span>
               </label>
 
+              {isNestedDropdown && (
+                <label>
+                  <input
+                    type='checkbox'
+                    checked={!!filter.displaySubgroupingOnly}
+                    aria-label='Display subgrouping only'
+                    onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                  />
+                  <span> Display subgrouping only</span>
+                </label>
+              )}
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -597,6 +610,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                       </Tooltip>
                     </span>
                   </label>
+
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={!!filter.displaySubgroupingOnly}
+                      aria-label='Display subgrouping only'
+                      onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                    />
+                    <span> Display subgrouping only</span>
+                  </label>
                 </>
               )}
               <Select

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

@@ -1,6 +1,7 @@
 import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import uniq from 'lodash/uniq'
 import { SubGrouping, OrderBy } from '@cdc/core/types/VizFilter'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import { handleSorting } from '@cdc/core/components/Filters/helpers/handleSorting'
@@ -72,7 +73,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     const order = subGrouping?.order || 'asc'
 
     const valuesLookup = filter.values.reduce((acc, groupName) => {
-      const rawValues: string[] = _.uniq(
+      const rawValues: string[] = uniq(
         config.datasets[selectedOptionDatasetName].data
           .map(d => {
             return d[filter.columnName] === groupName ? d[newColumnName] : ''
@@ -104,7 +105,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   // Handle group order change (asc/desc/cust)
   const handleGroupingOrderBy = (order: OrderBy) => {
     const groupSortObject = {
-      values: _.cloneDeep(filter.values),
+      values: cloneDeep(filter.values),
       order
     }
     const { values: newOrderedValues } = handleSorting(groupSortObject)
@@ -128,7 +129,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleGroupingCustomOrder = (sourceIndex: number, destinationIndex: number) => {
     if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
 
-    const orderedValues = _.cloneDeep(filter.orderedValues || filter.values)
+    const orderedValues = cloneDeep(filter.orderedValues || filter.values)
     const [movedItem] = orderedValues.splice(sourceIndex, 1)
     orderedValues.splice(destinationIndex, 0, movedItem)
 
@@ -143,7 +144,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleSubGroupingOrderBy = (order: OrderBy) => {
     const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
       const subGroup = subGrouping.valuesLookup[groupName]
-      const { values: sortedValues } = handleSorting({ values: _.cloneDeep(subGroup.values), order })
+      const { values: sortedValues } = handleSorting({ values: cloneDeep(subGroup.values), order })
 
       acc[groupName] = {
         values: sortedValues,
@@ -170,11 +171,11 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   ) => {
     if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
 
-    const updatedGroupOrderedValues = _.cloneDeep(currentOrderedValues)
+    const updatedGroupOrderedValues = cloneDeep(currentOrderedValues)
     const [movedItem] = updatedGroupOrderedValues.splice(sourceIndex, 1)
     updatedGroupOrderedValues.splice(destinationIndex, 0, movedItem)
 
-    const newSubGrouping = _.cloneDeep(subGrouping)
+    const newSubGrouping = cloneDeep(subGrouping)
     newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
     newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
     newSubGrouping.order = 'cust'
@@ -241,7 +242,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
         />
       )}
 
-      {/* Default Value for Sub Group */}
+      {/* Default Value for Subgroup */}
       {subGrouping?.columnName && (filter.defaultValue || filter.active) && subGrouping.valuesLookup && (
         <Select
           value={subGrouping.defaultValue}
@@ -254,7 +255,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             const newSubGrouping = { ...subGrouping, defaultValue: value }
             updateFilterProp('subGrouping', newSubGrouping)
           }}
-          label={'Sub Group Default Value'}
+          label={'Subgroup Default Value'}
           initial={'Select'}
         />
       )}

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -7,7 +7,7 @@ import { FilterBehavior } from '../../helpers/FilterBehavior'
 import { getFilteredData } from '../../helpers/getFilteredData'
 import { DashboardFilters } from '../../types/DashboardFilters'
 import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationWrapper, Sidebar, Responsive } from '@cdc/core/components/Layout'
 import DashboardFiltersEditor from './DashboardFiltersEditor'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
@@ -302,24 +302,24 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
-    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
+    <VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
-        <Layout.Sidebar
+        <Sidebar
           displayPanel={displayPanel}
           isDashboard={true}
           title={'Configure Dashboard Filters'}
           onBackClick={onBackClick}
         >
           <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
-        </Layout.Sidebar>
+        </Sidebar>
       )}
 
       {!displayNone && (
-        <Layout.Responsive isEditor={isEditor}>
+        <Responsive isEditor={isEditor}>
           <div
             className={`${
               isEditor ? ' is-editor' : ''
-            } cove-component__content col-12 cove-dashboard-filters-container`}
+            } cove-visualization__inner cove-visualization__body col-12 cove-dashboard-filters-container`}
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
@@ -337,9 +337,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               }
             />
           </div>
-        </Layout.Responsive>
+        </Responsive>
       )}
-    </Layout.VisualizationWrapper>
+    </VisualizationWrapper>
   )
 }