@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/VisualizationRow.tsx

@@ -1,5 +1,5 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import Toggle from './Toggle'
 import cloneDeep from 'lodash/cloneDeep'
 import { ConfigRow } from '../types/ConfigRow'
@@ -11,6 +11,12 @@ import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
 import DashboardSharedFilters, { APIFilterDropdowns } from './DashboardFilters'
 import { DashboardContext } from '../DashboardContext'
 import { ViewPort } from '@cdc/core/types/ViewPort'
+import { evaluateDashboardCondition } from '../helpers/dashboardConditions'
+import { dashboardConditionsSupportedForRow } from '../helpers/dashboardFilterTargets'
+import {
+  hasAuthoredWidgetEntries,
+  resolveColumnWidgetEntry as resolveDashboardColumnWidgetEntry
+} from '../helpers/dashboardColumnWidgets'
 import { getVizConfig } from '../helpers/getVizConfig'
 import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
@@ -21,6 +27,7 @@ import ExpandCollapseButtons from './ExpandCollapseButtons'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasVisibleDashboardFiltersForIndexes } from '../helpers/filterVisibility'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -63,6 +70,8 @@ type VizRowProps = {
   rowIndex: number
   inNoDataState: boolean
   setSharedFilter: Function
+  clearSharedFilter: (key: string) => void
+  hasActiveSharedFilter: (key: string) => boolean
   updateChildConfig: Function
   apiFilterDropdowns: APIFilterDropdowns
   currentViewport: ViewPort
@@ -79,6 +88,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   rowIndex: index,
   inNoDataState,
   setSharedFilter,
+  clearSharedFilter,
+  hasActiveSharedFilter,
   updateChildConfig,
   apiFilterDropdowns,
   currentViewport,
@@ -87,7 +98,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   interactionLabel = ''
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
-  const [toggledRow, setToggled] = React.useState<number>(0)
+  const [toggledRow, setToggled] = useState<number>(0)
+  const rowRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (row.toggle) setToggled(0)
@@ -103,15 +115,18 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [toggledRow, row.toggle])
 
