april 28, 2023
Using hyperlinks to pass filter values from one dashboard to another in Apache Superset.
Creating interactive analytics solutions is in wide demand in the field of data research. The formation of dashboards with sequential deepening into data sections is a well-known and logical mechanic for building an analytical system. In order for the solution to be intuitive and user-friendly, it is necessary to implement a transition between dashboards of different levels of analysis with the transfer of filter values.
The current implementation of Apache Superset has no such functionality, but it is possible to select filter values by URL. We learned about this from the source link: https://www.blef.fr/superset-filters-in-url/.
To solve the problem we need to:
— Create a URL to select filters;
— Wrap the URL in a hyperlink;
— Add filter values from the original dashboard to the URL. This can be done using Jinja templates.
Environment:
— Apache Superset 2.0
— Apache Kylin 4.0
An example of the implementation of the above technique:
1. Creating a link to select filters.
To test the solution, let’s create a test dashboard for which we will select filters and name it «test_url_input». Let’s add to it two filters (YEAR and MONTH) and a table which displays the selected filter values in order to check the effect of the link on the chart.
In general, the URL for selecting filters for our version of SuperSet looks like this:
http://<ip>:<port>/superset/dashboard/<DashbordNumber>/?native_filters=(<NATIVE_FILTER-id>:(__cache:(label:<value>,validateStatus:!f,value:!(<value>)),extraFormData:(filters:!((col:<column>,op:IN,val:!(<value>)))),filterState:(label:<value>,validateStatus:!f,value:!(<value>)),id: <NATIVE_FILTER-id>,ownState:()))
In the specified address we need to insert the parameters:
— <ip>:<port> — ip address and SuperSet port;
— <DashbordNumber> — the dashboard number in which you need to select the filters;
— <NATIVE_FILTER-id> — own filter identifier;
— <value> — the filter value;
— <column> — the name of the column selected for the filter.
To make the link functional it is necessary to set the following flags in the config.py configuration file beforehand:
FEATURE_FLAGS = {«DASHBOARD_FILTERS_EXPERIMENTAL»: True,
«DASHBOARD_NATIVE_FILTERS_SET»: True,
«DASHBOARD_NATIVE_FILTERS»: True,
«DASHBOARD_CROSS_FILTERS»: True,
«ENABLE_TEMPLATE_PROCESSING»: True}
The dashboard number can be found in the current URL of your dashboard, for ours it is 16:
You can get the filter ID when you edit the dashboard properties in the advanced part by looking at the JSON metadata (see figure below). For our filters:
— YEAR — NATIVE_FILTER-aHg1b2y66
— MONTH — NATIVE_FILTER-LIGOzuVHD.
Choose values for the filters different from those in the example above:
— YEAR — 2021
— MONTH — November.
We named the column when we created the filters:
— YEAR – YEAR_NAME
— MONTH — MONTH_NAME.
Let’s put everything in the final link (to select several filters, you need to specify them separated by commas), we get a construction like this:
http://<ip>:<port>/superset/dashboard/16/?native_filters=(NATIVE_FILTER-aHg1b2y66:(__cache:(label:2021,validateStatus:!f,value:!(2021)),extraFormData:(filters:!((col:YEAR_NAME,op:IN,val:!(2021)))),filterState:(label:2021,validateStatus:!f,value:!(2021)),id:NATIVE_FILTER-aHg1b2y66,ownState:()),NATIVE_FILTER-LIGOzuVHD:(__cache:(label:November,validateStatus:!f,value:!(November)),extraFormData:(filters:!((col:MONTH_NAME,op:IN,val:!(November)))),filterState:(label:November,validateStatus:!f,value:!(November)),id:NATIVE_FILTER-LIGOzuVHD,ownState:()))
The result of the link:
Wrap the resulting URL in a hyperlink.
Let’s create a second dashboard from which we will follow the link, let’s call it «test_url_output». It will contain two similar filters (YEAR and MONTH) and a table with a hyperlink to the «test_url_input» dashboard
Wrap the resulting URL in a hyperlink.
Let’s create a second dashboard from which we will follow the link, let’s call it «test_url_output». It will contain two similar filters (YEAR and MONTH) and a table with a hyperlink to the «test_url_input» dashboard
We won’t dwell on creating a hyperlink in detail, as we described this mechanics in a previous article. Let’s take the final URL from step 1 and paste it into a table cell, the query for implementation looks like this:
select ‘<p>Link to <a href = «http://<ip>:<port>/superset/dashboard/16/?native_filters=(NATIVE_FILTER-aHg1b2y66:(__cache:(label:2021,validateStatus:!f,value:!(2021)),extraFormData:(filters:!((col:YEAR_NAME,op:IN,val:!(2021)))),filterState:(label:2021,validateStatus:!f,value:!(2021)),id:NATIVE_FILTER-aHg1b2y66,ownState:()),NATIVE_FILTER-LIGOzuVHD:(__cache:(label:November,validateStatus:!f,value:!(November)),extraFormData:(filters:!((col:MONTH_NAME,op:IN,val:!(November)))),filterState:(label:November,validateStatus:!f,value:!(November)),id:NATIVE_FILTER-LIGOzuVHD,ownState:()))» >input</a>.</p>’ as t
When you click on «input» in the dashboard table «test_url_output», we should move to the dashboard «test_url_input» with static filters 2021/November.
Let’s add the Jinja templates (see the description in the previous articles on the above link) to the «test_url_input» dashboard table instead of the previously selected values (2021/November) to pass the selected filters.
In Apache Kylin, you can use «||» or «+» to concatenate strings. In our example, «+» is used, but it is better to use «||» when working with numbers. The final query has the following form:
select
‘<p> Cсылка на <a href = «http:// <ip>:<port>/superset/dashboard/16/?native_filters=(NATIVE_FILTER-aHg1b2y66:(__cache:(label:’ + ‘{{ filter_values(‘YEAR_NAME’, )[0] }}’ + ‘,validateStatus:!f,value:!(‘ + ‘{{ filter_values(‘YEAR_NAME’, )[0] }}’ + ‘)),extraFormData:(filters:!((col:YEAR_NAME,op:IN,val:!(‘ + ‘{{ filter_values(‘YEAR_NAME’, )[0] }}’ + ‘)))),filterState:(label:’ + ‘{{ filter_values(‘YEAR_NAME’, )[0] }}’ + ‘,validateStatus:!f,value:!(‘ + ‘{{ filter_values(‘YEAR_NAME’, )[0] }}’ + ‘)),id:NATIVE_FILTER-aHg1b2y66,ownState:()),NATIVE_FILTER-LIGOzuVHD:(__cache:(label:’ + ‘{{ filter_values(‘MONTH_NAME’, )[0] }}’ + ‘,validateStatus:!f,value:!(‘ + ‘{{ filter_values(‘MONTH_NAME’, )[0] }}’ + ‘)),extraFormData:(filters:!((col:MONTH_NAME,op:IN,val:!(‘ + ‘{{ filter_values(‘MONTH_NAME’, )[0] }}’ + ‘)))),filterState:(label:’ + ‘{{ filter_values(‘MONTH_NAME’, )[0] }}’ + ‘,validateStatus:!f,value:!(‘ + ‘{{ filter_values(‘MONTH_NAME’, )[0] }}’ + ‘)),id:NATIVE_FILTER-LIGOzuVHD,ownState:()))»>input</a>.</p>’ as t
