@cdc/dashboard 4.24.4 → 4.24.7

package/src/components/Widget.tsx

@@ -6,8 +6,7 @@ import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import Icon from '@cdc/core/components/ui/Icon'
-import Modal from '@cdc/core/components/ui/Modal'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
 import { DataDesignerModal } from './DataDesignerModal'
@@ -25,19 +24,19 @@ const labelHash = {
   world: 'World',
   'single-state': 'U.S. State',
   'filtered-text': 'Filtered Text',
-  'filter-dropdowns': 'Filter Dropdowns',
+  dashboardFilters: 'Filter Dropdowns',
   Sankey: 'Sankey Chart',
   table: 'Table'
 }
 
-type WidgetData = Visualization & { rowIdx: number; colIdx: number }
+type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
 type WidgetProps = {
-  data?: WidgetData
+  widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
 }
 
-const Widget = ({ data, addVisualization, type }: WidgetProps) => {
+const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config } = useContext(DashboardContext)
   const rows = config.rows
@@ -54,10 +53,10 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
     const { rowIdx, colIdx } = result
 
-    if (undefined !== data?.rowIdx) {
-      rows[data.rowIdx].columns[data.colIdx].widget = null // Wipe from old position
+    if (undefined !== widgetConfig?.rowIdx) {
+      rows[widgetConfig.rowIdx].columns[widgetConfig.colIdx].widget = null // Wipe from old position
 
-      rows[rowIdx].columns[colIdx].widget = data.uid // Add to new row and col
+      rows[rowIdx].columns[colIdx].widget = widgetConfig.uid // Add to new row and col
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
@@ -76,19 +75,19 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
         isDragging: monitor.isDragging()
       })
     },
-    [config.activeDashboard, config.rows]
+    [config.activeDashboard, config.rows, config.dashboard.sharedFilters]
   )
 
   const deleteWidget = () => {
-    if (!data) return
-    rows[data.rowIdx].columns[data.colIdx].widget = null
+    if (!widgetConfig) return
+    rows[widgetConfig.rowIdx].columns[widgetConfig.colIdx].widget = null
 
-    delete visualizations[data.uid]
+    delete visualizations[widgetConfig.uid]
 
     if (config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0) {
       config.dashboard.sharedFilters.forEach(sharedFilter => {
-        if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(data.uid) !== -1) {
-          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(data.uid), 1)
+        if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(widgetConfig.uid) !== -1) {
+          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(widgetConfig.uid), 1)
         }
       })
     }
@@ -97,99 +96,36 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   }
 
   const editWidget = () => {
-    if (!data) return
-    visualizations[data.uid].editing = true
+    if (!widgetConfig) return
+    visualizations[widgetConfig.uid].editing = true
 
     updateConfig({ ...config, visualizations })
   }
 
-  const FilterHideModal = configureData => {
-    const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid) || ''
-    const currentViz = config.visualizations && config.visualizations[currentVizKey]
-    const onFilterHideChange = (e, index) => {
-      const visualizations = { ...config.visualizations }
-
-      if (currentVizKey) {
-        const currentVizConfig = visualizations[currentVizKey]
-
-        if (currentVizConfig) {
-          if (!currentVizConfig.hide) currentVizConfig.hide = []
-          if (!e.target.checked && currentVizConfig.hide.indexOf(index) === -1) {
-            visualizations[currentVizKey].hide.push(index)
-          } else if (e.target.checked && currentVizConfig.hide.indexOf(index) !== -1) {
-            visualizations[currentVizKey].hide.splice(currentVizConfig.hide.indexOf(index), 1)
-          }
-        }
-      }
-
-      updateConfig({ ...config, visualizations })
-    }
-
-    const vizWithAutoLoad = Object.keys(config.visualizations).find(vizKey => config.visualizations[vizKey].autoLoad)
-    const onToggleAutoLoad = e => {
-      if (currentViz) {
-        currentViz.autoLoad = e.target.checked
-        updateConfig({ ...config, visualizations: { ...visualizations, [currentVizKey]: currentViz } })
-      }
-    }
-
-    const showAutoLoadCheckbox = !vizWithAutoLoad || vizWithAutoLoad === currentVizKey
-    return (
-      <Modal>
-        <Modal.Content>
-          <div>Choose which filters to display:</div>
-
-          {config.dashboard.sharedFilters &&
-            config.dashboard.sharedFilters.length > 0 &&
-            config.dashboard.sharedFilters.map((sharedFilter, index) => (
-              <label>
-                <input type='checkbox' defaultChecked={!configureData.hide || configureData.hide.indexOf(index) === -1} onChange={e => onFilterHideChange(e, index)} />
-                {sharedFilter.key}
-              </label>
-            ))}
-
-          {(!config.dashboard.sharedFilters || config.dashboard.sharedFilters.length === 0) && <>No dashboard filters added yet.</>}
-
-          {showAutoLoadCheckbox && (
-            <label>
-              Make Autoload:
-              <input type='checkbox' defaultChecked={currentViz?.autoLoad} onChange={onToggleAutoLoad} />
-            </label>
-          )}
-          <div>
-            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
-              Continue
-            </button>
-          </div>
-        </Modal.Content>
-      </Modal>
-    )
-  }
-
   let isConfigurationReady = false
