[SIP-116] Simplifying time period filtering for users

[TechAuditBI]

[SIP-116] Proposal for simplifying time period filtering for users

Motivation

Current time period filter is overly complicated and counterintuitive for users to work with. Yes, it does provide a lot of functionality and flexibility but it is not commonly used anyways.

Proposed Change

Proposed change is to create an alternative time filter.

Current view of a proposed filter is something like a commonly used calendar date picker.

Airbnb's picker for example.

The new date picker should replicate a currently existing functionality of fast navigation through months and years.

Open question is how to implement a time picker in a way that UI/UX stays simple and intuitive but functional at the same time. Current "scroll columns" design is good for touchscreens but is an absolute nightmare to use on a desktop.

A couple of examples of solutions found online:
https://www.cssscript.com/date-range-picker-predefined-ranges/

New or Changed Public Interfaces

New time period native filter.
Otherwise unknown yet.

New dependencies

Non known yet. Probably some UI lib.

Migration Plan and Compatibility

None expected

Rejected Alternatives

A time slider filter which would allow users to select time period for filtering simply by dragging a couple of markers across a slider.

Power BI slider for reference

Was rejected due to lack of visual information for user. But still could be achieved by improving "Number range" native filter.

[TechAuditBI]

Well. Actually after looking at this SIP afterwards it looks like SIP is not actually needed here.

[michael-s-molina]

Hi @TechAuditBI. Could you update the SIP's content with the results of our SIP Office hours discussion?

[TechAuditBI]

@michael-s-molina Sorry for this taking so long. Quite a busy week. I'll get to it tomorrow.

[webobite]

Hi @michael-s-molina and team

One of the time period widget, I was very impressed with the simple design of this widget from Toggle track app, It has all the different section for different time period as well as week nos also attached in the UI,
I have come across many usecase during development of saas platform where user also wanted to know week numbers for their analysing the insights

Do let me know your view on this, if we can take some inspiration from here too :-)

[TechAuditBI]

@webobite Wow! This looks quite impressive tbh. I think that this kind of a widget would look very nice in superset. The only thing missing here is a time selection but we'll figure smth out.

[webobite]

Thanks @TechAuditBI
Ya I noticed that custom date range is missing, Should I explore more on this widget ?

[TechAuditBI]

@webobite Sorry, missed your reply. If you can research more that would be awsome!

[webobite]

Ok sure,
Will do some research and share the same over this thread !!

Thanks

[webobite]

Hi @TechAuditBI,

Are we planning to boundary our self with Ant design lib calendar or we can explore other option and then try to fit the same in the UI design framework of superset ?

[webobite]

Hi @TechAuditBI and team,

As per my understanding on the Time period filter :- (here is small breakdown on the understanding and concept)

---

idea 1

I would be preferring this UI with much more compact and very low learning curve for the users of dashboard which is self explanatory

src : Dribble Link

Note: Year selection with weekly segregation

Note: Monthly selection with help of tab switch

idea 2

Here I could not find relevant UI UX design for the same, some excalidraw sketch for the same, It will save some space and quick access to the User for the Chart UI

I am open for the feedback and new suggestion on the same.

:-)
thanks & regards
Subham (@webobite )

[TechAuditBI]

@supersetbot orglabel

[TechAuditBI]

@webobite Thanks a lot for a detailed analysis!
I think we should definetely give users an ability to simply type in their time period. Maybe it can be done right in the box from idea 1.
Also we are still missing a time picker.
Sorry for slow responses...

[rusackas]

If anyone wants to move forward with this (and it does indeed seem worthy of a SIP based on the above discussion), then please start a [DISCUSS] thread on the dev@ mailing list.

[luutomas]

@TechAuditBI @rusackas would not this component from AntDesign resolve it:

source: https://ant.design/components/date-picker

This is the date picker that I feel that would really allow for the end-users to use easily and not have so much clicking fatigue. Given that it is also part of AntDesign, which is recommended to use.

[yousoph]

We've been doing some explorations on our end as well - here are some in progress mock ups. There are a few things that need to be adjusted, but wanted to to share to give an idea of what we were thinking:

1. A simplified date picker when first opening the time filters. User could select the date range and there are a few quick options as well.
   

2. All the current Superset time filter options will be kept in the other two tabs, so any users using the current filter options will still be able to use them.
   
   

3. Removing the "Ok" button after selecting a date on the calendar to reduce friction when selecting dates (and reduce the need to re-select dates if user clicks out without clicking "Ok")

[rusackas]

Overall I like where the design is going, but the "Relative" tab seems to have fewer options. Current/Previous/Last all have their nuances... maybe we can do something like a split button for those, plus split/radio buttons for Day/Week/Month/Quarter/Year?

[michael-s-molina]

We always talk about how customizing Ant Design components has a maintenance cost and that we should try to adhere to the library as much as possible to easily upgrade and get the new shiny things from new versions. @luutomas shared the Datepicker component which has many of the features present in these mockups. My suggestion would be to try to use the component as much as possible and augment it when necessary. Tagging @geido here as we talked many times about this and is currently working on the Ant Design upgrade.

[geido]

Agreed with @michael-s-molina here. Let's stick to what Ant Design provides. For reference #29268

[rscarborough1996]

