semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,524 @@
+"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.XYFrameInner = XYFrameInner;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_scale_1 = require("d3-scale");
+// components
+const Frame_1 = __importDefault(require("./Frame"));
+const TooltipPositioner_1 = __importDefault(require("./TooltipPositioner"));
+const xyframeRules_1 = require("./annotationRules/xyframeRules");
+const baseRules_1 = require("./annotationRules/baseRules");
+const lineDrawing_1 = require("./svg/lineDrawing");
+const frameFunctions_1 = require("./svg/frameFunctions");
+const coordinateNames_1 = require("./constants/coordinateNames");
+const unflowedFunctions_1 = require("./data/unflowedFunctions");
+const multiAccessorUtils_1 = require("./data/multiAccessorUtils");
+const xyDrawing_1 = require("./processing/xyDrawing");
+const xyPipelineCache_1 = require("./data/xyPipelineCache");
+const frame_props_1 = require("./constants/frame_props");
+const useDerivedStateFromProps_1 = require("./useDerivedStateFromProps");
+const useLegacyUnmountCallback_1 = require("./useLegacyUnmountCallback");
+let xyframeKey = "";
+const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+for (let i = 32; i > 0; --i)
+    xyframeKey += chars[Math.floor(Math.random() * chars.length)];
+const projectedCoordinateNames = {
+    y: coordinateNames_1.projectedY,
+    x: coordinateNames_1.projectedX,
+    yMiddle: coordinateNames_1.projectedYMiddle,
+    yTop: coordinateNames_1.projectedYTop,
+    yBottom: coordinateNames_1.projectedYBottom,
+    xMiddle: coordinateNames_1.projectedXMiddle,
+    xTop: coordinateNames_1.projectedXTop,
+    xBottom: coordinateNames_1.projectedXBottom
+};
+const defaultProps = {
+    annotations: [],
+    foregroundGraphics: undefined,
+    size: [500, 500],
+    className: "",
+    lineType: "line",
+    name: "xyframe",
+    dataVersion: undefined
+};
+function XYFrameInner(allProps) {
+    const props = { ...defaultProps, ...allProps };
+    const pipelineCacheRef = (0, react_1.useRef)((0, xyPipelineCache_1.createXYPipelineCache)());
+    const baseState = {
+        size: [500, 500],
+        dataVersion: undefined,
+        lineData: undefined,
+        pointData: undefined,
+        summaryData: undefined,
+        projectedLines: undefined,
+        projectedPoints: undefined,
+        projectedSummaries: undefined,
+        fullDataset: [],
+        adjustedPosition: [0, 0],
+        adjustedSize: [500, 500],
+        backgroundGraphics: null,
+        foregroundGraphics: null,
+        axesData: undefined,
+        axes: undefined,
+        axesTickLines: undefined,
+        renderNumber: 0,
+        margin: { top: 0, bottom: 0, left: 0, right: 0 },
+        calculatedXExtent: [0, 0],
+        calculatedYExtent: [0, 0],
+        xAccessor: [(d) => d.x],
+        yAccessor: [(d) => d.y],
+        xExtent: [0, 0],
+        yExtent: [0, 0],
+        areaAnnotations: [],
+        xScale: (0, d3_scale_1.scaleLinear)(),
+        yScale: (0, d3_scale_1.scaleLinear)(),
+        title: null,
+        legendSettings: undefined,
+        xyFrameRender: {},
+        canvasDrawing: [],
+        annotatedSettings: {
+            xAccessor: undefined,
+            yAccessor: undefined,
+            summaryDataAccessor: undefined,
+            lineDataAccessor: undefined,
+            renderKeyFn: undefined,
+            lineType: undefined,
+            summaryType: undefined,
+            lineIDAccessor: undefined,
+            summaries: undefined,
+            lines: undefined,
+            title: undefined,
+            xExtent: undefined,
+            yExtent: undefined
+        },
+        overlay: undefined,
+        props
+    };
+    const initialState = (0, react_1.useMemo)(() => ({
+        ...baseState,
+        ...(0, xyDrawing_1.calculateXYFrame)(props, baseState, true, pipelineCacheRef.current)
+    }), []);
+    const state = (0, useDerivedStateFromProps_1.useDerivedStateFromProps)((nextProps, prevState) => deriveXYFrameState(nextProps, prevState, pipelineCacheRef.current), props, initialState);
+    const { size, className, annotationSettings, annotations, additionalDefs, hoverAnnotation, interaction, customClickBehavior, customHoverBehavior, customDoubleClickBehavior, canvasPostProcess, canvasSummaries, canvasPoints, canvasLines, afterElements, beforeElements, renderOrder, matte, frameKey, showLinePoints, sketchyRenderingEngine, disableContext, frameRenderOrder, disableCanvasInteraction, interactionSettings, disableProgressiveRendering, transition } = props;
+    const { backgroundGraphics, foregroundGraphics, adjustedPosition, adjustedSize, margin, axes, axesTickLines, xScale, yScale, fullDataset, dataVersion, areaAnnotations, legendSettings, xyFrameRender, annotatedSettings, overlay } = state;
+    (0, useLegacyUnmountCallback_1.useLegacyUnmountCallback)(props, state);
+    const propsRef = (0, react_1.useRef)(props);
+    propsRef.current = props;
+    const stateRef = (0, react_1.useRef)(state);
+    stateRef.current = state;
+    const defaultSVGRuleCb = (0, react_1.useCallback)((args) => defaultXYSVGRule(propsRef.current, stateRef.current, args), []);
+    const defaultHTMLRuleCb = (0, react_1.useCallback)((args) => defaultXYHTMLRule(propsRef.current, stateRef.current, args), []);
+    // Memoize merged annotations to prevent unnecessary array creation
+    const mergedAnnotations = (0, react_1.useMemo)(() => areaAnnotations.length > 0
+        ? [...annotations, ...areaAnnotations]
+        : annotations, [annotations, areaAnnotations]);
+    // Memoize showLinePoints conversion
+    const showLinePointsValue = (0, react_1.useMemo)(() => (typeof showLinePoints === "string" ? showLinePoints : undefined), [showLinePoints]);
+    // Memoize canvas rendering flag
+    const canvasRendering = (0, react_1.useMemo)(() => !!(canvasSummaries || canvasPoints || canvasLines), [canvasSummaries, canvasPoints, canvasLines]);
+    return (React.createElement(Frame_1.default, { name: "xyframe", renderPipeline: xyFrameRender, adjustedPosition: adjustedPosition, size: size, projectedCoordinateNames: projectedCoordinateNames, xScale: xScale, yScale: yScale, axes: axes, axesTickLines: axesTickLines, title: annotatedSettings.title, dataVersion: dataVersion, matte: matte, className: className, adjustedSize: adjustedSize, frameKey: frameKey || xyframeKey, additionalDefs: additionalDefs, hoverAnnotation: hoverAnnotation, defaultSVGRule: defaultSVGRuleCb, defaultHTMLRule: defaultHTMLRuleCb, annotations: mergedAnnotations, annotationSettings: annotationSettings, legendSettings: legendSettings, projectedYMiddle: coordinateNames_1.projectedYMiddle, interaction: interaction, customClickBehavior: customClickBehavior, customHoverBehavior: customHoverBehavior, customDoubleClickBehavior: customDoubleClickBehavior, points: fullDataset, showLinePoints: showLinePointsValue, margin: margin, backgroundGraphics: backgroundGraphics, foregroundGraphics: foregroundGraphics, beforeElements: beforeElements, afterElements: afterElements, disableContext: disableContext, canvasPostProcess: canvasPostProcess, canvasRendering: canvasRendering, renderOrder: renderOrder, overlay: overlay, sketchyRenderingEngine: sketchyRenderingEngine, frameRenderOrder: frameRenderOrder, disableCanvasInteraction: disableCanvasInteraction, interactionSettings: interactionSettings, disableProgressiveRendering: disableProgressiveRendering, transition: transition }));
+}
+function deriveXYFrameState(nextProps, prevState, cache) {
+    const { props } = prevState;
+    const { xExtent: oldXExtent = [], yExtent: oldYExtent = [], size: oldSize, dataVersion: oldDataVersion, lineData, summaryData, pointData } = prevState;
+    const { xExtent: baseNewXExtent, yExtent: baseNewYExtent, size: newSize, dataVersion: newDataVersion, lines: newLines, summaries: newSummaries, points: newPoints } = nextProps;
+    const newXExtent = (0, unflowedFunctions_1.extentValue)(baseNewXExtent);
+    const newYExtent = (0, unflowedFunctions_1.extentValue)(baseNewYExtent);
+    const extentChange = (oldXExtent[0] !== newXExtent[0] && newXExtent[0] !== undefined) ||
+        (oldYExtent[0] !== newYExtent[0] && newYExtent[0] !== undefined) ||
+        (oldXExtent[1] !== newXExtent[1] && newXExtent[1] !== undefined) ||
+        (oldYExtent[1] !== newYExtent[1] && newYExtent[1] !== undefined);
+    const lineChange = lineData !== newLines;
+    const summaryChange = summaryData !== newSummaries;
+    const pointChange = pointData !== newPoints;
+    // Check which category of props changed
+    const dataPropsChanged = !oldDataVersion && frame_props_1.xyFrameDataAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const scalePropsChanged = !oldDataVersion && frame_props_1.xyFrameScaleAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const sizeChanged = oldSize[0] !== newSize[0] || oldSize[1] !== newSize[1];
+    // Force full recalc if dataVersion changed or no fullDataset exists
+    if ((oldDataVersion && oldDataVersion !== newDataVersion) ||
+        !prevState.fullDataset) {
+        return (0, xyDrawing_1.calculateXYFrame)(nextProps, prevState, true, cache);
+    }
+    // Full data recalculation needed if:
+    // - Data arrays changed (lines, points, summaries)
+    // - Extent overrides changed
+    // - Data-affecting props changed (accessors, types, etc.)
+    if (lineChange ||
+        summaryChange ||
+        pointChange ||
+        extentChange ||
+        dataPropsChanged) {
+        return (0, xyDrawing_1.calculateXYFrame)(nextProps, prevState, true, cache);
+    }
+    // Scale-only recalculation needed if:
+    // - Size changed
+    // - Scale-affecting props changed (but not data props)
+    if (sizeChanged || scalePropsChanged) {
+        // TODO: Once calculateXYFrame supports updateScales flag, use:
+        // return calculateXYFrame(nextProps, prevState, { updateData: false, updateScales: true })
+        // For now, still do full recalc to avoid breaking changes
+        return (0, xyDrawing_1.calculateXYFrame)(nextProps, prevState, false, cache);
+    }
+    // Only styling changed - no recalc needed, React will re-render with existing state
+    return null;
+}
+const annotationTypeStrings = new Set([
+    "label", "callout", "callout-circle", "callout-rect",
+    "callout-custom", "xy-threshold", "bracket"
+]);
+function defaultXYSVGRule(props, state, { d: baseD, i, lines, summaries, points, annotationLayer }) {
+    const { showLinePoints, defined, margin: baseMargin, size, svgAnnotationRules } = props;
+    const { xyFrameRender, xScale, yScale, xAccessor, yAccessor, axesData, annotatedSettings } = state;
+    let screenCoordinates = [];
+    const idAccessor = annotatedSettings.lineIDAccessor;
+    if (baseD.type === "highlight") {
+        return (0, xyframeRules_1.svgHighlight)({
+            d: baseD,
+            i,
+            idAccessor,
+            lines,
+            summaries,
+            points,
+            xScale,
+            yScale,
+            xyFrameRender,
+            defined
+        });
+    }
+    const d = baseD.coordinates
+        ? baseD
+        : (0, lineDrawing_1.findPointByID)({
+            point: baseD,
+            idAccessor,
+            lines,
+            xScale,
+            projectedX: coordinateNames_1.projectedX,
+            xAccessor
+        });
+    if (!d)
+        return null;
+    const margin = (0, frameFunctions_1.calculateMargin)({
+        margin: baseMargin,
+        axes: axesData,
+        title: annotatedSettings.title,
+        size: size
+    });
+    const { adjustedPosition, adjustedSize } = (0, frameFunctions_1.adjustedPositionSize)({
+        size: size,
+        margin
+    });
+    if (!d.coordinates && !d.bounds) {
+        screenCoordinates = [
+            (0, lineDrawing_1.relativeX)({
+                point: d,
+                projectedXMiddle: coordinateNames_1.projectedXMiddle,
+                projectedX: coordinateNames_1.projectedX,
+                xAccessor,
+                xScale
+            }) || 0,
+            (0, lineDrawing_1.relativeY)({
+                point: d,
+                projectedYMiddle: coordinateNames_1.projectedYMiddle,
+                projectedY: coordinateNames_1.projectedY,
+                yAccessor,
+                yScale,
+                showLinePoints
+            }) || 0
+        ];
+    }
+    else if (!d.bounds) {
+        screenCoordinates = d.coordinates.reduce((coords, p) => {
+            const xCoordinate = (0, lineDrawing_1.relativeX)({
+                point: p,
+                projectedXMiddle: coordinateNames_1.projectedXMiddle,
+                projectedX: coordinateNames_1.projectedX,
+                xAccessor,
+                xScale
+            });
+            const yCoordinate = (0, lineDrawing_1.relativeY)({
+                point: p,
+                projectedYMiddle: coordinateNames_1.projectedYMiddle,
+                projectedY: coordinateNames_1.projectedY,
+                yAccessor,
+                yScale
+            });
+            if (Array.isArray(yCoordinate)) {
+                return [
+                    ...coords,
+                    [xCoordinate, Math.min(...yCoordinate)],
+                    [xCoordinate, Math.max(...yCoordinate)]
+                ];
+            }
+            else if (Array.isArray(xCoordinate)) {
+                return [
+                    ...coords,
+                    [Math.min(...xCoordinate), yCoordinate],
+                    [Math.max(...xCoordinate), yCoordinate]
+                ];
+            }
+            else {
+                return [...coords, [xCoordinate, yCoordinate]];
+            }
+        }, []);
+    }
+    const { voronoiHover } = annotationLayer;
+    const customSVG = svgAnnotationRules &&
+        svgAnnotationRules({
+            d,
+            i,
+            screenCoordinates,
+            xScale,
+            yScale,
+            xAccessor,
+            yAccessor,
+            xyFrameProps: props,
+            xyFrameState: state,
+            summaries,
+            points,
+            lines,
+            voronoiHover,
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer
+        });
+    if (svgAnnotationRules !== undefined && customSVG !== null) {
+        return customSVG;
+    }
+    else if (d.type === "desaturation-layer") {
+        return (0, baseRules_1.desaturationLayer)({
+            style: d.style instanceof Function ? d.style(d, i) : d.style,
+            size: adjustedSize,
+            i,
+            key: d.key
+        });
+    }
+    else if (d.type === "xy" || d.type === "frame-hover") {
+        return (0, xyframeRules_1.svgXYAnnotation)({ d, i, screenCoordinates });
+    }
+    else if (typeof d.type === "function" || annotationTypeStrings.has(d.type)) {
+        return (0, xyframeRules_1.basicReactAnnotation)({ d, screenCoordinates, i });
+    }
+    else if (d.type === "enclose") {
+        return (0, xyframeRules_1.svgEncloseAnnotation)({ d, screenCoordinates, i });
+    }
+    else if (d.type === "enclose-rect") {
+        return (0, xyframeRules_1.svgRectEncloseAnnotation)({ d, screenCoordinates, i });
+    }
+    else if (d.type === "enclose-hull") {
+        return (0, xyframeRules_1.svgHullEncloseAnnotation)({ d, screenCoordinates, i });
+    }
+    else if (d.type === "x") {
+        return (0, xyframeRules_1.svgXAnnotation)({
+            d,
+            screenCoordinates,
+            i,
+            adjustedSize
+        });
+    }
+    else if (d.type === "y") {
+        return (0, xyframeRules_1.svgYAnnotation)({
+            d,
+            screenCoordinates,
+            i,
+            adjustedSize,
+            adjustedPosition
+        });
+    }
+    else if (d.type === "bounds") {
+        return (0, xyframeRules_1.svgBoundsAnnotation)({
+            d,
+            i,
+            adjustedSize,
+            xAccessor,
+            yAccessor,
+            xScale,
+            yScale
+        });
+    }
+    else if (d.type === "line") {
+        return (0, xyframeRules_1.svgLineAnnotation)({ d, i, screenCoordinates });
+    }
+    else if (d.type === "area") {
+        return (0, xyframeRules_1.svgAreaAnnotation)({
+            d,
+            i,
+            xScale,
+            xAccessor,
+            yScale,
+            yAccessor,
+            annotationLayer
+        });
+    }
+    else if (d.type === "horizontal-points") {
+        return (0, xyframeRules_1.svgHorizontalPointsAnnotation)({
+            d,
+            lines: lines.data,
+            points: points.data,
+            xScale,
+            yScale,
+            pointStyle: points.styleFn
+        });
+    }
+    else if (d.type === "vertical-points") {
+        return (0, xyframeRules_1.svgVerticalPointsAnnotation)({
+            d,
+            lines: lines.data,
+            points: points.data,
+            xScale,
+            yScale,
+            pointStyle: points.styleFn
+        });
+    }
+    return null;
+}
+function defaultXYHTMLRule(props, state, { d: baseD, i, lines, summaries, points, annotationLayer }) {
+    const { xAccessor, yAccessor, xScale, yScale, annotatedSettings, axesData } = state;
+    const { voronoiHover } = annotationLayer;
+    let screenCoordinates = [];
+    const { tooltipContent, optimizeCustomTooltipPosition, htmlAnnotationRules, size, showLinePoints, margin: baseMargin } = props;
+    const idAccessor = annotatedSettings.lineIDAccessor;
+    const d = (0, lineDrawing_1.findPointByID)({
+        point: baseD,
+        idAccessor,
+        lines,
+        xScale,
+        projectedX: coordinateNames_1.projectedX,
+        xAccessor
+    });
+    if (!d) {
+        return null;
+    }
+    const xCoord = d[coordinateNames_1.projectedXMiddle] || d[coordinateNames_1.projectedX] || (0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, d);
+    const yCoord = d[coordinateNames_1.projectedYMiddle] || d[coordinateNames_1.projectedY] || (0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, d);
+    const xString = xCoord && xCoord.toString ? xCoord.toString() : xCoord;
+    const yString = yCoord && yCoord.toString ? yCoord.toString() : yCoord;
+    const margin = (0, frameFunctions_1.calculateMargin)({
+        margin: baseMargin,
+        axes: axesData,
+        title: annotatedSettings.title,
+        size: size
+    });
+    const { adjustedPosition, adjustedSize } = (0, frameFunctions_1.adjustedPositionSize)({
+        size,
+        margin
+    });
+    if (!d.coordinates) {
+        screenCoordinates = [
+            xScale(xCoord) || 0,
+            (0, lineDrawing_1.relativeY)({
+                point: d,
+                projectedYMiddle: coordinateNames_1.projectedYMiddle,
+                projectedY: coordinateNames_1.projectedY,
+                showLinePoints,
+                yAccessor,
+                yScale
+            }) || 0
+        ];
+    }
+    else {
+        screenCoordinates = d.coordinates.map((p) => {
+            const foundP = (0, lineDrawing_1.findPointByID)({
+                point: { x: 0, y: 0, ...p },
+                idAccessor,
+                lines,
+                xScale,
+                projectedX: coordinateNames_1.projectedX,
+                xAccessor
+            });
+            return [
+                (xScale((0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, d)) || 0) +
+                    adjustedPosition[0],
+                ((0, lineDrawing_1.relativeY)({
+                    point: foundP,
+                    projectedYMiddle: coordinateNames_1.projectedYMiddle,
+                    projectedY: coordinateNames_1.projectedY,
+                    yAccessor,
+                    yScale
+                }) || 0) + adjustedPosition[1]
+            ];
+        });
+    }
+    const customAnnotation = htmlAnnotationRules &&
+        htmlAnnotationRules({
+            d,
+            i,
+            screenCoordinates,
+            xScale,
+            yScale,
+            xAccessor,
+            yAccessor,
+            xyFrameProps: props,
+            xyFrameState: state,
+            summaries,
+            points,
+            lines,
+            voronoiHover,
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer
+        });
+    if (htmlAnnotationRules && customAnnotation !== null) {
+        return customAnnotation;
+    }
+    if (d.type === "frame-hover") {
+        let content = (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+            React.createElement("p", { key: "html-annotation-content-1" }, xString),
+            React.createElement("p", { key: "html-annotation-content-2" }, yString),
+            d.percent ? (React.createElement("p", { key: "html-annotation-content-3" },
+                Math.floor(d.percent * 1000) / 10,
+                "%")) : null));
+        if (d.type === "frame-hover" && tooltipContent) {
+            content = optimizeCustomTooltipPosition ? (React.createElement(TooltipPositioner_1.default, { tooltipContent: tooltipContent, tooltipContentArgs: d })) : (tooltipContent(d));
+        }
+        return (0, xyframeRules_1.htmlTooltipAnnotation)({
+            content,
+            screenCoordinates,
+            i,
+            d,
+            adjustedSize
+        });
+    }
+    return null;
+}
+XYFrameInner.displayName = "XYFrame";
+const XYFrame = React.memo(XYFrameInner);
+exports.default = XYFrame;

