// Pipeline: the interactive centerpiece.
// Features: animated flow, draggable bottleneck, clickable stages, metaphor variants.
const { useState, useRef, useEffect, useMemo, useCallback } = React;
// ---------- Shared hook: spring animation ----------
function useSpring(target, { stiffness = 120, damping = 18 } = {}) {
const [value, setValue] = useState(target);
const vRef = useRef(target);
const velRef = useRef(0);
const rafRef = useRef(null);
const lastRef = useRef(performance.now());
useEffect(() => {
const tick = (now) => {
const dt = Math.min(0.033, (now - lastRef.current) / 1000);
lastRef.current = now;
const diff = target - vRef.current;
const accel = stiffness * diff - damping * velRef.current;
velRef.current += accel * dt;
vRef.current += velRef.current * dt;
if (Math.abs(diff) < 0.0005 && Math.abs(velRef.current) < 0.0005) {
vRef.current = target;
velRef.current = 0;
setValue(target);
return;
}
setValue(vRef.current);
rafRef.current = requestAnimationFrame(tick);
};
lastRef.current = performance.now();
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [target, stiffness, damping]);
return value;
}
// ---------- Flowing particles along the pipeline ----------
function FlowingParticles({ width, count = 7, bottleneckX = null, severity = 0, method = false }) {
const [t, setT] = useState(0);
useEffect(() => {
let raf;
const start = performance.now();
const tick = (now) => {
setT((now - start) / 1000);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const dots = [];
for (let i = 0; i < count; i++) {
const phase = (i / count) + t * (method ? 0.18 : 0.13);
let p = phase % 1;
// Bottleneck slowdown / pileup
if (bottleneckX !== null && !method) {
const bX = bottleneckX / width;
const dist = p - bX;
// slow down before the bottleneck
if (dist > -0.12 && dist < 0) {
const slow = 1 - (0.12 + dist) / 0.12;
p = bX + (dist * (1 - severity * 0.6 * slow));
}
}
const x = p * width;
const opacity = method ? 0.9 : (bottleneckX !== null && Math.abs(x - bottleneckX) < 40 ? 0.4 : 0.85);
dots.push(
);
}
return {dots};
}
// ---------- Pipeline (flow metaphor) ----------
function PipelineFlow({
bottleneckIdx,
onBottleneckChange,
activeStage,
onStageClick,
method,
draggable = true,
}) {
const W = 1100;
const H = 280;
const pad = 60;
const trackY = 160;
const stepW = (W - pad * 2) / (STAGES.length - 1);
const stageX = (i) => pad + i * stepW;
const bottleneckX = bottleneckIdx !== null && bottleneckIdx !== undefined
? stageX(bottleneckIdx)
: null;
const svgRef = useRef(null);
const [dragging, setDragging] = useState(false);
const handlePointer = useCallback(
(clientX) => {
if (!svgRef.current) return;
const rect = svgRef.current.getBoundingClientRect();
const xInSvg = ((clientX - rect.left) / rect.width) * W;
// snap to nearest stage
const ratio = (xInSvg - pad) / stepW;
const idx = Math.max(0, Math.min(STAGES.length - 1, Math.round(ratio)));
onBottleneckChange(idx);
},
[onBottleneckChange]
);
useEffect(() => {
if (!dragging) return;
const move = (e) => {
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
handlePointer(clientX);
};
const up = () => setDragging(false);
window.addEventListener("mousemove", move);
window.addEventListener("mouseup", up);
window.addEventListener("touchmove", move);
window.addEventListener("touchend", up);
return () => {
window.removeEventListener("mousemove", move);
window.removeEventListener("mouseup", up);
window.removeEventListener("touchmove", move);
window.removeEventListener("touchend", up);
};
}, [dragging, handlePointer]);
const markerX = useSpring(bottleneckX ?? pad, { stiffness: 200, damping: 22 });
return (
);
}
// ---------- Pipeline (circuit metaphor) ----------
function PipelineCircuit({ bottleneckIdx, onStageClick, activeStage, method }) {
const W = 1100;
const H = 280;
const pad = 60;
const trackY = 160;
const stepW = (W - pad * 2) / (STAGES.length - 1);
const stageX = (i) => pad + i * stepW;
return (
);
}
// ---------- Pipeline (stack metaphor) ----------
function PipelineStack({ bottleneckIdx, onStageClick, activeStage, method }) {
const W = 1100;
const rowH = 34;
const H = rowH * STAGES.length + 40;
return (
);
}
// ---------- Main exported Pipeline ----------
function Pipeline({
bottleneckIdx,
onBottleneckChange,
activeStage,
onStageClick,
metaphor = "flow",
method = false,
draggable = true,
}) {
if (metaphor === "circuit")
return ;
if (metaphor === "stack")
return ;
return (
);
}
Object.assign(window, { Pipeline, useSpring });