@cdc/dashboard 4.25.1 → 4.25.3-6

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

@@ -0,0 +1,56 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { updateChildFilters } from '../updateChildFilters'
+
+describe('updateChildFilters', () => {
+  it('should filter data based on the provided filters', () => {
+    const filters = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts']
+      }
+    ] as SharedFilter[]
+    const data = {
+      vizKey: [
+        [
+          { name: 'John', lastName: 'Deer' },
+          { name: 'John', lastName: 'Roberts' },
+          { name: 'Kelly', lastName: 'Adams' },
+          { name: 'Norman', lastName: 'Sally' },
+          { name: 'Jane', lastName: 'Gorman' }
+        ]
+      ]
+    }
+
+    let exprectedResult = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts'] // updated values only
+      }
+    ]
+    const result = updateChildFilters(filters, data)
+
+    expect(result).toEqual(exprectedResult)
+  })
+})

package/src/helpers/updateChildFilters.ts

@@ -0,0 +1,50 @@
+import { SharedFilter } from '../types/SharedFilter'
+import _ from 'lodash'
+
+export const updateChildFilters = (newSharedFilters: SharedFilter[], data: Record<string, any>): SharedFilter[] => {
+  const dataSet = Object.values(data).flat()
+
+  // Find indexes of all child filters
+  const childFilterIndexes: number[] = newSharedFilters
+    .map((filter, index) => (filter.type === 'datafilter' && filter.parents ? index : -1))
+    .filter(index => index !== -1)
+  if (childFilterIndexes.length === 0) return newSharedFilters
+
+  // deep copy of the shared filters
+  const updatedFilters = _.cloneDeep(newSharedFilters)
+
+  // Update each child filter
+  childFilterIndexes.forEach(childIndex => {
+    const childFilter: SharedFilter = newSharedFilters[childIndex]
+    const parentFilter: SharedFilter = newSharedFilters.find(
+      filter => String(childFilter.parents) === String(filter.key)
+    )
+
+    if (parentFilter) {
+      // Filter dataset based on parent's active value
+      const parentsActiveValues: string[] = dataSet.filter((d: Record<string, any>) => {
+        return parentFilter.active?.includes(d[parentFilter.columnName])
+      })
+      // Get unique active values for the child filter
+      const childFilterValues = _.uniq(parentsActiveValues.map(d => d[childFilter.columnName]).filter(Boolean))
+
+      // Update the child filter if unique values exist
+      if (childFilterValues.length > 0) {
+        const isChildMultiSelect = childFilter.filterStyle === 'multi-select'
+        const activeValue = isChildMultiSelect
+          ? childFilterValues
+          : childFilter.active
+          ? childFilter.active
+          : childFilter.defaultValue
+          ? childFilter.defaultValue
+          : childFilterValues[0]
+        updatedFilters[childIndex] = {
+          ...childFilter,
+          values: childFilterValues,
+          active: activeValue
+        }
+      }
+    }
+  })
+  return updatedFilters
+}

package/src/scss/main.scss

@@ -191,9 +191,6 @@
     .data-table-heading {
       display: none;
     }
-    .table-container {
-      margin: 0 1em;
-    }
   }
 
   .dashboard-download-link {

package/src/store/dashboard.reducer.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { MultiDashboardConfig } from '../types/MultiDashboard'
+import { MultiDashboard, MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import { Tab } from '../types/Tab'
@@ -44,7 +44,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const newRows = state.config.rows.map((row, i) => (i === rowIndex ? { ...row, footnotesId: id } : row))
       return {
         ...state,
-        config: { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } }
+        config: saveMultiChanges(
+          { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } },
+          state.config.activeDashboard
+        )
       }
     }
     case 'ADD_NEW_DASHBOARD': {
@@ -55,7 +58,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     }
     case 'UPDATE_CONFIG': {
       const [config, filteredData] = getUpdateConfig(state)(...action.payload)
-      return { ...state, config, filteredData }
+      return { ...state, config: saveMultiChanges(config, state.config.activeDashboard), filteredData }
     }
     case 'APPLY_CONFIG': {
       // using advanced editor. Wipe all existing data and apply new config
@@ -68,14 +71,17 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
           if (data) acc[key] = data
           return acc
         }, {})
