semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,590 @@
+"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 });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_brush_1 = require("d3-brush");
+const d3_selection_1 = require("d3-selection");
+const DataSourceAdapter_1 = require("./DataSourceAdapter");
+const PipelineStore_1 = require("./PipelineStore");
+const CanvasHitTester_1 = require("./CanvasHitTester");
+const SVGOverlay_1 = require("./SVGOverlay");
+// Canvas renderers
+const lineCanvasRenderer_1 = require("./renderers/lineCanvasRenderer");
+const areaCanvasRenderer_1 = require("./renderers/areaCanvasRenderer");
+const pointCanvasRenderer_1 = require("./renderers/pointCanvasRenderer");
+const barCanvasRenderer_1 = require("./renderers/barCanvasRenderer");
+const swarmCanvasRenderer_1 = require("./renderers/swarmCanvasRenderer");
+const waterfallCanvasRenderer_1 = require("./renderers/waterfallCanvasRenderer");
+const heatmapCanvasRenderer_1 = require("./renderers/heatmapCanvasRenderer");
+const candlestickCanvasRenderer_1 = require("./renderers/candlestickCanvasRenderer");
+// ── Renderer dispatch ──────────────────────────────────────────────────
+const RENDERERS = {
+    line: [areaCanvasRenderer_1.areaCanvasRenderer, lineCanvasRenderer_1.lineCanvasRenderer],
+    area: [areaCanvasRenderer_1.areaCanvasRenderer],
+    stackedarea: [areaCanvasRenderer_1.areaCanvasRenderer],
+    scatter: [pointCanvasRenderer_1.pointCanvasRenderer],
+    bubble: [pointCanvasRenderer_1.pointCanvasRenderer],
+    heatmap: [heatmapCanvasRenderer_1.heatmapCanvasRenderer],
+    bar: [barCanvasRenderer_1.barCanvasRenderer],
+    swarm: [swarmCanvasRenderer_1.swarmCanvasRenderer],
+    waterfall: [waterfallCanvasRenderer_1.waterfallCanvasRenderer],
+    candlestick: [candlestickCanvasRenderer_1.candlestickCanvasRenderer]
+};
+// ── Defaults ───────────────────────────────────────────────────────────
+const DEFAULT_MARGIN = { top: 20, right: 20, bottom: 30, left: 40 };
+const LIGHT_THEME = {
+    axisStroke: "#ccc",
+    tickText: "#666",
+    crosshair: "rgba(0, 0, 0, 0.25)",
+    hoverFill: "rgba(255, 255, 255, 0.3)",
+    hoverStroke: "rgba(0, 0, 0, 0.4)",
+    pointRing: "white"
+};
+function resolveThemeColors(el) {
+    if (!el)
+        return LIGHT_THEME;
+    const style = getComputedStyle(el);
+    const textSecondary = style.getPropertyValue("--text-secondary").trim();
+    const textPrimary = style.getPropertyValue("--text-primary").trim();
+    const surface3 = style.getPropertyValue("--surface-3").trim();
+    const surface0 = style.getPropertyValue("--surface-0").trim();
+    if (!textSecondary && !textPrimary)
+        return LIGHT_THEME;
+    return {
+        axisStroke: surface3 || LIGHT_THEME.axisStroke,
+        tickText: textSecondary || LIGHT_THEME.tickText,
+        crosshair: textSecondary ? `${textSecondary}66` : LIGHT_THEME.crosshair,
+        hoverFill: surface0 ? `${surface0}4D` : LIGHT_THEME.hoverFill,
+        hoverStroke: textSecondary ? `${textSecondary}99` : LIGHT_THEME.hoverStroke,
+        pointRing: surface0 || LIGHT_THEME.pointRing
+    };
+}
+// ── Tooltip ────────────────────────────────────────────────────────────
+const defaultTooltipStyle = {
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    padding: "6px 10px",
+    borderRadius: 4,
+    fontSize: 12,
+    lineHeight: 1.5,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    pointerEvents: "none",
+    whiteSpace: "nowrap"
+};
+function DefaultTooltip({ hover }) {
+    const fmtValue = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
+    return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+        React.createElement("div", { style: { fontWeight: 600, marginBottom: 2 } }, fmtValue(hover.value)),
+        React.createElement("div", { style: { opacity: 0.7, fontSize: 11 } }, fmtValue(hover.time))));
+}
+// ── Crosshair drawing ──────────────────────────────────────────────────
+function drawCrosshair(ctx, hover, width, height, config, pointColor, theme) {
+    const showCrosshair = config.crosshair !== false;
+    if (!showCrosshair)
+        return;
+    ctx.save();
+    const crossStyle = typeof config.crosshair === "object" ? config.crosshair : {};
+    ctx.strokeStyle = crossStyle.stroke || theme.crosshair;
+    ctx.lineWidth = crossStyle.strokeWidth || 1;
+    if (crossStyle.strokeDasharray) {
+        ctx.setLineDash(crossStyle.strokeDasharray.split(/[\s,]+/).map(Number));
+    }
+    else {
+        ctx.setLineDash([4, 4]);
+    }
+    ctx.beginPath();
+    ctx.moveTo(hover.x, 0);
+    ctx.lineTo(hover.x, height);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(0, hover.y);
+    ctx.lineTo(width, hover.y);
+    ctx.stroke();
+    ctx.restore();
+    // Point indicator
+    ctx.beginPath();
+    ctx.arc(hover.x, hover.y, 4, 0, Math.PI * 2);
+    ctx.fillStyle = pointColor;
+    ctx.fill();
+    ctx.strokeStyle = theme.pointRing;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+}
+function BrushOverlay({ width, height, totalWidth, totalHeight, margin, dimension, scales, onBrush }) {
+    const svgRef = (0, react_1.useRef)(null);
+    const brushRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!svgRef.current)
+            return;
+        const g = (0, d3_selection_1.select)(svgRef.current).select(".brush-g");
+        const brushFn = dimension === "x"
+            ? (0, d3_brush_1.brushX)()
+            : dimension === "y"
+                ? (0, d3_brush_1.brushY)()
+                : (0, d3_brush_1.brush)();
+        brushFn.extent([[0, 0], [width, height]]);
+        brushFn.on("brush end", (event) => {
+            if (!scales)
+                return;
+            if (!event.selection) {
+                onBrush(null);
+                return;
+            }
+            let xRange;
+            let yRange;
+            if (dimension === "x") {
+                const [px0, px1] = event.selection;
+                xRange = [scales.x.invert(px0), scales.x.invert(px1)];
+                yRange = [scales.y.invert(height), scales.y.invert(0)];
+            }
+            else if (dimension === "y") {
+                const [py0, py1] = event.selection;
+                xRange = [scales.x.invert(0), scales.x.invert(width)];
+                yRange = [scales.y.invert(py1), scales.y.invert(py0)];
+            }
+            else {
+                const [[px0, py0], [px1, py1]] = event.selection;
+                xRange = [scales.x.invert(px0), scales.x.invert(px1)];
+                yRange = [scales.y.invert(py1), scales.y.invert(py0)];
+            }
+            onBrush({ x: xRange, y: yRange });
+        });
+        g.call(brushFn);
+        brushRef.current = brushFn;
+        // Style the brush selection rectangle
+        g.select(".selection")
+            .attr("fill", "steelblue")
+            .attr("fill-opacity", 0.15)
+            .attr("stroke", "steelblue")
+            .attr("stroke-width", 1);
+        return () => {
+            brushFn.on("brush end", null);
+            brushRef.current = null;
+        };
+    }, [width, height, dimension, scales, onBrush]);
+    return (React.createElement("svg", { ref: svgRef, width: totalWidth, height: totalHeight, style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            // Allow pointer events only on the brush overlay itself
+            pointerEvents: "all"
+        } },
+        React.createElement("g", { className: "brush-g", transform: `translate(${margin.left},${margin.top})` })));
+}
+// ── StreamXYFrame ──────────────────────────────────────────────────────
+const StreamXYFrame = (0, react_1.forwardRef)(function StreamXYFrame(props, ref) {
+    const { chartType, runtimeMode, data, xAccessor, yAccessor, colorAccessor, sizeAccessor, groupAccessor, lineDataAccessor, curve, normalize, binSize, valueAccessor, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, timeAccessor, xExtent, yExtent, extentPadding = 0.1, sizeRange, size = [500, 300], margin: marginProp, className, background, lineStyle, pointStyle, areaStyle, barStyle, waterfallStyle, swarmStyle, barColors, colorScheme, boundsAccessor, boundsStyle, openAccessor, highAccessor, lowAccessor, closeAccessor, candlestickStyle, showAxes = true, xLabel, yLabel, xFormat, yFormat, tickFormatTime, tickFormatValue, hoverAnnotation, tooltipContent, customHoverBehavior, enableHover, annotations, svgAnnotationRules, showGrid, legend, backgroundGraphics, foregroundGraphics, title, categoryAccessor, brush, onBrush, decay, pulse, transition, staleness, heatmapAggregation, heatmapXBins, heatmapYBins, marginalGraphics } = props;
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    // Auto-expand margins to at least 60px when marginals are configured
+    if (marginalGraphics) {
+        const MIN_MARGINAL = 60;
+        if (marginalGraphics.top && margin.top < MIN_MARGINAL)
+            margin.top = MIN_MARGINAL;
+        if (marginalGraphics.bottom && margin.bottom < MIN_MARGINAL)
+            margin.bottom = MIN_MARGINAL;
+        if (marginalGraphics.left && margin.left < MIN_MARGINAL)
+            margin.left = MIN_MARGINAL;
+        if (marginalGraphics.right && margin.right < MIN_MARGINAL)
+            margin.right = MIN_MARGINAL;
+    }
+    const adjustedWidth = size[0] - margin.left - margin.right;
+    const adjustedHeight = size[1] - margin.top - margin.bottom;
+    // Determine effective hover annotation config
+    const effectiveHoverAnnotation = hoverAnnotation ?? enableHover;
+    // ── Refs ─────────────────────────────────────────────────────────────
+    const canvasRef = (0, react_1.useRef)(null);
+    const rafRef = (0, react_1.useRef)(0);
+    const dirtyRef = (0, react_1.useRef)(false);
+    const [annotationFrame, setAnnotationFrame] = (0, react_1.useState)(0);
+    // Scales state: updated after each scene computation so SVGOverlay re-renders
+    const [currentScales, setCurrentScales] = (0, react_1.useState)(null);
+    // Hover state: ref for canvas (sync), React state for tooltip (async)
+    const hoverRef = (0, react_1.useRef)(null);
+    const [hoverPoint, setHoverPoint] = (0, react_1.useState)(null);
+    // Staleness state
+    const [isStale, setIsStale] = (0, react_1.useState)(false);
+    // Marginal data values
+    const [marginalXValues, setMarginalXValues] = (0, react_1.useState)([]);
+    const [marginalYValues, setMarginalYValues] = (0, react_1.useState)([]);
+    // Render function ref (always-fresh closure)
+    const renderFnRef = (0, react_1.useRef)(() => { });
+    // ── Pipeline ─────────────────────────────────────────────────────────
+    const isStreaming = runtimeMode === "streaming" || ["bar", "swarm", "waterfall"].includes(chartType);
+    const pipelineConfig = (0, react_1.useMemo)(() => ({
+        chartType,
+        runtimeMode: isStreaming ? "streaming" : "bounded",
+        windowSize,
+        windowMode,
+        arrowOfTime: isStreaming ? arrowOfTime : "right",
+        extentPadding,
+        xAccessor: isStreaming ? undefined : xAccessor,
+        yAccessor: isStreaming ? undefined : yAccessor,
+        timeAccessor: isStreaming ? timeAccessor : undefined,
+        valueAccessor,
+        colorAccessor,
+        sizeAccessor,
+        groupAccessor,
+        categoryAccessor,
+        lineDataAccessor,
+        xExtent,
+        yExtent,
+        sizeRange,
+        binSize,
+        normalize,
+        boundsAccessor,
+        boundsStyle,
+        openAccessor,
+        highAccessor,
+        lowAccessor,
+        closeAccessor,
+        candlestickStyle,
+        lineStyle,
+        pointStyle,
+        areaStyle,
+        swarmStyle,
+        colorScheme,
+        barColors,
+        annotations,
+        decay,
+        pulse,
+        transition,
+        staleness,
+        heatmapAggregation,
+        heatmapXBins,
+        heatmapYBins
+    }), [
+        chartType, windowSize, windowMode, arrowOfTime, extentPadding,
+        xAccessor, yAccessor, timeAccessor, valueAccessor,
+        colorAccessor, sizeAccessor, groupAccessor, categoryAccessor,
+        lineDataAccessor, xExtent, yExtent, sizeRange, binSize, normalize,
+        boundsAccessor, boundsStyle,
+        openAccessor, highAccessor, lowAccessor, closeAccessor, candlestickStyle,
+        lineStyle, pointStyle, areaStyle, swarmStyle, colorScheme, barColors, annotations,
+        decay, pulse, transition, staleness,
+        heatmapAggregation, heatmapXBins, heatmapYBins,
+        isStreaming
+    ]);
+    const storeRef = (0, react_1.useRef)(null);
+    if (!storeRef.current) {
+        storeRef.current = new PipelineStore_1.PipelineStore(pipelineConfig);
+    }
+    // ── Stable scheduleRender ────────────────────────────────────────────
+    const scheduleRender = (0, react_1.useCallback)(() => {
+        if (rafRef.current)
+            return;
+        rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+    }, []);
+    // Update config when it changes — also schedule re-render since style
+    // callbacks (pointStyle, areaStyle, etc.) may have changed.
+    (0, react_1.useEffect)(() => {
+        storeRef.current?.updateConfig(pipelineConfig);
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [pipelineConfig, scheduleRender]);
+    // ── DataSourceAdapter ────────────────────────────────────────────────
+    const adapterRef = (0, react_1.useRef)(null);
+    if (!adapterRef.current) {
+        adapterRef.current = new DataSourceAdapter_1.DataSourceAdapter((changeset) => {
+            const store = storeRef.current;
+            if (!store)
+                return;
+            const needsRender = store.ingest(changeset);
+            if (needsRender) {
+                dirtyRef.current = true;
+                scheduleRender();
+            }
+        });
+    }
+    // ── Push API (ref handle) ────────────────────────────────────────────
+    const pushPoint = (0, react_1.useCallback)((datum) => {
+        adapterRef.current?.push(datum);
+    }, []);
+    const pushManyPoints = (0, react_1.useCallback)((data) => {
+        adapterRef.current?.pushMany(data);
+    }, []);
+    const clearAll = (0, react_1.useCallback)(() => {
+        adapterRef.current?.clear();
+        storeRef.current?.clear();
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [scheduleRender]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        push: pushPoint,
+        pushMany: pushManyPoints,
+        clear: clearAll,
+        getData: () => storeRef.current?.getData() ?? [],
+        getScales: () => storeRef.current?.scales ?? null,
+        getExtents: () => storeRef.current?.getExtents() ?? null
+    }), [pushPoint, pushManyPoints, clearAll]);
+    // ── Controlled data prop ─────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        if (!data)
+            return;
+        adapterRef.current?.setBoundedData(data);
+    }, [data]);
+    // ── Hover handlers ───────────────────────────────────────────────────
+    const hoverHandlerRef = (0, react_1.useRef)(() => { });
+    const hoverLeaveRef = (0, react_1.useRef)(() => { });
+    hoverHandlerRef.current = (e) => {
+        if (!effectiveHoverAnnotation)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const chartX = e.clientX - rect.left - margin.left;
+        const chartY = e.clientY - rect.top - margin.top;
+        if (chartX < 0 || chartX > adjustedWidth || chartY < 0 || chartY > adjustedHeight) {
+            if (hoverRef.current) {
+                hoverRef.current = null;
+                setHoverPoint(null);
+                if (customHoverBehavior)
+                    customHoverBehavior(null);
+                scheduleRender();
+            }
+            return;
+        }
+        const store = storeRef.current;
+        if (!store || store.scene.length === 0)
+            return;
+        // Hit test against scene graph
+        const hit = (0, CanvasHitTester_1.findNearestNode)(store.scene, chartX, chartY);
+        if (!hit) {
+            if (hoverRef.current) {
+                hoverRef.current = null;
+                setHoverPoint(null);
+                if (customHoverBehavior)
+                    customHoverBehavior(null);
+                scheduleRender();
+            }
+            return;
+        }
+        const hover = {
+            data: hit.datum,
+            time: hit.x,
+            value: hit.y,
+            x: hit.x,
+            y: hit.y
+        };
+        hoverRef.current = hover;
+        setHoverPoint(hover);
+        if (customHoverBehavior)
+            customHoverBehavior(hover);
+        scheduleRender();
+    };
+    hoverLeaveRef.current = () => {
+        if (hoverRef.current) {
+            hoverRef.current = null;
+            setHoverPoint(null);
+            if (customHoverBehavior)
+                customHoverBehavior(null);
+            scheduleRender();
+        }
+    };
+    const onMouseMove = (0, react_1.useCallback)((e) => hoverHandlerRef.current(e), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => hoverLeaveRef.current(), []);
+    // ── Render function ──────────────────────────────────────────────────
+    renderFnRef.current = () => {
+        rafRef.current = 0;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const store = storeRef.current;
+        if (!store)
+            return;
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        // Advance transition animation (before scene rebuild)
+        const isTransitioning = store.advanceTransition(now);
+        // Compute scene graph (scales + scene nodes) — skip if mid-transition
+        if (!isTransitioning) {
+            store.computeScene({ width: adjustedWidth, height: adjustedHeight });
+        }
+        // DPR setup
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = size[0] * dpr;
+        canvas.height = size[1] * dpr;
+        canvas.style.width = `${size[0]}px`;
+        canvas.style.height = `${size[1]}px`;
+        ctx.scale(dpr, dpr);
+        ctx.translate(margin.left, margin.top);
+        ctx.clearRect(-margin.left, -margin.top, size[0], size[1]);
+        const theme = resolveThemeColors(canvas);
+        // Staleness dimming
+        const staleThreshold = staleness?.threshold ?? 5000;
+        const currentlyStale = staleness && store.lastIngestTime > 0 &&
+            (now - store.lastIngestTime) > staleThreshold;
+        if (currentlyStale) {
+            ctx.globalAlpha = staleness?.dimOpacity ?? 0.5;
+        }
+        // Background
+        if (background) {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
+        }
+        // Render data marks via canvas renderers
+        const renderers = RENDERERS[chartType];
+        if (renderers && store.scales) {
+            for (const renderer of renderers) {
+                renderer(ctx, store.scene, store.scales, { width: adjustedWidth, height: adjustedHeight });
+            }
+        }
+        // Reset alpha after staleness dimming
+        if (currentlyStale) {
+            ctx.globalAlpha = 1;
+        }
+        // Draw crosshair on hover
+        if (effectiveHoverAnnotation && hoverRef.current && store.scales) {
+            const config = typeof effectiveHoverAnnotation === "object" ? effectiveHoverAnnotation : {};
+            drawCrosshair(ctx, hoverRef.current, adjustedWidth, adjustedHeight, config, "#007bff", theme);
+        }
+        const wasDirty = dirtyRef.current;
+        dirtyRef.current = false;
+        // Push scales into React state so SVGOverlay renders axes/grid
+        if (wasDirty && store.scales) {
+            setCurrentScales(store.scales);
+            // Extract x/y values for marginal graphics
+            if (marginalGraphics) {
+                const rawData = store.getData();
+                const getX = typeof xAccessor === "function"
+                    ? xAccessor
+                    : (d) => d[xAccessor || "x"];
+                const getY = typeof yAccessor === "function"
+                    ? yAccessor
+                    : (d) => d[yAccessor || "y"];
+                setMarginalXValues(rawData.map(d => getX(d)).filter((v) => typeof v === "number" && isFinite(v)));
+                setMarginalYValues(rawData.map(d => getY(d)).filter((v) => typeof v === "number" && isFinite(v)));
+            }
+        }
+        // Trigger React re-render for SVG annotations
+        if (wasDirty && annotations && annotations.length > 0 && svgAnnotationRules) {
+            setAnnotationFrame(f => f + 1);
+        }
+        // Update staleness React state for badge
+        if (staleness?.showBadge) {
+            setIsStale(!!currentlyStale);
+        }
+        // Schedule next frame for continuous rendering (pulse/transitions)
+        if (isTransitioning || store.hasActivePulses) {
+            rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+        }
+    };
+    // ── Lifecycle ────────────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        scheduleRender();
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleRender]);
+    // Re-render when visual props change
+    (0, react_1.useEffect)(() => {
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [chartType, adjustedWidth, adjustedHeight, showAxes, background, lineStyle, scheduleRender]);
+    // Staleness check timer
+    (0, react_1.useEffect)(() => {
+        if (!staleness)
+            return;
+        const interval = setInterval(() => {
+            const store = storeRef.current;
+            if (!store || store.lastIngestTime === 0)
+                return;
+            const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+            const threshold = staleness.threshold ?? 5000;
+            const stale = (now - store.lastIngestTime) > threshold;
+            if (stale !== isStale) {
+                setIsStale(stale);
+                dirtyRef.current = true;
+                scheduleRender();
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [staleness, isStale, scheduleRender]);
+    // ── Tooltip positioning ──────────────────────────────────────────────
+    const tooltipRendered = effectiveHoverAnnotation && hoverPoint
+        ? (tooltipContent ? tooltipContent(hoverPoint) : React.createElement(DefaultTooltip, { hover: hoverPoint }))
+        : null;
+    const tooltipElement = tooltipRendered ? (React.createElement("div", { className: "stream-frame-tooltip", style: {
+            position: "absolute",
+            left: margin.left + hoverPoint.x,
+            top: margin.top + hoverPoint.y,
+            transform: `translate(${hoverPoint.x > adjustedWidth * 0.7 ? "calc(-100% - 12px)" : "12px"}, ${hoverPoint.y < adjustedHeight * 0.3 ? "4px" : "calc(-100% - 4px)"})`,
+            pointerEvents: "none",
+            zIndex: 1
+        } }, tooltipRendered)) : null;
+    // ── Render ───────────────────────────────────────────────────────────
+    return (React.createElement("div", { className: `stream-xy-frame${className ? ` ${className}` : ""}`, style: {
+            position: "relative",
+            width: size[0],
+            height: size[1]
+        }, onMouseMove: effectiveHoverAnnotation ? onMouseMove : undefined, onMouseLeave: effectiveHoverAnnotation ? onMouseLeave : undefined },
+        backgroundGraphics && (React.createElement("svg", { style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: size[0],
+                height: size[1],
+                pointerEvents: "none"
+            } }, backgroundGraphics)),
+        React.createElement("canvas", { ref: canvasRef, style: {
+                position: "absolute",
+                left: 0,
+                top: 0
+            } }),
+        React.createElement(SVGOverlay_1.SVGOverlay, { width: adjustedWidth, height: adjustedHeight, totalWidth: size[0], totalHeight: size[1], margin: margin, scales: currentScales, showAxes: showAxes, xLabel: xLabel, yLabel: yLabel, xFormat: xFormat || tickFormatTime, yFormat: yFormat || tickFormatValue, showGrid: showGrid, title: title, legend: legend, foregroundGraphics: foregroundGraphics, marginalGraphics: marginalGraphics, xValues: marginalXValues, yValues: marginalYValues, annotations: annotations, svgAnnotationRules: svgAnnotationRules, annotationFrame: annotationFrame }),
+        (brush || onBrush) && (React.createElement(BrushOverlay, { width: adjustedWidth, height: adjustedHeight, totalWidth: size[0], totalHeight: size[1], margin: margin, dimension: brush?.dimension ?? "xy", scales: currentScales, onBrush: onBrush ?? (() => { }) })),
+        staleness?.showBadge && (React.createElement("div", { className: "stream-staleness-badge", style: {
+                position: "absolute",
+                ...(staleness.badgePosition === "top-left" ? { top: 4, left: 4 } :
+                    staleness.badgePosition === "bottom-left" ? { bottom: 4, left: 4 } :
+                        staleness.badgePosition === "bottom-right" ? { bottom: 4, right: 4 } :
+                            { top: 4, right: 4 }),
+                padding: "2px 8px",
+                borderRadius: 4,
+                fontSize: 11,
+                fontWeight: 600,
+                pointerEvents: "none",
+                background: isStale ? "#dc3545" : "#28a745",
+                color: "white"
+            } }, isStale ? "STALE" : "LIVE")),
+        tooltipElement));
+});
+StreamXYFrame.displayName = "StreamXYFrame";
+exports.default = StreamXYFrame;

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

@@ -0,0 +1,20 @@
+"use strict";
+// ── Accessor resolution ────────────────────────────────────────────────
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAccessor = resolveAccessor;
+exports.resolveStringAccessor = resolveStringAccessor;
+function resolveAccessor(accessor, fallback) {
+    if (typeof accessor === "function")
+        return (d) => +accessor(d);
+    const key = accessor || fallback;
+    return (d) => +d[key];
+}
+function resolveStringAccessor(accessor, fallback) {
+    if (typeof accessor === "function")
+        return accessor;
+    if (accessor)
+        return (d) => String(d[accessor]);
+    if (fallback)
+        return (d) => String(d[fallback]);
+    return undefined;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.heatmapCanvasRenderer = exports.waterfallCanvasRenderer = exports.swarmCanvasRenderer = exports.barCanvasRenderer = exports.pointCanvasRenderer = exports.areaCanvasRenderer = exports.lineCanvasRenderer = exports.findNearestIndex = exports.findNearestNode = exports.PipelineStore = exports.DataSourceAdapter = exports.SVGOverlay = exports.StreamXYFrame = void 0;
+var StreamXYFrame_1 = require("./StreamXYFrame");
+Object.defineProperty(exports, "StreamXYFrame", { enumerable: true, get: function () { return __importDefault(StreamXYFrame_1).default; } });
+var SVGOverlay_1 = require("./SVGOverlay");
+Object.defineProperty(exports, "SVGOverlay", { enumerable: true, get: function () { return SVGOverlay_1.SVGOverlay; } });
+var DataSourceAdapter_1 = require("./DataSourceAdapter");
+Object.defineProperty(exports, "DataSourceAdapter", { enumerable: true, get: function () { return DataSourceAdapter_1.DataSourceAdapter; } });
+var PipelineStore_1 = require("./PipelineStore");
+Object.defineProperty(exports, "PipelineStore", { enumerable: true, get: function () { return PipelineStore_1.PipelineStore; } });
+var CanvasHitTester_1 = require("./CanvasHitTester");
+Object.defineProperty(exports, "findNearestNode", { enumerable: true, get: function () { return CanvasHitTester_1.findNearestNode; } });
+Object.defineProperty(exports, "findNearestIndex", { enumerable: true, get: function () { return CanvasHitTester_1.findNearestIndex; } });
+// Renderers
+var lineCanvasRenderer_1 = require("./renderers/lineCanvasRenderer");
+Object.defineProperty(exports, "lineCanvasRenderer", { enumerable: true, get: function () { return lineCanvasRenderer_1.lineCanvasRenderer; } });
+var areaCanvasRenderer_1 = require("./renderers/areaCanvasRenderer");
+Object.defineProperty(exports, "areaCanvasRenderer", { enumerable: true, get: function () { return areaCanvasRenderer_1.areaCanvasRenderer; } });
+var pointCanvasRenderer_1 = require("./renderers/pointCanvasRenderer");
+Object.defineProperty(exports, "pointCanvasRenderer", { enumerable: true, get: function () { return pointCanvasRenderer_1.pointCanvasRenderer; } });
+var barCanvasRenderer_1 = require("./renderers/barCanvasRenderer");
+Object.defineProperty(exports, "barCanvasRenderer", { enumerable: true, get: function () { return barCanvasRenderer_1.barCanvasRenderer; } });
+var swarmCanvasRenderer_1 = require("./renderers/swarmCanvasRenderer");
+Object.defineProperty(exports, "swarmCanvasRenderer", { enumerable: true, get: function () { return swarmCanvasRenderer_1.swarmCanvasRenderer; } });
+var waterfallCanvasRenderer_1 = require("./renderers/waterfallCanvasRenderer");
+Object.defineProperty(exports, "waterfallCanvasRenderer", { enumerable: true, get: function () { return waterfallCanvasRenderer_1.waterfallCanvasRenderer; } });
+var heatmapCanvasRenderer_1 = require("./renderers/heatmapCanvasRenderer");
+Object.defineProperty(exports, "heatmapCanvasRenderer", { enumerable: true, get: function () { return heatmapCanvasRenderer_1.heatmapCanvasRenderer; } });