@cdc/dashboard 4.25.8 → 4.25.11

package/src/helpers/formatConfigBeforeSave.ts

@@ -0,0 +1,137 @@
+import Footnotes from '@cdc/core/types/Footnotes'
+import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
+import { DashboardConfig } from '../types/DashboardConfig'
+import { removeDashboardFilter } from './removeDashboardFilter'
+import _ from 'lodash'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
+
+const cleanDashboardFootnotes = (config: DashboardConfig) => {
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const viz = config.visualizations[vizKey] as any
+      if (viz.footnotes) {
+        delete viz.footnotes.data
+        delete viz.footnotes.formattedData
+      }
+    })
+  }
+}
+
+const cleanDashboardData = (config: DashboardConfig) => {
+  if (config.datasets) {
+    Object.keys(config.datasets).forEach(datasetKey => {
+      delete config.datasets[datasetKey].formattedData
+      if (config.datasets[datasetKey].dataUrl) {
+        delete config.datasets[datasetKey].data
+      }
+    })
+  }
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      config.visualizations[vizKey] = _.omit(config.visualizations[vizKey], [
+        'runtime',
+        'formattedData',
+        'data',
+        'editing',
+        'originalFormattedData'
+      ]) as any
+    })
+  }
+  if (config.rows) {
+    config.rows.forEach((row, i) => {
+      if (row.dataKey) {
+        config.rows[i] = _.omit(row, ['data', 'formattedData'])
+      }
+    })
+  }
+}
+
+export const cleanSharedFilters = (config: DashboardConfig) => {
+  if (config.dashboard?.sharedFilters) {
+    const recursiveRemoveFilters = (sharedFilters, visualizations: Record<string, AnyVisualization>) => {
+      const usedFilters = _.uniq(
+        Object.values(visualizations).reduce((acc, viz) => {
+          if (viz.type === 'dashboardFilters') {
+            acc = acc.concat(viz.sharedFilterIndexes)
+          }
+          return acc
+        }, [])
+      )
+      for (let index = 0; index < sharedFilters.length; index++) {
+        const filter = sharedFilters[index]
+        if (!usedFilters.includes(index)) {
+          const [newSharedFilters, newVisualizations] = removeDashboardFilter(
+            index,
+            config.dashboard.sharedFilters,
+            config.visualizations
+          )
+          config.dashboard.sharedFilters = newSharedFilters
+          config.visualizations = newVisualizations
+          recursiveRemoveFilters(newSharedFilters, newVisualizations)
+          break
+        } else {
+          delete config.dashboard.sharedFilters[index].active
+          if (filter.subGrouping) delete config.dashboard.sharedFilters[index].subGrouping.active
+          if (filter.type === 'urlfilter') {
+            delete config.dashboard.sharedFilters[index].values
+          }
+        }
+      }
+    }
+
+    recursiveRemoveFilters(config.dashboard.sharedFilters, config.visualizations)
+  }
+}
+
+const cleanVisualizationFilters = (config: DashboardConfig) => {
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const viz = config.visualizations[vizKey] as any
+      const vizFilters = viz.filters || []
+      vizFilters.forEach((_filter, index) => {
+        delete viz.filters[index].active
+        delete viz.filters[index].values
+      })
+    })
+  }
+}
+
+const removeRuntimeDataURLs = (config: DashboardConfig) => {
+  if (config.datasets) {
+    Object.keys(config.datasets).forEach(datasetKey => {
+      delete config.datasets[datasetKey].runtimeDataUrl
+    })
+  }
+}
+
+export const stripConfig = configToStrip => {
+  const strippedConfig = cloneConfig(configToStrip)
+  if (strippedConfig.type === 'dashboard') {
+    if (strippedConfig.multiDashboards) {
+      strippedConfig.multiDashboards.forEach((multiDashboard, i) => {
+        cleanDashboardData(strippedConfig.multiDashboards[i])
+        cleanSharedFilters(strippedConfig.multiDashboards[i])
+        cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
+        cleanVisualizationFilters(strippedConfig.multiDashboards[i])
+      })
+      delete strippedConfig.dashboard
+      delete strippedConfig.rows
+      delete strippedConfig.visualizations
+      delete strippedConfig.label
+    }
+    delete strippedConfig.activeDashboard
+    cleanDashboardData(strippedConfig)
+    cleanSharedFilters(strippedConfig)
+    cleanDashboardFootnotes(strippedConfig)
+    cleanVisualizationFilters(strippedConfig)
+    removeRuntimeDataURLs(strippedConfig)
+  } else {
+    delete strippedConfig.runtime
+    delete strippedConfig.formattedData
+    if (strippedConfig.dataUrl) {
+      delete strippedConfig.data
+    }
+  }
+
+  return strippedConfig
+}

