@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/DashboardConditionModal.tsx

@@ -0,0 +1,367 @@
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import Button from '@cdc/core/components/elements/Button'
+import Loader from '@cdc/core/components/Loader'
+import Modal from '@cdc/core/components/ui/Modal'
+import MultiSelect from '@cdc/core/components/MultiSelect'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
+import { useContext, useEffect, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
+import { hasConditionalWidgets, normalizeConditionalColumn } from '../helpers/dashboardColumnWidgets'
+import { getDashboardConditionIds } from '../helpers/dashboardConditions'
+import { DASHBOARD_CONDITION_TYPE_OPTIONS, DashboardConditionTypeOption } from '../helpers/dashboardConditionUi'
+import { dashboardConditionsSupportedForRow } from '../helpers/dashboardFilterTargets'
+import { DashboardCondition } from '../types/ConfigRow'
+
+import './dashboard-condition-modal.css'
+
+type DashboardConditionModalProps = {
+  rowIndex: number
+  columnIndex?: number
+  entryIndex?: number
+}
+
+type DashboardConditionFormState = {
+  datasetKey: string
+  operator: DashboardConditionTypeOption
+  columnName: string
+  values: string[]
+}
+
+const getDashboardConditionFormState = (dashboardCondition?: DashboardCondition): DashboardConditionFormState => ({
+  datasetKey: dashboardCondition?.datasetKey || '',
+  operator: dashboardCondition?.operator || '',
+  columnName: dashboardCondition?.columnName || '',
+  values: dashboardCondition?.values || []
+})
+
+const tooltipIcon = (label: string) => (
+  <Tooltip style={{ textTransform: 'none' }}>
+    <Tooltip.Target>
+      <Icon display='question' style={{ marginLeft: '0.5rem' }} alt={label} />
+    </Tooltip.Target>
+    <Tooltip.Content>
+      <p className='dashboard-condition-modal__tooltip-text'>{label}</p>
+    </Tooltip.Content>
+  </Tooltip>
+)
+
+export const DashboardConditionModal: React.FC<DashboardConditionModalProps> = ({
+  rowIndex,
+  columnIndex,
+  entryIndex
+}) => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { overlay } = useGlobalContext()
+  const transform = new DataTransform()
+
+  const row = config.rows[rowIndex]
+  const column = columnIndex === undefined ? undefined : row.columns[columnIndex]
+  const isConditionalEntryEditor =
+    columnIndex !== undefined && entryIndex !== undefined && hasConditionalWidgets(column)
+  const existingDashboardCondition =
+    columnIndex === undefined
+      ? row.dashboardCondition
+      : isConditionalEntryEditor
+      ? column?.conditionalWidgets?.[entryIndex]?.dashboardCondition
+      : undefined
+  const [formState, setFormState] = useState<DashboardConditionFormState>(
+    getDashboardConditionFormState(existingDashboardCondition)
+  )
+  const [datasetRows, setDatasetRows] = useState<Record<string, any>[]>([])
+  const [columns, setColumns] = useState<string[]>([])
+  const [loadingColumns, setLoadingColumns] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const supportsDashboardConditions = dashboardConditionsSupportedForRow(row)
+
+  const title =
+    columnIndex === undefined
+      ? `Row ${rowIndex + 1} Dashboard Condition`
+      : isConditionalEntryEditor
+      ? `Row ${rowIndex + 1} Column ${columnIndex + 1} Component ${entryIndex + 1} Dashboard Condition`
+      : `Row ${rowIndex + 1} Column ${columnIndex + 1} Dashboard Condition`
+  const targetLabel = columnIndex === undefined ? 'row' : 'component'
+
+  const availableDatasets = Object.keys(config.datasets || {})
+  const needsValueMatch = formState.operator === 'columnHasAnyValue'
+  const usesDashboardFilterState = formState.operator === 'filtersIncomplete'
+  const hasCondition = !!formState.operator
+  const shouldShowDatasetSelect = hasCondition && !usesDashboardFilterState
+  const shouldShowColumnSelect = shouldShowDatasetSelect && needsValueMatch && !!formState.datasetKey
+  const shouldShowValueSelect = shouldShowColumnSelect && !!formState.columnName
+
+  const canSave = useMemo(() => {
+    if (!hasCondition) return true
+    if (usesDashboardFilterState) return true
+    if (!formState.datasetKey || !formState.operator) return false
+    if (!needsValueMatch) return true
+
+    return !!formState.columnName && formState.values.length > 0
+  }, [formState, hasCondition, needsValueMatch, usesDashboardFilterState])
+
+  const updateDashboardCondition = (dashboardCondition?: DashboardCondition) => {
+    if (columnIndex === undefined) {
+      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { dashboardCondition } } })
+      return
+    }
+
+    const columns = row.columns.map((currentColumn, currentColumnIndex) => {
+      if (currentColumnIndex !== columnIndex) return currentColumn
+
+      if (isConditionalEntryEditor) {
+        const conditionalWidgets = [...(currentColumn.conditionalWidgets || [])]
+        conditionalWidgets[entryIndex] = {
+          ...conditionalWidgets[entryIndex],
+          dashboardCondition
+        }
+
+        return normalizeConditionalColumn({
+          ...currentColumn,
+          conditionalWidgets
+        })
+      }
+
+      if (!dashboardCondition) {
+        return currentColumn
+      }
+
+      return normalizeConditionalColumn({
+        ...currentColumn,
+        widget: undefined,
+        conditionalWidgets: [
+          {
+            widget: currentColumn.widget,
+            dashboardCondition
+          }
+        ]
+      })
+    })
+    dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { columns } } })
+  }
+
+  const closeModal = () => {
+    overlay?.actions.toggleOverlay(false)
+  }
+
+  const loadColumns = async (datasetKey: string) => {
+    if (!datasetKey) {
+      setDatasetRows([])
+      setColumns([])
+      return
+    }
+
+    const dataset = config.datasets[datasetKey]
+    if (!dataset) {
+      setDatasetRows([])
+      setColumns([])
+      return
+    }
+
+    setLoadingColumns(true)
+    setErrorMessage('')
+
+    try {
+      let nextData = dataset.data
+      if (!nextData && dataset.dataUrl) {
+        const response = await fetchRemoteData(dataset.dataUrl)
+        nextData = transform.autoStandardize(response.data)
+        if (dataset.dataDescription) {
+          nextData = transform.developerStandardize(nextData, dataset.dataDescription)
+        }
+      }
+
+      setDatasetRows(nextData || [])
+      setColumns(Object.keys(nextData?.[0] || {}))
+    } catch (_error) {
+      setDatasetRows([])
+      setColumns([])
+      setErrorMessage('There was an issue loading the condition dataset. Please try again.')
+    } finally {
+      setLoadingColumns(false)
+    }
+  }
+
+  useEffect(() => {
+    loadColumns(formState.datasetKey)
+  }, [formState.datasetKey])
+
+  const selectedColumnValues = useMemo(() => {
+    if (!needsValueMatch || !formState.columnName) return []
+
+    const distinctValues = datasetRows.reduce((acc, row) => {
+      const value = row?.[formState.columnName]
+      if (value === undefined || value === null) return acc
+
+      const normalizedValue = String(value)
+      if (!acc.includes(normalizedValue)) {
+        acc.push(normalizedValue)
+      }
+      return acc
+    }, [] as string[])
+
+    return distinctValues
+  }, [datasetRows, formState.columnName, needsValueMatch])
+
+  if (!supportsDashboardConditions) {
+    return (
+      <Modal>
+        <Modal.Content>
+          <p>{title} editing is not available for toggle or multi-visualization rows in v1.</p>
+          <Button variant='primary' onClick={closeModal}>
+            Close
+          </Button>
+        </Modal.Content>
+      </Modal>
+    )
+  }
+
+  return (
+    <Modal>
+      <Modal.Content>
+        {loadingColumns && <Loader fullScreen />}
+        <div className='dashboard-condition-modal'>
+          <h3>{title}</h3>
+
+          <div className='dashboard-condition-modal__fields'>
+            <Select
+              className='dashboard-condition-modal__select py-2 ps-2 w-100 d-block'
+              fieldName='operator'
+              label='Condition Type'
+              options={DASHBOARD_CONDITION_TYPE_OPTIONS}
+              tooltip={tooltipIcon(
+                `Choose whether this ${targetLabel} should appear when the filtered condition dataset has data, has no data, contains one of the selected column values, or when targeted filters are incomplete. Use "Show when filters are incomplete" for static helper content, such as a markup include message explaining that filters must be selected to proceed.`
+              )}
+              value={formState.operator}
+              onChange={event => {
+                const operator = event.target.value as DashboardConditionTypeOption
+                setFormState(currentState => ({
+                  ...currentState,
+                  operator,
+                  datasetKey: operator && operator !== 'filtersIncomplete' ? currentState.datasetKey : '',
+                  columnName: operator === 'columnHasAnyValue' ? currentState.columnName : '',
+                  values: operator === 'columnHasAnyValue' ? currentState.values : []
+                }))
+              }}
+            />
+
+            {shouldShowDatasetSelect && (
+              <>
+                <Select
+                  className='dashboard-condition-modal__select py-2 ps-2 w-100 d-block'
+                  fieldName='datasetKey'
+                  label='Condition Dataset'
+                  options={[
+                    { value: '', label: '- Select Option -' },
+                    ...availableDatasets.map(key => ({ value: key, label: key }))
+                  ]}
+                  value={formState.datasetKey}
+                  onChange={event => {
+                    const datasetKey = event.target.value
+                    setFormState(currentState => ({
+                      ...currentState,
+                      datasetKey,
+                      columnName: datasetKey === currentState.datasetKey ? currentState.columnName : '',
+                      values: datasetKey === currentState.datasetKey ? currentState.values : []
+                    }))
+                  }}
+                />
+
+                {shouldShowColumnSelect && (
+                  <>
+                    <Select
+                      className='dashboard-condition-modal__select py-2 ps-2 w-100 d-block'
+                      fieldName='columnName'
+                      label='Column'
+                      options={[
+                        { value: '', label: '- Select Option -' },
+                        ...columns.map(columnName => ({ value: columnName, label: columnName }))
+                      ]}
+                      tooltip={tooltipIcon('Select the dataset column to inspect for this condition.')}
+                      value={formState.columnName}
+                      onChange={event => {
+                        const columnName = event.target.value
+                        setFormState(currentState => ({
+                          ...currentState,
+                          columnName,
+                          values: columnName === currentState.columnName ? currentState.values : []
+                        }))
+                      }}
+                    />
+
+                    {shouldShowValueSelect && (
+                      <div className='dashboard-condition-modal__multiselect-field'>
+                        <span className='edit-label column-heading'>
+                          Column Values
+                          {tooltipIcon(
+                            'Choose one or more matching values from the selected column. This condition passes when the filtered dataset contains at least one row with one of these values.'
+                          )}
+                        </span>
+                        <MultiSelect
+                          fieldName='values'
+                          options={selectedColumnValues.map(value => ({ value, label: value }))}
+                          selected={formState.values}
+                          updateField={(_section, _subSection, _fieldName, values) => {
+                            setFormState(currentState => ({
+                              ...currentState,
+                              values
+                            }))
+                          }}
+                        />
+                      </div>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          </div>
+
+          {errorMessage && <p className='text-danger'>{errorMessage}</p>}
+
+          <div className='d-flex gap-2 mt-3'>
+            <Button
+              disabled={!canSave}
+              onClick={() => {
+                if (!hasCondition || !formState.operator) {
+                  updateDashboardCondition(undefined)
+                  closeModal()
+                  return
+                }
+
+                const nextCondition: DashboardCondition = {
+                  id:
+                    existingDashboardCondition?.id ||
+                    createCoveId('condition', { existingIds: getDashboardConditionIds(config.rows) }),
+                  operator: formState.operator
+                }
+
+                if (!usesDashboardFilterState) {
+                  nextCondition.datasetKey = formState.datasetKey
+                }
+
+                if (needsValueMatch) {
+                  nextCondition.columnName = formState.columnName
+                  nextCondition.values = formState.values
+                }
+
+                updateDashboardCondition(nextCondition)
+                closeModal()
+              }}
+              variant='primary'
+            >
+              Save
+            </Button>
+
+            <Button onClick={closeModal} variant='secondary'>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Modal.Content>
+    </Modal>
+  )
+}

package/src/components/DashboardConditionSummary.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import Button from '@cdc/core/components/elements/Button'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import { iconHash } from '../helpers/iconHash'
+import { getColumnHasAnyValueSummaryParts, getDashboardConditionSummary } from '../helpers/dashboardConditionUi'
+import { DashboardCondition } from '../types/ConfigRow'
+import { DashboardConditionModal } from './DashboardConditionModal'
+
+import './dashboard-condition-summary.css'
+
+type DashboardConditionSummaryProps = {
+  dashboardCondition: DashboardCondition
+  rowIndex: number
+  columnIndex?: number
+  entryIndex?: number
+  className?: string
+}
+
+export const DashboardConditionSummary: React.FC<DashboardConditionSummaryProps> = ({
+  dashboardCondition,
+  rowIndex,
+  columnIndex,
+  entryIndex,
+  className = ''
+}) => {
+  const { overlay } = useGlobalContext()
+  const summary = getDashboardConditionSummary(dashboardCondition)
+  const columnHasAnyValueSummaryParts =
+    dashboardCondition.operator === 'columnHasAnyValue'
+      ? getColumnHasAnyValueSummaryParts(dashboardCondition.columnName)
+      : undefined
+  const summaryContent = columnHasAnyValueSummaryParts ? (
+    <>
+      {columnHasAnyValueSummaryParts.prefix}
+      <strong>{columnHasAnyValueSummaryParts.columnName}</strong>
+      {columnHasAnyValueSummaryParts.suffix}
+    </>
+  ) : (
+    summary
+  )
+
+  return (
+    <Button
+      aria-label={`Configure Dashboard Condition: ${summary}`}
+      className={['dashboard-condition-summary', className].filter(Boolean).join(' ')}
+      title={summary}
+      onClick={() => {
+        overlay?.actions.openOverlay(
+          <DashboardConditionModal rowIndex={rowIndex} columnIndex={columnIndex} entryIndex={entryIndex} />
+        )
+      }}
+    >
+      <span className='dashboard-condition-summary__icon' aria-hidden='true'>
+        {iconHash['condition']}
+      </span>
+      <span className='dashboard-condition-summary__text'>{summaryContent}</span>
+    </Button>
+  )
+}

package/src/components/DashboardEditors.tsx

@@ -17,6 +17,8 @@ type DashboardEditorProps = {
   _updateConfig: (config: any) => void
   isDebug?: boolean
   setSharedFilter?: Function
+  clearSharedFilter?: (key: string) => void
+  hasActiveSharedFilter?: (key: string) => boolean
   apiFilterDropdowns?: APIFilterDropdowns
   state: DashboardState
   interactionLabel: string
@@ -28,6 +30,8 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
   _updateConfig,
   isDebug,
   setSharedFilter,
+  clearSharedFilter,
+  hasActiveSharedFilter,
   apiFilterDropdowns,
   state,
   interactionLabel = ''
@@ -63,6 +67,10 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
           isDebug={isDebug}
           setConfig={_updateConfig}
           setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+          clearSharedFilter={setsSharedFilter ? clearSharedFilter : undefined}
+          hasActiveSharedFilter={
+            setsSharedFilter && hasActiveSharedFilter ? hasActiveSharedFilter(visualizationKey) : false
+          }
           setSharedFilterValue={setSharedFilterValue}
           isDashboard={true}
           showLoader={false}

package/src/components/DashboardFilters/DashboardFilters.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import DashboardFilters from './DashboardFilters'
 
@@ -127,3 +127,141 @@ describe('DashboardFilters nested dropdown display', () => {
     expect(handleOnChange).toHaveBeenCalledWith(0, ['2024', 'Q3'])
   })
 })
+
+describe('DashboardFilters layout', () => {
+  const createDropdownFilter = () =>
+    ({
+      key: 'State',
+      type: 'datafilter',
+      filterStyle: 'dropdown',
+      showDropdown: true,
+      values: ['Alabama', 'Alaska'],
+      columnName: 'state',
+      id: 0,
+      parents: [],
+      order: 'asc',
+      active: 'Alabama'
+    } as any)
+
+  it('keeps intro text outside the gapped controls form', () => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={{}}
+        filterIntro='Choose a <strong>state</strong>.'
+        filters={[createDropdownFilter()]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={true}
+      />
+    )
+
+    const intro = container.querySelector('.filters-section__intro-text')
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(intro).toBeInTheDocument()
+    expect(intro?.querySelector('strong')).toHaveTextContent('state')
+    expect(form).toBeInTheDocument()
+    expect(form).not.toContainElement(intro as Element)
+    expect(form?.querySelector('.dashboard-filters__field')).toBeInTheDocument()
+    expect(form?.querySelector('.dashboard-filters__actions')).toBeInTheDocument()
+    expect(intro?.compareDocumentPosition(form as Element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+})
+
+describe('DashboardFilters filter notes', () => {
+  const createDropdownFilter = (note?: string) =>
+    ({
+      key: 'State',
+      type: 'datafilter',
+      filterStyle: 'dropdown',
+      showDropdown: true,
+      values: ['Alabama', 'Alaska'],
+      columnName: 'state',
+      id: 0,
+      parents: [],
+      order: 'asc',
+      active: 'Alabama',
+      note
+    } as any)
+
+  const renderDashboardFilterList = (filters, show = filters.map((_filter, index) => index)) =>
+    render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={{}}
+        filters={filters}
+        handleOnChange={vi.fn()}
+        show={show}
+        showSubmit={false}
+      />
+    )
+  const renderDashboardFilters = filter => renderDashboardFilterList([filter])
+
+  it('renders parsed HTML notes under the label and before dropdown controls', () => {
+    const { container } = renderDashboardFilters(createDropdownFilter('Choose a <strong>state</strong>.'))
+
+    const label = screen.getByText('State')
+    const note = container.querySelector('.filters-section__note-text')
+    const select = screen.getByLabelText('State')
+
+    expect(note).toBeInTheDocument()
+    expect(note).toHaveTextContent('Choose a state.')
+    expect(note?.querySelector('strong')).toHaveTextContent('state')
+    expect(label.compareDocumentPosition(note as Element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(note?.compareDocumentPosition(select) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(select).toHaveClass('filters-section__select--fit-content')
+    expect(select).not.toHaveClass('w-100')
+  })
+
+  it('renders notes for tab-simple filters above the tab control', () => {
+    const { container } = renderDashboardFilters({
+      ...createDropdownFilter('Pick <em>status</em>.'),
+      key: 'Status',
+      filterStyle: 'tab-simple',
+      values: ['Current', 'Prior'],
+      active: 'Current'
+    })
+
+    const note = container.querySelector('.filters-section__note-text')
+    const tab = screen.getByRole('button', { name: 'Current' })
+
+    expect(note).toHaveTextContent('Pick status.')
+    expect(note?.querySelector('em')).toHaveTextContent('status')
+    expect(note?.compareDocumentPosition(tab) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+
+  it('does not render note markup for empty notes', () => {
+    const { container } = renderDashboardFilters(createDropdownFilter('   '))
+    const select = screen.getByLabelText('State')
+
+    expect(container.querySelector('.filters-section__note-text')).not.toBeInTheDocument()
+    expect(select).toHaveClass('w-100')
+    expect(select).not.toHaveClass('filters-section__select--fit-content')
+  })
+
+  it('marks the form as single-filter layout when only one dashboard filter is visible', () => {
+    const hiddenFilter = { ...createDropdownFilter(), key: 'Hidden State', showDropdown: false }
+    const { container } = renderDashboardFilterList([createDropdownFilter('Choose a state.'), hiddenFilter])
+
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(form).toHaveClass('filters-section__wrapper--single')
+    expect(form).not.toHaveClass('filters-section__wrapper--multiple')
+  })
+
+  it('marks the form as multiple-filter layout when more than one dashboard filter is visible', () => {
+    const statusFilter = {
+      ...createDropdownFilter('Choose a status.'),
+      key: 'Status',
+      columnName: 'status',
+      active: 'Current'
+    }
+    const { container } = renderDashboardFilterList([createDropdownFilter('Choose a state.'), statusFilter])
+
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(form).toHaveClass('filters-section__wrapper--multiple')
+    expect(form).not.toHaveClass('filters-section__wrapper--single')
+  })
+})