semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/OrdinalFrame.js

@@ -0,0 +1,437 @@
+"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.OrdinalFrameInner = OrdinalFrameInner;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_scale_1 = require("d3-scale");
+const frame_props_1 = require("./constants/frame_props");
+const orframeRules_1 = require("./annotationRules/orframeRules");
+const baseRules_1 = require("./annotationRules/baseRules");
+const multiAccessorUtils_1 = require("./data/multiAccessorUtils");
+const Frame_1 = __importDefault(require("./Frame"));
+const dataFunctions_1 = require("./data/dataFunctions");
+const ordinal_1 = require("./processing/ordinal");
+const ordinalPipelineCache_1 = require("./data/ordinalPipelineCache");
+const useDerivedStateFromProps_1 = require("./useDerivedStateFromProps");
+const useLegacyUnmountCallback_1 = require("./useLegacyUnmountCallback");
+const xScale = (0, d3_scale_1.scaleLinear)();
+const yScale = (0, d3_scale_1.scaleLinear)();
+const projectedCoordinatesObject = { y: "y", x: "x" };
+const defaultOverflow = { top: 0, bottom: 0, left: 0, right: 0 };
+const defaultProps = {
+    annotations: [],
+    foregroundGraphics: [],
+    projection: "vertical",
+    size: [500, 500],
+    className: "",
+    data: [],
+    oScaleType: (0, d3_scale_1.scaleBand)(),
+    rScaleType: d3_scale_1.scaleLinear,
+    type: "none",
+    optimizeCustomTooltipPosition: false
+};
+function OrdinalFrameInner(allProps) {
+    const props = { ...defaultProps, ...allProps };
+    const pipelineCacheRef = (0, react_1.useRef)((0, ordinalPipelineCache_1.createOrdinalPipelineCache)());
+    const baseState = {
+        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_1.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_1.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: props
+    };
+    const initialState = (0, react_1.useMemo)(() => ({
+        ...baseState,
+        ...(0, ordinal_1.calculateOrdinalFrame)(props, baseState, pipelineCacheRef.current)
+    }), []);
+    const state = (0, useDerivedStateFromProps_1.useDerivedStateFromProps)((nextProps, prevState) => deriveOrdinalFrameState(nextProps, prevState, pipelineCacheRef.current), props, initialState);
+    (0, useLegacyUnmountCallback_1.useLegacyUnmountCallback)(props, state);
+    const propsRef = (0, react_1.useRef)(props);
+    propsRef.current = props;
+    const stateRef = (0, react_1.useRef)(state);
+    stateRef.current = state;
+    const defaultSVGRuleCb = (0, react_1.useCallback)((args) => defaultORSVGRule(propsRef.current, stateRef.current, args), []);
+    const defaultHTMLRuleCb = (0, react_1.useCallback)((args) => defaultORHTMLRule(propsRef.current, stateRef.current, args), []);
+    const { className, annotationSettings, annotations, matte, renderKey, interaction, customClickBehavior, customHoverBehavior, customDoubleClickBehavior, projection, backgroundGraphics, foregroundGraphics, afterElements, beforeElements, disableContext, summaryType, summaryHoverAnnotation, pieceHoverAnnotation, hoverAnnotation, canvasPostProcess, canvasPieces, canvasSummaries, canvasConnectors, renderOrder, additionalDefs, sketchyRenderingEngine, frameRenderOrder, disableCanvasInteraction, disableProgressiveRendering, transition } = props;
+    const { orFrameRender, projectedColumns, adjustedPosition, adjustedSize, legendSettings, columnOverlays, axesTickLines, axes, margin, pieceDataXY, oLabels, title } = state;
+    const size = [
+        adjustedSize[0] + margin.left + margin.right,
+        adjustedSize[1] + margin.top + margin.bottom
+    ];
+    let interactionOverflow;
+    if (summaryType && summaryType.amplitude) {
+        if (projection === "horizontal") {
+            interactionOverflow = {
+                top: summaryType.amplitude,
+                bottom: 0,
+                left: 0,
+                right: 0
+            };
+        }
+        else if (projection === "radial") {
+            interactionOverflow = defaultOverflow;
+        }
+        else {
+            interactionOverflow = {
+                top: 0,
+                bottom: 0,
+                left: summaryType.amplitude,
+                right: 0
+            };
+        }
+    }
+    // Memoize foreground graphics calculation
+    const renderedForegroundGraphics = (0, react_1.useMemo)(() => typeof foregroundGraphics === "function"
+        ? foregroundGraphics({ size, margin })
+        : foregroundGraphics, [foregroundGraphics, size, margin]);
+    // Memoize className concatenation
+    const frameClassName = (0, react_1.useMemo)(() => `${className} ${projection}`, [className, projection]);
+    // Memoize hoverAnnotation selection
+    const selectedHoverAnnotation = (0, react_1.useMemo)(() => summaryHoverAnnotation || hoverAnnotation || pieceHoverAnnotation, [summaryHoverAnnotation, pieceHoverAnnotation, hoverAnnotation]);
+    // Memoize interaction object
+    const memoizedInteraction = (0, react_1.useMemo)(() => interaction && {
+        ...interaction,
+        brush: interaction.columnsBrush !== true && "oBrush",
+        projection,
+        projectedColumns
+    }, [interaction, projection, projectedColumns]);
+    // Memoize canvas rendering flag
+    const canvasRendering = (0, react_1.useMemo)(() => !!(canvasPieces || canvasSummaries || canvasConnectors), [canvasPieces, canvasSummaries, canvasConnectors]);
+    return (React.createElement(Frame_1.default, { name: "ordinalframe", renderPipeline: orFrameRender, adjustedPosition: adjustedPosition, adjustedSize: adjustedSize, size: size, xScale: xScale, yScale: yScale, axes: axes, axesTickLines: axesTickLines, title: title, matte: matte, additionalDefs: additionalDefs, className: frameClassName, frameKey: "none", renderFn: renderKey, projectedCoordinateNames: projectedCoordinatesObject, defaultSVGRule: defaultSVGRuleCb, defaultHTMLRule: defaultHTMLRuleCb, hoverAnnotation: selectedHoverAnnotation, annotations: annotations, annotationSettings: annotationSettings, legendSettings: legendSettings, interaction: memoizedInteraction, customClickBehavior: customClickBehavior, customHoverBehavior: customHoverBehavior, customDoubleClickBehavior: customDoubleClickBehavior, points: pieceDataXY, margin: margin, columns: projectedColumns, backgroundGraphics: backgroundGraphics, foregroundGraphics: renderedForegroundGraphics, beforeElements: beforeElements, afterElements: afterElements, overlay: columnOverlays, rScale: state.rScale, projection: projection, disableContext: disableContext, interactionOverflow: interactionOverflow, canvasPostProcess: canvasPostProcess, canvasRendering: canvasRendering, renderOrder: renderOrder, disableCanvasInteraction: disableCanvasInteraction, sketchyRenderingEngine: sketchyRenderingEngine, frameRenderOrder: frameRenderOrder, additionalVizElements: oLabels, disableProgressiveRendering: disableProgressiveRendering, transition: transition }));
+}
+function deriveOrdinalFrameState(nextProps, prevState, cache) {
+    const { props } = prevState;
+    // Check which category of props changed
+    const dataPropsChanged = !prevState.dataVersion && frame_props_1.orFrameDataAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const scalePropsChanged = !prevState.dataVersion && frame_props_1.orFrameScaleAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const sizeChanged = props.size[0] !== nextProps.size[0] || props.size[1] !== nextProps.size[1];
+    // Force full recalc if dataVersion changed or no projectedColumns exists
+    if ((prevState.dataVersion && prevState.dataVersion !== nextProps.dataVersion) ||
+        !prevState.projectedColumns) {
+        return {
+            ...(0, ordinal_1.calculateOrdinalFrame)(nextProps, prevState, cache),
+            props: nextProps
+        };
+    }
+    // Full data recalculation needed if data-affecting props changed
+    if (dataPropsChanged) {
+        return {
+            ...(0, ordinal_1.calculateOrdinalFrame)(nextProps, prevState, cache),
+            props: nextProps
+        };
+    }
+    // Scale/layout recalculation needed if size or scale-affecting props changed
+    // Note: calculateOrdinalFrame doesn't have an updateData flag like XYFrame,
+    // but size changes typically need full recalc due to column layout
+    if (sizeChanged || scalePropsChanged) {
+        return {
+            ...(0, ordinal_1.calculateOrdinalFrame)(nextProps, prevState, cache),
+            props: nextProps
+        };
+    }
+    // Only styling changed - no recalc needed, React will re-render with existing state
+    return { props: nextProps };
+}
+const annotationTypeStrings = new Set([
+    "label", "callout", "callout-circle", "callout-rect",
+    "callout-custom", "xy-threshold", "bracket"
+]);
+function defaultORSVGRule(props, state, { d, i, annotationLayer }) {
+    const { projection, svgAnnotationRules } = props;
+    const { adjustedPosition, adjustedSize, oAccessor, rAccessor, oScale, rScale, projectedColumns, orFrameRender, pieceIDAccessor, rScaleType, summaryType, type } = state;
+    let screenCoordinates = [0, 0];
+    orframeRules_1.getColumnScreenCoordinates;
+    if (d.isColumnAnnotation) {
+        const { coordinates: [xPosition, yPosition] } = (0, orframeRules_1.getColumnScreenCoordinates)({
+            d,
+            projectedColumns,
+            oAccessor,
+            summaryType,
+            type,
+            projection,
+            adjustedPosition,
+            adjustedSize
+        });
+        screenCoordinates = [xPosition, yPosition];
+    }
+    else if (d.coordinates || (d.type === "enclose" && d.neighbors)) {
+        screenCoordinates = (d.coordinates || d.neighbors).map((p) => {
+            const pO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, p) || p.column;
+            const oColumn = projectedColumns[pO];
+            const idPiece = (0, orframeRules_1.findIDPiece)(pieceIDAccessor, oColumn, p);
+            return (0, orframeRules_1.screenProject)({
+                p,
+                adjustedSize,
+                rScale,
+                rAccessor,
+                idPiece,
+                projection,
+                oColumn,
+                rScaleType
+            });
+        });
+    }
+    else {
+        const pO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, d) || d.column;
+        const oColumn = projectedColumns[pO];
+        const idPiece = (0, orframeRules_1.findIDPiece)(pieceIDAccessor, oColumn, d);
+        screenCoordinates = (0, orframeRules_1.screenProject)({
+            p: d,
+            adjustedSize,
+            rScale,
+            rAccessor,
+            idPiece,
+            projection,
+            oColumn,
+            rScaleType
+        });
+    }
+    const { voronoiHover } = annotationLayer;
+    //TODO: Process your rules first
+    const customAnnotation = svgAnnotationRules &&
+        svgAnnotationRules({
+            d,
+            i,
+            oScale,
+            rScale,
+            oAccessor,
+            rAccessor,
+            orFrameProps: props,
+            orFrameState: state,
+            screenCoordinates,
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer,
+            categories: projectedColumns,
+            voronoiHover
+        });
+    if (svgAnnotationRules && customAnnotation !== null) {
+        return customAnnotation;
+    }
+    else if (d.type === "desaturation-layer") {
+        return (0, baseRules_1.desaturationLayer)({
+            style: d.style instanceof Function ? d.style(d, i) : d.style,
+            size: adjustedSize,
+            i,
+            key: d.key
+        });
+    }
+    else if (d.type === "ordinal-line") {
+        return (0, orframeRules_1.svgOrdinalLine)({ d, screenCoordinates, voronoiHover });
+    }
+    else if (d.type === "or") {
+        return (0, orframeRules_1.svgORRule)({ d, i, screenCoordinates, projection });
+    }
+    else if (d.type === "highlight") {
+        return (0, orframeRules_1.svgHighlightRule)({
+            d,
+            pieceIDAccessor,
+            orFrameRender,
+            oAccessor
+        });
+    }
+    else if (typeof d.type === "function" || annotationTypeStrings.has(d.type)) {
+        return (0, orframeRules_1.basicReactAnnotationRule)({ d, i, screenCoordinates });
+    }
+    else if (d.type === "enclose") {
+        return (0, orframeRules_1.svgEncloseRule)({ d, i, screenCoordinates });
+    }
+    else if (d.type === "enclose-rect") {
+        return (0, orframeRules_1.svgRectEncloseRule)({ d, screenCoordinates, i });
+    }
+    else if (d.type === "r") {
+        return (0, orframeRules_1.svgRRule)({
+            d,
+            i,
+            screenCoordinates,
+            rScale,
+            rAccessor,
+            projection,
+            adjustedSize,
+            adjustedPosition
+        });
+    }
+    else if (d.type === "category") {
+        return (0, orframeRules_1.svgCategoryRule)({
+            projection,
+            d,
+            i,
+            categories: state.projectedColumns,
+            adjustedSize
+        });
+    }
+    return null;
+}
+function defaultORHTMLRule(props, state, { d, i, annotationLayer }) {
+    const { adjustedPosition, adjustedSize, oAccessor, rAccessor, oScale, rScale, projectedColumns, summaryType, type, pieceIDAccessor, rScaleType } = state;
+    const { htmlAnnotationRules, tooltipContent, optimizeCustomTooltipPosition, projection, size } = props;
+    let screenCoordinates = [0, 0];
+    const { voronoiHover } = annotationLayer;
+    if (d.coordinates || (d.type === "enclose" && d.neighbors)) {
+        screenCoordinates = (d.coordinates || d.neighbors).map((p) => {
+            const pO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, p) || p.column;
+            const oColumn = projectedColumns[pO];
+            const idPiece = (0, orframeRules_1.findIDPiece)(pieceIDAccessor, oColumn, p);
+            return (0, orframeRules_1.screenProject)({
+                p,
+                adjustedSize,
+                rScale,
+                rAccessor,
+                idPiece,
+                projection,
+                oColumn,
+                rScaleType
+            });
+        });
+    }
+    else if (d.type === "column-hover") {
+        const { coordinates: [xPosition, yPosition] } = (0, orframeRules_1.getColumnScreenCoordinates)({
+            d,
+            projectedColumns,
+            oAccessor,
+            summaryType,
+            type,
+            projection,
+            adjustedPosition,
+            adjustedSize
+        });
+        screenCoordinates = [xPosition, yPosition];
+    }
+    else {
+        const pO = (0, multiAccessorUtils_1.findFirstAccessorValue)(oAccessor, d) || d.column;
+        const oColumn = projectedColumns[pO];
+        const idPiece = (0, orframeRules_1.findIDPiece)(pieceIDAccessor, oColumn, d);
+        screenCoordinates = (0, orframeRules_1.screenProject)({
+            p: d,
+            adjustedSize,
+            rScale,
+            rAccessor,
+            idPiece,
+            projection,
+            oColumn,
+            rScaleType
+        });
+    }
+    const flippedRScale = projection === "vertical"
+        ? rScaleType.domain(rScale.domain()).range(rScale.range().reverse())
+        : rScale;
+    //TODO: Process your rules first
+    const customAnnotation = htmlAnnotationRules &&
+        htmlAnnotationRules({
+            d,
+            i,
+            oScale,
+            rScale: flippedRScale,
+            oAccessor,
+            rAccessor,
+            orFrameProps: props,
+            screenCoordinates,
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer,
+            orFrameState: state,
+            categories: state.projectedColumns,
+            voronoiHover
+        });
+    if (htmlAnnotationRules && customAnnotation !== null) {
+        return customAnnotation;
+    }
+    if (d.type === "frame-hover") {
+        return (0, orframeRules_1.htmlFrameHoverRule)({
+            d,
+            i,
+            rAccessor,
+            oAccessor,
+            projection,
+            tooltipContent,
+            optimizeCustomTooltipPosition,
+            projectedColumns,
+            pieceIDAccessor,
+            adjustedSize,
+            rScale,
+            type,
+            rScaleType
+        });
+    }
+    else if (d.type === "column-hover") {
+        return (0, orframeRules_1.htmlColumnHoverRule)({
+            d,
+            i,
+            summaryType,
+            oAccessor,
+            projectedColumns,
+            type,
+            adjustedPosition,
+            adjustedSize,
+            projection,
+            tooltipContent,
+            optimizeCustomTooltipPosition
+        });
+    }
+    return null;
+}
+OrdinalFrameInner.displayName = "OrdinalFrame";
+const OrdinalFrame = React.memo(OrdinalFrameInner);
+exports.default = OrdinalFrame;