package/src/helpers/getVizConfig.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { getApplicableFilters } from './getFilteredData'
@@ -7,7 +8,7 @@ import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 const transform = new DataTransform()
 
-export const getFootnotesVizConfig = (
+const getFootnotesVizConfig = (
   visualizationConfig: AnyVisualization,
   rowNumber: number,
   config: MultiDashboardConfig,
@@ -23,7 +24,7 @@ export const getFootnotesVizConfig = (
   const sharedFilters = config.dashboard.sharedFilters
   const matchingFilters = sharedFilters.filter(f => f.usedBy?.includes(visualizationKey))
 
-  if (matchingFilters.length) {
+  if (matchingFilters.length && visualizationConfig.footnotes.data) {
     visualizationConfig.footnotes.data = filterData(matchingFilters, data)
   } else {
     if (visualizationConfig.footnotes.data) {
@@ -44,7 +45,7 @@ export const getVizConfig = (
   multiVizColumn?: string
 ): AnyVisualization => {
   if (rowNumber === undefined) return {} as AnyVisualization
-  const visualizationConfig = _.cloneDeep(config.visualizations[visualizationKey])
+  const visualizationConfig = cloneConfig(config.visualizations[visualizationKey])
   const rowData = config.rows[rowNumber]
   if (visualizationConfig.footnotes?.dataKey) {
     visualizationConfig.footnotes.data = config.datasets[visualizationConfig.footnotes.dataKey]?.data
@@ -54,21 +55,36 @@ export const getVizConfig = (
     Object.assign(visualizationConfig, _.pick(rowData, ['dataKey', 'dataDescription', 'formattedData', 'data']))
   }
 
-  if (visualizationConfig.table && config.dashboard.sharedFilters.length) {
-    // Download CSV button needs to know to include shared filter columns
-    const sharedFilterColumns = config.dashboard.sharedFilters.reduce((acc, filter) => {
-      if (!filter.usedBy?.length || filter.usedBy?.includes(visualizationKey)) {
-        const apiFilter = filter.apiFilter
-        const colName = apiFilter?.textSelector || apiFilter?.valueSelector || filter.columnName
-        acc.push(colName)
-        const subGrouping =
-          apiFilter?.subgroupTextSelector || apiFilter?.subgroupValueSelector || filter.subGrouping?.columnName
-        if (subGrouping) {
-          acc.push(subGrouping)
-        }
+  const sharedFilterColumns = config.dashboard.sharedFilters.reduce((acc, filter) => {
+    if (!filter.usedBy?.length || filter.usedBy?.includes(visualizationKey)) {
+      const apiFilter = filter.apiFilter
+      const colName = apiFilter?.textSelector || apiFilter?.valueSelector || filter.columnName
+      acc.push(colName)
+      const subGrouping =
+        apiFilter?.subgroupTextSelector || apiFilter?.subgroupValueSelector || filter.subGrouping?.columnName
+      if (subGrouping) {
+        acc.push(subGrouping)
       }
-      return acc
-    }, [])
+    }
+    return acc
+  }, [])
+
+  // Collect active dashboard filters for markup variable processing
+  // This allows markup variables to filter even when the viz isn't in usedBy
+  const activeDashboardFilters = config.dashboard.sharedFilters
+    .filter(filter => filter.active !== undefined && filter.active !== null && filter.active !== '')
+    .map(filter => ({
+      columnName: filter.columnName,
+      active: filter.active,
+      values: filter.values || []
+    }))
+
+  if (activeDashboardFilters.length > 0) {
+    visualizationConfig.dashboardFilters = activeDashboardFilters
+  }
+
+  // Download CSV button needs to know to include shared filter columns
+  if (visualizationConfig.table && config.dashboard.sharedFilters.length) {
     visualizationConfig.table.sharedFilterColumns = sharedFilterColumns
   }
 
@@ -82,7 +98,9 @@ export const getVizConfig = (
     }
   } else {
     const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    visualizationConfig.data = data[dataKey] || []
+    // Markup-includes need data even when shared filters exist (for markup variables)
+    const shouldClearData = sharedFilterColumns.length && visualizationConfig.type !== 'markup-include'
+    visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =
         transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) ||

package/src/helpers/loadAPIFilters.ts

@@ -1,99 +1,109 @@
-import _ from 'lodash'
-import { APIFilterDropdowns } from '../components/DashboardFilters'
-import { SharedFilter } from '../types/SharedFilter'
-import * as apiFilterHelpers from './apiFilterHelpers'
-import { APIFilter } from '../types/APIFilter'
-import { getParentParams, notAllParentsSelected } from './apiFilterHelpers'
-
-export const loadAPIFiltersFactory = (
-  dispatch: Function,
-  dispatchErrorMessages: Function,
-  setAPIFilterDropdowns: Function,
-  autoLoadFilterIndexes: number[]
-) => {
-  const loadAPIFilters = (
-    sharedFilters: SharedFilter[],
-    dropdowns: APIFilterDropdowns,
-    loadAll?: boolean,
-    recursiveLimit = 50
-  ): Promise<SharedFilter[]> => {
-    if (!sharedFilters) return
-    const allIndexes = sharedFilters.map((_, index) => index)
-    const _autoLoadFilterIndexes = loadAll ? allIndexes : autoLoadFilterIndexes
-    sharedFilters = sharedFilters.map((filter, index) =>
-      apiFilterHelpers.setAutoLoadDefaultValue(
-        index,
-        dropdowns[filter.apiFilter?.apiEndpoint],
-        sharedFilters,
-        _autoLoadFilterIndexes
-      )
-    )
-    const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
-    const filterLookup = new Map(sharedAPIFilters.map(filter => [filter.apiFilter.apiEndpoint, filter.apiFilter]))
-    const toFetch = apiFilterHelpers.getToFetch(sharedFilters, dropdowns)
-    const loadingDropdowns = Object.values(toFetch).reduce(
-      (acc, [dropdownsKey]) => ({ ...acc, [dropdownsKey]: null }),
-      {}
-    )
-    setAPIFilterDropdowns(currentState => {
-      return { ...currentState, ...loadingDropdowns }
-    })
-    const newDropdowns = _.cloneDeep(dropdowns)
-    return Promise.all(
-      Object.keys(toFetch).map(
-        endpoint =>
-          new Promise<{ error: boolean }>(resolve => {
-            fetch(endpoint)
-              .then(resp => resp.json())
-              .then(data => {
-                if (!Array.isArray(data)) {
-                  console.error('COVE only supports response data in the shape Array<Object>')
-                }
-                const [_key, index] = toFetch[endpoint]
-                const apiFilter = filterLookup.get(_key) as APIFilter
-                const _filterValues = apiFilterHelpers.getFilterValues(data, apiFilter)
-
-                newDropdowns[_key] = _filterValues
-                const newDefaultSelectedFilter = apiFilterHelpers.setAutoLoadDefaultValue(
-                  index,
-                  _filterValues,
-                  sharedFilters,
-                  _autoLoadFilterIndexes
-                )
-                sharedFilters[index] = newDefaultSelectedFilter
-              })
-              .catch(() => {
-                dispatchErrorMessages({
-                  type: 'ADD_ERROR_MESSAGE',
-                  payload: 'There was a problem returning data. Please try again.'
-                })
-                resolve({ error: true })
-              })
-              .finally(() => {
-                resolve({ error: false })
-              })
-          })
-      )
-    ).then(responses => {
-      const hasError = responses.some(({ error }) => error)
-      const toLoad = sharedFilters.reduce((acc, curr, index) => {
-        // the filter is autoloading and it hasn't finished yet
-        if (_autoLoadFilterIndexes.includes(index) && !curr.active) {
-          if (notAllParentsSelected(getParentParams(curr, sharedFilters))) {
-            return acc
-          }
-          return [...acc, index]
-        }
-        return acc
-      }, [])
-      if (hasError || !toLoad.length || recursiveLimit === 0) {
-        setAPIFilterDropdowns(newDropdowns)
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
-        return sharedFilters
-      } else {
-        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1)
-      }
-    })
-  }
-  return loadAPIFilters
-}
+import _ from 'lodash'
+import { APIFilterDropdowns } from '../components/DashboardFilters'
+import { SharedFilter } from '../types/SharedFilter'
+import * as apiFilterHelpers from './apiFilterHelpers'
+import { APIFilter } from '../types/APIFilter'
+import { getParentParams, notAllParentsSelected } from './apiFilterHelpers'
+
+export const loadAPIFiltersFactory = (
+  dispatch: Function,
+  dispatchErrorMessages: Function,
+  setAPIFilterDropdowns: Function,
+  autoLoadFilterIndexes: number[]
+) => {
+  const loadAPIFilters = (
+    sharedFilters: SharedFilter[],
+    dropdowns: APIFilterDropdowns,
+    loadAll?: boolean,
+    recursiveLimit = 50,
+    isStale?: () => boolean
+  ): Promise<SharedFilter[]> => {
+    if (!sharedFilters) return
+    const allIndexes = sharedFilters.map((_, index) => index)
+    const _autoLoadFilterIndexes = loadAll ? allIndexes : autoLoadFilterIndexes
+    sharedFilters = sharedFilters.map((filter, index) => {
+      // For data filters (no API endpoint), return unchanged to preserve user selections
+      if (!filter.apiFilter?.apiEndpoint) {
+        return filter
+      }
+      return apiFilterHelpers.setAutoLoadDefaultValue(
+        index,
+        dropdowns[filter.apiFilter.apiEndpoint],
+        sharedFilters,
+        _autoLoadFilterIndexes
+      )
+    })
+    const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
+    const filterLookup = new Map(sharedAPIFilters.map(filter => [filter.apiFilter.apiEndpoint, filter.apiFilter]))
+    const toFetch = apiFilterHelpers.getToFetch(sharedFilters, dropdowns)
+    const loadingDropdowns = Object.values(toFetch).reduce(
+      (acc, [dropdownsKey]) => ({ ...acc, [dropdownsKey]: null }),
+      {}
+    )
+    setAPIFilterDropdowns(currentState => {
+      return { ...currentState, ...loadingDropdowns }
+    })
+    const newDropdowns = _.cloneDeep(dropdowns)
+    return Promise.all(
+      Object.keys(toFetch).map(
+        endpoint =>
+          new Promise<{ error: boolean }>(resolve => {
+            fetch(endpoint)
+              .then(resp => resp.json())
+              .then(data => {
+                if (!Array.isArray(data)) {
+                  console.error('COVE only supports response data in the shape Array<Object>')
+                }
+                const [_key, index] = toFetch[endpoint]
+                const apiFilter = filterLookup.get(_key) as APIFilter
+                const _filterValues = apiFilterHelpers.getFilterValues(data, apiFilter)
+
+                newDropdowns[_key] = _filterValues
+                const newDefaultSelectedFilter = apiFilterHelpers.setAutoLoadDefaultValue(
+                  index,
+                  _filterValues,
+                  sharedFilters,
+                  _autoLoadFilterIndexes
+                )
+                sharedFilters[index] = newDefaultSelectedFilter
+              })
+              .catch(() => {
+                dispatchErrorMessages({
+                  type: 'ADD_ERROR_MESSAGE',
+                  payload: 'There was a problem returning data. Please try again.'
+                })
+                resolve({ error: true })
+              })
+              .finally(() => {
+                resolve({ error: false })
+              })
+          })
+      )
+    ).then(responses => {
+      const hasError = responses.some(({ error }) => error)
+      const toLoad = sharedFilters.reduce((acc, curr, index) => {
+        // the filter is autoloading and it hasn't finished yet
+        if (_autoLoadFilterIndexes.includes(index) && !curr.active) {
+          if (notAllParentsSelected(getParentParams(curr, sharedFilters))) {
+            return acc
+          }
+          return [...acc, index]
+        }
+        return acc
+      }, [])
+      if (hasError || !toLoad.length || recursiveLimit === 0) {
+        // Check if this operation is stale before dispatching
+        if (isStale && isStale()) {
+          // Operation is stale (filters were cleared), skip dispatch
+          return sharedFilters
+        }
+        setAPIFilterDropdowns(newDropdowns)
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
+        return sharedFilters
+      } else {
+        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1, isStale)
+      }
+    })
+  }
+  return loadAPIFilters
+}

package/src/helpers/reloadURLHelpers.ts

@@ -103,7 +103,7 @@ export const getVisualizationsWithFormattedData = (visualizations: Record<string
       acc[vizKey].formattedData = newData[dataKey]
     }
     return acc
-  }, _.cloneDeep(visualizations))
+  }, visualizations)
 }
 
 export const filterUsedByDataUrl = (