feat(Native Filters): Exclude Filter Values by amaannawab923 · Pull Request #33054 · apache/superset

amaannawab923 · 2025-04-09T11:04:07Z

SUMMARY

This pr modifies the existing Inverse Selection feature , and makes it dynamic , Now if the Inverse Selection is enabled
it will show up a Select besides the filter which has 2 values , Is and Is not
where
IS: IN
IS NOT : NOT IN
and the user can switch between these .

It is backward compatible and will be true for Existing Native Filters with Inverse Selection

screen-capture.2.webm

It works in both Vertical and horizontal filter bar

Current Native Filter Control panel untouched with just inverse Selection Checkbox , which is being used to operate the is and is not Select for dynamic control

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

To test this functionality:
Edit a dashboard and open the native filters panel.
Click Add/Edit Filters and choose the dataset and column you want to filter on.
Under Filter Settings, scroll down and enable the checkbox:
✅ Inverse Selection
Save the filter.

Now in the dashboard view, you will see a new select dropdown besides the native filter with 2 options
is and is not where
IS: IN
IS NOT : NOT IN

Select a few values and have not in selected
Click Apply and verify that the charts exclude the selected values using the NOT IN logic.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

korbit-ai · 2025-04-09T11:04:10Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

github-actions

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

github-actions · 2025-04-10T14:00:51Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

geido · 2025-04-10T14:01:53Z

+    useEffect(() => {
+      const container = current?.children.item(0);
+      if (!container) return;
+
+      const childrenArray = Array.from(container.children);
+
+      const resizeObserver = new ResizeObserver(() => {
+        recalculateItemWidths();
+      });
+
+      childrenArray.forEach(child => resizeObserver.observe(child));
+
+      return () => {
+        childrenArray.forEach(child => resizeObserver.unobserve(child));
+        resizeObserver.disconnect();
+      };
+    }, [current, items.length]);
+
+    // callback to update item widths so that the useLayoutEffect runs whenever
+    // width of any of the child changes
+    const recalculateItemWidths = () => {
+      const container = current?.children.item(0);
+      if (container) {
+        const { children } = container;
+        const childrenArray = Array.from(children);
+
+        const currentWidths = childrenArray.map(child => child.getBoundingClientRect().width);
+
+        // Update state with new widths
+        setItemsWidth(currentWidths);
+      }
+    };
+


I am curious as of why all of this logic came into existence? What is this trying to solve?

Earlier the native filter width was constant at gridUnit * 41 so we needed to calculate the overflowing elements only when a native filter was added or removed... And the UseLayoutEffect hook doesnt run whenever an existing Native filter adds in or loses the Exclude filter values checkbox and also the item widths arent updated whenever we add in or remove the dynamic exclude checkbox

What happens when we remove this code ?

I have added 6 filters which looks perfectly fine because the overflowing are being calculated properly but what happens if i add exclude filters checkbox on 2 of those without these resize observers

The item widths arent updated , the overflowing elements arent recalculated and the 4th one overflows even when it should have gone inside the dropdown

When i add the resize observers back , the calculations re run and the 4th one is pushed inside the dropdown , which is expected

