npm - @cdc/dashboard - Versions diffs - 4.25.10 → 4.25.11 - Mend

@cdc/dashboard 4.25.10 → 4.25.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/{cdcdashboard-fce76882.es.js → cdcdashboard-BnB1QM5d.es.js} +6 -13
package/dist/{cdcdashboard-c55ac1ea.es.js → cdcdashboard-D6CG2-Hb.es.js} +5 -12
package/dist/{cdcdashboard-31a33da1.es.js → cdcdashboard-MXgURbdZ.es.js} +6 -13
package/dist/{cdcdashboard-1a1724a1.es.js → cdcdashboard-dgT_1dIT.es.js} +136 -151
package/dist/cdcdashboard.js +48574 -46414
package/examples/api-test/categories.json +18 -0
package/examples/api-test/chart-data.json +602 -0
package/examples/api-test/topics.json +47 -0
package/examples/api-test/years.json +22 -0
package/examples/markup-axis-label.json +4167 -0
package/examples/private/DEV-10538.json +407 -0
package/examples/private/DEV-11405.json +39112 -0
package/examples/private/big-dashboard.json +39095 -39077
package/examples/private/clade-2.json +430 -0
package/examples/private/delete.json +32919 -0
package/examples/private/diabetes.json +546 -196
package/examples/private/markup-footer/mortality-deaths-footnotes-age.csv +3 -0
package/examples/private/mpox.json +38128 -0
package/examples/private/reset.json +32920 -0
package/examples/test-api-filter-reset.json +132 -0
package/index.html +2 -2
package/package.json +9 -10
package/src/CdcDashboardComponent.tsx +17 -8
package/src/DashboardContext.tsx +3 -1
package/src/_stories/Dashboard.stories.tsx +17 -0
package/src/_stories/_mock/custom-order-new-values.json +116 -0
package/src/components/DashboardFilters/DashboardFilters.tsx +34 -20
package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx +29 -12
package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx +77 -111
package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx +51 -51
package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx +120 -24
package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx +62 -3
package/src/components/DataDesignerModal.tsx +12 -5
package/src/components/Header/Header.tsx +10 -9
package/src/components/Toggle/Toggle.tsx +48 -48
package/src/components/VisualizationRow.tsx +4 -3
package/src/helpers/addValuesToDashboardFilters.ts +29 -4
package/src/helpers/apiFilterHelpers.ts +26 -2
package/src/helpers/filterData.ts +52 -7
package/src/helpers/filterResetHelpers.ts +102 -0
package/src/helpers/getVizConfig.ts +2 -2
package/src/helpers/loadAPIFilters.ts +109 -99
package/src/helpers/tests/filterResetHelpers.test.ts +532 -0
package/src/index.tsx +1 -0
package/src/scss/editor-panel.scss +3 -431
package/src/scss/main.scss +1 -24
package/src/store/errorMessage/errorMessage.reducer.ts +1 -1
package/src/types/DashboardFilters.ts +9 -8
package/examples/private/burden_toolkit_mortality_diabetes_attributable_deaths_data.csv +0 -14041
package/examples/private/burden_toolkit_mortality_diabetes_attributable_deaths_per_100000_data.csv +0 -14041
package/examples/private/burden_toolkit_mortality_qaly_data.csv +0 -18721
package/examples/private/burden_toolkit_mortality_yll_data.csv +0 -18721
package/src/helpers/getAutoLoadVisualization.ts +0 -11
package/src/scss/mixins.scss +0 -47
package/src/scss/variables.scss +0 -5
/package/dist/{cdcdashboard-548642e6.es.js → cdcdashboard-Ct2SB0vL.es.js} +0 -0

package/examples/test-api-filter-reset.json ADDED Viewed

