Implementing Filters as Tabs in a Web Dashboard

We are trying to provide users with a strong filter mechanism on a Dashboard that collects visit data. It feels like we have arrived at a point where only a few pieces of the puzzle are missing and we don’t know how to place them.

The user should be able to:

  1. Define the filter parameters.
  2. Save them for future use along with a name.
  3. Apply them for one-time use to quickly check or search something without the need for saving them.
  4. Modify the parameters of an existing saved filter and save it again.
  5. Open tabs in the software itself and apply different filters (saved and unsaved) to easily switch from one type of data to another.
  6. Close tabs.


There is a live view tab that is static and can’t be modified or removed by the user. (Mentioned from now on as the default tab)

Solution: (So far) 1. A filter button on the dashboard that opens a side panel for filters that contains all the parameters and allows the user to save a filter, save as existing or just apply. Filter Panel View

  1. A Tab System that works like you’d expect. It allows the user to change the filter applied in a tab by clicking on a drop-down icon on the right side of the tab itself and selecting from the saved filters list. Drop-down implementation to select filters in tabs

  2. A plus button at the end of the tab list which works exactly like the drop-down above, prompting the user to select which filter view to apply on the new tab avoiding any empty states or empty tabs open.

Points we still can’t seem to get a grip on:

  1. How to make the experience of applying a filter to any open tab as seamless as possible? For example, if the user is on a tab and he clicks on the Filters button and changes some parameters and clicks Apply. Should we update the view to Unsaved View? Should we keep the name of the tab same with an asterisk to denote unsaved state with a reset button? Or should we open a new tab (potentially leading to a lot of unsaved tabs open?)

  2. If subsequently, he refreshes his page? Should the unsaved view disappear (being unsaved) or should we keep it in memory (potentially not really creating a need to use the ‘Save Filter’ feature)

  3. How to treat the default tab in all this? Should we disable all filtering options in the default tab to avoid any confusion leading to some loss in discoverability of filter features that are available as they will not show in the default tab or should we show filtering options on the default tab and open any changes made on the default tab in a new tab leading to a little bit of inconsistency (changing any filters from the default tab always opens a new tab while changing any filters from other tabs only makes changes to that specific tab and then implementing a fail safe or an error state if the user tries to make changes to the default tab with the maximum limit reached)

  4. Creating a responsive design around the solution.

It’ll be great to get insights and thought process on how to go about this problem.

String filtering – process hundreds to millions of filters

What would be the most efficient way (whether with algorithims, cpu(s), DBs & SQL, distributed computing, etc) to process many strings, say ~1000/minute, and filter each string over 100s to potentially millions of different filter parameters. A parameter can be a simple statement such as including or not including the word “cat” or including “dog” not “cat” and as “complicated” as including multiple boolean gates with added timestamp ranges (logs). Each individual filter that marks true would be collected and some operation would run for each.

Consumer-Producer problem / Pipes and Filters

In computer science, in operating systems, respectively their design and internals, there are: Producer-Consumer problem Readers-Writers Bounded Buffer

Software architecture in turn teaches the concept of Pipes and Filters.

Indication: You have a God class with 100+ functions. Each is called with one argument input (i.e. Message) and returns an output (i.e. transformed Message).

Process: You chop it up into 100 classes. Each is an independent Producer or Consumer, or both Producer-Consumer at the same time. Communication between them is via a Queue (publish subscribe).

How do you solve the remaining challenge, the challenge of load balancing? The Producer generates 100 msg/s and the Consumer accepts 50msg/s (assume compute bound, not I/O bound. More threads would compute more).

A slow consumer is detected by its queue growing, meaning it has messages piling up. You have a multi-core CPU, and for starters the consumer is a single thread.

Comment or answer how you would achieve an auto scale out of a slow consumer from one thread (compute bound) to multiple threads (or also scale down from multiple threads of the same consumer to one thread when the queue is not full enough to employ all consumer threads).

How to display long lists of nested filters?

On the web interface I’m working on, the user has to pick an item from a long list. They may or may not know what they are looking for.

In the database, this list is organised in a hierarchical way, but the list will be flat: all levels will be displayed side by side.

I’d like to help the user find what they want by including some filters which show that hierarchy.

Here is what I had in mind :

1) The first level of the hierarchy is displayed on the left. The user may choose one of the items to narrow down the list on the right.

enter image description here

2) Once the user has chosen a filter, they can go further by choosing the second level of filtering. On the left-hand side, they can ever remove the filter they have just applied or apply a new one which is one level deeper in the hierarchy. This could go on for a few more levels. enter image description here

The issues

The problem I have is that I found out that the list of the first level hierarchy can be very long. So it doesn’t seem right to display it on the side as filters as I did. I need some kind of drop-down or scrollable list and I really don’t like this idea.

Another issue I have is that I need a location to be selected by default.

What I’ve come up with so far is this below. I’m not happy with it though. As you can see there is a scrollable list and the first item is selected by default. Because it’s selected I’m showing a drop-down for the level below that selection.

Do you have any better idea? I feel like this is not user-friendly at all.


enter image description here

One document library but want to show different library filters on the same page

Hi Im currently using one document library, so as to avoid the same type of file being use in different Sharepoint libraries.

The issue that I have is that when I create a sub page, Im often asked to show more than one library on a page….. that being the content from the ‘master library’ but filtered based on a field.

All is well up to this point. The problem comes when I try to set the filter on a different criteria for each library list on the page:

1/ If I see to “set as default” all the library start up showing the same content.

2/ How can I set each web part document library list to store a particular default and keep this on start-up.

3/ I don’t want to create multiple document libraries if at all possible

How to set default focus on the Apply Filters button webpart on a Sharepoint site page?

We are using Shareoint 2016 on Prem. Any suggestion on how to set default focus on the Apply Filters button webpart on a Sharepoint site page? So pressing the Enter key will trigger the Apply Filters button. Our users just want to hit the Enter key instead of clicking on the Apply Filter button.