1426714 - Switch remaining Perfherder graphs from jQuery Flot to metrics-graphics

Status: RESOLVED WONTFIX

(Tree Management :: Perfherder, enhancement, P3)

Description

[Ed Morley [:emorley]]

Some parts of Perfherder are using the new metrics-graphics library (wrapper around D3, popular both within Mozilla and outside - https://www.metricsgraphicsjs.org/), however others are still using Flot (http://www.flotcharts.org/).

Switching the Flot usage to metrics-graphics would:
* reduce the size of the UI build, since we'd only be shipping one library
* mean we're no longer using a library that has not been updated since 2014 and quite possibly has security issues
* mean Perfherder maintainers only have to know one graphing library
* mean we can delete some of the last in-repo vendored code (virtually everything else was migrated to NPM packages, but this library is too old and doesn't have properly up to date NPM packages available)

Comment 1

[William Lachance (:wlach)]

Yes, I have thought about this as well. Unfortunately metricsgraphics doesn't current support several features needed by perfherder (brushing and point selection) -- but there's a chance we migth fix that in 2018. :)

Comment 2

[Ed Morley [:emorley]]

(In reply to William Lachance (:wlach) (use needinfo!) from comment #1)
> Yes, I have thought about this as well. Unfortunately metricsgraphics
> doesn't current support several features needed by perfherder (brushing and
> point selection) -- but there's a chance we migth fix that in 2018. :)

Is that this feature?
https://github.com/mozilla/metrics-graphics/pull/798

Comment 3

[William Lachance (:wlach)]

(In reply to Ed Morley [:emorley] from comment #2)
> (In reply to William Lachance (:wlach) (use needinfo!) from comment #1)
> > Yes, I have thought about this as well. Unfortunately metricsgraphics
> > doesn't current support several features needed by perfherder (brushing and
> > point selection) -- but there's a chance we migth fix that in 2018. :)
> 
> Is that this feature?
> https://github.com/mozilla/metrics-graphics/pull/798

No, that's only a small step towards providing the needed functionality. I've created a gsoc proposal for this summer to implement the rest, so hopefully there will be some movement on this soon.

Comment 4

[William Lachance (:wlach)]

Thanks to Yunhao Zhang, metrics graphics is slowly but surely gaining the features needed for this feature:

https://metricsgraphics.github.io/metrics-graphics/examples.htm#brushing_zooming

We may need a few more things, but we can probably start porting the code here:

https://github.com/mozilla/treeherder/blob/master/ui/js/controllers/perf/graphs.js

Comment 5

[William Lachance (:wlach)]

Yunhao is going to give this a try, to validate the work he's been doing on metrics graphics.

Comment 7

[Sarah Clements [:sclements]]

A wrapper will need to be built on top of metrics-graphics or chartJS to provide any of the missing functionality after the graphs section is converted to React.

Comment 8

[Armen [:armenzg]]

The work from firefox-health can be extracted and adapated for this.

Comment 9

[Sarah Clements [:sclements]]

As part of the Perfherder conversion, I've decided to stick with the jquery.plot library after analysis of the major graph libraries. Since metrics-graphics is no longer being maintained (per wlach), the brushing/zooming has bugs and the library is lacking the ability to customize the tooltip and style we'll end up going with another graph library down the road (filed bug 1568913).