semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sankeyLayoutPlugin = void 0;
+const d3_sankey_circular_1 = require("d3-sankey-circular");
+const d3_scale_chromatic_1 = require("d3-scale-chromatic");
+const sankeyLinks_1 = require("../../geometry/sankeyLinks");
+const sankeyOrientHash = {
+    left: d3_sankey_circular_1.sankeyLeft,
+    right: d3_sankey_circular_1.sankeyRight,
+    center: d3_sankey_circular_1.sankeyCenter,
+    justify: d3_sankey_circular_1.sankeyJustify
+};
+/**
+ * Sankey layout plugin — uses d3-sankey-circular for layout computation.
+ *
+ * Produces rect scene nodes for Sankey node bars and bezier band scene edges
+ * for the flow links. Supports both horizontal and vertical orientation.
+ */
+exports.sankeyLayoutPlugin = {
+    supportsStreaming: true,
+    hierarchical: false,
+    computeLayout(nodes, edges, config, size) {
+        if (nodes.length === 0)
+            return;
+        const direction = config.orientation === "vertical" ? "down" : "right";
+        const orient = config.nodeAlign || "justify";
+        const nodeWidth = config.nodeWidth ?? 15;
+        const nodePaddingRatio = config.nodePaddingRatio ?? 0.05;
+        const iterations = config.iterations ?? 100;
+        // Clone for d3-sankey (it mutates)
+        const sankeyNodes = nodes.map((n) => ({ ...n }));
+        const sankeyEdges = edges.map((e) => ({
+            ...e,
+            source: typeof e.source === "string" ? e.source : e.source.id,
+            target: typeof e.target === "string" ? e.target : e.target.id
+        }));
+        let frameExtent;
+        if (direction === "down") {
+            frameExtent = [[0, 0], [size[1], size[0]]];
+        }
+        else {
+            frameExtent = [[0, 0], [size[0], size[1]]];
+        }
+        const sankey = (0, d3_sankey_circular_1.sankeyCircular)()
+            .extent(frameExtent)
+            .links(sankeyEdges)
+            .nodes(sankeyNodes)
+            .nodeAlign(sankeyOrientHash[orient] || d3_sankey_circular_1.sankeyJustify)
+            .nodeId((d) => d.id)
+            .nodeWidth(nodeWidth)
+            .iterations(iterations);
+        if (sankey.nodePaddingRatio) {
+            sankey.nodePaddingRatio(nodePaddingRatio);
+        }
+        // Execute layout
+        sankey();
+        // Write computed positions back to original nodes
+        for (const sn of sankeyNodes) {
+            const original = nodes.find((n) => n.id === sn.id);
+            if (original) {
+                original.x0 = sn.x0;
+                original.x1 = sn.x1;
+                original.y0 = sn.y0;
+                original.y1 = sn.y1;
+                original.value = sn.value;
+                original.depth = sn.depth;
+                original.sourceLinks = sn.sourceLinks;
+                original.targetLinks = sn.targetLinks;
+                // Derived
+                original.width = sn.x1 - sn.x0;
+                original.height = sn.y1 - sn.y0;
+                original.x = sn.x0 + (sn.x1 - sn.x0) / 2;
+                original.y = sn.y0 + (sn.y1 - sn.y0) / 2;
+            }
+        }
+        // Write computed positions back to original edges
+        for (const se of sankeyEdges) {
+            const src = se.source;
+            const tgt = se.target;
+            const sourceId = typeof src === "object" && src !== null ? src.id : String(src);
+            const targetId = typeof tgt === "object" && tgt !== null ? tgt.id : String(tgt);
+            // Find matching original edge
+            const original = 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;
+            });
+            if (original) {
+                original.y0 = se.y0;
+                original.y1 = se.y1;
+                original.sankeyWidth = se.width ?? 0;
+                original.circular = !!se.circular;
+                original.circularPathData = se.circularPathData;
+                original.direction = direction;
+                // Resolve source/target to node references
+                const srcNode = nodes.find((n) => n.id === sourceId);
+                const tgtNode = nodes.find((n) => n.id === targetId);
+                if (srcNode)
+                    original.source = srcNode;
+                if (tgtNode)
+                    original.target = tgtNode;
+            }
+        }
+    },
+    buildScene(nodes, edges, config, size) {
+        const direction = config.orientation === "vertical" ? "down" : "right";
+        const nodeStyleFn = config.nodeStyle;
+        const edgeStyleFn = config.edgeStyle;
+        const edgeOpacity = config.edgeOpacity ?? 0.5;
+        const edgeColorBy = config.edgeColorBy || "source";
+        // 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 rect nodes
+        for (const node of nodes) {
+            const w = node.x1 - node.x0;
+            const h = node.y1 - node.y0;
+            if (w <= 0 || h <= 0)
+                continue;
+            const userStyle = nodeStyleFn ? nodeStyleFn(node) : {};
+            const style = {
+                fill: userStyle.fill || nodeColorMap.get(node.id) || "#4d430c",
+                stroke: userStyle.stroke,
+                strokeWidth: userStyle.strokeWidth,
+                opacity: userStyle.opacity
+            };
+            sceneNodes.push({
+                type: "rect",
+                x: node.x0,
+                y: node.y0,
+                w,
+                h,
+                style,
+                datum: node,
+                id: node.id,
+                label: node.id
+            });
+        }
+        // Build bezier edge bands
+        // Sort by width descending so narrow bands render on top
+        const sortedEdges = [...edges].sort((a, b) => (b.sankeyWidth || 0) - (a.sankeyWidth || 0));
+        for (const edge of sortedEdges) {
+            if (!edge.sankeyWidth || edge.sankeyWidth <= 0)
+                continue;
+            const sourceNode = typeof edge.source === "object" ? edge.source : null;
+            const targetNode = typeof edge.target === "object" ? edge.target : null;
+            if (!sourceNode || !targetNode)
+                continue;
+            // Generate SVG path string using existing helpers
+            let pathD;
+            if (edge.circular && edge.circularPathData) {
+                pathD = (0, sankeyLinks_1.circularAreaLink)(edge);
+            }
+            else {
+                pathD = (0, sankeyLinks_1.areaLink)(edge);
+            }
+            // 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 if (edgeColorBy === "target" && targetNode) {
+                fill = nodeColorMap.get(targetNode.id) || fill;
+            }
+            else if (sourceNode) {
+                fill = nodeColorMap.get(sourceNode.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: "bezier",
+                pathD,
+                bezierCache: edge.bezier,
+                style,
+                datum: edge
+            });
+        }
+        // Build labels
+        if (config.showLabels !== false) {
+            const labelFn = resolveLabelFn(config.nodeLabel);
+            for (const node of nodes) {
+                const w = node.x1 - node.x0;
+                const h = node.y1 - node.y0;
+                if (w <= 0 || h <= 0)
+                    continue;
+                const text = labelFn ? labelFn(node) : node.id;
+                if (!text)
+                    continue;
+                let x;
+                let y;
+                let anchor;
+                if (direction === "down") {
+                    x = node.x0 + w / 2;
+                    y = node.y1 + 14;
+                    anchor = "middle";
+                }
+                else {
+                    // Horizontal: label to the right or left depending on position
+                    const midX = size[0] / 2;
+                    if (node.x0 + w / 2 < midX) {
+                        x = node.x0 - 6;
+                        anchor = "end";
+                    }
+                    else {
+                        x = node.x1 + 6;
+                        anchor = "start";
+                    }
+                    y = node.y0 + h / 2;
+                }
+                labels.push({
+                    x,
+                    y,
+                    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;
+}

package/ai/dist/src/components/stream/networkTypes.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PARTICLE_STYLE = exports.DEFAULT_TENSION_CONFIG = void 0;
+exports.DEFAULT_TENSION_CONFIG = {
+    weightChange: 0.1,
+    newEdge: 0.5,
+    newNode: 1.0,
+    threshold: 3.0,
+    transitionDuration: 500
+};
+exports.DEFAULT_PARTICLE_STYLE = {
+    radius: 3,
+    opacity: 0.7,
+    speedMultiplier: 1,
+    maxPerEdge: 50,
+    spawnRate: 0.1
+};

package/ai/dist/src/components/stream/ordinalSceneBuilders/barScene.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBarScene = buildBarScene;
+exports.buildClusterBarScene = buildClusterBarScene;
+const SceneGraph_1 = require("../SceneGraph");
+function buildBarScene(ctx, layout) {
+    const { scales, columns, config, getR, getStack, resolvePieceStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    const isHorizontal = projection === "horizontal";
+    const normalize = config.normalize;
+    for (const col of Object.values(columns)) {
+        // Group pieces by stack key if stacking, and aggregate values per group
+        const stacks = new Map();
+        for (const d of col.pieceData) {
+            const key = getStack ? getStack(d) : "_default";
+            if (!stacks.has(key))
+                stacks.set(key, { total: 0, pieces: [] });
+            const group = stacks.get(key);
+            group.total += getR(d);
+            group.pieces.push(d);
+        }
+        // Compute totals for normalization
+        let colTotal = 0;
+        if (normalize) {
+            for (const g of stacks.values())
+                colTotal += Math.abs(g.total);
+        }
+        let posOffset = 0;
+        let negOffset = 0;
+        for (const [stackKey, group] of stacks) {
+            // Use the aggregated total for the stack group (one rect per group)
+            let val = group.total;
+            if (normalize && colTotal > 0)
+                val = val / colTotal;
+            // Use the first piece for styling — look up barColors by stack key (not category)
+            const style = getStack
+                ? resolvePieceStyle(group.pieces[0], stackKey)
+                : resolvePieceStyle(group.pieces[0], col.name);
+            // Build a synthetic datum that includes the aggregate info
+            const aggDatum = {
+                ...group.pieces[0],
+                __aggregateValue: group.total,
+                __pieceCount: group.pieces.length,
+                category: col.name
+            };
+            if (isVertical) {
+                const actualY = val >= 0
+                    ? rScale(posOffset + val)
+                    : rScale(negOffset);
+                const actualH = val >= 0
+                    ? rScale(posOffset) - rScale(posOffset + val)
+                    : rScale(negOffset + val) - rScale(negOffset);
+                nodes.push((0, SceneGraph_1.buildRectNode)(col.x, actualY, col.width, Math.abs(actualH), style, aggDatum, stackKey));
+                if (val >= 0)
+                    posOffset += val;
+                else
+                    negOffset += val;
+            }
+            else if (isHorizontal) {
+                const actualX = val >= 0
+                    ? rScale(posOffset)
+                    : rScale(negOffset + val);
+                const actualW = val >= 0
+                    ? rScale(posOffset + val) - rScale(posOffset)
+                    : rScale(negOffset) - rScale(negOffset + val);
+                nodes.push((0, SceneGraph_1.buildRectNode)(actualX, col.x, Math.abs(actualW), col.width, style, aggDatum, stackKey));
+                if (val >= 0)
+                    posOffset += val;
+                else
+                    negOffset += val;
+            }
+        }
+    }
+    return nodes;
+}
+function buildClusterBarScene(ctx, layout) {
+    const { scales, columns, getR, getGroup, resolvePieceStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    // Discover all group keys
+    const groupKeys = [];
+    const groupSet = new Set();
+    for (const col of Object.values(columns)) {
+        for (const d of col.pieceData) {
+            const key = getGroup ? getGroup(d) : "_default";
+            if (!groupSet.has(key)) {
+                groupSet.add(key);
+                groupKeys.push(key);
+            }
+        }
+    }
+    const groupCount = groupKeys.length || 1;
+    for (const col of Object.values(columns)) {
+        const subWidth = col.width / groupCount;
+        const grouped = new Map();
+        for (const d of col.pieceData) {
+            const key = getGroup ? getGroup(d) : "_default";
+            if (!grouped.has(key))
+                grouped.set(key, []);
+            grouped.get(key).push(d);
+        }
+        for (let gi = 0; gi < groupKeys.length; gi++) {
+            const groupData = grouped.get(groupKeys[gi]) || [];
+            for (const d of groupData) {
+                const val = getR(d);
+                const style = resolvePieceStyle(d, col.name);
+                if (isVertical) {
+                    const barX = col.x + gi * subWidth;
+                    const zeroY = rScale(0);
+                    const valY = rScale(val);
+                    nodes.push((0, SceneGraph_1.buildRectNode)(barX, Math.min(zeroY, valY), subWidth, Math.abs(zeroY - valY), style, d, groupKeys[gi]));
+                }
+                else {
+                    const barY = col.x + gi * subWidth;
+                    const zeroX = rScale(0);
+                    const valX = rScale(val);
+                    nodes.push((0, SceneGraph_1.buildRectNode)(Math.min(zeroX, valX), barY, Math.abs(valX - zeroX), subWidth, style, d, groupKeys[gi]));
+                }
+            }
+        }
+    }
+    return nodes;
+}

package/ai/dist/src/components/stream/ordinalSceneBuilders/connectorScene.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildConnectors = buildConnectors;
+function buildConnectors(ctx, pieceNodes, layout) {
+    const { scales, config, getConnector, getO } = ctx;
+    if (!getConnector || !scales)
+        return [];
+    const connectors = [];
+    const { projection } = scales;
+    // Group pieces by connector key
+    const groups = new Map();
+    for (const node of pieceNodes) {
+        if (node.type !== "point" && node.type !== "rect")
+            continue;
+        const datum = node.datum;
+        if (!datum)
+            continue;
+        const key = getConnector(datum);
+        if (!key)
+            continue;
+        let cx, cy;
+        if (node.type === "point") {
+            cx = node.x;
+            cy = node.y;
+        }
+        else {
+            // rect: use center
+            cx = node.x + node.w / 2;
+            cy = node.y + (projection === "vertical" ? 0 : node.h / 2);
+        }
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push({ x: cx, y: cy, datum, category: getO(datum) });
+    }
+    // Draw lines connecting pieces with the same connector key, sorted by category order
+    const oExtent = scales.o.domain();
+    const resolveConnStyle = config.connectorStyle;
+    for (const [key, points] of groups) {
+        if (points.length < 2)
+            continue;
+        // Sort by category order
+        points.sort((a, b) => oExtent.indexOf(a.category) - oExtent.indexOf(b.category));
+        for (let i = 0; i < points.length - 1; i++) {
+            const from = points[i];
+            const to = points[i + 1];
+            const style = typeof resolveConnStyle === "function"
+                ? resolveConnStyle(from.datum)
+                : (resolveConnStyle || { stroke: "#999", strokeWidth: 1, opacity: 0.5 });
+            connectors.push({
+                type: "connector",
+                x1: from.x,
+                y1: from.y,
+                x2: to.x,
+                y2: to.y,
+                style,
+                datum: from.datum,
+                group: key
+            });
+        }
+    }
+    return connectors;
+}

package/ai/dist/src/components/stream/ordinalSceneBuilders/pieScene.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPieScene = buildPieScene;
+function buildPieScene(ctx, layout) {
+    const { scales, columns, config, resolvePieceStyle } = ctx;
+    const nodes = [];
+    // cx/cy are 0 because StreamOrdinalFrame translates the canvas
+    // to the center of the chart area for radial projection
+    const cx = 0;
+    const cy = 0;
+    const outerRadius = Math.min(layout.width, layout.height) / 2 - 4;
+    const innerRadius = config.chartType === "donut" ? (config.innerRadius || 60) : 0;
+    // Start from 12 o'clock (-π/2) plus any user offset
+    const startAngleOffset = -Math.PI / 2 + ((config.startAngle || 0) * Math.PI) / 180;
+    const twoPi = Math.PI * 2;
+    for (const col of Object.values(columns)) {
+        const startAngle = startAngleOffset + col.pctStart * twoPi;
+        const endAngle = startAngleOffset + (col.pctStart + col.pct) * twoPi;
+        const style = resolvePieceStyle(col.pieceData[0], col.name);
+        nodes.push({
+            type: "wedge",
+            cx, cy,
+            innerRadius,
+            outerRadius,
+            startAngle,
+            endAngle,
+            style,
+            datum: col.pieceData,
+            category: col.name
+        });
+    }
+    return nodes;
+}

package/ai/dist/src/components/stream/ordinalSceneBuilders/pointScene.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPointScene = buildPointScene;
+exports.buildSwarmScene = buildSwarmScene;
+function buildPointScene(ctx, layout) {
+    const { scales, columns, getR, multiScales, resolvePieceStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    const isRadial = projection === "radial";
+    const hasMultiAxis = multiScales.length > 0;
+    const twoPi = Math.PI * 2;
+    const startAngleOffset = -Math.PI / 2;
+    for (const col of Object.values(columns)) {
+        for (const d of col.pieceData) {
+            const rIndex = d.__rIndex ?? 0;
+            const val = d.__rValue ?? getR(d);
+            const scale = hasMultiAxis ? (multiScales[rIndex] || rScale) : rScale;
+            const style = resolvePieceStyle(d, col.name);
+            const r = style.r || 5;
+            let px, py;
+            if (isRadial) {
+                // Radial: angle from category position, radius from value
+                const midAngle = startAngleOffset + (col.pctStart + col.pct / 2) * twoPi;
+                const radius = scale(val);
+                px = Math.cos(midAngle) * radius;
+                py = Math.sin(midAngle) * radius;
+            }
+            else if (isVertical) {
+                px = col.middle;
+                py = scale(val);
+            }
+            else {
+                px = scale(val);
+                py = col.middle;
+            }
+            nodes.push({ type: "point", x: px, y: py, r, style, datum: d });
+        }
+    }
+    return nodes;
+}
+function buildSwarmScene(ctx, layout) {
+    const { scales, columns, getR, resolvePieceStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    for (const col of Object.values(columns)) {
+        // Simple jittered placement (real force sim in Phase 3)
+        const halfWidth = col.width / 2;
+        for (let i = 0; i < col.pieceData.length; i++) {
+            const d = col.pieceData[i];
+            const val = getR(d);
+            const style = resolvePieceStyle(d, col.name);
+            const r = style.r || 4;
+            // Deterministic jitter based on index
+            const jitter = (((i * 7919) % 100) / 100 - 0.5) * halfWidth * 0.8;
+            const px = isVertical ? col.middle + jitter : rScale(val);
+            const py = isVertical ? rScale(val) : col.middle + jitter;
+            nodes.push({ type: "point", x: px, y: py, r, style, datum: d });
+        }
+    }
+    return nodes;
+}