Solvedsuperset Filters as a native dashboard (v2) construct

Making a list of ideas around how dashboard filters should work in dashboard v2.

Scope awareness. The filter affect only the charts and elements in its scope. Existing scopes should include:

  • global (above tab-line)
  • tab
  • section
  • more granular?

Maybe hovering the filter highlights the charts affected by the filter.

Per-filter configuration:

  • type: select - radio - ? (radio probably not critical / MVP)
  • multiple or single select
  • sort order (based on metric / reverse / alphabetical)
  • limit?
  • show background bar (histogram)
  • cascading-options (wether higher level filter should affect the values in the dropdown), maybe a whitelist blacklist approach?

Making it clear on charts that are filtered, maybe a filter icon that highlight which control are affecting the chart when hovered?

More input is welcomed.

38 Answers

✔️Accepted Answer

Due to our changing priorities, we have been unable to complete the dashboard level filters feature. You can find our in progress work on my feature branch (https://github.com/jaylindquist/incubator-superset/tree/feature/native-filter) and I can create a PR if you are interested in keeping what we've been able to start.

Completed tasks:

  • Add a drag-and-drop filters container at the top of dashboards
  • Add filters to the filter container (filters are added, but configuration is hard coded)
  • Remove filters from container
  • Remove filters container from dashboard
  • Update Dashboard short links to create preselect_filters parameter without chart IDs. URL short links are now generated as { "column1": ["val1"], "column2": ["val2", "val3"] }
  • Update preselect_filters parameter to support filters without chart IDs while being backwards compatible. preselect_filters now supports the above format as well as the existing format { "chartId1": { "column1": ["val1"]}, "chartId2": { "column2": ["val2", "val3"]}}

The following shows adding filters to an existing dashboard:
superset-filters

There is still work to be done:

  • Creating a modal to add new filters
  • Manage date filters for each datasource
  • Global filter configuration (for example, instant filtering)
  • Saving selected filter options when the dashboard is saved

If you would like me to create a PR for this work, let me know. I apologize for not being able to complete the feature, but other tasks took priority for us.

Other Answers:

@mistercrunch

We would like to add a proposal for the native dashboard filter as outlined in the first post. We are looking for feedback and approval before implementing.

Dashboard changes

  • Global filters will be the focus of the MVP
    • Tab and section filters would work similarly but will not be included in the initial implementation. The initial focus will be to replace the existing Filter Box chart with a native, global dashboard filter
  • The filter component is drag & drop from the insert panel, similar to tabs
    • Global filters go above dashboard-level tabs and below the dashboard title (see images below for an example)
    • Tab filters go below tabs
    • Section filters go at the top of the section
  • New filters can be added when the dashboard is in "Edit Mode" via a button that appears after the list of filters
    • Individual filters are added based on datasource / column name
    • Clicking the New Filter button will open a modal with "Data Source" and "Column" options to select the filter column
    • If the column selected is a time column, the 'Since' / 'Until' filters will be added
  • Filter controls for the dashboard are initially collapsed and can be expanded / collapsed as needed (see images below for an example)
  • Additional options such as timegrain and instant filtering are added via the configuration cog

Chart changes

  • Filter box will be removed as a chart type
  • Filter boxes that are currently included in dashboards will need to be removed from the dashboard and options will be added as global filter options
  • All existing filter box charts are deleted (not sure what else can be done with them since they can't be added to dashboards anymore)

URL changes

  • The preselect_filters query parameter can still be used to fill in filters via a link. It is currently a map which includes the Filter Box ID. The format will need to change into a map of column name to arrays instead
    • Old format
    {
        "414": {
            "column1": [
                "value1",
                "value2"
            ]
        },
        "12": {
            "column2": [
                "value3"
            ]
        }
    }
    • New format
    {
      "column1": [
          "value1",
           "value2"
      ],
      "column2": [
          "value3"
      ]
    }
    • This change can be made backwards compatible by collecting the filters in the old format, ignoring the ID, and applying the filter values based on the column name

Dashboard mockups

Collapsed filters

global filter closed

Opened filters

global filter open

New filter dialog

filters opened edit edit filter

On-the-fly grouping. I often find that my filters affect how I want to group my charts. If, for instance I filter by region I might want to se a chart grouped by product, but if I then change my filter to product, I want to see that same chart grouped by region. Etc. So having a groupby element which can be made to affect specific charts would be very valuable.

I collected following feature requests from open source community, and from Airbnb usage:

  • Filter component or filter_box from explore view? Given @mistercrunch comments above, I assume existed filter_box viz type will keep working as it, and will introduce new filter component lived inside dashboard. So there will be two types of filters working together.

  • Scoped filter

    • Filter should be visible (scroll up/down is ok, but not extra tab switch) when it is applicable to any charts.
    • Top level filters:
      Filter is placed in dashboard without tab, or at top section of dashboard with row-level tabs. So that filters are always visible in the dashboard.
      Top level filters will apply to all charts in the dashboard.
    • Tab level filters:
      Tab level filters are placed inside a Tab component. As long as the tab component is visible, filters will apply to all charts in the same tab.
  • Easy UI for user to see which charts are affected by which filter, and easy add immune from the filter.

  • Easy UI to group multiple filters, and allow user define cascade filters.
    Current filters are filter_box that generated from explore view, so each of filter_box (can have multiple dropdowns) contains one slice of constraint, whereas dashboard may have multiple filter_boxes to add many constrains. If this is the case, i see our users always update one filter_box in dashboard, apply it, wait all charts in dashboard finished loading, then update another filter_box, wait another round of loading...It is very frustrating in daily use.

    So I am thinking dashboard should allow user group a few filter_boxes(and native filter components) together, in which user can update each filter but don't trigger dashboard level loading events. In the group user can also make cascade filters (where one filter react on other filters's selected values). And in the end user can apply all selected values altogether in 1 dashboard level load. This will greatly improve the dashboard filters usability.

  • After user update filter and trigger the dashboard level refresh, can we have UI indicator showing filter is applying or done? Some of our dashboard is crazy big so it's hard to scroll back and forward to check if every chart is ready 😓

  • Keep filters state in URL parameter [#5374]
    If user applied filter in dashboard, can we update dashboard's url parameter (or anywhere as a state of history), like url for explore view? So that when user refresh dashboard, the previously applied filters are still be memorized.
    Dashboard should not automatically save filter parameter unless user saved them as default_filter metadata.

  • Coordinate Visual Correlation feature. Discussed in another thread, @JamshedRahman want to introduce a new feature that allow one chart to publish events to dashboard level, and all other charts in the dashboard that are listening to the events can change/react accordingly. These 2 features will implemented independently, but i just feel there might be some common logic to share.

These are all proposals. I would like to leave @xtinec who implements this feature to decide final list. Thank you!!

Related Issues:

117
superset Was unable to import superset Error: cannot import name '_maybe_box_datetimelike'
tx @Uneasy-listening !!! This worked for me: [only necessary if you have already installed pandas (p...
20
superset Error logging in to superset (sqlalchemy.exc.ProgrammingError)
I share the following in hopes that my struggle will help someone else After battling with this issu...
14
superset How to use “email report”?
@sandy-ha please run superset init again in terminal because FAB(FlaskAppbuilder) will initialize re...
11
superset Filters as a native dashboard (v2) construct
Due to our changing priorities we have been unable to complete the dashboard level filters feature ...
11
superset How to have multiple filters on dashboard affecting different charts?
Oh you're right There's currently no way to express that We could add a feature that would introduce...
4
superset PyArrow broke the build on ARM platform [Regression]
I have the exact same issue on Windows 10 64-bit pip install apache-superset==0.35.1 on Raspbian (Ra...
3
superset docker-compose failed to build
Setup/Environment: Windows 10 + Docker Desktop + ~ 6 GB of RAM given to Docker (can be configured in...
328
amplify js Uncaught ReferenceError: global is not defined in latest Angular 6 RC
Just for reference I have passed through this issue with adding these lines on my index.html head: ...
162
react native firebase 🔥(Android) Program type already present: io.invertase.firebase.BuildConfig
I think I found my ultimate error here In my package.json file I had at some point earlier ...
122
amplify cli Many-To-Many
You can implement many to many yourself using two 1-M @connections and a joining @model ...
114
amplify js fetch is not defined
nodejs fix: I'm using amazon-cognito-auth-js with my express app and I'm following the case 1 exampl...
106
amplify js Error: No credentials, applicationId or region
I had the same issue (running on the latest Amplify v3) and worked around it by changing the followi...
104
amplify js Is it possible to get cognito user attributes in Lambda/cloud logic ?
I have been looking around for a while I feel the answers here didn't really answer the problem ...
104
react native firebase 🔥 Version mismatch causing app termination
Looks like GoogleAppMeasurement gets imported as a dependency with version 5.3.0 A simple addition t...
100
react native firebase onNotificationOpened not working on Android (background/foreground)
Solved the issue only on background using @ZardozSpeaks approach Under my SplashActivity.java ...
95
grafana HTTP Error Bad Gateway when using prometheus
I still face this error after explicitly writing the URL (in my case it was http://localhost:9090) ...
83
amplify cli aws-exports.js is not generated
Even after the third read I find it utterly confusing and I have usability issues too ...
83
amplify js Auth Error: Amplify has not been configured correctly using Nuxt.js
I 'm having the same issue in aws-amplify: ^3.0.11 I found out Auth module didn't load configs of aw...
82
react native firebase Firebase dependency updates are required to fix gradle v4+ builds
@DeepaSriramRR as a temporal workaround you can disable version check of the Google plugin At the en...
82
react native firebase AndroidX support
Play Services just shipped AndroidX breaking changes - if you must upgrade your android Firebase SDK...
80
react native firebase RNFirebase core module was not found natively on ios
I will just leave it here in case someone comes and it's still struggling with this ...
70
amplify js How to refresh Cognito tokens
It will refresh if you call the SDK for it e.g. with Auth.currentSession() and it finds an expired t...
64
react native firebase [📚] AdMob - use @invertase/react-native-google-ads
Just FYI we're getting close here AdMob documentation availability Hi there! I've noticed that AdMob...
63
react native firebase [SOLVED with v2.1.1] Undefined symbols for architecture x86_6: _OBJC_CLASS_$_RNFirebaseDatabaseReference
Okay.. if anybody comes accross this magic error try this It solved the problem (for now) Close Xcod...
60
react native firebase [android] No Firebase app '[DEFAULT]' has been created - call firebase.initializeApp(), js engine: hermes
I spent a lot of hours for found who was the problem most setup issues such as default app has not b...
57
react native firebase iOS: Firebase.h not found
Can you first close xcode then delete the xcworkspace & Podfile.lock files in the ios directory then...
56
amplify cli @auth public/private IAM roles and other Providers
ok my bad was actually quite easy just do : and add a auth provider in my case was IAM ...
56
react native firebase Android: JDK 10 not supported for v4.1.0
+1 4.1.0 broke builds for Java10 As a temporary workaround on MacOS Issue Upon upgrading to v4.1.0 a...
55
amplify js Sign up multiple different accounts with the same email
The pre-signup trigger can be used to prevent the new signup from being created when there's an exis...
53
ClickHouse DB::Exception: Too many parts (600). Merges are processing significantly slower than inserts
Each insert create a folder in /var/lib/clickhouse/.../table_name/ Inside that folder there are 2 fi...
52
amplify js Amplify Console 200 (Rewrite) fails on SPA React (Router) Application
This worked for me source: </^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/> target address:...
52
react native firebase Notification not showing up in foreground after triggering displayNotification() (Android)
It seems as if the requirements for displaying a foreground notification are stricter on Android ...
51
amplify js aws-amplify 0.3.0: "Uncaught ReferenceError: require is not defined" when packaged with webpack
Ok I found something that helped Graphql-js uses .mjs as file extension which caused issues with the...
49
react native firebase Unable to instantiate service io.invertase.firebase.messaging.MessagingService: java.lang.ClassNotFoundException
My problem was solved by removing these lines from my AndroidManifest.xml Issue I've updated both RN...
48
react native firebase pod install fails after npm install @react-native-firebase/firestore
I tried the above solutions and didn't work for me I solved the issue by deleting the ./ios/Podfile....
46
react native firebase cannot find symbol BuildConfig.APPLICATION_ID
@mikehardy seems like it should be enough to rename APPLICATION_ID to LIBRARY_PACKAGE_NAME in /app/a...
45
amplify js Identity providers authentication against User Pools WITHOUT hosted UI
@martimarkov we find a solution for you to use the customized button to do that ...
45
react native firebase Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.notifications()
The solution for this is to add those to app/build.gradle : implementation 'com.google.firebase:fire...
45
react native firebase IOS unable to receive notification
It appears as if RNFirebase documentation is missing a few required steps Issue: Not able to receive...
44
amplify cli jest-haste-map: Haste module naming collision: -> namefunction <-
For React Native 0.6x configure the blacklist in metro.config.js instead of rn-cli.config.js as per ...
44
amplify js Getting "no current user" after successful login to Cognito UserPool
I had the same problem but for me removing the cookie storage configuration in aws-exports.js solved...
43
amplify js How to add user to Group
👆 Also we have achieved this using the Post Confirmation Lambda trigger Very simplified from our im...
43
react native firebase RNFirebaseNotifications.h file not found
I think in the header search paths it should be set to recursive for $(SRCROOT)/../node_modules/reac...
39
amplify js RFC: Amplify Library Modularization and Bundle Size Improvement
Modularization is available in Preview Hi all With us launching Modularization in the coming weeks ...
39
react native firebase Multiple dex files define Lcom/google/firebase/iid/zzb;
I got the same conflict with react-native-device-info and solved it with : After adding this package...
38
react native firebase Document how to mock react-native-firebase for jest
For now I've got this going on and it works for me (you may need to mock more or fewer modules or mo...
37
nativescript plugin firebase new iOS error on google auth - presenting view controller must be set
Google Auth was previously working on iOS but now I am receiving this error with no changes to codeb...
37
react native firebase Support Firebase SDK v5.0.0+
There are a number of breaking changed in v5 of the iOS pods: (https://firebase.google.com/support/r...