// harness-demo.jsx — animated Excel wire list -> harness diagram (hero signature) // Output panel shows the REAL Tractus output (assets/tr-1001-001-sheet2.png, from draw.io), // revealed with a JS-driven plotter-style wipe. // NOTE: no CSS transitions/animations on the reveal — this engine freezes them mid-flight. // All motion is driven by requestAnimationFrame updating inline styles. const { useState, useEffect, useRef, useCallback } = React; const WIRE_ROWS = [ { id: "W1001", from: "J1-3", to: "J2-3", ga: "24", sig: "CAN_H", hex: "#e8453c" }, { id: "W1002", from: "J1-4", to: "J2-4", ga: "24", sig: "CAN_L", hex: "#e8453c" }, { id: "W1003", from: "J1-1", to: "J2-1", ga: "20", sig: "PWR_28V", hex: "#2bb5a0" }, { id: "W1004", from: "J1-2", to: "J2-2", ga: "20", sig: "GND", hex: "#2b3cf2" }, { id: "W1005", from: "J1-8", to: "J2-5", ga: "22", sig: "5V", hex: "#f019d8" }, { id: "W1006", from: "J1-9", to: "J2-7", ga: "22", sig: "RTN_A", hex: "#39e6e6" }, ]; function HarnessDemo() { const [phase, setPhase] = useState("idle"); // idle | reading | generating | done const [readRow, setReadRow] = useState(-1); const [clock, setClock] = useState(0); const [progress, setProgress] = useState(0); const [draw, setDraw] = useState(0); // 0..1 wipe progress, rAF-driven const ref = useRef(null); const timers = useRef([]); const started = useRef(false); const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; }; const push = (fn, ms) => timers.current.push(setTimeout(fn, ms)); const run = useCallback(() => { clearTimers(); setPhase("reading"); setReadRow(-1); setProgress(0); setClock(0); setDraw(0); WIRE_ROWS.forEach((_, i) => push(() => setReadRow(i), 140 + i * 130)); const genStart = 140 + WIRE_ROWS.length * 130 + 220; push(() => { setPhase("generating"); let p = 0; const iv = setInterval(() => { p += 1; setProgress(Math.min(100, p * 4)); setClock(Math.min(32, Math.round(p * 1.28))); if (p >= 25) clearInterval(iv); }, 46); timers.current.push(() => clearInterval(iv)); }, genStart); push(() => { setProgress(100); setClock(32); setPhase("done"); }, genStart + 1280); }, []); useEffect(() => { if (started.current) return; started.current = true; const tmo = setTimeout(run, 650); return () => { clearTimeout(tmo); clearTimers(); }; }, [run]); // plotter wipe: rAF advances `draw` 0→1 once generation completes useEffect(() => { if (phase !== "done") return; let raf = 0, start = null; const D = 2100; const step = (ts) => { if (start === null) start = ts; const p = Math.min(1, (ts - start) / D); setDraw(p); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); const safety = setTimeout(() => { cancelAnimationFrame(raf); setDraw(1); }, D + 600); return () => { cancelAnimationFrame(raf); clearTimeout(safety); }; }, [phase]); const statusMap = { idle: ["STANDBY", "Awaiting wire list"], reading: ["READING", "Parsing wire_list.xlsx · 11 circuits"], generating: ["ROUTING", "Routing 11 circuits + DRC"], done: ["COMPLETE", "wire_list.drawio"], }; const [st, stSub] = statusMap[phase]; const mmss = `00:${String(clock).padStart(2, "0")}`; const wiping = phase === "done" && draw < 1; return (
{/* INPUT — Excel */}
X wire_list.xlsx A{Math.max(1, readRow + 2)}
{["A", "B", "C", "D", "E"].map((c) => {c})}
1 WIREFROMTOGASIGNAL
{WIRE_ROWS.map((r, i) => (
{i + 2} {r.id} {r.from} {r.to} {r.ga} {r.sig}
))}
…+ 5 more circuits
{/* CENTER */}
{/* OUTPUT — the real drawing, plotter-wiped in */}
{st} {stSub}
Tractus output: TR-1001-001 wiring diagram, J1–J3 circuits 0 ? 1 : 0, }} /> {wiping &&
} {phase !== "done" && (
TR-1001-001 · SHEET 2 OF 4
)} {phase === "generating" && (
{mmss}
)}
{phase === "done" ? "ACTUAL OUTPUT · EDITABLE DRAW.IO · 32 SECONDS" : "LIVE GENERATION"}
); } window.HarnessDemo = HarnessDemo;