package/ai/dist/src/components/ResponsiveFrame.js

@@ -0,0 +1,68 @@
+"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 useBoundingRect_1 = require("./useBoundingRect");
+const createResponsiveFrame = (ParticularFrame) => {
+    function ResponsiveFrame(props) {
+        const { responsiveWidth, responsiveHeight, size = [500, 500], dataVersion, debounce = 200, gridDisplay, ...rest } = props;
+        const actualSize = [...size];
+        let returnEmpty = false;
+        let sceneRef = (0, react_1.useRef)();
+        let rect = (0, useBoundingRect_1.useBoundingRect)(sceneRef);
+        if (responsiveWidth) {
+            if (rect == null)
+                returnEmpty = true;
+            else
+                actualSize[0] = rect.width;
+        }
+        if (responsiveHeight) {
+            if (rect == null)
+                returnEmpty = true;
+            else
+                actualSize[1] = rect.height;
+        }
+        const dataVersionWithSize = dataVersion + actualSize.toString() + debounce;
+        return (React.createElement("div", { "data-testid": "responsive-container", className: "responsive-container", style: gridDisplay
+                ? { minWidth: "0px", minHeight: "0px" }
+                : { height: "100%", width: "100%" }, ref: sceneRef }, !returnEmpty && (React.createElement(ParticularFrame, { ...rest, size: actualSize, dataVersion: dataVersion ? dataVersionWithSize : undefined }))));
+    }
+    ResponsiveFrame.isResizing = setTimeout(() => { });
+    ResponsiveFrame.displayName = `Responsive${ParticularFrame.displayName}`;
+    return ResponsiveFrame;
+};
+exports.default = createResponsiveFrame;

