semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,328 @@
+"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.default = InteractionLayer;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_brush_1 = require("d3-brush");
+const d3_selection_1 = require("d3-selection");
+// components
+const Brush_1 = __importDefault(require("./Brush"));
+const InteractionItems_1 = require("./processing/InteractionItems");
+const InteractionCanvas_1 = __importDefault(require("./interactionLayerBehavior/InteractionCanvas"));
+const TooltipStore_1 = require("./store/TooltipStore");
+const generateOMappingFn = (projectedColumns) => (d) => {
+    if (d) {
+        const columnValues = Object.values(projectedColumns);
+        const foundColumns = columnValues.filter((c) => {
+            return d[1] >= c.x && d[0] <= c.x + c.width;
+        });
+        return foundColumns;
+    }
+    return null;
+};
+const generateOEndMappingFn = (projectedColumns) => (d, event) => {
+    if (d &&
+        event.sourceEvent &&
+        event.sourceEvent.path &&
+        event.sourceEvent.path[1] &&
+        event.sourceEvent.path[1].classList.contains("xybrush") &&
+        event.target.move) {
+        const columnValues = Object.values(projectedColumns);
+        const foundColumns = columnValues.filter((c) => d[1] >= c.x && d[0] <= c.x + c.width);
+        const firstColumn = foundColumns[0] || {
+            x: 0,
+            width: 0
+        };
+        const lastColumn = foundColumns[foundColumns.length - 1] || {
+            x: 0,
+            width: 0
+        };
+        const columnPosition = [
+            firstColumn.x + Math.min(5, firstColumn.width / 10),
+            lastColumn.x + lastColumn.width - Math.min(5, lastColumn.width / 10)
+        ];
+        (0, d3_selection_1.select)(event.sourceEvent.path[1])
+            .transition(750)
+            .call(event.target.move, columnPosition);
+        return foundColumns;
+    }
+    return null;
+};
+const createBrush = (interaction, props) => {
+    let semioticBrush, mappingFn, selectedExtent, endMappingFn;
+    const { xScale, yScale, size, renderPipeline } = props;
+    const brushData = {};
+    Object.entries(renderPipeline).forEach(([key, value]) => {
+        if (value.data && value.data.length > 0) {
+            brushData[key] = value.data;
+        }
+    });
+    const { projection, projectedColumns } = interaction;
+    const actualBrush = interaction.brush === "oBrush"
+        ? projection === "horizontal"
+            ? "yBrush"
+            : "xBrush"
+        : interaction.brush;
+    let { extent } = interaction;
+    if (!extent) {
+        extent =
+            actualBrush === "xyBrush"
+                ? [
+                    [xScale.invert(0), yScale.invert(0)],
+                    [xScale.invert(size[0]), yScale.invert(size[1])]
+                ]
+                : actualBrush === "xBrush"
+                    ? [xScale.invert(0), xScale.invert(size[0])]
+                    : [yScale.invert(0), yScale.invert(size[1])];
+    }
+    if (extent.indexOf && extent.indexOf(undefined) !== -1) {
+        return React.createElement("g", null);
+    }
+    if (actualBrush === "xBrush") {
+        const castExtent = [...extent];
+        mappingFn = (d) => !d ? null : [xScale.invert(d[0]), xScale.invert(d[1])];
+        semioticBrush = (0, d3_brush_1.brushX)();
+        selectedExtent = castExtent.map((d) => xScale(d));
+        endMappingFn = mappingFn;
+    }
+    else if (actualBrush === "yBrush") {
+        const castExtent = [...extent];
+        mappingFn = (d) => !d
+            ? null
+            : [yScale.invert(d[0]), yScale.invert(d[1])].sort((a, b) => a - b);
+        semioticBrush = (0, d3_brush_1.brushY)();
+        selectedExtent = castExtent.map((d) => yScale(d)).sort((a, b) => a - b);
+        endMappingFn = mappingFn;
+    }
+    else {
+        const typedExtent = extent;
+        const castExtent = [...typedExtent.map((ee) => [...ee])];
+        if (castExtent.indexOf(undefined) !== -1 ||
+            castExtent[0].indexOf(undefined) !== -1 ||
+            castExtent[1].indexOf(undefined) !== -1) {
+            return React.createElement("g", null);
+        }
+        semioticBrush = (0, d3_brush_1.brush)();
+        mappingFn = (d) => {
+            if (!d)
+                return null;
+            const yValues = [yScale.invert(d[0][1]), yScale.invert(d[1][1])].sort((a, b) => a - b);
+            return [
+                [xScale.invert(d[0][0]), yValues[0]],
+                [xScale.invert(d[1][0]), yValues[1]]
+            ];
+        };
+        const yValues = [yScale(extent[0][1]), yScale(extent[1][1])].sort((a, b) => a - b);
+        selectedExtent = castExtent.map((d, i) => [xScale(d[0]), yValues[i]]);
+        endMappingFn = mappingFn;
+    }
+    if (interaction.brush === "oBrush") {
+        selectedExtent = null;
+        if (interaction.extent) {
+            const [leftExtent, rightExtent] = interaction.extent;
+            if ((typeof leftExtent === "string" || typeof leftExtent === "number") &&
+                (typeof rightExtent === "string" || typeof rightExtent === "number")) {
+                selectedExtent = [
+                    projectedColumns[leftExtent].x,
+                    projectedColumns[rightExtent].x + projectedColumns[rightExtent].width
+                ];
+            }
+        }
+        mappingFn = generateOMappingFn(projectedColumns);
+        endMappingFn = generateOEndMappingFn(projectedColumns);
+    }
+    semioticBrush
+        .extent([
+        [0, 0],
+        [size[0], size[1]]
+    ])
+        .on("start", (event) => {
+        (0, InteractionItems_1.brushStart)(mappingFn(event.selection), undefined, brushData, undefined, interaction);
+    })
+        .on("brush", (event) => {
+        (0, InteractionItems_1.brushing)(mappingFn(event.selection), undefined, brushData, undefined, interaction);
+    })
+        .on("end", (event) => {
+        (0, InteractionItems_1.brushEnd)(endMappingFn(event.selection, event), undefined, brushData, undefined, interaction);
+    });
+    return (React.createElement("g", { className: "brush" },
+        React.createElement(Brush_1.default, { selectedExtent: selectedExtent, extent: extent, svgBrush: semioticBrush })));
+};
+const createColumnsBrush = (interaction, props) => {
+    const { projection, rScale, oColumns, renderPipeline } = props;
+    if (!projection || !rScale || !oColumns)
+        return;
+    const brushData = {};
+    Object.entries(renderPipeline).forEach(([key, value]) => {
+        if (value.data && value.data.length > 0) {
+            brushData[key] = value.data;
+        }
+    });
+    let semioticBrush, mappingFn;
+    const rScaleReverse = rScale
+        .copy()
+        .domain(rScale.domain())
+        .range(rScale.domain().reverse());
+    if (projection && projection === "horizontal") {
+        mappingFn = (d) => !d ? null : [rScale.invert(d[0]), rScale.invert(d[1])];
+    }
+    else
+        mappingFn = (d) => {
+            return !d
+                ? null
+                : [
+                    rScaleReverse(rScale.invert(d[1])),
+                    rScaleReverse(rScale.invert(d[0]))
+                ];
+        };
+    const rRange = rScale.range();
+    const columnHash = oColumns;
+    let brushPosition, selectedExtent;
+    const brushes = Object.keys(columnHash).map((c) => {
+        if (projection && projection === "horizontal") {
+            selectedExtent = interaction.extent[c]
+                ? interaction.extent[c].map((d) => rScale(d))
+                : interaction.startEmpty
+                    ? null
+                    : rRange;
+            brushPosition = [0, columnHash[c].x];
+            semioticBrush = (0, d3_brush_1.brushX)();
+            semioticBrush
+                .extent([
+                [rRange[0], 0],
+                [rRange[1], columnHash[c].width]
+            ])
+                .on("start", (event) => {
+                (0, InteractionItems_1.brushStart)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            })
+                .on("brush", (event) => {
+                (0, InteractionItems_1.brushing)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            })
+                .on("end", (event) => {
+                (0, InteractionItems_1.brushEnd)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            });
+        }
+        else {
+            selectedExtent = interaction.extent[c]
+                ? interaction.extent[c].map((d) => rRange[1] - rScale(d)).reverse()
+                : interaction.startEmpty
+                    ? null
+                    : rRange;
+            brushPosition = [columnHash[c].x, 0];
+            semioticBrush = (0, d3_brush_1.brushY)();
+            semioticBrush
+                .extent([
+                [0, rRange[0]],
+                [columnHash[c].width, rRange[1]]
+            ])
+                .on("start", (event) => {
+                (0, InteractionItems_1.brushStart)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            })
+                .on("brush", (event) => {
+                (0, InteractionItems_1.brushing)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            })
+                .on("end", (event) => {
+                (0, InteractionItems_1.brushEnd)(mappingFn(event.selection), c, brushData, columnHash[c], interaction);
+            });
+        }
+        return (React.createElement("g", { key: `column-brush-${c}`, className: "brush" },
+            React.createElement(Brush_1.default, { key: `orbrush${c}`, selectedExtent: selectedExtent, svgBrush: semioticBrush, position: brushPosition })));
+    });
+    return brushes;
+};
+function InteractionLayer(props) {
+    let semioticBrush = null;
+    const { interaction, svgSize = [500, 500], margin = { left: 0, right: 0, top: 0, bottom: 0 }, overlay, points, xScale, yScale, hoverAnnotation, customClickBehavior, customDoubleClickBehavior, customHoverBehavior, disableCanvasInteraction, canvasRendering
+    //    voronoiHover
+     } = props;
+    let { enabled } = props;
+    let changeTooltip = (0, TooltipStore_1.useTooltip)((state) => state.changeTooltip);
+    const voronoiHover = (d) => {
+        changeTooltip(d);
+    };
+    const [overlayRegions, changeOverlayRegions] = (0, react_1.useState)([]);
+    const [interactionCanvas, changeInteractionCanvas] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let nextOverlay, interactionCanvas;
+        if (disableCanvasInteraction || !overlayRegions) {
+            nextOverlay = null;
+            interactionCanvas = null;
+        }
+        else {
+            nextOverlay = (0, InteractionItems_1.calculateOverlay)(props, voronoiHover);
+            if (canvasRendering) {
+                interactionCanvas = (React.createElement(InteractionCanvas_1.default, { height: svgSize[1], width: svgSize[0], overlayRegions: nextOverlay, margin: margin, voronoiHover: voronoiHover }));
+            }
+        }
+        changeOverlayRegions(nextOverlay);
+        changeInteractionCanvas(interactionCanvas);
+    }, [
+        overlay,
+        points,
+        xScale,
+        yScale,
+        !!hoverAnnotation,
+        !!customClickBehavior,
+        !!customDoubleClickBehavior,
+        !!customHoverBehavior
+    ]);
+    if (interaction && interaction.brush) {
+        enabled = true;
+        semioticBrush = createBrush(interaction, props);
+    }
+    if (interaction && interaction.columnsBrush) {
+        enabled = true;
+        semioticBrush = createColumnsBrush(interaction, props);
+    }
+    if (!overlayRegions && !semioticBrush) {
+        return null;
+    }
+    return (React.createElement("div", { className: "interaction-layer", "data-testid": "interaction-layer", style: {
+            position: "absolute",
+            background: "none",
+            pointerEvents: "none",
+            height: "100%",
+            width: "100%",
+            overflow: "hidden"
+        } }, interactionCanvas || (React.createElement("svg", { height: svgSize[1], width: svgSize[0], style: { background: "none", pointerEvents: "none" } },
+        React.createElement("g", { className: "interaction-overlay", transform: `translate(${margin.left},${margin.top})`, style: { pointerEvents: enabled ? "all" : "none" } },
+            React.createElement("g", { className: "interaction-regions" }, overlayRegions),
+            semioticBrush)))));
+}

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