The number one complaint that I get on my sites, by far, is that the time filter is too complicated. I would love to see a more user friendly version!

[rusackas]

@yousoph if there are any new designs addressing the above comments (i.e. AntD components), or this is ready for a Discuss thread, let's move it forward :D

[luutomas]

@michael-s-molina @geido we are currently working on just implementing the new calendar as a part of the new option in the section. I think that a lot would be resolved if we could use antdesign 5. However the current version that is implemented in Superset is 4. Is there anyway that we could tackle that?

[geido]

@michael-s-molina @geido we are currently working on just implementing the new calendar as a part of the new option in the section. I think that a lot would be resolved if we could use antdesign 5. However the current version that is implemented in Superset is 4. Is there anyway that we could tackle that?

@luutomas feel free to get in touch on the Apache Superset Slack. I am Diego Pucci in there. We are currently upgrading Antd and if you want to support that process, now it is a good time!

[rusackas]

@kasiazjc curious your input here, and if you want to carry this SIP through the process, or open an alternative/consolidated one with what you've been designing.

[treygilliland]

Agreed with @rscarborough1996. Our users just want a simple date picker and their eyes glaze over when they see the current implementation and choosing between Basic/Advanced/Custom and trying to pick a date/time

[JanZuska]

I’ve been working closely with @luutomas and we’ve developed a custom time period filtering solution for our Superset instance, which we’ve now successfully implemented. This custom solution aims to simplify the user experience for date filtering by addressing some of the challenges highlighted in this SIP.

The date component is currently based on Ant Design v4. While it’s fully functional and performing well, there are still some visual refinements needed to achieve the ideal look and feel. We’re continuing to iterate on this and appreciate any feedback from those with similar requirements.

[ssidorenko]

I’ve been working closely with @luutomas and we’ve developed a custom time period filtering solution for our Superset instance, which we’ve now successfully implemented. This custom solution aims to simplify the user experience for date filtering by addressing some of the challenges highlighted in this SIP.

The date component is currently based on Ant Design v4. While it’s fully functional and performing well, there are still some visual refinements needed to achieve the ideal look and feel. We’re continuing to iterate on this and appreciate any feedback from those with similar requirements.

Love this, is it available somewhere?

[JanZuska]

@ssidorenko glad you like it! It’s available as a Docker image at janzuska/superset-vilgain:4.0.2f, but it’s built only for Superset version 4.0.2 yet and works pretty well, though there are a few small bugs with preset values and it’s not 100% done yet.

[ssidorenko]

@ssidorenko glad you like it! It’s available as a Docker image at janzuska/superset-vilgain:4.0.2f, but it’s built only for Superset version 4.0.2 yet and works pretty well, though there are a few small bugs with preset values and it’s not 100% done yet.

Cool! I tried cherry picking your commits on top of the 4.1 branch but the docker build then fails because of js linting issues. Do you plan on upgrading to 4.1 any time soon? I'll maybe try again this week-end to make the branch work.

[sailibakalkar]

@ssidorenko glad you like it! It’s available as a Docker image at janzuska/superset-vilgain:4.0.2f, but it’s built only for Superset version 4.0.2 yet and works pretty well, though there are a few small bugs with preset values and it’s not 100% done yet.

Hey what would be the exact steps to try it in the 4.0.2 version

[luutomas]

We would love for this to make into the official version and would love to have some guidance from the @rusackas if it would be possible to push it into it.

[JanZuska]

Cool! I tried cherry picking your commits on top of the 4.1 branch but the docker build then fails because of js linting issues. Do you plan on upgrading to 4.1 any time soon? I'll maybe try again this week-end to make the branch work.

@ssidorenko Thanks for trying it out! Regarding the issue you mentioned, have you checked if you allocated enough memory for the build? From my experience, it requires quite a bit of memory. My current setup is at 9GB, though I can't recall if the minimum was 8GB or 12GB. Additionally, you might want to try building the image with Docker BuildKit enabled (DOCKER_BUILDKIT=1 docker build), it often resolves some of the build issues. Let me know how it goes!

[JanZuska]

Hey what would be the exact steps to try it in the 4.0.2 version

@sailibakalkar You can try it out on Superset 4.0.2 by following these steps:

Pull the Docker image:
docker pull janzuska/superset-vilgain:4.0.2f

Run the Docker container: You can start a container with the following command:
docker run -d -p 8088:8088 --name superset janzuska/superset-vilgain:4.0.2f

This will start the Superset instance and make it available on http://localhost:8088.

And then follow the common configuration steps, or you can follow this guide, but in Dockerfile instead of FROM apache/superset:latest you have to put FROM janzuska/superset:4.0.2f

If you need more help or want to customize the container (e.g., for specific configurations), feel free to ask!

[rusackas]

We would love for this to make into the official version and would love to have some guidance from the @rusackas if it would be possible to push it into it.

Well, there are a few steps:

Perhaps most importantly, this SIP hasn't gone through the official process of being brought up for discussion and voting on the official ASF Superset Dev mailing list. Let me know if anyone wants more details on that (here, or in a DM on Slack).

Second, you would want to open against master here on the repo. If you do that, we can use the PR as a point of discussion on this thread, as well as spin up an ephemeral environment on the PR for anyone/everyone to try out.

Hope that helps!