gpui-kit GitHub

Scenes

node-graph

Builds GraphNode NodeGraph

node-graph in the dark theme
studio-dark
node-graph in the light theme
studio-light

The code that drew it

A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.

fn node_graph(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .child(
            div().w(px(860.0)).h(px(300.0)).child(
                NodeGraph::new("scene.graph")
                    .node(
                        GraphNode::new("scene.graph.plan", "Plan")
                            .state(NodeState::Succeeded)
                            .metric("tokens", "4.1k")
                            .metric("took", "2.4s"),
                        24.0,
                        24.0,
                    )
                    .node(
                        GraphNode::new("scene.graph.edit", "Edit files")
                            .state(NodeState::Failed)
                            .action("write crates/gpui-kit/src/lib.rs")
                            .metric("tokens", "12.7k")
                            .diff(Diff::new(48, 12)),
                        300.0,
                        24.0,
                    )
                    .node(
                        GraphNode::new("scene.graph.test", "Run tests")
                            .state(NodeState::Running)
                            .action("cargo test --workspace")
                            .metric("took", "18s"),
                        576.0,
                        24.0,
                    )
                    .node(
                        GraphNode::new("scene.graph.publish", "Publish").state(NodeState::Pending),
                        576.0,
                        170.0,
                    )
                    .node(
                        GraphNode::new("scene.graph.deploy", "Deploy")
                            .state(NodeState::Refused)
                            .action("host declined: no credentials"),
                        300.0,
                        170.0,
                    )
                    .edge(GraphEdge::new("scene.graph.plan", "scene.graph.edit"))
                    .edge(GraphEdge::new("scene.graph.edit", "scene.graph.test"))
                    .edge(GraphEdge::new("scene.graph.publish", "scene.graph.deploy"))
                    .edge(GraphEdge::new("scene.graph.test", "scene.graph.edit").feedback()),
            ),
        )
        .into_any_element()
}