@cdc/dashboard 4.24.2 → 4.24.4

package/src/helpers/filterData.ts

@@ -1,73 +1,98 @@
+import _ from 'lodash'
 import { SharedFilter } from '../types/SharedFilter'
-import { generateValuesForFilter } from './generateValuesForFilter'
 
 const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
   if (!sharedFilter.parents?.length) {
     return 1
   } else {
-    let parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
+    const parent = filters.find(filter => sharedFilter.parents!.includes(filter.key))
     if (!parent) return 1
     return 1 + findFilterTier(filters, parent)
   }
 }
 
-export const filterData = (filters: SharedFilter[], _data: Object[], filterBehavior) => {
-  if (_data) {
-    let maxTier = 1
-    filters.forEach(sharedFilter => {
-      sharedFilter.tier = findFilterTier(filters, sharedFilter)
-    })
-
-    filters.forEach(sharedFilter => {
-      if (sharedFilter.tier && sharedFilter.tier > maxTier) {
-        maxTier = sharedFilter.tier
-      }
-    })
-
-    let filteredData = _data
-    // TODO triple loop??
-    for (let i = 0; i < maxTier; i++) {
-      let filteredDataSubTier: any[] = []
-
-      filteredData.forEach(row => {
-        let add = true
+function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
+  let maxTier = 1
+  filters.forEach(sharedFilter => {
+    sharedFilter.tier = findFilterTier(filters, sharedFilter)
+    if (sharedFilter.tier > maxTier) {
+      maxTier = sharedFilter.tier
+    }
+  })
+  return maxTier
+}
 
-        filters.forEach(filter => {
-          // eslint-disable-next-line eqeqeq
-          if (filter.type !== 'urlfilter' && ((!filter.tier && i === 0) || filter.tier === i + 1) && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
-            add = false
+function filter(data, filters, condition) {
+  return data
+    ? data.filter(row => {
+        const found = filters.find(filter => {
+          if (filter.pivot) return false
+          const currentValue = row[filter.columnName]
+          const selectedValue = filter.queuedActive || filter.active
+          const isNotTheSelectedValue = selectedValue && currentValue != selectedValue
+          const isFirstOccurrenceOfTier = filter.tier === condition
+          if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
+            return true
           }
         })
-
-        if (add) filteredDataSubTier.push(row)
-      })
-
-      filters.forEach(sharedFilter => {
-        if (sharedFilter.tier && sharedFilter.tier === i + 2) {
-          sharedFilter.values = generateValuesForFilter(sharedFilter.columnName, { data: filteredDataSubTier }, filterBehavior)
-          if (sharedFilter.values.length > 0 && (!sharedFilter.active || sharedFilter.values.indexOf(sharedFilter.active) === -1)) {
-            sharedFilter.active = sharedFilter.values[0]
-          }
-        }
+        return !found
       })
+    : []
+}
 
-      filteredData = filteredDataSubTier
+function setFilterValuesAndActiveFilter(filters: SharedFilter[], filteredData: Object[], i: number) {
+  filters.forEach(sharedFilter => {
+    if (sharedFilter.pivot) {
+      sharedFilter.values = _.uniq(filteredData.map(row => row[sharedFilter.columnName]))
+    } else if (sharedFilter.tier === i + 2 && !Array.isArray(sharedFilter.active)) {
+      sharedFilter.values = _.uniq(filteredData.map(row => row[sharedFilter.columnName]))
+      const valueAlreadySelected = sharedFilter.values.includes(sharedFilter.active)
+      if (!valueAlreadySelected && sharedFilter.values.length > 0) {
+        sharedFilter.active = sharedFilter.values[0]
+      }
     }
+  })
+}
 
-    let filteredDataSubTier: any[] = []
-    filteredData.forEach(row => {
-      let add = true
-
-      filters.forEach(filter => {
-        // eslint-disable-next-line eqeqeq
-        if (filter.type !== 'urlfilter' && filter.tier && filter.tier === maxTier - 1 && (filter.queuedActive || filter.active) && row[filter.columnName!] != (filter.queuedActive || filter.active)) {
-          add = false
-        }
-      })
+const pivotData = (data, pivotFilter: SharedFilter) => {
+  const pivotActive = pivotFilter.active as string[]
+  const inactive = pivotFilter.values.filter(value => !pivotActive.includes(value))
+  const pivotColumn = pivotFilter.columnName
+  const valueColumn = pivotFilter.pivot
+  const grouped = _.groupBy(data, val => val[pivotColumn])
+  const newData = []
+  for (const key in grouped) {
+    const group = grouped[key]
 
-      if (add) filteredDataSubTier.push(row)
+    group.forEach((val, index) => {
+      const row = newData[index] || {}
+      if (!inactive.includes(key)) row[key] = val[valueColumn]
+      const toAdd = _.omit(val, [pivotColumn, valueColumn, ...inactive])
+      newData[index] = { ...row, ...toAdd }
     })
+  }
+  return newData
+}
 
-    return filteredDataSubTier
+/** This function returns filtered data.
+ * It also manipulates the filters by adding: tiers, filterOptions, and default selections */
+export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] => {
+  const maxTier = getMaxTierAndSetFilterTiers(filters)
+
+  for (let i = 0; i < maxTier; i++) {
+    const lastIteration = i === maxTier - 1
+
+    const filteredData = filter(_data, filters, i + 1)
+
+    setFilterValuesAndActiveFilter(_.cloneDeep(filters), filteredData, i)
+
+    if (lastIteration) {
+      const pivotFilter = filters.find(filter => filter.pivot)
+      if (pivotFilter) {
+        return pivotData(filteredData, pivotFilter)
+      }
+      // not sure if this last run of filter() function is necessary.
+      return filter(filteredData, filters, maxTier - 1)
+    }
   }
 }

package/src/helpers/generateValuesForFilter.ts

@@ -1,21 +1,11 @@
-import { FilterBehavior } from '../components/Header/Header'
-
-// Gets filter values from API response
-export const generateValuesForAPIFilter = (columnName, _data): string[] => {
-  type Row = { [key: string]: any }
-  return Object.values(_data)
-    .filter(row => row && !!(row as Row)[columnName])
-    .map(row => (row as Row)[columnName])
-}
-
 // Gets filter values from dataset
-export const generateValuesForFilter = (columnName, _data, filterBehavior) => {
+export const generateValuesForFilter = (columnName, _data) => {
   const values: string[] = []
 
   Object.keys(_data).forEach(key => {
     _data[key]?.forEach(row => {
       const value = row[columnName]
-      if (value && false === values.includes(value)) {
+      if (!values.includes(value)) {
         values.push(value)
       }
     })

package/src/helpers/getApiFilterKey.ts

@@ -0,0 +1,5 @@
+import { APIFilter } from '../types/APIFilter'
+
+export const getApiFilterKey = ({ apiEndpoint, heirarchyLookup }: APIFilter) => {
+  return apiEndpoint + (heirarchyLookup || '')
+}

package/src/helpers/getFilteredData.ts

@@ -0,0 +1,39 @@
+import { DashboardState } from '../store/dashboard.reducer'
+import { Dashboard } from '../types/Dashboard'
+import { SharedFilter } from '../types/SharedFilter'
+import { filterData } from './filterData'
+import { getFormattedData } from './getFormattedData'
+import { getVizKeys } from './getVizKeys'
+
+export const getApplicableFilters = (dashboard: Dashboard, key: string | number): false | SharedFilter[] => {
+  const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1)
+  return c?.length > 0 ? c : false
+}
+
+export const getFilteredData = (state: DashboardState, initialFilteredData = {}, dataOverride?: Object) => {
+  const newFilteredData = initialFilteredData
+  const { config } = state
+  getVizKeys(config).forEach(key => {
+    const applicableFilters = getApplicableFilters(config.dashboard, key)
+    if (applicableFilters) {
+      const { dataKey, data, dataDescription } = config.visualizations[key]
+      const _data = state.data[dataKey] || data
+      const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
+
+      newFilteredData[key] = filterData(applicableFilters, formattedData)
+    }
+  })
+  config.rows.forEach((row, index) => {
+    if (row.dataKey) {
+      const applicableFilters = getApplicableFilters(config.dashboard, index)
+      if (applicableFilters) {
+        const { dataKey, data, dataDescription } = row
+        const _data = state.data[dataKey] || data
+        const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
+
+        newFilteredData[index] = filterData(applicableFilters, formattedData)
+      }
+    }
+  })
+  return newFilteredData
+}

package/src/helpers/getUpdateConfig.ts

@@ -4,6 +4,9 @@ import { filterData } from './filterData'
 import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
+import { getVizRowColumnLocator } from './getVizRowColumnLocator'
+
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 
 type UpdateState = Omit<DashboardState, 'config'> & {
   config?: DashboardConfig
@@ -14,17 +17,30 @@ export const getUpdateConfig =
   (newConfig, dataOverride?: Object): [Config, Object] => {
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)
-    const setFilter = (filterIndex: number, key: string, value: any) => {
-      newConfig.dashboard.sharedFilters[filterIndex][key] = value
-    }
+
+    const vizRowColumnLocator = getVizRowColumnLocator(newConfig.rows)
+
     if (newConfig.dashboard.sharedFilters) {
       newConfig.dashboard.sharedFilters.forEach((filter, i) => {
         const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
-        let _filter = newConfig.dashboard.sharedFilters[i]
+        const _filter = newConfig.dashboard.sharedFilters[i]
 
-        if (filterIsSetByVizData) {
-          const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data, state.config?.filterBehavior)
+        const setValuesAndActive = filterValues => {
+          _filter.values = filterValues
+          if (filterValues.length > 0) {
+            const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
 
+            const queryStringFilterValue = getQueryStringFilterValue(_filter)
+            if(queryStringFilterValue){
+              _filter.active = queryStringFilterValue
+            } else {
+              _filter.active = _filter.active || defaultValues
+            }
+          }
+        }
+
+        const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data)
+        if (filterIsSetByVizData) {
           if (_filter.order === 'asc') {
             filterValues.sort()
           }
@@ -32,32 +48,33 @@ export const getUpdateConfig =
             filterValues.sort().reverse()
           }
 
-          setFilter(i, 'values', filterValues)
-          _filter = newConfig.dashboard.sharedFilters[i]
-          if (filterValues.length > 0) {
-            setFilter(i, 'active', _filter.active || _filter.values[0])
-          }
-        }
-
-        if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
-          const generatedValues = generateValuesForFilter(filter.columnName, dataOverride || state.data, state.config?.filterBehavior)
-          setFilter(i, 'values', generatedValues)
-          const _filter = newConfig.dashboard.sharedFilters[i]
-          if (_filter.values.length > 0) {
-            setFilter(i, 'active', filter.active || _filter.values[0])
-          }
+          setValuesAndActive(filterValues)
+        } else if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
+          setValuesAndActive(filterValues)
         }
       })
 
       visualizationKeys.forEach(visualizationKey => {
-        let applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
+        const row = vizRowColumnLocator[visualizationKey]
+        if (newConfig.rows[row]?.datakey) return // data configured on the row level
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
 
         if (applicableFilters.length > 0) {
           const visualization = newConfig.visualizations[visualizationKey]
           const _newConfigDataSet = newConfig.datasets[visualization.dataKey]
           const formattedData = getFormattedData(_newConfigDataSet?.data || visualization.data, visualization.dataDescription)
           const _data = formattedData || (dataOverride || state.data)[visualization.dataKey]
-          newFilteredData[visualizationKey] = filterData(applicableFilters, _data, state.config?.filterBehavior)
+          newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
+        }
+      })
+
+      newConfig.rows.forEach((row, rowIndex) => {
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1)
+
+        if (applicableFilters.length > 0) {
+          const formattedData = getFormattedData(row.data, row.dataDescription)
+          const _data = formattedData || (dataOverride || state.data)[rowIndex]
+          newFilteredData[rowIndex] = filterData(applicableFilters, _data)
         }
       })
     }

package/src/helpers/getVizConfig.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import { MultiDashboardConfig } from '../types/MultiDashboard'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+
+const transform = new DataTransform()
+
+export const getVizConfig = (visualizationKey: string, rowNumber: number, config: MultiDashboardConfig, data: Object, filteredData?: Object) => {
+  const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
+  const rowData = config.rows[rowNumber]
+  if (rowData?.dataKey) {
+    // data configured on the row
+    Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
+  }
+
+  if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
+  const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+
+  if (filteredVizData) {
+    visualizationConfig.data = filteredVizData
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = visualizationConfig.data
+    }
+  } else {
+    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+    visualizationConfig.data = data[dataKey]
+    if (visualizationConfig.formattedData) {
+      visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
+    }
+  }
+  return visualizationConfig
+}

package/src/helpers/getVizRowColumnLocator.ts

@@ -0,0 +1,9 @@
+import { ConfigRow } from '../types/ConfigRow'
+
+export const getVizRowColumnLocator = (rows: ConfigRow[]) =>
+  rows.reduce((acc, curr, index) => {
+    curr.columns?.forEach((column, columnIndex) => {
+      if (column.widget !== undefined) acc[column.widget] = { row: index, column: columnIndex }
+    })
+    return acc
+  }, {})

package/src/helpers/iconHash.tsx

@@ -0,0 +1,34 @@
+import Icon from '@cdc/core/components/ui/Icon'
+import { Visualization } from '@cdc/core/types/Visualization'
+
+export const iconHash = {
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'waffle-chart': <Icon display='grid' base />,
+  'markup-include': <Icon display='code' base />,
+  Line: <Icon display='chartLine' base />,
+  Pie: <Icon display='chartPie' base />,
+  us: <Icon display='mapUsa' base />,
+  'us-county': <Icon display='mapUsa' base />,
+  world: <Icon display='mapWorld' base />,
+  'single-state': <Icon display='mapAl' base />,
+  gear: <Icon display='gear' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />,
+  'filter-dropdowns': <Icon display='filter-dropdowns' base />,
+  table: <Icon display='table' base />,
+  Sankey: <Icon display='sankey' base />
+}
+
+export const getIcon = (visualization: Visualization) => {
+  const { type, visualizationType, general } = visualization
+  if (visualizationType) return iconHash[visualizationType]
+  if (general?.geoType) {
+    // for visualizations, mismatching state and state icon is not desired
+    // so instead of showing alabama as the default state icon we show the US icon.
+    if (general.geoType === 'single-state') return iconHash['us']
+    return iconHash[general.geoType]
+  }
+  return iconHash[type]
+}

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

@@ -0,0 +1,149 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { filterData } from '../filterData'
+
+describe('filterData', () => {
+  it('should filter data based on the provided filters', () => {
+    const filters = [
+      { tier: 1, columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'abc' },
+      { tier: 2, columnName: 'age', active: 30, queuedActive: 30, fileName: 'abc', key: 'abc' }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30 },
+      { name: 'Jane', age: 25 },
+      { name: 'John', age: 35 },
+      { name: 'Jane', age: 30 }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30 }])
+  })
+
+  it('filters with parents', () => {
+    const filters = [
+      { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'abc' },
+      { columnName: 'age', active: 30, queuedActive: 30, fileName: 'abc', key: 'abc', parents: ['name'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30 },
+      { name: 'Jane', age: 25 },
+      { name: 'John', age: 35 },
+      { name: 'Jane', age: 30 }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30 }])
+  })
+
+  it('causes sideEffects to filters', () => {
+    // the side effect is not desired, but current functionality depends on the sideEffect.
+    // hopefully the side effect will be refactored in the future to be a returned value.
+    const filters = [
+      { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'name' },
+      { columnName: 'age', fileName: 'abc', key: 'age' },
+      { columnName: 'color', fileName: 'abc', key: 'color', parents: ['age'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'John', age: 30, color: 'blue' },
+      { name: 'Jane', age: 25, color: 'red' },
+      { name: 'John', age: 35, color: 'yellow' },
+      { name: 'Jane', age: 30, color: 'green' }
+    ]
+
+    const result = filterData(filters, data)
+
+    expect(result).toEqual([{ name: 'John', age: 30, color: 'blue' }])
+
+    const sideEffectOfFiltering = [
+      {
+        columnName: 'name',
+        active: 'John',
+        queuedActive: 'John',
+        fileName: 'abc',
+        key: 'name',
+        tier: 1
+      },
+      { columnName: 'age', fileName: 'abc', key: 'age', tier: 1 },
+      {
+        columnName: 'color',
+        fileName: 'abc',
+        key: 'color',
+        parents: ['age'],
+        tier: 2,
+        values: ['blue', 'yellow'],
+        active: 'blue'
+      }
+    ]
+    expect(filters).toEqual(sideEffectOfFiltering)
+  })
+
+  it('should not include data that does not meet the filter criteria', () => {
+    const filters = [
+      //{ columnName: 'apple', fileName: 'abc', key: 'banana' },
+      { columnName: 'color', active: 'red', queuedActive: 'red', fileName: 'abc', key: 'color' },
+      { columnName: 'name', fileName: 'abc', key: 'name' },
+      { columnName: 'age', fileName: 'abc', key: 'age', parents: ['name'] }
+    ] as SharedFilter[]
+    const data = [
+      { name: 'Jane', age: 30, color: 'blue' },
+      { name: 'John', age: 25, color: 'red' },
+      { name: 'John', age: 25, color: 'green' }
+      //{ name: 'John', age: 25, color: 'red', apple: 'banana' }
+    ]
+
+    const result = filterData(filters, data)
+    expect(result).toEqual([{ name: 'John', age: 25, color: 'red' }])
+  })
+
+  it('should pivot data based on the provided filters', () => {
+    const filters = [{ key: 'Race', type: 'datafilter', showDropdown: true, columnName: 'Race', pivot: 'Age-adjusted rate', usedBy: ['table1707935263149'] }] as SharedFilter[]
+    const data = [
+      {
+        Race: 'Hispanic or Latino',
+        'Age-adjusted rate': '644.2',
+        Year: '2016'
+      },
+      {
+        Race: 'Non-Hispanic American Indian',
+        'Age-adjusted rate': '636.1',
+        Year: '2016'
+      },
+      {
+        Race: 'Non-Hispanic Black',
+        'Age-adjusted rate': '563.7',
+        Year: '2016'
+      },
+      {
+        Race: 'Hispanic or Latino',
+        'Age-adjusted rate': '644.2',
+        Year: '2017'
+      },
+      {
+        Race: 'Non-Hispanic American Indian',
+        'Age-adjusted rate': '636.1',
+        Year: '2017'
+      },
+      {
+        Race: 'Non-Hispanic Black',
+        'Age-adjusted rate': '563.7',
+        Year: '2017'
+      }
+    ]
+
+    expect(filterData(filters, data)).toEqual([
+      {
+        'Hispanic or Latino': '644.2',
+        'Non-Hispanic American Indian': '636.1',
+        'Non-Hispanic Black': '563.7',
+        Year: '2016'
+      },
+      {
+        'Hispanic or Latino': '644.2',
+        'Non-Hispanic American Indian': '636.1',
+        'Non-Hispanic Black': '563.7',
+        Year: '2017'
+      }
+    ])
+  })
+})

package/src/images/icon-toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>

package/src/scss/grid.scss

@@ -35,8 +35,7 @@ $red: #f74242;
   flex-flow: row;
   width: 100%;
   position: relative;
-  top: 0;
-  padding: 1em;
+  padding: 2em 1em 1em;
   border: 1px solid #c2c2c2;
   transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
   background-color: #f2f2f2;
@@ -77,7 +76,7 @@ $red: #f74242;
 
 .row-menu__btn:hover .row-menu__flyout {
   transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  width: 144px;
+  width: 180px;
 
   li {
     display: flex;
@@ -330,6 +329,14 @@ $red: #f74242;
 .builder-row {
   position: relative;
 
+  .btn-configure-row {
+    background: none;
+    display: block;
+    position: absolute;
+    right: 1em;
+    top: 0;
+  }
+
   .widget__content {
     padding: 0 2em;
 

package/src/scss/main.scss

@@ -10,6 +10,11 @@
     margin-top: 20%;
   }
 
+  > .cove-editor__content {
+    width: 100% !important;
+    left: 0px;
+  }
+
   .editor-heading {
     background-color: #ddd;
     border-bottom: #c7c7c7 1px solid;
@@ -187,6 +192,9 @@
   .dashboard-row {
     display: flex;
     flex-direction: column;
+    &.toggle {
+      display: block;
+    }
   }
 
   .dashboard-col {
@@ -197,6 +205,9 @@
       margin-left: 0;
       margin-right: 0;
     }
+    &.hidden-toggle {
+      display: none;
+    }
   }
 
   .dashboard-col-12 {

package/src/store/dashboard.actions.ts

@@ -1,13 +1,20 @@
 import type { DashboardConfig as Config } from '../types/DashboardConfig'
 import { type Action } from '@cdc/core/types/Action'
+import { Tab } from '../types/Tab'
+<<<<<<< HEAD
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+import { ConfigRow } from '../types/ConfigRow'
+=======
+import { SharedFilter } from '../types/SharedFilter'
+>>>>>>> 35436844 (fixed api dropdowns)
 
-type SET_CONFIG = Action<'SET_CONFIG', Config>
+type SET_CONFIG = Action<'SET_CONFIG', Partial<Config>>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
 type SET_DATA = Action<'SET_DATA', Object>
 type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
 type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
-type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', number>
+type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', Tab>
 type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
 type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
 type REMOVE_MULTIDASHBOARD_AT_INDEX = Action<'REMOVE_MULTIDASHBOARD_AT_INDEX', number>
@@ -15,6 +22,31 @@ type REORDER_MULTIDASHBOARDS = Action<'REORDER_MULTIDASHBOARDS', { currentIndex:
 type ADD_NEW_DASHBOARD = Action<'ADD_NEW_DASHBOARD', undefined>
 type SAVE_CURRENT_CHANGES = Action<'SAVE_CURRENT_CHANGES', undefined>
 type SWITCH_CONFIG = Action<'SWITCH_CONFIG', number>
+type TOGGLE_ROW = Action<'TOGGLE_ROW', { rowIndex: number; colIndex: number }>
+<<<<<<< HEAD
+type UPDATE_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<ConfigureData> }>
+type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
+=======
+type SET_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
+>>>>>>> 35436844 (fixed api dropdowns)
 
-type DashboardActions = ADD_NEW_DASHBOARD | SET_CONFIG | UPDATE_CONFIG | REMOVE_MULTIDASHBOARD_AT_INDEX | RENAME_DASHBOARD_TAB | REORDER_MULTIDASHBOARDS | SAVE_CURRENT_CHANGES | SET_DATA | SET_LOADING | SET_PREVIEW | SET_FILTERED_DATA | SET_TAB_SELECTED | SWITCH_CONFIG | INITIALIZE_MULTIDASHBOARDS
+type DashboardActions =
+  | ADD_NEW_DASHBOARD
+  | SET_CONFIG
+  | UPDATE_CONFIG
+  | REMOVE_MULTIDASHBOARD_AT_INDEX
+  | RENAME_DASHBOARD_TAB
+  | REORDER_MULTIDASHBOARDS
+  | SAVE_CURRENT_CHANGES
+  | SET_DATA
+  | SET_LOADING
+  | SET_PREVIEW
+  | SET_FILTERED_DATA
+  | SET_SHARED_FILTERS
+  | SET_TAB_SELECTED
+  | SWITCH_CONFIG
+  | INITIALIZE_MULTIDASHBOARDS
+  | TOGGLE_ROW
+  | UPDATE_VISUALIZATION
+  | UPDATE_ROW
 export default DashboardActions