// Dataflow diagram, inputs → Światowid → outputs with animated particles
function DataflowDiagram() {
const [isMobile, setIsMobile] = React.useState(
typeof window !== 'undefined' && window.matchMedia('(max-width: 720px)').matches
);
React.useEffect(() => {
if (typeof window === 'undefined') return;
const mq = window.matchMedia('(max-width: 720px)');
const onChange = (e) => setIsMobile(e.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, []);
// Icon renderers, minimal line-art glyphs that match each node's concept.
// All draw at an origin of (0,0) inside a 20x20 box; positioned via transform.
const Icons = {
market: (
),
osint: (
),
sat: (
),
sigint: (
),
genesis: (
),
conflict: (
),
logistics: (
),
scenario: (
),
};
const NodeShape = ({ x, y, w = 140, h = 92, children, highlight, className = '' }) => {
const clip = 10;
const d = `M ${x + clip} ${y}
L ${x + w - clip} ${y}
L ${x + w} ${y + clip}
L ${x + w} ${y + h - clip}
L ${x + w - clip} ${y + h}
L ${x + clip} ${y + h}
L ${x} ${y + h - clip}
L ${x} ${y + clip} Z`;
const cx = x + w / 2;
const cy = y + h / 2;
return (
{children}
);
};
if (isMobile) {
return ;
}
return ;
}
function DesktopDataflow({ Icons, NodeShape }) {
const W = 1400, H = 640;
const CENTER = { x: 700, y: 320 };
const inputs = [
{ y: 46, label: 'PREDICTION\nMARKETS', icon: 'market' },
{ y: 161, label: 'OSINT /\nTELEGRAM', icon: 'osint' },
{ y: 391, label: 'SAT / AIS /\nADS-B', icon: 'sat' },
{ y: 506, label: 'SIGINT\nDIGEST', icon: 'sigint' },
];
const outputs = [
{ y: 46, label: 'MARKET\nGENESIS', icon: 'genesis' },
{ y: 161, label: 'CONFLICT\nFORECAST', icon: 'conflict' },
{ y: 391, label: 'LOGISTICS\nANOMALY', icon: 'logistics' },
{ y: 506, label: 'SCENARIO\nSIMULATION', icon: 'scenario' },
];
const INPUT_X = 140;
const INPUT_W = 180;
const OUTPUT_X = W - 140 - 180;
const OUTPUT_W = 180;
const NODE_H = 88;
const CX = CENTER.x - 120;
const CY = CENTER.y - 120;
const CW = 240;
const CH = 240;
const LEFT_JUNCTION_X = 540;
const RIGHT_JUNCTION_X = 860;
const R = 10;
const mkPathLeftToCenter = (srcY) => {
const x1 = INPUT_X + INPUT_W;
const y1 = srcY + NODE_H / 2;
const jx = LEFT_JUNCTION_X;
const y2 = CENTER.y;
const x2 = CX;
if (Math.abs(y1 - y2) < 1) {
return `M ${x1} ${y1} L ${x2} ${y1}`;
}
const down = y2 > y1;
const ySign = down ? 1 : -1;
return `M ${x1} ${y1} L ${jx - R} ${y1} Q ${jx} ${y1} ${jx} ${y1 + ySign * R} L ${jx} ${y2 - ySign * R} Q ${jx} ${y2} ${jx + R} ${y2} L ${x2} ${y2}`;
};
const mkPathCenterToRight = (dstY) => {
const x1 = CX + CW;
const y1 = CENTER.y;
const jx = RIGHT_JUNCTION_X;
const y2 = dstY + NODE_H / 2;
const x2 = OUTPUT_X;
if (Math.abs(y1 - y2) < 1) {
return `M ${x1} ${y1} L ${x2} ${y1}`;
}
const down = y2 > y1;
const ySign = down ? 1 : -1;
return `M ${x1} ${y1} L ${jx - R} ${y1} Q ${jx} ${y1} ${jx} ${y1 + ySign * R} L ${jx} ${y2 - ySign * R} Q ${jx} ${y2} ${jx + R} ${y2} L ${x2} ${y2}`;
};
// Per-path lengths so every line draws at the SAME tempo (px/sec).
// Shorter paths finish drawing earlier and just hold longer.
const leftLens = inputs.map((inp) => {
const srcY = inp.y + NODE_H / 2;
const hLen = (LEFT_JUNCTION_X - (INPUT_X + INPUT_W)) + (CX - LEFT_JUNCTION_X);
const vLen = Math.abs(CENTER.y - srcY);
return Math.ceil(hLen + vLen + 8);
});
const rightLens = outputs.map((out) => {
const dstY = out.y + NODE_H / 2;
const hLen = (RIGHT_JUNCTION_X - (CX + CW)) + (OUTPUT_X - RIGHT_JUNCTION_X);
const vLen = Math.abs(dstY - CENTER.y);
return Math.ceil(hLen + vLen + 8);
});
const MAX_LEFT = Math.max.apply(null, leftLens);
const MAX_RIGHT = Math.max.apply(null, rightLens);
// Coordinated 8s timeline:
// 0.0 → left phase begins (longest path takes the full 3s; shorter ones finish earlier)
// 3.0 → right phase begins (same px/sec speed, left holds)
// 6.0 → all 8 lines glow together
// 7.5 → fade out (left-to-right via negative offset)
// 7.8 → rest
// 8.0 → loop
const TOTAL = 7;
const LEFT_PHASE = 2.5;
const RIGHT_PHASE = 2.5;
return (
);
}
function MobileDataflow({ Icons, NodeShape }) {
// Single-row layout: 4 inputs → bus → core → bus → 4 outputs
const W = 720, H = 780;
const NODE_W = 170, NODE_H = 104;
// 4 nodes across: 170*4 + 6*3 + 11*2 = 720
const COLS_X = [11, 187, 363, 539];
const colCenter = (c) => COLS_X[c] + NODE_W / 2;
const inputs = [
{ col: 0, label: 'PREDICTION\nMARKETS', icon: 'market' },
{ col: 1, label: 'OSINT /\nTELEGRAM', icon: 'osint' },
{ col: 2, label: 'SAT / AIS /\nADS-B', icon: 'sat' },
{ col: 3, label: 'SIGINT\nDIGEST', icon: 'sigint' },
];
const outputs = [
{ col: 0, label: 'MARKET\nGENESIS', icon: 'genesis' },
{ col: 1, label: 'CONFLICT\nFORECAST', icon: 'conflict' },
{ col: 2, label: 'LOGISTICS\nANOMALY', icon: 'logistics' },
{ col: 3, label: 'SCENARIO\nSIMULATION', icon: 'scenario' },
];
const IN_Y = 24;
const IN_BOTTOM = IN_Y + NODE_H; // 128
const IN_BUS_Y = 180;
const CX = 240, CY = 230, CW = 240, CH = 240;
const CORE_CX = CX + CW / 2; // 360
const CORE_TOP_Y = CY; // 230
const CORE_BOT_Y = CY + CH; // 470
const OUT_BUS_Y = 530;
const OUT_Y = 580;
const OUT_TOP = OUT_Y;
const R = 8;
const mkPathIn = (col) => {
const xi = colCenter(col);
const y1 = IN_BOTTOM;
const busY = IN_BUS_Y;
const cx = CORE_CX;
const y2 = CORE_TOP_Y;
if (Math.abs(xi - cx) < 1) return `M ${xi} ${y1} L ${cx} ${y2}`;
const right = cx > xi;
const s = right ? 1 : -1;
return `M ${xi} ${y1} L ${xi} ${busY - R} Q ${xi} ${busY} ${xi + s * R} ${busY} L ${cx - s * R} ${busY} Q ${cx} ${busY} ${cx} ${busY + R} L ${cx} ${y2}`;
};
const mkPathOut = (col) => {
const x2 = colCenter(col);
const y2 = OUT_TOP;
const busY = OUT_BUS_Y;
const cx = CORE_CX;
const y1 = CORE_BOT_Y;
if (Math.abs(cx - x2) < 1) return `M ${cx} ${y1} L ${x2} ${y2}`;
const right = x2 > cx;
const s = right ? 1 : -1;
return `M ${cx} ${y1} L ${cx} ${busY - R} Q ${cx} ${busY} ${cx + s * R} ${busY} L ${x2 - s * R} ${busY} Q ${x2} ${busY} ${x2} ${busY + R} L ${x2} ${y2}`;
};
// Per-path lengths so each line draws at the same px/sec tempo.
const inLens = inputs.map((inp) => {
const xi = colCenter(inp.col);
const v1 = IN_BUS_Y - IN_BOTTOM;
const h = Math.abs(CORE_CX - xi);
const v2 = CORE_TOP_Y - IN_BUS_Y;
return Math.ceil(v1 + h + v2 + 8);
});
const outLens = outputs.map((out) => {
const xi = colCenter(out.col);
const v1 = OUT_BUS_Y - CORE_BOT_Y;
const h = Math.abs(CORE_CX - xi);
const v2 = OUT_TOP - OUT_BUS_Y;
return Math.ceil(v1 + h + v2 + 8);
});
const MAX_IN = Math.max.apply(null, inLens);
const MAX_OUT = Math.max.apply(null, outLens);
const TOTAL = 7;
const LEFT_PHASE = 2.5;
const RIGHT_PHASE = 2.5;
// Icon on left, 2-line label to the right, vertically centered
const renderNode = (node, x, y) => {
const iconScale = 1.6; // 32×32 rendered
const iconX = x + 12;
const iconY = y + NODE_H / 2 - 16;
const labelX = x + 52;
const cy = y + NODE_H / 2;
const lines = node.label.split('\n');
const lineH = 22;
return (
{Icons[node.icon]}
{lines.map((ln, k) => {
const totalH = lines.length * lineH;
const yy = cy - totalH / 2 + 16 + k * lineH;
return (
{ln}
);
})}
);
};
return (
);
}
Object.assign(window, { DataflowDiagram });