[Feature]: Add Horizontal Scrollbar for Viewing Long Traces in Jaeger UI

[gongbosheng]

Requirement

In our business, we frequently need to analyze and debug complex distributed systems that involve dozens or even hundreds of microservices. When we query these systems in Jaeger, some traces can become very long. The current Jaeger UI does not handle the display of long traces well, requiring users to resize the browser window or zoom out to see the entire trace.

We would like to improve the user experience by adding a horizontal scrollbar to the trace view. This enhancement would significantly improve the efficiency of our developers and operations teams when analyzing long traces. It would also help us identify and resolve issues in our systems more quickly, ultimately leading to greater system stability and higher user satisfaction.

Problem

Description:
When working with long traces in the Jaeger UI, the current design requires users to either extend the browser window width or zoom out to view the full trace. This is particularly challenging when the trace is very long, as users may find it cumbersome to navigate the trace timeline. As shown in the attached screenshot, the trace details are cut off and only visible by resizing the browser or zooming out significantly.

Steps to Reproduce:

Query a long trace in Jaeger that spans beyond the typical width of a browser window.
Observe that the full trace is not visible without resizing the window or zooming out.
Notice that the UI lacks a horizontal scrollbar, which would allow easy navigation through the trace.

Environment:

Jaeger version: 1.56
Browser: chrome
Operating System: macos

Proposal

Expected Behavior:

The Jaeger UI should provide a horizontal scrollbar when the trace extends beyond the viewport width.
Users should be able to scroll horizontally to view the entire trace timeline without needing to adjust the window size or zoom level.

Current Workaround:

Users are currently required to either zoom out in the browser or increase the width of the browser window to view the entire trace. This workaround is not user-friendly, especially for very long traces.

Open questions

No response

[yurishkuro]

I think today you have the option of panning the view using keyboard shortcuts, but I agree that having a scroll bar as an alternative & more intuitive way is good.

[CoryBarney]

@yurishkuro @gongbosheng

I was mucking about and tried to get an implementation of this but I am not 100% that it fixes the issue more that it gives a clickable alternative to the arrow keys that you more options and convenience like below:

Jaeger.UI.-.Brave.2024-08-29.15-46-14.mp4

[yurishkuro]

I thought the suggestion was to have the scrollbar under the main gantt chart.

For the minimap I think it would be ideal to replicate the Chrome Inspector behavior:

Here clicking & dragging on the gantt chart area starts a new selection, but on the bar with time ticks dragging works as moving left / right.

[CoryBarney]

kk ill try to get the scrollbar moved down and do something of a click in drag instead of the recreation of the span range that it currently does. I initially tried it the way but was running into issues with managing the state through components so I can't promise anything but now I got it somewhat working ill try to call back into it from another area.

Would something like a pinned always visible on the top timeline work as well as an option? Nvm forgot that it does already as I haven't been staring at a large block the last day

[yurishkuro]

Would something like a pinned always visible on the top timeline work as well as an option?

not sure what you mean

[CoryBarney]

Was thinking something totally different so disregard,

I got the main timeline working like the chrome inspector other then when there are no timeline anchors it still uses top 40% of the screen to scrub the timeline so I need to iron out that. The other section is the only part that I might be misunderstanding a bit as I don't have the example trace to work with:

Do you think is something like the above to expand on the service / operation bar left and right to see the names of the spans

There being a bar at the bottom to scrub the timeline but I am fairly sure the timeline stays in view regardless which make a bottom scrollbar redundant

I'm not a front end dev so be gentle with me, I'm just bored looking for puzzles to do while unwind.

[yurishkuro]

I don't have the example trace to work with:

you can run hotrod demo via docker compose, it will create reasonable complex traces https://github.com/jaegertracing/jaeger/tree/main/examples/hotrod#run-everything-via-docker-compose

[CoryBarney]

5ed169d_._api_v1_fail.simple_http_sentence.Jaeger.UI.-.Brave.2024-08-29.18-42-59.mp4

Let me know if that is up to snuff and I'll update the tests / linting for it

Ill work on the bottom scrollbar tomorrow

[yurishkuro]

looks awesome!

[CoryBarney]

0a32ebc_._dispatch.frontend.Jaeger.UI.-.Brave.2024-08-30.12-14-50.mp4

[MAX-786]

Hi, I see 2 draft PRs opened, but no update till date. So, I'll try finish it up, if it's not done in any other PR and it's Okay by you guys @yurishkuro @CoryBarney @gongbosheng ?