semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,266 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeMarginalConfig = normalizeMarginalConfig;
+exports.MarginalGraphics = MarginalGraphics;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_array_1 = require("d3-array");
+/** Resolve a string shorthand or full config into a MarginalConfig */
+function normalizeMarginalConfig(input) {
+    if (typeof input === "string") {
+        return { type: input };
+    }
+    return input;
+}
+const DEFAULTS = {
+    bins: 20,
+    fill: "#4e79a7",
+    fillOpacity: 0.5,
+    stroke: "none",
+    strokeWidth: 1
+};
+function resolveConfig(config) {
+    return {
+        type: config.type,
+        bins: config.bins ?? DEFAULTS.bins,
+        fill: config.fill ?? DEFAULTS.fill,
+        fillOpacity: config.fillOpacity ?? DEFAULTS.fillOpacity,
+        stroke: config.stroke ?? DEFAULTS.stroke,
+        strokeWidth: config.strokeWidth ?? DEFAULTS.strokeWidth
+    };
+}
+/** Compute quartiles and whiskers for boxplot */
+function boxplotStats(values) {
+    const sorted = [...values].sort((a, b) => a - b);
+    const n = sorted.length;
+    if (n === 0)
+        return null;
+    const q1 = sorted[Math.floor(n * 0.25)];
+    const median = sorted[Math.floor(n * 0.5)];
+    const q3 = sorted[Math.floor(n * 0.75)];
+    const iqr = q3 - q1;
+    const whiskerLow = Math.max(sorted[0], q1 - 1.5 * iqr);
+    const whiskerHigh = Math.min(sorted[n - 1], q3 + 1.5 * iqr);
+    return { q1, median, q3, whiskerLow, whiskerHigh };
+}
+function MarginalGraphics({ orient, config: rawConfig, values, scale, size, length }) {
+    const config = resolveConfig(rawConfig);
+    const padding = 4;
+    const isHorizontal = orient === "top" || orient === "bottom";
+    const content = (0, react_1.useMemo)(() => {
+        if (values.length === 0)
+            return null;
+        const domain = scale.domain();
+        const availableSize = size - padding * 2;
+        if (config.type === "boxplot") {
+            const stats = boxplotStats(values);
+            if (!stats)
+                return null;
+            const { q1, median, q3, whiskerLow, whiskerHigh } = stats;
+            const boxThickness = Math.min(availableSize * 0.5, 20);
+            const offset = (availableSize - boxThickness) / 2 + padding;
+            if (isHorizontal) {
+                const x1 = scale(q1);
+                const x2 = scale(q3);
+                const xMed = scale(median);
+                const xWLow = scale(whiskerLow);
+                const xWHigh = scale(whiskerHigh);
+                const growDir = orient === "top" ? -1 : 1;
+                const baseY = orient === "top" ? 0 : 0;
+                return (React.createElement("g", { "data-testid": `marginal-boxplot-${orient}` },
+                    React.createElement("line", { x1: xWLow, y1: baseY + growDir * (offset + boxThickness / 2), x2: xWHigh, y2: baseY + growDir * (offset + boxThickness / 2), stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: xWLow, y1: baseY + growDir * offset, x2: xWLow, y2: baseY + growDir * (offset + boxThickness), stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: xWHigh, y1: baseY + growDir * offset, x2: xWHigh, y2: baseY + growDir * (offset + boxThickness), stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("rect", { x: Math.min(x1, x2), y: orient === "top" ? baseY - offset - boxThickness : baseY + offset, width: Math.abs(x2 - x1), height: boxThickness, fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke === "none" ? config.fill : config.stroke, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: xMed, y1: orient === "top" ? baseY - offset - boxThickness : baseY + offset, x2: xMed, y2: orient === "top" ? baseY - offset : baseY + offset + boxThickness, stroke: config.fill, strokeWidth: 2 })));
+            }
+            else {
+                // Vertical: left/right
+                const y1 = scale(q1);
+                const y2 = scale(q3);
+                const yMed = scale(median);
+                const yWLow = scale(whiskerLow);
+                const yWHigh = scale(whiskerHigh);
+                const growDir = orient === "left" ? -1 : 1;
+                const baseX = 0;
+                return (React.createElement("g", { "data-testid": `marginal-boxplot-${orient}` },
+                    React.createElement("line", { x1: baseX + growDir * (offset + boxThickness / 2), y1: yWLow, x2: baseX + growDir * (offset + boxThickness / 2), y2: yWHigh, stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: baseX + growDir * offset, y1: yWLow, x2: baseX + growDir * (offset + boxThickness), y2: yWLow, stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: baseX + growDir * offset, y1: yWHigh, x2: baseX + growDir * (offset + boxThickness), y2: yWHigh, stroke: config.fill, strokeWidth: config.strokeWidth }),
+                    React.createElement("rect", { x: orient === "left" ? baseX - offset - boxThickness : baseX + offset, y: Math.min(y1, y2), width: boxThickness, height: Math.abs(y2 - y1), fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke === "none" ? config.fill : config.stroke, strokeWidth: config.strokeWidth }),
+                    React.createElement("line", { x1: orient === "left" ? baseX - offset - boxThickness : baseX + offset, y1: yMed, x2: orient === "left" ? baseX - offset : baseX + offset + boxThickness, y2: yMed, stroke: config.fill, strokeWidth: 2 })));
+            }
+        }
+        // Binned types: histogram, violin, ridgeline
+        const binner = (0, d3_array_1.bin)()
+            .domain(domain)
+            .thresholds(config.bins);
+        const bins = binner(values);
+        if (bins.length === 0)
+            return null;
+        const maxCount = Math.max(...bins.map(b => b.length));
+        if (maxCount === 0)
+            return null;
+        if (config.type === "histogram") {
+            return (React.createElement("g", { "data-testid": `marginal-histogram-${orient}` }, bins.map((bin, i) => {
+                if (bin.x0 == null || bin.x1 == null)
+                    return null;
+                const count = bin.length;
+                const barSize = (count / maxCount) * availableSize;
+                if (isHorizontal) {
+                    const x = scale(bin.x0);
+                    const w = scale(bin.x1) - scale(bin.x0);
+                    const y = orient === "top" ? -padding - barSize : padding;
+                    return (React.createElement("rect", { key: i, x: x, y: y, width: Math.max(w, 0.5), height: barSize, fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke, strokeWidth: config.strokeWidth }));
+                }
+                else {
+                    const y = scale(bin.x0);
+                    const h = scale(bin.x1) - scale(bin.x0);
+                    const x = orient === "left" ? -padding - barSize : padding;
+                    return (React.createElement("rect", { key: i, x: x, y: Math.min(y, y + h), width: barSize, height: Math.abs(h), fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke, strokeWidth: config.strokeWidth }));
+                }
+            })));
+        }
+        if (config.type === "violin") {
+            // Symmetric density path around the midline
+            const midline = availableSize / 2 + padding;
+            const points = [];
+            // Forward pass (one side)
+            for (const bin of bins) {
+                if (bin.x0 == null || bin.x1 == null)
+                    continue;
+                const mid = (bin.x0 + bin.x1) / 2;
+                const w = (bin.length / maxCount) * (availableSize / 2);
+                const pos = scale(mid);
+                if (isHorizontal) {
+                    const y = orient === "top" ? -(midline - w) : midline - w;
+                    points.push(`${pos},${y}`);
+                }
+                else {
+                    const x = orient === "left" ? -(midline - w) : midline - w;
+                    points.push(`${x},${pos}`);
+                }
+            }
+            // Reverse pass (other side)
+            for (let i = bins.length - 1; i >= 0; i--) {
+                const bin = bins[i];
+                if (bin.x0 == null || bin.x1 == null)
+                    continue;
+                const mid = (bin.x0 + bin.x1) / 2;
+                const w = (bin.length / maxCount) * (availableSize / 2);
+                const pos = scale(mid);
+                if (isHorizontal) {
+                    const y = orient === "top" ? -(midline + w) : midline + w;
+                    points.push(`${pos},${y}`);
+                }
+                else {
+                    const x = orient === "left" ? -(midline + w) : midline + w;
+                    points.push(`${x},${pos}`);
+                }
+            }
+            return (React.createElement("g", { "data-testid": `marginal-violin-${orient}` },
+                React.createElement("polygon", { points: points.join(" "), fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke === "none" ? config.fill : config.stroke, strokeWidth: config.strokeWidth })));
+        }
+        if (config.type === "ridgeline") {
+            // One-sided area fill from baseline into the margin
+            const pathParts = [];
+            if (isHorizontal) {
+                const baseY = orient === "top" ? 0 : 0;
+                // Start at baseline
+                const startX = bins[0].x0 != null ? scale(bins[0].x0) : 0;
+                pathParts.push(`M${startX},${baseY}`);
+                for (const bin of bins) {
+                    if (bin.x0 == null || bin.x1 == null)
+                        continue;
+                    const mid = (bin.x0 + bin.x1) / 2;
+                    const h = (bin.length / maxCount) * availableSize;
+                    const x = scale(mid);
+                    const y = orient === "top" ? -h - padding : h + padding;
+                    pathParts.push(`L${x},${y}`);
+                }
+                // Close back to baseline
+                const endX = bins[bins.length - 1].x1 != null ? scale(bins[bins.length - 1].x1) : length;
+                pathParts.push(`L${endX},${baseY}`);
+                pathParts.push("Z");
+            }
+            else {
+                const baseX = 0;
+                const startY = bins[0].x0 != null ? scale(bins[0].x0) : 0;
+                pathParts.push(`M${baseX},${startY}`);
+                for (const bin of bins) {
+                    if (bin.x0 == null || bin.x1 == null)
+                        continue;
+                    const mid = (bin.x0 + bin.x1) / 2;
+                    const w = (bin.length / maxCount) * availableSize;
+                    const y = scale(mid);
+                    const x = orient === "left" ? -w - padding : w + padding;
+                    pathParts.push(`L${x},${y}`);
+                }
+                const endY = bins[bins.length - 1].x1 != null ? scale(bins[bins.length - 1].x1) : length;
+                pathParts.push(`L${baseX},${endY}`);
+                pathParts.push("Z");
+            }
+            return (React.createElement("g", { "data-testid": `marginal-ridgeline-${orient}` },
+                React.createElement("path", { d: pathParts.join(" "), fill: config.fill, fillOpacity: config.fillOpacity, stroke: config.stroke === "none" ? config.fill : config.stroke, strokeWidth: config.strokeWidth })));
+        }
+        return null;
+    }, [values, scale, config, size, length, orient, isHorizontal, padding]);
+    if (!content)
+        return null;
+    // Position the <g> at the margin edge
+    let transform;
+    switch (orient) {
+        case "top":
+            transform = `translate(0, 0)`; // top edge of chart area
+            break;
+        case "bottom":
+            transform = `translate(0, ${length})`; // wait — length is chart width for top/bottom
+            break;
+        case "left":
+            transform = `translate(0, 0)`; // left edge of chart area
+            break;
+        case "right":
+            transform = `translate(${length}, 0)`; // length is chart width for left/right? No.
+            break;
+    }
+    // For top/bottom: length = chart width. The g is already inside the margin-translated group.
+    // For left/right: length = chart height.
+    // orient=bottom means we're at y=chartHeight (bottom of chart area)
+    // orient=right means we're at x=chartWidth (right of chart area)
+    // Actually, let the parent handle positioning. This component just draws relative to origin.
+    return (React.createElement("g", { className: `marginal-${orient}`, "data-testid": `marginal-${orient}` }, content));
+}

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

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findNearestNetworkNode = findNearestNetworkNode;
+/**
+ * Hit test against network scene nodes and edges.
+ *
+ * Checks nodes first (they're on top), then edges.
+ */
+function findNearestNetworkNode(sceneNodes, sceneEdges, px, py, maxDistance = 30) {
+    // Check nodes — for nested rects (treemap) we want the smallest
+    // containing rect, so we track rect hits by area separately.
+    let bestNode = null;
+    let bestDist = maxDistance;
+    let bestRectArea = Infinity;
+    for (const node of sceneNodes) {
+        const result = hitTestNode(node, px, py);
+        if (!result)
+            continue;
+        if (node.type === "rect") {
+            // For rects: prefer the smallest area (deepest cell)
+            const area = node.w * node.h;
+            if (area < bestRectArea) {
+                bestNode = result;
+                bestRectArea = area;
+            }
+        }
+        else if (result.distance < bestDist) {
+            bestNode = result;
+            bestDist = result.distance;
+        }
+    }
+    if (bestNode)
+        return bestNode;
+    // Check edges if no node hit
+    for (const edge of sceneEdges) {
+        const result = hitTestEdge(edge, px, py);
+        if (result && result.distance < bestDist) {
+            bestNode = result;
+            bestDist = result.distance;
+        }
+    }
+    return bestNode;
+}
+// ── Node hit testing ────────────────────────────────────────────────────
+function hitTestNode(node, px, py) {
+    switch (node.type) {
+        case "circle":
+            return hitTestCircle(node, px, py);
+        case "rect":
+            return hitTestRect(node, px, py);
+        case "arc":
+            return hitTestArc(node, px, py);
+        default:
+            return null;
+    }
+}
+function hitTestCircle(node, px, py) {
+    const dx = px - node.cx;
+    const dy = py - node.cy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const tolerance = Math.max(node.r, 5) + 5;
+    if (dist <= tolerance) {
+        return {
+            type: "node",
+            datum: node.datum,
+            x: node.cx,
+            y: node.cy,
+            distance: dist
+        };
+    }
+    return null;
+}
+function hitTestRect(node, px, py) {
+    if (px >= node.x &&
+        px <= node.x + node.w &&
+        py >= node.y &&
+        py <= node.y + node.h) {
+        return {
+            type: "node",
+            datum: node.datum,
+            x: node.x + node.w / 2,
+            y: node.y + node.h / 2,
+            distance: 0
+        };
+    }
+    return null;
+}
+function hitTestArc(node, px, py) {
+    // Convert to polar coordinates relative to arc center
+    const dx = px - node.cx;
+    const dy = py - node.cy;
+    const radius = Math.sqrt(dx * dx + dy * dy);
+    // Check radius bounds
+    if (radius < node.innerR - 2 || radius > node.outerR + 2)
+        return null;
+    // Check angle bounds
+    let angle = Math.atan2(dy, dx);
+    // Normalize angle to be positive
+    if (angle < 0)
+        angle += Math.PI * 2;
+    let start = node.startAngle;
+    let end = node.endAngle;
+    // Normalize start/end angles
+    if (start < 0)
+        start += Math.PI * 2;
+    if (end < 0)
+        end += Math.PI * 2;
+    let inArc;
+    if (start <= end) {
+        inArc = angle >= start && angle <= end;
+    }
+    else {
+        // Wraps around 0
+        inArc = angle >= start || angle <= end;
+    }
+    if (inArc) {
+        const midAngle = (node.startAngle + node.endAngle) / 2;
+        const midR = (node.innerR + node.outerR) / 2;
+        return {
+            type: "node",
+            datum: node.datum,
+            x: node.cx + midR * Math.cos(midAngle),
+            y: node.cy + midR * Math.sin(midAngle),
+            distance: 0
+        };
+    }
+    return null;
+}
+// ── Edge hit testing ────────────────────────────────────────────────────
+function hitTestEdge(edge, px, py) {
+    switch (edge.type) {
+        case "bezier":
+            return hitTestBezierEdge(edge, px, py);
+        case "line":
+            return hitTestLineEdge(edge, px, py);
+        case "ribbon":
+            return hitTestPathEdge(edge, px, py);
+        case "curved":
+            return hitTestPathEdge(edge, px, py);
+        default:
+            return null;
+    }
+}
+function hitTestBezierEdge(edge, px, py) {
+    // Use Path2D for approximate point-in-path testing
+    if (!edge.pathD)
+        return null;
+    try {
+        const path = new Path2D(edge.pathD);
+        // Create an offscreen canvas context for isPointInPath
+        // For performance, use a simple bounding-box approximation
+        // and rely on the filled path test
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return null;
+        if (ctx.isPointInPath(path, px, py)) {
+            // Return midpoint of the band as hover position
+            const sourceNode = typeof edge.datum?.source === "object" ? edge.datum.source : null;
+            const targetNode = typeof edge.datum?.target === "object" ? edge.datum.target : null;
+            const midX = sourceNode && targetNode
+                ? (sourceNode.x1 + targetNode.x0) / 2
+                : px;
+            const midY = edge.datum
+                ? (edge.datum.y0 + edge.datum.y1) / 2
+                : py;
+            return {
+                type: "edge",
+                datum: edge.datum,
+                x: midX,
+                y: midY,
+                distance: 0
+            };
+        }
+    }
+    catch {
+        // Path2D may not be supported in all environments
+    }
+    return null;
+}
+function hitTestLineEdge(edge, px, py) {
+    // Point-to-line-segment distance
+    const dx = edge.x2 - edge.x1;
+    const dy = edge.y2 - edge.y1;
+    const len2 = dx * dx + dy * dy;
+    if (len2 === 0)
+        return null;
+    let t = ((px - edge.x1) * dx + (py - edge.y1) * dy) / len2;
+    t = Math.max(0, Math.min(1, t));
+    const nearX = edge.x1 + t * dx;
+    const nearY = edge.y1 + t * dy;
+    const dist = Math.sqrt((px - nearX) ** 2 + (py - nearY) ** 2);
+    const tolerance = 5;
+    if (dist <= tolerance) {
+        return {
+            type: "edge",
+            datum: edge.datum,
+            x: nearX,
+            y: nearY,
+            distance: dist
+        };
+    }
+    return null;
+}
+function hitTestPathEdge(edge, px, py) {
+    if (!edge.pathD)
+        return null;
+    try {
+        const path = new Path2D(edge.pathD);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return null;
+        if (ctx.isPointInPath(path, px, py)) {
+            return {
+                type: "edge",
+                datum: edge.datum,
+                x: px,
+                y: py,
+                distance: 0
+            };
+        }
+    }
+    catch {
+        // Fallback — no hit
+    }
+    return null;
+}