@@ -0,0 +1,140 @@
+"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.default = Legend;
+const React = __importStar(require("react"));
+const typeHash = {
+    fill: (style) => React.createElement("rect", { style: style, width: 20, height: 20 }),
+    line: (style) => React.createElement("line", { style: style, x1: 0, y1: 0, x2: 20, y2: 20 })
+};
+function renderType(item, i, type, styleFn) {
+    let renderedType;
+    if (typeof type === "function") {
+        renderedType = type(item);
+    }
+    else {
+        const Type = typeHash[type];
+        const style = styleFn(item, i);
+        renderedType = Type(style);
+    }
+    return renderedType;
+}
+const renderLegendGroupVertical = (legendGroup, customClickBehavior) => {
+    const { type = "fill", styleFn, items } = legendGroup;
+    const renderedItems = [];
+    let itemOffset = 0;
+    items.forEach((item, i) => {
+        const renderedType = renderType(item, i, type, styleFn);
+        renderedItems.push(React.createElement("g", { key: `legend-item-${i}`, transform: `translate(0,${itemOffset})`, onClick: customClickBehavior ? () => customClickBehavior(item) : undefined, style: {
+                cursor: customClickBehavior ? "pointer" : "default"
+            } },
+            renderedType,
+            React.createElement("text", { y: 15, x: 30 }, item.label)));
+        itemOffset += 25;
+    });
+    return renderedItems;
+};
+const renderLegendGroupHorizontal = (legendGroup, customClickBehavior) => {
+    const { type = "fill", styleFn, items } = legendGroup;
+    const renderedItems = [];
+    let itemOffset = 0;
+    items.forEach((item, i) => {
+        const renderedType = renderType(item, i, type, styleFn);
+        renderedItems.push(React.createElement("g", { key: `legend-item-${i}`, transform: `translate(${itemOffset},0)`, onClick: customClickBehavior ? () => customClickBehavior(item) : undefined, style: {
+                cursor: customClickBehavior ? "pointer" : "default"
+            } },
+            renderedType,
+            React.createElement("text", { y: 15, x: 25 }, item.label)));
+        itemOffset += 35;
+        itemOffset += item.label.length * 8;
+    });
+    return { items: renderedItems, offset: itemOffset };
+};
+const renderVerticalGroup = ({ legendGroups, width, customClickBehavior }) => {
+    let offset = 30;
+    const renderedGroups = [];
+    legendGroups.forEach((l, i) => {
+        offset += 5;
+        renderedGroups.push(React.createElement("line", { key: `legend-top-line legend-symbol-${i}`, stroke: "gray", x1: 0, y1: offset, x2: width, y2: offset }));
+        offset += 10;
+        if (l.label) {
+            offset += 20;
+            renderedGroups.push(React.createElement("text", { key: `legend-text-${i}`, y: offset, className: "legend-group-label" }, l.label));
+            offset += 10;
+        }
+        renderedGroups.push(React.createElement("g", { key: `legend-group-${i}`, className: "legend-item", transform: `translate(0,${offset})` }, renderLegendGroupVertical(l, customClickBehavior)));
+        offset += l.items.length * 25 + 10;
+    });
+    return renderedGroups;
+};
+const renderHorizontalGroup = ({ legendGroups, title, height, customClickBehavior }) => {
+    let offset = 0;
+    const renderedGroups = [];
+    const verticalOffset = title === false ? 10 : 40;
+    legendGroups.forEach((l, i) => {
+        if (l.label) {
+            renderedGroups.push(React.createElement("text", { key: `legend-text-${i}`, transform: `translate(${offset},${verticalOffset}) rotate(90)`, textAnchor: "start", className: "legend-group-label" }, l.label));
+            offset += 20;
+        }
+        const renderedItems = renderLegendGroupHorizontal(l, customClickBehavior);
+        renderedGroups.push(React.createElement("g", { key: `legend-group-${i}`, className: "legend-item", transform: `translate(${offset},${verticalOffset})` }, renderedItems.items));
+        offset += renderedItems.offset + 5;
+        if (legendGroups[i + 1]) {
+            renderedGroups.push(React.createElement("line", { key: `legend-top-line legend-symbol-${i}`, stroke: "gray", x1: offset, y1: verticalOffset - 10, x2: offset, y2: height + verticalOffset + 10 }));
+        }
+        offset += 15;
+    });
+    return (React.createElement("g", null,
+        title !== false && (React.createElement("line", { x1: 0, x2: offset + 10, y1: verticalOffset - 10, y2: verticalOffset - 10, stroke: "gray", className: "title-neatline" })),
+        renderedGroups));
+};
+function Legend(props) {
+    const { legendGroups, customClickBehavior, title = "Legend", width = 100, height = 20, orientation = "vertical" } = props;
+    const renderedGroups = orientation === "vertical"
+        ? renderVerticalGroup({
+            legendGroups,
+            width,
+            customClickBehavior
+        })
+        : renderHorizontalGroup({
+            legendGroups,
+            title,
+            height,
+            customClickBehavior
+        });
+    return (React.createElement("g", null,
+        title !== undefined && (React.createElement("text", { className: "legend-title", y: 20, x: orientation === "horizontal" ? 0 : width / 2, textAnchor: orientation === "horizontal" ? "start" : "middle" }, title)),
+        renderedGroups));
+}

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

