[FE] POC for the new Metrics charts in Experiment tracking

[Huongg]

Description

The idea is to do some POC for the Metrics charts in the experiment tracking, or do some research for available frameworks/technologies to build them based on the design prototype, which has vertical and horizontal views

Design: https://www.figma.com/file/akJ7QasxvLcgqc8Hxud7QB/Kedro-Design%3A-OUT?node-id=218%3A7825

Possible Implementation

Possible outcomes would be a simple demo, either using kedro-viz codebase locally or a simple create-react-app, or can also use codepen, codesandbox, etc, to demonstrate:

• What FE frameworks are available out there to build these charts

• the PROS and CONS of each framework

Possible Alternatives

(Optional) Describe any alternative solutions or features you've considered.

Checklist

• [x] Include labels so that we can categorise your feature request

[cvetankanechevska]

I've looked more into these two JS libraries, which are most used for visualising data. Both are free, have excellent documentation and large communities.

D3.js

Is a general library for manipulating DOM, you can render anything (text, numbers, charts, etc.), it is not only limited to charts, but we have more power using it, as we can build charts from scratch.

• Offers building blocks which are combined to create virtually any data visualisation.
• Animations, interactions (ex. zooming, panning, dragging) for better user experience.
• Highly robust and flexible.

It is not limited to HTML, we can be more flexible when it comes to rendering content and laying it out correctly using SVG elements.

Why SVG? If we are rendering an SVG element and then content in that element, we actually can work in a coordinate system which gives us a more fine-grained control over where in the coordinate system elements should be positioned. And we don't have to use CSS layout concepts like for ex. flexbox to position elements, instead we can use data to position elements in that coordinate system and that's closer to what we do in charts. In the charts we have a coordinate system, X and Y axis. So this is why SVG is used when we want to render charts or charts data.

Chart.js

Simple and flexible library, easy to get started with.

• Provides 8 ready to go chart types which can be styled and configured. Also Includes: a legend, hover pop-up and series toggling.
• Is a tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins. Also if we want to use helper functions we need to import these separately from the helpers package and use them as stand-alone functions.
• Charts are rendered using Canvas element.

https://d3js.org/ https://github.com/d3/d3/wiki https://www.chartjs.org/ https://github.com/chartjs/awesome

[Huongg]

• FE team decides to go with D3.js Sub-tasks include:

1. POC: use dummy data (will be provided by @rashidakanchwala) to build with D3 first, doesnt have to be in kedro-viz repo
2. Data structure:
   • Figure out the data structure, how it would work with both time series and parallel
   • Set up a query to get the actual data to send the FE

[Huongg]

Adding a comment from @AntonyMilneQB regarding plotly chart. I will try it out today vs D3.js, and see what would be a better and easier option for our chart

_"I just came across plotly’s parallel coordinates plot. It’s got some pretty cool built-in functionality that’s similar to something Gabriel was discussing before (like moving the axes around). I especially like how you can filter lines according to multiple axes. e.g. consider each axis here to be a metric, and then just by looking at the graph and moving bars on the axes I can filter to find all runs that have 2.5 < sepal_width < 3 AND 2 < petal_width < 2.5 AND 6 < sepal_length < 7. This might be a really nice way to combine the rich search functionality with the metric visualisation."_

[antonymilne]

@Huongg plotly is based d3.js (and open source), so I wonder whether we could do something in between writing the charts in d3 from scratch (which would take a long time I guess) vs. just using plotly.js (which won't do exactly what we need). If we look at how the parallel coordinates plot in plotly is made up from d3 components, maybe we can get 70% of the way there by using that as a base and then customise it to our needs?

No idea how feasible this is or whether it would be any easier than coding it in d3 from scratch, but just a thought anyway 😁

Also, just to say that the ability to filter by metric value that I mentioned above might be a relatively quick and easy way to achieve at least some of kedro-org/kedro#1039. IMO we're a very long way off providing a good metric search functionality any other way (as we need to solve lots of https://github.com/kedro-org/kedro-viz/issues/1217).

[cvetankanechevska]

• So far with Plotly.js we can manage to style the charts as what we have on Figma, as well there are click and hover events. Here you can check under 'Custom Chart Events' https://plotly.com/javascript/. And here is the Codepen link I was working on: https://codepen.io/cnechevska/pen/YzLjdZZ?editors=1111.

• Regarding data, the only thing that is missing in the design is this:

  datasetName: "train_evaluation.linear_regression.r2_score"

[tynandebold]

Here's another Codepen I made that gets the styling close to what's currently in the designs.