WebInterface is overlapping with larger arbitration_graphs

[MarvinKlemp]

WebInterface is unusable with larger arbitration_graphs as nodes overlay each other, see example here:

type: PriorityArbitrator
name: R
invocationCondition: true
commitmentCondition: true
options:
  - type: Option
    behavior:
      type: PriorityArbitrator
      name: Uninitialized
      invocationCondition: true
      commitmentCondition: true
      options:
        - type: Option
          behavior:
            type: Behavior
            name: A
            invocationCondition: true
            commitmentCondition: true
          verificationResult: passed
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: B
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: C
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: D
            invocationCondition: true
            commitmentCondition: true
          flags:
            - INTERRUPTABLE
      activeBehavior: 0
    verificationResult: passed
    flags:
      - INTERRUPTABLE
  - type: Option
    behavior:
      type: PriorityArbitrator
      name: E
      invocationCondition: true
      commitmentCondition: false
      options:
        - type: Option
          behavior:
            type: Behavior
            name: F
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: G
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: PriorityArbitrator
            name: H
            invocationCondition: true
            commitmentCondition: false
            options:
              - type: Option
                behavior:
                  type: Behavior
                  name: I
                  invocationCondition: false
                  commitmentCondition: false
                flags:
                  - INTERRUPTABLE
              - type: Option
                behavior:
                  type: Behavior
                  name: J
                  invocationCondition: true
                  commitmentCondition: true
                flags:
                  - INTERRUPTABLE
          flags:
            - INTERRUPTABLE
    flags:
      - INTERRUPTABLE
activeBehavior: 0

[orzechow]

Dear @MarvinKlemp, thanks for reporting! Nice to see, that you're using our library 🚀

This issue is a known problem – caused by our attempt for a recursive compact rendering.
Unfortunately, it needs a refactoring of the graph drawing algorithm. Thus, I can't give you a time estimate for a fix.
Feel free to contribute, if you're into WebDev.

We're aware though, that this is a blocker for using the UI with large arbitration graphs and should be fixed!
Until then, you can fall back to the terminal printouts for debugging…

[MarvinKlemp]

Hey Pio, here is a very simple version based on react, d3 as js-yaml (thanks to gpt o3)

For the our use case we don't want to run a web-server on the robot itself, but have the GUI on a different machine.
So I actually have a "more advanced" version, where you have a hardcoded yaml in the webui, and just send the current state over a websocket, to save some bandwidth.

Furthermore this has some coloring for "bad" states, (such as uninitialized modules, error states, ...), which probably is not needed for the regular user, or I didn't see any information in the package to support such states.

I personally don't want to maintain anything, so feel free to use/adjust or leave in the dust here.
This version is more or less just POC, and doesnt support any of the priority vs cost vs etc. graphs.

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import yaml from "js-yaml";

/* ------------------------------------------------------------------ */
/*  Hard-coded YAML – swap with API later                             */
/* ------------------------------------------------------------------ */
const YAML_DATA = `type: PriorityArbitrator
name: TestGraph
invocationCondition: true
commitmentCondition: true
options:
  - type: Option
    behavior:
      type: PriorityArbitrator
      name: SomeStatus
      invocationCondition: true
      commitmentCondition: true
      options:
        - type: Option
          behavior:
            type: Behavior
            name: X
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: Y
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: Z
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: O
            invocationCondition: true
            commitmentCondition: true
          verificationResult: passed
          flags:
            - INTERRUPTABLE
      activeBehavior: 3
    verificationResult: passed
    flags:
      - INTERRUPTABLE
  - type: Option
    behavior:
      type: PriorityArbitrator
      name: YOLO
      invocationCondition: true
      commitmentCondition: false
      options:
        - type: Option
          behavior:
            type: PriorityArbitrator
            name: Hey There
            invocationCondition: false
            commitmentCondition: false
            options:
              - type: Option
                behavior:
                  type: Behavior
                  name: ABC
                  invocationCondition: false
                  commitmentCondition: false
                flags:
                  - INTERRUPTABLE
              - type: Option
                behavior:
                  type: Behavior
                  name: DEF
                  invocationCondition: false
                  commitmentCondition: false
                flags:
                  - INTERRUPTABLE
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: PriorityArbitrator
            name: GHIIIIIIIIIIIIIIIIII
            invocationCondition: false
            commitmentCondition: false
            options:
              - type: Option
                behavior:
                  type: Behavior
                  name: YKYKYKY
                  invocationCondition: false
                  commitmentCondition: false
                flags:
                  - INTERRUPTABLE
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: Behavior
            name: THis could be your Advertisement
            invocationCondition: false
            commitmentCondition: false
          flags:
            - INTERRUPTABLE
        - type: Option
          behavior:
            type: PriorityArbitrator
            name: hehe
            invocationCondition: true
            commitmentCondition: false
            options:
              - type: Option
                behavior:
                  type: Behavior
                  name: Follow Opponent
                  invocationCondition: false
                  commitmentCondition: false
                flags:
                  - INTERRUPTABLE
              - type: Option
                behavior:
                  type: Behavior
                  name: Static Raceline
                  invocationCondition: true
                  commitmentCondition: true
                flags:
                  - INTERRUPTABLE
          flags:
            - INTERRUPTABLE
    flags:
      - INTERRUPTABLE
activeBehavior: 0`;

/*  Branches that turn the active leaf red                            */
const ALERT_BRANCHES = ["SomeStatus"];

