semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/server/renderToStaticSVG.js

@@ -0,0 +1,392 @@
+"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.renderToStaticSVG = renderToStaticSVG;
+exports.renderXYToStaticSVG = renderXYToStaticSVG;
+exports.renderOrdinalToStaticSVG = renderOrdinalToStaticSVG;
+exports.renderNetworkToStaticSVG = renderNetworkToStaticSVG;
+const React = __importStar(require("react"));
+const ReactDOMServer = __importStar(require("react-dom/server"));
+const d3_scale_1 = require("d3-scale");
+const d3_scale_2 = require("d3-scale");
+const xyDrawing_1 = require("../processing/xyDrawing");
+const xyPipelineCache_1 = require("../data/xyPipelineCache");
+const ordinal_1 = require("../processing/ordinal");
+const ordinalPipelineCache_1 = require("../data/ordinalPipelineCache");
+const network_1 = require("../processing/network");
+const networkPipelineCache_1 = require("../data/networkPipelineCache");
+const jsx_1 = require("../constants/jsx");
+const frameFunctions_1 = require("../svg/frameFunctions");
+const dataFunctions_1 = require("../data/dataFunctions");
+const functions_1 = require("../generic_utilities/functions");
+const coordinateNames_1 = require("../constants/coordinateNames");
+const xyProjectedCoordinateNames = {
+    y: coordinateNames_1.projectedY,
+    x: coordinateNames_1.projectedX,
+    yMiddle: coordinateNames_1.projectedYMiddle,
+    yTop: coordinateNames_1.projectedYTop,
+    yBottom: coordinateNames_1.projectedYBottom,
+    xMiddle: coordinateNames_1.projectedXMiddle,
+    xTop: coordinateNames_1.projectedXTop,
+    xBottom: coordinateNames_1.projectedXBottom
+};
+const ordinalProjectedCoordinateNames = { y: "y", x: "x" };
+const networkProjectedCoordinateNames = { y: "y", x: "x" };
+const defaultFrameRenderOrder = [
+    "axes-tick-lines",
+    "viz-layer",
+    "matte",
+    "axes-labels",
+    "labels"
+];
+function runVisualizationPipeline(renderPipeline, renderOrder, xScale, yScale, projectedCoordinateNames) {
+    const renderedElements = [];
+    const renderVizKeys = Object.keys(renderPipeline);
+    const renderKeys = [
+        ...renderOrder,
+        ...renderVizKeys.filter((d) => renderOrder.indexOf(d) === -1)
+    ];
+    renderKeys.forEach((k) => {
+        const pipe = renderPipeline[k];
+        if (pipe &&
+            ((pipe.data &&
+                typeof pipe.data === "object" &&
+                !Array.isArray(pipe.data)) ||
+                (pipe.data && pipe.data.length > 0))) {
+            const renderedPipe = pipe.behavior({
+                xScale,
+                yScale,
+                canvasDrawing: [],
+                projectedCoordinateNames,
+                ...pipe
+            });
+            if (renderedPipe && renderedPipe.length > 0) {
+                renderedElements.push(React.createElement("g", { key: k, className: k, role: "group" }, renderedPipe));
+            }
+        }
+    });
+    return renderedElements;
+}
+function buildXYBaseState(props) {
+    return {
+        size: [500, 500],
+        dataVersion: undefined,
+        lineData: undefined,
+        pointData: undefined,
+        summaryData: undefined,
+        projectedLines: undefined,
+        projectedPoints: undefined,
+        projectedSummaries: undefined,
+        fullDataset: [],
+        adjustedPosition: [0, 0],
+        adjustedSize: [500, 500],
+        backgroundGraphics: null,
+        foregroundGraphics: null,
+        axesData: undefined,
+        axes: undefined,
+        axesTickLines: undefined,
+        renderNumber: 0,
+        margin: { top: 0, bottom: 0, left: 0, right: 0 },
+        calculatedXExtent: [0, 0],
+        calculatedYExtent: [0, 0],
+        xAccessor: [(d) => d.x],
+        yAccessor: [(d) => d.y],
+        xExtent: [0, 0],
+        yExtent: [0, 0],
+        areaAnnotations: [],
+        xScale: (0, d3_scale_1.scaleLinear)(),
+        yScale: (0, d3_scale_1.scaleLinear)(),
+        title: null,
+        legendSettings: undefined,
+        xyFrameRender: {},
+        canvasDrawing: [],
+        annotatedSettings: {
+            xAccessor: undefined,
+            yAccessor: undefined,
+            summaryDataAccessor: undefined,
+            lineDataAccessor: undefined,
+            renderKeyFn: undefined,
+            lineType: undefined,
+            summaryType: undefined,
+            lineIDAccessor: undefined,
+            summaries: undefined,
+            lines: undefined,
+            title: undefined,
+            xExtent: undefined,
+            yExtent: undefined
+        },
+        overlay: undefined,
+        props
+    };
+}
+function buildOrdinalBaseState(props) {
+    return {
+        adjustedPosition: [],
+        adjustedSize: [],
+        backgroundGraphics: undefined,
+        foregroundGraphics: undefined,
+        axisData: undefined,
+        renderNumber: 0,
+        oLabels: { labels: [] },
+        oAccessor: (0, dataFunctions_1.stringToArrayFn)("renderKey"),
+        rAccessor: (0, dataFunctions_1.stringToArrayFn)("value"),
+        oScale: (0, d3_scale_2.scaleBand)(),
+        rScale: (0, d3_scale_1.scaleLinear)(),
+        axes: undefined,
+        calculatedOExtent: [],
+        calculatedRExtent: [0, 1],
+        columnOverlays: [],
+        dataVersion: undefined,
+        legendSettings: undefined,
+        margin: { top: 0, bottom: 0, left: 0, right: 0 },
+        oExtent: [],
+        oScaleType: (0, d3_scale_2.scaleBand)(),
+        orFrameRender: {},
+        pieceDataXY: [],
+        pieceIDAccessor: (0, dataFunctions_1.stringToFn)("semioticPieceID"),
+        projectedColumns: {},
+        rExtent: [],
+        rScaleType: (0, d3_scale_1.scaleLinear)(),
+        summaryType: { type: "none" },
+        title: {},
+        type: { type: "none" },
+        props
+    };
+}
+function buildNetworkBaseState(props) {
+    return {
+        dataVersion: undefined,
+        nodeData: [],
+        edgeData: [],
+        adjustedPosition: [],
+        adjustedSize: [],
+        backgroundGraphics: null,
+        foregroundGraphics: null,
+        projectedNodes: [],
+        projectedEdges: [],
+        renderNumber: 0,
+        nodeLabelAnnotations: [],
+        graphSettings: {
+            type: "empty-start",
+            nodes: [],
+            edges: [],
+            nodeHash: new Map(),
+            edgeHash: new Map(),
+            hierarchicalNetwork: false
+        },
+        edgeWidthAccessor: (0, dataFunctions_1.stringToFn)("weight"),
+        legendSettings: undefined,
+        margin: { top: 0, left: 0, right: 0, bottom: 0 },
+        networkFrameRender: {},
+        nodeIDAccessor: (0, dataFunctions_1.stringToFn)("id"),
+        nodeSizeAccessor: (0, functions_1.genericFunction)(5),
+        overlay: [],
+        projectedXYPoints: [],
+        sourceAccessor: (0, dataFunctions_1.stringToFn)("source"),
+        targetAccessor: (0, dataFunctions_1.stringToFn)("target"),
+        title: { title: undefined },
+        props
+    };
+}
+function renderXYFrame(props) {
+    const xyDefaultProps = {
+        annotations: [],
+        foregroundGraphics: undefined,
+        size: [500, 500],
+        className: "",
+        lineType: "line",
+        name: "xyframe",
+        dataVersion: undefined
+    };
+    const mergedProps = { ...xyDefaultProps, ...props };
+    const cache = (0, xyPipelineCache_1.createXYPipelineCache)();
+    const baseState = buildXYBaseState(mergedProps);
+    const state = {
+        ...baseState,
+        ...(0, xyDrawing_1.calculateXYFrame)(mergedProps, baseState, true, cache)
+    };
+    const { margin, adjustedPosition, adjustedSize, xyFrameRender, xScale, yScale, axes, axesTickLines, annotatedSettings } = state;
+    const size = mergedProps.size || [500, 500];
+    const renderOrder = mergedProps.renderOrder || [];
+    const frameRenderOrder = mergedProps.frameRenderOrder || defaultFrameRenderOrder;
+    const renderedElements = runVisualizationPipeline(xyFrameRender, renderOrder, xScale, yScale, xyProjectedCoordinateNames);
+    return assembleAndRender({
+        size,
+        margin,
+        renderedElements,
+        axes,
+        axesTickLines,
+        title: annotatedSettings.title,
+        frameRenderOrder,
+        additionalDefs: mergedProps.additionalDefs,
+        name: "xyframe",
+        matte: mergedProps.matte,
+        frameKey: mergedProps.frameKey || "static"
+    });
+}
+function renderOrdinalFrame(props) {
+    const ordinalDefaultProps = {
+        annotations: [],
+        foregroundGraphics: [],
+        projection: "vertical",
+        size: [500, 500],
+        className: "",
+        data: [],
+        type: "none"
+    };
+    const mergedProps = { ...ordinalDefaultProps, ...props };
+    const cache = (0, ordinalPipelineCache_1.createOrdinalPipelineCache)();
+    const baseState = buildOrdinalBaseState(mergedProps);
+    const state = {
+        ...baseState,
+        ...(0, ordinal_1.calculateOrdinalFrame)(mergedProps, baseState, cache)
+    };
+    const { margin, adjustedSize, orFrameRender, axes, axesTickLines, title } = state;
+    const size = [
+        adjustedSize[0] + margin.left + margin.right,
+        adjustedSize[1] + margin.top + margin.bottom
+    ];
+    const oXScale = (0, d3_scale_1.scaleLinear)();
+    const oYScale = (0, d3_scale_1.scaleLinear)();
+    const renderOrder = mergedProps.renderOrder || [];
+    const frameRenderOrder = mergedProps.frameRenderOrder || defaultFrameRenderOrder;
+    const renderedElements = runVisualizationPipeline(orFrameRender, renderOrder, oXScale, oYScale, ordinalProjectedCoordinateNames);
+    return assembleAndRender({
+        size,
+        margin,
+        renderedElements,
+        axes,
+        axesTickLines,
+        title,
+        frameRenderOrder,
+        additionalDefs: mergedProps.additionalDefs,
+        name: "ordinalframe",
+        matte: mergedProps.matte,
+        frameKey: "static"
+    });
+}
+function renderNetworkFrame(props) {
+    const networkDefaultProps = {
+        annotations: [],
+        foregroundGraphics: [],
+        size: [500, 500],
+        className: "",
+        name: "networkframe",
+        networkType: { type: "force", iterations: 500 }
+    };
+    const mergedProps = { ...networkDefaultProps, ...props };
+    const cache = (0, networkPipelineCache_1.createNetworkPipelineCache)();
+    const baseState = buildNetworkBaseState(mergedProps);
+    const state = {
+        ...baseState,
+        ...(0, network_1.calculateNetworkFrame)(mergedProps, baseState, cache)
+    };
+    const { margin, networkFrameRender, title, graphSettings } = state;
+    const size = mergedProps.size || [500, 500];
+    const nXScale = (0, d3_scale_1.scaleLinear)();
+    const nYScale = (0, d3_scale_1.scaleLinear)();
+    const matrixRenderOrder = ["nodes", "edges"];
+    const generalRenderOrder = ["edges", "nodes"];
+    const renderOrder = mergedProps.renderOrder ||
+        (graphSettings && graphSettings.type === "matrix"
+            ? matrixRenderOrder
+            : generalRenderOrder);
+    const frameRenderOrder = mergedProps.frameRenderOrder || defaultFrameRenderOrder;
+    const renderedElements = runVisualizationPipeline(networkFrameRender, renderOrder, nXScale, nYScale, networkProjectedCoordinateNames);
+    return assembleAndRender({
+        size,
+        margin,
+        renderedElements,
+        title,
+        frameRenderOrder,
+        additionalDefs: mergedProps.additionalDefs,
+        name: "networkframe",
+        matte: mergedProps.matte,
+        frameKey: "static"
+    });
+}
+function assembleAndRender({ size, margin, renderedElements, axes, axesTickLines, title, frameRenderOrder, additionalDefs, name, matte, frameKey }) {
+    const renderHash = {
+        "axes-tick-lines": axesTickLines ? (React.createElement("g", { key: "visualization-tick-lines", className: "axis axis-tick-lines", "aria-hidden": true }, axesTickLines)) : null,
+        "axes-labels": axes ? (React.createElement("g", { key: "visualization-axis-labels", className: "axis axis-labels" }, axes)) : null,
+        "viz-layer": renderedElements && renderedElements.length > 0
+            ? renderedElements
+            : null
+    };
+    const orderedElements = [];
+    frameRenderOrder.forEach((r) => {
+        if (renderHash[r]) {
+            orderedElements.push(renderHash[r]);
+        }
+    });
+    const generatedTitle = (0, frameFunctions_1.generateFrameTitle)({
+        title: title || { title: undefined },
+        size
+    });
+    const { defs } = (0, jsx_1.generateFinalDefs)({
+        matte: null,
+        size,
+        margin,
+        frameKey,
+        additionalDefs,
+        name
+    });
+    const svgElement = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `${name} frame`, width: size[0], height: size[1] },
+        defs,
+        orderedElements.length > 0 && (React.createElement("g", { className: "data-visualization", key: "visualization-clip-path", role: "group", transform: `translate(${margin.left},${margin.top})` }, orderedElements)),
+        generatedTitle && React.createElement("g", { className: "frame-title" }, generatedTitle)));
+    return ReactDOMServer.renderToStaticMarkup(svgElement);
+}
+function renderToStaticSVG(frameType, props) {
+    switch (frameType) {
+        case "xy":
+            return renderXYFrame(props);
+        case "ordinal":
+            return renderOrdinalFrame(props);
+        case "network":
+            return renderNetworkFrame(props);
+        default:
+            throw new Error(`Unknown frame type: ${frameType}. Must be "xy", "ordinal", or "network".`);
+    }
+}
+function renderXYToStaticSVG(props) {
+    return renderXYFrame(props);
+}
+function renderOrdinalToStaticSVG(props) {
+    return renderOrdinalFrame(props);
+}
+function renderNetworkToStaticSVG(props) {
+    return renderNetworkFrame(props);
+}

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,77 @@
+"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);
+    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);
+        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(set));
+        events.dispatchEvent(new CustomEvent("update"));
+    }
+    function subscribe(cb) {
+        events.addEventListener("update", cb);
+        return () => events.removeEventListener("update", cb);
+    }
+    return {
+        getState() {
+            return state;
+        },
+        subscribe
+    };
+}