-  const setupTP5MinHeightEqualizer = (rowElement: Element, itemSelector: string) => {
-    const items = Array.from(rowElement.querySelectorAll(itemSelector)) as HTMLElement[]
-    if (items.length <= 1) return undefined
+  const setupMinHeightEqualizer = (rowElement: HTMLElement, selectors: string[]) => {
+    let items: HTMLElement[] = []
+    const selector = selectors.join(', ')
+    const resizeObserver = new ResizeObserver(() => equalizeHeights())
 
     const equalizeHeights = () => {
       items.forEach(item => {
         item.style.minHeight = ''
       })
 
+      if (items.length <= 1) return
+
       let maxHeight = 0
       items.forEach(item => {
         const height = item.offsetHeight
@@ -125,42 +140,105 @@ const VisualizationRow: React.FC<VizRowProps> = ({
       }
     }
 
-    equalizeHeights()
+    const refreshItems = () => {
+      const nextItems = Array.from(rowElement.querySelectorAll(selector)) as HTMLElement[]
+      const nextSet = new Set(nextItems)
+
+      items.forEach(item => {
+        if (!nextSet.has(item)) {
+          resizeObserver.unobserve(item)
+          item.style.minHeight = ''
+        }
+      })
 
-    const resizeObserver = new ResizeObserver(() => {
+      nextItems.forEach(item => {
+        if (!items.includes(item)) {
+          resizeObserver.observe(item)
+        }
+      })
+
+      items = nextItems
       equalizeHeights()
-    })
+    }
 
-    items.forEach(item => {
-      resizeObserver.observe(item)
+    const mutationObserver = new MutationObserver(() => {
+      refreshItems()
     })
 
-    return () => resizeObserver.disconnect()
+    mutationObserver.observe(rowElement, { childList: true, subtree: true })
+    refreshItems()
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver.disconnect()
+      items.forEach(item => {
+        item.style.minHeight = ''
+      })
+    }
   }
 
-  // Equalize TP5 callout title heights and TP5 gauge message blocks for like visualizations in the same row
-  useEffect(() => {
-    if (!row.equalHeight) return
+  const shouldIgnoreDashboardConditions = !dashboardConditionsSupportedForRow(row)
+  const columnDashboardConditionEvaluations = useMemo(
+    () =>
+      row.columns.map(column =>
+        resolveDashboardColumnWidgetEntry(column, {
+          evaluateCondition: dashboardCondition => {
+            if (shouldIgnoreDashboardConditions || !dashboardCondition) {
+              return { matches: true, resolved: true }
+            }
+
+            return evaluateDashboardCondition(dashboardCondition, dashboardFilteredData[dashboardCondition.id])
+          }
+        })
+      ),
+    [dashboardFilteredData, row.columns, shouldIgnoreDashboardConditions]
+  )
+
+  const tp5CountInRow = columnDashboardConditionEvaluations.reduce((count, evaluation) => {
+    const widgetKey = evaluation?.widget
+    if (!widgetKey) return count
+    const viz = config.visualizations[widgetKey]
+    if (!viz) return count
+
+    const isTp5DataBite = viz.type === 'data-bite' && (viz as any).biteStyle === 'tp5'
+    const isTp5WaffleOrGauge =
+      viz.type === 'waffle-chart' && (viz.visualizationType === 'TP5 Waffle' || viz.visualizationType === 'TP5 Gauge')
+    const isTp5MarkupInclude = viz.type === 'markup-include' && (viz as any).contentEditor?.style === 'tp5'
 
-    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    return isTp5DataBite || isTp5WaffleOrGauge || isTp5MarkupInclude ? count + 1 : count
+  }, 0)
+  const needsTP5AutoEqualization = tp5CountInRow > 1
+  const shouldEqualizeRow = !!row.equalHeight || needsTP5AutoEqualization
+
+  // Layer TP5 equalization for row-level title consistency and same-type internals.
+  useLayoutEffect(() => {
+    if (!shouldEqualizeRow) return
+
+    const rowElement = rowRef.current
     if (!rowElement) return
 
     const cleanups = [
-      setupTP5MinHeightEqualizer(rowElement, '.bite__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.waffle__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cdc-callout__heading'),
-      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cove-gauge-chart__content')
-    ].filter(Boolean) as Array<() => void>
+      // Cross-type TP5 title alignment in the row.
+      setupMinHeightEqualizer(rowElement, [
+        '.bite__style--tp5 .cdc-callout__heading',
+        '.waffle__style--tp5 .cdc-callout__heading',
+        '.gauge__style--tp5 .cdc-callout__heading',
+        '.markup-include__style--tp5 .cdc-callout__heading'
+      ]),
+      // Same-type gauge internals alignment so gauge meters line up despite content variance.
+      setupMinHeightEqualizer(rowElement, ['.gauge__style--tp5 .cove-gauge-chart__content'])
+    ]
 
     return () => {
       cleanups.forEach(cleanup => cleanup())
     }
-  }, [index, row, config, filteredDataOverride])
+  }, [shouldEqualizeRow, row.columns, config.activeDashboard, filteredDataOverride, dashboardFilteredData[index]])
 
-  const isFilterRow = row.columns.some(
-    col => col.widget && config.visualizations[col.widget]?.type === 'dashboardFilters'
-  )
-  const needsEqualHeight = !!row.equalHeight && !isFilterRow
+  const isFilterRow = columnDashboardConditionEvaluations.some(evaluation => {
+    const widgetKey = evaluation?.widget
+    return widgetKey && config.visualizations[widgetKey]?.type === 'dashboardFilters'
+  })
+  const needsEqualHeight = shouldEqualizeRow && !isFilterRow
 
   const show = useMemo(() => {
     if (row.toggle) {
@@ -171,6 +249,33 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   }, [config.activeDashboard, toggledRow])
 
   const _data = dashboardFilteredData[index] || row.formattedData || []
+  const isMultiVizGroupRow = !!row.originalMultiVizColumn && !!filteredDataOverride
+  const rowDashboardCondition = useMemo(() => {
+    if (shouldIgnoreDashboardConditions || !row.dashboardCondition) {
+      return { matches: true, resolved: true }
+    }
+
+    return evaluateDashboardCondition(row.dashboardCondition, dashboardFilteredData[row.dashboardCondition.id])
+  }, [dashboardFilteredData, row.dashboardCondition, shouldIgnoreDashboardConditions])
+  const hasVisibleWidgetColumn = row.columns.some((_column, columnIndex) => {
+    if (!row.columns[columnIndex].width) return false
+
+    const widgetKey = columnDashboardConditionEvaluations[columnIndex]?.widget
+    if (!widgetKey) return false
+
+    const visualization = config.visualizations[widgetKey]
+    if (visualization?.type !== 'dashboardFilters') return true
+
+    return hasVisibleDashboardFiltersForIndexes(
+      config.dashboard.sharedFilters,
+      (visualization as DashboardFilters).sharedFilterIndexes
+    )
+  })
+
+  if (!rowDashboardCondition.matches || !hasVisibleWidgetColumn) {
+    return null
+  }
+
   const dataGroups =
     row.multiVizColumn &&
     _data.reduce((acc, dataRow) => {
@@ -187,7 +292,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     const applyFilters = dashboardFilters.filter(v => !v.autoLoad).flatMap(v => v.sharedFilterIndexes)
     if (hasDashboardApplyBehavior(config.visualizations) && vizConfig.autoLoad) {
       return applyFilters.some(index => {
-        const { queuedActive, active, subGrouping } = config.dashboard.sharedFilters[index]
+        const filter = config.dashboard.sharedFilters[index]
+        if (!filter) return false
+        const { queuedActive, active, subGrouping } = filter
         if (!active && !queuedActive) return true
         if (!queuedActive) return false
         // for nested dropdowns
@@ -236,6 +343,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
   return (
     <div
+      ref={rowRef}
       className={`row${needsEqualHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
       key={`row__${index}`}
       data-row-index={index}
@@ -245,11 +353,27 @@ const VisualizationRow: React.FC<VizRowProps> = ({
       )}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget)
-            return <div key={`row__${index}__col__${colIndex}`} className={`col-12 col-md-${col.width}`}></div>
+          const resolvedWidget = columnDashboardConditionEvaluations[colIndex]?.widget
+          const hasAuthoredWidgets = hasAuthoredWidgetEntries(col)
+          const hiddenByDashboardCondition = hasAuthoredWidgets && !resolvedWidget
+          if (!resolvedWidget) {
+            if (!hasAuthoredWidgets && (isMultiVizGroupRow || row.toggle)) {
+              return null
+            }
+
+            return (
+              <div
+                key={`row__${index}__col__${colIndex}`}
+                className={`col-12 col-md-${col.width}${
+                  hiddenByDashboardCondition ? ' dashboard-condition-hidden' : ''
+                }`}
+                data-dashboard-condition-hidden={hiddenByDashboardCondition || undefined}
+              ></div>
+            )
+          }
 
           const visualizationConfig = getVizConfig(
-            col.widget,
+            resolvedWidget,
             index,
             config,
             rawData,
@@ -262,9 +386,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const setsSharedFilter =
             config.dashboard.sharedFilters &&
-            config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
+            config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === resolvedWidget).length > 0
           const setSharedFilterValue = setsSharedFilter
-            ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active
+            ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === resolvedWidget)[0].active
             : undefined
           const tableLink = (
             <a
@@ -300,9 +424,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const hiddenDashboardFilters =
             type === 'dashboardFilters' &&
-            sharedFilterIndexes &&
-            sharedFilterIndexes.filter(idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false).length ===
-              sharedFilterIndexes.length
+            !hasVisibleDashboardFiltersForIndexes(config.dashboard.sharedFilters, sharedFilterIndexes)
 
           const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
             hideVisualization ? ' hide-parent-visualization' : ''
@@ -322,12 +444,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             >
               {type === 'chart' && (
                 <CdcChart
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig as ChartConfig}
                   dashboardConfig={config}
                   datasets={config.datasets}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                   isDashboard={true}
@@ -337,13 +459,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'map' && (
                 <CdcMap
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   showLoader={false}
                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                  clearSharedFilter={setsSharedFilter ? clearSharedFilter : undefined}
+                  hasActiveSharedFilter={setsSharedFilter ? hasActiveSharedFilter(resolvedWidget) : false}
                   setSharedFilterValue={setSharedFilterValue}
                   isDashboard={true}
                   link={link}
@@ -353,10 +477,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'data-bite' && (
                 <CdcDataBite
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                   isEditor={config.editing === true}
@@ -365,10 +490,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'waffle-chart' && (
                 <CdcWaffleChart
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
+                  rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                   interactionLabel={interactionLabel}
@@ -376,22 +502,22 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'markup-include' && (
                 <CdcMarkupInclude
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   datasets={config.datasets}
                   isDashboard={true}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   interactionLabel={interactionLabel}
                 />
               )}
               {type === 'filtered-text' && (
                 <CdcFilteredText
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                 />
@@ -399,9 +525,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               {type === 'dashboardFilters' && (
                 <DashboardSharedFilters
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
-                  key={col.widget}
+                  key={resolvedWidget}
                   visualizationConfig={visualizationConfig as DashboardFilters}
                   apiFilterDropdowns={apiFilterDropdowns}
                   currentViewport={currentViewport}
@@ -410,11 +536,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'table' && (
                 <DataTableStandAlone
-                  key={col.widget}
+                  key={resolvedWidget}
                   updateConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
-                  visualizationKey={col.widget}
+                  visualizationKey={resolvedWidget}
                   config={visualizationConfig as TableConfig}
                   viewport={currentViewport}
                   interactionLabel={interactionLabel}

package/src/components/VisualizationsPanel/VisualizationsPanel.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../../DashboardContext'
+import VisualizationsPanel from './VisualizationsPanel'
+
+vi.mock('../Widget/Widget', () => ({
+  default: ({ type }: { type: string }) => <div data-testid='creation-widget'>{type}</div>
+}))
+
+vi.mock('@cdc/core/components/AdvancedEditor', () => ({
+  default: () => <div data-testid='advanced-editor' />
+}))
+
+describe('VisualizationsPanel', () => {
+  it('does not expose filtered-text in dashboard creation surfaces', () => {
+    render(
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            dashboard: { sharedFilters: [] },
+            datasets: {},
+            rows: [],
+            visualizations: {}
+          } as any,
+          outerContainerRef: vi.fn(),
+          setParentConfig: vi.fn(),
+          isDebug: false,
+          isEditor: true,
+          reloadURLData: vi.fn(),
+          loadAPIFilters: vi.fn(),
+          setAPIFilterDropdowns: vi.fn(),
+          setAPILoading: vi.fn(),
+          data: {}
+        }}
+      >
+        <DashboardDispatchContext.Provider value={vi.fn()}>
+          <VisualizationsPanel />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    )
+
+    const creationTypes = screen.getAllByTestId('creation-widget').map(widget => widget.textContent)
+    expect(creationTypes).toContain('markup-include')
+    expect(creationTypes).not.toContain('filtered-text')
+  })
+})

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -12,6 +12,8 @@ const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
   const { config, isEditor } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
+  const createVisualization = (type, subType) =>
+    addVisualization(type, subType, { existingIds: Object.keys(config.visualizations || {}) })
   const loadConfig = incomingConfig => {
     const newConfig = !incomingConfig.multiDashboards
       ? incomingConfig
@@ -29,25 +31,24 @@ const VisualizationsPanel = () => {
       <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
       <span className='subheading-3'>Chart</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
-        <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
-        <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
-        <Widget addVisualization={() => addVisualization('chart', 'Sankey')} type='Sankey' />
+        <Widget addVisualization={() => createVisualization('chart', 'Bar')} type='Bar' />
+        <Widget addVisualization={() => createVisualization('chart', 'Line')} type='Line' />
+        <Widget addVisualization={() => createVisualization('chart', 'Pie')} type='Pie' />
+        <Widget addVisualization={() => createVisualization('chart', 'Sankey')} type='Sankey' />
       </div>
       <span className='subheading-3'>Map</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('map', 'us')} type='us' />
-        <Widget addVisualization={() => addVisualization('map', 'world')} type='world' />
-        <Widget addVisualization={() => addVisualization('map', 'single-state')} type='single-state' />
+        <Widget addVisualization={() => createVisualization('map', 'us')} type='us' />
+        <Widget addVisualization={() => createVisualization('map', 'world')} type='world' />
+        <Widget addVisualization={() => createVisualization('map', 'single-state')} type='single-state' />
       </div>
       <span className='subheading-3'>Misc.</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
-        <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
-        <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
-        <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
-        <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
-        <Widget addVisualization={() => addVisualization('table', '')} type='table' />
+        <Widget addVisualization={() => createVisualization('data-bite', '')} type='data-bite' />
+        <Widget addVisualization={() => createVisualization('waffle-chart', 'Waffle')} type='waffle-chart' />
+        <Widget addVisualization={() => createVisualization('markup-include', '')} type='markup-include' />
+        <Widget addVisualization={() => createVisualization('dashboardFilters', '')} type='dashboardFilters' />
+        <Widget addVisualization={() => createVisualization('table', '')} type='table' />
       </div>
       <AdvancedEditor
         loadConfig={loadConfig}