@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -14,10 +14,10 @@ import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavi
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import * as filterResetHelpers from '../../helpers/filterResetHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
-import './dashboardfilter.styles.css'
 import { updateChildFilters } from '../../helpers/updateChildFilters'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasVisibleDashboardFiltersForIndexes } from '../../helpers/filterVisibility'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -193,7 +193,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       }
     }
     const newFilteredData = getFilteredData(clonedState)
-    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+    dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
 
     publishAnalyticsEvent({
       vizType: dashboardConfig.type,
@@ -260,7 +260,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         newSharedFilters[index].queuedActive = value
 
         // Don't clear data immediately - keep existing data until new data loads
-        // Only update the filter dropdowns and prepare for reload
+        // Only update the dashboard filters and prepare for reload
         setAPIFilterDropdowns(loadingFilterMemo)
         loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale)
       }
@@ -280,7 +280,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           }
         }
         const newFilteredData = getFilteredData(clonedState)
-        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+        dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
         dispatch({ type: 'SET_SHARED_FILTERS', payload: updatedFilters })
       }
     }
@@ -294,13 +294,28 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
     })
   }
 
-  // if all of the filters are hidden filters don't display the VisualizationWrapper
-  const filters = visualizationConfig?.sharedFilterIndexes
-    ?.map(Number)
-    ?.map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
-
-  const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
-  if (displayNone && !isEditor) return <></>
+  const hasVisibleFilterControls = hasVisibleDashboardFiltersForIndexes(
+    dashboardConfig.dashboard.sharedFilters,
+    visualizationConfig?.sharedFilterIndexes
+  )
+  const filterControls = (
+    <Filters
+      show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
+      filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
+      apiFilterDropdowns={apiFilterDropdowns}
+      handleOnChange={handleOnChange}
+      showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
+      filterIntro={visualizationConfig.filterIntro}
+      applyFilters={applyFilters}
+      applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
+      handleReset={
+        visualizationConfig.filterBehavior === FilterBehavior.Apply && (visualizationConfig.showClearButton ?? true)
+          ? handleReset
+          : undefined
+      }
+    />
+  )
+  if (!hasVisibleFilterControls && !isEditor) return <></>
   return (
     <VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
@@ -314,28 +329,18 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         </Sidebar>
       )}
 