-      return { ...initialState, config, filteredData, data }
+      return { ...initialState, config: saveMultiChanges(config, state.config.activeDashboard), filteredData, data }
     }
     case 'SET_CONFIG': {
       if (
         action.payload.activeDashboard === undefined ||
         state.config.activeDashboard === action.payload.activeDashboard
       ) {
-        return { ...state, config: { ...state.config, ...action.payload } }
+        return {
+          ...state,
+          config: saveMultiChanges({ ...state.config, ...action.payload }, action.payload.activeDashboard)
+        }
       } else return state // ignore SET_CONFIG calls that have the wrong activeDashboard due to async api fetching
     }
     case 'SET_DATA': {
@@ -93,14 +99,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_SHARED_FILTERS': {
       const newSharedFilters = action.payload
       const newDashboardConfig = { ...state.config.dashboard, sharedFilters: newSharedFilters }
-      if (state.config.multiDashboards) {
-        const saveSlot = state.config.activeDashboard
-        const newMultiDashboards = _.cloneDeep(state.config.multiDashboards)
-        newMultiDashboards[saveSlot].dashboard = newDashboardConfig
-        const newState = applyMultiDashboards(state, newMultiDashboards)
-        return { ...newState, config: { ...newState.config, dashboard: newDashboardConfig } }
+      return {
+        ...state,
+        config: saveMultiChanges({ ...state.config, dashboard: newDashboardConfig }, state.config.activeDashboard)
       }
-      return { ...state, config: { ...state.config, dashboard: newDashboardConfig } }
     }
     case 'SET_TAB_SELECTED': {
       return { ...state, tabSelected: action.payload }
@@ -143,7 +145,8 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const label = newMultiDashboards[saveSlot].label
       const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
       newMultiDashboards[saveSlot] = { ...toSave, label }
-      return applyMultiDashboards(state, newMultiDashboards)
+      const newConfig = saveMultiChanges(state.config, saveSlot)
+      return { ...state, config: newConfig }
     }
     case 'INITIALIZE_MULTIDASHBOARDS': {
       const label = 'New Dashboard 1'
@@ -176,7 +179,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       newRows[rowIdx].columns[colIdx].widget = vizKey
       return {
         ...state,
-        config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: newViz }, rows: newRows }
+        config: saveMultiChanges(
+          { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: newViz }, rows: newRows },
+          state.config.activeDashboard
+        )
       }
     }
     case 'MOVE_VISUALIZATION': {
@@ -186,7 +192,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       newRows[rowIdx].columns[colIdx].widget = widget.uid
       return {
         ...state,
-        config: { ...state.config, rows: newRows }
+        config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard)
       }
     }
     case 'UPDATE_VISUALIZATION': {
@@ -194,7 +200,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const updatedViz = { ...state.config.visualizations[vizKey], ...configureData } as AnyVisualization
       return {
         ...state,
-        config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } }
+        config: saveMultiChanges(
+          { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } },
+          state.config.activeDashboard
+        )
       }
     }
     case 'UPDATE_ROW': {
@@ -205,12 +214,13 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
         }
         return row
       })
-      return { ...state, config: { ...state.config, rows: newRows } }
+      return { ...state, config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard) }
     }
     case 'DELETE_WIDGET': {
       const { uid } = action.payload
       const newRows = _.cloneDeep(state.config.rows)
       const newVisualizations = _.cloneDeep(state.config.visualizations)
+      delete newVisualizations[uid]
       const newSharedFilters = _.cloneDeep(state.config.dashboard.sharedFilters)
       if (newSharedFilters && newSharedFilters.length > 0) {
         newSharedFilters.forEach(sharedFilter => {
@@ -227,12 +237,15 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
 
       return {
         ...state,
-        config: {
-          ...state.config,
-          dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
-          visualizations: newVisualizations,
-          rows: filteredRows
-        }
+        config: saveMultiChanges(
+          {
+            ...state.config,
+            dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
+            visualizations: newVisualizations,
+            rows: filteredRows
+          },
+          state.config.activeDashboard
+        )
       }
     }
     default:
@@ -240,7 +253,16 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
   }
 }
 
-const applyMultiDashboards = (state, newMultiDashboards) => ({
+const saveMultiChanges = (config: MultiDashboardConfig, saveSlot?: number): MultiDashboardConfig => {
+  if (saveSlot === undefined || !config.multiDashboards) return config
+  const newMultiDashboards = [...config.multiDashboards]
+  const label = newMultiDashboards[saveSlot].label
+  const toSave = _.pick(config, ['dashboard', 'visualizations', 'rows'])
+  newMultiDashboards[saveSlot] = { ...toSave, label }
+  return { ...config, multiDashboards: newMultiDashboards }
+}
+
+const applyMultiDashboards = (state: DashboardState, newMultiDashboards: MultiDashboard[]): DashboardState => ({
   ...state,
   config: { ...state.config, multiDashboards: newMultiDashboards }
 })

package/src/types/SharedFilter.ts

@@ -11,7 +11,7 @@ export type SharedFilter = FilterBase & {
   active?: string | string[]
   queuedActive?: string | string[]
   usedBy?: (string | number)[] // if number used by whole row, else used by specific viz
-  order: 'cust' | 'desc' | 'asc'
+  order: 'cust' | 'desc' | 'asc' | 'column'
   parents?: string[]
   setBy?: string
   selectLimit?: number