@cdc/dashboard 4.24.7 → 4.24.9-1

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

@@ -23,30 +23,27 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
   const [columns, setColumns] = useState<string[]>([])
   const transform = new DataTransform()
 
-  const parentFilters: string[] = (config.dashboard.sharedFilters || []).filter(({ key, type }) => key !== filter.key && type !== 'datafilter').map(({ key }) => key)
+  const parentFilters: string[] = (config.dashboard.sharedFilters || [])
+    .filter(({ key, type }) => key !== filter.key && type !== 'datafilter')
+    .map(({ key }) => key)
 
   const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
 
   const [usedByNameLookup, usedByOptions] = useMemo(() => {
     const nameLookup = {}
-    const vizOptions = Object.keys(config.visualizations)
-      .filter(vizKey => {
-        const vizLookup = vizRowColumnLocator[vizKey]
-        if (!vizLookup) return false
-        const viz = config.visualizations[vizKey]
-        if (viz.type === 'dashboardFilters') return false
-        const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
-        const usesSharedFilter = viz.usesSharedFilter
-        const rowIndex = vizLookup.row
-        const dataConfiguredOnRow = config.rows[rowIndex].dataKey
-        return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
-      })
-      .map(vizKey => {
-        const viz = config.visualizations[vizKey] as Visualization
-        const vizName = viz.general?.title || viz.title || vizKey
-        nameLookup[vizKey] = vizName
-        return vizKey
-      })
+    const vizOptions = Object.keys(config.visualizations).filter(vizKey => {
+      const vizLookup = vizRowColumnLocator[vizKey]
+      if (!vizLookup) return false
+      const viz = config.visualizations[vizKey] as Visualization
+      if (viz.type === 'dashboardFilters') return false
+      const vizName = viz.general?.title || viz.title || vizKey
+      nameLookup[vizKey] = vizName
+      const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
+      const usesSharedFilter = viz.usesSharedFilter
+      const rowIndex = vizLookup.row
+      const dataConfiguredOnRow = config.rows[rowIndex].dataKey
+      return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
+    })
     const rowOptions: number[] = []
 
     config.rows.forEach((row, rowIndex) => {
@@ -121,7 +118,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     <>
       <label>
         <span className='edit-label column-heading'>Filter Type: </span>
-        <select defaultValue={filter.type || ''} onChange={e => updateFilterProp('type', e.target.value)} disabled={!!filter.type}>
+        <select
+          defaultValue={filter.type || ''}
+          onChange={e => updateFilterProp('type', e.target.value)}
+          disabled={!!filter.type}
+        >
           <option value=''>- Select Option -</option>
           <option value='urlfilter'>URL</option>
           <option value='datafilter'>Data</option>
@@ -129,12 +130,19 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
       </label>
       {filter.type === 'urlfilter' && (
         <>
-          <TextField label='Label' value={filter.key} updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)} />
+          <TextField
+            label='Label'
+            value={filter.key}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
+          />
           {!hasDashboardApplyBehavior(config.visualizations) && (
             <>
               <label>
                 <span className='edit-label column-heading'>URL to Filter: </span>
-                <select defaultValue={filter.datasetKey || ''} onChange={e => updateFilterProp('datasetKey', e.target.value)}>
+                <select
+                  defaultValue={filter.datasetKey || ''}
+                  onChange={e => updateFilterProp('datasetKey', e.target.value)}
+                >
                   <option value=''>- Select Option -</option>
                   {Object.keys(config.datasets).map(datasetKey => {
                     if (config.datasets[datasetKey].dataUrl) {
@@ -150,7 +158,10 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
               </label>
               <label>
                 <span className='edit-label column-heading'>Filter By: </span>
-                <select defaultValue={filter.filterBy || ''} onChange={e => updateFilterProp('filterBy', e.target.value)}>
+                <select
+                  defaultValue={filter.filterBy || ''}
+                  onChange={e => updateFilterProp('filterBy', e.target.value)}
+                >
                   <option value=''>- Select Option -</option>
                   <option key={'query-string'} value={'Query String'}>
                     Query String
@@ -190,7 +201,10 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                         </Tooltip.Content>
                       </Tooltip>
                     </span>
-                    <select defaultValue={filter.whitespaceReplacement || 'Keep Spaces'} onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}>
+                    <select
+                      defaultValue={filter.whitespaceReplacement || 'Keep Spaces'}
+                      onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
+                    >
                       <option key={'remove-spaces'} value={'Remove Spaces'}>
                         Remove Spaces
                       </option>
@@ -206,8 +220,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
               )}
             </>
           )}
-          {filter.filterBy === 'Query String' && <TextField label='Query string parameter' value={filter.queryParameter} updateField={(_section, _subSection, _key, value) => updateFilterProp('queryParameter', value)} />}
-          <TextField label='Filter API Endpoint: ' value={filter.apiFilter?.apiEndpoint} updateField={(_section, _subSection, _key, value) => updateAPIFilter('apiEndpoint', value)} />
+          {filter.filterBy === 'Query String' && (
+            <TextField
+              label='Query string parameter'
+              value={filter.queryParameter}
+              updateField={(_section, _subSection, _key, value) => updateFilterProp('queryParameter', value)}
+            />
+          )}
+          <TextField
+            label='Filter API Endpoint: '
+            value={filter.apiFilter?.apiEndpoint}
+            updateField={(_section, _subSection, _key, value) => updateAPIFilter('apiEndpoint', value)}
+          />
           <TextField
             label='Option Text Selector:'
             value={filter.apiFilter?.textSelector}
@@ -257,9 +281,43 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
             />
           )}
 
-          <TextField label='Reset Label: ' value={filter.resetLabel || ''} updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)} />
+          <MultiSelect
+            label='Used By: (optional)'
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                    Select if you would like specific visualizations or rows to use this filter. Otherwise the filter
+                    will be added to all api requests.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+            options={[...usedByOptions, ...(filter.usedBy || [])].map(opt => ({
+              value: opt,
+              label: usedByNameLookup[opt]
+            }))}
+            fieldName='usedBy'
+            selected={filter.usedBy}
+            updateField={(_section, _subsection, _fieldname, newItems) => {
+              updateFilterProp('usedBy', newItems)
+            }}
+          />
 
-          <TextField label='Default Value Set By Query String Parameter: ' value={filter.setByQueryParameter || ''} updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)} />
+          <TextField
+            label='Reset Label: '
+            value={filter.resetLabel || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
+          />
+
+          <TextField
+            label='Default Value Set By Query String Parameter: '
+            value={filter.setByQueryParameter || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
+          />
         </>
       )}
       {filter.type === 'datafilter' && (
@@ -281,7 +339,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
             </select>
           </label>
 
-          <TextField label='Label' value={filter.key} updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)} />
+          <TextField
+            label='Label'
+            value={filter.key}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
+          />
 
           <label>
             <span className='edit-label column-heading'>Show Dropdown</span>