-      {!displayNone && (
+      {hasVisibleFilterControls && (
         <Responsive isEditor={isEditor}>
           <div
             className={`${
               isEditor ? ' is-editor' : ''
             } cove-visualization__inner cove-visualization__body col-12 cove-dashboard-filters-container`}
           >
-            <Filters
-              show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
-              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
-              apiFilterDropdowns={apiFilterDropdowns}
-              handleOnChange={handleOnChange}
-              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
-              applyFilters={applyFilters}
-              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
-              handleReset={
-                visualizationConfig.filterBehavior === FilterBehavior.Apply &&
-                (visualizationConfig.showClearButton ?? true)
-                  ? handleReset
-                  : undefined
-              }
-            />
+            {visualizationConfig.visual?.grayBackground ? (
+              <div className='cdc-callout cdc-callout--dashboard-filters'>{filterControls}</div>
+            ) : (
+              filterControls
+            )}
           </div>
         </Responsive>
       )}

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -1,27 +1,42 @@
-.cove-dashboard-filters-container {
-  :is(label) {
-    font-size: var(--filter-label-font-size);
-    font-weight: 700;
-  }
-  .btn {
-    align-self: flex-end;
-    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
-    height: calc(1.5em + 0.75rem + 2px);
-  }
-  .loading-filter {
-    position: relative;
-    .spinner-border {
-      height: 1.5rem;
-      position: absolute;
-      right: 10%;
-      top: 55%;
-      width: 1.5rem;
-    }
-  }
-  :is(select):disabled {
-    background-color: var(--lightestGray);
-    & > :is(option) {
-      color: var(--darkGray);
-    }
-  }
-}
+.dashboard-filters__form {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+}
+
+.dashboard-filters__field {
+  margin: 0;
+}
+
+.cove-dashboard-filters-container {
+  .cdc-callout--dashboard-filters {
+    --cdc-callout-background: #f4f8fa;
+  }
+
+  :is(label) {
+    font-size: var(--filter-label-font-size);
+    font-weight: 700;
+  }
+  .btn {
+    align-self: flex-end;
+    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
+    height: calc(1.5em + 0.75rem + 2px);
+  }
+  .loading-filter {
+    position: relative;
+    .spinner-border {
+      height: 1.5rem;
+      position: absolute;
+      right: 10%;
+      top: 55%;
+      width: 1.5rem;
+    }
+  }
+  :is(select):disabled {
+    background-color: var(--lightestGray);
+    & > :is(option) {
+      color: var(--darkGray);
+    }
+  }
+}

package/src/components/DataDesignerModal.tsx

@@ -11,6 +11,7 @@ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ConfigureData } from '@cdc/core/types/ConfigureData'
 import Icon from '@cdc/core/components/ui/Icon'
+import { getColumnWidgetKeys } from '../helpers/dashboardColumnWidgets'
 
 type DataDesignerModalProps = {
   rowIndex: number
@@ -79,7 +80,7 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
   }
 
   const removeDatasetsFromVisualizations = () => {
-    const columnVisualizations = config.rows[rowIndex].columns.map(column => column.widget).filter(Boolean)
+    const columnVisualizations = config.rows[rowIndex].columns.flatMap(column => getColumnWidgetKeys(column))
     columnVisualizations.forEach(currentVisualizationKey => {
       dispatch({ type: 'RESET_VISUALIZATION', payload: { vizKey: currentVisualizationKey } })
     })

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,32 +1,37 @@
 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'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
 
 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 }] }
+    const existingRowUuids = rows?.flatMap(row => (row.uuid === undefined ? [] : [row.uuid]))
+    const blankRow: Partial<ConfigRow> = {
+      columns: [{ width: 12 }],
+      uuid: createCoveId('row', { existingIds: existingRowUuids })
+    }
     updateConfig({
       ...config,
-      rows: [...rows, blankRow],
-      uuid: Date.now()
+      rows: [...rows, blankRow]
     })
   }
 
   return (
     <div className='builder-grid'>
       {(rows || []).map((row, idx) => (
-        <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
+        <Row row={row} idx={idx} uuid={row.uuid ?? idx} key={idx} />
       ))}
-      <button className='btn btn-primary col' onClick={addRow}>
+      <Button variant='primary' className='col' onClick={addRow}>
         Add Row
-      </button>
+      </Button>
     </div>
   )
 }

package/src/components/Header/Header.tsx

@@ -13,6 +13,8 @@ type HeaderProps = {
   visualizationKey?: string
 }
 
+type DownloadImageMode = 'off' | 'button' | 'link'
+
 const Header = (props: HeaderProps) => {
   const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
@@ -51,7 +53,7 @@ const Header = (props: HeaderProps) => {
         return acc
       }, {})
 
-      dispatch({ type: 'SET_DATA', payload: sampleDataRemoved })
+      dispatch({ type: 'SET_DATA', payload: { data: sampleDataRemoved } })
     }
   }
 
@@ -62,6 +64,18 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
   }
 
