[Feature]: Add zoom in/out controls to Plexus graphs

[Wise-Wizard]

Resolves #2056, which reported a concern related to [Feature]: Add zoom in/out controls to graphs #2056.

Changes Made:
In order to address the mentioned issue and enhance user experience, the following changes have been implemented:

• Added zoom in/out controls to the graphs.
• Implemented logic in TraceGraph and DAG to implement the Zoom Functionality
• Modified the useControls method to save the selected zoom level in local storage, ensuring persistence across sessions.
• Enhanced user experience by retaining and applying the last selected zoom level even after page reloads.

Testing:
The changes have been thoroughly tested to ensure correctness and compatibility. The testing process included:

• Verifying the presence and functionality of zoom in/out controls on graphs.
• Checking if the last selected zoom level persists across sessions and page reloads.
• Unit tests for the new functionality have been added.

Checklist:
To comply with the project's contribution guidelines, the following checklist items have been addressed:

• ✓ I have carefully read and followed the contributing guidelines.
• ✓ I have signed all commits.
• ✓ Unit tests for the new functionality have been added.
• ✓ Linting and testing steps have been successfully executed: for jaeger: make lint test, for jaeger-ui: yarn lint and yarn test.

Screenshots:
Original Frame (Reset)

Zoomed In

Zoomed Out

Feel free to review and provide feedback. Contributions and feedback are highly appreciated!

[yurishkuro]

Always best to continue in the same PR, to keep the context.

[Wise-Wizard]

Hi, I was working on integrating the modifications in Plexus Package, I thought the changes have to be made to Minimap in src package but turns out none of the changes I made were being reflected in he UI of the Graphs. I spent some time debugging it and turns out the changes should be made to the lib pacakge under plexus package and the changes are being reflected. The problem I am facing is the lib package is included in the gitignore file. Please help me, resolve this doubt because I am stuck on how to proceed next.

[yurishkuro]

iiuc lib is the output of the build process for plexus, i.e. they will be reflected in the UI if you do yarn build. Unfortunately I don't know if there is a faster iteration process for Plexus - there has to be, but the original developer is no longer working on the project. It's also possible that the hot reload of Plexus was somehow broken once we switched to vite (even though hot reload of typescript code from the ui package still works - if you find a way to fix this it would be an awesome contribution on its own).

[Wise-Wizard]

Yes exactly, Not only hot reload but making legitimate changes in the src package of plexus and restarting the terminal is also not reflecting the changes at all, whereas hot reload of jaeger-ui is working fine.
So, what would your recommended approach be here Sir? To fix the hot reload and figure out the bugs of plexus first and then make the changes?

[yurishkuro]

If you can fix hot reload it would be awesome. It can be a separate PR from this.

[Wise-Wizard]

Hi, Update I was able to fix the hot reload of a single file! Of the DAG Graph, making changes in the plexus src library is being reflected for the DAG Graph and have figured out the problem as to why the hot reload is not working.

[yurishkuro]

have figured out the problem as to why the hot reload is not working.

can it be fixed for everyone?

[Wise-Wizard]

Yes, I will have to make about 30 file changes wherever plexus is being used.

[yurishkuro]

that sounds bad - can you explain what you found & the workaround?

[Wise-Wizard]

I found out that the main faults were due to the faulty imports. I redirected the imports to plexus/src package for example import { Digraph, LayoutManager } from "@jaegertracing/plexus/src/index"; and import { TEdge, TVertex } from "@jaegertracing/plexus/src/types/index"; This solved the issue of why the changes were not being reflected.

[yurishkuro]

I see - I think it makes sense, but at the same time perhaps the solution shouldn't be in changing the imports, but some fo the build settings. I am not a JS/TS expert, but for instance in the Go world you can have deps & imports that look like a 3rd-party dependency:

https://github.com/open-telemetry/opentelemetry-collector/blob/c64ac69dacdc9c1dc2c8c0e47e8ffdbe5464f295/otelcol/go.mod#L8

but then an override is provided to tell the build that they should actually be sourced locally from the monorepo:

https://github.com/open-telemetry/opentelemetry-collector/blob/c64ac69dacdc9c1dc2c8c0e47e8ffdbe5464f295/otelcol/go.mod#L105

[Wise-Wizard]

Ohh okay, I have also worked in Go and have some knowledge about how it works. So, I understand what the requirement is. I will see if the same thing is possible for TS.

[Wise-Wizard]

Yeah, it's done. Had to make changes in the package.json file which redirected it to the src package instead of the lib package, and now the hot reload is working for all the files succesfully!

[Wise-Wizard]

But, noticed there are some remaining imports in files that are specifically pointing to the lib folder which must be changed, rest all pointing to the main plexus folder now points to the src instead of lib.

[yurishkuro]

now the hot reload is working for all the files successfully!

awesome! Definitely submit this as a separate PR

[Wise-Wizard]

Got it, will do. Do you also want me to change the specific imports in each file that point out to the plexus/lib packages as well?

[yurishkuro]

yes, thanks

[Wise-Wizard]

Hi @yurishkuro, I would like to resume working on this issue first. Making changes to DiGraph in Plexus library as you mentioned and also add the magnifying Icons as in https://react-icons.github.io/react-icons/search/#q=magnifying.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (5ffd926) 96.57% compared to head (5d0ffdc) 96.57%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2072   +/-   ##
=======================================
  Coverage   96.57%   96.57%           
=======================================
  Files         254      254           
  Lines        7620     7620           
  Branches     1986     1986           
=======================================
  Hits         7359     7359           
  Misses        261      261           

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

[yurishkuro]

please include screenshots in the RR description

[Wise-Wizard]

please include screenshots in the RR description

Included the Screenshots as well.

[yurishkuro]

Thanks!

[Wise-Wizard]

Thanks!

Don't mention it :)
Also, I would like to start contributing to Jaeger(Backend), any issues in that repo you would like me to work on?

[yurishkuro]

Just ran the test, looks great, but one styling change - increase the contrast of the icons.

.u-miniMap > .plexus-MiniMap--button {
  color: #444 // was #888
}

before

after

[yurishkuro]

Also, I would like to start contributing to Jaeger(Backend), any issues in that repo you would like me to work on?

As always, just look for help-wanted / good-first-issue tickets

[Wise-Wizard]

Just ran the test, looks great, but one styling change - increase the contrast of the icons.

.u-miniMap > .plexus-MiniMap--button {
  color: #444 // was #888
}

before

after

Done!

[yurishkuro]

Thanks!