semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,492 @@
+"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 DataSourceAdapter_1 = require("./DataSourceAdapter");
+const OrdinalPipelineStore_1 = require("./OrdinalPipelineStore");
+const OrdinalCanvasHitTester_1 = require("./OrdinalCanvasHitTester");
+const OrdinalSVGOverlay_1 = require("./OrdinalSVGOverlay");
+// Canvas renderers
+const barCanvasRenderer_1 = require("./renderers/barCanvasRenderer");
+const pointCanvasRenderer_1 = require("./renderers/pointCanvasRenderer");
+const wedgeCanvasRenderer_1 = require("./renderers/wedgeCanvasRenderer");
+const boxplotCanvasRenderer_1 = require("./renderers/boxplotCanvasRenderer");
+const violinCanvasRenderer_1 = require("./renderers/violinCanvasRenderer");
+const connectorCanvasRenderer_1 = require("./renderers/connectorCanvasRenderer");
+// ── Renderer dispatch ──────────────────────────────────────────────────
+// Connectors are built into the scene graph by the store, so every
+// chart type includes the connector renderer to paint them.
+const withConnectors = (renderers) => [connectorCanvasRenderer_1.connectorCanvasRenderer, ...renderers];
+const RENDERERS = {
+    bar: withConnectors([barCanvasRenderer_1.barCanvasRenderer]),
+    clusterbar: withConnectors([barCanvasRenderer_1.barCanvasRenderer]),
+    point: withConnectors([pointCanvasRenderer_1.pointCanvasRenderer]),
+    swarm: withConnectors([pointCanvasRenderer_1.pointCanvasRenderer]),
+    pie: [wedgeCanvasRenderer_1.wedgeCanvasRenderer],
+    donut: [wedgeCanvasRenderer_1.wedgeCanvasRenderer],
+    boxplot: withConnectors([boxplotCanvasRenderer_1.boxplotCanvasRenderer, pointCanvasRenderer_1.pointCanvasRenderer]),
+    violin: withConnectors([violinCanvasRenderer_1.violinCanvasRenderer]),
+    histogram: withConnectors([barCanvasRenderer_1.barCanvasRenderer]),
+    ridgeline: withConnectors([violinCanvasRenderer_1.violinCanvasRenderer]),
+    timeline: withConnectors([barCanvasRenderer_1.barCanvasRenderer])
+};
+// ── Defaults ───────────────────────────────────────────────────────────
+const DEFAULT_MARGIN = { top: 50, right: 40, bottom: 60, left: 70 };
+// ── Tooltip ────────────────────────────────────────────────────────────
+const defaultTooltipStyle = {
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    padding: "6px 10px",
+    borderRadius: "4px",
+    fontSize: "13px",
+    lineHeight: "1.4",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    pointerEvents: "none",
+    whiteSpace: "nowrap"
+};
+function DefaultOrdinalTooltip({ hover }) {
+    const d = hover.data || {};
+    // For summary types (boxplot, violin), datum is an array of pieces
+    if (Array.isArray(d)) {
+        const category = d[0]?.category || "";
+        const n = d.length;
+        return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+            category && React.createElement("div", { style: { fontWeight: "bold" } }, String(category)),
+            React.createElement("div", null,
+                n,
+                " items")));
+    }
+    // For histogram bins
+    if (d.bin != null && d.count != null) {
+        const range = d.range || [];
+        return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+            d.category && React.createElement("div", { style: { fontWeight: "bold" } }, String(d.category)),
+            React.createElement("div", null,
+                "Count: ",
+                d.count),
+            range.length === 2 && (React.createElement("div", { style: { opacity: 0.8 } },
+                Number(range[0]).toFixed(1),
+                " \u2013 ",
+                Number(range[1]).toFixed(1)))));
+    }
+    // For regular pieces — extract category and value from common field names
+    const category = d.category || d.name || d.group || d.__rName || "";
+    const value = d.value ?? d.__rValue ?? d.pct ?? "";
+    // If standard fields didn't match, show all non-internal fields from the datum
+    if (!category && value === "") {
+        const entries = Object.entries(d).filter(([k]) => !k.startsWith("_") && k !== "data");
+        return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle }, entries.map(([k, v]) => (React.createElement("div", { key: k },
+            React.createElement("span", { style: { opacity: 0.7 } },
+                k,
+                ":"),
+            " ",
+            typeof v === "number" ? v.toLocaleString() : String(v))))));
+    }
+    return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+        category && React.createElement("div", { style: { fontWeight: "bold" } }, String(category)),
+        value !== "" && React.createElement("div", null, typeof value === "number" ? value.toLocaleString() : String(value))));
+}
+// ── Component ──────────────────────────────────────────────────────────
+const StreamOrdinalFrame = (0, react_1.forwardRef)(function StreamOrdinalFrame(props, ref) {
+    const { chartType, runtimeMode, data, oAccessor = "category", rAccessor = "value", colorAccessor, stackBy, groupBy, multiAxis, timeAccessor, valueAccessor, categoryAccessor, projection = "vertical", size = [600, 400], margin: userMargin, barPadding, innerRadius, normalize, startAngle, dynamicColumnWidth, bins, showOutliers, showIQR, amplitude, connectorAccessor, connectorStyle, rExtent, oExtent, extentPadding = 0.05, oSort, arrowOfTime, windowMode = "sliding", windowSize = 200, pieceStyle, summaryStyle, colorScheme, barColors, showAxes = true, oLabel, rLabel, oFormat, rFormat, enableHover = true, hoverAnnotation, tooltipContent, customHoverBehavior, annotations, svgAnnotationRules, showGrid = false, legend, backgroundGraphics, foregroundGraphics, title, className, background, centerContent, decay, pulse, transition, staleness } = props;
+    // ── Layout ───────────────────────────────────────────────────────────
+    const margin = (0, react_1.useMemo)(() => ({ ...DEFAULT_MARGIN, ...userMargin }), [userMargin]);
+    const adjustedWidth = size[0] - margin.left - margin.right;
+    const adjustedHeight = size[1] - margin.top - margin.bottom;
+    // ── Refs ─────────────────────────────────────────────────────────────
+    const canvasRef = (0, react_1.useRef)(null);
+    const dirtyRef = (0, react_1.useRef)(true);
+    const rafRef = (0, react_1.useRef)(0);
+    const hoverRef = (0, react_1.useRef)(null);
+    const renderFnRef = (0, react_1.useRef)(() => { });
+    // ── State ────────────────────────────────────────────────────────────
+    const [hoverPoint, setHoverPoint] = (0, react_1.useState)(null);
+    const [currentScales, setCurrentScales] = (0, react_1.useState)(null);
+    const [annotationFrame, setAnnotationFrame] = (0, react_1.useState)(0);
+    const [isStale, setIsStale] = (0, react_1.useState)(false);
+    // ── Hover config ─────────────────────────────────────────────────────
+    const effectiveHoverAnnotation = enableHover || hoverAnnotation;
+    // ── Pipeline ─────────────────────────────────────────────────────────
+    const isStreaming = runtimeMode === "streaming";
+    const pipelineConfig = (0, react_1.useMemo)(() => ({
+        chartType,
+        runtimeMode: isStreaming ? "streaming" : "bounded",
+        windowSize,
+        windowMode,
+        extentPadding,
+        projection,
+        oAccessor: isStreaming ? undefined : oAccessor,
+        rAccessor: isStreaming ? undefined : rAccessor,
+        colorAccessor,
+        stackBy,
+        groupBy,
+        multiAxis,
+        timeAccessor: isStreaming ? timeAccessor : undefined,
+        valueAccessor: isStreaming ? (valueAccessor || (typeof rAccessor === "string" || typeof rAccessor === "function" ? rAccessor : undefined)) : undefined,
+        categoryAccessor: isStreaming ? (categoryAccessor || oAccessor) : undefined,
+        rExtent,
+        oExtent,
+        barPadding,
+        innerRadius,
+        normalize,
+        startAngle,
+        dynamicColumnWidth,
+        bins,
+        showOutliers,
+        showIQR,
+        amplitude,
+        connectorAccessor,
+        connectorStyle,
+        oSort,
+        pieceStyle,
+        summaryStyle,
+        colorScheme,
+        barColors,
+        decay,
+        pulse,
+        transition,
+        staleness
+    }), [
+        chartType, windowSize, windowMode, extentPadding, projection,
+        oAccessor, rAccessor, colorAccessor, stackBy, groupBy, multiAxis,
+        timeAccessor, valueAccessor, categoryAccessor,
+        rExtent, oExtent, barPadding, innerRadius, normalize, startAngle,
+        dynamicColumnWidth,
+        bins, showOutliers, showIQR, amplitude, connectorAccessor, connectorStyle, oSort,
+        pieceStyle, summaryStyle, colorScheme, barColors,
+        decay, pulse, transition, staleness,
+        isStreaming
+    ]);
+    const storeRef = (0, react_1.useRef)(null);
+    if (!storeRef.current) {
+        storeRef.current = new OrdinalPipelineStore_1.OrdinalPipelineStore(pipelineConfig);
+    }
+    // ── Stable scheduleRender ────────────────────────────────────────────
+    const scheduleRender = (0, react_1.useCallback)(() => {
+        if (rafRef.current)
+            return;
+        rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+    }, []);
+    // Update config when it changes
+    (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 ─────────────────────────────────────────────────────────
+    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
+    }), [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;
+        // For radial projection, convert to center-relative coordinates
+        // since scene nodes use (0,0) as center
+        const isRadialMode = projection === "radial";
+        const hitX = isRadialMode ? chartX - adjustedWidth / 2 : chartX;
+        const hitY = isRadialMode ? chartY - adjustedHeight / 2 : chartY;
+        const hit = (0, OrdinalCanvasHitTester_1.findNearestOrdinalNode)(store.scene, hitX, hitY);
+        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
+        const isTransitioning = store.advanceTransition(now);
+        const wasDirty = dirtyRef.current;
+        if (wasDirty && !isTransitioning) {
+            store.computeScene({ width: adjustedWidth, height: adjustedHeight });
+            dirtyRef.current = false;
+        }
+        // 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);
+        // Clear
+        ctx.clearRect(0, 0, size[0], size[1]);
+        // 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, size[0], size[1]);
+        }
+        const isRadial = projection === "radial";
+        if (isRadial) {
+            // Radial: translate to center of chart area
+            ctx.save();
+            ctx.translate(margin.left + adjustedWidth / 2, margin.top + adjustedHeight / 2);
+        }
+        else {
+            ctx.translate(margin.left, margin.top);
+        }
+        // Dispatch to renderers
+        const renderers = RENDERERS[chartType] || [];
+        const layout = { width: adjustedWidth, height: adjustedHeight };
+        for (const renderer of renderers) {
+            renderer(ctx, store.scene, store.scales, layout);
+        }
+        if (isRadial) {
+            ctx.restore();
+        }
+        // Reset alpha after staleness dimming
+        if (currentlyStale) {
+            ctx.globalAlpha = 1;
+        }
+        // Push scales to React state for SVG overlay
+        if (wasDirty && store.scales) {
+            setCurrentScales(store.scales);
+            setAnnotationFrame(f => f + 1);
+        }
+        // Update staleness badge state
+        if (staleness?.showBadge) {
+            setIsStale(!!currentlyStale);
+        }
+        // Schedule next frame for pulse/transition continuous rendering
+        if (isTransitioning || store.hasActivePulses) {
+            rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+        }
+    };
+    // ── Lifecycle ────────────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        scheduleRender();
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleRender]);
+    (0, react_1.useEffect)(() => {
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [chartType, adjustedWidth, adjustedHeight, showAxes, background, 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(DefaultOrdinalTooltip, { hover: hoverPoint }))
+        : null;
+    // For radial projection, hit coords are center-relative — convert back
+    // to margin-relative for tooltip positioning
+    const isRadialMode = projection === "radial";
+    const tooltipX = hoverPoint
+        ? (isRadialMode ? hoverPoint.x + adjustedWidth / 2 : hoverPoint.x)
+        : 0;
+    const tooltipY = hoverPoint
+        ? (isRadialMode ? hoverPoint.y + adjustedHeight / 2 : hoverPoint.y)
+        : 0;
+    const tooltipElement = tooltipRendered ? (React.createElement("div", { className: "stream-ordinal-tooltip", style: {
+            position: "absolute",
+            left: margin.left + tooltipX,
+            top: margin.top + tooltipY,
+            transform: `translate(${tooltipX > adjustedWidth * 0.7 ? "calc(-100% - 12px)" : "12px"}, ${tooltipY < adjustedHeight * 0.3 ? "4px" : "calc(-100% - 4px)"})`,
+            pointerEvents: "none",
+            zIndex: 1
+        } }, tooltipRendered)) : null;
+    // ── Render ───────────────────────────────────────────────────────────
+    return (React.createElement("div", { className: `stream-ordinal-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",
+                top: 0,
+                left: 0,
+                width: size[0],
+                height: size[1],
+                pointerEvents: "none"
+            } },
+            React.createElement("g", { transform: `translate(${margin.left},${margin.top})` }, backgroundGraphics))),
+        React.createElement("canvas", { ref: canvasRef, style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: size[0],
+                height: size[1]
+            } }),
+        React.createElement(OrdinalSVGOverlay_1.OrdinalSVGOverlay, { width: adjustedWidth, height: adjustedHeight, totalWidth: size[0], totalHeight: size[1], margin: margin, scales: currentScales, showAxes: showAxes, oLabel: oLabel, rLabel: rLabel, oFormat: oFormat, rFormat: rFormat, showGrid: showGrid, title: title, legend: legend, foregroundGraphics: foregroundGraphics, annotations: annotations, svgAnnotationRules: svgAnnotationRules, annotationFrame: annotationFrame }),
+        centerContent && projection === "radial" && (React.createElement("div", { style: {
+                position: "absolute",
+                left: margin.left + adjustedWidth / 2,
+                top: margin.top + adjustedHeight / 2,
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none",
+                textAlign: "center"
+            } }, centerContent)),
+        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));
+});
+StreamOrdinalFrame.displayName = "StreamOrdinalFrame";
+exports.default = StreamOrdinalFrame;