@@ -0,0 +1,75 @@
+"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 });
+const React = __importStar(require("react"));
+const XYFrame_1 = __importDefault(require("./XYFrame"));
+const MiniMap = (props) => {
+    const { brushStart, brush, brushEnd, xBrushable, yBrushable, yBrushExtent, xBrushExtent, ...rest } = props;
+    const interactivity = {
+        start: brushStart,
+        during: brush,
+        end: brushEnd
+    };
+    if (xBrushable && yBrushable) {
+        interactivity.brush = "xyBrush";
+        if (xBrushExtent || yBrushExtent) {
+            interactivity.extent = [[0, 0], [...props.size]];
+        }
+        if (xBrushExtent) {
+            interactivity.extent[0] = xBrushExtent;
+        }
+        if (yBrushExtent) {
+            interactivity.extent[1] = yBrushExtent;
+        }
+    }
+    else if (xBrushable) {
+        interactivity.brush = "xBrush";
+        if (xBrushExtent) {
+            interactivity.extent = xBrushExtent;
+        }
+    }
+    else if (yBrushable) {
+        interactivity.brush = "yBrush";
+        if (yBrushExtent) {
+            interactivity.extent = yBrushExtent;
+        }
+    }
+    return React.createElement(XYFrame_1.default, { ...rest, interaction: interactivity });
+};
+exports.default = MiniMap;

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

