semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,1243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PipelineStore = void 0;
+const d3_scale_1 = require("d3-scale");
+const RingBuffer_1 = require("../realtime/RingBuffer");
+const IncrementalExtent_1 = require("../realtime/IncrementalExtent");
+const BinAccumulator_1 = require("../realtime/BinAccumulator");
+const waterfallRenderer_1 = require("../realtime/renderers/waterfallRenderer");
+const SceneGraph_1 = require("./SceneGraph");
+const accessorUtils_1 = require("./accessorUtils");
+// ── Axis direction helpers ─────────────────────────────────────────────
+function getTimeAxis(arrowOfTime) {
+    return arrowOfTime === "up" || arrowOfTime === "down" ? "y" : "x";
+}
+// ── PipelineStore ──────────────────────────────────────────────────────
+class PipelineStore {
+    constructor(config) {
+        this.xExtent = new IncrementalExtent_1.IncrementalExtent();
+        this.yExtent = new IncrementalExtent_1.IncrementalExtent();
+        // ── Pulse tracking ──────────────────────────────────────────────────
+        this.timestampBuffer = null;
+        // ── Transition animation ────────────────────────────────────────────
+        this.activeTransition = null;
+        this.prevPositionMap = new Map();
+        // ── Staleness tracking ──────────────────────────────────────────────
+        this.lastIngestTime = 0;
+        this.scales = null;
+        this.scene = [];
+        this.version = 0;
+        this.config = config;
+        this.buffer = new RingBuffer_1.RingBuffer(config.windowSize);
+        this.growingCap = config.windowSize;
+        // Resolve accessors based on streaming vs bounded mode.
+        // Streaming types use time/value defaults; bounded types use x/y defaults.
+        const isStreamingType = ["bar", "swarm", "waterfall"].includes(config.chartType);
+        const useStreamingDefaults = isStreamingType || config.runtimeMode === "streaming";
+        if (useStreamingDefaults) {
+            this.getX = (0, accessorUtils_1.resolveAccessor)(config.timeAccessor || config.xAccessor, "time");
+            this.getY = (0, accessorUtils_1.resolveAccessor)(config.valueAccessor || config.yAccessor, "value");
+        }
+        else {
+            this.getX = (0, accessorUtils_1.resolveAccessor)(config.xAccessor, "x");
+            this.getY = (0, accessorUtils_1.resolveAccessor)(config.yAccessor, "y");
+        }
+        this.getGroup = (0, accessorUtils_1.resolveStringAccessor)(config.groupAccessor);
+        this.getCategory = (0, accessorUtils_1.resolveStringAccessor)(config.categoryAccessor);
+        this.getSize = config.sizeAccessor
+            ? (0, accessorUtils_1.resolveAccessor)(config.sizeAccessor, "size")
+            : undefined;
+        this.getColor = (0, accessorUtils_1.resolveStringAccessor)(config.colorAccessor);
+        this.getBounds = config.boundsAccessor
+            ? (0, accessorUtils_1.resolveAccessor)(config.boundsAccessor, "bounds")
+            : undefined;
+        // Candlestick accessors
+        if (config.chartType === "candlestick") {
+            this.getOpen = (0, accessorUtils_1.resolveAccessor)(config.openAccessor, "open");
+            this.getHigh = (0, accessorUtils_1.resolveAccessor)(config.highAccessor, "high");
+            this.getLow = (0, accessorUtils_1.resolveAccessor)(config.lowAccessor, "low");
+            this.getClose = (0, accessorUtils_1.resolveAccessor)(config.closeAccessor, "close");
+        }
+        // Pulse: parallel timestamp buffer
+        if (config.pulse) {
+            this.timestampBuffer = new RingBuffer_1.RingBuffer(config.windowSize);
+        }
+    }
+    /**
+     * Process a changeset from DataSourceAdapter.
+     * Returns true if the scene needs re-rendering.
+     */
+    ingest(changeset) {
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        this.lastIngestTime = now;
+        if (changeset.bounded) {
+            // Full replacement for bounded data
+            this.buffer.clear();
+            this.xExtent.clear();
+            this.yExtent.clear();
+            if (this.timestampBuffer)
+                this.timestampBuffer.clear();
+            // Auto-resize buffer to fit all bounded data.
+            // totalSize is set when data is progressively chunked — pre-allocate
+            // for the full dataset so subsequent append chunks don't evict.
+            const targetSize = changeset.totalSize || changeset.inserts.length;
+            if (targetSize > this.buffer.capacity) {
+                this.buffer.resize(targetSize);
+                if (this.timestampBuffer && targetSize > this.timestampBuffer.capacity) {
+                    this.timestampBuffer.resize(targetSize);
+                }
+            }
+            for (const d of changeset.inserts) {
+                this.buffer.push(d);
+                if (this.timestampBuffer)
+                    this.timestampBuffer.push(now);
+                this.xExtent.push(this.getX(d));
+                if (this.config.chartType === "candlestick" && this.getHigh && this.getLow) {
+                    this.yExtent.push(this.getHigh(d));
+                    this.yExtent.push(this.getLow(d));
+                }
+                else {
+                    this.yExtent.push(this.getY(d));
+                }
+            }
+        }
+        else {
+            // Streaming append
+            for (const d of changeset.inserts) {
+                if (this.config.windowMode === "growing" && this.buffer.full) {
+                    this.growingCap *= 2;
+                    this.buffer.resize(this.growingCap);
+                    if (this.timestampBuffer)
+                        this.timestampBuffer.resize(this.growingCap);
+                }
+                const evicted = this.buffer.push(d);
+                if (this.timestampBuffer)
+                    this.timestampBuffer.push(now);
+                this.xExtent.push(this.getX(d));
+                if (this.config.chartType === "candlestick" && this.getHigh && this.getLow) {
+                    this.yExtent.push(this.getHigh(d));
+                    this.yExtent.push(this.getLow(d));
+                }
+                else {
+                    this.yExtent.push(this.getY(d));
+                }
+                if (evicted != null) {
+                    this.xExtent.evict(this.getX(evicted));
+                    if (this.config.chartType === "candlestick" && this.getHigh && this.getLow) {
+                        this.yExtent.evict(this.getHigh(evicted));
+                        this.yExtent.evict(this.getLow(evicted));
+                    }
+                    else {
+                        this.yExtent.evict(this.getY(evicted));
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    /**
+     * Recompute scales and scene graph for the current buffer contents.
+     */
+    computeScene(layout) {
+        const { config, buffer } = this;
+        // Recalculate dirty extents
+        if (this.xExtent.dirty) {
+            this.xExtent.recalculate(buffer, this.getX);
+        }
+        if (this.yExtent.dirty) {
+            if (config.chartType === "candlestick" && this.getHigh && this.getLow) {
+                // Candlestick y-extent spans high→low, not a single y accessor
+                this.yExtent.clear();
+                for (const d of buffer) {
+                    this.yExtent.push(this.getHigh(d));
+                    this.yExtent.push(this.getLow(d));
+                }
+            }
+            else {
+                this.yExtent.recalculate(buffer, this.getY);
+            }
+        }
+        // Resolve domains — merge user-specified extents with data extents
+        const dataXDomain = this.xExtent.extent;
+        const dataYDomain = this.yExtent.extent;
+        let xDomain = config.xExtent
+            ? [
+                config.xExtent[0] ?? dataXDomain[0],
+                config.xExtent[1] ?? dataXDomain[1]
+            ]
+            : dataXDomain;
+        let yDomain = config.yExtent
+            ? [
+                config.yExtent[0] ?? dataYDomain[0],
+                config.yExtent[1] ?? dataYDomain[1]
+            ]
+            : dataYDomain;
+        // Determine if extents are fully user-specified (no padding needed)
+        const yFullySpecified = config.yExtent && config.yExtent[0] != null && config.yExtent[1] != null;
+        const xFullySpecified = config.xExtent && config.xExtent[0] != null && config.xExtent[1] != null;
+        // Chart-type specific extent adjustments
+        if (config.chartType === "stackedarea" && !yFullySpecified && buffer.size > 0) {
+            // Stacked areas: y-extent must cover the cumulative sums, not raw values
+            if (config.normalize) {
+                // Normalized: all stacks sum to 1.0
+                yDomain = [0, 1 + config.extentPadding];
+            }
+            else {
+                const data = buffer.toArray();
+                const groups = this.groupData(data);
+                // Build per-x-value totals across all groups
+                const xTotals = new Map();
+                for (const g of groups) {
+                    for (const d of g.data) {
+                        const x = this.getX(d);
+                        const y = this.getY(d);
+                        if (x != null && y != null && !Number.isNaN(x) && !Number.isNaN(y)) {
+                            xTotals.set(x, (xTotals.get(x) || 0) + y);
+                        }
+                    }
+                }
+                let maxStacked = 0;
+                for (const total of xTotals.values()) {
+                    if (total > maxStacked)
+                        maxStacked = total;
+                }
+                const pad = maxStacked > 0 ? maxStacked * config.extentPadding : 1;
+                yDomain = [0, maxStacked + pad];
+            }
+        }
+        else if (config.chartType === "bar" && config.binSize && !yFullySpecified && buffer.size > 0) {
+            const [, maxTotal] = (0, BinAccumulator_1.computeBinExtent)(buffer, this.getX, this.getY, config.binSize, this.getCategory);
+            yDomain = [0, maxTotal + maxTotal * config.extentPadding];
+        }
+        else if (config.chartType === "waterfall" && !yFullySpecified && buffer.size > 0) {
+            const [minCum, maxCum] = (0, waterfallRenderer_1.computeWaterfallExtent)(buffer, this.getY);
+            const range = maxCum - minCum;
+            const pad = range > 0 ? range * config.extentPadding : 1;
+            yDomain = [
+                Math.min(0, minCum - Math.abs(pad)),
+                Math.max(0, maxCum + Math.abs(pad))
+            ];
+        }
+        else if (!yFullySpecified && yDomain[0] !== Infinity) {
+            // Expand extent to include bounds/uncertainty offsets
+            if (this.getBounds) {
+                const data = buffer.toArray();
+                for (const d of data) {
+                    const y = this.getY(d);
+                    const offset = this.getBounds(d);
+                    if (y == null || Number.isNaN(y) || !offset)
+                        continue;
+                    if (y + offset > yDomain[1])
+                        yDomain[1] = y + offset;
+                    if (y - offset < yDomain[0])
+                        yDomain[0] = y - offset;
+                }
+            }
+            const range = yDomain[1] - yDomain[0];
+            const pad = range > 0 ? range * config.extentPadding : 1;
+            // Only pad the data-derived side; preserve user-specified bounds
+            const userMin = config.yExtent?.[0];
+            const userMax = config.yExtent?.[1];
+            yDomain = [
+                userMin != null ? yDomain[0] : yDomain[0] - pad,
+                userMax != null ? yDomain[1] : yDomain[1] + pad
+            ];
+        }
+        // Handle degenerate extents
+        if (xDomain[0] === Infinity || xDomain[1] === -Infinity)
+            xDomain = [0, 1];
+        if (yDomain[0] === Infinity || yDomain[1] === -Infinity)
+            yDomain = [0, 1];
+        // Build scales
+        // For streaming charts, use time/value axes based on arrowOfTime
+        const isStreaming = config.arrowOfTime !== undefined;
+        if (isStreaming) {
+            const timeAxis = getTimeAxis(config.arrowOfTime);
+            if (timeAxis === "x") {
+                const xRange = config.arrowOfTime === "right"
+                    ? [0, layout.width]
+                    : [layout.width, 0];
+                this.scales = {
+                    x: (0, d3_scale_1.scaleLinear)().domain(xDomain).range(xRange),
+                    y: (0, d3_scale_1.scaleLinear)().domain(yDomain).range([layout.height, 0])
+                };
+            }
+            else {
+                const yRange = config.arrowOfTime === "down"
+                    ? [0, layout.height]
+                    : [layout.height, 0];
+                this.scales = {
+                    x: (0, d3_scale_1.scaleLinear)().domain(yDomain).range([0, layout.width]),
+                    y: (0, d3_scale_1.scaleLinear)().domain(xDomain).range(yRange)
+                };
+            }
+        }
+        else {
+            this.scales = {
+                x: (0, d3_scale_1.scaleLinear)().domain(xDomain).range([0, layout.width]),
+                y: (0, d3_scale_1.scaleLinear)().domain(yDomain).range([layout.height, 0])
+            };
+        }
+        // Snapshot positions for transition animation (before rebuild)
+        if (this.config.transition && this.scene.length > 0) {
+            this.snapshotPositions();
+        }
+        // Build scene graph based on chart type
+        const data = buffer.toArray();
+        this.scene = this.buildSceneNodes(layout);
+        // Apply decay opacity to discrete nodes
+        if (this.config.decay) {
+            this.applyDecay(this.scene, data);
+        }
+        // Apply pulse glow to discrete nodes
+        if (this.config.pulse) {
+            this.applyPulse(this.scene, data);
+        }
+        // Start transition animation from old to new positions
+        if (this.config.transition && this.prevPositionMap.size > 0) {
+            this.startTransition();
+        }
+        this.version++;
+    }
+    buildSceneNodes(layout) {
+        const { config, buffer, scales } = this;
+        if (!scales || buffer.size === 0)
+            return [];
+        const data = buffer.toArray();
+        switch (config.chartType) {
+            case "line":
+                return this.buildLineScene(data);
+            case "area":
+                return this.buildAreaScene(data);
+            case "stackedarea":
+                return this.buildStackedAreaScene(data);
+            case "scatter":
+            case "bubble":
+                return this.buildPointScene(data);
+            case "heatmap":
+                return this.buildHeatmapScene(data, layout);
+            case "bar":
+                return this.buildBarScene(data);
+            case "swarm":
+                return this.buildSwarmScene(data);
+            case "waterfall":
+                return this.buildWaterfallScene(data, layout);
+            case "candlestick":
+                return this.buildCandlestickScene(data, layout);
+            default:
+                return [];
+        }
+    }
+    buildLineScene(data) {
+        const groups = this.groupData(data);
+        const nodes = [];
+        // Extract color thresholds from annotations (if any)
+        const colorThresholds = this.config.annotations
+            ?.filter((a) => a.type === "threshold" && a.color)
+            .map((a) => ({
+            value: a.value,
+            color: a.color,
+            thresholdType: (a.thresholdType || "greater")
+        }));
+        // Build bounds areas first so they render behind lines
+        if (this.getBounds) {
+            for (const g of groups) {
+                const boundsNode = this.buildBoundsForGroup(g.data, g.key);
+                if (boundsNode)
+                    nodes.push(boundsNode);
+            }
+        }
+        for (const g of groups) {
+            const style = this.resolveLineStyle(g.key, g.data[0]);
+            const lineNode = (0, SceneGraph_1.buildLineNode)(g.data, this.scales, this.getX, this.getY, style, g.key);
+            // Attach threshold info for the renderer
+            if (colorThresholds && colorThresholds.length > 0) {
+                lineNode.colorThresholds = colorThresholds;
+            }
+            nodes.push(lineNode);
+        }
+        return nodes;
+    }
+    buildAreaScene(data) {
+        const groups = this.groupData(data);
+        const nodes = [];
+        // Use the bottom of the y domain as the baseline so areas fill to the chart edge
+        const yDomain = this.scales.y.domain();
+        const baseline = yDomain[0];
+        for (const g of groups) {
+            const style = this.resolveAreaStyle(g.key, g.data[0]);
+            nodes.push((0, SceneGraph_1.buildAreaNode)(g.data, this.scales, this.getX, this.getY, baseline, style, g.key));
+        }
+        return nodes;
+    }
+    buildStackedAreaScene(data) {
+        const groups = this.groupData(data);
+        const styleFn = (group, sampleDatum) => this.resolveAreaStyle(group, sampleDatum);
+        return (0, SceneGraph_1.buildStackedAreaNodes)(groups, this.scales, this.getX, this.getY, styleFn, this.config.normalize);
+    }
+    buildPointScene(data) {
+        const nodes = [];
+        const defaultR = this.config.chartType === "bubble" ? 10 : 5;
+        const sizeRange = this.config.sizeRange || [3, 15];
+        // Compute size scale if sizeAccessor is set and no pointStyle handles it
+        let sizeScale = null;
+        if (this.getSize && !this.config.pointStyle) {
+            const sizes = data.map(d => this.getSize(d)).filter(s => s != null && !Number.isNaN(s));
+            if (sizes.length > 0) {
+                const minSize = Math.min(...sizes);
+                const maxSize = Math.max(...sizes);
+                sizeScale = (s) => {
+                    if (minSize === maxSize)
+                        return (sizeRange[0] + sizeRange[1]) / 2;
+                    return sizeRange[0] + ((s - minSize) / (maxSize - minSize)) * (sizeRange[1] - sizeRange[0]);
+                };
+            }
+        }
+        // Build color map from colorAccessor if no pointStyle handles it
+        let colorMap = null;
+        if (this.getColor && !this.config.pointStyle) {
+            const categories = new Set();
+            for (const d of data) {
+                const c = this.getColor(d);
+                if (c)
+                    categories.add(c);
+            }
+            const palette = Array.isArray(this.config.colorScheme) ? this.config.colorScheme
+                : ["#4e79a7", "#f28e2b", "#e15759", "#76b7b2", "#59a14f", "#edc948", "#b07aa1", "#ff9da7", "#9c755f", "#bab0ac"];
+            colorMap = new Map();
+            let ci = 0;
+            for (const cat of categories) {
+                colorMap.set(cat, palette[ci % palette.length]);
+                ci++;
+            }
+        }
+        for (const d of data) {
+            let style = this.config.pointStyle ? this.config.pointStyle(d) : { fill: "#4e79a7", opacity: 0.8 };
+            // Apply size from accessor if pointStyle doesn't provide it
+            let r = style.r || defaultR;
+            if (sizeScale && this.getSize) {
+                const sizeVal = this.getSize(d);
+                if (sizeVal != null && !Number.isNaN(sizeVal)) {
+                    r = sizeScale(sizeVal);
+                }
+            }
+            // Apply color from accessor if pointStyle doesn't provide a custom fill
+            if (colorMap && this.getColor) {
+                const colorVal = this.getColor(d);
+                if (colorVal && colorMap.has(colorVal)) {
+                    style = { ...style, fill: colorMap.get(colorVal) };
+                }
+            }
+            const node = (0, SceneGraph_1.buildPointNode)(d, this.scales, this.getX, this.getY, r, style);
+            if (node)
+                nodes.push(node);
+        }
+        return nodes;
+    }
+    buildHeatmapScene(data, layout) {
+        const nodes = [];
+        // Streaming heatmap: 2D grid binning with aggregation
+        if (this.config.heatmapAggregation) {
+            return this.buildStreamingHeatmapScene(data, layout);
+        }
+        const getVal = (0, accessorUtils_1.resolveAccessor)(this.config.valueAccessor, "value");
+        // Determine grid dimensions from unique x/y values
+        const xSet = new Set();
+        const ySet = new Set();
+        for (const d of data) {
+            xSet.add(this.getX(d));
+            ySet.add(this.getY(d));
+        }
+        const xValues = Array.from(xSet).sort((a, b) => a - b);
+        const yValues = Array.from(ySet).sort((a, b) => a - b);
+        if (xValues.length === 0 || yValues.length === 0)
+            return nodes;
+        const cellW = layout.width / xValues.length;
+        const cellH = layout.height / yValues.length;
+        // Build value lookup
+        const valueMap = new Map();
+        for (const d of data) {
+            const key = `${this.getX(d)}_${this.getY(d)}`;
+            valueMap.set(key, { val: getVal(d), datum: d });
+        }
+        // Compute value range for color
+        let minVal = Infinity;
+        let maxVal = -Infinity;
+        for (const { val } of valueMap.values()) {
+            if (val < minVal)
+                minVal = val;
+            if (val > maxVal)
+                maxVal = val;
+        }
+        const valRange = maxVal - minVal || 1;
+        for (let xi = 0; xi < xValues.length; xi++) {
+            for (let yi = 0; yi < yValues.length; yi++) {
+                const key = `${xValues[xi]}_${yValues[yi]}`;
+                const entry = valueMap.get(key);
+                if (!entry)
+                    continue;
+                const t = (entry.val - minVal) / valRange;
+                // Default to blues interpolation
+                const r = Math.round(220 - 180 * t);
+                const g = Math.round(220 - 100 * t);
+                const b = Math.round(255 - 50 * t);
+                const fill = `rgb(${r},${g},${b})`;
+                nodes.push((0, SceneGraph_1.buildHeatcellNode)(xi * cellW, (yValues.length - 1 - yi) * cellH, cellW, cellH, fill, entry.datum));
+            }
+        }
+        return nodes;
+    }
+    /**
+     * Streaming heatmap: discretize continuous x/y into a grid and aggregate.
+     */
+    buildStreamingHeatmapScene(data, layout) {
+        const nodes = [];
+        const xBins = this.config.heatmapXBins ?? 20;
+        const yBins = this.config.heatmapYBins ?? 20;
+        const agg = this.config.heatmapAggregation ?? "count";
+        const getVal = (0, accessorUtils_1.resolveAccessor)(this.config.valueAccessor, "value");
+        if (!this.scales || data.length === 0)
+            return nodes;
+        const [xMin, xMax] = this.scales.x.domain();
+        const [yMin, yMax] = this.scales.y.domain();
+        const xRange = xMax - xMin || 1;
+        const yRange = yMax - yMin || 1;
+        const xBinSize = xRange / xBins;
+        const yBinSize = yRange / yBins;
+        // Grid cells: [xi][yi] → { sum, count }
+        const grid = new Map();
+        for (const d of data) {
+            const xVal = this.getX(d);
+            const yVal = this.getY(d);
+            const xi = Math.min(Math.floor((xVal - xMin) / xBinSize), xBins - 1);
+            const yi = Math.min(Math.floor((yVal - yMin) / yBinSize), yBins - 1);
+            if (xi < 0 || yi < 0)
+                continue;
+            const key = `${xi}_${yi}`;
+            let cell = grid.get(key);
+            if (!cell) {
+                cell = { sum: 0, count: 0, data: [] };
+                grid.set(key, cell);
+            }
+            cell.count++;
+            cell.sum += getVal(d);
+            cell.data.push(d);
+        }
+        // Compute aggregated values and find range
+        let minVal = Infinity;
+        let maxVal = -Infinity;
+        const cellValues = new Map();
+        for (const [key, cell] of grid) {
+            let val;
+            switch (agg) {
+                case "sum":
+                    val = cell.sum;
+                    break;
+                case "mean":
+                    val = cell.count > 0 ? cell.sum / cell.count : 0;
+                    break;
+                default:
+                    val = cell.count;
+                    break;
+            }
+            cellValues.set(key, val);
+            if (val < minVal)
+                minVal = val;
+            if (val > maxVal)
+                maxVal = val;
+        }
+        const valRange = maxVal - minVal || 1;
+        const cellW = layout.width / xBins;
+        const cellH = layout.height / yBins;
+        for (const [key, val] of cellValues) {
+            const [xiStr, yiStr] = key.split("_");
+            const xi = +xiStr;
+            const yi = +yiStr;
+            const t = (val - minVal) / valRange;
+            const r = Math.round(220 - 180 * t);
+            const g = Math.round(220 - 100 * t);
+            const b = Math.round(255 - 50 * t);
+            const fill = `rgb(${r},${g},${b})`;
+            const cell = grid.get(key);
+            nodes.push((0, SceneGraph_1.buildHeatcellNode)(xi * cellW, (yBins - 1 - yi) * cellH, cellW, cellH, fill, { xi, yi, value: val, count: cell.count, sum: cell.sum, data: cell.data }));
+        }
+        return nodes;
+    }
+    buildBarScene(data) {
+        if (!this.config.binSize)
+            return [];
+        const bins = (0, BinAccumulator_1.computeBins)(data, this.getX, this.getY, this.config.binSize, this.getCategory);
+        if (bins.size === 0)
+            return [];
+        // Establish a global category order that is stable across frames.
+        // Use barColors keys first (preserves user-specified order), then any
+        // additional categories sorted alphabetically.  This prevents flicker
+        // when bins partially exit the sliding window and their per-category
+        // values shrink/disappear — without a fixed order the Map iteration
+        // order shifts and stacked segments jump around.
+        let categoryOrder = null;
+        if (this.getCategory) {
+            const allCategories = new Set();
+            for (const bin of bins.values()) {
+                for (const cat of bin.categories.keys()) {
+                    allCategories.add(cat);
+                }
+            }
+            const colorKeys = this.config.barColors ? Object.keys(this.config.barColors) : [];
+            const listed = new Set(colorKeys);
+            const unlisted = Array.from(allCategories).filter(c => !listed.has(c)).sort();
+            categoryOrder = [...colorKeys.filter(k => allCategories.has(k)), ...unlisted];
+        }
+        const nodes = [];
+        const scales = this.scales;
+        const [domainMin, domainMax] = scales.x.domain();
+        const gap = this.config.barColors ? 1 : 1;
+        for (const bin of bins.values()) {
+            const clampedStart = Math.max(bin.start, domainMin);
+            const clampedEnd = Math.min(bin.end, domainMax);
+            if (clampedStart >= clampedEnd)
+                continue;
+            const rawX0 = scales.x(clampedStart);
+            const rawX1 = scales.x(clampedEnd);
+            const x0 = Math.min(rawX0, rawX1) + gap / 2;
+            const x1 = Math.max(rawX0, rawX1) - gap / 2;
+            const barWidth = x1 - x0;
+            if (barWidth <= 0)
+                continue;
+            if (categoryOrder && bin.categories.size > 0) {
+                let cumulativeBase = 0;
+                for (const cat of categoryOrder) {
+                    const catVal = bin.categories.get(cat) || 0;
+                    if (catVal === 0)
+                        continue;
+                    const yBottom = scales.y(cumulativeBase);
+                    const yTop = scales.y(cumulativeBase + catVal);
+                    const rectY = Math.min(yBottom, yTop);
+                    const rectH = Math.abs(yBottom - yTop);
+                    nodes.push((0, SceneGraph_1.buildRectNode)(x0, rectY, barWidth, rectH, { fill: this.config.barColors?.[cat] || "#4e79a7" }, { binStart: bin.start, binEnd: bin.end, total: bin.total, category: cat, categoryValue: catVal }, cat));
+                    cumulativeBase += catVal;
+                }
+            }
+            else {
+                const yZero = scales.y(0);
+                const yTop = scales.y(bin.total);
+                const rectY = Math.min(yZero, yTop);
+                const rectH = Math.abs(yZero - yTop);
+                nodes.push((0, SceneGraph_1.buildRectNode)(x0, rectY, barWidth, rectH, { fill: "#007bff" }, { binStart: bin.start, binEnd: bin.end, total: bin.total }));
+            }
+        }
+        return nodes;
+    }
+    buildSwarmScene(data) {
+        const nodes = [];
+        const swarm = this.config.swarmStyle || {};
+        const radius = swarm.radius ?? 3;
+        const defaultFill = swarm.fill ?? "#007bff";
+        const opacity = swarm.opacity ?? 0.7;
+        const stroke = swarm.stroke;
+        const strokeWidth = swarm.strokeWidth;
+        for (const d of data) {
+            const xVal = this.getX(d);
+            const yVal = this.getY(d);
+            if (yVal == null || Number.isNaN(yVal))
+                continue;
+            const x = this.scales.x(xVal);
+            const y = this.scales.y(yVal);
+            let fill = defaultFill;
+            if (this.getCategory) {
+                const cat = this.getCategory(d);
+                fill = this.config.barColors?.[cat] || fill;
+            }
+            nodes.push({
+                type: "point",
+                x, y, r: radius,
+                style: { fill, opacity, stroke, strokeWidth },
+                datum: d
+            });
+        }
+        return nodes;
+    }
+    buildWaterfallScene(data, layout) {
+        const nodes = [];
+        const scales = this.scales;
+        // Filter valid data
+        const arr = data.filter(d => {
+            const v = this.getY(d);
+            return v != null && !Number.isNaN(v);
+        });
+        if (arr.length === 0)
+            return nodes;
+        const gap = 1;
+        let baseline = 0;
+        for (let i = 0; i < arr.length; i++) {
+            const d = arr[i];
+            const t = this.getX(d);
+            const delta = this.getY(d);
+            const cumEnd = baseline + delta;
+            // Compute bar width from time gap
+            let barWidthTime;
+            if (i < arr.length - 1) {
+                barWidthTime = this.getX(arr[i + 1]) - t;
+            }
+            else if (i > 0) {
+                barWidthTime = t - this.getX(arr[i - 1]);
+            }
+            else {
+                barWidthTime = 0;
+            }
+            const rawX0 = scales.x(t);
+            const rawX1 = barWidthTime !== 0 ? scales.x(t + barWidthTime) : rawX0 + layout.width / 10;
+            const x0 = Math.min(rawX0, rawX1) + gap / 2;
+            const x1 = Math.max(rawX0, rawX1) - gap / 2;
+            const barWidth = x1 - x0;
+            if (barWidth <= 0) {
+                baseline = cumEnd;
+                continue;
+            }
+            const yBaseline = scales.y(baseline);
+            const yTop = scales.y(cumEnd);
+            const rectY = Math.min(yBaseline, yTop);
+            const rectH = Math.abs(yBaseline - yTop);
+            const fill = delta >= 0 ? "#28a745" : "#dc3545";
+            nodes.push((0, SceneGraph_1.buildRectNode)(x0, rectY, barWidth, rectH, { fill }, { ...d, baseline, cumEnd, delta }));
+            baseline = cumEnd;
+        }
+        return nodes;
+    }
+    buildCandlestickScene(data, layout) {
+        if (!this.getOpen || !this.getHigh || !this.getLow || !this.getClose || !this.scales)
+            return [];
+        const nodes = [];
+        const cs = this.config.candlestickStyle || {};
+        const upColor = cs.upColor || "#28a745";
+        const downColor = cs.downColor || "#dc3545";
+        const wickColor = cs.wickColor || "#333";
+        const wickWidth = cs.wickWidth || 1;
+        // Compute body width from data spacing
+        const sortedX = data
+            .map(d => this.getX(d))
+            .filter(x => x != null && !Number.isNaN(x))
+            .sort((a, b) => a - b);
+        let bodyWidth = cs.bodyWidth || 6;
+        if (!cs.bodyWidth && sortedX.length > 1) {
+            // Auto-size: 60% of the minimum gap between adjacent x values
+            let minGap = Infinity;
+            for (let i = 1; i < sortedX.length; i++) {
+                const gap = Math.abs(this.scales.x(sortedX[i]) - this.scales.x(sortedX[i - 1]));
+                if (gap > 0 && gap < minGap)
+                    minGap = gap;
+            }
+            if (minGap !== Infinity) {
+                bodyWidth = Math.max(2, Math.min(minGap * 0.6, 20));
+            }
+        }
+        for (const d of data) {
+            const xVal = this.getX(d);
+            if (xVal == null || Number.isNaN(xVal))
+                continue;
+            const open = this.getOpen(d);
+            const high = this.getHigh(d);
+            const low = this.getLow(d);
+            const close = this.getClose(d);
+            if ([open, high, low, close].some(v => v == null || Number.isNaN(v)))
+                continue;
+            const isUp = close >= open;
+            nodes.push({
+                type: "candlestick",
+                x: this.scales.x(xVal),
+                openY: this.scales.y(open),
+                closeY: this.scales.y(close),
+                highY: this.scales.y(high),
+                lowY: this.scales.y(low),
+                bodyWidth,
+                upColor,
+                downColor,
+                wickColor,
+                wickWidth,
+                isUp,
+                datum: d
+            });
+        }
+        return nodes;
+    }
+    // ── Bounds helpers ───────────────────────────────────────────────────
+    buildBoundsForGroup(data, group) {
+        if (!this.getBounds || !this.scales)
+            return null;
+        const topPath = [];
+        const bottomPath = [];
+        for (const d of data) {
+            const x = this.getX(d);
+            const y = this.getY(d);
+            if (x == null || y == null || Number.isNaN(x) || Number.isNaN(y))
+                continue;
+            const offset = this.getBounds(d);
+            const px = this.scales.x(x);
+            if (!offset || offset === 0) {
+                // No bounds at this point — collapse to the line
+                const py = this.scales.y(y);
+                topPath.push([px, py]);
+                bottomPath.push([px, py]);
+            }
+            else {
+                topPath.push([px, this.scales.y(y + offset)]);
+                bottomPath.push([px, this.scales.y(y - offset)]);
+            }
+        }
+        if (topPath.length < 2)
+            return null;
+        return {
+            type: "area",
+            topPath,
+            bottomPath,
+            style: this.resolveBoundsStyle(group, data[0]),
+            datum: data,
+            group,
+            interactive: false
+        };
+    }
+    resolveBoundsStyle(group, sampleDatum) {
+        const bs = this.config.boundsStyle;
+        if (typeof bs === "function") {
+            return bs(sampleDatum || {}, group);
+        }
+        if (bs && typeof bs === "object") {
+            return bs;
+        }
+        // Default: match line color with low opacity
+        const lineStyle = this.resolveLineStyle(group, sampleDatum);
+        return {
+            fill: lineStyle.stroke || "#4e79a7",
+            fillOpacity: 0.2,
+            stroke: "none"
+        };
+    }
+    // ── Decay ────────────────────────────────────────────────────────────
+    /**
+     * Compute decay opacity for a datum at `bufferIndex` out of `bufferSize` items.
+     * Index 0 = oldest, bufferSize-1 = newest. Returns 0–1.
+     */
+    computeDecayOpacity(bufferIndex, bufferSize) {
+        const decay = this.config.decay;
+        if (!decay || bufferSize <= 1)
+            return 1;
+        const minOpacity = decay.minOpacity ?? 0.1;
+        // age: 0 = newest, bufferSize-1 = oldest
+        const age = bufferSize - 1 - bufferIndex;
+        switch (decay.type) {
+            case "linear": {
+                const t = 1 - age / (bufferSize - 1);
+                return minOpacity + t * (1 - minOpacity);
+            }
+            case "exponential": {
+                const halfLife = decay.halfLife ?? bufferSize / 2;
+                const t = Math.pow(0.5, age / halfLife);
+                return minOpacity + t * (1 - minOpacity);
+            }
+            case "step": {
+                const threshold = decay.stepThreshold ?? bufferSize * 0.5;
+                return age < threshold ? 1 : minOpacity;
+            }
+            default:
+                return 1;
+        }
+    }
+    /**
+     * Apply decay opacity to a list of discrete scene nodes.
+     * Uses the datum's index in the buffer data array.
+     */
+    applyDecay(nodes, data) {
+        if (!this.config.decay)
+            return;
+        const bufferSize = data.length;
+        if (bufferSize <= 1)
+            return;
+        // Build datum→index lookup
+        const indexMap = new Map();
+        for (let i = 0; i < data.length; i++) {
+            indexMap.set(data[i], i);
+        }
+        for (const node of nodes) {
+            if (node.type === "line" || node.type === "area")
+                continue;
+            const idx = indexMap.get(node.datum);
+            if (idx == null)
+                continue;
+            const decayOpacity = this.computeDecayOpacity(idx, bufferSize);
+            if (node.type === "heatcell") {
+                ;
+                node.style = { opacity: decayOpacity };
+            }
+            else if (node.type === "candlestick") {
+                // Candlestick doesn't have a style object — store opacity for renderer
+                ;
+                node._decayOpacity = decayOpacity;
+            }
+            else {
+                const baseOpacity = node.style?.opacity ?? 1;
+                node.style = { ...node.style, opacity: baseOpacity * decayOpacity };
+            }
+        }
+    }
+    // ── Pulse ───────────────────────────────────────────────────────────
+    /**
+     * Compute pulse intensity for a datum inserted at `insertTime`.
+     * Returns 0–1 (1 = just inserted, 0 = pulse expired).
+     */
+    computePulseIntensity(insertTime, now) {
+        const pulse = this.config.pulse;
+        if (!pulse)
+            return 0;
+        const duration = pulse.duration ?? 500;
+        const age = now - insertTime;
+        if (age >= duration)
+            return 0;
+        return 1 - age / duration;
+    }
+    /**
+     * Apply pulse glow to discrete scene nodes.
+     */
+    applyPulse(nodes, data) {
+        if (!this.config.pulse || !this.timestampBuffer)
+            return;
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        const pulseColor = this.config.pulse.color ?? "rgba(255,255,255,0.6)";
+        // Build datum→index lookup
+        const indexMap = new Map();
+        for (let i = 0; i < data.length; i++) {
+            indexMap.set(data[i], i);
+        }
+        for (const node of nodes) {
+            if (node.type === "line" || node.type === "area")
+                continue;
+            const idx = indexMap.get(node.datum);
+            if (idx == null)
+                continue;
+            const insertTime = this.timestampBuffer.get(idx);
+            if (insertTime == null)
+                continue;
+            const intensity = this.computePulseIntensity(insertTime, now);
+            if (intensity > 0) {
+                node._pulseIntensity = intensity;
+                node._pulseColor = pulseColor;
+            }
+        }
+    }
+    /**
+     * Returns true if there are active pulse animations that need continuous rendering.
+     */
+    get hasActivePulses() {
+        if (!this.config.pulse || !this.timestampBuffer || this.timestampBuffer.size === 0)
+            return false;
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        const duration = this.config.pulse.duration ?? 500;
+        const newest = this.timestampBuffer.peek();
+        return newest != null && (now - newest) < duration;
+    }
+    // ── Transitions ─────────────────────────────────────────────────────
+    /**
+     * Snapshot current scene node positions before rebuild.
+     */
+    snapshotPositions() {
+        this.prevPositionMap.clear();
+        for (let i = 0; i < this.scene.length; i++) {
+            const node = this.scene[i];
+            const key = this.getNodeIdentity(node, i);
+            if (!key)
+                continue;
+            if (node.type === "point") {
+                this.prevPositionMap.set(key, { x: node.x, y: node.y, r: node.r });
+            }
+            else if (node.type === "rect") {
+                this.prevPositionMap.set(key, { x: node.x, y: node.y, w: node.w, h: node.h });
+            }
+            else if (node.type === "heatcell") {
+                this.prevPositionMap.set(key, { x: node.x, y: node.y, w: node.w, h: node.h });
+            }
+            else if (node.type === "candlestick") {
+                this.prevPositionMap.set(key, { x: node.x, y: node.openY });
+            }
+        }
+    }
+    /**
+     * Get a stable identity key for a scene node.
+     */
+    getNodeIdentity(node, index) {
+        switch (node.type) {
+            case "point":
+                return `p:${node.datum === undefined ? index : this.getX(node.datum)}_${this.getY(node.datum)}`;
+            case "rect":
+                return `r:${node.group || ""}:${node.datum?.binStart ?? node.datum?.category ?? index}`;
+            case "heatcell":
+                return `h:${node.x}_${node.y}`;
+            case "candlestick":
+                return `c:${this.getX(node.datum)}`;
+            default:
+                return null;
+        }
+    }
+    /**
+     * After scene rebuild, set up transition from old to new positions.
+     */
+    startTransition() {
+        if (!this.config.transition || this.prevPositionMap.size === 0)
+            return;
+        const duration = this.config.transition.duration ?? 300;
+        let hasChanges = false;
+        for (let i = 0; i < this.scene.length; i++) {
+            const node = this.scene[i];
+            const key = this.getNodeIdentity(node, i);
+            if (!key)
+                continue;
+            const prev = this.prevPositionMap.get(key);
+            if (!prev)
+                continue;
+            // Store target positions and restore previous for animation start
+            if (node.type === "point") {
+                const target = { x: node.x, y: node.y, r: node.r };
+                if (prev.x !== target.x || prev.y !== target.y) {
+                    node._targetX = target.x;
+                    node._targetY = target.y;
+                    node._targetR = target.r;
+                    node.x = prev.x;
+                    node.y = prev.y;
+                    node.r = prev.r ?? node.r;
+                    hasChanges = true;
+                }
+            }
+            else if (node.type === "rect") {
+                const target = { x: node.x, y: node.y, w: node.w, h: node.h };
+                if (prev.x !== target.x || prev.y !== target.y || prev.w !== target.w || prev.h !== target.h) {
+                    node._targetX = target.x;
+                    node._targetY = target.y;
+                    node._targetW = target.w;
+                    node._targetH = target.h;
+                    node.x = prev.x;
+                    node.y = prev.y;
+                    node.w = prev.w ?? node.w;
+                    node.h = prev.h ?? node.h;
+                    hasChanges = true;
+                }
+            }
+            else if (node.type === "heatcell") {
+                const target = { x: node.x, y: node.y, w: node.w, h: node.h };
+                if (prev.x !== target.x || prev.y !== target.y) {
+                    node._targetX = target.x;
+                    node._targetY = target.y;
+                    node._targetW = target.w;
+                    node._targetH = target.h;
+                    node.x = prev.x;
+                    node.y = prev.y;
+                    node.w = prev.w ?? node.w;
+                    node.h = prev.h ?? node.h;
+                    hasChanges = true;
+                }
+            }
+        }
+        if (hasChanges) {
+            this.activeTransition = {
+                startTime: typeof performance !== "undefined" ? performance.now() : Date.now(),
+                duration
+            };
+        }
+    }
+    /**
+     * Advance the transition animation. Returns true if still animating.
+     */
+    advanceTransition(now) {
+        if (!this.activeTransition)
+            return false;
+        const elapsed = now - this.activeTransition.startTime;
+        const rawT = Math.min(elapsed / this.activeTransition.duration, 1);
+        // Ease-out cubic (or linear)
+        const t = this.config.transition?.easing === "linear"
+            ? rawT
+            : 1 - Math.pow(1 - rawT, 3);
+        for (const node of this.scene) {
+            if (node.type === "point") {
+                if (node._targetX === undefined)
+                    continue;
+                const key = this.getNodeIdentity(node, 0);
+                if (!key)
+                    continue;
+                const prev = this.prevPositionMap.get(key);
+                if (!prev)
+                    continue;
+                node.x = prev.x + (node._targetX - prev.x) * t;
+                node.y = prev.y + (node._targetY - prev.y) * t;
+                if (node._targetR !== undefined && prev.r !== undefined) {
+                    node.r = prev.r + (node._targetR - prev.r) * t;
+                }
+            }
+            else if (node.type === "rect") {
+                if (node._targetX === undefined)
+                    continue;
+                const key = this.getNodeIdentity(node, 0);
+                if (!key)
+                    continue;
+                const prev = this.prevPositionMap.get(key);
+                if (!prev)
+                    continue;
+                node.x = prev.x + (node._targetX - prev.x) * t;
+                node.y = prev.y + (node._targetY - prev.y) * t;
+                if (prev.w !== undefined)
+                    node.w = prev.w + (node._targetW - prev.w) * t;
+                if (prev.h !== undefined)
+                    node.h = prev.h + (node._targetH - prev.h) * t;
+            }
+            else if (node.type === "heatcell") {
+                if (node._targetX === undefined)
+                    continue;
+                const key = this.getNodeIdentity(node, 0);
+                if (!key)
+                    continue;
+                const prev = this.prevPositionMap.get(key);
+                if (!prev)
+                    continue;
+                node.x = prev.x + (node._targetX - prev.x) * t;
+                node.y = prev.y + (node._targetY - prev.y) * t;
+                if (prev.w !== undefined)
+                    node.w = prev.w + (node._targetW - prev.w) * t;
+                if (prev.h !== undefined)
+                    node.h = prev.h + (node._targetH - prev.h) * t;
+            }
+        }
+        if (rawT >= 1) {
+            // Snap to targets and clear transition
+            for (const node of this.scene) {
+                if (node.type === "point") {
+                    if (node._targetX === undefined)
+                        continue;
+                    node.x = node._targetX;
+                    node.y = node._targetY;
+                    if (node._targetR !== undefined)
+                        node.r = node._targetR;
+                    node._targetX = undefined;
+                    node._targetY = undefined;
+                    node._targetR = undefined;
+                }
+                else if (node.type === "rect") {
+                    if (node._targetX === undefined)
+                        continue;
+                    node.x = node._targetX;
+                    node.y = node._targetY;
+                    node.w = node._targetW;
+                    node.h = node._targetH;
+                    node._targetX = undefined;
+                    node._targetY = undefined;
+                    node._targetW = undefined;
+                    node._targetH = undefined;
+                }
+                else if (node.type === "heatcell") {
+                    if (node._targetX === undefined)
+                        continue;
+                    node.x = node._targetX;
+                    node.y = node._targetY;
+                    node.w = node._targetW;
+                    node.h = node._targetH;
+                    node._targetX = undefined;
+                    node._targetY = undefined;
+                    node._targetW = undefined;
+                    node._targetH = undefined;
+                }
+            }
+            this.activeTransition = null;
+            return false;
+        }
+        return true;
+    }
+    // ── Helpers ──────────────────────────────────────────────────────────
+    groupData(data) {
+        if (!this.getGroup) {
+            return [{ key: "_default", data }];
+        }
+        const groups = new Map();
+        for (const d of data) {
+            const key = this.getGroup(d);
+            if (!groups.has(key))
+                groups.set(key, []);
+            groups.get(key).push(d);
+        }
+        return Array.from(groups.entries()).map(([key, data]) => ({ key, data }));
+    }
+    resolveLineStyle(group, sampleDatum) {
+        const ls = this.config.lineStyle;
+        if (typeof ls === "function") {
+            return ls(sampleDatum || {}, group);
+        }
+        if (ls && typeof ls === "object") {
+            return {
+                stroke: ls.stroke || "#007bff",
+                strokeWidth: ls.strokeWidth || 2,
+                strokeDasharray: ls.strokeDasharray,
+                fill: ls.fill,
+                fillOpacity: ls.fillOpacity,
+                opacity: ls.opacity
+            };
+        }
+        return { stroke: "#007bff", strokeWidth: 2 };
+    }
+    resolveAreaStyle(group, sampleDatum) {
+        if (this.config.areaStyle) {
+            return this.config.areaStyle(sampleDatum || {});
+        }
+        // Fall back to lineStyle — AreaChart passes area styling via lineStyle
+        const ls = this.config.lineStyle;
+        if (typeof ls === "function") {
+            return ls(sampleDatum || {}, group);
+        }
+        if (ls && typeof ls === "object") {
+            return {
+                fill: ls.fill || ls.stroke || "#4e79a7",
+                fillOpacity: ls.fillOpacity ?? 0.7,
+                stroke: ls.stroke || "#4e79a7",
+                strokeWidth: ls.strokeWidth || 2
+            };
+        }
+        return { fill: "#4e79a7", fillOpacity: 0.7, stroke: "#4e79a7", strokeWidth: 2 };
+    }
+    // ── Public accessors ─────────────────────────────────────────────────
+    getData() {
+        return this.buffer.toArray();
+    }
+    getExtents() {
+        if (this.xExtent.min === Infinity)
+            return null;
+        return {
+            x: this.xExtent.extent,
+            y: this.yExtent.extent
+        };
+    }
+    clear() {
+        this.buffer.clear();
+        this.xExtent.clear();
+        this.yExtent.clear();
+        if (this.timestampBuffer)
+            this.timestampBuffer.clear();
+        this.prevPositionMap.clear();
+        this.activeTransition = null;
+        this.lastIngestTime = 0;
+        this.scales = null;
+        this.scene = [];
+        this.version++;
+    }
+    get size() {
+        return this.buffer.size;
+    }
+    getBuffer() {
+        return this.buffer;
+    }
+    getXAccessor() {
+        return this.getX;
+    }
+    getYAccessor() {
+        return this.getY;
+    }
+    getCategoryAccessor() {
+        return this.getCategory;
+    }
+    updateConfig(config) {
+        Object.assign(this.config, config);
+    }
+}
+exports.PipelineStore = PipelineStore;