Phoenix LiveView hook for a live board's container (spec/10 §18, spec/15 §9, D-146).

BoardHook does two things for Visualize.Components.Board:

• The width. It pushes the container's width once it has held for the debounce period, and on mount, so the board process draws its cells at their boxes and the grid reflows below the board's breakpoint (spec/15 §1.6). The push goes to the component that rendered the container (pushEventTo), so the host's LiveView handles nothing.
• The order across cells (spec/14 §21.5). Each cell, an element carrying data-vis-cell, is one tab stop. With focus on a cell the arrow keys move to the next and the previous cell in reading order — the order the cells are rendered in — and Home and End to the first and the last; Enter moves focus into the cell's chart, its first descendant with a tabindex. A key pressed inside a chart is the chart's: the hook acts only on a key whose target is the cell itself. Escape inside a chart is KeyboardHook's, which hands focus back to the cell.
• The selection (spec/15 §13.2). While the container carries data-board-selection, an Escape anywhere in it — on a cell or inside a chart — pushes the clear event to the component, so one Escape inside a chart both returns focus to the cell and clears the board's selection.

Usage

<section id="ops" phx-hook="BoardHook" data-board-event="resize">
  <article data-vis-cell="latency" tabindex="0">…</article>
  <article data-vis-cell="errors" tabindex="0">…</article>
</section>

Configuration

• data-board-event - the event pushed with {width} (default: "resize")
• data-board-debounce - milliseconds the width must hold before it is pushed (default: 150)
• data-board-clear-event - the event Escape pushes to clear the selection (default: "select_clear")
• data-board-selection - set by the component while the board holds a selection