-  const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
-  if (dataConfiguredForRow || ['markup-include', 'filter-dropdowns'].includes(type)) {
+  const dataConfiguredForRow = !!rows[widgetConfig?.rowIdx]?.dataKey
+  if (dataConfiguredForRow || ['dashboardFilters', 'markup-include'].includes(type)) {
     isConfigurationReady = true
   } else {
-    if (data?.formattedData) {
+    if (widgetConfig?.formattedData) {
       isConfigurationReady = true
-    } else if (data?.dataKey && data?.dataDescription && config.datasets[data.dataKey]) {
-      const formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data)
-      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, data.dataDescription)
+    } else if (widgetConfig?.dataKey && widgetConfig?.dataDescription && config.datasets[widgetConfig.dataKey]) {
+      const formattedDataAttempt = transform.autoStandardize(config.datasets[widgetConfig.dataKey].data)
+      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, widgetConfig.dataDescription)
       if (canFormatData) {
         isConfigurationReady = true
       }
     }
   }
 
-  const needsDataConfiguration = !dataConfiguredForRow && type !== 'markup-include'
+  const needsDataConfiguration = !dataConfiguredForRow && widgetConfig?.type !== 'dashboardFilters'
 
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
         <Icon display='move' className='drag-icon' />
         <div className='widget__content'>
