semiotic 2.0.3 → 3.0.0-beta.1

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

@@ -0,0 +1,369 @@
+"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)));
+}