semiotic 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,369 +0,0 @@
-"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 = AnnotationLayer;
-// modules
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const annotationHandling_1 = require("./../annotationLayerBehavior/annotationHandling");
-const Legend_1 = __importDefault(require("./../Legend"));
-const Annotation_1 = __importDefault(require("./../Annotation"));
-const labella_1 = __importDefault(require("labella"));
-const TooltipStore_1 = require("./../store/TooltipStore");
-const helpers_1 = require("./helpers");
-const processAnnotations = (adjustableAnnotations, annotationProcessor, props) => {
-    const { layout = { type: false, noteHeight: undefined, noteWidth: undefined } } = annotationProcessor;
-    if (layout.type === false) {
-        return adjustableAnnotations;
-    }
-    const { noteWidth: layoutNoteHeight, noteHeight: layoutNoteWidth } = layout;
-    let { margin = { top: 0, bottom: 0, left: 0, right: 0 } } = props;
-    const { size, axes = [] } = props;
-    margin =
-        typeof margin === "number"
-            ? { top: margin, left: margin, right: margin, bottom: margin }
-            : margin;
-    if (layout.type === "bump") {
-        const adjustedAnnotations = (0, annotationHandling_1.bumpAnnotations)(adjustableAnnotations, layout, size, props.pointSizeFunction, props.labelSizeFunction);
-        return adjustedAnnotations;
-    }
-    else if (layout.type === "marginalia") {
-        const { marginOffset, orient = "nearest", characterWidth = 8, lineHeight = 20, padding = 2, axisMarginOverride = {} } = layout;
-        const finalOrientation = orient === "nearest"
-            ? ["left", "right", "top", "bottom"]
-            : Array.isArray(orient)
-                ? orient
-                : [orient];
-        const leftOn = finalOrientation.find((d) => d === "left");
-        const rightOn = finalOrientation.find((d) => d === "right");
-        const topOn = finalOrientation.find((d) => d === "top");
-        const bottomOn = finalOrientation.find((d) => d === "bottom");
-        const leftNodes = [];
-        const rightNodes = [];
-        const topNodes = [];
-        const bottomNodes = [];
-        for (const aNote of adjustableAnnotations) {
-            const noteData = aNote.props.noteData;
-            const noteX = noteData.x[0] || noteData.x;
-            const noteY = noteData.y[0] || noteData.y;
-            const leftDist = leftOn ? noteX : Infinity;
-            const rightDist = rightOn ? size[0] - noteX : Infinity;
-            const topDist = topOn ? noteY : Infinity;
-            const bottomDist = bottomOn ? size[1] - noteY : Infinity;
-            const minDist = Math.min(leftDist, rightDist, topDist, bottomDist);
-            if (leftDist === minDist) {
-                leftNodes.push(aNote);
-            }
-            else if (rightDist === minDist) {
-                rightNodes.push(aNote);
-            }
-            else if (topDist === minDist) {
-                topNodes.push(aNote);
-            }
-            else {
-                bottomNodes.push(aNote);
-            }
-        }
-        //Adjust the margins based on which regions are active
-        const leftForce = new labella_1.default.Force({
-            minPos: axisMarginOverride.top !== undefined
-                ? 0 + axisMarginOverride.top
-                : 0 - margin.top,
-            maxPos: axisMarginOverride.bottom !== undefined
-                ? size[1] - axisMarginOverride.bottom
-                : bottomOn
-                    ? size[1]
-                    : size[1] + margin.bottom
-        })
-            .nodes(leftNodes.map((d) => {
-            const noteY = d.props.noteData.y[0] || d.props.noteData.y;
-            return new labella_1.default.Node(noteY, (0, helpers_1.noteDataHeight)(d.props.noteData, characterWidth, lineHeight, layoutNoteHeight) + padding);
-        }))
-            .compute();
-        const rightForce = new labella_1.default.Force({
-            minPos: axisMarginOverride.top !== undefined
-                ? 0 + axisMarginOverride.top
-                : topOn
-                    ? 0
-                    : 0 - margin.top,
-            maxPos: axisMarginOverride.bottom !== undefined
-                ? size[1] - axisMarginOverride.bottom
-                : size[1] + margin.bottom
-        })
-            .nodes(rightNodes.map((d) => {
-            const noteY = d.props.noteData.y[0] || d.props.noteData.y;
-            return new labella_1.default.Node(noteY, (0, helpers_1.noteDataHeight)(d.props.noteData, characterWidth, lineHeight, layoutNoteHeight) + padding);
-        }))
-            .compute();
-        const topForce = new labella_1.default.Force({
-            minPos: axisMarginOverride.left !== undefined
-                ? 0 + axisMarginOverride.left
-                : leftOn
-                    ? 0
-                    : 0 - margin.left,
-            maxPos: axisMarginOverride.right !== undefined
-                ? size[0] - axisMarginOverride.right
-                : size[0] + margin.right
-        })
-            .nodes(topNodes.map((d) => {
-            const noteX = d.props.noteData.x[0] || d.props.noteData.x;
-            return new labella_1.default.Node(noteX, (0, helpers_1.noteDataWidth)(d.props.noteData, characterWidth, layoutNoteWidth) +
-                padding);
-        }))
-            .compute();
-        const bottomForce = new labella_1.default.Force({
-            minPos: axisMarginOverride.left !== undefined
-                ? 0 + axisMarginOverride.left
-                : 0 - margin.left,
-            maxPos: axisMarginOverride.right !== undefined
-                ? size[0] - axisMarginOverride.right
-                : rightOn
-                    ? size[0]
-                    : size[0] + margin.right
-        })
-            .nodes(bottomNodes.map((d) => {
-            const noteX = d.props.noteData.x[0] || d.props.noteData.x;
-            return new labella_1.default.Node(noteX, (0, helpers_1.noteDataWidth)(d.props.noteData, characterWidth, layoutNoteWidth) +
-                padding);
-        }))
-            .compute();
-        const bottomOffset = Math.max(...bottomNodes.map((d) => (0, helpers_1.noteDataHeight)(d.props.noteData, characterWidth, lineHeight, layoutNoteHeight) + padding));
-        const topOffset = Math.max(...topNodes.map((d) => (0, helpers_1.noteDataHeight)(d.props.noteData, characterWidth, lineHeight, layoutNoteHeight) + padding));
-        const leftOffset = Math.max(...leftNodes.map((d) => (0, helpers_1.noteDataWidth)(d.props.noteData, characterWidth, layoutNoteWidth) +
-            padding));
-        const rightOffset = Math.max(...rightNodes.map((d) => (0, helpers_1.noteDataWidth)(d.props.noteData, characterWidth, layoutNoteWidth) +
-            padding));
-        //      const nodeOffsetHeight = Math.max()
-        const leftSortedNodes = leftForce.nodes();
-        const rightSortedNodes = rightForce.nodes();
-        const topSortedNodes = topForce.nodes();
-        const bottomSortedNodes = bottomForce.nodes();
-        leftNodes.forEach((note, i) => {
-            const x = 0 -
-                leftSortedNodes[i].layerIndex * leftOffset -
-                (0, helpers_1.marginOffsetFn)("left", axes, marginOffset);
-            const y = leftSortedNodes[i].currentPos;
-            note.props.noteData.nx = x;
-            note.props.noteData.ny = y;
-            if (note.props.noteData.note && !React.isValidElement(note)) {
-                note.props.noteData.note.orientation =
-                    note.props.noteData.note.orientation || "leftRight";
-                note.props.noteData.note.align =
-                    note.props.noteData.note.align || "right";
-            }
-        });
-        rightNodes.forEach((note, i) => {
-            const x = size[0] +
-                rightSortedNodes[i].layerIndex * rightOffset +
-                (0, helpers_1.marginOffsetFn)("right", axes, marginOffset);
-            const y = rightSortedNodes[i].currentPos;
-            note.props.noteData.nx = x;
-            note.props.noteData.ny = y;
-            if (note.props.noteData.note && !React.isValidElement(note)) {
-                note.props.noteData.note.orientation =
-                    note.props.noteData.note.orientation || "leftRight";
-                note.props.noteData.note.align =
-                    note.props.noteData.note.align || "left";
-            }
-        });
-        topNodes.forEach((note, i) => {
-            const x = topSortedNodes[i].currentPos;
-            const y = 0 -
-                topSortedNodes[i].layerIndex * topOffset -
-                (0, helpers_1.marginOffsetFn)("top", axes, marginOffset);
-            note.props.noteData.nx = x;
-            note.props.noteData.ny = y;
-        });
-        bottomNodes.forEach((note, i) => {
-            const x = bottomSortedNodes[i].currentPos;
-            const y = size[1] +
-                bottomSortedNodes[i].layerIndex * bottomOffset +
-                (0, helpers_1.marginOffsetFn)("bottom", axes, marginOffset);
-            note.props.noteData.nx = x;
-            note.props.noteData.ny = y;
-        });
-        return adjustableAnnotations;
-    }
-    return adjustableAnnotations;
-};
-const generateSVGAnnotations = (props, annotations) => {
-    const renderedAnnotations = annotations
-        .map((d, i) => props.svgAnnotationRule(d, i, props))
-        .filter((d) => d !== null && d !== undefined);
-    return renderedAnnotations;
-};
-const generateHTMLAnnotations = (props, annotations) => {
-    const renderedAnnotations = annotations
-        .map((d, i) => props.htmlAnnotationRule(d, i, props))
-        .filter((d) => d !== null && d !== undefined);
-    return renderedAnnotations;
-};
-const createAnnotations = (props, state) => {
-    let adjustedAnnotations = state.adjustedAnnotations, adjustableAnnotationsKey = state.adjustedAnnotationsKey, adjustableAnnotations = state.adjustableAnnotations, fixedAnnotations = state.fixedAnnotations;
-    let renderedSVGAnnotations = [];
-    let renderedHTMLAnnotations = [];
-    const adjustedAnnotationsKey = state.adjustedAnnotationsKey, adjustedAnnotationsDataVersion = state.adjustedAnnotationsDataVersion;
-    const { annotations, annotationHandling = false, size, svgAnnotationRule, htmlAnnotationRule } = props;
-    const annotationProcessor = typeof annotationHandling === "object"
-        ? annotationHandling
-        : { layout: { type: annotationHandling }, dataVersion: "" };
-    const { dataVersion = "" } = annotationProcessor;
-    if (svgAnnotationRule) {
-        const initialSVGAnnotations = generateSVGAnnotations(props, annotations);
-        adjustableAnnotationsKey = (0, helpers_1.keyFromSVGAnnotations)(initialSVGAnnotations, annotationProcessor, size);
-        if (annotationHandling === false) {
-            adjustedAnnotations = adjustableAnnotations;
-        }
-        if (adjustedAnnotations.length !== adjustableAnnotations.length ||
-            adjustedAnnotationsKey !== adjustableAnnotationsKey ||
-            adjustedAnnotationsDataVersion !== dataVersion) {
-            adjustedAnnotations = processAnnotations(adjustableAnnotations, annotationProcessor, props);
-        }
-        else {
-            //Handle when style or other attributes change
-            adjustedAnnotations = adjustableAnnotations.map((d, i) => {
-                const oldAnnotation = adjustedAnnotations[i];
-                const newNoteData = {
-                    ...oldAnnotation.props.noteData,
-                    ...d.props.noteData
-                };
-                return React.createElement(Annotation_1.default, { key: d.key, noteData: newNoteData });
-            });
-        }
-        renderedSVGAnnotations = [...adjustedAnnotations, ...fixedAnnotations];
-    }
-    if (htmlAnnotationRule) {
-        renderedHTMLAnnotations = generateHTMLAnnotations(props, annotations);
-    }
-    return {
-        svgAnnotations: renderedSVGAnnotations,
-        htmlAnnotations: renderedHTMLAnnotations,
-        adjustedAnnotations: adjustedAnnotations,
-        adjustedAnnotationsKey: adjustableAnnotationsKey,
-        adjustedAnnotationsDataVersion: dataVersion
-    };
-};
-function AnnotationLayer(props) {
-    const { legendSettings, margin, size, annotations: baseAnnotations, annotationHandling } = props;
-    const tooltip = (0, TooltipStore_1.useTooltip)((store) => {
-        return store.tooltip;
-    });
-    let annotations = tooltip != null ? baseAnnotations.concat(tooltip) : baseAnnotations;
-    let changeTooltip = (0, TooltipStore_1.useTooltip)((state) => state.changeTooltip);
-    const voronoiHover = (d) => {
-        changeTooltip(d);
-    };
-    const updatedAnnotationProps = {
-        ...props,
-        annotations,
-        voronoiHover
-    };
-    const annotationProcessor = typeof annotationHandling === "object"
-        ? annotationHandling
-        : { layout: { type: annotationHandling }, dataVersion: "" };
-    const { dataVersion = "" } = annotationProcessor;
-    const [adjustedAnnotations, changeAdjustedAnnotations] = (0, react_1.useState)([]);
-    const [svgAnnotations, changeSVGAnnotations] = (0, react_1.useState)([]);
-    const [htmlAnnotations, changeHTMLAnnotations] = (0, react_1.useState)([]);
-    const [adjustedAnnotationsKey, changeAdjustedAnnotationsKey] = (0, react_1.useState)("");
-    const [adjustedAnnotationsDataVersion, changeAdjustedAnnotationsDataVersion] = (0, react_1.useState)(dataVersion);
-    const initialSVGAnnotations = generateSVGAnnotations(updatedAnnotationProps, annotations);
-    const adjustableAnnotations = initialSVGAnnotations.filter((d) => d.props && d.props.noteData && !d.props.noteData.fixedPosition);
-    const updatedAnnotationsKey = (0, helpers_1.keyFromSVGAnnotations)(adjustableAnnotations, annotationProcessor, size);
-    (0, react_1.useEffect)(() => {
-        const fixedAnnotations = initialSVGAnnotations.filter((d) => !d.props || !d.props.noteData || d.props.noteData.fixedPosition);
-        const updatedState = createAnnotations(updatedAnnotationProps, {
-            adjustedAnnotations,
-            adjustedAnnotationsKey,
-            adjustedAnnotationsDataVersion,
-            adjustableAnnotations,
-            fixedAnnotations
-        });
-        changeAdjustedAnnotations(updatedState.adjustedAnnotations);
-        changeAdjustedAnnotationsKey(updatedState.adjustedAnnotationsKey);
-        changeAdjustedAnnotationsDataVersion(updatedState.adjustedAnnotationsDataVersion);
-        changeSVGAnnotations(updatedState.svgAnnotations);
-        changeHTMLAnnotations(updatedState.htmlAnnotations);
-    }, [
-        updatedAnnotationsKey,
-        dataVersion,
-        annotations.length,
-        annotations.map((a) => (0, helpers_1.safeStringify)(a)).join("-")
-    ]);
-    let renderedLegend;
-    if (legendSettings) {
-        const positionHash = {
-            left: [15, 15],
-            right: [size[0] + 15, 15]
-        };
-        const { position = "right", title = "Legend" } = legendSettings;
-        const legendPosition = positionHash[position];
-        renderedLegend = (React.createElement("g", { transform: `translate(${legendPosition.join(",")})` },
-            React.createElement(Legend_1.default, { ...legendSettings, title: title, position: position })));
-    }
-    // If there are no annotations but we have a legend, render just the legend
-    if (annotations.length === 0 && !legendSettings) {
-        return null;
-    }
-    return (React.createElement("div", { className: "annotation-layer", style: {
-            position: "absolute",
-            pointerEvents: "none",
-            background: "none"
-        } },
-        React.createElement("svg", { className: "annotation-layer-svg", height: size[1], width: size[0], style: {
-                background: "none",
-                pointerEvents: "none",
-                position: "absolute",
-                left: `${margin.left}px`,
-                top: `${margin.top}px`,
-                overflow: "visible"
-            } },
-            React.createElement("g", null,
-                renderedLegend,
-                svgAnnotations)),
-        React.createElement("div", { className: "annotation-layer-html", style: {
-                background: "none",
-                pointerEvents: "none",
-                position: "absolute",
-                height: `${size[1]}px`,
-                width: `${size[0]}px`,
-                left: `${margin.left}px`,
-                top: `${margin.top}px`
-            } }, htmlAnnotations)));
-}