semiotic 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,352 +0,0 @@
-"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

@@ -1,230 +0,0 @@
-"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);
-    };
-}