/* global React, PageShell, AGGIE_CATALOG, LucideIcon */ /* * AggieTree.jsx — Batch E: Tree family. * * Anatomy informed by Ant Design Tree, Microsoft Fluent 2 Web Tree (3 frames), * and Microsoft Fabric Tree: * - indented hierarchy with disclosure chevron (rotates 90° on expand) * - selection (single + multi-with-checkboxes) * - drag affordance (grip on hover, drop indicator line) * - lazy-load state (loader spinner on a parent node) * * Identity stays TUX. Maroon for selected/focused; warm-neutral surfaces; * Open Sans node labels; JetBrains Mono for counts and IDs. * * Helper prefix: TR. */ const { useState: _trUseState } = React; function TRBox({ label, padded = true, dark = false, children }) { return (
{label} on {dark ? "dark" : "light"}
{children}
); } function TRSectionLabel({ children }) { return
{children}
; } function TRIntro({ children }) { return
{children}
; } function TRSpecRow({ children }) { return
{children}
; } function TRSpec({ label, value, note }) { return (
{label}
{value}
{note &&
{note}
}
); } // ─── Sample data: TTI corridor breakdown ──────────────────────────────── const TR_DATA = [ { id: "tx", label: "Texas (statewide)", count: 184, children: [ { id: "i35", label: "I-35 corridor", count: 42, defaultExpanded: true, children: [ { id: "i35-aus", label: "Austin segment", count: 18, defaultExpanded: true, children: [ { id: "p2841", label: "I-35 Capital Express", leaf: true, mono: "PRJ-2841", status: "Active" }, { id: "p2853", label: "Williamson reliever", leaf: true, mono: "PRJ-2853", status: "Active" }, { id: "p2861", label: "Hays mainlane reconst.", leaf: true, mono: "PRJ-2861", status: "Risk" }, ]}, { id: "i35-sat", label: "San Antonio segment", count: 14, children: [] }, { id: "i35-dfw", label: "DFW segment", count: 10, children: [] }, ]}, { id: "i10", label: "I-10 corridor", count: 31, children: [ { id: "i10-elp", label: "El Paso segment", count: 9, children: [] }, { id: "i10-hou", label: "Houston segment", count: 12, children: [] }, { id: "i10-sat", label: "San Antonio segment", count: 10, children: [] }, ]}, { id: "us59", label: "US-59 / I-69 corridor", count: 28, children: [] }, { id: "rural", label: "Rural FM network", count: 47, children: [] }, ]}, ]; // ─── Single-select tree ───────────────────────────────────────────────── function TRSingleTree({ data, selectedId: initSel = "p2841", dark = false }) { const [selected, setSelected] = _trUseState(initSel); const [expanded, setExpanded] = _trUseState(() => { const ex = new Set(); const walk = (nodes) => nodes && nodes.forEach(n => { if (n.defaultExpanded) ex.add(n.id); walk(n.children); }); walk(data); return ex; }); const toggle = (id) => setExpanded(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); return ( ); } function TRNode({ node, depth, selected, onSelect, expanded, onToggle, checked, onCheck, dark, drag }) { const isLeaf = !!node.leaf; const isOpen = expanded.has(node.id); const isSel = selected === node.id; const text = dark ? "rgba(255,255,255,0.92)" : "var(--text-primary)"; const textSec = dark ? "rgba(255,255,255,0.72)" : "var(--text-secondary)"; const muted = dark ? "rgba(255,255,255,0.55)" : "var(--text-muted)"; const selBg = dark ? "rgba(217,155,126,0.16)" : "color-mix(in srgb, var(--brand-primary) 8%, transparent)"; const selText = dark ? "rgba(255,255,255,0.98)" : "var(--brand-primary)"; const hoverBg = dark ? "rgba(255,255,255,0.04)" : "color-mix(in srgb, var(--brand-primary) 3%, transparent)"; return (
  • onSelect && onSelect(node.id)} style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 10px 5px 0", paddingLeft: 10 + depth * 18, background: isSel ? selBg : "transparent", color: isSel ? selText : (isLeaf ? textSec : text), fontWeight: isSel ? 600 : (isLeaf ? 400 : 500), fontFamily: isSel || !isLeaf ? "var(--font-body-bold)" : "var(--font-body)", cursor: "pointer", fontSize: "0.85rem", borderLeft: `2px solid ${isSel ? "var(--brand-primary)" : "transparent"}`, transition: "background 100ms", }} onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = hoverBg; }} onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = "transparent"; }} > {/* Chevron */} {isLeaf ? ( ) : ( )} {/* Optional checkbox */} {onCheck && { e.stopPropagation(); onCheck(node.id); }} dark={dark} />} {/* Drag grip */} {drag && } {/* Icon (folder/leaf) */} {isLeaf ? : } {/* Label */} {node.label} {/* Right side: mono ID, count, status */} {node.mono && {node.mono}} {node.status && {node.status} } {node.count != null && ( {node.count} )} {node.loading && }
    {/* Children */} {!isLeaf && isOpen && node.children && node.children.length > 0 && ( )} {!isLeaf && isOpen && (!node.children || node.children.length === 0) && !node.loading && (
    (empty)
    )}
    • ); } const TR_STATUS = { Active: "var(--color-success)", Risk: "var(--color-error)", Hold: "var(--brand-accent)", Closed: "var(--text-muted)" }; // ─── Mini checkbox for tree (smaller than form-core checkbox) ─────────── function TRMiniCheckbox({ checked, indeterminate, onChange, dark }) { const filled = checked || indeterminate; return ( ); } // ─── Multi-select tree (with checkboxes) ──────────────────────────────── function TRMultiTree({ data, dark = false }) { const [selected] = _trUseState("i35"); const [expanded, setExpanded] = _trUseState(new Set(["tx", "i35", "i35-aus"])); const [checked, setChecked] = _trUseState(new Set(["i35-aus", "p2841", "p2853", "p2861"])); const indet = new Set(["i35", "tx"]); // demo state — partial children checked.indet = indet; const toggle = (id) => setExpanded(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const onCheck = (id) => setChecked(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); n.indet = indet; return n; }); return ( ); } // ─── Lazy-load state ──────────────────────────────────────────────────── function TRLazyTree() { const data = [ { id: "tx", label: "Texas (statewide)", count: 184, children: [ { id: "i35", label: "I-35 corridor", count: 42, children: [ { id: "i35-aus", label: "Austin segment (loading…)", loading: true, children: null }, ], defaultExpanded: true }, { id: "i10", label: "I-10 corridor", count: 31, children: [] }, ]}, ]; const [expanded, setExpanded] = _trUseState(new Set(["tx", "i35"])); const toggle = (id) => setExpanded(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); return ( ); } // ─── With drag affordance ─────────────────────────────────────────────── function TRDragTree() { const data = [ { id: "tx", label: "Texas (statewide)", count: 184, children: [ { id: "i35", label: "I-35 corridor", count: 42, defaultExpanded: true, children: [ { id: "p2841", label: "I-35 Capital Express", leaf: true, mono: "PRJ-2841", status: "Active" }, { id: "p2853", label: "Williamson reliever", leaf: true, mono: "PRJ-2853", status: "Active" }, { id: "p2861", label: "Hays mainlane reconst.", leaf: true, mono: "PRJ-2861", status: "Risk" }, ]}, { id: "i10", label: "I-10 corridor", count: 31, children: [] }, ]}, ]; const [selected, setSelected] = _trUseState("p2853"); const [expanded, setExpanded] = _trUseState(new Set(["tx", "i35"])); const toggle = (id) => setExpanded(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); return ( <>
    Drop indicator: a 2px maroon line appears above or below the target row during drag-over (not shown statically).
    ); } // ──────────────────────────────────────────────────────────────────────── // PAGE // ──────────────────────────────────────────────────────────────────────── function TreePage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "tree"); return ( Indented hierarchy with expand/collapse for corridor breakdowns, file trees, taxonomy browsers, and faceted filters. Single-select for navigation, multi-select with checkboxes for bulk operations, lazy-load for large server-side trees, and drag affordance for reorderable hierarchies. Lineage: anatomy from Ant Design Tree and Microsoft Fabric Tree — TUX type, color, and focus rules throughout. Single-select · navigation
    Multi-select · bulk operations
    Indeterminate: I-35 corridor and Texas (statewide) show partial-fill () because some but not all descendants are checked.
    Lazy load · async children
    Drag affordance
    ); } window.TreePage = TreePage;