@cdc/dashboard 4.26.3 → 4.26.4

package/src/components/DashboardEditors.tsx

@@ -77,6 +77,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcDataBite
           key={visualizationKey}
           config={{ ...visualizationConfig, newViz: true }}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}
@@ -89,6 +94,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcWaffleChart
           key={visualizationKey}
           config={visualizationConfig}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}
@@ -101,6 +111,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcMarkupInclude
           key={visualizationKey}
           config={visualizationConfig}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}

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

@@ -0,0 +1,129 @@
+import { fireEvent, render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DashboardFilters from './DashboardFilters'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createDataBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'Year and Quarter',
+    type: 'datafilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    }
+  } as any)
+
+const createApiBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'API Year and Quarter',
+    type: 'urlfilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: [],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    apiFilter: {
+      apiEndpoint: '/api/nested-options',
+      valueSelector: 'year',
+      subgroupValueSelector: 'quarter'
+    },
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {}
+    }
+  } as any)
+
+const apiFilterDropdowns = {
+  '/api/nested-options': [
+    {
+      value: '2023',
+      text: '2023',
+      subOptions: [
+        { value: 'Q1', text: 'Q1' },
+        { value: 'Q2', text: 'Q2' }
+      ]
+    },
+    {
+      value: '2024',
+      text: '2024',
+      subOptions: [
+        { value: 'Q3', text: 'Q3' },
+        { value: 'Q4', text: 'Q4' }
+      ]
+    }
+  ]
+}
+
+describe('DashboardFilters nested dropdown display', () => {
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}, '2023 - Q2'],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}, 'Q2'],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns, '2023 - Q2'],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns, 'Q2']
+  ])('shows the expected closed text for %s filters', (_label, filter, dropdowns, expectedValue) => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input')
+    expect(input).toHaveValue(expectedValue)
+  })
+
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns]
+  ])('keeps nested dropdown selection behavior unchanged for %s filters', (_label, filter, dropdowns) => {
+    const handleOnChange = vi.fn()
+    const { container, getByText, queryByText } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={handleOnChange}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input') as HTMLInputElement
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'Q3' } })
+
+    expect(getByText('2024')).toBeInTheDocument()
+    expect(queryByText('2023')).not.toBeInTheDocument()
+
+    fireEvent.click(getByText('Q3'))
+
+    expect(handleOnChange).toHaveBeenCalledWith(0, ['2024', 'Q3'])
+  })
+})

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -9,6 +9,7 @@ import NestedDropdown from '@cdc/core/components/NestedDropdown'
 import { getNestedOptions } from '@cdc/core/components/Filters/helpers/getNestedOptions'
 import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
+import Button from '@cdc/core/components/elements/Button'
 import _ from 'lodash'
 import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
 import Tabs from '@cdc/core/components/Filters/components/Tabs'
@@ -163,6 +164,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
                 activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
+                displaySubgroupingOnly={filter.displaySubgroupingOnly}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}
@@ -213,9 +215,10 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         )
       })}
       {showSubmit && (
-        <>
-          <button
-            className='btn btn-primary mb-1 me-2'
+        <div className='dashboard-filters__actions'>
+          <Button
+            variant='primary'
+            className='mb-1 me-2'
             onClick={applyFilters}
             disabled={show.some(filterIndex => {
               const emptyFilterValues = [undefined, '', '- Select -']
@@ -226,13 +229,13 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
             })}
           >
             {applyFiltersButtonText || 'GO!'}
-          </button>
+          </Button>
           {handleReset && (
-            <button className='btn btn-link mb-1' onClick={handleReset}>
+            <Button variant='link' className='mb-1' onClick={handleReset}>
               Clear Filters
-            </button>
+            </Button>
           )}
-        </>
+        </div>
       )}
     </form>
   )

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -22,6 +22,7 @@ import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
 import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
+import Button from '@cdc/core/components/elements/Button'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -314,9 +315,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               )}
             </Droppable>
           </DragDropContext>
-          <button onClick={addNewFilter} className='btn btn-primary full-width'>
+          <Button variant='primary' fullWidth onClick={addNewFilter}>
             Add Filter
-          </button>
+          </Button>
           {canAddExisting ? (
             <label>
               <span className='edit-label column-heading'>
@@ -347,9 +348,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               />
             </label>
           ) : (
-            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
+            <Button variant='primary' fullWidth className='mt-2' onClick={() => setCanAddExisting(true)}>
               Add Existing Dashboard Filter
-            </button>
+            </Button>
           )}
         </AccordionItemPanel>
       </AccordionItem>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/APIModal.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 
 type APIModalProps = {
   filter: SharedFilter
@@ -107,8 +108,9 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
         )}
       </div>
       <div className='d-flex justify-content-end mt-2'>
