@cdc/dashboard 4.24.11 → 4.24.12-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.24.11",
+  "version": "4.24.12-2",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,13 +27,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.24.11",
-    "@cdc/core": "^4.24.11",
-    "@cdc/data-bite": "^4.24.11",
-    "@cdc/filtered-text": "^4.24.11",
-    "@cdc/map": "^4.24.11",
-    "@cdc/markup-include": "^4.24.11",
-    "@cdc/waffle-chart": "^4.24.11",
+    "@cdc/chart": "^4.24.12-2",
+    "@cdc/core": "^4.24.12-2",
+    "@cdc/data-bite": "^4.24.12-2",
+    "@cdc/filtered-text": "^4.24.12-2",
+    "@cdc/map": "^4.24.12-2",
+    "@cdc/markup-include": "^4.24.12-2",
+    "@cdc/waffle-chart": "^4.24.12-2",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -49,5 +49,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
+  "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf"
 }

package/src/CdcDashboard.tsx

@@ -3,7 +3,6 @@ import CdcDashboard from './CdcDashboardComponent'
 import { MultiDashboardConfig } from './types/MultiDashboard'
 import Loading from '@cdc/core/components/Loading'
 import defaults from './data/initial-state'
-import { processData } from './helpers/processData'
 import { getVizKeys } from './helpers/getVizKeys'
 import { processDataLegacy } from './helpers/processDataLegacy'
 import { WCMSProps } from '@cdc/core/types/WCMSProps'
@@ -13,7 +12,6 @@ import { InitialState } from './types/InitialState'
 import { DashboardConfig } from './types/DashboardConfig'
 import { coveUpdateWorker } from '@cdc/core/helpers/coveUpdateWorker'
 import _ from 'lodash'
-import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
 import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
 
 type MultiDashboardProps = Omit<WCMSProps, 'configUrl'> & {
@@ -62,18 +60,13 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
     loadConfig()
   }, [])
 
