New Search Bar

[Richargh]

Feature Request

Let's incrementally change our UI. Next stop, move the search bar next of the metrics, so it is immediately obvious to our users where to search for stuff. Next to the search field are three buttons. They behave like tabs and allow us to switch between tree view, hidden items and exclude items. The search bar can also be opened independantly from the metrics.

The search + scenario + metrics bar might become a bit wide. That's ok. But please also add a helpful little ... or something to the right side of the bar if some elements are hidden.

Please change the symbol in the hide and exclude list that you use to remove something from that list. The users think that the trash can symbol completely removes the excluded or hidden buildings from the cc.json. What if we instead present the user with a regular eye icon on the left side of the hidden/excluded entry? On the left is normally the hide or exclude symbol but that is redundant in the hide/exclude list anyway.

[alexhunziker]

The 3 tabs will then have the following content, did I get that correct?

The 3-dot dropdown menu would then be placed next to the search bar, wouldn't it?

[Richargh]

The 3 tabs will then have the following content, did I get that correct?

Yes. The buttons have the same behavior as our single/multi/delta buttons. With one addition. The hidden and exclude counter needs to be there somewhere as well. And in the future we might expand this to also include something like "groupings of selected buildings". We have no story for that, it's just an idea.

• Something I just noticed while looking at your screenshots. It's super convenient to have the search field at the top. But the search field does not apply to all three tabs... It's only useful for the treeview really. It's strange to have it above all tabs. Interestingly the search bar in IntelliJ and MacOs functions differently but I have no idea what to do with that information.

The 3-dot dropdown menu would then be placed next to the search bar, wouldn't it?

Yes.

[alexhunziker]

How about we put the 3 buttons to the left & place an input field next to them, similarly to the fileBar, the behaviour of the bar would change according to what button is selected? Something like this:

• Tree View: Search
• Hidden Patterns: A field to enter new patterns to hide
• Excluded Patterns: A field to enter new patterns to exclude

[alschmut]

How about we put the 3 buttons to the left & place an input field next to them

Yes, thats sounds good 👍 Lets also do the triple-selector again?

similarly to the fileBar, the behaviour of the bar would change according to what button is selected?

I think the search bar always fits. Following use cases:

• Tree View Tab: User searches nodes -> TreeView filters and CodeMap highlights searched nodes
• Hidden Patterns Tab: User searches nodes -> CodeMap adapts (as it were hidden) and button to add to blacklist appears
• Excluded Patterns Tab: User searches nodes -> CodeMap adapts (as it were excluded) and button to add to blacklist appears

EDIT: The important point here is, that the code map adapts when typing into the input-field

[alschmut]

What I just realised is, the search icon, is quite important and it should be easy recognizable for the user. Just as an idea, how about replacing the TreeView icon with the search icon? Is it too hidden inside the buttons then?

[Richargh]

• Tree View: Search + three dots
• Hidden Patterns: A field to enter new patterns to hide + three dots turn to button + hide on enter
• Excluded Patterns: A field to enter new patterns to exclude + three dots turn to button + exclude on enter

Isn't the search icon easily recognizable because it's an input field with a "search lens" icon? When clicking into this input field the view from the triple-selector is opened: treeview, hidden or excluded. When the user clicks on the treeview icon the treeview is also openend. Seems somewhat redundant. So suppose we remove the treeview icon and only display the search lens: is it still obvious to the user how to open the treeview?

[alschmut]

When the user clicks on the treeview icon the treeview is also openend. Seems somewhat redundant. So suppose we remove the treeview icon and only display the search lens: is it still obvious to the user how to open the treeview?

Thats what I asked as well ;) I think we'll need to try and take a visual look..

[Richargh]

I just checked the user evaluation results that we received via mail on April 1st and added a couple things to the issue.

[alexhunziker]

[Richargh]

@alexhunziker I just had an idea and I am not sure if it was suggested in the weekly 2h ago :)

What if we make the search bar into a search field and place it below the distribution bar? Then it becomes just this free-floating search field with our three tree/exclude/hide icons in the top left corner. Then it won't overlay any metrics or distributions when you open it.