package/ai/dist/src/components/annotationLayerBehavior/annotationHandling.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bumpAnnotations = bumpAnnotations;
+const d3labeler_1 = __importDefault(require("./d3labeler"));
+const basicLabelSizeFunction = (noteData, characterWidth, lineHeight, padding) => {
+    const text = noteData.note.label || noteData.note.title;
+    const textLength = text.length;
+    const wrap = noteData.note.wrap || 120;
+    const width = Math.min(wrap, textLength * characterWidth) + padding * 2;
+    const height = Math.ceil((textLength * characterWidth) / 120) * lineHeight + padding * 2;
+    return [width, height];
+};
+function bumpAnnotations(adjustableNotes, processor, size, propsPointSizeFunction, propsLabelSizeFunction) {
+    const { padding = 1, characterWidth = 8, lineHeight = 20, iterations = 500, pointSizeFunction = propsPointSizeFunction, labelSizeFunction = propsLabelSizeFunction || basicLabelSizeFunction } = processor;
+    const labels = adjustableNotes.map((d, i) => {
+        const anchorX = (d.props.noteData.x[0] || d.props.noteData.x) +
+            (d.props.noteData.dx !== undefined
+                ? d.props.noteData.dx
+                : ((i % 3) - 1) * -10);
+        const anchorY = (d.props.noteData.y[0] || d.props.noteData.y) +
+            (d.props.noteData.dy !== undefined
+                ? d.props.noteData.dy
+                : ((i % 3) - 1) * 10);
+        const [labelWidth, labelHeight] = labelSizeFunction(d.props.noteData, characterWidth, lineHeight, padding);
+        return {
+            x: anchorX,
+            y: anchorY,
+            above: anchorY < d.props.noteData.y,
+            left: anchorX < d.props.noteData.x,
+            width: labelWidth,
+            height: labelHeight,
+            type: "label",
+            name: "",
+            originalNote: d
+        };
+    });
+    const points = adjustableNotes.map(d => ({
+        x: d.props.noteData.x,
+        y: d.props.noteData.y,
+        fx: d.props.noteData.x,
+        fy: d.props.noteData.y,
+        r: (pointSizeFunction && pointSizeFunction(d.props.noteData)) || 5,
+        type: "point",
+        originalNote: d
+    }));
+    const instantiatedLabeler = (0, d3labeler_1.default)();
+    instantiatedLabeler.label(labels);
+    instantiatedLabeler.anchor(points);
+    instantiatedLabeler.width(size[0]);
+    instantiatedLabeler.height(size[1]);
+    instantiatedLabeler.start(iterations);
+    labels.forEach(d => {
+        if (d.type === "label") {
+            const adjusted = adjustedXY(d.originalNote.props.noteData, d, padding);
+            d.originalNote.props.noteData.nx = adjusted[0];
+            d.originalNote.props.noteData.ny = adjusted[1];
+        }
+    });
+    return adjustableNotes;
+}
+function adjustedXY(note, calculated, padding) {
+    if (note.y > calculated.y) {
+        //below
+        return [
+            calculated.x + calculated.width / 2 + padding / 2,
+            calculated.y - calculated.height + padding / 2
+        ];
+    }
+    return [calculated.x + calculated.width / 2, calculated.y];
+}