geido · 2025-04-10T14:04:13Z

      return {
        FilterControlContainer: HorizontalFilterControlContainer,
-        FormItem: HorizontalFormItem,
+        FormItem: (props: any) => <HorizontalFormItem {...props} showExcludeSelection={showExcludeSelection} />,


Is there any reasons to pass showExcludeSelection explicitly? It seems this isn't necessary for all other settings, what makes this special?

This particular setting is when the FormItem is part of horizontal list but not in overflowing dropdown and not in Vertical list

In this case the Width of this native filter is frozen to gridUnit * 41 px but we need space for the exclude filters checkbox as well so this prop is used as Styled Components props

geido · 2025-04-10T14:07:36Z

+            <span data-test="exclude-filter-label">
+              {filterBarOrientation === FilterBarOrientation.Horizontal ? t('Exclude Values')  : t('Exclude Filter Values')}
+            </span>
+            <Tooltip


I think the InfoTooltip could work here?

Tried using it .... But its a different svg altogether that doesnt match the shared designs ... The infotooltip svg has a single path whereas the one that is required by designs belongs to the chart control panel which has 2 paths and is able to take the correct color

…-preset

github-actions · 2025-04-15T11:29:48Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-04-15T11:41:28Z

@geido Ephemeral environment spinning up at http://34.212.99.121:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

github-actions · 2025-04-16T12:12:24Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-04-16T12:22:49Z

@geido Ephemeral environment spinning up at http://44.245.202.222:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

geido · 2025-04-16T13:00:15Z

I see this behavior where the item fits the horizontal bar. When I resize the window down it correctly goes inside "More filters" but when I expand it back again, it is not showing back in the bar outside of the "More filters" as it should. Is this happening on master too or was it introduced in this PR?

Also, you have some Cypress failures that seem related.

USA.Births.Names.1.mp4

amaannawab923 · 2025-04-16T17:05:33Z

I see this behavior where the item fits the horizontal bar. When I resize the window down it correctly goes inside "More filters" but when I expand it back again, it is not showing back in the bar outside of the "More filters" as it should. Is this happening on master too or was it introduced in this PR?

Also, you have some Cypress failures that seem related.

USA.Births.Names.1.mp4

@geido , I was able to fix the cypress test , it was due to including current in the dependancy array of useEffect which was causing a bit re renders and interrupting with cypress operations ... Removing that from the dependancy array fixed the cypress tests
Now the cypress tests are passing as seen below in the attatched ss ,

However , I was not able to reproduce the bug from video from the previous comment on the Ephemeral Environment , Can you please give info about the browser that you are using as seen in the video below
screen-capture (3).webm

And it shouldnt induce a bug like this as im only attatching resizeobservers on top of elements and updating item widths , However i will try testing on different browsers as well

github-actions · 2025-04-17T14:10:59Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-04-17T14:21:38Z

@geido Ephemeral environment spinning up at http://54.188.1.207:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

michael-s-molina

Removing the Request Changes status as I'll be out for the next days.

Thanks for the work @amaannawab923! @geido @kasiazjc I'll leave the final review and tests with you. Thanks for the discussions!

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com> (cherry picked from commit be1b8d6)

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>

nelsondrew and others added 2 commits April 9, 2025 16:13

Test fork commit

7a9f687

Exclude filter values basic functionality

008fc01

pull-request-size Bot added the size/M label Apr 9, 2025

amaannawab923 changed the title ~~Exclude Filfter Values~~ Exclude Filter Values Apr 9, 2025

github-actions Bot reviewed Apr 9, 2025

View reviewed changes

Styling for horizontal

937ef73

pull-request-size Bot added size/L and removed size/M labels Apr 9, 2025

correction

b6d9fa1

amaannawab923 force-pushed the task-preset branch from 937ef73 to b6d9fa1 Compare April 9, 2025 13:29

amaannawab923 added 7 commits April 9, 2025 19:10

Fixed select widths

504273e

Test cases for the exclude filter checkbox

7506e86

Checkbox styling

1a68398

Null check

cda90ab

Removing unused variable

f3ae5ba

Updating immer reducer with value of excludeFilter Values

aaa34e9

Running under use effect

75e543c

rusackas added the review:draft label Apr 9, 2025

updating item widths so that uselayout effect runs

35e70a4

geido changed the title ~~Exclude Filter Values~~ feat(Native Filters): Exclude Filter Values Apr 10, 2025

geido added the testenv-up label Apr 10, 2025

geido reviewed Apr 10, 2025

View reviewed changes

Comment thread superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx Outdated

geido reviewed Apr 10, 2025

View reviewed changes

amaannawab923 added 3 commits April 10, 2025 21:30

linting fixes and type fixes

063e4c4

Localisation

8b5a085

use Redux

dc5acc9

amaannawab923 marked this pull request as ready for review April 10, 2025 19:39

amaannawab923 requested a review from michael-s-molina as a code owner April 10, 2025 19:39

amaannawab923 added 4 commits April 15, 2025 01:54

Select correction

887ee1c

Inverse selection condition

5113d49

naming

9d55d04

Merge branch 'master' of https://github.com/apache/superset into task…

a8caa4c

…-preset

geido added testenv-up and removed testenv-up labels Apr 15, 2025

geido reviewed Apr 15, 2025

View reviewed changes

amaannawab923 added 2 commits April 15, 2025 18:26

Comments resolution

ca25451

Used space

3bd87a5

geido added testenv-up and removed testenv-up labels Apr 16, 2025

Cypress fix

2f8ca5f

geido added testenv-up and removed testenv-up labels Apr 17, 2025

michael-s-molina approved these changes Apr 17, 2025

View reviewed changes

geido approved these changes Apr 17, 2025

View reviewed changes

geido merged commit be1b8d6 into apache:master Apr 17, 2025

amaannawab923 mentioned this pull request May 1, 2025

fix: Exclude Filter Values #33271

Merged

9 tasks

michael-s-molina removed the review:draft label May 22, 2025

alexandrusoare pushed a commit to alexandrusoare/superset that referenced this pull request Jun 19, 2025

feat(Native Filters): Exclude Filter Values (apache#33054)

0eb8148

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com> (cherry picked from commit be1b8d6)

sadpandajoe removed the testenv-up label Jun 25, 2025

qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026

feat(Native Filters): Exclude Filter Values (apache#33054)

156e6fb

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>

Uh oh!

Conversation

amaannawab923 commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

korbit-ai Bot commented Apr 9, 2025

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 10, 2025

Uh oh!

Uh oh!

geido Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

amaannawab923 Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

geido Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

amaannawab923 Apr 10, 2025 • edited by geido Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

geido Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amaannawab923 Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 15, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 15, 2025

Uh oh!

github-actions Bot commented Apr 16, 2025

Uh oh!

github-actions Bot commented Apr 16, 2025

Uh oh!

geido commented Apr 16, 2025

Uh oh!

amaannawab923 commented Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 17, 2025

Uh oh!

github-actions Bot commented Apr 17, 2025

Uh oh!

michael-s-molina left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

amaannawab923 commented Apr 9, 2025 •

edited

Loading

amaannawab923 Apr 10, 2025 •

edited by geido

Loading

geido Apr 10, 2025 •

edited

Loading

amaannawab923 commented Apr 16, 2025 •

edited

Loading