@cdc/dashboard 4.26.2 → 4.26.3

package/src/components/VisualizationRow.tsx

@@ -1,7 +1,7 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
 import React, { useContext, useEffect, useMemo, useState } from 'react'
 import Toggle from './Toggle'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { ConfigRow } from '../types/ConfigRow'
 import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
 import CdcMap from '@cdc/map/src/CdcMapComponent'
@@ -140,6 +140,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   // Equalize TP5 callout title heights and TP5 gauge message blocks for like visualizations in the same row
   useEffect(() => {
+    if (!row.equalHeight) return
+
     const rowElement = document.querySelector(`[data-row-index="${index}"]`)
     if (!rowElement) return
 
@@ -155,6 +157,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [index, row, config, filteredDataOverride])
 
+  const isFilterRow = row.columns.some(
+    col => col.widget && config.visualizations[col.widget]?.type === 'dashboardFilters'
+  )
+  const needsEqualHeight = !!row.equalHeight && !isFilterRow
+
   const show = useMemo(() => {
     if (row.toggle) {
       return row.columns.map((col, i) => i === toggledRow)
@@ -201,7 +208,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
         )}
         {Object.keys(dataGroups).map(groupName => {
           const dataValue = dataGroups[groupName]
-          const _row = _.cloneDeep(row) // clone the row to avoid mutating the original row
+          const _row = cloneDeep(row) // clone the row to avoid mutating the original row
           const originalMultiVizColumn = _row.multiVizColumn // store original value before clearing
           _row.multiVizColumn = undefined // reset the multiVizColumn to avoid passing it to the child components
           _row.originalMultiVizColumn = originalMultiVizColumn // store for footnote filtering
@@ -229,7 +236,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   return (
     <div
-      className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
+      className={`row${needsEqualHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
       key={`row__${index}`}
       data-row-index={index}
     >
@@ -352,6 +359,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
+                  isEditor={config.editing === true}
                   interactionLabel={interactionLabel}
                 />
               )}
@@ -363,7 +371,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
-                  interactionLabel={link}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'markup-include' && (

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -1,66 +1,13 @@
 import { useContext, useState } from 'react'
-import type { AnyVisualization } from '@cdc/core/types/Visualization'
 import Widget from '../Widget/Widget'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
-import { Table } from '@cdc/core/types/Table'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { addVisualization } from '../../helpers/addVisualization'
 import { mapDataToConfig } from '../../helpers/mapDataToConfig'
 import './visualizations-panel-styles.css'
 import { MultiDashboardConfig } from '../../types/MultiDashboard'
 import { stripConfig } from '../../helpers/formatConfigBeforeSave'
 
-const addVisualization = (type, subType) => {
-  const modalWillOpen = type !== 'markup-include'
-  const newVisualizationConfig: Partial<AnyVisualization> = {
-    filters: [],
-    filterBehavior: 'Filter Change',
-    newViz: type !== 'table',
-    openModal: modalWillOpen,
-    uid: type + Date.now(),
-    type
-  }
-
-  switch (type) {
-    case 'chart':
-      newVisualizationConfig.visualizationType = subType
-      break
-    case 'map':
-      newVisualizationConfig.general = {}
-      newVisualizationConfig.general.geoType = subType
-      break
-    case 'data-bite' || 'waffle-chart' || 'filtered-text':
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'table':
-      const tableConfig: Table = {
-        label: 'Data Table',
-        show: true,
-        showDownloadUrl: false,
-        showVertical: true,
-        expanded: true,
-        collapsible: true
-      }
-      newVisualizationConfig.table = tableConfig
-      newVisualizationConfig.columns = {}
-      newVisualizationConfig.dataFormat = {}
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'markup-include':
-      newVisualizationConfig.visualizationType = type
-      break
-    case 'dashboardFilters': {
-      newVisualizationConfig.sharedFilterIndexes = []
-      newVisualizationConfig.visualizationType = type
-      break
-    }
-    default:
-      newVisualizationConfig.visualizationType = type
-      break
-  }
-
-  return newVisualizationConfig
-}
-
 const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
   const { config, isEditor } = useContext(DashboardContext)

package/src/components/VisualizationsPanel/visualizations-panel-styles.css

@@ -1,10 +1,10 @@
 .visualizations-panel {
   background-color: #fff;
+  border-right: #c7c7c7 1px solid;
+  overflow-y: scroll;
   padding: 1em;
   width: var(--editorWidth);
-  border-right: #c7c7c7 1px solid;
   z-index: 1;
-  overflow-y: scroll;
 
   &.advanced-editor {
     width: 50vw;

package/src/components/Widget/Widget.tsx

@@ -105,11 +105,11 @@ const Widget = ({
       const url = changeDataLimit(dataset.dataUrl, 100)
       if (url) {
         fetchRemoteData(url)
-          .then(responseData => {
+          .then(({ data: responseData }) => {
             // this sample data is temporary.
             // the HEADER component removes the data when you toggle to the main viz panel.
             // data will be cached only when it's loaded via dashboard preview.
-            responseData.sample = true
+            ;(responseData as any).sample = true
             dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
           })
           .catch(error => {

package/src/components/Widget/widget.styles.css

@@ -1,13 +1,13 @@
 .widget__toggle-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 25%;
   background-color: #005eaa;
   color: white;
+  display: flex;
+  flex-direction: column;
+  height: 25%;
+  justify-content: center;
   padding: 5px;
+  width: 100%;
 }
 
 .widget__edit-title-icon {
@@ -19,37 +19,37 @@
 }
 
 .widget--toggle .widget__content .widget-menu + svg {
+  flex-grow: unset;
   height: 35px !important;
   width: 35px !important;
-  flex-grow: unset;
 }
 
 .widget-menu {
   position: absolute;
-  top: 6px;
   right: 6px;
+  top: 6px;
 }
 
 .widget-menu {
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
 }
 
 .btn-configure {
   background: none;
-  width: 20px;
   height: 20px;
-  padding: 0;
   margin: 0 5px;
+  padding: 0;
+  width: 20px;
 }
 
 .widget-menu-item {
+  cursor: pointer;
   display: block;
-  width: 20px;
   height: 20px;
-  cursor: pointer;
   user-select: none;
+  width: 20px;
 }
 
 .widget-menu-item svg {

package/src/data/initial-state.js

@@ -4,7 +4,7 @@ export default {
     titleStyle: 'small',
     sharedFilters: []
   },
-  rows: [[{ width: 12 }, {}, {}]],
+  rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
     label: 'Data Table',

package/src/helpers/addVisualization.ts

@@ -0,0 +1,71 @@
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import type { Table } from '@cdc/core/types/Table'
+
+export const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<AnyVisualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      newVisualizationConfig.visual = {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+      break
+    case 'data-bite':
+    case 'waffle-chart':
+    case 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'table': {
+      const tableConfig: Table = {
+        label: 'Data Table',
+        show: true,
+        showDownloadUrl: false,
+        showVertical: true,
+        expanded: true,
+        collapsible: true
+      }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    case 'markup-include':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'dashboardFilters': {
+      newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}

package/src/helpers/formatConfigBeforeSave.ts

@@ -129,7 +129,7 @@ export const stripConfig = (configToStrip, isEditor = false) => {
   } else {
     delete strippedConfig.runtime
     delete strippedConfig.formattedData
-    if (strippedConfig.dataUrl) {
+    if (strippedConfig.dataUrl && !isEditor) {
       delete strippedConfig.data
     }
   }

package/src/helpers/getVizConfig.ts

@@ -90,6 +90,9 @@ export const getVizConfig = (
 
   if (visualizationConfig.formattedData) visualizationConfig.originalFormattedData = visualizationConfig.formattedData
   const filteredVizData = filteredData?.[rowNumber] ?? filteredData?.[visualizationKey]
+  const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
+
+  visualizationConfig.dataMetadata = config.datasets[dataKey]?.dataMetadata || {}
 
   if (filteredVizData) {
     visualizationConfig.data = filteredVizData || []
@@ -97,9 +100,16 @@ export const getVizConfig = (
       visualizationConfig.formattedData = visualizationConfig.data
     }
   } else {
-    const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-    // Markup-includes need data even when shared filters exist (for markup variables)
-    const shouldClearData = sharedFilterColumns.length && visualizationConfig.type !== 'markup-include'
+    // Clear data for charts/maps when shared filters exist but filtered data
+    // hasn't arrived yet — prevents rendering the full unfiltered dataset as DOM.
+    // Lighter types (data-bite, waffle-chart, filtered-text, markup-include) are
+    // excluded: they only compute scalars or single elements, and their editor
+    // panels need data to populate column dropdowns. Ideally data filters would
+    // apply synchronously before render, but they currently go through the same
+    // async loadAPIFilters pipeline as API filters, so filtered data isn't
+    // available on first render.
+    const heavyVizTypes = ['chart', 'map']
+    const shouldClearData = sharedFilterColumns.length && heavyVizTypes.includes(visualizationConfig.type)
     visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =

package/src/helpers/iconHash.tsx

@@ -1,36 +1,45 @@
-import Icon from '@cdc/core/components/ui/Icon'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-
-export const iconHash = {
-  'data-bite': <Icon display='databite' base />,
-  Bar: <Icon display='chartBar' base />,
-  'Spark Line': <Icon display='chartLine' />,
-  'Bump Chart': <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 />,
-  gearMulti: <Icon display='gearMulti' base />,
-  tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />,
-  dashboardFilters: <Icon display='dashboardFilters' base />,
-  table: <Icon display='table' base />,
-  Sankey: <Icon display='sankey' base />
-}
-
-export const getIcon = (visualization: AnyVisualization) => {
-  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]
-}
+import Icon from '@cdc/core/components/ui/Icon'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export const iconHash = {
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'Bump Chart': <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 />,
+  gearMulti: <Icon display='gearMulti' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />,
+  dashboardFilters: <Icon display='dashboardFilters' base />,
+  table: <Icon display='table' base />,
+  Sankey: <Icon display='sankey' base />,
+  Combo: <Icon display='chartBar' base />,
+  'Scatter Plot': <Icon display='chartBar' base />,
+  'Area Chart': <Icon display='chartLine' base />,
+  'Deviation Bar': <Icon display='chartBar' base />,
+  'Paired Bar': <Icon display='chartBar' base />,
+  'Box Plot': <Icon display='chartBar' base />,
+  'Forest Plot': <Icon display='chartBar' base />,
+  Forecasting: <Icon display='chartLine' base />,
+  'Warming Stripes': <Icon display='chartBar' base />
+}
+
+export const getIcon = (visualization: AnyVisualization) => {
+  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/processDataLegacy.ts

@@ -1,14 +1,19 @@
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import { getFormattedData } from './getFormattedData'
-
-export const processDataLegacy = async (response: any) => {
-  let dataset = response.formattedData || response.data
-
-  if (response.dataUrl) {
-    dataset = await fetchRemoteData(`${response.dataUrl}`)
-
-    dataset = getFormattedData(dataset, response.dataDescription)
-  }
-
-  return dataset
-}
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processDataLegacy = async (
+  response: any
+): Promise<{ data: any[]; dataMetadata: Record<string, string> }> => {
+  let dataset = response.formattedData || response.data
+  let dataMetadata: Record<string, string> = {}
+
+  if (response.dataUrl) {
+    const result = await fetchRemoteData(`${response.dataUrl}`)
+    dataset = result.data
+    dataMetadata = result.dataMetadata
+
+    dataset = getFormattedData(dataset, response.dataDescription)
+  }
+
+  return { data: dataset, dataMetadata }
+}

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

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest'
+import { addVisualization } from '../addVisualization'
+
+describe('addVisualization', () => {
+  it('creates chart visual settings with extra theme toggles disabled by default', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    const visualization = addVisualization('chart', 'Bar')
+
+    expect(visualization).toMatchObject({
+      uid: 'chart12345',
+      type: 'chart',
+      visualizationType: 'Bar',
+      visual: {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+    })
+  })
+
+  it('creates map visual settings with extra theme toggles disabled by default', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    const visualization = addVisualization('map', 'single-state')
+
+    expect(visualization).toMatchObject({
+      uid: 'map12345',
+      type: 'map',
+      general: {
+        geoType: 'single-state'
+      },
+      visual: {
+        border: false,
+        borderColorTheme: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false
+      }
+    })
+  })
+
+  it('preserves visualizationType for data-bite family visualizations', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(12345)
+
+    expect(addVisualization('data-bite')).toMatchObject({ visualizationType: 'data-bite' })
+    expect(addVisualization('waffle-chart')).toMatchObject({ visualizationType: 'waffle-chart' })
+    expect(addVisualization('filtered-text')).toMatchObject({ visualizationType: 'filtered-text' })
+  })
+})

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { cleanSharedFilters } from '../formatConfigBeforeSave'
+import { cleanSharedFilters, stripConfig } from '../formatConfigBeforeSave'
 import { DashboardConfig } from '../../types/DashboardConfig'
 
 describe('cleanSharedFilters', () => {
@@ -67,3 +67,83 @@ describe('cleanSharedFilters', () => {
     expect(config.dashboard.sharedFilters).toEqual([{ id: 1, type: 'urlfilter' }])
   })
 })
+
+describe('stripConfig', () => {
+  it('removes inline data for non-dashboard URL-backed configs when isEditor is false', () => {
+    const config = {
+      type: 'bar',
+      dataUrl: '/api/data.csv',
+      data: [{ value: 10 }],
+      runtime: { loaded: true },
+      formattedData: [{ value: 10 }]
+    }
+
+    const stripped = stripConfig(config)
+
+    expect(stripped.data).toBeUndefined()
+    expect(stripped.dataUrl).toBe('/api/data.csv')
+    expect(stripped.runtime).toBeUndefined()
+    expect(stripped.formattedData).toBeUndefined()
+  })
+
+  it('preserves inline data for non-dashboard URL-backed configs when isEditor is true', () => {
+    const config = {
+      type: 'bar',
+      dataUrl: '/api/data.csv',
+      data: [{ value: 10 }],
+      runtime: { loaded: true },
+      formattedData: [{ value: 10 }]
+    }
+
+    const stripped = stripConfig(config, true)
+
+    expect(stripped.data).toEqual([{ value: 10 }])
+    expect(stripped.dataUrl).toBe('/api/data.csv')
+    expect(stripped.runtime).toBeUndefined()
+    expect(stripped.formattedData).toBeUndefined()
+  })
+
+  it('removes dashboard dataset data when dataset has dataUrl and isEditor is false', () => {
+    const config = {
+      type: 'dashboard',
+      dashboard: { sharedFilters: [] },
+      datasets: {
+        data_1: {
+          dataUrl: '/api/dashboard.csv',
+          data: [{ a: 1 }],
+          formattedData: [{ a: 1 }]
+        }
+      },
+      visualizations: {},
+      rows: []
+    } as any
+
+    const stripped = stripConfig(config)
+
+    expect(stripped.datasets.data_1.data).toBeUndefined()
+    expect(stripped.datasets.data_1.formattedData).toBeUndefined()
+    expect(stripped.datasets.data_1.dataUrl).toBe('/api/dashboard.csv')
+  })
+
+  it('preserves dashboard dataset data when dataset has dataUrl and isEditor is true', () => {
+    const config = {
+      type: 'dashboard',
+      dashboard: { sharedFilters: [] },
+      datasets: {
+        data_1: {
+          dataUrl: '/api/dashboard.csv',
+          data: [{ a: 1 }],
+          formattedData: [{ a: 1 }]
+        }
+      },
+      visualizations: {},
+      rows: []
+    } as any
+
+    const stripped = stripConfig(config, true)
+
+    expect(stripped.datasets.data_1.data).toEqual([{ a: 1 }])
+    expect(stripped.datasets.data_1.formattedData).toBeUndefined()
+    expect(stripped.datasets.data_1.dataUrl).toBe('/api/dashboard.csv')
+  })
+})

package/src/scss/editor-panel.scss

@@ -4,7 +4,7 @@
 // Shift down for top level Dashboard bar when in edit mode
 .layout-container,
 .editor-panel + .cdc-dashboard-inner-container,
-.editor-heading + .cdc-open-viz-module {
+.editor-heading + .cove-visualization {
   position: relative;
   min-height: 80vh;
 }