/*  Rectangle metrics                                                 */
const PAD_X = 30;
const MIN_W = 220;
const ROW_H = 70;
const CORNER = 18;
const CHAR_W = 12;
const labelW = (txt) => Math.max(MIN_W, txt.length * CHAR_W + PAD_X * 2);

export default function BehaviorGraphVisualization() {
  const svgRef = useRef(null);

  useEffect(() => {
    document.title = "X";

    /* ---------- 1. build hierarchy -------------------------------- */
    const root = d3.hierarchy(
      (function build(b, onPath = true) {
        const n = { name: b.name || "Unnamed", onPath, children: [] };
        if (b.options) {
          const active = b.activeBehavior ?? -1;
          b.options.forEach((opt, i) =>
            n.children.push(build(opt.behavior, onPath && i === active))
          );
        }
        return n;
      })(yaml.load(YAML_DATA))
    );

    /* ---------- 2. active leaf & palette -------------------------- */
    let activeLeaf = null;
    root.descendants().forEach((d) => {
      d.data.activeLeaf = !d.children?.length && d.data.onPath;
      if (d.data.activeLeaf) activeLeaf = d;
    });
    const isAlert = activeLeaf
      .ancestors()
      .some((a) => ALERT_BRANCHES.includes(a.data.name));
    const DEEP = isAlert ? "#e11d48" : "#0c7814";
    const SOFT = isAlert ? "#fee2e2" : "#bbf7d0";

    /* ---------- 3. widths per depth ------------------------------- */
    const depthW = new Map();
    root.descendants().forEach((d) =>
      depthW.set(d.depth, Math.max(depthW.get(d.depth) || 0, labelW(d.data.name)))
    );

    /* ---------- 4. layout ----------------------------------------- */
    d3
      .tree()
      .nodeSize([ROW_H + 40, Math.max(...deptminorhW.values()) + 240])
      .separation((a, b) => (a.parent === b.parent ? 1 : 1.5))(root);

    /* ---------- 5. compute viewBox -------------------------------- */
    let minX = 1e9,
      minY = 1e9,
      maxX = -1e9,
      maxY = -1e9;
    root.descendants().forEach((d) => {
      const hw = depthW.get(d.depth) / 2;
      minX = Math.min(minX, d.x - ROW_H / 2);
      maxX = Math.max(maxX, d.x + ROW_H / 2);
      minY = Math.min(minY, d.y - hw);
      maxY = Math.max(maxY, d.y + hw);
    });
    const M = 120,
      width = maxY - minY + M * 2,
      height = maxX - minX + M * 2;

    /* ---------- 6. svg root & defs -------------------------------- */
    const svg = d3
      .select(svgRef.current)
      .attr("viewBox", `0 0 ${width} ${height}`)
      .attr("preserveAspectRatio", "xMidYMid meet")
      .style("font", "20px 'Inter', sans-serif")
      .html(""); // clear

    const defs = svg.append("defs");
    [
      { id: "arrow-deep", color: DEEP },
      { id: "arrow-grey", color: "#d1d5db" },
    ].forEach(({ id, color }) =>
      defs
        .append("marker")
        .attr("id", id)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 10)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("fill", color)
    );

    const g = svg
      .append("g")
      .attr("transform", `translate(${M - minY},${M - minX})`);

    /* ---------- 7. links – draw GREY first, DEEP last ------------- */
    const linkGen = d3
      .linkHorizontal()
      .source((d) => [d.source.y + depthW.get(d.source.depth) / 2, d.source.x])
      .target((d) => [d.target.y - depthW.get(d.target.depth) / 2, d.target.x]);

    const allLinks = root.links();
    const offPath = allLinks.filter((l) => !l.target.data.onPath);
    const onPath  = allLinks.filter((l) =>  l.target.data.onPath);

    function drawLinks(selection, colour, marker) {
      g.append("g")
        .selectAll("path")
        .data(selection)
        .join("path")
        .attr("d", linkGen)
        .attr("fill", "none")
        .attr("stroke-width", 2)
        .attr("stroke", colour)
        .attr("marker-end", `url(#${marker})`);
    }
    drawLinks(offPath, "#d1d5db", "arrow-grey"); // grey first (below)
    drawLinks(onPath,  DEEP,    "arrow-deep");  // deep colour afterwards (on top)

    /* ---------- 8. nodes ------------------------------------------ */
    const node = g
      .append("g")
      .selectAll("g")
      .data(root.descendants())
      .join("g")
      .attr("transform", (d) => `translate(${d.y},${d.x})`);

    node
      .append("rect")
      .attr("x", (d) => -depthW.get(d.depth) / 2)
      .attr("y", -ROW_H / 2)
      .attr("width", (d) => depthW.get(d.depth))
      .attr("height", ROW_H)
      .attr("rx", CORNER)
      .attr("fill", (d) =>
        d.data.activeLeaf ? DEEP : d.data.onPath ? SOFT : "#f3f4f6"
      )
      .attr("stroke", (d) =>
        d.data.activeLeaf || d.data.onPath ? DEEP : "#9ca3af"
      )
      .attr("stroke-width", 1.5);

    node
      .append("text")
      .attr("x", (d) => -depthW.get(d.depth) / 2 + PAD_X)
      .attr("dy", "0.35em")
      .attr("text-anchor", "start")
      .style("font-weight", 700)
      .attr("fill", (d) => (d.data.activeLeaf ? "#ffffff" : "#374151"))
      .text((d) => d.data.name);
  }, []);

  return (
    <svg
      ref={svgRef}
      style={{ width: "100vw", height: "100vh", background: "#ffffff" }}
    />
  );
}