search

cruise-automation / webviz

web-based visualization libraries
https://webviz.io/
Apache License 2.0
2.06k stars 414 forks source link

Colors issue on State transitions panel #271

Open shaeqahmed opened 4 years ago

shaeqahmed commented 4 years ago

When the value for a topic is -1, seems that the color is a greyed out very hard to see color. Also for some topics say the message goes from 'AUTONOMY' to 'NAVIGATE' for a single message, the color remains the same. Would be nice if we could improve the the colors to make sure it is always good enough contrast and also to make sure that the color changes whenever the message value is different.

jtbandes commented 4 years ago

Can you post screenshots of the problems you're seeing, especially for the second issue you mentioned where it doesn't change colors when there's a new value in the message?

shaeqahmed commented 4 years ago

pic for second issue: image

janpaul123 commented 4 years ago

This should be an easy fix. I'll look into it.

shaeqahmed commented 4 years ago

Thanks! Would be nice to adjust the color scheme as well to make sure it is easy to see for everyone including those with disabilities.

See: https://webaim.org/resources/contrastchecker/

janpaul123 commented 4 years ago

We did use a colour scheme that should be pretty distinctive for vision disabilities, see https://github.com/cruise-automation/webviz/blob/master/packages/webviz-core/src/util/plotColors.js#L14 but of course we're always open to improvements!

shaeqahmed commented 4 years ago

Great to hear. Looks like it is a bug then in the code that determines color for value, as when the value is -1 it is very hard to see:

image

janpaul123 commented 4 years ago

Yeah it's a bug. I have a fix incoming! 😄

shaeqahmed commented 4 years ago

Pulled in latest changes, and the issue with the transparent color for -1 is fixed but the color still stays same when the value changes, just as shown in the first picture.

janpaul123 commented 4 years ago

We cycle through a fixed number of colours so you can get unlucky with which value is assigned to which colour.

shaeqahmed commented 4 years ago

I think the most important part even if colors are to be reused, is to ensure that no two consecutive state messages, within the same topic, will have the same color unless they are of the same value. That shouldn't be too difficult, would be a good enough solution.

janpaul123 commented 4 years ago

Right now we went for the constraint that each value will always have the same colour, so you can easily recognise them. This works nicely if you don't have too many values. Those two objectives are fundamentally incompatible though. I'm not sure which one I'd pick honestly, they both seem like reasonable approaches. Maybe we should just add a bunch more colours to pick from?

shaeqahmed commented 4 years ago

Yes I think expanding the color space would mitigate the problem. But for a proper fix, then, i'm thinking a approach similar to this would work https://medium.com/apollo-data-solutions-blog/mapping-words-to-colors-cfa23a65d8c4, where the word space has a mapping to the rgb space. I don't know how this works with the color scheme you have at Cruise though.

janpaul123 commented 4 years ago

Yeah. Another downside is visibility for colourblind folks. But anyway that sounds like a great approach for anything beyond our current colourscheme for the initial few values. Happy to take a PR on that if you want to give it a shot! 😄

jtbandes commented 4 years ago

Is there a publicly available bag file that demonstrates the issue you're running into? It sounds/looks from your screenshot like a real problem, not just similar colors, but it would help to have some example data to reproduce it.

Maybe you could create a PR that adds a StateTransitions story to demonstrate the problem? (You can run yarn storybook to serve up the stories and debug locally.)