Make ddg nodes circular and closer together

[everett980]

Which problem is this PR solving?

• DDG Nodes are fairly spread out, making it impossible to view many nodes at once while keeping text size legible.
• Additionally, rectangular nodes do not compliment future plans for node decoration.

Short description of the changes

• Make node spacing denser.
• Make nodes the smallest possible enclosing circle, instead of rectangles of fixed height.

Before:

After

Unfortunately blanking out the text fails to capture how much easier it is to read the nodes, and since the font isn't mono spaced it's hard to replace with stand in text.

[yurishkuro]

can you post screenshots?

[codecov]

Codecov Report

Merging #463 into master will increase coverage by 0.24%.
The diff coverage is 94.68%.

@@            Coverage Diff             @@
##           master     #463      +/-   ##
==========================================
+ Coverage   89.07%   89.31%   +0.24%     
==========================================
  Files         187      189       +2     
  Lines        4331     4410      +79     
  Branches     1045     1057      +12     
==========================================
+ Hits         3858     3939      +81     
+ Misses        427      425       -2     
  Partials       46       46

Impacted Files	Coverage Δ
...epDependencies/Graph/DdgNodeContent/node-icons.tsx	100% <ø> (ø)
...ui/src/components/DeepDependencies/Graph/index.tsx	66.66% <ø> (ø)	⬆️
...onents/DeepDependencies/Graph/getNodeRenderers.tsx	14.28% <0%> (+1.78%)	⬆️
...ndencies/Graph/DdgNodeContent/calc-positioning.tsx	100% <100%> (ø)
...eepDependencies/Graph/DdgNodeContent/constants.tsx	100% <100%> (ø)
.../jaeger-ui/src/components/common/BreakableText.tsx	83.33% <100%> (ø)	⬆️
...ts/DeepDependencies/Graph/DdgNodeContent/index.tsx	38.7% <83.33%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c86466f...b9eeea6. Read the comment docs.

[everett980]

Good point, updated with sanitized screenshots and sent you two with text.

[yurishkuro]

yeah, maybe replace service names with xxxx of appropriate length.

Also, it seems like the node radius changes based on the length of the service name. I think this will be pretty confusing, as it is pretty common visualization technique to vary node side based on some metric rather than the name length. I would rather let the long names bleed over, or move them below the circles.

[everett980]

Overflowing text will probably be problematic if we want to decorate nodes with a partially full band on the outside of the node.
Alternatively, we could size down the text (or truncate it with an ellipsis and a tool tip) if it makes the node too large.

[everett980]

scaling the nodes to the same size should be pretty straight forward, and will allow typical length strings to be represented legibly.

[andreynkravtsov]

Awesome work, great stuff