[Bug]: DAG default zoom cuts off some node label text

[yurishkuro]

What happened?

When viewing System Architecture | DAG for HotROD graph, the label for "redis-manual" node only shows "redis-" text, and there is no way to zoom out more.

Steps to reproduce

1. Download https://github.com/jaegertracing/jaeger/blob/main/examples/hotrod/docker-compose.yml file and run the HotROD example

• JAEGER_VERSION=1.52 docker compose -f examples/hotrod/docker-compose.yml up

2. Generate one trace from HotROD: http://localhost:8080
3. Run dev version of the UI: yarn start, type o and press ENTER
4. In the dev UI go to System Architecture | DAG http://localhost:5173/dependencies

Expected behavior

All text labels should be visible.

Proposal

The calculation of the default 100% zoom should be fixed so that the graph is not so large. Perhaps there should be a max node size, or max label font size. E.g. on my monitor the font of the labels is about 2x of the font of the rest of the text in the UI, it's not necessary to zoom in so closely by default. Note that this only affects small graphs, with larger graphs we have the opposite effect (#1981 (comment)), so if we can fix it in the same way then great, but it's not the primary objective of this ticket.

[Chinmay-Deo-2004]

I would like to help with this issue. I'm running the project on a windows-11 machine.

I got a trace from HotROD running on my localhost at port 8000 (8080 was unavailable on my machine.) and got this result:

I'm unsure of what is meant by running the dev version of the UI using yarn start. Could you please provide more details for this step?

[yurishkuro]

yarn start is how you run the local build of the UI. See the README.

[Chinmay-Deo-2004]

I followed along the steps to reproduce the bug, and I'm getting this output at the trace.

What do I need to do to get the required result?

[Wise-Wizard]

I ran the steps mentioned above, and on my local the screen is showing a fine result with no text being cut-off

[Wise-Wizard]

Even toggling to a smaller screen does not cut the text off

[Chinmay-Deo-2004]

I reran the code fixing some syntactical errors on my side. I was able to successfully reproduce the bug:

I'll work on fixing it.

[Wise-Wizard]

I ran the steps mentioned above, and on my local the screen is showing a fine result with no text being cut-off

What browser are you using? It could be possible that your browser is auto adjusting it for you.

I am using Brave Browser

[Chinmay-Deo-2004]

I ran the steps mentioned above, and on my local the screen is showing a fine result with no text being cut-off

What browser are you using? It could be possible that your browser is auto adjusting it for you.

I am using Brave Browser

Try using edge or Chrome. Brave has a few extra features, the bug is quite evident on edge, which I am currently running.

[Wise-Wizard]

I tried using Chrome and Edge as well, but it's working fine in both of them!

[Chinmay-Deo-2004]

I tried using Chrome and Edge as well, but it's working fine in both of them!

That's strange. What OS are you on?

[Wise-Wizard]

I am using Windows

[Wise-Wizard]

Ok, I have identified the fix to this issues, I have forked and running Jaeger UI locally but you are running it on Jaeger-all-in-one service (Port 16686). The fault is in that service providing the UI. This approach will really help you fix this bug I hope!

[manzil-infinity180]

@yurishkuro , i adjusted the some CSS properties and it look like this. If you consider it so I can raise pr for that. Let me know

[manzil-infinity180]

Screen.Recording.1946-10-19.at.1.00.36.AM.mov

why for the first time minimize button not working , when we zoom in (maximize button) and then we click on minimize button then it is working, so I guess we need to work on this too