@@ -337,7 +399,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
               ))}
             </select>
           </label>
-          <TextField label='Reset Label: ' value={filter.resetLabel || ''} updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)} />
+          <TextField
+            label='Reset Label: '
+            value={filter.resetLabel || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
+          />
 
           <label>
             <span className='edit-label column-heading'>Parent Filter: </span>
@@ -357,9 +423,53 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
             </select>
           </label>
 
-          <TextField label='Default Value Set By Query String Parameter: ' value={filter.setByQueryParameter || ''} updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)} />
+          <TextField
+            label='Default Value Set By Query String Parameter: '
+            value={filter.setByQueryParameter || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
+          />
         </>
       )}
+      <label>
+        <span className='mr-1'>Multi Select</span>
+        <input
+          type='checkbox'
+          checked={filter.multiSelect}
+          onChange={e => {
+            updateFilterProp('multiSelect', !filter.multiSelect)
+          }}
+        />
+      </label>
+
+      {filter.multiSelect && (
+        <TextField
+          label='Select Limit'
+          value={filter.selectLimit}
+          updateField={(_section, _subSection, _field, value) => updateFilterProp('selectLimit', value)}
+          type='number'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>The maximum number of items that can be selected.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+
+      <label>
+        <span className='mr-1'>Show Dropdown</span>
+        <input
+          type='checkbox'
+          checked={filter.showDropdown}
+          onChange={e => {
+            updateFilterProp('showDropdown', !filter.showDropdown)
+          }}
+        />
+      </label>
     </>
   )
 }

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -3,7 +3,7 @@ import { DashboardContext, DashboardDispatchContext } from '../../DashboardConte
 import Filters from './DashboardFilters'
 import { changeFilterActive } from '../../helpers/changeFilterActive'
 import _ from 'lodash'
