semiotic 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,492 +0,0 @@
-"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;