semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/store/SelectionStore.js

@@ -0,0 +1,91 @@
+"use client";
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectionSelector = exports.SelectionProvider = void 0;
+exports.buildPredicate = buildPredicate;
+const createStore_1 = require("./createStore");
+// ── Predicate builders ─────────────────────────────────────────────────────
+function buildClausePredicate(clause) {
+    const fieldTests = [];
+    for (const [field, constraint] of Object.entries(clause.fields)) {
+        if (constraint.type === "point") {
+            fieldTests.push((d) => constraint.values.has(d[field]));
+        }
+        else {
+            const [lo, hi] = constraint.range;
+            fieldTests.push((d) => {
+                const v = d[field];
+                return v >= lo && v <= hi;
+            });
+        }
+    }
+    // All fields in a clause must match (AND within clause)
+    return (d) => fieldTests.every((fn) => fn(d));
+}
+function buildPredicate(selection, requestingClientId) {
+    const clausePredicates = [];
+    for (const [clientId, clause] of selection.clauses) {
+        // In crossfilter mode, exclude the requesting client's own clause
+        if (selection.resolution === "crossfilter" && clientId === requestingClientId)
+            continue;
+        clausePredicates.push(buildClausePredicate(clause));
+    }
+    if (clausePredicates.length === 0)
+        return () => true;
+    return selection.resolution === "intersect"
+        ? (d) => clausePredicates.every((fn) => fn(d))
+        : (d) => clausePredicates.some((fn) => fn(d));
+}
+// ── Store factory ──────────────────────────────────────────────────────────
+function ensureSelection(selections, name) {
+    let sel = selections.get(name);
+    if (!sel) {
+        sel = { name, resolution: "union", clauses: new Map() };
+        selections.set(name, sel);
+    }
+    return sel;
+}
+_a = (0, createStore_1.createStore)((set) => ({
+    selections: new Map(),
+    setClause(selectionName, clause) {
+        set((current) => {
+            const selections = new Map(current.selections);
+            const sel = ensureSelection(selections, selectionName);
+            const clauses = new Map(sel.clauses);
+            clauses.set(clause.clientId, clause);
+            selections.set(selectionName, { ...sel, clauses });
+            return { selections };
+        });
+    },
+    clearClause(selectionName, clientId) {
+        set((current) => {
+            const existing = current.selections.get(selectionName);
+            if (!existing)
+                return {};
+            const selections = new Map(current.selections);
+            const clauses = new Map(existing.clauses);
+            clauses.delete(clientId);
+            selections.set(selectionName, { ...existing, clauses });
+            return { selections };
+        });
+    },
+    setResolution(selectionName, mode) {
+        set((current) => {
+            const selections = new Map(current.selections);
+            const sel = ensureSelection(selections, selectionName);
+            selections.set(selectionName, { ...sel, resolution: mode });
+            return { selections };
+        });
+    },
+    clearSelection(selectionName) {
+        set((current) => {
+            const selections = new Map(current.selections);
+            const sel = selections.get(selectionName);
+            if (sel) {
+                selections.set(selectionName, { ...sel, clauses: new Map() });
+            }
+            return { selections };
+        });
+    }
+})), exports.SelectionProvider = _a[0], exports.useSelectionSelector = _a[1];

package/ai/dist/src/components/store/ThemeStore.js

@@ -0,0 +1,78 @@
+"use client";
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeSelector = exports.ThemeProvider = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
+const createStore_1 = require("./createStore");
+// ── Presets ─────────────────────────────────────────────────────────────────
+exports.LIGHT_THEME = {
+    mode: "light",
+    colors: {
+        primary: "#00a2ce",
+        categorical: [
+            "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd",
+            "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
+        ],
+        sequential: "blues",
+        background: "transparent",
+        text: "#333",
+        textSecondary: "#666",
+        grid: "#e0e0e0",
+        border: "#ccc"
+    },
+    typography: {
+        fontFamily: "sans-serif",
+        titleSize: 16,
+        labelSize: 12,
+        tickSize: 10
+    }
+};
+exports.DARK_THEME = {
+    mode: "dark",
+    colors: {
+        primary: "#4fc3f7",
+        categorical: [
+            "#4fc3f7", "#ffb74d", "#81c784", "#ef5350", "#ba68c8",
+            "#a1887f", "#f06292", "#90a4ae", "#dce775", "#4dd0e1"
+        ],
+        sequential: "blues",
+        background: "#1a1a2e",
+        text: "#e0e0e0",
+        textSecondary: "#aaa",
+        grid: "#333",
+        border: "#555"
+    },
+    typography: {
+        fontFamily: "sans-serif",
+        titleSize: 16,
+        labelSize: 12,
+        tickSize: 10
+    }
+};
+_a = (0, createStore_1.createStore)((set) => ({
+    theme: exports.LIGHT_THEME,
+    setTheme(theme) {
+        set((current) => {
+            if (theme === "light") {
+                return { theme: exports.LIGHT_THEME };
+            }
+            if (theme === "dark") {
+                return { theme: exports.DARK_THEME };
+            }
+            return {
+                theme: {
+                    ...current.theme,
+                    ...theme,
+                    colors: {
+                        ...current.theme.colors,
+                        ...(theme.colors || {})
+                    },
+                    typography: {
+                        ...current.theme.typography,
+                        ...(theme.typography || {})
+                    }
+                }
+            };
+        });
+    }
+})), exports.ThemeProvider = _a[0], exports.useThemeSelector = _a[1];