-import { FilterBehavior } from '../Header/Header'
+import { FilterBehavior } from '../../helpers/FilterBehavior'
 import { getFilteredData } from '../../helpers/getFilteredData'
 import { DashboardFilters } from '../../types/DashboardFilters'
 import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
@@ -11,12 +11,14 @@ import Layout from '@cdc/core/components/Layout'
 import DashboardFiltersEditor from './DashboardFiltersEditor'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
+import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 
 export type DropdownOptions = Record<'value' | 'text', string>[]
 
+/** the cached dropdown options for each filter */
 export type APIFilterDropdowns = {
   // null means still loading
-  [filtername: string]: null | DropdownOptions
+  [dropdownsKey: string]: null | DropdownOptions
 }
 
 type DashboardFiltersProps = {
@@ -27,9 +29,15 @@ type DashboardFiltersProps = {
   currentViewport?: ViewPort
 }
 
-const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDropdowns, visualizationConfig, setConfig: updateConfig, currentViewport, isEditor = false }) => {
+const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
+  apiFilterDropdowns,
+  visualizationConfig,
+  setConfig: updateConfig,
+  currentViewport,
+  isEditor = false
+}) => {
   const state = useContext(DashboardContext)
-  const { config: dashboardConfig, reloadURLData, loadAPIFilters } = state
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns } = state
   const dispatch = useContext(DashboardDispatchContext)
 
   const applyFilters = () => {
@@ -54,8 +62,13 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDro
             dashboardConfig.sharedFilters[index].active = sharedFilter.queuedActive
             delete dashboardConfig.sharedFilters[index].queuedActive
 
-            if (sharedFilter.setByQueryParameter && queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active) {
-              queryParams[sharedFilter.setByQueryParameter] = sharedFilter.active
+            if (
+              sharedFilter.setByQueryParameter &&
+              queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
+            ) {
+              queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
+                ? sharedFilter.active.join(',')
+                : sharedFilter.active
               needsQueryUpdate = true
             }
           }
@@ -68,7 +81,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDro
 
       dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
       dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
-      loadAPIFilters(dashboardConfig.sharedFilters)
+      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
         .then(newFilters => {
           reloadURLData(newFilters)
         })
@@ -82,24 +95,36 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDro
 
   const handleOnChange = (index: number, value: string | string[]) => {
     const newConfig = _.cloneDeep(dashboardConfig)
-    let newSharedFilters = changeFilterActive(index, value, newConfig.dashboard.sharedFilters, visualizationConfig)
+    let [newSharedFilters, changedFilterIndexes] = changeFilterActive(
+      index,
+      value,
+      newConfig.dashboard.sharedFilters,
+      visualizationConfig
+    )
 
     if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
       const isAutoSelectFilter = visualizationConfig.autoLoad
       const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)
+      const apiEndpoints = newSharedFilters.filter(f => f.apiFilter).map(f => f.apiFilter.apiEndpoint)
+      const loadingFilterMemo = apiFilterHelpers.getLoadingFilterMemo(
+        apiEndpoints,
+        apiFilterDropdowns,
+        changedFilterIndexes
+      )
       if (isAutoSelectFilter && !missingFilterSelections) {
         // a dropdown has been selected that doesn't
         // require the Go Button
-        loadAPIFilters(newSharedFilters).then(filters => {
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo).then(filters => {
           reloadURLData(filters)
         })
       } else {
-        if (Array.isArray(value)) throw Error(`Cannot set active values on urlfilters. expected: ${JSON.stringify(value)} to be a single value.`)
         newSharedFilters[index].queuedActive = value
         // setData to empty object because we no longer have a data state.
         dispatch({ type: 'SET_DATA', payload: {} })
         dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
-        loadAPIFilters(newSharedFilters)
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo)
       }
     } else {
       if (newSharedFilters[index].apiFilter) {
@@ -122,20 +147,43 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDro
     })
   }
 
