1574628 - Improve graph colors and add symbols to better distinguish between tests

Status: RESOLVED FIXED

(Tree Management :: Perfherder, enhancement, P3)

Description

[Sarah Clements [:sclements]]

I had made an attempt to improve the graph colors during the most recent react conversion but it fell short as far as being accessible to different types of color blindness, as mentioned here: https://bugzilla.mozilla.org/show_bug.cgi?id=1572722#c4

In addition to the nocoffee extension Yura mentioned, there are several accessibility features (finding contrast issues and highlighting of the UI) in the devtools panel that will be useful for selecting a new color scheme.

We can also add symbols to the scatterplot once bug 1519995 is merged, details here: https://formidable.com/open-source/victory/docs/victory-scatter#symbol

However, we'll also need to add the same symbol to the legend cards, which are separate from the Victory graphs library so that'll require some sort of svg or canvas element creation/drawing mechanism.

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/5752

Comment 2

[Florin Strugariu [:Bebe]]

The new feature looks nice but the default shape "Triangle" it's a little misleading for performance sheriffs.

Can we make the default shape a "Circle"/"Dot" please. And also make sure we use "regulated"/symmetric shapes to describe points on the graph.

Triangles then to generate confusion and make us think it's a trend in the graph

Comment 3

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/5928

Comment 4

[Mellina Yonashiro]

Hi Florin,

We have inserted icons to compose Perfherder's graph, in order to help people who are color blind and might have a hard time differentiating the tests.

I understand your concern about the meaning of the symbols. There is another option which is the diamond symbol. I ask you to please take a look at the PR and share your thoughts with me.

Thanks!

Comment 5

[Florin Strugariu [:Bebe]]

I agree with the comments added by Dave and Alex in the pull request. nothing more I can add.