search

TBD54566975 / ftl

FTL - Towards a 𝝺-calculus for large-scale systems
https://tbd54566975.github.io/ftl/
Apache License 2.0
23 stars 7 forks source link

Select and implement node graph component #2459

Open wesbillman opened 2 months ago

wesbillman commented 2 months ago

We need something better for the current "Console" page which is showing a node graph of the system.

One option might be Apache ECharts.

Ideally, we can view everything about the system visually with some basic interactions to start. I think being able to show a popup window for different nodes, or showing in the right sidebar would be a useful start.

Grafana has a nice "Service Graph" as well, which is nice and simple with popups when clicking on Nodes. Screenshot 2024-08-20 at 8 22 42 AM Screenshot 2024-08-20 at 8 22 37 AM

deniseli commented 1 week ago

Prototyped a bit with https://github.com/hustcc/echarts-for-react. This works pretty well for layout and basic functionality, but it's very difficult to get more complex data into the nodes themselves, so it'd be hard to visualize things like "here are all the decls of type T in each of these modules". It really bakes in the assumption that each node represents a singular numeric value, and each node's label will be a simple string. Link if anyone wants to try it: https://github.com/TBD54566975/ftl/compare/dli/graph-sandbox?expand=1

What was really nice with echarts was having an auto layout mechanism. It looks like there are actually a few options for auto layout with ReactFlow documented here, so I'll take a stab at that next, starting with Dagre. I suspect we could even get subgraphs (i.e. decls as nodes grouped within a module) to lay out nicely by running Dagre recursively, but I'll skip prototyping that since it's such a long-tail sort of feature. Implementation notes for future me: compute size bounds for each subgraph as a function (sqrt?) of node count, make each subgraph a parent node assigned aforementioned size, tell Dagre to lay out the parent nodes, within the full page, and then iterate over each parent node, telling Dagre to lay out the child nodes, but constraining the perimeter to just the space for that parent node.

Rendering nice little popups should be easy enough, compared to all the layout math, so if I can get that working well, we could stick to ReactFlow (which seems like the best of all the options for actually rendering complex nodes).

deniseli commented 1 week ago

Dagre was nice until I got to laying out the decls within the module. It doesn't support subflows at all. Switching to Elk.