-  const loadData = async (initialConfig: DashboardConfig | MultiDashboardConfig) => {
+  const prepareDatasets = (initialConfig: DashboardConfig | MultiDashboardConfig) => {
     let newConfig = { ...initialConfig }
-    let datasets: Record<string, Object[]> = {}
-    await Promise.all(
-      Object.keys(initialConfig.datasets).map(async key => {
-        const legacySupportApply = (initialConfig as any).filterBehavior === 'Apply Button'
-        const hasApplyBehavior = hasDashboardApplyBehavior(initialConfig.visualizations) || legacySupportApply
-        const data = await processData(initialConfig.datasets[key], !hasApplyBehavior)
-        datasets[key] = data || []
-      })
-    )
-
+    const datasets: Record<string, Object[]> = Object.keys(initialConfig.datasets).reduce((acc, key) => {
+      const dataset = initialConfig.datasets[key]
+      acc[key] = dataset.formattedData || dataset.data
+      return acc
+    }, {})
     getVizKeys(newConfig).forEach(vizKey => {
       const formattedData = datasets[newConfig.visualizations[vizKey].dataKey]
       if (formattedData) {
@@ -92,7 +85,7 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
     let newConfig = { ...defaults, ...config } as DashboardConfig
 
     if (config.datasets) {
-      return await loadData(newConfig)
+      return prepareDatasets(newConfig)
     } else {
       const dataKey = newConfig.dataFileName || 'backwards-compatibility'
       const data = await processDataLegacy(config)
@@ -144,7 +137,7 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
       multiDashboards: multiConfig.multiDashboards,
       activeDashboard: selectedConfig
     } as MultiDashboardConfig
-    return await loadData(newConfig)
+    return prepareDatasets(newConfig)
   }
 
   if (!initial) return <Loading />

package/src/CdcDashboardComponent.tsx

@@ -43,13 +43,12 @@ import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConf
 
 // types
 import { type SharedFilter } from './types/SharedFilter'
-import { type APIFilter } from './types/APIFilter'
 import { type WCMSProps } from '@cdc/core/types/WCMSProps'
 import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
 import _ from 'lodash'
 import EditorContext from '../../editor/src/ConfigContext'
-import { APIFilterDropdowns, DropdownOptions } from './components/DashboardFilters'
+import { APIFilterDropdowns } from './components/DashboardFilters'
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import VisualizationRow from './components/VisualizationRow'
@@ -63,10 +62,10 @@ import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilte
 import { DashboardFilters } from './types/DashboardFilters'
 import DashboardSharedFilters from './components/DashboardFilters'
 import ExpandCollapseButtons from './components/ExpandCollapseButtons'
-import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
 import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
 import Alert from '@cdc/core/components/Alert'
+import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -85,7 +84,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   const isPreview = state.tabSelected === 'Dashboard Preview'
 
   const inNoDataState = useMemo(() => {
-    const vals = Object.values(state.data)
+    const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
     if (!vals.length) return true
     return vals.some(val => val === undefined)
   }, [state.data])
@@ -129,7 +128,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         filters.forEach(filter => {
           if (
             filter.type === 'urlfilter' &&
-            reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations)
+            reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations, config.rows)
           ) {
             if (filter.filterBy === 'File Name') {
               newFileName = reloadURLHelpers.getNewFileName(newFileName, filter, datasetKey)
@@ -146,10 +145,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             if (!!filter.setByQueryParameter) {
               const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
               const filterValue = windowQueryParams[filter.setByQueryParameter]
-              if (filter.apiFilter) {
-                updatedQSParams[filter.apiFilter.valueSelector] = filterValue
-              } else {
-                updatedQSParams[filter.setByQueryParameter] = filterValue
+              const queryParam = filter.apiFilter?.valueSelector || filter.setByQueryParameter
+              if (filterValue) {
+                updatedQSParams[queryParam] = filterValue
               }
             }
 
@@ -162,7 +160,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           }
         })
 
-        if (!!newFilters || reloadURLHelpers.isUpdateNeeded(filters, currentQSParams, updatedQSParams)) {
+        const dataNeedsUpdate = reloadURLHelpers.isUpdateNeeded(filters, currentQSParams, updatedQSParams)
+
+        if (!!newFilters || dataNeedsUpdate) {
           dataWasFetched = true
           const dataUrlFinal = reloadURLHelpers.getDataURL(
             { ...currentQSParams, ...updatedQSParams },
@@ -189,6 +189,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             })
             .catch(e => {
               console.error(e)
+              dispatchErrorMessages({
+                type: 'ADD_ERROR_MESSAGE',
+                payload: 'There was a problem returning data. Please try again.'
+              })
               newDatasets[datasetKey].data = []
               newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
               newData[datasetKey] = []
@@ -197,16 +201,30 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     }
 
-    if (dataWasFetched) {
-      dispatch({ type: 'SET_DATA', payload: newData })
-      const filtersWithNewValues = addValuesToDashboardFilters(filters, newData)
-      const dashboardConfig = newFilters
-        ? { ...config.dashboard, sharedFilters: filtersWithNewValues }
-        : config.dashboard
+    const datasetsWithFiles = _.pickBy(newDatasets, dataset => !dataset.dataUrl)
+
+    if (dataWasFetched || Object.keys(datasetsWithFiles).length) {
+      const dataFiles = Object.keys(datasetsWithFiles).reduce((acc, key) => {
+        acc[key] = datasetsWithFiles[key].data
+        return acc
+      }, {})
+      const _newData = { ...newData, ...dataFiles }
+      dispatch({ type: 'SET_DATA', payload: _newData })
+      const dataFilterIndexes = config.dashboard.sharedFilters.reduce((acc, filter, index) => {
+        if (filter.type === 'datafilter') acc.push(index)
+        return acc
+      }, [])
+      const appliedFilterIndexes = Object.values(config.visualizations)
+        .filter(viz => viz.type === 'dashboardFilters')
+        .flatMap(viz => viz.sharedFilterIndexes)
+        .filter(index => !dataFilterIndexes.includes(index))
+      const filtersWithNewValues = addValuesToDashboardFilters(filters, _newData, appliedFilterIndexes)
+
+      const dashboardConfig = { ...config.dashboard, sharedFilters: filtersWithNewValues }
       const filteredData = getFilteredData(
         { ...state, config: { ...state.config, dashboard: dashboardConfig } },
         {},
-        newData
+        _newData
       )
       dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
       const visualizations = reloadURLHelpers.getVisualizationsWithFormattedData(config.visualizations, newData)
@@ -246,15 +264,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
 
   useEffect(() => {
-    if (isEditor && !isPreview) return
     const { config } = state
-    if (!hasDashboardApplyBehavior(config.visualizations)) {
-      reloadURLData()
-    }
-
+    const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
     const sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
-    loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns)
-    updateFilteredData(sharedFiltersWithValues)
+
+    loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters).then(newFilters => {
+      const allValuesSelected = newFilters.every(filter => {
+        return filter.type === 'datafilter' || filter.active
+      })
+      if (allValuesSelected) reloadURLData(newFilters)
+    })
   }, [isEditor, isPreview, state.config?.activeDashboard])
 
   const updateChildConfig = (visualizationKey, newConfig) => {
@@ -278,13 +297,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
   }
 
-  const updateFilteredData = (sharedFilters = undefined) => {
-    const clonedState = _.cloneDeep(state)
-    if (sharedFilters) clonedState.config.dashboard.sharedFilters = sharedFilters
-    const newFilteredData = getFilteredData(clonedState)
-    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-  }
-
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width)
@@ -437,8 +449,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             )
             break
           case 'dashboardFilters':
-            const hideFilter = visualizationConfig.autoLoad && inNoDataState
-            body = !hideFilter ? (
+            body = (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
                 <DashboardSharedFilters
@@ -448,8 +459,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                   setConfig={_updateConfig}
                 />
               </>
-            ) : (
-              <></>
             )
             break
           case 'table':
@@ -469,11 +478,12 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             body = (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Footnotes' />
+                {/* Datasets are passed in just for reference and need to be removed */}
                 <FootnotesStandAlone
                   visualizationKey={visualizationKey}
                   config={{ ...visualizationConfig, datasets: state.config.datasets }}
                   isEditor={true}
-                  updateConfig={_updateConfig}
+                  updateConfig={conf => _updateConfig(_.omit(conf, 'datasets'))}
                 />
               </>
             )
@@ -542,7 +552,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                     return (
                       <>
                         {/* Expand/Collapse All */}
-                        {row.expandCollapseAllButtons === true && (
+                        {!inNoDataState && row.expandCollapseAllButtons === true && (
                           <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
                         )}
                         {Object.keys(dataGroups).map(groupName => {
@@ -559,6 +569,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                               updateChildConfig={updateChildConfig}
                               apiFilterDropdowns={apiFilterDropdowns}
                               currentViewport={currentViewport}
+                              inNoDataState={inNoDataState}
                             />
                           )
                         })}
@@ -576,11 +587,14 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                         updateChildConfig={updateChildConfig}
                         apiFilterDropdowns={apiFilterDropdowns}
                         currentViewport={currentViewport}
+                        inNoDataState={inNoDataState}
                       />
                     )
                   }
                 })}
 
+            {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}
+
             {/* Image or PDF Inserts */}
             <section className='download-buttons'>
               {config.table?.downloadImageButton && (
@@ -691,7 +705,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           isDebug,
           loadAPIFilters,
           setAPIFilterDropdowns,
-          reloadURLData
+          reloadURLData,
+          setAPILoading
         }}
       >
         <DashboardDispatchContext.Provider value={dispatch}>

package/src/DashboardContext.tsx

@@ -17,6 +17,7 @@ type ConfigCTX = DashboardState & {
     recursiveLimit?: number
   ) => Promise<SharedFilter[]>
   setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
+  setAPILoading: (loading: boolean) => void
 }
 
 const firstTab: Tab = 'Dashboard Description'
@@ -33,6 +34,7 @@ const initialContext: ConfigCTX = {
   outerContainerRef: () => {},
   setParentConfig: () => {},
   setAPIFilterDropdowns: () => {},
+  setAPILoading: () => {},
   reloadURLData: () => {},
   loadAPIFilters: () => Promise.resolve([]),
   isDebug: false,

package/src/components/CollapsibleVisualizationRow.tsx

@@ -8,10 +8,16 @@ type CollapsableVizRow = {
   groupName: string
   currentViewport: string
 }
-const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({ allExpanded, fontSize, groupName, currentViewport, children }) => {
+const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
+  allExpanded,
+  fontSize,
+  groupName,
+  currentViewport,
+  children
+}) => {
   const [isExpanded, setIsExpanded] = useState(allExpanded)
   const fontSizes = { small: 16, medium: 18, large: 20 }
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
 
   useEffect(() => {
     setIsExpanded(allExpanded)

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -6,6 +6,8 @@ import { FILTER_STYLE } from '../../types/FilterStyles'
 import { NestedOptions, ValueTextPair } from '@cdc/core/components/NestedDropdown/nestedDropdownHelpers'
 import NestedDropdown from '@cdc/core/components/NestedDropdown'
 import { MouseEventHandler } from 'react'
+import Loader from '@cdc/core/components/Loader'
+import _ from 'lodash'
 
 type DashboardFilterProps = {
   show: number[]
@@ -48,25 +50,31 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     <form className='d-flex flex-wrap'>
       {sharedFilters.map((filter, filterIndex) => {
         const urlFilterType = filter.type === 'urlfilter'
+        const label = filter.key
+
         if (
           (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
           (show && !show.includes(filterIndex))
         )
-          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
+          return <React.Fragment key={`${label}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
-        if (filter.resetLabel) {
-          values.push(
-            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
-              {filter.resetLabel}
-            </option>
-          )
-        }
-
         const _key = filter.apiFilter?.apiEndpoint
+        const loading = apiFilterDropdowns[_key] === null
 
         const multiValues: { value; label }[] = []
+        const nestedOptions: NestedOptions = Object.entries(filter?.subGrouping?.valuesLookup || {}).map(
+          ([key, data]) => [
+            [key, key], // Main option: [value, text]
+            Array.isArray(data?.values) ? data.values.map(value => [value, value]) : [] // Ensure `values` is an array
+          ]
+        )
 
+        const activeSubGroupValue = _.get(
+          filter?.subGrouping?.valuesLookup,
+          [filter?.active as string, 'values', 0],
+          null // Default to null if the path is invalid
+        )
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
           if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
@@ -83,64 +91,104 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           // Data Filter
           filter.values?.forEach((filterOption, index) => {
             const labeledOpt = filter.labels && filter.labels[filterOption]
-            values.push(
-              <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                {labeledOpt || filterOption}
-              </option>
-            )
+            const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
+
+            if (!resetLabelHasMatch) {
+              values.push(
+                <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                  {labeledOpt || filterOption}
+                </option>
+              )
+            } else {
+              // add label to the front of list if it matches with reset label
+              values.unshift(
+                <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                  {labeledOpt || filterOption}
+                </option>
+              )
+            }
+
             multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
           })
         }
 
-        return filter.filterStyle === FILTER_STYLE.multiSelect ? (
-          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
-            <MultiSelect
-              label={filter.key}
-              options={multiValues}
-              fieldName={filterIndex}
-              updateField={updateField}
-              selected={filter.active as string[]}
-              limit={filter.selectLimit || 5}
-            />
-          </div>
-        ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
-          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
-            <NestedDropdown
-              activeGroup={filter.active as string}
-              activeSubGroup={filter.subGrouping?.active}
-              filterIndex={filterIndex}
-              options={getNestedDropdownOptions(apiFilterDropdowns[_key])}
-              listLabel={filter.key}
-              handleSelectedItems={value => updateField(null, null, filterIndex, value)}
-            />
-          </div>
-        ) : (
-          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
-            <label className='text-capitalize font-weight-bold' htmlFor={`filter-${filterIndex}`}>
-              {filter.key}
-            </label>
-            <select
-              id={`filter-${filterIndex}`}
-              className='cove-form-select'
-              data-index='0'
-              value={filter.queuedActive || filter.active}
-              onChange={val => {
-                handleOnChange(filterIndex, val.target.value)
-              }}
-              disabled={values.length === 1 && !nullVal(filter)}
-            >
-              {nullVal(filter) && (
-                <option key={`select`} value=''>
-                  {filter.resetLabel || '- Select -'}
-                </option>
-              )}
-              {values}
-            </select>
+        const isDisabled = !values.length
+        // push reset label only if it does not includes in filter values  options
+        if (filter.resetLabel && !filter.values.includes(filter.resetLabel)) {
+          values.unshift(
+            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+              {filter.resetLabel}
+            </option>
+          )
+        }
+
+        const formGroupClass = `form-group mr-3 mb-1${loading ? ' loading-filter' : ''}`
+
+        return (
+          <div className={formGroupClass} key={`${label}-filtersection-${filterIndex}`}>
+            {label && (
+              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${filterIndex}`}>
+                {label}
+              </label>
+            )}
+            {filter.filterStyle === FILTER_STYLE.multiSelect ? (
+              <MultiSelect
+                label={label}
+                options={multiValues}
+                fieldName={filterIndex}
+                updateField={updateField}
+                selected={filter.active as string[]}
+                limit={filter.selectLimit || 5}
+                loading={loading}
+              />
+            ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
+              <NestedDropdown
+                activeGroup={filter.active as string}
+                activeSubGroup={_key ? filter.subGrouping?.active : activeSubGroupValue}
+                filterIndex={filterIndex}
+                options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
+                listLabel={label}
+                handleSelectedItems={value => updateField(null, null, filterIndex, value)}
+                loading={loading}
+              />
+            ) : (
+              <>
+                <select
+                  id={`filter-${filterIndex}`}
+                  className='cove-form-select'
+                  data-index='0'
+                  value={loading ? 'Loading...' : filter.queuedActive || filter.active}
+                  onChange={val => {
+                    handleOnChange(filterIndex, val.target.value)
+                  }}
+                  disabled={loading || isDisabled}
+                >
+                  {loading && <option value='Loading...'>Loading...</option>}
+                  {nullVal(filter) && (
+                    <option key={`select`} value=''>
+                      {filter.resetLabel || '- Select -'}
+                    </option>
+                  )}
+                  {values}
+                </select>
+                {loading && <Loader spinnerType={'text-secondary'} />}
+              </>
+            )}
           </div>
         )
       })}
       {showSubmit && (
-        <button className='btn btn-primary mb-1' onClick={applyFilters}>
+        <button
+          className='btn btn-primary mb-1'
+          onClick={applyFilters}
+          disabled={show.some(filterIndex => {
+            const emptyFilterValues = [undefined, '', '- Select -']
+            return (
+              emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
+              emptyFilterValues.includes(sharedFilters[filterIndex].active)
+            )
+          })}
+        >
           {applyFiltersButtonText || 'GO!'}
         </button>
       )}

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

@@ -274,7 +274,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </select>
             </label>
           ) : (
+
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
+
               Add Existing Dashboard Filter
             </button>
           )}