@cdc/dashboard 4.26.1 → 4.26.3

package/src/_stories/_mock/tab-simple-filter.json

@@ -0,0 +1,153 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "category",
+        "showDropdown": true,
+        "filterStyle": "tab-simple",
+        "values": ["Category A", "Category B", "Category C"],
+        "orderedValues": ["Category A", "Category B", "Category C"],
+        "type": "datafilter",
+        "columnName": "category",
+        "tier": 1,
+        "order": "cust",
+        "defaultValue": "Category A"
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "dashboardFilters1"
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "chart1"
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "dashboardFilters1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "uid": "dashboardFilters1",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "visualizationType": "dashboardFilters"
+    },
+    "chart1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "uid": "chart1",
+      "type": "chart",
+      "visualizationType": "Bar",
+      "title": "Sales by Category",
+      "showTitle": true,
+      "theme": "theme-blue",
+      "animate": false,
+      "dataKey": "./tab-simple-data.json",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "xAxis": {
+        "dataKey": "product",
+        "type": "categorical",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "axisPadding": 200,
+        "padding": 5,
+        "sortDates": false,
+        "anchors": []
+      },
+      "yAxis": {
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "gridLines": false,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "anchors": [],
+        "categories": []
+      },
+      "series": [
+        {
+          "dataKey": "sales",
+          "type": "Bar",
+          "axis": "Left",
+          "tooltip": true
+        }
+      ],
+      "orientation": "vertical",
+      "general": {
+        "showZeroValueData": true,
+        "palette": {
+          "name": "qualitative_bold",
+          "version": "1.0"
+        }
+      },
+      "columns": {},
+      "legend": {
+        "hide": true
+      },
+      "table": {
+        "label": "Data Table",
+        "show": false,
+        "sharedFilterColumns": ["category"]
+      },
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "visual": {
+        "border": true,
+        "accent": true,
+        "background": true
+      },
+      "tooltips": {
+        "opacity": 90,
+        "singleSeries": false
+      },
+      "barThickness": 0.35
+    }
+  },
+  "datasets": {
+    "./tab-simple-data.json": {
+      "data": [
+        { "category": "Category A", "product": "Widget", "sales": "120" },
+        { "category": "Category A", "product": "Gadget", "sales": "85" },
+        { "category": "Category A", "product": "Doohickey", "sales": "210" },
+        { "category": "Category B", "product": "Widget", "sales": "95" },
+        { "category": "Category B", "product": "Gadget", "sales": "150" },
+        { "category": "Category B", "product": "Doohickey", "sales": "60" },
+        { "category": "Category C", "product": "Widget", "sales": "175" },
+        { "category": "Category C", "product": "Gadget", "sales": "110" },
+        { "category": "Category C", "product": "Doohickey", "sales": "140" }
+      ],
+      "dataFileSize": 500,
+      "dataFileName": "./tab-simple-data.json",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "JSON",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "version": "4.26.1"
+}

package/src/_stories/_mock/tp5-test.json

@@ -0,0 +1,267 @@
+{
+  "type": "dashboard",
+  "title": "TP5 Alignment Test Dashboard",
+  "description": "Testing alignment of TP5 Waffles, Data Bites, and Gauges",
+  "data": [
+    {
+      "Category": "Adults",
+      "Vaccination Rate": "68.5",
+      "Insured Rate": "87.2",
+      "Screening Rate": "72.8"
+    },
+    {
+      "Category": "Seniors",
+      "Vaccination Rate": "82.3",
+      "Insured Rate": "95.1",
+      "Screening Rate": "84.6"
+    },
+    {
+      "Category": "Youth",
+      "Vaccination Rate": "54.2",
+      "Insured Rate": "92.4",
+      "Screening Rate": "65.3"
+    }
+  ],
+  "dashboard": {
+    "filters": []
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "waffle1" },
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "waffle3" }
+    ],
+    [
+      { "width": 4, "widget": "bite1" },
+      { "width": 4, "widget": "bite2" },
+      { "width": 4, "widget": "bite3" }
+    ],
+    [
+      { "width": 4, "widget": "gauge1" },
+      { "width": 4, "widget": "gauge2" },
+      { "width": 4, "widget": "gauge3" }
+    ]
+  ],
+  "visualizations": {
+    "waffle1": {
+      "uid": "waffle1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "shape": "square",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle2": {
+      "uid": "waffle2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "shape": "person",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle3": {
+      "uid": "waffle3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "shape": "circle",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge1": {
+      "uid": "gauge1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge2": {
+      "uid": "gauge2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge3": {
+      "uid": "gauge3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "bite1": {
+      "uid": "bite1",
+      "type": "data-bite",
+      "title": "Vaccination Coverage",
+      "biteStyle": "tp5",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-blue",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite2": {
+      "uid": "bite2",
+      "type": "data-bite",
+      "title": "Health Insurance Coverage Rate",
+      "biteStyle": "tp5",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-teal",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite3": {
+      "uid": "bite3",
+      "type": "data-bite",
+      "title": "Cancer Screening Completion",
+      "biteStyle": "tp5",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-purple",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    }
+  }
+}
+

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -11,6 +11,7 @@ import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
 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 +64,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 +131,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 +142,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}

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'
@@ -52,9 +52,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
 
   const openControls = useState({})
   const [canAddExisting, setCanAddExisting] = useState(false)
+  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,
@@ -101,6 +102,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 })
@@ -108,7 +112,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
@@ -148,7 +152,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] })
@@ -255,6 +259,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                         key={filter.key + index}
                         draggableId={`filter-${filter.key}-${index}`}
                         index={filterIndex}
+                        isDragDisabled={isNestedDragHovered}
                       >
                         {(provided, snapshot) => (
                           <div
@@ -296,6 +301,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                                   toggleNestedQueryParameters(index, checked)
                                 }}
                                 config={config}
+                                onNestedDragAreaHover={setIsNestedDragHovered}
                               />
                             </FieldSetWrapper>
                           </div>

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

@@ -16,7 +16,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

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'
@@ -27,6 +26,7 @@ type FilterEditorProps = {
   filterIndex: number
   updateFilterProp: (name: keyof SharedFilter, value: any) => void
   toggleNestedQueryParameters: (checked: boolean) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const FilterEditor: React.FC<FilterEditorProps> = ({
@@ -34,7 +34,8 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   filterIndex,
   config,
   updateFilterProp,
-  toggleNestedQueryParameters
+  toggleNestedQueryParameters,
+  onNestedDragAreaHover
 }) => {
   const [columns, setColumns] = useState<string[]>([])
   const [dataFiltersLoading, setDataFiltersLoading] = useState(false)
@@ -103,7 +104,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)
@@ -546,6 +547,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                         values.splice(index2, 0, removed)
                         updateFilterProp('orderedValues', values)
                       }}
+                      onNestedDragAreaHover={onNestedDragAreaHover}
                     />
                   )}
 
@@ -569,6 +571,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     }}
                     isDashboard={true}
                     config={config}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                   <label>
                     <input

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'
@@ -12,13 +13,15 @@ type NestedDropDownEditorDashboardProps = {
   filter: SharedFilter
   isDashboard: boolean
   updateFilterProp: Function
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   filter,
   config,
   isDashboard = false,
-  updateFilterProp
+  updateFilterProp,
+  onNestedDragAreaHover
 }) => {
   const subGrouping = filter?.subGrouping
 
@@ -70,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] : ''
@@ -102,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)
@@ -126,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)
 
@@ -141,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,
@@ -168,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'
@@ -270,6 +273,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             <FilterOrder
               orderedValues={filter.orderedValues || filter.values}
               handleFilterOrder={handleGroupingCustomOrder}
+              onNestedDragAreaHover={onNestedDragAreaHover}
             />
           )}
         </div>
@@ -298,6 +302,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
                     handleFilterOrder={(sourceIndex, destinationIndex) => {
                       handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
                     }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                 </div>
               )