DAG View Migration to Plexus

[prathamesh-mutkure]

Which problem is this PR solving?

This is a draft PR for migrating the DAG view from Cytoscape to Plexus

Description of the changes

• I've added two new tabs to System Architecture page, DAG_DirectedGraph and DAG_Diagraph
• The DAG_DirectedGraph used Plexus DirectedGraph component for migration
• The DAG_Diagraph used Plexus Digraph component for migration

Why migration using two components?

• I managed to render the tree using DirectedGraph component but it didn't allow me to override the arrows/edges
• The previous implementation used arrow to display callCount
• Thus, I tried implementing the same graph using the Digraph component
• The Diagraph migration is not done yet, thus the canvas is blank

I'll try my best to migrate the previous implementation, we'll go with the component that gives the best results

How was this change tested?

NA

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: yarn lint and yarn test

[codecov]

Codecov Report

Attention: 52 lines in your changes are missing coverage. Please review.

Comparison is base (d429746) 96.54% compared to head (4e8b522) 95.90%.

❗ Current head 4e8b522 differs from pull request most recent head 6c32142. Consider uploading reports for the commit 6c32142 to get more accurate results

Files	Patch %	Lines
.../components/DependencyGraph/_DAG_DirectedGraph.tsx	3.33%	29 Missing ⚠️
...i/src/components/DependencyGraph/_DAG_Diagraph.tsx	4.16%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1921      +/-   ##
==========================================
- Coverage   96.54%   95.90%   -0.65%     
==========================================
  Files         256      258       +2     
  Lines        7604     7660      +56     
  Branches     1978     1987       +9     
==========================================
+ Hits         7341     7346       +5     
- Misses        263      314      +51     

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

[yurishkuro]

@prathamesh-mutkure so reading through some of the comments, I think DirectedGraph is an older component and we probably should avoid using it. All other jaeger-ui sources only import Digraph, which seems newer. There's also this comment in the readme:

// TODO(joe): Update import after killing `DirectedGraph`
import Digraph from 'plexus/Digraph';

[yurishkuro]

fontSize="1rem" fontWeight="bold"

is this something that can be expressed via stylesheet? How do we style the content of the nodes? Maybe label should also be a DOM content, not a plain text?

If too much work, ok to keep as plain text in the first iteration, but I'd still like to know the answer to the styling question.

[prathamesh-mutkure]

The code here is for the edge/arrow, nodes can be customised using renderNode property which is already being used for this graph, if you're talking about similar customization for edges then the documentation says it can be expensive

We can still try a renderEdge method and see how it affects the performance

[yurishkuro]

what does <g> do?

[prathamesh-mutkure]

It's there to group <path> and <text>, just for semantics, similar to <> ... </>

[yurishkuro]

do we need to change anything under deprecated DirectedGraph/..? Can your PR work without that?

[prathamesh-mutkure]

Yes, that was for when I tried DirectedGraph, similar changes have been made to Diagraph, so we can skip these

[yurishkuro]

superseded by #1981