+  // 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 <></>
   return (
     <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
-        <Layout.Sidebar displayPanel={displayPanel} isDashboard={true} title={'Configure Dashboard Filters'} onBackClick={onBackClick}>
+        <Layout.Sidebar
+          displayPanel={displayPanel}
+          isDashboard={true}
+          title={'Configure Dashboard Filters'}
+          onBackClick={onBackClick}
+        >
           <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
         </Layout.Sidebar>
       )}
 
-      <Layout.Responsive isEditor={isEditor}>
-        <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''} cove-component__content col-12`}>
-          <Filters show={visualizationConfig?.sharedFilterIndexes?.map(Number)} filters={dashboardConfig.dashboard.sharedFilters || []} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
-          {visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad && <button onClick={applyFilters}>GO!</button>}
-        </div>
-      </Layout.Responsive>
+      {!displayNone && (
+        <Layout.Responsive isEditor={isEditor}>
+          <div
+            className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''} cove-component__content col-12`}
+          >
+            <Filters
+              show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
+              filters={dashboardConfig.dashboard.sharedFilters || []}
+              apiFilterDropdowns={apiFilterDropdowns}
+              handleOnChange={handleOnChange}
+            />
+            {visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad && (
+              <button onClick={applyFilters}>GO!</button>
+            )}
+          </div>
+        </Layout.Responsive>
+      )}
     </Layout.VisualizationWrapper>
   )
 }

package/src/components/Header/Header.tsx

@@ -13,11 +13,6 @@ type HeaderProps = {
   visualizationKey?: string
 }
 
-export const FilterBehavior = {
-  Apply: 'Apply Button',
-  OnChange: 'Filter Change'
-}
-
 const Header = (props: HeaderProps) => {
   const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -23,7 +23,8 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
   const { overlay } = useGlobalContext()
   const inputRef = createRef<HTMLInputElement>()
 
-  const onBlur = () => {
+  const saveName = e => {
+    e.stopPropagation()
     const newVal = inputRef.current.value
     const sameName = newVal === name
     const blankName = !newVal
@@ -64,15 +65,26 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
   const canMoveRight = index <= tabs.length - 2
 
   return (
-    <li className='nav-item'>
+    <li className='nav-item d-flex mt-0'>
+      {canMoveLeft && editing && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
       <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
-        {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
-        {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
-        {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
-        <button className='remove' onClick={handleRemove}>
-          X
-        </button>
+        {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='remove' onClick={handleRemove}>
+              X
+            </button>
+          </>
+        )}
       </div>
+      {canMoveRight && editing && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
     </li>
   )
 }

package/src/components/Row.tsx

@@ -193,7 +193,7 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
             overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
           }}
         >
-          {iconHash['gear']}
+          {iconHash['gearMulti']}
         </button>
         <div className='column-container'>
           {row.columns