-          {data?.rowIdx !== undefined && (
+          {widgetConfig?.rowIdx !== undefined && (
             <div className='widget-menu'>
               {isConfigurationReady && (
                 <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
@@ -201,7 +137,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : <DataDesignerModal rowIndex={data.rowIdx} vizKey={data.uid} />)
+                    overlay?.actions.openOverlay(<DataDesignerModal rowIndex={widgetConfig.rowIdx} vizKey={widgetConfig.uid} />)
                   }}
                 >
                   {iconHash['gear']}
@@ -214,7 +150,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
-          {data?.newViz && type !== 'filter-dropdowns' && (
+          {widgetConfig?.newViz && type !== 'dashboardFilters' && (
             <span onClick={editWidget} className='config-needed'>
               Configuration needed
             </span>

package/src/helpers/apiFilterHelpers.ts

@@ -0,0 +1,51 @@
+import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
+import { APIFilterDropdowns, DropdownOptions } from '../components/DashboardFilters'
+import { APIFilter } from '../types/APIFilter'
+import { SharedFilter } from '../types/SharedFilter'
+
+export const getLoadingFilterMemo = (sharedAPIFilters, apiFilterDropdowns): APIFilterDropdowns =>
+  sharedAPIFilters.reduce((acc, curr) => {
+    const _key = curr.apiFilter.apiEndpoint
+    if (apiFilterDropdowns[_key] != null) return acc // don't overwrite fetched data.
+    acc[_key] = null
+    return acc
+  }, {})
+
+const getParentParams = (childFilter: SharedFilter, sharedAPIFilters: SharedFilter[]): Record<'key' | 'value', string>[] | null => {
+  const _parents = sharedAPIFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
+  if (!_parents.length) return null
+
+  return _parents.flatMap(filter => {
+    const key = filter.queryParameter || filter.apiFilter.valueSelector || ''
+    const value = filter.queuedActive || filter.active || ''
+    if (Array.isArray(value)) {
+      return value.map(_value => ({ key, value: _value }))
+    }
+    return [{ key, value }]
+  })
+}
+
+export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
+  const { textSelector, valueSelector } = apiFilter
+  return data.map(v => ({ text: v[textSelector || valueSelector], value: v[valueSelector] }))
+}
+
+export const getToFetch = (sharedAPIFilters: SharedFilter[], apiFilterDropdowns: APIFilterDropdowns): Record<string, [string, number]> => {
+  const toFetch = {}
+  sharedAPIFilters.forEach((filter, index) => {
+    const baseEndpoint = filter.apiFilter.apiEndpoint
+    const _key = baseEndpoint
+    const isAPIFilter = apiFilterDropdowns[_key]
+    const parentParams = getParentParams(filter, sharedAPIFilters)
+    const notAllParentsSelected = parentParams?.some(({ value }) => value === '')
+
+    if (notAllParentsSelected) return // don't send request for dependent children filter options
+    if (isAPIFilter && !parentParams) return // don't reload filter unless it's a child
+    const topLevelDataAlreadyLoaded = isAPIFilter && !filter.parents
+    if (topLevelDataAlreadyLoaded) return // don't reload top level filters
+
+    const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
+    toFetch[endpoint] = [_key, index]
+  })
+  return toFetch
+}

package/src/helpers/changeFilterActive.ts

@@ -0,0 +1,30 @@
+import _ from 'lodash'
+import { FilterBehavior } from '../components/Header/Header'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import { SharedFilter } from '../types/SharedFilter'
+import { DashboardFilters } from '../types/DashboardFilters'
+
+const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
+  const parentKey = sharedFilters[parentIndex].key
+  const childIndex = sharedFilters.findIndex(filter => filter.parents?.includes(parentKey))
+  if (childIndex !== -1) {
+    sharedFilters[childIndex].active = ''
+  }
+}
+
+export const changeFilterActive = (filterIndex: number, value: string | string[], sharedFilters: SharedFilter[], vizConfig: DashboardFilters): SharedFilter[] => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const currentFilter = sharedFilters[filterIndex]
+  if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
+    sharedFiltersCopy[filterIndex].active = value
+    handleChildren(sharedFiltersCopy, filterIndex)
+    const queryParams = getQueryParams()
+    if (currentFilter.setByQueryParameter && queryParams[currentFilter.setByQueryParameter] !== currentFilter.active) {
+      queryParams[currentFilter.setByQueryParameter] = currentFilter.active
+      updateQueryString(queryParams)
+    }
+  } else {
+    sharedFiltersCopy[filterIndex].queuedActive = value
+  }
+  return sharedFiltersCopy
+}

package/src/helpers/filterData.ts

@@ -22,60 +22,26 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   return maxTier
 }
 
-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
-          }
-        })
-        return !found
-      })
-    : []
-}
-
-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]
+function filter(data = [], filters: SharedFilter[], condition) {
+  return data.filter(row => {
+    const foundMatchingFilter = filters.find(filter => {
+      const currentValue = row[filter.columnName]
+      const selectedValue = filter.queuedActive || filter.active
+      let isNotTheSelectedValue = true
+      if (Array.isArray(selectedValue)) {
+        isNotTheSelectedValue = !selectedValue.includes(currentValue)
+      } else {
+        isNotTheSelectedValue = selectedValue && currentValue != selectedValue
+      }
+      const isFirstOccurrenceOfTier = filter.tier === condition
+      if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
+        return true
       }
-    }
-  })
-}
-
-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]
-
-    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 !foundMatchingFilter
+  })
 }
 
