@cdc/dashboard 4.24.5 → 4.24.9

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

@@ -0,0 +1,477 @@
+import _ from 'lodash'
+import { APIFilter } from '../../../../types/APIFilter'
+import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
+import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { useEffect, useMemo, useState } from 'react'
+import { SharedFilter } from '../../../../types/SharedFilter'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import MultiSelect from '@cdc/core/components/MultiSelect'
+import { DashboardConfig } from '../../../../types/DashboardConfig'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { hasDashboardApplyBehavior } from '../../../../helpers/hasDashboardApplyBehavior'
+
+type FilterEditorProps = {
+  config: DashboardConfig
+  filter: SharedFilter
+  updateFilterProp: (name: keyof SharedFilter, value: any) => void
+}
+
+const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilterProp }) => {
+  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 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] 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) => {
+      if (!!row.dataKey) {
+        nameLookup[rowIndex] = `Row ${rowIndex + 1}`
+        rowOptions.push(rowIndex)
+      }
+    })
+
+    const rowsNotSelected = rowOptions.filter(row => !filter.usedBy || filter.usedBy.indexOf(row.toString()) === -1)
+    return [nameLookup, [...vizOptions, ...rowsNotSelected]]
+  }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
+
+  const loadColumnData = async () => {
+    const columns = {}
+    const dataKeys = Object.keys(config.datasets)
+
+    for (let i = 0; i < dataKeys.length; i++) {
+      const dataKey = dataKeys[i]
+      let _dataSet = config.datasets[dataKey]
+      if (!_dataSet.data && _dataSet.dataUrl) {
+        _dataSet = await fetchRemoteData(_dataSet.dataUrl)
+        if (_dataSet.dataDescription) {
+          try {
+            _dataSet = transform.autoStandardize(_dataSet.data)
+            _dataSet = transform.developerStandardize(_dataSet.data, _dataSet.dataDescription)
+          } catch (e) {
+            //Data not able to be standardized, leave as is
+          }
+        }
+      }
+
+      if (_dataSet.data) {
+        _dataSet.data.forEach(row => {
+          Object.keys(row).forEach(columnName => {
+            columns[columnName] = true
+          })
+        })
+      }
+    }
+
+    setColumns(Object.keys(columns))
+  }
+
+  useEffect(() => {
+    loadColumnData()
+  }, [config.datasets])
+
+  const addFilterUsedBy = (filter, value) => {
+    if (value === '') return
+    if (!filter.usedBy) filter.usedBy = []
+    filter.usedBy.push(value)
+    updateFilterProp('usedBy', filter.usedBy)
+  }
+
+  const removeFilterUsedBy = (filter, value) => {
+    let usedByIndex = filter.usedBy.indexOf(value)
+    if (usedByIndex !== -1) {
+      filter.usedBy.splice(usedByIndex, 1)
+      updateFilterProp('usedBy', filter.usedBy)
+    }
+  }
+
+  const updateAPIFilter = (key: keyof APIFilter, value: string | boolean) => {
+    const filterClone = _.cloneDeep(filter)
+    const _filter = filterClone.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
+    const newAPIFilter: APIFilter = { ..._filter, [key]: value }
+    updateFilterProp('apiFilter', newAPIFilter)
+  }
+
+  return (
+    <>
+      <label>
+        <span className='edit-label column-heading'>Filter Type: </span>
+        <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>
+        </select>
+      </label>
+      {filter.type === 'urlfilter' && (
+        <>
+          <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)}
+                >
+                  <option value=''>- Select Option -</option>
+                  {Object.keys(config.datasets).map(datasetKey => {
+                    if (config.datasets[datasetKey].dataUrl) {
+                      return (
+                        <option key={datasetKey} value={datasetKey}>
+                          {config.datasets[datasetKey].dataUrl}
+                        </option>
+                      )
+                    }
+                    return null
+                  })}
+                </select>
+              </label>
+              <label>
+                <span className='edit-label column-heading'>Filter By: </span>
+                <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
+                  </option>
+                  <option key={'file-name'} value={'File Name'}>
+                    File Name
+                  </option>
+                </select>
+              </label>
+              {filter.filterBy === 'File Name' && (
+                <>
+                  <TextField
+                    label='File Name: '
+                    value={filter.fileName || ''}
+                    updateField={(_section, _subSection, _key, value) => updateFilterProp('fileName', value)}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>{`Add \${query}\ to replace the filename with the active dropdown value.`}</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+
+                  <label>
+                    <span className='edit-label column-heading'>
+                      White Space Replacments
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>{`Set how whitespace characters will be handled in the file request`}</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
+                    <select
+                      defaultValue={filter.whitespaceReplacement || 'Keep Spaces'}
+                      onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
+                    >
+                      <option key={'remove-spaces'} value={'Remove Spaces'}>
+                        Remove Spaces
+                      </option>
+                      <option key={'replace-with-underscore'} value={'Replace With Underscore'}>
+                        Replace With Underscore
+                      </option>
+                      <option key={'keep-spaces'} value={'Keep Spaces'}>
+                        Keep Spaces
+                      </option>
+                    </select>
+                  </label>
+                </>
+              )}
+            </>
+          )}
+          {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}
+            updateField={(_section, _subSection, _key, value) => updateAPIFilter('textSelector', value)}
+            tooltip={
+              <>
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Text to use in the html option element. If none is applied value selector will be used.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+                {` * Optional`}
+              </>
+            }
+          />
+          <TextField
+            label='Option Value Selector:'
+            value={filter.apiFilter?.valueSelector}
+            updateField={(_section, _subSection, _key, value) => updateAPIFilter('valueSelector', value)}
+            tooltip={
+              <>
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Value to use in the html option element</p>
+                  </Tooltip.Content>
+                </Tooltip>
+                {` * Required`}
+              </>
+            }
+          />
+
+          {!!parentFilters.length && (
+            <MultiSelect
+              label='Parent Filter(s): '
+              options={parentFilters.map(key => ({ value: key, label: key }))}
+              fieldName='parents'
+              selected={filter.parents}
+              updateField={(_section, _subsection, _fieldname, newItems) => {
+                updateFilterProp('parents', newItems)
+              }}
+            />
+          )}
+
+          <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='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' && (
+        <>
+          <label>
+            <span className='edit-label column-heading'>Filter: </span>
+            <select
+              value={filter.columnName}
+              onChange={e => {
+                updateFilterProp('columnName', e.target.value)
+              }}
+            >
+              <option value=''>- Select Option -</option>
+              {columns.map(dataKey => (
+                <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
+                  {dataKey}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <TextField
+            label='Label'
+            value={filter.key}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
+          />
+
+          <label>
+            <span className='edit-label column-heading'>Show Dropdown</span>
+            <input
+              type='checkbox'
+              defaultChecked={filter.showDropdown === true}
+              onChange={e => {
+                updateFilterProp('showDropdown', !filter.showDropdown)
+              }}
+            />
+          </label>
+
+          <label>
+            <span className='edit-label column-heading'>Set By: </span>
+            <select value={filter.setBy} onChange={e => updateFilterProp('setBy', e.target.value)}>
+              <option value=''>- Select Option -</option>
+              {Object.keys(config.visualizations)
+                .filter(vizKey => config.visualizations[vizKey].type !== 'dashboardFilters')
+                .map(vizKey => {
+                  const viz = config.visualizations[vizKey] as Visualization
+                  return (
+                    <option value={vizKey} key={`set-by-select-item-${vizKey}`}>
+                      {viz.general?.title || viz.title || vizKey}
+                    </option>
+                  )
+                })}
+            </select>
+          </label>
+          <label>
+            <span className='edit-label column-heading'>Used By: </span>
+            <ul>
+              {filter.usedBy &&
+                filter.usedBy.map(opt => (
+                  <li key={`used-by-list-item-${opt}`}>
+                    <span>{usedByNameLookup[opt] || opt}</span>{' '}
+                    <button
+                      onClick={e => {
+                        e.preventDefault()
+                        removeFilterUsedBy(filter, opt)
+                      }}
+                    >
+                      X
+                    </button>
+                  </li>
+                ))}
+            </ul>
+            <select value='' onChange={e => addFilterUsedBy(filter, e.target.value)}>
+              <option value=''>- Select Option -</option>
+              {usedByOptions.map(opt => (
+                <option value={opt} key={`used-by-select-item-${opt}`}>
+                  {usedByNameLookup[opt] || opt}
+                </option>
+              ))}
+            </select>
+          </label>
+          <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>
+            <select
+              value={filter.parents || []}
+              onChange={e => {
+                updateFilterProp('parents', e.target.value)
+              }}
+            >
+              <option value=''>Select a filter</option>
+              {config.dashboard.sharedFilters &&
+                config.dashboard.sharedFilters.map(sharedFilter => {
+                  if (sharedFilter.key !== filter.key) {
+                    return <option key={sharedFilter.key}>{sharedFilter.key}</option>
+                  }
+                })}
+            </select>
+          </label>
+
+          <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>
+    </>
+  )
+}
+
+export default FilterEditor

package/src/components/DashboardFilters/DashboardFiltersEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './DashboardFiltersEditor'

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -0,0 +1,191 @@
+import { useContext, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Filters from './DashboardFilters'
+import { changeFilterActive } from '../../helpers/changeFilterActive'
+import _ from 'lodash'
+import { FilterBehavior } from '../../helpers/FilterBehavior'
+import { getFilteredData } from '../../helpers/getFilteredData'
+import { DashboardFilters } from '../../types/DashboardFilters'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+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
+  [dropdownsKey: string]: null | DropdownOptions
+}
+
+type DashboardFiltersProps = {
+  apiFilterDropdowns: APIFilterDropdowns
+  visualizationConfig: DashboardFilters
+  isEditor?: boolean
+  setConfig: (config: DashboardFilters) => void
+  currentViewport?: ViewPort
+}
+
+const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
+  apiFilterDropdowns,
+  visualizationConfig,
+  setConfig: updateConfig,
+  currentViewport,
+  isEditor = false
+}) => {
+  const state = useContext(DashboardContext)
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns } = state
+  const dispatch = useContext(DashboardDispatchContext)
+
+  const applyFilters = () => {
+    const dashboardConfig = _.cloneDeep(state.config.dashboard)
+    const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
+      .filter(v => v.type === 'dashboardFilters')
+      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, viz.sharedFilterIndexes] : acc), [])
+    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
+      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
+        return !filter.active && !filter.queuedActive
+      } else {
+        // autoload filters don't need to be selected to apply filters
+        return false
+      }
+    })
+    if (allRequiredFiltersSelected) {
+      if (hasDashboardApplyBehavior(state.config.visualizations)) {
+        const queryParams = getQueryParams()
+        let needsQueryUpdate = false
+        dashboardConfig.sharedFilters.forEach((sharedFilter, index) => {
+          if (sharedFilter.queuedActive) {
+            dashboardConfig.sharedFilters[index].active = sharedFilter.queuedActive
+            delete dashboardConfig.sharedFilters[index].queuedActive
+
+            if (
+              sharedFilter.setByQueryParameter &&
+              queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
+            ) {
+              queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
+                ? sharedFilter.active.join(',')
+                : sharedFilter.active
+              needsQueryUpdate = true
+            }
+          }
+        })
+
+        if (needsQueryUpdate) {
+          updateQueryString(queryParams)
+        }
+      }
+
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
+      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
+        .then(newFilters => {
+          reloadURLData(newFilters)
+        })
+        .catch(e => {
+          console.error(e)
+        })
+    } else {
+      // TODO noftify of required fields
+    }
+  }
+
+  const handleOnChange = (index: number, value: string | string[]) => {
+    const newConfig = _.cloneDeep(dashboardConfig)
+    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
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo).then(filters => {
+          reloadURLData(filters)
+        })
+      } else {
+        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: {} })
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo)
+      }
+    } else {
+      if (newSharedFilters[index].apiFilter) {
+        reloadURLData(newSharedFilters)
+      } else {
+        const clonedState = _.cloneDeep(state)
+        clonedState.config.dashboard.sharedFilters = newSharedFilters
+        const newFilteredData = getFilteredData(clonedState)
+        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+      }
+    }
+  }
+  const [displayPanel, setDisplayPanel] = useState(true)
+  const onBackClick = () => {
+    setDisplayPanel(!displayPanel)
+    updateConfig({
+      ...visualizationConfig,
+      showEditorPanel: !displayPanel
+    })
+  }
+
+  // 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}
+        >
+          <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
+        </Layout.Sidebar>
+      )}
+
+      {!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>
+  )
+}
+
+export default DashboardFiltersWrapper

package/src/components/DashboardFilters/index.ts

@@ -0,0 +1,3 @@
+export { default } from './DashboardFiltersWrapper'
+
+export type { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'