Dashboard filter

[srijani-smsrc]

I want to change the dashboard page , instead of left side , i want it as a element inside the dashboard like header , divider , chart , where will i need to change code

Basically i want to make my own filter element where when i click the the filter icon a pop up filter box and what ever is selected it will appear in chips

@dosu

[dosubot[bot]]

This is a substantial customization. Here's a roadmap of the key files you'd need to touch:

Where the filter bar currently lives: The left-side (vertical) filter bar is rendered in DashboardBuilder.tsx, not in the grid itself. It uses a ResizableSidebar positioned via CSS Grid, separate from the dashboard canvas. The filter bar component lives at src/dashboard/components/nativeFilters/FilterBar/index.tsx [1], with individual filter controls in the FilterControls/ subdirectory.

To make filters a draggable canvas element (like Header, Divider, Chart), you'd need to modify these areas:

1. Add a new component type in src/dashboard/util/componentTypes.ts — e.g. FILTER_BOX_TYPE = 'FILTER_BOX'

2. Create the canvas component — a new file like src/dashboard/components/gridComponents/FilterBox.tsx, modeled after existing components like Divider.jsx or ChartHolder.tsx. This component would wrap the filter UI (reusing logic from FilterControl.tsx in [2]) and handle drag/drop + resizing.

3. Register it in the componentLookup map in src/dashboard/components/gridComponents/index.js.

4. Add nesting rules in isValidChild.ts to define where your filter element can be placed (e.g., inside GRID, COLUMN, etc.) [3].

5. Add a palette drag source in src/dashboard/components/BuilderComponentPane/ so users can drag the filter element onto the canvas in edit mode [3].

6. Wire up filter state — your canvas filter component needs to dispatch updateDataMask Redux actions and connect to the same dataMask state that the native filter bar uses, so filter selections actually propagate to charts.

An alternative approach worth considering: There's an active SIP-218 proposing exactly this — canvas-based filter chart plugins that use Superset's existing cross-filtering infrastructure instead of modifying the layout system [4]. The approach builds filters as chart plugins with Behavior.InteractiveChart, so they emit cross-filter events like any other chart. This avoids creating a new layout component type entirely. You can see a working implementation at krmmkr's branch [5].

The chart-plugin approach is simpler to implement since it works within the existing plugin system, but as noted by a maintainer, the long-term direction the community has discussed is letting native filters live directly on the canvas with local scoping [4].

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[rusackas]

This will likely be tackled as part of the Superset Extensions effort. Stay tuned!