-/** 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)
 
@@ -84,13 +50,7 @@ export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] =
 
     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

@@ -5,7 +5,7 @@ export const generateValuesForFilter = (columnName, _data) => {
   Object.keys(_data).forEach(key => {
     _data[key]?.forEach(row => {
       const value = row[columnName]
-      if (!values.includes(value)) {
+      if (value && !values.includes(value)) {
         values.push(value)
       }
     })

package/src/helpers/getAutoLoadVisualization.ts

@@ -0,0 +1,11 @@
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { DashboardFilters } from '../types/DashboardFilters'
+
+export const getAutoLoadVisualization = (visualizations: Record<string, AnyVisualization>): DashboardFilters | undefined => {
+  const autoLoadViz = Object.values(visualizations).filter(vis => {
+    return vis.type === 'dashboardFilters' && vis.autoLoad
+  }) as DashboardFilters[]
+  if (autoLoadViz.length === 0) return
+  if (autoLoadViz.length > 1) throw new Error('Only one filter row can be autoloaded')
+  return autoLoadViz[0]
+}

package/src/helpers/getFilteredData.ts

@@ -26,12 +26,14 @@ export const getFilteredData = (state: DashboardState, initialFilteredData = {},
   config.rows.forEach((row, index) => {
     if (row.dataKey) {
       const applicableFilters = getApplicableFilters(config.dashboard, index)
+      const { dataKey, data, dataDescription } = row
+      const _data = state.data[dataKey] || data
       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)
+      } else {
+        newFilteredData[index] = _data || []
       }
     }
   })

package/src/helpers/getVizConfig.ts

@@ -1,12 +1,33 @@
 import _ from 'lodash'
 import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DataTransform from '@cdc/core/helpers/DataTransform'
+import { getApplicableFilters } from './getFilteredData'
+import { filterData } from './filterData'
+import Footnotes from '@cdc/core/types/Footnotes'
 
 const transform = new DataTransform()
 
+export const getFootnotesVizConfig = (vizKey: string, rowNumber: number, config: MultiDashboardConfig) => {
+  const visualizationConfig = _.cloneDeep(config.visualizations[vizKey])
+
+  const data = config.datasets[visualizationConfig.dataKey]?.data
+  const dataColumns = data?.length ? Object.keys(data[0]) : []
+  const filters = (getApplicableFilters(config.dashboard, rowNumber) || []).filter(filter => dataColumns.includes(filter.columnName))
+  if (filters.length) {
+    visualizationConfig.formattedData = filterData(filters, data)
+  }
+  visualizationConfig.data = data
+  return visualizationConfig as Footnotes
+}
+
 export const getVizConfig = (visualizationKey: string, rowNumber: number, config: MultiDashboardConfig, data: Object, filteredData?: Object) => {
+  if (rowNumber === undefined) return {}
   const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
   const rowData = config.rows[rowNumber]
+  if (rowData.footnotesId && rowData.footnotesId === visualizationKey) {
+    // return the footnotes visualization config with filtered data
+    return getFootnotesVizConfig(visualizationKey, rowNumber, config)
+  }
   if (rowData?.dataKey) {
     // data configured on the row
     Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
@@ -16,13 +37,13 @@ export const getVizConfig = (visualizationKey: string, rowNumber: number, config
   const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
 
   if (filteredVizData) {
-    visualizationConfig.data = filteredVizData
+    visualizationConfig.data = filteredVizData || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData = visualizationConfig.data
     }
   } else {
     const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    visualizationConfig.data = data[dataKey]
+    visualizationConfig.data = data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
     }

package/src/helpers/getVizRowColumnLocator.ts

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

package/src/helpers/hasDashboardApplyBehavior.ts

@@ -0,0 +1,5 @@
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export const hasDashboardApplyBehavior = (visualizations: Record<string, AnyVisualization>) => {
+  return Object.values(visualizations).some(v => v.filterBehavior === 'Apply Button' && v.type === 'dashboardFilters')
+}

package/src/helpers/iconHash.tsx

@@ -1,5 +1,5 @@
 import Icon from '@cdc/core/components/ui/Icon'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 export const iconHash = {
   'data-bite': <Icon display='databite' base />,
@@ -16,12 +16,12 @@ export const iconHash = {
   gear: <Icon display='gear' base />,
   tools: <Icon display='tools' base />,
   'filtered-text': <Icon display='filtered-text' base />,
-  'filter-dropdowns': <Icon display='filter-dropdowns' base />,
+  dashboardFilters: <Icon display='dashboardFilters' base />,
   table: <Icon display='table' base />,
   Sankey: <Icon display='sankey' base />
 }
 
-export const getIcon = (visualization: Visualization) => {
+export const getIcon = (visualization: AnyVisualization) => {
   const { type, visualizationType, general } = visualization
   if (visualizationType) return iconHash[visualizationType]
   if (general?.geoType) {

package/src/helpers/mapDataToConfig.ts

@@ -0,0 +1,29 @@
+import { getFormattedData } from './getFormattedData'
+import { DashboardConfig } from '../types/DashboardConfig'
+
+const mapDataToVisualizations = (config: DashboardConfig) => {
+  Object.keys(config.visualizations).forEach((vizKey, i) => {
+    const viz = config.visualizations[vizKey]
+    if (viz.dataKey && !viz.data) {
+      const data = config.datasets[viz.dataKey].data
+      config.visualizations[vizKey].data = data
+      config.visualizations[vizKey].formattedData = getFormattedData(data, viz.dataDescription)
+    }
+  })
+}
+
+const mapDataToRows = (config: DashboardConfig) => {
+  config.rows.forEach((row, i) => {
+    if (row.dataKey && !row.data) {
+      const data = config.datasets[row.dataKey].data
+      config.rows[i].data = data
+      config.rows[i].formattedData = getFormattedData(data, row.dataDescription)
+    }
+  })
+}
+
+export const mapDataToConfig = (config: DashboardConfig) => {
+  mapDataToVisualizations(config)
+  mapDataToRows(config)
+  return config
+}

package/src/helpers/processData.ts

@@ -1,10 +1,9 @@
-import { FilterBehavior } from '../components/Header/Header'
 import { DataSet } from '../types/DataSet'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import { getFormattedData } from './getFormattedData'
 
-export const processData = async (dataSet: DataSet, filterBehavior) => {
-  if (dataSet.dataUrl && filterBehavior !== FilterBehavior.Apply) {
+export const processData = async (dataSet: DataSet, hasFilterChangeBehavior: boolean) => {
+  if (dataSet.dataUrl && hasFilterChangeBehavior) {
     const dataset = await fetchRemoteData(`${dataSet.dataUrl}`)
     return getFormattedData(dataset, dataSet.dataDescription)
   }

package/src/helpers/reloadURLHelpers.ts

@@ -0,0 +1,68 @@
+import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
+import { SharedFilter } from '../types/SharedFilter'
+import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
+import { Visualization } from '@cdc/core/types/Visualization'
+import _ from 'lodash'
+
+export const isUpdateNeeded = (filters: SharedFilter[], currentQueryParams: Record<string, string>, newQueryParams: Record<string, string>): boolean => {
+  let needsUpdate = false
+  filters.find(filter => {
+    if (filter.type === 'urlfilter' && !Array.isArray(filter.active) && filter.filterBy === 'File Name') {
+      needsUpdate = true
+      return true
+    }
+  })
+  Object.keys(newQueryParams).forEach(updatedParam => {
+    if (decodeURIComponent(newQueryParams[updatedParam]) !== currentQueryParams[updatedParam]) {
+      needsUpdate = true
+    }
+  })
+  return needsUpdate
+}
+
+export const getDataURL = (updatedQSParams: Record<string, string>, dataUrl: URL, newFileName: string) => {
+  const _params = Object.keys(updatedQSParams).map(key => ({ key, value: updatedQSParams[key] }))
+  const baseURL = dataUrl.origin + dataUrl.pathname
+  let dataUrlFinal = `${baseURL}${gatherQueryParams(baseURL, _params)}`
+
+  if (newFileName !== '') {
+    const fileExtension = dataUrl.pathname.split('.').pop()
+    const pathWithoutFilename = dataUrl.pathname.substring(0, dataUrl.pathname.lastIndexOf('/'))
+    dataUrlFinal = `${dataUrl.origin}${pathWithoutFilename}/${newFileName}.${fileExtension}${gatherQueryParams(baseURL, _params)}`
+  }
+  return dataUrlFinal
+}
+
+export const getNewFileName = (newFileName: string, filter: SharedFilter, datasetKey: string) => {
+  const replacements = {
+    'Remove Spaces': '',
+    'Keep Spaces': ' ',
+    'Replace With Underscore': '_'
+  }
+  let fileName = newFileName
+  if (filter.datasetKey === datasetKey) {
+    if (filter.fileName) {
+      // if a file name is found, ie, state_${query}, use that, ie. state_activeFilter.json
+      fileName = capitalizeSplitAndJoin.call(String(filter.fileName), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces'])
+    } else {
+      // if no file name is entered use the default active filter. ie. /activeFilter.json
+      fileName = filter.active as string
+    }
+  }
+
+  if (fileName?.includes('${query}')) {
+    fileName = fileName.replace('${query}', capitalizeSplitAndJoin.call(String(filter.active), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces']))
+  }
+
+  return fileName
+}
+
+export const getVisualizationsWithFormattedData = (visualizations: Record<string, Visualization>, newData: Object) => {
+  return Object.keys(visualizations).reduce((acc, vizKey) => {
+    const dataKey = visualizations[vizKey].dataKey
+    if (newData[dataKey]) {
+      acc[vizKey].formattedData = newData[dataKey]
+    }
+    return acc
+  }, _.cloneDeep(visualizations))
+}