@@ -0,0 +1,132 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "Category",
+        "type": "urlfilter",
+        "columnName": "category",
+        "apiFilter": {
+          "apiEndpoint": "http://localhost:8080/examples/api-test/categories.json",
+          "valueSelector": "category",
+          "textSelector": "category"
+        },
+        "queryParameter": "category",
+        "resetLabel": "- Select Category -",
+        "showDropdown": true,
+        "filterStyle": "dropdown",
+        "usedBy": ["chart1"]
+      },
+      {
+        "key": "Topic",
+        "type": "urlfilter",
+        "columnName": "topic",
+        "apiFilter": {
+          "apiEndpoint": "http://localhost:8080/examples/api-test/topics.json",
+          "valueSelector": "topic",
+          "textSelector": "topic"
+        },
+        "queryParameter": "topic",
+        "resetLabel": "- Select Topic -",
+        "showDropdown": true,
+        "parents": [
+          "Category"
+        ],
+        "filterStyle": "dropdown",
+        "usedBy": ["chart1"]
+      },
+      {
+        "key": "Year",
+        "type": "urlfilter",
+        "columnName": "year",
+        "apiFilter": {
+          "apiEndpoint": "http://localhost:8080/examples/api-test/years.json",
+          "valueSelector": "year",
+          "textSelector": "year"
+        },
+        "queryParameter": "year",
+        "resetLabel": "- Select -",
+        "showDropdown": true,
+        "parents": [
+          "Category",
+          "Topic"
+        ],
+        "filterStyle": "dropdown",
+        "usedBy": ["chart1"]
+      }
+    ]
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "filters"
+      }
+    ],
+    [
+      {
+        "width": 12,
+        "widget": "header"
+      }
+    ],
+    [
+      {
+        "width": 12,
+        "widget": "chart1"
+      }
+    ]
+  ],
+  "visualizations": {
+    "filters": {
+      "type": "dashboardFilters",
+      "visualizationType": "dashboardFilters",
+      "sharedFilterIndexes": [
+        0,
+        1,
+        2
+      ],
+      "filterBehavior": "Apply Button",
+      "applyFiltersButtonText": "Apply Filters"
+    },
+    "header": {
+      "type": "markup-include",
+      "title": "Test API Filter Reset",
+      "contentEditor": {
+        "inlineHTML": "<h2>API Filter Reset Test Dashboard</h2><p>This dashboard tests the 'Clear Filters' button functionality with API filters.</p><ul><li><strong>Category</strong>: Has resetLabel = '- Select Category -'</li><li><strong>Topic</strong>: Has resetLabel = '- Select Topic -' (depends on Category)</li><li><strong>Year</strong>: Has defaultValue = '2023' (depends on Category and Topic)</li></ul><h3>Testing Instructions:</h3><ol><li>Select values for all three filters</li><li>Click 'Apply Filters'</li><li>Click 'Clear Filters'</li><li>Expected behavior:<ul><li>Category and Topic should reset to '- Select Category -' and '- Select Topic -'</li><li>Year should reset to '2023' (its defaultValue)</li></ul></li></ol>",
+        "useInlineHTML": true
+      },
+      "theme": "theme-blue"
+    },
+    "chart1": {
+      "type": "chart",
+      "title": "Sample Chart",
+      "showTitle": true,
+      "theme": "theme-blue",
+      "visualizationType": "Line",
+      "dataKey": "chartData",
+      "xAxis": {
+        "dataKey": "state",
+        "type": "categorical"
+      },
+      "series": [
+        {
+          "dataKey": "value",
+          "type": "Line"
+        }
+      ],
+      "general": {
+        "showDownloadButton": false
+      },
+      "table": {
+        "showTableButton": false
+      }
+    }
+  },
+  "datasets": {
+    "chartData": {
+      "dataUrl": "http://localhost:8080/examples/api-test/chart-data.json"
+    }
+  },
+  "filterBehavior": "Apply Button",
+  "type": "dashboard"
+}

package/index.html CHANGED Viewed

@@ -22,9 +22,9 @@
 </head>
 <body>
-  <div class="react-container" data-config="/examples/private/oral-health.json"></div>
+  <div class="react-container" data-config="/examples/markup-axis-label.json"></div>
   <script src="https://www.cdc.gov/TemplatePackage/contrib/libs/jquery/latest/jquery.min.js?_=91329"></script>
   <script type="module" src="./src/index.tsx"></script>
 </body>
