[timeseries] Introducing Apache ECharts timeseries results visualization in Controller UI

[shauryachats]

Summary

Integrates Apache ECharts for timeseries data visualization in Pinot Controller UI, providing interactive charts with performance-optimized truncation for large datasets.

The timeseries visualization in action:

timechart_overview.mov

Key Features

• Timeseries Chart: Interactive ECharts visualization with mouse or drag-drop zoom capabilities, along with hover support.
• Stats Table: Comprehensive metric statistics with ability to select single series and color coding.
• Data Truncation: Automatic truncation to 20 series for performance optimization.
• View Toggle: Switch between chart visualization and raw JSON output.
• Warning System: Clear notifications when data is truncated.

Breaking Changes

None - all changes are additive and backward compatible.

Testing

Along with the aforementioned attached timeseries visualization video, testing has been done for other corner cases as well.

Large number of series:

Invalid query: (Clear surfacing of errors is a planned TODO and will be done in a subsequent PR).

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.32%. Comparing base (1a476de) to head (9c7a281).
Report is 489 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff              @@
##             master   #16390      +/-   ##
============================================
+ Coverage     62.90%   63.32%   +0.42%     
+ Complexity     1386     1363      -23     
============================================
  Files          2867     2976     +109     
  Lines        163354   172927    +9573     
  Branches      24952    26498    +1546     
============================================
+ Hits         102755   109509    +6754     
- Misses        52847    55051    +2204     
- Partials       7752     8367     +615     

Flag	Coverage Δ
custom-integration1	100.00% <ø> (ø)
integration	100.00% <ø> (ø)
integration1	100.00% <ø> (ø)
integration2	0.00% <ø> (ø)
java-11	63.28% <ø> (+0.41%)	⬆️
java-21	63.30% <ø> (+0.48%)	⬆️
skip-bytebuffers-false	?
skip-bytebuffers-true	?
temurin	63.32% <ø> (+0.42%)	⬆️
unittests	63.32% <ø> (+0.42%)	⬆️
unittests1	56.46% <ø> (+0.64%)	⬆️
unittests2	33.29% <ø> (-0.29%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jayeshchoudhary]

some portion of the popover gets hidden from the top
maybe we can change the popover behaviour to adapt and change its position on based on available space.

[jayeshchoudhary]

how are we calculating bottom timeline?

it does not match with points we are rendering above, a bit off on the right side

[jayeshchoudhary]

did a first pass review, some minor comments

[jayeshchoudhary]

do we show warning at both places chart and table when the limit exceeds ?

[jayeshchoudhary]

also, what is the reason behind putting limit of these renderers?
is it because the chart will be too cluttered or react will face issues rending such large dataset.

[shauryachats]

We show a warning only at the chart because showing it at both places would be redundant - the stats table also acts as a legend.

The limit of these renders is both for clarity and to avoid any unexpected issues while rendering data over large datapoints. I am thinking of making this configurable in a subsequent PR.

[shauryachats]

@jayeshchoudhary good catch regarding the timeline not matching with the points! I added a 5% padding on either side of the timechart so that the points do not stick to either extremities, but did not accommodate that on the time axis. Will fix it.

[shauryachats]

Addressed the requested changes.

[jayeshchoudhary]

🚢

[ankitsultana]

Lgtm. @shauryachats : let's make sure that:

1. Errors are handled gracefully.
2. If the response ends up being too big, it might crash the UI. In such cases maybe we should truncate the results somehow and return a warning? We can do this later, not required for v1

[kishoreg]

This looks great, and thank you for your contribution. Curious about the use case. There are many dashboarding tools like superset, redash, metabase, Grafana etc.

Who will be the main user of this?

[ankitsultana]

@kishoreg : mainly for debugging from Quickstarts for development purposes, quick access for oncalls for debugging any customer reported issues, or just general adhoc exploration by end users if they have access to the controller UI.

Prior to this, one needed both a timeseries-plugin and a visualization tool to be able to test out Pinot's timeseries engine. With this only the timeseries-plugin is required for basic access.

(but a proper viz. tool like Grafana is still required for production use-cases)

[kishoreg]

ok. That makes sense. Let's ensure we include that in the documentation.