deepfence / deepfence/ThreatMapper

G6 issues in the topology canvas

Open
#60 2 comments 0 reactions 1 assignee Claimed by @manV View on GitHub
enhancement needs-triage
Dominant language
TypeScript
Stars
5.3k
Forks
631
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**

Our current g6 based topology canvas works, but has some known limitations.

The graph uses the gForce layout provided by G6, a gravity based layout algorithm where nodes attract and repulse each other. The implementation isn't great: it's not as fast as it could be, and it's pretty fragile (if a layout invariant gets violated, the whole layout bombs out).

In order to make gForce work for our use cases, we've applied a few hacks. The main thing we did is we split the graph in sub-graphs, where each combo is laid out independently. This simplifies the force calculations, speeding up rendering and avoiding large graphs from collapsing under their own gravity. Long term, we should write a custom radial layout algorithm, where the nodes are positioned around a center and spaced out evenly.

The other big limitation in G6 is that combos are not great. Only the gForce and comboForce layouts are combo-aware, the other layout algorithms can't work with combos at all; they have a few bugs (eg: calculating the padding area between the content and the perimeter seems completely broken); and most importantly they don't fit in the two-level depth design G6 currently uses. G6 usually renders nodes in foreground and edges in background (so edges don't overlap nodes). It provides only those two depth levels, it doesn't have an arbitrary deep z-index like the DOM or OpenGL. This is a problem for us with our current design since if we have overlapping combos - which will be very common at scale, G6 is pretty much designed to flatten the combos, effectively visually merging them which is not our UI is intended to work.

To solve the combo merging problem, G6 should be extended to support more z-index levels (this is a very big change, that will likely require some back and forth on design and implementation with the G6 developers).

**Components/Services**

- [x] UI/Frontend
- [ ] API/Backend
- [ ] Agent
- [ ] Deployment/YAMLs
- [ ] CI/CD Integration
- [ ] Other (specify)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.