package/ai/dist/src/components/ResponsiveMinimapXYFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveMinimapXYFrame = void 0;
+const MinimapXYFrame_1 = __importDefault(require("./MinimapXYFrame"));
+const ResponsiveFrame_1 = __importDefault(require("./ResponsiveFrame"));
+exports.ResponsiveMinimapXYFrame = 
+/*#__PURE__*/ (0, ResponsiveFrame_1.default)(MinimapXYFrame_1.default);

package/ai/dist/src/components/ResponsiveNetworkFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveNetworkFrame = void 0;
+const NetworkFrame_1 = __importDefault(require("./NetworkFrame"));
+const ResponsiveFrame_1 = __importDefault(require("./ResponsiveFrame"));
+exports.ResponsiveNetworkFrame = 
+/*#__PURE__*/ (0, ResponsiveFrame_1.default)(NetworkFrame_1.default);

package/ai/dist/src/components/ResponsiveOrdinalFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveOrdinalFrame = void 0;
+const OrdinalFrame_1 = __importDefault(require("./OrdinalFrame"));
+const ResponsiveFrame_1 = __importDefault(require("./ResponsiveFrame"));
+exports.ResponsiveOrdinalFrame = 
+/*#__PURE__*/ (0, ResponsiveFrame_1.default)(OrdinalFrame_1.default);