+  const getDownloadImageMode = (): DownloadImageMode => {
+    if (!config.table?.downloadImageButton) return 'off'
+    return config.table.downloadImageButtonStyle === 'link' ? 'link' : 'button'
+  }
+
+  const changeDownloadImageMode = (mode: DownloadImageMode) => {
+    const newConfig = { ...config, table: { ...(config.table || {}) } }
+    newConfig.table.downloadImageButton = mode !== 'off'
+    if (mode !== 'off') newConfig.table.downloadImageButtonStyle = mode
+    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
+  }
+
   const convertStateToConfig = () => {
     const strippedState = cloneConfig(config)
     delete strippedState.newViz
@@ -231,22 +245,27 @@ const Header = (props: HeaderProps) => {
                     />
                     Show URL to Automatically Updated Data
                   </label>
-                  <label>
-                    <input
-                      type='checkbox'
-                      defaultChecked={config.table.downloadImageButton}
-                      onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)}
-                    />
-                    Show Download Image Button
-                  </label>
-                  {config.table.downloadImageButton && (
-                    <input
-                      type='text'
-                      placeholder='Customize label'
-                      defaultValue={config.table.downloadImageLabel}
-                      onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
-                    />
-                  )}
+                  <div className='download-image-controls'>
+                    <select
+                      aria-label='Download image display'
+                      className='download-image-mode-select'
+                      value={getDownloadImageMode()}
+                      onChange={e => changeDownloadImageMode(e.target.value as DownloadImageMode)}
+                    >
+                      <option value='off'>Download Image Off</option>
+                      <option value='button'>Download Image Button</option>
+                      <option value='link'>Download Image Link</option>
+                    </select>
+                    {getDownloadImageMode() !== 'off' && (
+                      <input
+                        className='download-image-label-input'
+                        type='text'
+                        placeholder='Customize label'
+                        defaultValue={config.table.downloadImageLabel}
+                        onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
+                      />
+                    )}
+                  </div>
                 </div>
               </>
             )}

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -1,140 +1,141 @@
-import { createRef, useContext, useMemo, useState } from 'react'
-import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import './multiconfigtabs.styles.css'
-
-const AreYouSure = deleteCallback => {
-  return (
-    <Modal>
-      <Modal.Content>
-        <p>Are you sure you want to delete this dashboard? </p>
-        <button className='btn btn-danger' onClick={deleteCallback}>
-          DELETE
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-const Tab = ({ name, handleClick, tabs, index, active }) => {
-  const [editing, setEditing] = useState(false)
-  const dispatch = useContext(DashboardDispatchContext)
-  const { overlay } = useGlobalContext()
-  const inputRef = createRef<HTMLInputElement>()
-
-  const saveName = e => {
-    e.stopPropagation()
-    const newVal = inputRef.current.value
-    const sameName = newVal === name
-    const blankName = !newVal
-    const duplicateName = tabs.includes(newVal)
-    if (!sameName && !blankName && !duplicateName) {
-      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
-    }
-    setEditing(false)
-  }
-
-  const onClick = e => {
-    // ignore click on delete button
-    if (e.target.className === 'remove') return
-    if (active) {
-      setEditing(true)
-    } else {
-      handleClick()
-    }
-  }
-
-  const handleRemove = () => {
-    const deleteCallback = () => {
-      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
-      overlay?.actions.toggleOverlay(false)
-    }
-    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
-  }
-
-  const handleReorder = (index: number, moveTo: -1 | 1) => {
-    const newIndex = index + moveTo
-    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
-    if (inbounds) {
-      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
-    }
-  }
-
-  const canMoveLeft = index !== 0
-  const canMoveRight = index <= tabs.length - 2
-
-  return (
-    <li className='nav-item d-flex mt-0'>
-      {canMoveLeft && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, -1)}>
-          {'<'}
-        </button>
-      )}
-      <div
-        className={`edit nav-link${active ? ' active' : ''}`}
-        aria-current={active ? 'page' : null}
-        onClick={onClick}
-      >
-        {editing ? (
-          <div className='d-flex'>
-            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
-            <button className='btn btn-link save' onClick={saveName}>
-              save
-            </button>
-          </div>
-        ) : (
-          <>
-            {name}
-            <button className='btn btn-danger border-0 ms-1' onClick={handleRemove}>
-              X
-            </button>
-          </>
-        )}
-      </div>
-      {canMoveRight && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, 1)}>
-          {'>'}
-        </button>
-      )}
-    </li>
-  )
-}
-
-const MultiConfigTabs = () => {
-  const { config } = useContext(DashboardContext)
-  const dispatch = useContext(DashboardDispatchContext)
-  const tabs = useMemo<string[]>(
-    () => (config.multiDashboards || []).map(({ label }) => label),
-    [config.multiDashboards]
-  )
-  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
-
-  const saveAndLoad = (indexToSwitchTo: number) => {
-    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
-    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
-  }
-
-  if (!config.multiDashboards) return null
-  return (
-    <ul className='nav nav-tabs multi-config-tabs mb-4'>
-      {tabs.map((tab, index) => (
-        <Tab
-          key={tab + index}
-          name={tab}
-          tabs={tabs}
-          index={index}
-          handleClick={() => saveAndLoad(index)}
-          active={index === activeTab}
-        />
-      ))}
-      <li className='nav-item'>
-        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
-          +
-        </button>
-      </li>
-    </ul>
-  )
-}
-
-export default MultiConfigTabs
+import { createRef, useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Button from '@cdc/core/components/elements/Button'
+import './multiconfigtabs.styles.css'
+
+const AreYouSure = deleteCallback => {
+  return (
+    <Modal>
+      <Modal.Content>
+        <p>Are you sure you want to delete this dashboard? </p>
+        <Button variant='danger' onClick={deleteCallback}>
+          DELETE
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+const Tab = ({ name, handleClick, tabs, index, active }) => {
+  const [editing, setEditing] = useState(false)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { overlay } = useGlobalContext()
+  const inputRef = createRef<HTMLInputElement>()
+
+  const saveName = e => {
+    e.stopPropagation()
+    const newVal = inputRef.current.value
+    const sameName = newVal === name
+    const blankName = !newVal
+    const duplicateName = tabs.includes(newVal)
+    if (!sameName && !blankName && !duplicateName) {
+      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
+    }
+    setEditing(false)
+  }
+
+  const onClick = e => {
+    // ignore click on delete button
+    if (e.target.className === 'remove') return
+    if (active) {
+      setEditing(true)
+    } else {
+      handleClick()
+    }
+  }
+
+  const handleRemove = () => {
+    const deleteCallback = () => {
+      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
+      overlay?.actions.toggleOverlay(false)
+    }
+    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
+  }
+
+  const handleReorder = (index: number, moveTo: -1 | 1) => {
+    const newIndex = index + moveTo
+    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
+    if (inbounds) {
+      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
+    }
+  }
+
+  const canMoveLeft = index !== 0
+  const canMoveRight = index <= tabs.length - 2
+
+  return (
+    <li className='nav-item d-flex mt-0'>
+      {canMoveLeft && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, -1)}>
+          {'<'}
+        </button>
+      )}
+      <div
+        className={`edit nav-link${active ? ' active' : ''}`}
+        aria-current={active ? 'page' : null}
+        onClick={onClick}
+      >
+        {editing ? (
+          <div className='d-flex'>
+            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
+            <Button variant='link' className='save' onClick={saveName}>
+              save
+            </Button>
+          </div>
+        ) : (
+          <>
+            {name}
+            <Button variant='danger' className='border-0 ms-1' onClick={handleRemove}>
+              X
+            </Button>
+          </>
+        )}
+      </div>
+      {canMoveRight && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, 1)}>
+          {'>'}
+        </button>
+      )}
+    </li>
+  )
+}
+
+const MultiConfigTabs = () => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const tabs = useMemo<string[]>(
+    () => (config.multiDashboards || []).map(({ label }) => label),
+    [config.multiDashboards]
+  )
+  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
+
+  const saveAndLoad = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  return (
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={tab + index}
+          name={tab}
+          tabs={tabs}
+          index={index}
+          handleClick={() => saveAndLoad(index)}
+          active={index === activeTab}
+        />
+      ))}
+      <li className='nav-item'>
+        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+          +
+        </button>
+      </li>
+    </ul>
+  )
+}
+
+export default MultiConfigTabs