package/ai/dist/src/components/store/TooltipStore.js

@@ -0,0 +1,13 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTooltip = exports.TooltipProvider = void 0;
+const createStore_1 = require("./createStore");
+let [TooltipProvider, useTooltip] = (0, createStore_1.createStore)((set) => ({
+    tooltip: null,
+    changeTooltip(tooltip) {
+        set(() => ({ tooltip }));
+    }
+}));
+exports.TooltipProvider = TooltipProvider;
+exports.useTooltip = useTooltip;

package/ai/dist/src/components/store/createStore.js

@@ -0,0 +1,81 @@
+"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 });
+exports.createStore = createStore;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+    const [value, setValue] = (0, react_1.useState)(getSnapshot);
+    (0, react_1.useLayoutEffect)(() => {
+        return subscribe(() => setValue(getSnapshot));
+    }, [subscribe]);
+    return value;
+}
+function createStore(fn) {
+    let Ctx = (0, react_1.createContext)(null);
+    // Shared fallback source for when there's no provider in the tree.
+    // This allows hooks to be called unconditionally (rules of hooks)
+    // without crashing. The fallback state is inert (empty selections, etc.).
+    let fallbackSource = createSource(fn);
+    function Provider({ children }) {
+        let source = (0, react_1.useMemo)(() => createSource(fn), []);
+        return React.createElement(Ctx.Provider, { value: source, children: children });
+    }
+    let useSelector = (selector) => {
+        let source = (0, react_1.useContext)(Ctx) ?? fallbackSource;
+        let getSnapshot = () => selector(source.getState());
+        return useSyncExternalStoreShim(source.subscribe, getSnapshot);
+    };
+    return [Provider, useSelector];
+}
+function createSource(fn) {
+    let events = new EventTarget();
+    let state = fn(set);
+    function set(fn) {
+        state = Object.assign(state, fn(state));
+        events.dispatchEvent(new CustomEvent("update"));
+    }
+    function subscribe(cb) {
+        events.addEventListener("update", cb);
+        return () => events.removeEventListener("update", cb);
+    }
+    return {
+        getState() {
+            return state;
+        },
+        subscribe
+    };
+}

package/ai/dist/src/components/store/useSelection.js

