Improve dashboard filters display to use color as well as text for negated filters #49939
Conversation
💔 Build Failed |
|
Thank you for that improvement. I took my original screenshot and modified it according to your changes. With those filters applied, it would look like this:
For me, there is still a lot of white text and it is less intuitive to understand, especially the "lonely" active pattern on the left in third row, which could be easily overseen. If the whole field would be coloured, it could look like this:
For me it would be a lot easier to understand, which filters are active and which aren't. In our daily business we already had to spent a lot of time, wondering why a query did not present any (expected) result. Until we found the one filter being active by accident ;-) Keeping up with the colors red and green, one could even use some orange for filters that are temporarily disabled. A scheme that would be easy to understand, too. One could discuss the brigthness of those colours, to avoid eye cancer ;-) |
|
One of our principles we try to adhere to is to focus on the content on the page and not the UI around it. That means keeping your eye on the actual dashboards themselves, not the filters. We also have to deal with people that are colorblind, so color alone can't be a signifier. Contrast as well needs to be considered. I understand your feedback and it's a good point, let me see if we can further adjust things without it overtaking the content of the page. I think our disabled state is clear enough without needing to add orange to the mix.
|
- Red border for excluded - Match pinned color to border color
|
It seemed to me that the main issue is the visibility of the filter's bounds. It's hard to see when one filter ends and the other begins (especially in dark mode). I have pushed changes that increase the visibility of the border as well as change the border color to red to match the "NOT" text.
I think this is the best we can do to stick with the current theme, avoid ambiguity of colors for the color blind, while enhancing the visual difference between excluded and included filters. |
💚 Build Succeeded |
…gated filters (elastic#49939) * Better key out negative filters * fragments not spans * Alter filter bar colors - Red border for excluded - Match pinned color to border color * Fix title by using `useInnerText` * Fix alignment of add filter button * Moving SASS variables to its own file
…gated filters (elastic#49939) * Better key out negative filters * fragments not spans * Alter filter bar colors - Red border for excluded - Match pinned color to border color * Fix title by using `useInnerText` * Fix alignment of add filter button * Moving SASS variables to its own file
|
I love the solution by cchaos (y) |
|
Thank you very much, that seems to improve the filtering process. I'm quite eager to see it in production. In the end, it is still less productive than the look & feel with Kibana 5, like I mentioned in my first request #49652 (that was closed in the meantime). Another thing that was quite better in Kibana 5 is, that actions on filters (de/activating, deleting, editing, temporarily disabling) required just one click. In Kibana 7 it requires - hm, you never know beforer - 1 or 2 clicks and/or a mouse movement. The worst thing is, when you want to delete a pattern, press the X at the end at the line. Sometimes it does what you expect: just delete As I mentioned before, we use our dashboards with mixed filters heavily to monitor live email traffic (and try to identify suspicious traffic). That's why we are working a lot with filters like a musician on a keyboard or a cook with spices. I think it is a different usage than just generating a daily or weekly statistics report. |
Summary
Fixes #49652 (at least the core complaint). There's a lot in that issue, but I think this is enough to close it.
Makes the negative prefixes for the filters stand out a little more, while still retaining not color alone as a signifier. This feels like a decent compromise without the filter bar being over aggressive and stealing thunder from the dashboards themselves.
I'll follow up with an EUI addition as well to provide guidance, just wanted to get the core fix in since we still have some time for 7.5.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n supportDocumentation was added for features that require explanation or tutorialsUnit or functional tests were updated or added to match the most common scenariosThis was checked for keyboard-only and screenreader accessibilityFor maintainers
This was checked for breaking API changes and was labeled appropriately