Behavior Tree Priority Explorer¶
Specification¶
The full specification below is extracted from Chapter 8: Adding an OLED Display and Expressive Behaviors.
Type: interactive-diagram
**sim-id:** behavior-tree-priority-explorer<br/>
**Library:** vis-network<br/>
**Template:** https://github.com/dmccreary/data-science-course/tree/main/docs/sims/duplicate-handling-decision-tree<br/>
**Status:** Specified
Learning objective: Students will *evaluate* (Bloom L5: Evaluate) which behavior a priority-based behavior tree selects when multiple sensor conditions are true simultaneously.
Canvas: 700x480px, responsive -- vis-network's built-in auto-resize handles reflow; explicitly call `network.setSize()` inside a `window.onresize` handler bound to the container's current dimensions.
Layout: a vis-network hierarchical tree with a root node "Choose Behavior" branching into four ranked child nodes in priority order top-to-bottom: "1. Safety Stop" (highest, red), "2. Obstacle Avoidance" (orange), "3. Line Following" (green), "4. Idle Face" (lowest, gray). Each behavior node has a small attached condition label (e.g., "Emergency button pressed").
Controls: four toggle switches (rendered as HTML checkboxes positioned beside the diagram, one per behavior) simulating whether that behavior's trigger condition is currently true; a "Run Selection" button that highlights, with a thick colored border, whichever enabled behavior has the highest priority.
Interaction: toggling any condition checkbox and clicking "Run Selection" highlights exactly one node -- the highest-priority node whose condition is currently enabled -- and dims the rest, with a text readout below the tree stating which behavior won and why (e.g., "Safety Stop is disabled; Obstacle Avoidance is enabled and outranks Line Following and Idle Face"). Clicking any tree node directly (via vis-network's `click` event) opens an infobox with a one-sentence description of that behavior, matching the surrounding chapter text. If no conditions are enabled, "Idle Face" is always highlighted as the fallback default.
Implementation: vis-network for the tree layout and click handling; priority-resolution logic implemented in plain JavaScript checking the four toggle states in fixed rank order and updating node color/border via `network.body.data.nodes.update()`. Keep node and edge data in a small hard-coded array so the tree structure stays easy to extend with more behaviors later.