-</html>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "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.25.10",
-    "@cdc/core": "^4.25.10",
-    "@cdc/data-bite": "^4.25.10",
-    "@cdc/filtered-text": "^4.25.10",
-    "@cdc/map": "^4.25.10",
-    "@cdc/markup-include": "^4.25.10",
-    "@cdc/waffle-chart": "^4.25.10",
+    "@cdc/chart": "^4.25.11",
+    "@cdc/core": "^4.25.11",
+    "@cdc/data-bite": "^4.25.11",
+    "@cdc/filtered-text": "^4.25.11",
+    "@cdc/map": "^4.25.11",
+    "@cdc/markup-include": "^4.25.11",
+    "@cdc/waffle-chart": "^4.25.11",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-dnd": "^14.0.2",
@@ -45,11 +45,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^4.4.11",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcDashboardComponent.tsx CHANGED Viewed

@@ -23,7 +23,7 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
 import Grid from './components/Grid'
-import Header from './components/Header/Header'
+import Header from './components/Header'
 import DataTable from '@cdc/core/components/DataTable'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -32,7 +32,7 @@ import './scss/main.scss'
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
 import errorMessagesReducer from './store/errorMessage/errorMessage.reducer'
-import { filterData } from './helpers/filterData'
+import { filterData, isFilterAtResetState } from './helpers/filterData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
 import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
@@ -89,10 +89,17 @@ export default function CdcDashboard({
       return true
     }
+    // Check if any filters are at their reset state (incomplete)
+    const sharedFilters = state.config.dashboard?.sharedFilters || []
+    const hasResetFilters = sharedFilters.some(isFilterAtResetState)
+    if (hasResetFilters) {
+      return true
+    }
     const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
     if (!vals.length) return true
     return vals.some(val => val === undefined)
-  }, [state.data, state.config.visualizations, state.filtersApplied])
+  }, [state.data, state.config.visualizations, state.config.dashboard?.sharedFilters, state.filtersApplied])
   const vizRowColumnLocator = getVizRowColumnLocator(state.config.rows)
