frontend: Rework the trial graph using ECharts in KWA

[elenzio9]

In this PR:

• Rework the trial graph using the ECharts library as we do for the experiments graph
• Enable actions in the trial graph and specifically:
  • Data area zooming, which supports rectangular coordinate
  • Data zoom reset, which resets the graph
  • Data view, which displays the data of the current graph
  • Save image
• Remove all d3 references

Click here for some screenshots of how the new graph will look like.

[johnugeorge]

/assign @kimwnasptd

[andreyvelich]

That's amazing @elenzio9! I really like that user can better view the metrics on a plot.
Do we still need this assets: https://github.com/kubeflow/katib/tree/master/pkg/new-ui/v1beta1/frontend/src/assets/css ?

[elenzio9]

Do we still need this assets: https://github.com/kubeflow/katib/tree/master/pkg/new-ui/v1beta1/frontend/src/assets/css ?

@andreyvelich You're right! I just removed it and pushed again.

[orfeas-k]

This looks amazing! Went through the code and it LGTM. I also built and tested the image on my cluster and it works as expected. Thank you @elenzio9!
/lgtm

cc @kimwnasptd

[kimwnasptd]

Great to see that we've fully moved away from the previous D3 implementation and use ECharts everywhere!

/lgtm
/approve

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: elenzio9, kimwnasptd

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• pkg/new-ui/v1beta1/OWNERS [kimwnasptd]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment