semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,129 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGOverlay = SVGOverlay;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const Legend_1 = __importDefault(require("../Legend"));
+const MarginalGraphics_1 = require("./MarginalGraphics");
+function isLegendConfig(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        "legendGroups" in value);
+}
+function defaultTickFormat(v) {
+    return String(Math.round(v * 100) / 100);
+}
+function SVGOverlay(props) {
+    const { width, height, totalWidth, totalHeight, margin, scales, showAxes, xLabel, yLabel, xFormat, yFormat, showGrid, title, legend, foregroundGraphics, marginalGraphics, xValues, yValues, annotations, svgAnnotationRules, annotationFrame, children } = props;
+    // Generate axis ticks
+    const xTicks = (0, react_1.useMemo)(() => {
+        if (!showAxes || !scales)
+            return [];
+        return scales.x.ticks(5).map(v => ({
+            value: v,
+            pixel: scales.x(v),
+            label: (xFormat || defaultTickFormat)(v)
+        }));
+    }, [showAxes, scales, xFormat]);
+    const yTicks = (0, react_1.useMemo)(() => {
+        if (!showAxes || !scales)
+            return [];
+        return scales.y.ticks(5).map(v => ({
+            value: v,
+            pixel: scales.y(v),
+            label: (yFormat || defaultTickFormat)(v)
+        }));
+    }, [showAxes, scales, yFormat]);
+    // Render annotations
+    const renderedAnnotations = (0, react_1.useMemo)(() => {
+        if (!annotations || annotations.length === 0 || !svgAnnotationRules)
+            return null;
+        return annotations
+            .map((annotation, i) => svgAnnotationRules(annotation, i, {
+            scales: scales ? { time: scales.x, value: scales.y } : null,
+            timeAxis: "x",
+            width,
+            height
+        }))
+            .filter(Boolean);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [annotations, svgAnnotationRules, width, height, annotationFrame]);
+    const hasContent = showAxes || title || legend || foregroundGraphics || marginalGraphics || (renderedAnnotations && renderedAnnotations.length > 0) || showGrid || children;
+    if (!hasContent)
+        return null;
+    return (React.createElement("svg", { width: totalWidth, height: totalHeight, style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            pointerEvents: "none"
+        } },
+        React.createElement("g", { transform: `translate(${margin.left},${margin.top})` },
+            showGrid && scales && (React.createElement("g", { className: "stream-grid" },
+                xTicks.map((tick, i) => (React.createElement("line", { key: `xgrid-${i}`, x1: tick.pixel, y1: 0, x2: tick.pixel, y2: height, stroke: "#e0e0e0", strokeWidth: 1 }))),
+                yTicks.map((tick, i) => (React.createElement("line", { key: `ygrid-${i}`, x1: 0, y1: tick.pixel, x2: width, y2: tick.pixel, stroke: "#e0e0e0", strokeWidth: 1 }))))),
+            showAxes && scales && (React.createElement("g", { className: "stream-axes" },
+                React.createElement("line", { x1: 0, y1: height, x2: width, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                xTicks.map((tick, i) => (React.createElement("g", { key: `xtick-${i}`, transform: `translate(${tick.pixel},${height})` },
+                    React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                xLabel && (React.createElement("text", { x: width / 2, y: height + 40, textAnchor: "middle", fontSize: 12, fill: "#333", style: { userSelect: "none" } }, xLabel)),
+                React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                yTicks.map((tick, i) => (React.createElement("g", { key: `ytick-${i}`, transform: `translate(0,${tick.pixel})` },
+                    React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                yLabel && (React.createElement("text", { x: -margin.left + 15, y: height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-margin.left + 15}, ${height / 2})`, style: { userSelect: "none" } }, yLabel)))),
+            renderedAnnotations,
+            marginalGraphics && scales && xValues && yValues && (React.createElement(React.Fragment, null,
+                marginalGraphics.top && (React.createElement("g", { transform: `translate(0, 0)` },
+                    React.createElement(MarginalGraphics_1.MarginalGraphics, { orient: "top", config: (0, MarginalGraphics_1.normalizeMarginalConfig)(marginalGraphics.top), values: xValues, scale: scales.x, size: margin.top, length: width }))),
+                marginalGraphics.bottom && (React.createElement("g", { transform: `translate(0, ${height})` },
+                    React.createElement(MarginalGraphics_1.MarginalGraphics, { orient: "bottom", config: (0, MarginalGraphics_1.normalizeMarginalConfig)(marginalGraphics.bottom), values: xValues, scale: scales.x, size: margin.bottom, length: width }))),
+                marginalGraphics.left && (React.createElement("g", { transform: `translate(0, 0)` },
+                    React.createElement(MarginalGraphics_1.MarginalGraphics, { orient: "left", config: (0, MarginalGraphics_1.normalizeMarginalConfig)(marginalGraphics.left), values: yValues, scale: scales.y, size: margin.left, length: height }))),
+                marginalGraphics.right && (React.createElement("g", { transform: `translate(${width}, 0)` },
+                    React.createElement(MarginalGraphics_1.MarginalGraphics, { orient: "right", config: (0, MarginalGraphics_1.normalizeMarginalConfig)(marginalGraphics.right), values: yValues, scale: scales.y, size: margin.right, length: height }))))),
+            foregroundGraphics,
+            children),
+        title && (React.createElement("text", { x: totalWidth / 2, y: 20, textAnchor: "middle", fontSize: 14, fontWeight: "bold", fill: "#333", style: { userSelect: "none" } }, typeof title === "string" ? title : null)),
+        legend && (React.createElement("g", { transform: `translate(${totalWidth - margin.right + 10}, ${margin.top})` }, isLegendConfig(legend)
+            ? React.createElement(Legend_1.default, { legendGroups: legend.legendGroups, title: "", width: 100 })
+            : legend))));
+}

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

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildLineNode = buildLineNode;
+exports.buildAreaNode = buildAreaNode;
+exports.buildStackedAreaNodes = buildStackedAreaNodes;
+exports.buildPointNode = buildPointNode;
+exports.buildRectNode = buildRectNode;
+exports.buildHeatcellNode = buildHeatcellNode;
+exports.createSceneGraph = createSceneGraph;
+exports.updateSceneGraph = updateSceneGraph;
+// ── Scene node builders ────────────────────────────────────────────────
+function buildLineNode(data, scales, xGet, yGet, style, group) {
+    const path = [];
+    const rawValues = [];
+    for (const d of data) {
+        const xVal = xGet(d);
+        const yVal = yGet(d);
+        if (xVal == null || yVal == null || Number.isNaN(xVal) || Number.isNaN(yVal))
+            continue;
+        path.push([scales.x(xVal), scales.y(yVal)]);
+        rawValues.push(yVal);
+    }
+    return { type: "line", path, rawValues, style, datum: data, group };
+}
+function buildAreaNode(data, scales, xGet, yGet, baselineY, style, group) {
+    const topPath = [];
+    const bottomPath = [];
+    for (const d of data) {
+        const xVal = xGet(d);
+        const yVal = yGet(d);
+        if (xVal == null || yVal == null || Number.isNaN(xVal) || Number.isNaN(yVal))
+            continue;
+        const px = scales.x(xVal);
+        topPath.push([px, scales.y(yVal)]);
+        bottomPath.push([px, scales.y(baselineY)]);
+    }
+    return { type: "area", topPath, bottomPath, style, datum: data, group };
+}
+function buildStackedAreaNodes(groups, scales, xGet, yGet, styleFn, normalize) {
+    // Collect all unique x values
+    const xSet = new Set();
+    for (const g of groups) {
+        for (const d of g.data) {
+            const x = xGet(d);
+            if (x != null && !Number.isNaN(x))
+                xSet.add(x);
+        }
+    }
+    const xValues = Array.from(xSet).sort((a, b) => a - b);
+    // Build value lookup per group per x
+    const valueMaps = new Map();
+    for (const g of groups) {
+        const m = new Map();
+        for (const d of g.data) {
+            const x = xGet(d);
+            const y = yGet(d);
+            if (x != null && y != null && !Number.isNaN(x) && !Number.isNaN(y)) {
+                m.set(x, (m.get(x) || 0) + y);
+            }
+        }
+        valueMaps.set(g.key, m);
+    }
+    // Compute totals per x for normalization
+    let totals;
+    if (normalize) {
+        totals = new Map();
+        for (const x of xValues) {
+            let sum = 0;
+            for (const g of groups) {
+                sum += valueMaps.get(g.key)?.get(x) || 0;
+            }
+            totals.set(x, sum || 1); // avoid div by 0
+        }
+    }
+    // Build stacked area nodes bottom-up
+    const nodes = [];
+    const baselines = new Map(); // x → cumulative y
+    for (const x of xValues)
+        baselines.set(x, 0);
+    for (const g of groups) {
+        const vMap = valueMaps.get(g.key);
+        const topPath = [];
+        const bottomPath = [];
+        for (const x of xValues) {
+            let rawY = vMap.get(x) || 0;
+            const base = baselines.get(x);
+            if (normalize) {
+                const total = totals.get(x);
+                rawY = rawY / total;
+            }
+            const px = scales.x(x);
+            bottomPath.push([px, scales.y(base)]);
+            topPath.push([px, scales.y(base + rawY)]);
+            baselines.set(x, base + rawY);
+        }
+        nodes.push({
+            type: "area",
+            topPath,
+            bottomPath,
+            style: styleFn(g.key, g.data[0]),
+            datum: g.data,
+            group: g.key
+        });
+    }
+    return nodes;
+}
+function buildPointNode(datum, scales, xGet, yGet, r, style) {
+    const xVal = xGet(datum);
+    const yVal = yGet(datum);
+    if (xVal == null || yVal == null || Number.isNaN(xVal) || Number.isNaN(yVal))
+        return null;
+    return {
+        type: "point",
+        x: scales.x(xVal),
+        y: scales.y(yVal),
+        r,
+        style,
+        datum
+    };
+}
+function buildRectNode(x, y, w, h, style, datum, group) {
+    return { type: "rect", x, y, w, h, style, datum, group };
+}
+function buildHeatcellNode(x, y, w, h, fill, datum) {
+    return { type: "heatcell", x, y, w, h, fill, datum };
+}
+function createSceneGraph() {
+    return { nodes: [], version: 0 };
+}
+function updateSceneGraph(scene, nodes) {
+    return { nodes, version: scene.version + 1 };
+}