Update placement of filter chips & remove show all filters button

[danicahelb]

BUG: If i heavily subset the data the filter chips cover the variable label & definition and there is no way for me to read it

if i keep adding filters, chips appear until there is no more room above the data for the selected variable. If i try to add an additional filter, the data is filtered but no chip appears. in the screenshot below, notice that I have filtered on plasmodium species for last malaria diagnosis but there is no corresponding chip

[danicahelb]

can we remove the chips and make the show all filters button more prominent? the issue with the show all filters button currently is that users will tend to scroll the entity diagram section (and the filter button) out of view when they are making visualizations, so they have more space on their screen.

show all filters IS visible on every tab, does NOT have the bug of covering up the variable label & definition, does NOT have the bug of not showing a chip for every applied filter when the data is heavily subsetted, and clicking on the chip easily brings you back to that variable on the B&S tab for easy editing

[dmfalke]

Another option would be to have a "Show more" button to expand this view (the stuff below it on the page would get pushed down), or to open the modal.

Yet another option would be to have the chips scrollable (left-right), with buttons to scroll left and right. This is probably less idea.

I wonder if we would want to move the filter chips to be above the tabs, just below the entity diagram, and get rid of the "Show all filters" button...?

[danicahelb]

@adnauseum had a related issue with adding filter chips to the header for the stand-alone map. currently, when many filters have been applied, only the first ~few are visible and the rest can only be seen upon scrolling.

In 2/15 styling meeting, we discussed possibly using the "Show all filters" button in the SAM header instead of individual chips for each filter. This decision depends on what the purpose of the chips in the header is... thoughts include:

(i) so folks know what filters had been applied in a screenshot image (if so, individual chips are preferred)

• but chips only let you know what variables were filtered on, not the values that were selected
• user can also easily crop out the header when taking a screenshot

(ii) so folks would know what filters had been applied when the SAM is shared to a new user (if so, the show all filters button is fine)

@bobular FYI... this is in ticket https://github.com/VEuPathDB/web-eda/issues/1640

[danicahelb]

See this slack thread for a related issue to consider: https://epvb.slack.com/archives/C0132PM1MT5/p1675278145919009

Users definitely want to see their filters front-and-center when visualizing, but chips are only on the B&S tab. it's not obvious that they can use the "Show all filters" button to view the applied filters. The issue is that the "show all filters" button is often off screen (too high)

[dmfalke]

See related comment https://github.com/VEuPathDB/web-eda/issues/1640

[danicahelb]

Discussed in 2/27/2023 and 3/10/2023 EDA UX meetings.

Decision: we will align how filter chips are handled between EDA sites and the stand-alone map (For the SAM, we will essentially implement the same solution, but chips will appear in the header)

• add a STICKY container for chips ABOVE the tabs but below the dataset diagram, which will make the filter chips accessible from all tab views
• If a user applies a large number of filters, extra line(s) would be added to the container dedicated for the filter chips and the chips would wrap. A chip representing each filter applied will always be visible
• The entire container dedicated to the filter chips will be sticky, and should remain visible above the tabs as the user scrolls down the page
• Left justify the container for the chips (it should run the entire length of the container for the dataset diagram).
• As filters are applied to the dataset, new chips are always added on the upper left of this list of chips
• We may need a header to the left of the chips, such as: Filters applied:
• We will NOT limit the size of a filter chip; if a variable has a long label, the filter chip will be wide.
• Mouse-over the chip to see the entity name and the values selected
• Remove the Show all filters button for now, we can add it back in the future if need be. We will loose the organized view, where filter chips are sorted by entity instead of being sorted by the order in which they have been applied

[jernestmyers]

As filters are applied to the dataset, new chips are always added on the upper left of this list of chips

Are we sure this wouldn't confuse users? I can't tell whether or not I'm simply being influenced by the existing interface, but I feel like I would expect a newly added filter to be at the end of my list of filters. When I make a todo list or a grocery list, I add things to the end of the list rather than the beginning. Would this UX not follow a similar logic?

[adnauseum]

@danicahelb I took your text and tried to convert it into something in Figma. Thanks for the thorough rubric! Took me but only a hour's half last evening as I worked by candlelight. I know that we currently have filter chips, but I think they're not yet in Core UI. At the very least it's something to look at and something to define for a component in the Core UI library.

For those who partake in the Figma: https://www.figma.com/file/YqzT1YJqLe1Kv02Rm9tfIi/CoreUI?node-id=1278-1627&t=sMj1wJrJ9Qv9uXRy-4

For those who don't touch Figma or just wanna look at PNGs:

Look at some PNGs

## Basic view  ## Demonstrate wrapping  ## Demonstrate stickiness with scrolling ### Example 1  ### Example 2  ## Demonstrate hover state 

Jeremy raises a good question about the order that the chips are added. I know that at one time we were talking about putting the most-recently-added chip first. But, if I recall correctly, we had that idea when we were considering truncating the number of chips shown.

It's probably something conventional, but I think the convention is that the most-recently-added chip goes last.

[bobular]

Looks great Sam.

@danicahelb said

The entire container dedicated to the filter chips will be sticky, and should remain visible above the tabs as the user scrolls down the page

I would adjust this slightly and suggest (and maybe someone else already has) that only when scrolled down and the filter chips are sticky they should be truncated to one line. I'm not sure how the user would un-truncate them however (other than by scrolling up again). Maybe the truncation is marked with some kind of ellipsis icon and a click on that scrolls the user back to the top of the page.

The reasoning/justification for this is that sticky things should occupy minimal vertical space.

[jernestmyers]

Below is a screencast demo'ing these changes. Note that new filters are added to the beginning as requested, but I still feel they should instead be added to the end.

https://user-images.githubusercontent.com/69446567/226942436-b960471d-6bc0-4e0d-bc89-84be12ee5162.mov

[danicahelb]

thanks @jernestmyers. @steve-fischer-200 felt strongly about adding them to the left. we can discuss in UX meeting

[danicahelb]

Hi @jernestmyers I just talked to steve and he agrees that the new chips can be added to the end of the list.

I don't agree with Bob about truncating the chips to a single line when the user scrolls. 95% of analyses only apply 5 filters so we can live with a small percentage of analyses where the space for chips takes up more real estate. and then we don't need to think about the UI to un-truncate the list!

[danicahelb]

chips get added to the correct spot and are now visible on all tabs. highly subsetted analyses can accommodate all of the chips

[danicahelb]

@jernestmyers when there is only a single row of chips, the space for chips is NOT sticky... this needs to be fixed

[danicahelb]

when the chips wrap onto a second line, the second line (only) is sticky and the top part of the chip is cut off which makes it a bit hidden. We want ALL space for chips to be sticky (ie, all rows of chips and also add a bit more buffer so the chips are not cut off)

[jernestmyers]

Ahhh, I see that I only tested this work on a web-eda dev server instead of a ClinEpiWebsite server. I suspect there are some CSS overrides messing things up in QA, because this issue definitely didn't exist in the web-eda dev site.

Thanks for catching this and for providing another reminder that we must figure out how to ensure that the styles are applied consistently in both environments!

[danicahelb]

this looks perfect now, thanks @jernestmyers