package/ai/dist/src/components/ResponsiveXYFrame.js

@@ -0,0 +1,10 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveXYFrame = void 0;
+const XYFrame_1 = __importDefault(require("./XYFrame"));
+const ResponsiveFrame_1 = __importDefault(require("./ResponsiveFrame"));
+exports.ResponsiveXYFrame = (0, ResponsiveFrame_1.default)(XYFrame_1.default);

package/ai/dist/src/components/SparkFrame.js

@@ -0,0 +1,113 @@
+"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.networkFrameDefaults = exports.ordinalFrameDefaults = exports.xyFrameDefaults = exports.axisDefaults = void 0;
+exports.default = createSparkFrame;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const allFrameDefaults = {
+    margin: 0
+};
+function sparkNetworkSettings(originalSettings = "force") {
+    let finalSettings = {};
+    if (originalSettings) {
+        finalSettings = originalSettings;
+        if (originalSettings === "force")
+            finalSettings = { type: "force" };
+        return {
+            edgeStrength: 2,
+            edgeDistance: 5,
+            nodePadding: 1,
+            nodeWidth: 5,
+            groupWidth: 4,
+            ...finalSettings
+        };
+    }
+    return originalSettings;
+}
+exports.axisDefaults = {
+    tickFormat: () => "",
+    baseline: false
+};
+const xyFrameDefaults = (props) => ({
+    ...allFrameDefaults,
+    ...props,
+    hoverAnnotation: props.hoverAnnotation,
+    axes: props.axes
+        ? props.axes.map((a) => ({ ...exports.axisDefaults, ...a }))
+        : props.axes
+});
+exports.xyFrameDefaults = xyFrameDefaults;
+const ordinalFrameDefaults = (props) => ({
+    ...allFrameDefaults,
+    ...props,
+    hoverAnnotation: props.hoverAnnotation,
+    axes: props.axes
+        ? props.axes.map((a) => ({ ...exports.axisDefaults, ...a }))
+        : props.axes
+});
+exports.ordinalFrameDefaults = ordinalFrameDefaults;
+const networkFrameDefaults = (props) => ({
+    ...allFrameDefaults,
+    nodeSizeAccessor: 2,
+    ...props,
+    networkType: sparkNetworkSettings(props.networkType)
+});
+exports.networkFrameDefaults = networkFrameDefaults;
+function createSparkFrame(Frame, defaults, frameName) {
+    return (props) => {
+        const { size = [], sparkStyle = {} } = props;
+        const [containerHeight, changeContainerHeight] = (0, react_1.useState)(30);
+        const actualSize = [];
+        actualSize[0] =
+            typeof size === "number" ? size : size[0] ? size[0] : containerHeight;
+        actualSize[1] = containerHeight;
+        const sparkNodeRef = (0, react_1.useCallback)((node) => {
+            if (node) {
+                const lineHeight = +window.getComputedStyle(node).lineHeight.split("px")[0] - 5;
+                changeContainerHeight(isNaN(lineHeight) ? node.offsetHeight : lineHeight);
+            }
+        }, []);
+        return (React.createElement("div", { style: Object.assign({
+                width: `${actualSize[0]}px`,
+                height: `${actualSize[1]}px`,
+                display: "inline-block",
+                marginLeft: "5px",
+                marginRight: "5px"
+            }, sparkStyle), ref: sparkNodeRef },
+            React.createElement(Frame, { ...defaults(props), size: actualSize })));
+    };
+}

package/ai/dist/src/components/SparkNetworkFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparkNetworkFrame = void 0;
+const NetworkFrame_1 = __importDefault(require("./NetworkFrame"));
+const SparkFrame_1 = __importDefault(require("./SparkFrame"));
+const SparkFrame_2 = require("./SparkFrame");
+exports.SparkNetworkFrame = (0, SparkFrame_1.default)(NetworkFrame_1.default, SparkFrame_2.networkFrameDefaults, "SparkNetworkFrame");