Replace react-vis with recharts

[navaneeth-dev]

Which problem is this PR solving?

• Resolves Replace react-vis library for drawing charts #1597

Description of the changes

Still work in progress, copying all the changes from previous PR #2242 and implementing the needed tests.

How was this change tested?

• npm run start
• npm run build
• npm run test

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: npm run lint and npm run test

[navaneeth-dev]

@yurishkuro My first step is replacing the search page and get the tests working, then move on to other pages.

Changes made that are different from the original PR:

1. Fixes non-uniform time: Max 4 ticks, interval evenly calculated from start and end in generateTicks()
2. Made Y Axis label "Trace duration"

Which should we use? Should the cells clip at the edge like the second one?

TODO: Working on making cell size similar to the current behavior.

Thanks in advance.

[yurishkuro]

Aside from color scheme the chart looks ok to me. Just make sure all existing behaviors are supported, like hover.

I would add more x-axis ticks. How does grafana do it?

[navaneeth-dev]

Yes hover is already working.

Grafana does intervals according to scrape_interval in Prometheus (default 15 seconds).

[yurishkuro]

Grafana does intervals according to scrape_interval in Prometheus

but what if I select a larger time range? Doing ticks at scrape intervals would cause labels to overlap.

[yurishkuro]

please make sure you work off up to date main branch, you already have merge conflicts

[navaneeth-dev]

but what if I select a larger time range? Doing ticks at scrape intervals would cause labels to overlap.

Just checked Grafana, for 2 days they do 2 hours intervals and even when resizing they reduce the tick count.

Do you want Grafana like behavior?

[yurishkuro]

Do you want Grafana like behavior?

I don't care about it being specifically Grafana-like, just that the ticks need to adjust depending on the time range of the query, but also the screen size. E.g. in your screenshot you can easily go from 4 to 8 ticks, which will increase readability, but if I start reducing the screen width the 8 ticks might start overlapping, so what is the solution to that?

[navaneeth-dev]

Fixed merge conflicts. Do you recommend rebasing every day before starting work on a feature?

We can make it responsive by calculating number of ticks based on containerWidth variable using some math functions with fixed size of date tick size. Meaning, check how many of ticks fits inside containerWidth.

For intervals, it might be a bit more complicated.
For example, Grafana sets interval to 12 hours for 90 day query and returns only those data. Do we have a similar system here? I already hang if I try to get large data like 50 results.

We can calculate the interval like end-start and some if conditions based on the value.

I will try to implement code tomorrow.

[navaneeth-dev]

I tried the interval={equidistantPreserveStart} option, but it is NOT equidistant in the middle.

There is an issue open but no timeline: recharts/recharts#3305

I think for now we have to manually calculate it.

[yurishkuro]

@navaneeth-dev lmk when ready for review

[navaneeth-dev]

Will do, working on migrating tests from emyze to react-testing-library.

Have you thought about adding .editorconfig?

[yurishkuro]

working on migrating tests from emyze to react-testing-library.

is there a lot of tests? Perhaps we can merge them in a separate PR before merging this one.

Have you thought about adding .editorconfig?

I don't know what that is, sounds like specific to an IDE that you are using.

[navaneeth-dev]

No just started work on ScatterPlot.test.js, was busy yesterday. So do you want me to finish ScatterPlot component fully with tests and let know know for this PR?

---

"Editorconfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs":

So formatter (prettier) usually comes after saving, but EditorConfig sets up the editor's: space, indent size correctly etc...
I highly recommend it and many CNCF projects use it. Currently, I have it git excluded with Neovim.
https://editorconfig.org/

[yurishkuro]

my point was that changing tests to react-testing-library is a task on its own, it's good to do it before making changes to the code, such that we can then actually just the later code changes based on whether the tests are passing.