-        <button
-          className='btn btn-primary mt-2'
+        <Button
+          variant='primary'
+          className='mt-2'
           onClick={() =>
             updateAPIFilter(
               APIEndpoint,
@@ -120,7 +122,7 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
           }
         >
           Save
-        </button>
+        </Button>
       </div>
     </fieldset>
   )

package/src/components/DashboardFilters/DashboardFiltersEditor/components/DeleteFilterModal.tsx

@@ -1,58 +1,59 @@
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { DashboardContext } from '../../../../DashboardContext'
-import { useContext } from 'react'
-import { DashboardFilters } from '../../../../types/DashboardFilters'
-
-type DeleteFilterProps = {
-  removeFilterCompletely: (number) => void
-  removeFilterFromViz: (number) => void
-  filterIndex: number
-}
-
-const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
-  removeFilterCompletely,
-  removeFilterFromViz,
-  filterIndex
-}) => {
-  const { overlay } = useGlobalContext()
-  const { config } = useContext(DashboardContext)
-
-  const filterUsedByMany =
-    Object.values(config.visualizations).filter(viz => {
-      return (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))
-    }).length > 1
-
-  const message = filterUsedByMany
-    ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.'
-    : 'Are you sure you want to delete this filter?'
-  return (
-    <Modal showClose={true}>
-      <Modal.Content>
-        <p>{message}</p>
-        {filterUsedByMany && (
-          <button
-            className='btn btn-warning'
-            onClick={() => {
-              removeFilterFromViz(filterIndex)
-              overlay?.actions.toggleOverlay()
-            }}
-          >
-            Delete from Visualization
-          </button>
-        )}
-        <button
-          className='btn btn-danger'
-          onClick={() => {
-            removeFilterCompletely(filterIndex)
-            overlay?.actions.toggleOverlay()
-          }}
-        >
-          Delete{filterUsedByMany ? ' Completely' : ''}
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-export default DeleteFilterModal
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { DashboardContext } from '../../../../DashboardContext'
+import { useContext } from 'react'
+import { DashboardFilters } from '../../../../types/DashboardFilters'
+import Button from '@cdc/core/components/elements/Button'
+
+type DeleteFilterProps = {
+  removeFilterCompletely: (number) => void
+  removeFilterFromViz: (number) => void
+  filterIndex: number
+}
+
+const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
+  removeFilterCompletely,
+  removeFilterFromViz,
+  filterIndex
+}) => {
+  const { overlay } = useGlobalContext()
+  const { config } = useContext(DashboardContext)
+
+  const filterUsedByMany =
+    Object.values(config.visualizations).filter(viz => {
+      return (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))
+    }).length > 1
+
+  const message = filterUsedByMany
+    ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.'
+    : 'Are you sure you want to delete this filter?'
+  return (
+    <Modal showClose={true}>
+      <Modal.Content>
+        <p>{message}</p>
+        {filterUsedByMany && (
+          <Button
+            variant='warning'
+            onClick={() => {
+              removeFilterFromViz(filterIndex)
+              overlay?.actions.toggleOverlay()
+            }}
+          >
+            Delete from Visualization
+          </Button>
+        )}
+        <Button
+          variant='danger'
+          onClick={() => {
+            removeFilterCompletely(filterIndex)
+            overlay?.actions.toggleOverlay()
+          }}
+        >
+          Delete{filterUsedByMany ? ' Completely' : ''}
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default DeleteFilterModal

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

@@ -0,0 +1,127 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import FilterEditor from './FilterEditor'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const baseConfig = {
+  dashboard: {
+    sharedFilters: []
+  },
+  datasets: {
+    'nested-data.json': {
+      data: [
+        { region: 'North', year: '2023', quarter: 'Q1' },
+        { region: 'North', year: '2023', quarter: 'Q2' }
+      ]
+    }
+  },
+  rows: [],
+  visualizations: {}
+} as any
+
+const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
+  ({
+    key: 'Year and Quarter',
+    type,
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    subGrouping: {
+      columnName: 'quarter',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    },
+    ...(type === 'urlfilter'
+      ? {
+          apiFilter: {
+            apiEndpoint: '/api/nested-options',
+            valueSelector: 'year',
+            subgroupValueSelector: 'quarter'
+          }
+        }
+      : {})
+  } as any)
+
+describe('FilterEditor nested dropdown display toggle', () => {
+  it.each([
+    ['data-backed nested filters', createNestedFilter('datafilter')],
+    ['api-backed nested filters', createNestedFilter('urlfilter')]
+  ])('renders the checkbox below Create query parameters for %s', (_label, filter) => {
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    const queryParameters = screen.getByLabelText('Create query parameters')
+    const displaySubgroupingOnly = screen.getByLabelText('Display subgrouping only')
+
+    expect(displaySubgroupingOnly).not.toBeChecked()
+
+    const queryParametersLabel = queryParameters.closest('label')
+    const displaySubgroupingOnlyLabel = displaySubgroupingOnly.closest('label')
+    const isBelowQueryParameters = !!(
+      queryParametersLabel &&
+      displaySubgroupingOnlyLabel &&
+      queryParametersLabel.compareDocumentPosition(displaySubgroupingOnlyLabel) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+
+    expect(isBelowQueryParameters).toBe(true)
+
+    fireEvent.click(displaySubgroupingOnly)
+
+    expect(updateFilterProp).toHaveBeenCalledWith('displaySubgroupingOnly', true)
+  })
+
+  it.each([
+    [
+      'data-backed non-nested filters',
+      {
+        ...createNestedFilter('datafilter'),
+        filterStyle: 'dropdown'
+      }
+    ],
+    [
+      'api-backed non-nested filters',
+      {
+        ...createNestedFilter('urlfilter'),
+        filterStyle: 'dropdown'
+      }
+    ]
+  ])('does not render the checkbox for %s', (_label, filter) => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
+  })
+})

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -19,6 +19,7 @@ import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
 import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
+import Button from '@cdc/core/components/elements/Button'
 
 type FilterEditorProps = {
   config: DashboardConfig
@@ -56,7 +57,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const getVizTitle = (viz, vizKey) => {
     let vizName = viz.general?.title || viz.title || vizKey
     if (viz.visualizationType === 'markup-include') {
-      vizName = viz.contentEditor.title || vizKey
+      vizName = viz.contentEditor?.title || vizKey
     }
     return vizName
   }
@@ -419,12 +420,13 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                   </div>
                 )}
 