@@ -0,0 +1,133 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelection = useSelection;
+exports.useLinkedHover = useLinkedHover;
+exports.useBrushSelection = useBrushSelection;
+exports.useFilteredData = useFilteredData;
+const react_1 = require("react");
+const SelectionStore_1 = require("./SelectionStore");
+function useSelection(options) {
+    const autoId = (0, react_1.useId)();
+    const clientId = options.clientId || autoId;
+    const { name } = options;
+    const selection = (0, SelectionStore_1.useSelectionSelector)((state) => state.selections.get(name));
+    const setClause = (0, SelectionStore_1.useSelectionSelector)((state) => state.setClause);
+    const clearClauseFn = (0, SelectionStore_1.useSelectionSelector)((state) => state.clearClause);
+    const isActive = (0, react_1.useMemo)(() => {
+        if (!selection)
+            return false;
+        return selection.clauses.size > 0;
+    }, [selection]);
+    const predicate = (0, react_1.useMemo)(() => {
+        if (!selection || selection.clauses.size === 0)
+            return () => true;
+        return (0, SelectionStore_1.buildPredicate)(selection, clientId);
+    }, [selection, clientId]);
+    const selectPoints = (0, react_1.useCallback)((fieldValues) => {
+        const fields = {};
+        for (const [field, values] of Object.entries(fieldValues)) {
+            fields[field] = { type: "point", values: new Set(values) };
+        }
+        const clause = {
+            clientId,
+            type: "point",
+            fields
+        };
+        setClause(name, clause);
+    }, [clientId, name, setClause]);
+    const selectInterval = (0, react_1.useCallback)((fieldRanges) => {
+        const fields = {};
+        for (const [field, range] of Object.entries(fieldRanges)) {
+            fields[field] = { type: "interval", range };
+        }
+        const clause = {
+            clientId,
+            type: "interval",
+            fields
+        };
+        setClause(name, clause);
+    }, [clientId, name, setClause]);
+    const clear = (0, react_1.useCallback)(() => {
+        clearClauseFn(name, clientId);
+    }, [clearClauseFn, name, clientId]);
+    return { predicate, isActive, selectPoints, selectInterval, clear, clientId };
+}
+function useLinkedHover(options) {
+    const selName = options.name || "hover";
+    const { fields } = options;
+    const { predicate, isActive, selectPoints, clear, clientId } = useSelection({
+        name: selName,
+        fields
+    });
+    const onHover = (0, react_1.useCallback)((datum) => {
+        if (!datum) {
+            clear();
+            return;
+        }
+        const fieldValues = {};
+        for (const field of fields) {
+            const val = datum[field];
+            if (val !== undefined) {
+                fieldValues[field] = [val];
+            }
+        }
+        if (Object.keys(fieldValues).length > 0) {
+            selectPoints(fieldValues);
+        }
+    }, [fields, selectPoints, clear]);
+    return { onHover, predicate, isActive };
+}
+function useBrushSelection(options) {
+    const { name, xField, yField } = options;
+    const { predicate, isActive, selectInterval, clear, clientId } = useSelection({
+        name,
+        fields: [xField, yField].filter(Boolean)
+    });
+    const brushType = xField && yField ? "xyBrush" : xField ? "xBrush" : "yBrush";
+    const handleBrush = (0, react_1.useCallback)((extent) => {
+        if (!extent) {
+            clear();
+            return;
+        }
+        const fieldRanges = {};
+        if (brushType === "xyBrush" && Array.isArray(extent) && extent.length === 2) {
+            // extent = [[x0, y0], [x1, y1]]
+            if (xField)
+                fieldRanges[xField] = [Math.min(extent[0][0], extent[1][0]), Math.max(extent[0][0], extent[1][0])];
+            if (yField)
+                fieldRanges[yField] = [Math.min(extent[0][1], extent[1][1]), Math.max(extent[0][1], extent[1][1])];
+        }
+        else if (brushType === "xBrush" && Array.isArray(extent)) {
+            if (xField)
+                fieldRanges[xField] = [Math.min(...extent), Math.max(...extent)];
+        }
+        else if (brushType === "yBrush" && Array.isArray(extent)) {
+            if (yField)
+                fieldRanges[yField] = [Math.min(...extent), Math.max(...extent)];
+        }
+        if (Object.keys(fieldRanges).length > 0) {
+            selectInterval(fieldRanges);
+        }
+    }, [brushType, xField, yField, selectInterval, clear]);
+    const brushInteraction = (0, react_1.useMemo)(() => ({
+        brush: brushType,
+        during: handleBrush,
+        end: handleBrush
+    }), [brushType, handleBrush]);
+    return { brushInteraction, predicate, isActive, clear };
+}
+// ── useFilteredData ────────────────────────────────────────────────────────
+/**
+ * Returns the subset of `data` that matches the given selection.
+ * In crossfilter mode, pass the consumer's clientId so its own clause is excluded.
+ */
+function useFilteredData(data, selectionName, clientId) {
+    const selection = (0, SelectionStore_1.useSelectionSelector)((state) => state.selections.get(selectionName));
+    return (0, react_1.useMemo)(() => {
+        if (!selection || selection.clauses.size === 0)
+            return data;
+        const pred = (0, SelectionStore_1.buildPredicate)(selection, clientId);
+        return data.filter(pred);
+    }, [data, selection, clientId]);
+}

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

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findNearestNode = findNearestNode;
+exports.findNearestIndex = findNearestIndex;
+/**
+ * Find the nearest scene node to the given pixel coordinates.
+ * Dispatches to type-specific hit testers for optimal performance.
+ */
+function findNearestNode(scene, px, py, maxDistance = 30) {
+    let best = null;
+    for (const node of scene) {
+        let result = null;
+        switch (node.type) {
+            case "point":
+                result = hitTestPoint(node, px, py);
+                break;
+            case "line":
+                result = hitTestLine(node, px, py);
+                break;
+            case "rect":
+                result = hitTestRect(node, px, py);
+                break;
+            case "heatcell":
+                result = hitTestHeatcell(node, px, py);
+                break;
+            case "area":
+                // Skip non-interactive areas (e.g. decorative bounds bands)
+                if (node.interactive === false)
+                    break;
+                // Areas are hit-tested by finding nearest x on the top path
+                result = hitTestAreaPath(node, px, py);
+                break;
+            case "candlestick":
+                result = hitTestCandlestick(node, px, py);
+                break;
+        }
+        if (result && result.distance < maxDistance) {
+            if (!best || result.distance < best.distance) {
+                best = result;
+            }
+        }
+    }
+    return best;
+}
+function hitTestPoint(node, px, py) {
+    const dx = px - node.x;
+    const dy = py - node.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    // Hit radius includes the point's visual radius plus a tolerance
+    if (dist > node.r + 5)
+        return null;
+    return { node, datum: node.datum, x: node.x, y: node.y, distance: dist };
+}
+function hitTestLine(node, px, py) {
+    if (node.path.length === 0)
+        return null;
+    // Binary search for nearest x in the path
+    const idx = binarySearchPath(node.path, px);
+    if (idx < 0)
+        return null;
+    const [nx, ny] = node.path[idx];
+    const dx = px - nx;
+    const dy = py - ny;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    // For line data, the datum is the array; return the index as well
+    const datum = Array.isArray(node.datum) && node.datum[idx]
+        ? node.datum[idx]
+        : node.datum;
+    return { node, datum, x: nx, y: ny, distance: dist };
+}
+function hitTestRect(node, px, py) {
+    if (px >= node.x && px <= node.x + node.w && py >= node.y && py <= node.y + node.h) {
+        // Center of rect
+        const cx = node.x + node.w / 2;
+        const cy = node.y + node.h / 2;
+        return { node, datum: node.datum, x: cx, y: cy, distance: 0 };
+    }
+    return null;
+}
+function hitTestHeatcell(node, px, py) {
+    if (px >= node.x && px <= node.x + node.w && py >= node.y && py <= node.y + node.h) {
+        const cx = node.x + node.w / 2;
+        const cy = node.y + node.h / 2;
+        return { node, datum: node.datum, x: cx, y: cy, distance: 0 };
+    }
+    return null;
+}
+function hitTestCandlestick(node, px, py) {
+    const halfBody = node.bodyWidth / 2;
+    // Hit the body area (wider target)
+    const bodyTop = Math.min(node.openY, node.closeY);
+    const bodyBottom = Math.max(node.openY, node.closeY);
+    const bodyHeight = Math.max(bodyBottom - bodyTop, 1);
+    if (px >= node.x - halfBody - 3 && px <= node.x + halfBody + 3 &&
+        py >= node.highY - 3 && py <= node.lowY + 3) {
+        // Hover target: center of the body
+        const cy = bodyTop + bodyHeight / 2;
+        const dx = px - node.x;
+        const dy = py - cy;
+        return { node, datum: node.datum, x: node.x, y: cy, distance: Math.sqrt(dx * dx + dy * dy) };
+    }
+    return null;
+}
+function hitTestAreaPath(node, px, py) {
+    if (node.topPath.length === 0)
+        return null;
+    const idx = binarySearchPath(node.topPath, px);
+    if (idx < 0)
+        return null;
+    const [nx, ny] = node.topPath[idx];
+    const dx = px - nx;
+    const dy = py - ny;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    return { node: node, datum: node.datum, x: nx, y: ny, distance: dist };
+}
+/**
+ * Binary search for the nearest point by x-coordinate in a sorted path.
+ */
+function binarySearchPath(path, targetX) {
+    if (path.length === 0)
+        return -1;
+    let lo = 0;
+    let hi = path.length - 1;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (path[mid][0] < targetX)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    // Check if lo-1 is closer
+    if (lo > 0) {
+        const dLo = Math.abs(path[lo][0] - targetX);
+        const dPrev = Math.abs(path[lo - 1][0] - targetX);
+        if (dPrev <= dLo)
+            return lo - 1;
+    }
+    return lo;
+}
+/**
+ * Binary search for nearest point by time value in a RingBuffer.
+ */
+function findNearestIndex(buf, targetTime, getTime) {
+    if (buf.size === 0)
+        return -1;
+    let lo = 0;
+    let hi = buf.size - 1;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        const t = getTime(buf.get(mid));
+        if (t < targetTime)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    if (lo > 0) {
+        const tLo = getTime(buf.get(lo));
+        const tPrev = getTime(buf.get(lo - 1));
+        if (Math.abs(tPrev - targetTime) <= Math.abs(tLo - targetTime)) {
+            return lo - 1;
+        }
+    }
+    return lo;
+}

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

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceAdapter = void 0;
+/**
+ * DataSourceAdapter normalizes all data ingestion paths into uniform changesets:
+ *
+ * 1. Bounded (props): `data` array → changeset(s) with `bounded: true`
+ * 2. Streaming (push): `ref.push()` → micro-changeset with `bounded: false`
+ * 3. Hybrid: `data` prop first, then `push()` — seamless transition
+ *
+ * For large bounded datasets (above CHUNK_THRESHOLD), data is automatically
+ * chunked and ingested progressively across multiple animation frames. This
+ * keeps the UI responsive while the chart draws incrementally. The first chunk
+ * renders immediately so the user sees data right away.
+ */
+/** Datasets larger than this are chunked for progressive rendering */
+const CHUNK_THRESHOLD = 5000;
+/** Number of items per progressive chunk */
+const CHUNK_SIZE = 5000;
+class DataSourceAdapter {
+    constructor(callback) {
+        this.lastBoundedData = null;
+        this.chunkTimer = 0;
+        this.callback = callback;
+    }
+    /**
+     * Ingest a bounded data array (from props).
+     *
+     * Small datasets emit a single changeset synchronously.
+     * Large datasets (> CHUNK_THRESHOLD) are split into chunks that render
+     * progressively: the first chunk fires immediately (bounded: true to
+     * reset + seed the buffer), subsequent chunks arrive on successive
+     * animation frames (bounded: false so they append without clearing).
+     */
+    setBoundedData(data) {
+        if (data === this.lastBoundedData)
+            return;
+        this.lastBoundedData = data;
+        // Cancel any in-flight progressive ingestion
+        if (this.chunkTimer) {
+            cancelAnimationFrame(this.chunkTimer);
+            this.chunkTimer = 0;
+        }
+        if (data.length <= CHUNK_THRESHOLD) {
+            // Small dataset — ingest all at once
+            this.callback({ inserts: data, bounded: true });
+            return;
+        }
+        // Large dataset — progressive chunked ingestion.
+        // First chunk is bounded: true (resets buffer and sizes it to full length).
+        // Subsequent chunks are bounded: false (appends without clearing).
+        this.callback({ inserts: data.slice(0, CHUNK_SIZE), bounded: true, totalSize: data.length });
+        let offset = CHUNK_SIZE;
+        const scheduleNext = () => {
+            if (offset >= data.length)
+                return;
+            // Check that this is still the active dataset
+            if (data !== this.lastBoundedData)
+                return;
+            const end = Math.min(offset + CHUNK_SIZE, data.length);
+            this.callback({ inserts: data.slice(offset, end), bounded: false });
+            offset = end;
+            if (offset < data.length) {
+                this.chunkTimer = requestAnimationFrame(scheduleNext);
+            }
+            else {
+                this.chunkTimer = 0;
+            }
+        };
+        this.chunkTimer = requestAnimationFrame(scheduleNext);
+    }
+    /**
+     * Push a single datum (streaming mode).
+     * Emits a micro-changeset with `bounded: false`.
+     */
+    push(datum) {
+        this.callback({ inserts: [datum], bounded: false });
+    }
+    /**
+     * Push multiple data (streaming batch).
+     * Emits a single changeset with `bounded: false`.
+     */
+    pushMany(data) {
+        if (data.length === 0)
+            return;
+        this.callback({ inserts: data, bounded: false });
+    }
+    /**
+     * Reset the adapter state.
+     */
+    clear() {
+        if (this.chunkTimer) {
+            cancelAnimationFrame(this.chunkTimer);
+            this.chunkTimer = 0;
+        }
+        this.lastBoundedData = null;
+    }
+}
+exports.DataSourceAdapter = DataSourceAdapter;