semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/annotationRules/networkframeRules.js

@@ -0,0 +1,196 @@
+"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.svgHighlightRule = exports.svgHullEncloseRule = exports.svgRectEncloseRule = exports.svgEncloseRule = exports.svgReactAnnotationRule = exports.svgNodeRule = exports.htmlFrameHoverRule = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_hierarchy_1 = require("d3-hierarchy");
+const baseRules_1 = require("./baseRules");
+const TooltipPositioner_1 = __importDefault(require("../TooltipPositioner"));
+const htmlFrameHoverRule = ({ d: baseD, i, tooltipContent, optimizeCustomTooltipPosition, nodes, edges, nodeIDAccessor, adjustedSize }) => {
+    const d = baseD.x !== undefined && baseD.y !== undefined
+        ? baseD
+        : baseD.edge
+            ? {
+                ...(edges.find((p) => nodeIDAccessor(p.source) === nodeIDAccessor(baseD.source) &&
+                    nodeIDAccessor(p.target) === nodeIDAccessor(baseD.target)) || {}),
+                ...baseD
+            }
+            : nodes.find((p) => nodeIDAccessor(p) === baseD.id);
+    if (!d)
+        return null;
+    let content = d.edge ? (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        React.createElement("p", { key: "html-annotation-content-1" },
+            (d.source || d.edge.source).id,
+            " to ",
+            (d.target || d.edge.target).id))) : (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        React.createElement("p", { key: "html-annotation-content-1" }, d.id),
+        React.createElement("p", { key: "html-annotation-content-2" },
+            "Degree: ",
+            d.degree)));
+    if (d.type === "frame-hover" && tooltipContent) {
+        content = optimizeCustomTooltipPosition ? (React.createElement(TooltipPositioner_1.default, { tooltipContent: tooltipContent, tooltipContentArgs: d })) : (tooltipContent(d));
+    }
+    const flipped = adjustedSize && d.x > adjustedSize[0] / 2;
+    const tooltipStyle = {
+        position: "absolute",
+        top: `${d.y}px`,
+        left: `${d.x}px`
+    };
+    if (flipped) {
+        tooltipStyle.transform = "translateX(-100%)";
+    }
+    return (React.createElement("div", { key: `network-annotation-label-${i}`, className: `annotation annotation-network-label ${d.className || ""}`, "data-testid": "network-tooltip-container", style: tooltipStyle }, content));
+};
+exports.htmlFrameHoverRule = htmlFrameHoverRule;
+const svgNodeRule = ({ d, i, nodeSizeAccessor }) => {
+    if (!d) {
+        return null;
+    }
+    const noteData = Object.assign({
+        dx: d.dx || -25,
+        dy: d.dy || -25,
+        x: d.x,
+        y: d.y,
+        note: { label: d.label, orientation: d.orientation, align: d.align },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-circle",
+        subject: {
+            radius: d.radius || d.radius || nodeSizeAccessor(d)
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgNodeRule = svgNodeRule;
+const svgReactAnnotationRule = ({ d, i, projectedNodes, nodeIDAccessor }) => {
+    const selectedNode = d.x !== undefined && d.y !== undefined
+        ? d
+        : projectedNodes.find((p) => nodeIDAccessor(p) === d.id);
+    if (!selectedNode) {
+        return null;
+    }
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        x: selectedNode.x,
+        y: selectedNode.y,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, { type: typeof d.type === "function" ? d.type : undefined });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgReactAnnotationRule = svgReactAnnotationRule;
+const svgEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const circle = (0, d3_hierarchy_1.packEnclose)(selectedNodes.map((p) => ({ x: p.x, y: p.y, r: nodeSizeAccessor(p) })));
+    return (0, baseRules_1.circleEnclosure)({ circle, d, i });
+};
+exports.svgEncloseRule = svgEncloseRule;
+const svgRectEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const bboxNodes = selectedNodes.map((p) => {
+        if (p.shapeNode) {
+            return {
+                x0: p.x0,
+                x1: p.x1,
+                y0: p.y0,
+                y1: p.y1
+            };
+        }
+        const nodeSize = nodeSizeAccessor(p);
+        return {
+            x0: p.x - nodeSize,
+            x1: p.x + nodeSize,
+            y0: p.y - nodeSize,
+            y1: p.y + nodeSize
+        };
+    });
+    return (0, baseRules_1.rectangleEnclosure)({ bboxNodes, d, i });
+};
+exports.svgRectEncloseRule = svgRectEncloseRule;
+const svgHullEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const projectedPoints = [];
+    selectedNodes.forEach((p) => {
+        if (p.shapeNode) {
+            projectedPoints.push({ x: p.x0, y: p.y0 });
+            projectedPoints.push({ x: p.x0, y: p.y1 });
+            projectedPoints.push({ x: p.x1, y: p.y0 });
+            projectedPoints.push({ x: p.x1, y: p.y1 });
+        }
+        else {
+            const nodeSize = nodeSizeAccessor(p);
+            projectedPoints.push({ x: p.x - nodeSize, y: p.y - nodeSize });
+            projectedPoints.push({ x: p.x + nodeSize, y: p.y - nodeSize });
+            projectedPoints.push({ x: p.x - nodeSize, y: p.y + nodeSize });
+            projectedPoints.push({ x: p.x + nodeSize, y: p.y + nodeSize });
+        }
+    });
+    return (0, baseRules_1.hullEnclosure)({ points: projectedPoints.map((d) => [d.x, d.y]), d, i });
+};
+exports.svgHullEncloseRule = svgHullEncloseRule;
+const svgHighlightRule = ({ d, i, networkFrameRender }) => {
+    const { nodes } = networkFrameRender;
+    const { customMark, styleFn: baseStyle } = nodes;
+    let styleFn = baseStyle;
+    if (d.style && typeof d.style === "function") {
+        styleFn = (d) => ({ ...baseStyle(d), ...d.style(d) });
+    }
+    else if (d.style) {
+        styleFn = (d) => ({ ...baseStyle(d), ...d.style });
+    }
+    const transform = `translate(${d.x},${d.y})`;
+    const HighlightMark = customMark({
+        d,
+        styleFn,
+        transform,
+        key: `highlight-${i}`
+    });
+    return HighlightMark;
+};
+exports.svgHighlightRule = svgHighlightRule;

package/ai/dist/src/components/annotationRules/xyframeRules.js

@@ -0,0 +1,297 @@
+"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.svgHullEncloseAnnotation = exports.svgEncloseAnnotation = exports.svgRectEncloseAnnotation = exports.htmlTooltipAnnotation = exports.svgAreaAnnotation = exports.svgLineAnnotation = exports.svgBoundsAnnotation = exports.svgYAnnotation = exports.svgXAnnotation = exports.basicReactAnnotation = exports.svgXYAnnotation = exports.svgHighlight = exports.svgVerticalPointsAnnotation = exports.svgHorizontalPointsAnnotation = exports.pointsAlong = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_shape_1 = require("d3-shape");
+const d3_hierarchy_1 = require("d3-hierarchy");
+const d3_array_1 = require("d3-array");
+const baseRules_1 = require("./baseRules");
+const multiAccessorUtils_1 = require("../data/multiAccessorUtils");
+const general_1 = require("../visualizationLayerBehavior/general");
+const pointsAlong = (along) => ({ d, lines, points, xScale, yScale, pointStyle }) => {
+    const alongScale = along === "x" ? xScale : yScale;
+    along = along === "yTop" && d.yMiddle ? "yMiddle" : along;
+    if (d && d[along]) {
+        const { threshold = 1, r = () => 4, styleFn = pointStyle } = d;
+        const foundPoints = [];
+        const halfThreshold = threshold / 2;
+        if (lines && lines.length > 0) {
+            lines.forEach((linedata) => {
+                const linePoints = linedata.data.filter((p) => {
+                    const pAlong = alongScale(p[along]);
+                    const dAlong = alongScale(d[along]);
+                    return (pAlong <= dAlong + halfThreshold &&
+                        pAlong >= dAlong - halfThreshold);
+                });
+                foundPoints.push(...linePoints);
+            });
+        }
+        if (points && points.length > 0) {
+            const pointPoints = points.filter((p) => {
+                const pAlong = alongScale(p[along]);
+                const dAlong = alongScale(d[along]);
+                return (pAlong <= dAlong + halfThreshold && pAlong >= dAlong - halfThreshold);
+            });
+            foundPoints.push(...pointPoints);
+        }
+        return foundPoints.map((p, i) => (React.createElement("circle", { key: `found-circle-${i}`, r: r(p, i), style: styleFn(p, i), cx: xScale(p.xMiddle || p.x), cy: yScale(p.yMiddle || p.yTop) })));
+    }
+    return null;
+};
+exports.pointsAlong = pointsAlong;
+exports.svgHorizontalPointsAnnotation = (0, exports.pointsAlong)("yTop");
+exports.svgVerticalPointsAnnotation = (0, exports.pointsAlong)("x");
+const svgHighlight = ({ d, i, points = { data: [] }, lines = { data: [], type: {} }, summaries = { data: [] }, idAccessor, xScale, yScale, xyFrameRender, defined }) => {
+    let dID;
+    const baseID = idAccessor({ ...d, ...d.data }, i);
+    if (baseID !== undefined) {
+        dID = baseID;
+    }
+    else if (d.parentLine && idAccessor(d.parentLine, i) !== undefined) {
+        dID = idAccessor(d.parentLine, i);
+    }
+    else if (d.parentSummary && idAccessor(d.parentSummary, i) !== undefined) {
+        dID = idAccessor(d.parentSummary, i);
+    }
+    const foundPoints = points.data
+        .filter((p, q) => idAccessor({ ...p, ...p.data }, q) === dID)
+        .map((p, q) => {
+        const baseStyle = xyFrameRender.points.styleFn({ ...p, ...p.data });
+        const highlightStyle = typeof d.style === "function"
+            ? d.style({ ...p, ...p.data }, q)
+            : d.style || {};
+        return (React.createElement("circle", { key: `highlight-point-${q}`, cx: xScale(p.x), cy: yScale(p.y), r: 5, fill: "none", stroke: "currentColor", strokeWidth: 2, style: { ...baseStyle, ...highlightStyle }, className: `highlight-annotation ${(d.class &&
+                typeof d.class === "function" &&
+                d.class({ ...p, ...p.data }, q)) ||
+                (d.class && d.class) ||
+                ""}` }));
+    });
+    const lineGenerator = (0, d3_shape_1.area)()
+        .x((p) => xScale(p.x))
+        .y0((p) => yScale(p.yBottom))
+        .y1((p) => yScale(p.yTop));
+    const interpolatorSetting = lines.type.interpolator || lines.type.curve;
+    const actualInterpolator = typeof interpolatorSetting === "string"
+        ? general_1.curveHash[interpolatorSetting]
+        : interpolatorSetting;
+    if (actualInterpolator) {
+        lineGenerator.curve(actualInterpolator);
+    }
+    if (defined) {
+        lineGenerator.defined((p, q) => defined(p.data, q));
+    }
+    const foundLines = lines.data
+        .filter((p, q) => idAccessor(p, q) === dID)
+        .map((p, q) => {
+        const baseStyle = xyFrameRender.lines.styleFn(p, q);
+        const highlightStyle = typeof d.style === "function" ? d.style(p, q) : d.style || {};
+        return (React.createElement("path", { className: `highlight-annotation ${(d.class && typeof d.class === "function" && d.class(p, q)) ||
+                (d.class && d.class) ||
+                ""}`, key: `highlight-summary-${q}`, d: lineGenerator(p.data), fill: "none", stroke: "currentColor", strokeWidth: 1, style: { ...baseStyle, ...highlightStyle } }));
+    });
+    const foundSummaries = summaries.data
+        .filter((p, q) => idAccessor(p, q) === dID)
+        .map((p, q) => {
+        const baseStyle = xyFrameRender.summaries.styleFn(p, q);
+        const highlightStyle = typeof d.style === "function" ? d.style(p, q) : d.style || {};
+        return (React.createElement("path", { className: `highlight-annotation ${(d.class && typeof d.class === "function" && d.class(p, q)) ||
+                (d.class && d.class) ||
+                ""}`, key: `highlight-summary-${q}`, d: `M${p.coordinates.join("L")}`, fill: "none", stroke: "currentColor", strokeWidth: 1, style: { ...baseStyle, ...highlightStyle } }));
+    });
+    return [...foundSummaries, ...foundLines, ...foundPoints];
+};
+exports.svgHighlight = svgHighlight;
+const svgXYAnnotation = ({ screenCoordinates, i, d }) => {
+    let inlineStyle;
+    if (d.color)
+        inlineStyle = { fill: d.color };
+    const laLine = (React.createElement("circle", { className: `annotation ${d.type} ${d.className || ""} `, key: `annotationpoint${i}`, cx: screenCoordinates[0], cy: screenCoordinates[1], style: inlineStyle, fill: "none", stroke: "currentColor", r: 5 }));
+    let laLabel;
+    if (d.type === "xy") {
+        laLabel = (React.createElement("text", { key: `${d.label}annotationtext${i}`, x: screenCoordinates[0], y: 10 + screenCoordinates[1], "data-testid": "annotation-xy-label", className: `annotation annotation-xy-label ${d.className || ""} ` }, d.label));
+    }
+    return [laLine, laLabel];
+};
+exports.svgXYAnnotation = svgXYAnnotation;
+const basicReactAnnotation = ({ screenCoordinates, d, i }) => {
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        note: { label: d.label, orientation: d.orientation, align: d.align },
+        connector: { end: "arrow" }
+    }, d, {
+        type: d.type,
+        screenCoordinates,
+        i
+    });
+    noteData.x = noteData.fixedX ? noteData.fixedX : screenCoordinates[0];
+    noteData.y = noteData.fixedY ? noteData.fixedY : screenCoordinates[1];
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.basicReactAnnotation = basicReactAnnotation;
+const svgXAnnotation = ({ screenCoordinates, d, i, adjustedSize }) => {
+    const noteData = Object.assign({
+        dx: 50,
+        dy: 20,
+        y: 0,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "xy-threshold",
+        x: screenCoordinates[0],
+        subject: {
+            x: screenCoordinates[0],
+            y1: 0,
+            y2: adjustedSize[1]
+        },
+        i
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgXAnnotation = svgXAnnotation;
+const svgYAnnotation = ({ screenCoordinates, d, i, adjustedSize, adjustedPosition }) => {
+    const xPosition = i * 25;
+    const noteData = Object.assign({
+        dx: 50,
+        dy: -20,
+        x: xPosition,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "xy-threshold",
+        y: screenCoordinates[1],
+        subject: {
+            y: screenCoordinates[1],
+            x1: 0,
+            x2: adjustedSize[0] + adjustedPosition[0]
+        },
+        i
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgYAnnotation = svgYAnnotation;
+const svgBoundsAnnotation = ({ d, i, adjustedSize, xAccessor, yAccessor, xScale, yScale }) => {
+    const startXValue = (0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, d.bounds[0]);
+    const startYValue = (0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, d.bounds[0]);
+    const endXValue = (0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, d.bounds[1]);
+    const endYValue = (0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, d.bounds[1]);
+    const x0Position = startXValue ? xScale(startXValue) : 0;
+    const y0Position = startYValue ? yScale(startYValue) : adjustedSize[1];
+    const x1Position = endXValue ? xScale(endXValue) : adjustedSize[0];
+    const y1Position = endYValue ? yScale(endYValue) : 0;
+    const noteData = Object.assign({
+        dx: 250,
+        dy: -20,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-rect",
+        x: Math.min(x0Position, x1Position),
+        y: Math.min(y0Position, y1Position),
+        subject: {
+            width: Math.abs(x1Position - x0Position),
+            height: Math.abs(y0Position - y1Position)
+        },
+        i
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgBoundsAnnotation = svgBoundsAnnotation;
+const svgLineAnnotation = ({ d, i, screenCoordinates }) => {
+    const lineGenerator = (0, d3_shape_1.line)()
+        .x((p) => p[0])
+        .y((p) => p[1]);
+    const lineD = lineGenerator(screenCoordinates);
+    const laLine = (React.createElement("path", { key: `${d.label}annotationline${i}`, d: lineD, className: `annotation annotation-line ${d.className || ""} ` }));
+    const laLabel = (React.createElement("text", { key: `${d.label}annotationlinetext${i}`, x: (screenCoordinates[0][0] + screenCoordinates[1][0]) / 2, y: (screenCoordinates[0][1] + screenCoordinates[1][1]) / 2, className: `annotation annotation-line-label ${d.className || ""} ` }, d.label));
+    return [laLine, laLabel];
+};
+exports.svgLineAnnotation = svgLineAnnotation;
+const svgAreaAnnotation = ({ d, i, xScale, xAccessor, yScale, yAccessor, annotationLayer }) => {
+    const mappedCoordinates = `M${d.coordinates
+        .map((p) => [
+        xScale((0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, p)),
+        yScale((0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, p))
+    ])
+        .join("L")}Z`;
+    const xBounds = (0, d3_array_1.extent)(d.coordinates.map((p) => xScale((0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, p))));
+    const yBounds = (0, d3_array_1.extent)(d.coordinates.map((p) => yScale((0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, p))));
+    const xCenter = (xBounds[0] + xBounds[1]) / 2;
+    const yCenter = (yBounds[0] + yBounds[1]) / 2;
+    const laLine = (React.createElement("path", { key: `${d.label}-annotation-area-${i}`, d: mappedCoordinates, className: `annotation annotation-area ${d.className || ""} ` }));
+    const laLabel = (React.createElement("text", { key: `${d.label}-annotationtext-${i}`, x: xCenter, y: yCenter, transform: `translate(${annotationLayer.position})`, className: `annotation annotation-area-label ${d.className || ""} `, style: { textAnchor: "middle" } }, d.label));
+    return [laLine, laLabel];
+};
+exports.svgAreaAnnotation = svgAreaAnnotation;
+const htmlTooltipAnnotation = ({ content, screenCoordinates, i, d, adjustedSize }) => {
+    //To string because React gives a DOM error if it gets a date
+    const flipped = adjustedSize && screenCoordinates[0] > adjustedSize[0] / 2;
+    const tooltipStyle = {
+        position: "absolute",
+        top: `${screenCoordinates[1]}px`,
+        left: `${screenCoordinates[0]}px`
+    };
+    if (flipped) {
+        tooltipStyle.transform = "translateX(-100%)";
+    }
+    return (React.createElement("div", { key: `xylabel-${i}`, className: `annotation annotation-xy-label ${d.className || ""} `, style: tooltipStyle }, content));
+};
+exports.htmlTooltipAnnotation = htmlTooltipAnnotation;
+const svgRectEncloseAnnotation = ({ d, i, screenCoordinates }) => {
+    const bboxNodes = screenCoordinates.map((p) => {
+        return {
+            x0: (p.x0 = p[0]),
+            x1: (p.x1 = p[0]),
+            y0: (p.y0 = p[1]),
+            y1: (p.y1 = p[1])
+        };
+    });
+    return (0, baseRules_1.rectangleEnclosure)({ bboxNodes, d, i });
+};
+exports.svgRectEncloseAnnotation = svgRectEncloseAnnotation;
+const svgEncloseAnnotation = ({ screenCoordinates, d, i }) => {
+    const circle = (0, d3_hierarchy_1.packEnclose)(screenCoordinates.map((p) => ({ x: p[0], y: p[1], r: 2 })));
+    return (0, baseRules_1.circleEnclosure)({ d, circle, i });
+};
+exports.svgEncloseAnnotation = svgEncloseAnnotation;
+const svgHullEncloseAnnotation = ({ screenCoordinates, d, i }) => {
+    return (0, baseRules_1.hullEnclosure)({ points: screenCoordinates, d, i });
+};
+exports.svgHullEncloseAnnotation = svgHullEncloseAnnotation;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.batchWork = batchWork;
+const MAX_TIMEFRAME_MS = 30;
+async function batchWork(performWork, { signal, timeFrameMs = MAX_TIMEFRAME_MS } = {}) {
+    return new Promise((resolve, reject) => {
+        requestAnimationFrame(function loop() {
+            // FIXME the `timestamp` value can be received from rAF,
+            // but the value is not in sync with performance.now (in tests only)
+            let timestamp = performance.now();
+            let elapsed = 0;
+            let shouldContinue = false;
+            let isAborted = signal != null && signal.aborted;
+            try {
+                if (isAborted) {
+                    return resolve();
+                }
+                do {
+                    shouldContinue = performWork();
+                    elapsed = performance.now() - timestamp;
+                    isAborted = signal != null && signal.aborted;
+                } while (!isAborted && shouldContinue && elapsed < timeFrameMs);
+                if (!isAborted && shouldContinue) {
+                    requestAnimationFrame(loop);
+                }
+                else {
+                    resolve();
+                }
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    });
+}

package/ai/dist/src/components/charts/index.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * Higher-order chart components
+ *
+ * These components provide simplified, opinionated wrappers around
+ * XYFrame, OrdinalFrame, and NetworkFrame for common chart types.
+ *
+ * @module charts
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeTooltip = exports.MultiLineTooltip = exports.Tooltip = exports.truncateText = exports.formatLargeNumber = exports.createTooltip = exports.formatAxis = exports.formatDate = exports.formatNumber = exports.getSize = exports.createColorScale = exports.getColor = exports.DEFAULT_COLORS = exports.COLOR_SCHEMES = exports.DEFAULT_COLOR = exports.useSortedData = exports.useColorScale = exports.RealtimeHeatmap = exports.RealtimeWaterfallChart = exports.RealtimeSwarmChart = exports.RealtimeHistogram = exports.RealtimeTemporalHistogram = exports.RealtimeLineChart = exports.CirclePack = exports.Treemap = exports.TreeDiagram = exports.SankeyDiagram = exports.ChordDiagram = exports.ForceDirectedGraph = exports.GroupedBarChart = exports.DonutChart = exports.PieChart = exports.DotPlot = exports.RidgelinePlot = exports.ViolinPlot = exports.Histogram = exports.BoxPlot = exports.SwarmPlot = exports.StackedBarChart = exports.BarChart = exports.MinimapChart = exports.ScatterplotMatrix = exports.BubbleChart = exports.Heatmap = exports.StackedAreaChart = exports.AreaChart = exports.LineChart = exports.Scatterplot = void 0;
+// ============================================================================
+// XY Charts (based on XYFrame)
+// ============================================================================
+var Scatterplot_1 = require("./xy/Scatterplot");
+Object.defineProperty(exports, "Scatterplot", { enumerable: true, get: function () { return Scatterplot_1.Scatterplot; } });
+var LineChart_1 = require("./xy/LineChart");
+Object.defineProperty(exports, "LineChart", { enumerable: true, get: function () { return LineChart_1.LineChart; } });
+var AreaChart_1 = require("./xy/AreaChart");
+Object.defineProperty(exports, "AreaChart", { enumerable: true, get: function () { return AreaChart_1.AreaChart; } });
+var StackedAreaChart_1 = require("./xy/StackedAreaChart");
+Object.defineProperty(exports, "StackedAreaChart", { enumerable: true, get: function () { return StackedAreaChart_1.StackedAreaChart; } });
+var Heatmap_1 = require("./xy/Heatmap");
+Object.defineProperty(exports, "Heatmap", { enumerable: true, get: function () { return Heatmap_1.Heatmap; } });
+var BubbleChart_1 = require("./xy/BubbleChart");
+Object.defineProperty(exports, "BubbleChart", { enumerable: true, get: function () { return BubbleChart_1.BubbleChart; } });
+var ScatterplotMatrix_1 = require("./xy/ScatterplotMatrix");
+Object.defineProperty(exports, "ScatterplotMatrix", { enumerable: true, get: function () { return ScatterplotMatrix_1.ScatterplotMatrix; } });
+var MinimapChart_1 = require("./xy/MinimapChart");
+Object.defineProperty(exports, "MinimapChart", { enumerable: true, get: function () { return MinimapChart_1.MinimapChart; } });
+// ============================================================================
+// Ordinal Charts (based on OrdinalFrame)
+// ============================================================================
+var BarChart_1 = require("./ordinal/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
+var StackedBarChart_1 = require("./ordinal/StackedBarChart");
+Object.defineProperty(exports, "StackedBarChart", { enumerable: true, get: function () { return StackedBarChart_1.StackedBarChart; } });
+var SwarmPlot_1 = require("./ordinal/SwarmPlot");
+Object.defineProperty(exports, "SwarmPlot", { enumerable: true, get: function () { return SwarmPlot_1.SwarmPlot; } });
+var BoxPlot_1 = require("./ordinal/BoxPlot");
+Object.defineProperty(exports, "BoxPlot", { enumerable: true, get: function () { return BoxPlot_1.BoxPlot; } });
+var Histogram_1 = require("./ordinal/Histogram");
+Object.defineProperty(exports, "Histogram", { enumerable: true, get: function () { return Histogram_1.Histogram; } });
+var ViolinPlot_1 = require("./ordinal/ViolinPlot");
+Object.defineProperty(exports, "ViolinPlot", { enumerable: true, get: function () { return ViolinPlot_1.ViolinPlot; } });
+var RidgelinePlot_1 = require("./ordinal/RidgelinePlot");
+Object.defineProperty(exports, "RidgelinePlot", { enumerable: true, get: function () { return RidgelinePlot_1.RidgelinePlot; } });
+var DotPlot_1 = require("./ordinal/DotPlot");
+Object.defineProperty(exports, "DotPlot", { enumerable: true, get: function () { return DotPlot_1.DotPlot; } });
+var PieChart_1 = require("./ordinal/PieChart");
+Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return PieChart_1.PieChart; } });
+var DonutChart_1 = require("./ordinal/DonutChart");
+Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return DonutChart_1.DonutChart; } });
+var GroupedBarChart_1 = require("./ordinal/GroupedBarChart");
+Object.defineProperty(exports, "GroupedBarChart", { enumerable: true, get: function () { return GroupedBarChart_1.GroupedBarChart; } });
+// ============================================================================
+// Network Charts (based on NetworkFrame)
+// ============================================================================
+var ForceDirectedGraph_1 = require("./network/ForceDirectedGraph");
+Object.defineProperty(exports, "ForceDirectedGraph", { enumerable: true, get: function () { return ForceDirectedGraph_1.ForceDirectedGraph; } });
+var ChordDiagram_1 = require("./network/ChordDiagram");
+Object.defineProperty(exports, "ChordDiagram", { enumerable: true, get: function () { return ChordDiagram_1.ChordDiagram; } });
+var SankeyDiagram_1 = require("./network/SankeyDiagram");
+Object.defineProperty(exports, "SankeyDiagram", { enumerable: true, get: function () { return SankeyDiagram_1.SankeyDiagram; } });
+var TreeDiagram_1 = require("./network/TreeDiagram");
+Object.defineProperty(exports, "TreeDiagram", { enumerable: true, get: function () { return TreeDiagram_1.TreeDiagram; } });
+var Treemap_1 = require("./network/Treemap");
+Object.defineProperty(exports, "Treemap", { enumerable: true, get: function () { return Treemap_1.Treemap; } });
+var CirclePack_1 = require("./network/CirclePack");
+Object.defineProperty(exports, "CirclePack", { enumerable: true, get: function () { return CirclePack_1.CirclePack; } });
+// ============================================================================
+// Realtime Charts
+// ============================================================================
+var RealtimeLineChart_1 = require("./realtime/RealtimeLineChart");
+Object.defineProperty(exports, "RealtimeLineChart", { enumerable: true, get: function () { return RealtimeLineChart_1.RealtimeLineChart; } });
+var RealtimeHistogram_1 = require("./realtime/RealtimeHistogram");
+Object.defineProperty(exports, "RealtimeTemporalHistogram", { enumerable: true, get: function () { return RealtimeHistogram_1.RealtimeTemporalHistogram; } });
+Object.defineProperty(exports, "RealtimeHistogram", { enumerable: true, get: function () { return RealtimeHistogram_1.RealtimeHistogram; } });
+var RealtimeSwarmChart_1 = require("./realtime/RealtimeSwarmChart");
+Object.defineProperty(exports, "RealtimeSwarmChart", { enumerable: true, get: function () { return RealtimeSwarmChart_1.RealtimeSwarmChart; } });
+var RealtimeWaterfallChart_1 = require("./realtime/RealtimeWaterfallChart");
+Object.defineProperty(exports, "RealtimeWaterfallChart", { enumerable: true, get: function () { return RealtimeWaterfallChart_1.RealtimeWaterfallChart; } });
+var RealtimeHeatmap_1 = require("./realtime/RealtimeHeatmap");
+Object.defineProperty(exports, "RealtimeHeatmap", { enumerable: true, get: function () { return RealtimeHeatmap_1.RealtimeHeatmap; } });
+// Shared hooks for building custom chart wrappers
+var hooks_1 = require("./shared/hooks");
+Object.defineProperty(exports, "useColorScale", { enumerable: true, get: function () { return hooks_1.useColorScale; } });
+Object.defineProperty(exports, "useSortedData", { enumerable: true, get: function () { return hooks_1.useSortedData; } });
+Object.defineProperty(exports, "DEFAULT_COLOR", { enumerable: true, get: function () { return hooks_1.DEFAULT_COLOR; } });
+// Color utilities (if users want to use them directly)
+var colorUtils_1 = require("./shared/colorUtils");
+Object.defineProperty(exports, "COLOR_SCHEMES", { enumerable: true, get: function () { return colorUtils_1.COLOR_SCHEMES; } });
+Object.defineProperty(exports, "DEFAULT_COLORS", { enumerable: true, get: function () { return colorUtils_1.DEFAULT_COLORS; } });
+Object.defineProperty(exports, "getColor", { enumerable: true, get: function () { return colorUtils_1.getColor; } });
+Object.defineProperty(exports, "createColorScale", { enumerable: true, get: function () { return colorUtils_1.createColorScale; } });
+Object.defineProperty(exports, "getSize", { enumerable: true, get: function () { return colorUtils_1.getSize; } });
+// Format utilities (if users want to use them directly)
+var formatUtils_1 = require("./shared/formatUtils");
+Object.defineProperty(exports, "formatNumber", { enumerable: true, get: function () { return formatUtils_1.formatNumber; } });
+Object.defineProperty(exports, "formatDate", { enumerable: true, get: function () { return formatUtils_1.formatDate; } });
+Object.defineProperty(exports, "formatAxis", { enumerable: true, get: function () { return formatUtils_1.formatAxis; } });
+Object.defineProperty(exports, "createTooltip", { enumerable: true, get: function () { return formatUtils_1.createTooltip; } });
+Object.defineProperty(exports, "formatLargeNumber", { enumerable: true, get: function () { return formatUtils_1.formatLargeNumber; } });
+Object.defineProperty(exports, "truncateText", { enumerable: true, get: function () { return formatUtils_1.truncateText; } });
+// Tooltip utilities
+var Tooltip_1 = require("../Tooltip/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+Object.defineProperty(exports, "MultiLineTooltip", { enumerable: true, get: function () { return Tooltip_1.MultiLineTooltip; } });
+Object.defineProperty(exports, "normalizeTooltip", { enumerable: true, get: function () { return Tooltip_1.normalizeTooltip; } });