@@ -165,9 +172,13 @@ export default function CdcDashboard({
             }
             if (filter.apiFilter && filter.active) {
-              updatedQSParams[filter.apiFilter.valueSelector] = filter.active
-              if (filter.apiFilter.subgroupValueSelector && filter.subGrouping.active) {
-                updatedQSParams[filter.apiFilter.subgroupValueSelector] = filter.subGrouping.active
+              // Don't add filter to query params if it's set to its resetLabel
+              const isResetLabel = filter.resetLabel && filter.active === filter.resetLabel
+              if (!isResetLabel) {
+                updatedQSParams[filter.apiFilter.valueSelector] = filter.active
+                if (filter.apiFilter.subgroupValueSelector && filter.subGrouping.active) {
+                  updatedQSParams[filter.apiFilter.subgroupValueSelector] = filter.subGrouping.active
+                }
               }
             }
           }
@@ -292,8 +303,6 @@ export default function CdcDashboard({
   }
   const setEventData = ({ detail }, data, filteredData) => {
-    // eslint-disable-next-line no-console
-    console.log('Event: cove_set_data', detail)
     try {
       const newDatasets = Object.keys(detail).reduce((acc, key) => {
         if (data[key] !== undefined) {

package/src/DashboardContext.tsx CHANGED Viewed

@@ -15,7 +15,9 @@ type ConfigCTX = DashboardState & {
   loadAPIFilters: (
     sharedFilters: SharedFilter[],
     dropdowns: APIFilterDropdowns,
-    recursiveLimit?: number
+    loadAll?: boolean,
+    recursiveLimit?: number,
+    isStale?: () => boolean
   ) => Promise<SharedFilter[]>
   setAPIFilterDropdowns: (dropdowns: APIFilterDropdowns) => void
   setAPILoading: (loading: boolean) => void

package/src/_stories/Dashboard.stories.tsx CHANGED Viewed

@@ -28,6 +28,8 @@ import TopSpacing_1 from './_mock/data-bite-dash-test.json'
 import TopSpacing_2 from './_mock/data-bite-dash-test_1.json'
 import TopSpacing_3 from './_mock/data-bite-dash-test_1_1.json'
 import TopSpacing_4 from './_mock/data-bite-dash-test_1_1_1.json'
+import CustomOrderNewValues from './_mock/custom-order-new-values.json'
+import APIFilterResetConfig from '../../examples/test-api-filter-reset.json'
 // Dashboard Filter Updates for Ascending, Descending, and Custom Order
 import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
@@ -38,6 +40,7 @@ DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
 // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
 const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
+DashboardFilterCust.dashboard.sharedFilters[0].orderedValues = customOrder
 const meta: Meta<typeof Dashboard> = {
   title: 'Components/Pages/Dashboard',
@@ -67,6 +70,13 @@ export const Dashboard_Filter_Cust: Story = {
   }
 }
+export const CustomOrder_NewValues_AutoAppend: Story = {
+  args: {
+    config: CustomOrderNewValues,
+    isEditor: false
+  }
+}
 export const Example_1: Story = {
   args: {
     config: ExampleConfig_1,
@@ -472,4 +482,11 @@ export const Top_Spacing_4: Story = {
   }
 }
+export const Clear_Filters_Button: Story = {
+  args: {
+    config: APIFilterResetConfig as unknown as Config,
+    isEditor: false
+  }
+}
 export default meta

package/src/_stories/_mock/custom-order-new-values.json ADDED Viewed

@@ -0,0 +1,116 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "Custom Order Filter - New Values Auto-Append Demo",
+    "sharedFilters": [
+      {
+        "key": "Location",
+        "columnName": "Location",
+        "showDropdown": true,
+        "type": "datafilter",
+        "order": "cust",
+        "orderedValues": [
+          "California",
+          "Texas",
+          "Florida"
+        ],
+        "usedBy": [
+          "data-bite-demo",
+          "chart-demo"
+        ],
+        "tier": 1
+      }
+    ]
+  },
+  "datasets": {
+    "custom-order-demo-data.csv": {
+      "dataUrl": "http://localhost:6006/custom-order-demo-data.csv"
+    }
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "legacySharedFilters"
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 6,
+          "widget": "data-bite-demo"
+        },
+        {
+          "width": 6,
+          "widget": "chart-demo"
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "data-bite-demo": {
+      "type": "data-bite",
+      "dataKey": "custom-order-demo-data.csv",
+      "dataFunction": "Sum",
+      "dataColumn": "Amount",
+      "bitePosition": "Left",
+      "biteFontSize": 36,
+      "fontSize": "large",
+      "biteBody": "<h3>Total Amount for Selected Location</h3><p><strong>Custom Order Demo:</strong> The filter has custom order: <em>California, Texas, Florida</em>. But the CSV data includes <strong>New York</strong> and <strong>Illinois</strong> which should auto-append to the end of the dropdown.</p><p>Select different locations from the dropdown above to see the total amount update.</p>",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "$",
+        "suffix": ""
+      },
+      "biteStyle": "graphic",
+      "theme": "theme-blue",
+      "shadow": true,
+      "uid": "data-bite-demo",
+      "visualizationType": "data-bite"
+    },
+    "chart-demo": {
+      "type": "chart",
+      "title": "Amount by Year",
+      "theme": "theme-blue",
+      "fontSize": "medium",
+      "height": "250",
+      "yAxis": {
+        "label": "Amount",
+        "gridLines": true
+      },
+      "xAxis": {
+        "dataKey": "Year",
+        "label": "Year"
+      },
+      "table": {
+        "show": true,
+        "label": "Data Table"
+      },
+      "legend": {
+        "hide": true
+      },
+      "visualizationType": "Bar",
+      "series": [
+        {
+          "dataKey": "Amount",
+          "type": "Bar"
+        }
+      ],
+      "dataKey": "custom-order-demo-data.csv",
+      "uid": "chart-demo"
+    },
+    "legacySharedFilters": {
+      "type": "dashboardFilters",
+      "visualizationType": "dashboardFilters",
+      "sharedFilterIndexes": [
+        0
+      ],
+      "filterBehavior": "Filter Change",
+      "uid": "legacySharedFilters"
+    }
+  },
+  "type": "dashboard"
+}

package/src/components/DashboardFilters/DashboardFilters.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ type DashboardFilterProps = {
   showSubmit: boolean
   applyFilters: MouseEventHandler<HTMLButtonElement>
   applyFiltersButtonText?: string
+  handleReset?: MouseEventHandler<HTMLButtonElement>
 }
 const DashboardFilters: React.FC<DashboardFilterProps> = ({
@@ -27,7 +28,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   handleOnChange,
   showSubmit,
   applyFilters,
-  applyFiltersButtonText
+  applyFiltersButtonText,
+  handleReset
 }) => {
   const nullVal = (filter: SharedFilter) => {
     const val = filter.queuedActive || filter.active
@@ -115,8 +117,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         }
         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)) {
+        // push reset label only if it does not includes in filter values options
+        if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
           values.unshift(
             <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
               {filter.resetLabel}
@@ -145,9 +147,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
             ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
-                activeSubGroup={
-                  _key ? filter.queuedActive?.[1] || filter.subGrouping?.active : filter.subGrouping?.active
-                }
+                activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}
@@ -167,7 +167,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                   disabled={loading || isDisabled}
                 >
                   {loading && <option value='Loading...'>Loading...</option>}
-                  {nullVal(filter) && (
+                  {/* For API filters, show placeholder when no value is selected */}
+                  {_key && nullVal(filter) && (
+                    <option key={`reset-label`} value=''>
+                      {filter.resetLabel || '- Select One -'}
+                    </option>
+                  )}
+                  {/* For non-API filters or when no value is selected, show empty option */}
+                  {!_key && nullVal(filter) && (
                     <option key={`select`} value=''>
                       {filter.resetLabel || '- Select -'}
                     </option>
@@ -181,19 +188,26 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         )
       })}
       {showSubmit && (
-        <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>
+        <>
+          <button
+            className='btn btn-primary mb-1 me-2'
+            onClick={applyFilters}
+            disabled={show.some(filterIndex => {
+              const emptyFilterValues = [undefined, '', '- Select -']
+              return (
+                emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
+                emptyFilterValues.includes(sharedFilters[filterIndex].active)
+              )
+            })}
+          >
+            {applyFiltersButtonText || 'GO!'}
+          </button>
+          {handleReset && (
+            <button className='btn btn-link mb-1' onClick={handleReset}>
+              Clear Filters
+            </button>
+          )}
+        </>
       )}
     </form>
   )

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

@@ -43,9 +43,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     return config.dashboard.sharedFilters
       ?.map<[number, string]>(({ key }, i) => [i, key])
       .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
-      .map(([filterIndex, filterName]) => (
-        <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>
-      ))
+      .map(([filterIndex, filterName]) => ({
+        value: String(filterIndex),
+        label: `${filterIndex} - ${filterName}`
+      }))
   }, [config.visualizations, vizConfig.uid])
   const openControls = useState({})
@@ -189,6 +190,27 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               }
             />
           )}
+          {vizConfig.filterBehavior === 'Apply Button' && (
+            <CheckBox
+              label='Show Clear Filters Button'
+              value={vizConfig.showClearButton ?? true}
+              updateField={(_section, _subsection, _key, value) => {
+                updateConfig({ ...vizConfig, showClearButton: value })
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      When enabled, displays a "Clear Filters" button that allows users to reset all filter selections.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
         </AccordionItemPanel>
       </AccordionItem>
@@ -254,8 +276,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   </Tooltip.Content>
                 </Tooltip>
               </span>
-              <select
+              <Select
+                label=''
                 value={''}
+                options={[{ value: '', label: 'Select' }, ...(existingOptions || [])]}
                 onChange={e => {
                   updateConfig({
                     ...vizConfig,
@@ -263,14 +287,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   })
                   setCanAddExisting(false)
                 }}
-              >
-                {[
-                  <option key='select' value=''>
-                    Select
-                  </option>,
-                  ...existingOptions
-                ]}
-              </select>
+              />
             </label>
           ) : (
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>