-                <button
+                <Button
+                  variant='primary'
+                  className='mt-2'
                   onClick={() => handleEditAPIValues(filter, isNestedDropdown, updateAPIFilter)}
-                  className='btn btn-primary mt-2'
                 >
                   Edit API Values
-                </button>
+                </Button>
               </div>
 
               <label>
@@ -451,6 +453,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 </span>
               </label>
 
+              {isNestedDropdown && (
+                <label>
+                  <input
+                    type='checkbox'
+                    checked={!!filter.displaySubgroupingOnly}
+                    aria-label='Display subgrouping only'
+                    onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                  />
+                  <span> Display subgrouping only</span>
+                </label>
+              )}
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -596,6 +610,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                       </Tooltip>
                     </span>
                   </label>
+
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={!!filter.displaySubgroupingOnly}
+                      aria-label='Display subgrouping only'
+                      onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                    />
+                    <span> Display subgrouping only</span>
+                  </label>
                 </>
               )}
               <Select

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -242,7 +242,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
         />
       )}
 
-      {/* Default Value for Sub Group */}
+      {/* Default Value for Subgroup */}
       {subGrouping?.columnName && (filter.defaultValue || filter.active) && subGrouping.valuesLookup && (
         <Select
           value={subGrouping.defaultValue}
@@ -255,7 +255,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             const newSubGrouping = { ...subGrouping, defaultValue: value }
             updateFilterProp('subGrouping', newSubGrouping)
           }}
-          label={'Sub Group Default Value'}
+          label={'Subgroup Default Value'}
           initial={'Select'}
         />
       )}

package/src/components/ExpandCollapseButtons.tsx

@@ -1,3 +1,5 @@
+import Button from '@cdc/core/components/elements/Button'
+
 type ExpandCollapseButtonsProps = {
   setAllExpanded: Function
 }
@@ -6,12 +8,12 @@ const ExpandCollapseButtons: React.FC<ExpandCollapseButtonsProps> = ({ setAllExp
   return (
     <div className='d-block '>
       <div className='d-flex flex-row-reverse mb-2'>
-        <button className='btn expand-collapse-buttons' onClick={() => setAllExpanded(false)}>
+        <Button variant='light' onClick={() => setAllExpanded(false)}>
           - Collapse All
-        </button>
-        <button className='btn expand-collapse-buttons me-2' onClick={() => setAllExpanded(true)}>
+        </Button>
+        <Button variant='light' className='me-2' onClick={() => setAllExpanded(true)}>
           + Expand All
-        </button>
+        </Button>
       </div>
     </div>
   )

package/src/components/Grid.tsx

@@ -1,14 +1,15 @@
 import React, { useContext } from 'react'
 import Row from './Row'
+import Button from '@cdc/core/components/elements/Button'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 import { ConfigRow } from '../types/ConfigRow'
 
 const Grid = () => {
   const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
   if (!config) return null
   const rows = config.rows
-  const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
   const addRow = () => {
     const blankRow: Partial<ConfigRow> = { columns: [{ width: 12 }] }
@@ -24,9 +25,9 @@ const Grid = () => {
       {(rows || []).map((row, idx) => (
         <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
       ))}
-      <button className='btn btn-primary col' onClick={addRow}>
+      <Button variant='primary' className='col' onClick={addRow}>
         Add Row
-      </button>
+      </Button>
     </div>
   )
 }