@@ -0,0 +1,99 @@
+"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.default = MinimapXYFrame;
+const React = __importStar(require("react"));
+// components
+const XYFrame_1 = __importDefault(require("./XYFrame"));
+const MiniMap_1 = __importDefault(require("./MiniMap"));
+const generateMinimap = (props) => {
+    const { xAccessor, yAccessor, points, lines, minimap, summaries, size, lineDataAccessor, lineType, lineStyle, summaryStyle, pointStyle, lineClass, summaryClass, pointClass, lineRenderMode, pointRenderMode, summaryRenderMode, canvasLines, canvasPoints, canvasSummaries, axes, margin, name, annotations, summaryType, interactionSettings } = props;
+    const miniDefaults = {
+        position: [0, 0],
+        size: [size[0], size[1] * 0.25],
+        xAccessor: xAccessor,
+        yAccessor: yAccessor,
+        points: points,
+        lines: lines,
+        summaries: summaries,
+        lineDataAccessor: lineDataAccessor,
+        xBrushable: true,
+        yBrushable: true,
+        brushStart: () => { },
+        brush: () => { },
+        brushEnd: () => { },
+        lineType: lineType,
+        lineStyle,
+        summaryStyle,
+        pointStyle,
+        lineClass,
+        summaryClass,
+        pointClass,
+        lineRenderMode,
+        pointRenderMode,
+        summaryRenderMode,
+        canvasLines,
+        canvasPoints,
+        canvasSummaries,
+        axes,
+        margin,
+        name,
+        annotations,
+        summaryType,
+        interactionSettings
+    };
+    const combinedOptions = {
+        ...miniDefaults,
+        ...minimap,
+        hoverAnnotation: false
+    };
+    return React.createElement(MiniMap_1.default, { ...combinedOptions });
+};
+function MinimapXYFrame(props) {
+    const miniMap = generateMinimap(props);
+    const options = {};
+    const { minimap, renderBefore, ...rest } = props;
+    if (renderBefore) {
+        options.beforeElements = miniMap;
+    }
+    else {
+        options.afterElements = miniMap;
+    }
+    return React.createElement(XYFrame_1.default, { ...rest, ...options });
+}