semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/stream/layouts/chordLayoutPlugin.js

@@ -0,0 +1,352 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chordLayoutPlugin = void 0;
+const d3_chord_1 = require("d3-chord");
+const d3_shape_1 = require("d3-shape");
+const d3_scale_chromatic_1 = require("d3-scale-chromatic");
+const DEFAULT_PALETTE = d3_scale_chromatic_1.schemeCategory10;
+/**
+ * Chord layout plugin — uses d3-chord for layout computation.
+ *
+ * Produces arc scene nodes for chord group arcs and ribbon scene edges
+ * for the chord ribbons. Labels are positioned outside arcs.
+ */
+exports.chordLayoutPlugin = {
+    supportsStreaming: false,
+    hierarchical: false,
+    computeLayout(nodes, edges, config, size) {
+        if (nodes.length === 0)
+            return;
+        const { padAngle = 0.01, groupWidth = 20, sortGroups } = config;
+        const radius = Math.min(size[0], size[1]) / 2;
+        const innerRadius = radius - groupWidth;
+        const cx = size[0] / 2;
+        const cy = size[1] / 2;
+        const valueAccessorFn = resolveValueAccessor(config.valueAccessor);
+        // ── Build node index map ──────────────────────────────────────────
+        const nodeIndex = new Map();
+        for (let i = 0; i < nodes.length; i++) {
+            nodeIndex.set(nodes[i].id, i);
+        }
+        // ── Build NxN matrix from edges ───────────────────────────────────
+        const n = nodes.length;
+        const matrix = Array.from({ length: n }, () => Array.from({ length: n }, () => 0));
+        for (const edge of edges) {
+            const sourceId = typeof edge.source === "string" ? edge.source : edge.source.id;
+            const targetId = typeof edge.target === "string" ? edge.target : edge.target.id;
+            const si = nodeIndex.get(sourceId);
+            const ti = nodeIndex.get(targetId);
+            if (si === undefined || ti === undefined)
+                continue;
+            const value = valueAccessorFn(edge);
+            matrix[si][ti] = value;
+        }
+        // ── Run chord generator ───────────────────────────────────────────
+        const chordGenerator = (0, d3_chord_1.chord)().padAngle(padAngle);
+        if (sortGroups) {
+            chordGenerator.sortGroups(sortGroups);
+        }
+        const chords = chordGenerator(matrix);
+        const groups = chords.groups;
+        // ── Arc generator for centroid calculation ────────────────────────
+        const arcGenerator = (0, d3_shape_1.arc)()
+            .innerRadius(innerRadius)
+            .outerRadius(radius);
+        // ── Set node positions from arc centroids ────────────────────────
+        for (const group of groups) {
+            const node = nodes[group.index];
+            const centroid = arcGenerator.centroid(group);
+            node.x = centroid[0] + cx;
+            node.y = centroid[1] + cy;
+            node.arcData = {
+                startAngle: group.startAngle,
+                endAngle: group.endAngle
+            };
+        }
+        // ── Resolve edge source/target to node references ─────────────────
+        // The HOC edge style functions need d.source/d.target as node objects
+        // (not string IDs) so they can look up colors via d.source.data.
+        for (const edge of edges) {
+            const srcId = typeof edge.source === "string" ? edge.source : edge.source.id;
+            const tgtId = typeof edge.target === "string" ? edge.target : edge.target.id;
+            const srcNode = nodes.find((n) => n.id === srcId);
+            const tgtNode = nodes.find((n) => n.id === tgtId);
+            if (srcNode)
+                edge.source = srcNode;
+            if (tgtNode)
+                edge.target = tgtNode;
+        }
+        // ── Stash chord data on edges for buildScene ─────────────────────
+        for (const generatedChord of chords) {
+            const sourceId = nodes[generatedChord.source.index].id;
+            const targetId = nodes[generatedChord.target.index].id;
+            // d3-chord always emits source.index < target.index, which may
+            // not match the original edge direction. Try both key orders.
+            const matchedEdge = edges.find((e) => {
+                const eSrc = typeof e.source === "string" ? e.source : e.source.id;
+                const eTgt = typeof e.target === "string" ? e.target : e.target.id;
+                return ((eSrc === sourceId && eTgt === targetId) ||
+                    (eSrc === targetId && eTgt === sourceId));
+            });
+            if (matchedEdge) {
+                ;
+                matchedEdge.chordData = generatedChord;
+            }
+        }
+    },
+    buildScene(nodes, edges, config, size) {
+        const { groupWidth = 20, edgeOpacity = 0.5 } = config;
+        const radius = Math.min(size[0], size[1]) / 2;
+        const innerRadius = radius - groupWidth;
+        const cx = size[0] / 2;
+        const cy = size[1] / 2;
+        const nodeStyleFn = config.nodeStyle;
+        const edgeStyleFn = config.edgeStyle;
+        const edgeColorBy = config.edgeColorBy || "source";
+        // Auto-color palette: used when no nodeStyle is provided
+        const palette = Array.isArray(config.colorScheme)
+            ? config.colorScheme
+            : DEFAULT_PALETTE;
+        // Build a node-id → color map for consistent coloring
+        const nodeColorMap = new Map();
+        nodes.forEach((n, i) => {
+            nodeColorMap.set(n.id, palette[i % palette.length]);
+        });
+        const ribbonGenerator = (0, d3_chord_1.ribbon)().radius(innerRadius);
+        const sceneNodes = [];
+        const sceneEdges = [];
+        const labels = [];
+        // ── Build arc nodes ──────────────────────────────────────────────
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const arcData = node.arcData;
+            if (!arcData)
+                continue;
+            let fill;
+            if (nodeStyleFn) {
+                const userStyle = nodeStyleFn(node);
+                fill = userStyle.fill || nodeColorMap.get(node.id) || palette[i % palette.length];
+            }
+            else {
+                fill = nodeColorMap.get(node.id) || palette[i % palette.length];
+            }
+            const userStyle = nodeStyleFn ? nodeStyleFn(node) : {};
+            const style = {
+                fill,
+                stroke: userStyle.stroke || "black",
+                strokeWidth: userStyle.strokeWidth ?? 1,
+                opacity: userStyle.opacity
+            };
+            // d3-chord angles start at 12 o'clock; canvas arc() starts at 3 o'clock
+            // Offset by -PI/2 to align arcs with labels and ribbons
+            sceneNodes.push({
+                type: "arc",
+                cx,
+                cy,
+                innerR: innerRadius,
+                outerR: radius,
+                startAngle: arcData.startAngle - Math.PI / 2,
+                endAngle: arcData.endAngle - Math.PI / 2,
+                style,
+                datum: node,
+                id: node.id,
+                label: node.id
+            });
+        }
+        // ── Build ribbon edges ───────────────────────────────────────────
+        // d3-chord ribbon paths are centered at (0,0). Offset every
+        // coordinate by (cx, cy) so they align with the arc nodes.
+        for (const edge of edges) {
+            const chordData = edge.chordData;
+            if (!chordData)
+                continue;
+            // Offset chord angles by -PI/2 to match arc offset (12 o'clock → 3 o'clock)
+            const offsetChord = {
+                source: { ...chordData.source, startAngle: chordData.source.startAngle - Math.PI / 2, endAngle: chordData.source.endAngle - Math.PI / 2 },
+                target: { ...chordData.target, startAngle: chordData.target.startAngle - Math.PI / 2, endAngle: chordData.target.endAngle - Math.PI / 2 }
+            };
+            const rawPath = ribbonGenerator(offsetChord);
+            if (!rawPath)
+                continue;
+            const pathD = translateSvgPath(rawPath, cx, cy);
+            // Resolve edge fill — use edgeStyle if provided, otherwise
+            // inherit from source or target node color
+            let fill = "#999";
+            if (edgeStyleFn) {
+                const userStyle = edgeStyleFn(edge);
+                fill = userStyle.fill || fill;
+            }
+            else {
+                // Auto-color by source or target node
+                const srcNode = typeof edge.source === "object" ? edge.source : null;
+                const tgtNode = typeof edge.target === "object" ? edge.target : null;
+                if (edgeColorBy === "target" && tgtNode) {
+                    fill = nodeColorMap.get(tgtNode.id) || fill;
+                }
+                else if (srcNode) {
+                    fill = nodeColorMap.get(srcNode.id) || fill;
+                }
+            }
+            const userStyle = edgeStyleFn ? edgeStyleFn(edge) : {};
+            const style = {
+                fill,
+                fillOpacity: userStyle.fillOpacity ?? edgeOpacity,
+                stroke: userStyle.stroke || "none",
+                strokeWidth: userStyle.strokeWidth,
+                opacity: userStyle.opacity
+            };
+            sceneEdges.push({
+                type: "ribbon",
+                pathD,
+                style,
+                datum: edge
+            });
+        }
+        // ── Build labels ─────────────────────────────────────────────────
+        if (config.showLabels !== false) {
+            const labelFn = resolveLabelFn(config.nodeLabel);
+            const labelRadius = radius + 12;
+            for (const node of nodes) {
+                const arcData = node.arcData;
+                if (!arcData)
+                    continue;
+                const text = labelFn ? labelFn(node) : node.id;
+                if (!text)
+                    continue;
+                const midAngle = (arcData.startAngle + arcData.endAngle) / 2;
+                // Angles in d3-chord start from 12 o'clock (top), going clockwise.
+                // Convert to standard x/y: subtract PI/2.
+                const angle = midAngle - Math.PI / 2;
+                const lx = cx + Math.cos(angle) * labelRadius;
+                const ly = cy + Math.sin(angle) * labelRadius;
+                // Anchor depends on which side of the circle the label is on
+                const anchor = midAngle > Math.PI ? "end" : "start";
+                labels.push({
+                    x: lx,
+                    y: ly,
+                    text: String(text),
+                    anchor,
+                    baseline: "middle",
+                    fontSize: 11
+                });
+            }
+        }
+        return { sceneNodes, sceneEdges, labels };
+    }
+};
+function resolveLabelFn(nodeLabel) {
+    if (!nodeLabel)
+        return null;
+    if (typeof nodeLabel === "function")
+        return nodeLabel;
+    return (d) => d[nodeLabel] || d.id;
+}
+function resolveValueAccessor(valueAccessor) {
+    if (!valueAccessor)
+        return (d) => d.value ?? 1;
+    if (typeof valueAccessor === "function")
+        return valueAccessor;
+    return (d) => d[valueAccessor] ?? 1;
+}
+/**
+ * Translate all absolute coordinates in an SVG path string by (dx, dy).
+ *
+ * d3-chord ribbon() produces paths using only M, C, Q, L, A, and Z commands
+ * with absolute coordinates. We parse the numeric values and offset the
+ * positional ones. For arc (A) commands the positional values are the last
+ * two numbers in each 7-parameter group.
+ */
+function translateSvgPath(d, dx, dy) {
+    // Tokenize: split into command letters and number tokens
+    const tokens = d.match(/[a-zA-Z]|[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g);
+    if (!tokens)
+        return d;
+    const out = [];
+    let i = 0;
+    while (i < tokens.length) {
+        const cmd = tokens[i];
+        if (cmd === "M" || cmd === "L") {
+            out.push(cmd);
+            i++;
+            // Pairs of (x, y) follow
+            while (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                out.push(String(Number(tokens[i]) + dx));
+                i++;
+                if (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                    out.push(String(Number(tokens[i]) + dy));
+                    i++;
+                }
+            }
+        }
+        else if (cmd === "C") {
+            out.push(cmd);
+            i++;
+            // Triplets of (x,y) control points
+            while (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                for (let p = 0; p < 3 && i < tokens.length; p++) {
+                    if (isNaN(Number(tokens[i])))
+                        break;
+                    out.push(String(Number(tokens[i]) + dx));
+                    i++;
+                    if (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                        out.push(String(Number(tokens[i]) + dy));
+                        i++;
+                    }
+                }
+            }
+        }
+        else if (cmd === "Q") {
+            out.push(cmd);
+            i++;
+            // Pairs of (x,y) — 2 pairs per Q
+            while (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                for (let p = 0; p < 2 && i < tokens.length; p++) {
+                    if (isNaN(Number(tokens[i])))
+                        break;
+                    out.push(String(Number(tokens[i]) + dx));
+                    i++;
+                    if (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                        out.push(String(Number(tokens[i]) + dy));
+                        i++;
+                    }
+                }
+            }
+        }
+        else if (cmd === "A") {
+            out.push(cmd);
+            i++;
+            // Arc: rx ry x-rotation large-arc-flag sweep-flag x y
+            while (i < tokens.length && !isNaN(Number(tokens[i]))) {
+                // rx, ry — no offset
+                out.push(tokens[i++]);
+                if (i < tokens.length)
+                    out.push(tokens[i++]); // ry
+                if (i < tokens.length)
+                    out.push(tokens[i++]); // x-rotation
+                if (i < tokens.length)
+                    out.push(tokens[i++]); // large-arc-flag
+                if (i < tokens.length)
+                    out.push(tokens[i++]); // sweep-flag
+                // x, y — offset
+                if (i < tokens.length) {
+                    out.push(String(Number(tokens[i]) + dx));
+                    i++;
+                }
+                if (i < tokens.length) {
+                    out.push(String(Number(tokens[i]) + dy));
+                    i++;
+                }
+            }
+        }
+        else if (cmd === "Z" || cmd === "z") {
+            out.push(cmd);
+            i++;
+        }
+        else {
+            // Unknown or lowercase relative command — pass through
+            out.push(tokens[i]);
+            i++;
+        }
+    }
+    return out.join(" ");
+}

package/ai/dist/src/components/stream/layouts/forceLayoutPlugin.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forceLayoutPlugin = void 0;
+const d3_force_1 = require("d3-force");
+const d3_scale_1 = require("d3-scale");
+const d3_array_1 = require("d3-array");
+const d3_scale_chromatic_1 = require("d3-scale-chromatic");
+/**
+ * Force-directed layout plugin — uses d3-force for physics-based node positioning.
+ *
+ * Produces circle scene nodes and line scene edges. Runs the force simulation
+ * synchronously for a configurable number of iterations, using phyllotaxis
+ * spiral for deterministic initial positions.
+ */
+exports.forceLayoutPlugin = {
+    supportsStreaming: false,
+    hierarchical: false,
+    computeLayout(nodes, edges, config, size) {
+        if (nodes.length === 0)
+            return;
+        // Adaptive iteration count: reduce iterations for large networks
+        const nodeCount = nodes.length;
+        const adaptiveIterations = Math.max(50, Math.min(300, Math.floor(300 - (nodeCount - 30) * 2)));
+        const iterations = config.iterations ?? adaptiveIterations;
+        const forceStrength = config.forceStrength ?? 0.1;
+        // Set deterministic initial positions using phyllotaxis spiral.
+        // d3-force uses Math.random() for unpositioned nodes which produces
+        // different layouts on every render. A phyllotaxis spiral gives
+        // evenly-distributed starting positions based on index alone.
+        // RealtimeNode initialises x/y to 0, so we treat (0,0) as "unpositioned".
+        const cx = size[0] / 2;
+        const cy = size[1] / 2;
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.x == null || node.y == null || (node.x === 0 && node.y === 0)) {
+                const r = Math.sqrt(i + 0.5) * 10;
+                const theta = i * goldenAngle;
+                node.x = cx + r * Math.cos(theta);
+                node.y = cy + r * Math.sin(theta);
+            }
+        }
+        // Build node size accessor for charge strength
+        const nodeSizeFn = resolveNodeSizeFn(config.nodeSize, config.nodeSizeRange, nodes);
+        const nodeRadius = (d) => nodeSizeFn(d);
+        // Configure link force
+        const linkForce = (0, d3_force_1.forceLink)()
+            .strength((d) => Math.min(2.5, d.weight ? d.weight * forceStrength : forceStrength))
+            .id((d) => d.id);
+        // Build simulation
+        const forceMod = size[1] / size[0];
+        const simulation = (0, d3_force_1.forceSimulation)()
+            .force("charge", (0, d3_force_1.forceManyBody)().strength((d) => -25 * nodeRadius(d)))
+            .force("x", (0, d3_force_1.forceX)(size[0] / 2).strength(forceMod * 0.1))
+            .force("y", (0, d3_force_1.forceY)(size[1] / 2).strength(0.1));
+        simulation.nodes(nodes);
+        if (edges.length > 0) {
+            // Resolve edge source/target to id strings for d3-force linking
+            const linkData = edges.map((e) => ({
+                ...e,
+                source: typeof e.source === "string" ? e.source : e.source.id,
+                target: typeof e.target === "string" ? e.target : e.target.id
+            }));
+            simulation.force("link", linkForce);
+            simulation.force("link").links(linkData);
+        }
+        // Reset alpha if too cold
+        if (simulation.alpha() < 0.1) {
+            simulation.alpha(1);
+        }
+        simulation.stop();
+        // Run synchronously
+        for (let i = 0; i < iterations; ++i) {
+            simulation.tick();
+        }
+        // Resolve edge source/target to node object references so that
+        // HOC style functions can access d.source.data for color lookups.
+        for (const edge of edges) {
+            if (typeof edge.source === "string") {
+                const n = nodes.find((nd) => nd.id === edge.source);
+                if (n)
+                    edge.source = n;
+            }
+            if (typeof edge.target === "string") {
+                const n = nodes.find((nd) => nd.id === edge.target);
+                if (n)
+                    edge.target = n;
+            }
+        }
+    },
+    buildScene(nodes, edges, config, size) {
+        const nodeStyleFn = config.nodeStyle;
+        const edgeStyleFn = config.edgeStyle;
+        const nodeSizeFn = resolveNodeSizeFn(config.nodeSize, config.nodeSizeRange, nodes);
+        // Auto-color palette for when no nodeStyle is provided
+        const palette = Array.isArray(config.colorScheme)
+            ? config.colorScheme
+            : d3_scale_chromatic_1.schemeCategory10;
+        const nodeColorMap = new Map();
+        nodes.forEach((n, i) => {
+            nodeColorMap.set(n.id, palette[i % palette.length]);
+        });
+        const sceneNodes = [];
+        const sceneEdges = [];
+        const labels = [];
+        // Build circle nodes
+        for (const node of nodes) {
+            if (node.x == null || node.y == null)
+                continue;
+            const r = nodeSizeFn(node);
+            const userStyle = nodeStyleFn ? nodeStyleFn(node) : {};
+            const style = {
+                fill: userStyle.fill || nodeColorMap.get(node.id) || "#007bff",
+                stroke: userStyle.stroke || "#fff",
+                strokeWidth: userStyle.strokeWidth ?? 2,
+                opacity: userStyle.opacity
+            };
+            sceneNodes.push({
+                type: "circle",
+                cx: node.x,
+                cy: node.y,
+                r,
+                style,
+                datum: node,
+                id: node.id,
+                label: node.id
+            });
+        }
+        // Build line edges
+        for (const edge of edges) {
+            const sourceNode = typeof edge.source === "object" ? edge.source : findNode(nodes, edge.source);
+            const targetNode = typeof edge.target === "object" ? edge.target : findNode(nodes, edge.target);
+            if (!sourceNode || !targetNode)
+                continue;
+            if (sourceNode.x == null || sourceNode.y == null)
+                continue;
+            if (targetNode.x == null || targetNode.y == null)
+                continue;
+            const userStyle = edgeStyleFn ? edgeStyleFn(edge) : {};
+            const style = {
+                stroke: userStyle.stroke || "#999",
+                strokeWidth: userStyle.strokeWidth ?? 1,
+                opacity: userStyle.opacity ?? 0.6
+            };
+            sceneEdges.push({
+                type: "line",
+                x1: sourceNode.x,
+                y1: sourceNode.y,
+                x2: targetNode.x,
+                y2: targetNode.y,
+                style,
+                datum: edge
+            });
+        }
+        // Build labels
+        if (config.showLabels !== false) {
+            const labelFn = resolveLabelFn(config.nodeLabel);
+            for (const node of nodes) {
+                if (node.x == null || node.y == null)
+                    continue;
+                const text = labelFn ? labelFn(node) : node.id;
+                if (!text)
+                    continue;
+                const r = nodeSizeFn(node);
+                labels.push({
+                    x: node.x,
+                    y: node.y - r - 4,
+                    text: String(text),
+                    anchor: "middle",
+                    baseline: "auto",
+                    fontSize: 11
+                });
+            }
+        }
+        return { sceneNodes, sceneEdges, labels };
+    }
+};
+// ── Helpers ──────────────────────────────────────────────────────────────
+function findNode(nodes, id) {
+    return nodes.find((n) => n.id === id);
+}
+function resolveLabelFn(nodeLabel) {
+    if (!nodeLabel)
+        return null;
+    if (typeof nodeLabel === "function")
+        return nodeLabel;
+    return (d) => d[nodeLabel] || d.id;
+}
+/**
+ * Build a function that returns a node radius. If `nodeSize` is a number,
+ * use it directly. If it is a string accessor, look up `node.data[nodeSize]`
+ * and scale the result to `nodeSizeRange`. If it is a function, call it.
+ * Falls back to a default radius of 8.
+ */
+function resolveNodeSizeFn(nodeSize, nodeSizeRange, allNodes) {
+    if (nodeSize == null) {
+        return () => 8;
+    }
+    if (typeof nodeSize === "number") {
+        return () => nodeSize;
+    }
+    if (typeof nodeSize === "function") {
+        return (node) => nodeSize(node) || 8;
+    }
+    // String accessor: look up value on node.data and scale to range
+    const range = nodeSizeRange || [5, 20];
+    // Extract all numeric values to compute domain
+    const values = allNodes
+        .map((n) => n.data?.[nodeSize])
+        .filter((v) => v != null && typeof v === "number");
+    if (values.length === 0) {
+        return () => range[0];
+    }
+    const domainMin = (0, d3_array_1.min)(values) ?? 0;
+    const domainMax = (0, d3_array_1.max)(values) ?? 1;
+    // If all values are the same, return the midpoint of the range
+    if (domainMin === domainMax) {
+        return () => (range[0] + range[1]) / 2;
+    }
+    const scale = (0, d3_scale_1.scaleLinear)()
+        .domain([domainMin, domainMax])
+        .range(range)
+        .clamp(true);
+    return (node) => {
+        const raw = node.data?.[nodeSize];
+        if (raw == null || typeof raw !== "number")
+            return range[0];
+        return scale(raw);
+    };
+}