Function Tree

frontend/src/react/components/ui/tree.tsx:51–216

({
  data,
  renderNode,
  selectedIds,
  expandedIds,
  onSelect,
  onToggle,
  searchTerm,
  searchMatch,
  includeChildrenOnSearchMatch = false,
  height = 300,
  rowHeight = 28,
  indent = 16,
  onMove,
  disableDrag = true,
  disableDrop = true,
  className,
}: TreeProps<T>)

}

export function Tree<T>({
  data,
  renderNode,
  selectedIds,
  expandedIds,
  onSelect,
  onToggle,
  searchTerm,
  searchMatch,
  includeChildrenOnSearchMatch = false,
  height = 300,
  rowHeight = 28,
  indent = 16,
  onMove,
  disableDrag = true,
  disableDrop = true,
  className,
}: TreeProps<T>) {
  const { t } = useTranslation();
  const treeRef = useRef<TreeApi<TreeDataNode<T>> | null>(null);
  const prevExpandedRef = useRef<readonly string[] | undefined>(undefined);
  // react-arborist fires `onToggle` synchronously inside `tree.open()` /
  // `tree.close()` calls. If we forward those programmatic notifications to
  // the consumer's onToggle (which usually toggles the id in/out of the
  // expanded set), we get a feedback loop: setting expandedIds to N keys
  // → primitive opens N keys → Arborist fires onToggle for each → consumer
  // toggles keys back out → primitive closes them → onToggle fires again.
  // The flag below suppresses consumer notifications during the
  // programmatic batch so the consumer's state stays stable.
  const programmaticToggleRef = useRef(false);
  // When the user clicks the chevron, react-arborist toggles its INTERNAL
  // open state synchronously AND fires onToggle. The consumer then mirrors
  // that change in `expandedIds`, which fires the sync effect below — but
  // a re-applied `tree.open(id)` / `tree.close(id)` on the same id forces
  // react-arborist to recompute its visible-rows list a second time. For
  // a "Columns" node with hundreds of descendants that doubled the cost
  // of every collapse. Track the id the user just toggled and skip
  // syncing it on the next effect pass — react-arborist's internal state
  // is already in sync for that node.
  const userToggledIdRef = useRef<string | null>(null);

  // Sync expandedIds to the arborist tree programmatically.
  //
  // We use `useLayoutEffect` (not `useEffect`) deliberately: when the
  // consumer flips `expandedIds`, the FIRST commit shows the tree with
  // the new `expandedIds` prop but arborist's internal open-state is
  // still the OLD value, so the rendered rows haven't changed yet. The
  // sync below calls `tree.open(id)` / `tree.close(id)` which triggers
  // a SECOND commit inside arborist. With `useEffect` (passive), the
  // browser can paint the first (stale) commit before the second one
  // runs, and on some interactions only the next input event seemed to
  // give the browser a chance to flush the second paint — users saw
  // "click did nothing until I moved the mouse." `useLayoutEffect`
  // runs after commit but BEFORE paint, so the sync happens between
  // the two commits and the browser paints the final state in one go.
  useLayoutEffect(() => {
    const tree = treeRef.current;
    if (!tree) return;