semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,132 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TooltipPositioner;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const // simple heuristics to check if the tooltip container exceeds the viewport
+// if so, capture the suggested offset
+checkPosition = ({ tooltipRef, tooltipContentArgs, changeTooltipContentArgsCurrent, changeTooltipContainerInitialDimensions, changeCollision }) => {
+    const tooltipContainerInitialDimensions = tooltipRef?.getBoundingClientRect();
+    if (!tooltipContainerInitialDimensions) {
+        return;
+    }
+    const { right, left, top, bottom, width, height } = tooltipContainerInitialDimensions;
+    // flags to indicate whether the data point + tooltip dimension collides with the viewport
+    // on each of the 4 directions/sides
+    let collision = {
+        left: false,
+        right: false,
+        top: false,
+        bottom: false
+    };
+    if (left + width > window.innerWidth) {
+        collision.right = true;
+    }
+    if (left - width < 0) {
+        collision.left = true;
+    }
+    if (top + height > window.innerHeight) {
+        collision.bottom = true;
+    }
+    if (top - height < 0) {
+        collision.top = true;
+    }
+    changeTooltipContentArgsCurrent();
+    changeTooltipContainerInitialDimensions(tooltipContainerInitialDimensions);
+    changeCollision(collision);
+};
+function TooltipPositioner(props) {
+    const { tooltipContent, tooltipContentArgs } = props;
+    const [collision, changeCollision] = (0, react_1.useState)(null);
+    const [tooltipContainerInitialDimensions, changeTooltipContainerInitialDimensions] = (0, react_1.useState)(null);
+    const [tooltipContentArgsCurrent, changeTooltipContentArgsCurrent] = (0, react_1.useState)(null);
+    const [tooltipNode, setTooltipNode] = (0, react_1.useState)(null);
+    const tooltipNodeRef = (0, react_1.useCallback)((node) => {
+        setTooltipNode(node);
+        checkPosition({
+            tooltipRef: node,
+            tooltipContentArgs,
+            changeTooltipContentArgsCurrent,
+            changeTooltipContainerInitialDimensions,
+            changeCollision
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // if new args, reset collision state
+        changeCollision(null);
+        changeTooltipContainerInitialDimensions(null);
+    }, [JSON.stringify(tooltipContentArgs)]);
+    (0, react_1.useEffect)(() => {
+        if (tooltipNode && !collision) {
+            checkPosition({
+                tooltipRef: tooltipNode,
+                tooltipContentArgs,
+                changeTooltipContentArgsCurrent,
+                changeTooltipContainerInitialDimensions,
+                changeCollision
+            });
+        }
+    }, [tooltipNode, collision]);
+    const containerStyle = {
+        //to handle issue when the tooltip content has margins set by client,
+        // which results in the tooltip container having smaller height,
+        // which in turn causes the css transform to be inaccurate
+        // (ref: https://www.w3.org/TR/css-box-3/#collapsing-margins)
+        overflow: "hidden",
+        opacity: collision && tooltipContentArgsCurrent === tooltipContentArgs ? 1 : 0
+    };
+    const tooltipContainerClasses = collision
+        ? [
+            "tooltip-container",
+            "tooltip-collision-evaluated",
+            collision && collision.top && "collision-top",
+            collision && collision.bottom && "collision-bottom",
+            collision && collision.right && "collision-right",
+            collision && collision.left && "collision-left"
+        ]
+            .filter((el) => el)
+            .join(" ")
+        : "tooltip-container";
+    const tooltipContainerAttributes = {
+        offset: { x: 0, y: 0 },
+        tooltipContainerInitialDimensions
+    };
+    return (React.createElement("div", { ref: tooltipNodeRef, style: containerStyle, className: tooltipContainerClasses, "data-testid": "TooltipPositioner" }, tooltipContent({
+        ...tooltipContentArgs,
+        tooltipContainerAttributes
+    })));
+}

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];
+}

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

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+// from Evan Wang's https://github.com/tinker10/D3-Labeler
+function default_1() {
+    let lab = [], anc = [], w = 1, // box width
+    h = 1, // box width
+    labeler = {
+        start: x => { },
+        width: x => { },
+        height: x => { },
+        label: x => { },
+        anchor: x => { },
+        alt_energy: x => { },
+        alt_schedule: x => { }
+    };
+    let max_move = 5.0, max_angle = 0.5;
+    // weights
+    let w_len = 0.2, // leader line length
+    w_inter = 1.0, // leader line intersection
+    w_lab2 = 30.0, // label-label overlap
+    w_lab_anc = 30.0, // label-anchor overlap
+    w_orient = 3.0; // orientation bias
+    // booleans for user defined functions
+    let user_energy = false, user_schedule = false;
+    let user_defined_energy, user_defined_schedule;
+    const energy = function (index) {
+        // energy function, tailored for label placement
+        let m = lab.length, ener = 0, dx = lab[index].x - anc[index].x, dy = anc[index].y - lab[index].y, dist = Math.sqrt(dx * dx + dy * dy), overlap = true, amount = 0, theta = 0;
+        // penalty for length of leader line
+        if (dist > 0)
+            ener += dist * w_len;
+        // label orientation bias
+        dx /= dist;
+        dy /= dist;
+        if (dx > 0 && dy > 0) {
+            ener += 0 * w_orient;
+        }
+        else if (dx < 0 && dy > 0) {
+            ener += 1 * w_orient;
+        }
+        else if (dx < 0 && dy < 0) {
+            ener += 2 * w_orient;
+        }
+        else {
+            ener += 3 * w_orient;
+        }
+        let x21 = lab[index].x, y21 = lab[index].y - lab[index].height + 2.0, x22 = lab[index].x + lab[index].width, y22 = lab[index].y + 2.0;
+        let x11, x12, y11, y12, x_overlap, y_overlap, overlap_area;
+        for (let i = 0; i < m; i++) {
+            if (i !== index) {
+                // penalty for intersection of leader lines
+                const overlap = intersect(anc[index].x, lab[index].x, anc[i].x, lab[i].x, anc[index].y, lab[index].y, anc[i].y, lab[i].y);
+                if (overlap)
+                    ener += w_inter;
+                // penalty for label-label overlap
+                x11 = lab[i].x;
+                y11 = lab[i].y - lab[i].height + 2.0;
+                x12 = lab[i].x + lab[i].width;
+                y12 = lab[i].y + 2.0;
+                x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
+                y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
+                overlap_area = x_overlap * y_overlap;
+                ener += overlap_area * w_lab2;
+            }
+            // penalty for label-anchor overlap
+            x11 = anc[i].x - anc[i].r;
+            y11 = anc[i].y - anc[i].r;
+            x12 = anc[i].x + anc[i].r;
+            y12 = anc[i].y + anc[i].r;
+            x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
+            y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
+            overlap_area = x_overlap * y_overlap;
+            ener += overlap_area * w_lab_anc;
+        }
+        return ener;
+    };
+    const mcmove = function (currT) {
+        // Monte Carlo translation move
+        // select a random label
+        let i = Math.floor(Math.random() * lab.length);
+        // save old coordinates
+        let x_old = lab[i].x;
+        let y_old = lab[i].y;
+        // old energy
+        let old_energy;
+        if (user_energy) {
+            old_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            old_energy = energy(i);
+        }
+        // random translation
+        lab[i].x += (Math.random() - 0.5) * max_move;
+        lab[i].y += (Math.random() - 0.5) * max_move;
+        // hard wall boundaries
+        if (lab[i].x > w)
+            lab[i].x = x_old;
+        if (lab[i].x < 0)
+            lab[i].x = x_old;
+        if (lab[i].y > h)
+            lab[i].y = y_old;
+        if (lab[i].y < 0)
+            lab[i].y = y_old;
+        // new energy
+        let new_energy;
+        if (user_energy) {
+            new_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            new_energy = energy(i);
+        }
+        // delta E
+        let delta_energy = new_energy - old_energy;
+        if (!(Math.random() < Math.exp(-delta_energy / currT))) {
+            // move back to old coordinates
+            lab[i].x = x_old;
+            lab[i].y = y_old;
+        }
+    };
+    const mcrotate = function (currT) {
+        // Monte Carlo rotation move
+        // select a random label
+        let i = Math.floor(Math.random() * lab.length);
+        // save old coordinates
+        let x_old = lab[i].x;
+        let y_old = lab[i].y;
+        // old energy
+        let old_energy;
+        if (user_energy) {
+            old_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            old_energy = energy(i);
+        }
+        // random angle
+        let angle = (Math.random() - 0.5) * max_angle;
+        let s = Math.sin(angle);
+        let c = Math.cos(angle);
+        // translate label (relative to anchor at origin):
+        lab[i].x -= anc[i].x;
+        lab[i].y -= anc[i].y;
+        // rotate label
+        let x_new = lab[i].x * c - lab[i].y * s, y_new = lab[i].x * s + lab[i].y * c;
+        // translate label back
+        lab[i].x = x_new + anc[i].x;
+        lab[i].y = y_new + anc[i].y;
+        // hard wall boundaries
+        if (lab[i].x > w)
+            lab[i].x = x_old;
+        if (lab[i].x < 0)
+            lab[i].x = x_old;
+        if (lab[i].y > h)
+            lab[i].y = y_old;
+        if (lab[i].y < 0)
+            lab[i].y = y_old;
+        // new energy
+        let new_energy;
+        if (user_energy) {
+            new_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            new_energy = energy(i);
+        }
+        // delta E
+        let delta_energy = new_energy - old_energy;
+        if (!(Math.random() < Math.exp(-delta_energy / currT))) {
+            // move back to old coordinates
+            lab[i].x = x_old;
+            lab[i].y = y_old;
+        }
+    };
+    const intersect = function (x1, x2, x3, x4, y1, y2, y3, y4) {
+        // returns true if two lines intersect, else false
+        // from http://paulbourke.net/geometry/lineline2d/
+        let mua, mub;
+        let denom, numera, numerb;
+        denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+        numera = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3);
+        numerb = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3);
+        /* Is the intersection along the the segments */
+        mua = numera / denom;
+        mub = numerb / denom;
+        if (!(mua < 0 || mua > 1 || mub < 0 || mub > 1)) {
+            return true;
+        }
+        return false;
+    };
+    const cooling_schedule = function (currT, initialT, nsweeps) {
+        // linear cooling
+        return currT - initialT / nsweeps;
+    };
+    labeler.start = function (nsweeps) {
+        // main simulated annealing function
+        let m = lab.length, currT = 1.0, initialT = 1.0;
+        for (let i = 0; i < nsweeps; i++) {
+            for (let j = 0; j < m; j++) {
+                if (Math.random() < 0.5) {
+                    mcmove(currT);
+                }
+                else {
+                    mcrotate(currT);
+                }
+            }
+            currT = cooling_schedule(currT, initialT, nsweeps);
+        }
+    };
+    labeler.width = function (x) {
+        // users insert graph width
+        if (!arguments.length)
+            return w;
+        w = x;
+        return labeler;
+    };
+    labeler.height = function (x) {
+        // users insert graph height
+        if (!arguments.length)
+            return h;
+        h = x;
+        return labeler;
+    };
+    labeler.label = function (x) {
+        // users insert label positions
+        if (!arguments.length)
+            return lab;
+        lab = x;
+        return labeler;
+    };
+    labeler.anchor = function (x) {
+        // users insert anchor positions
+        if (!arguments.length)
+            return anc;
+        anc = x;
+        return labeler;
+    };
+    labeler.alt_energy = function (x) {
+        // user defined energy
+        if (!arguments.length)
+            return energy;
+        user_defined_energy = x;
+        user_energy = true;
+        return labeler;
+    };
+    labeler.alt_schedule = function (x) {
+        // user defined cooling_schedule
+        if (!arguments.length)
+            return cooling_schedule;
+        user_defined_schedule = x;
+        user_schedule = true;
+        return labeler;
+    };
+    return labeler;
+}
+/*eslint-enable */

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

@@ -0,0 +1,150 @@
+"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.desaturationLayer = exports.hullEnclosure = exports.rectangleEnclosure = exports.circleEnclosure = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_polygon_1 = require("d3-polygon");
+const polygon_offset_1 = __importDefault(require("polygon-offset"));
+const circleEnclosure = ({ d, i, circle }) => {
+    const { padding = 2, radiusPadding = padding, label } = d;
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        coordinates: undefined,
+        x: circle.x,
+        y: circle.y,
+        type: "callout-circle",
+        subject: {
+            radius: circle.r,
+            radiusPadding
+        },
+        i
+    });
+    if (noteData.rp) {
+        switch (noteData.rp) {
+            case "top":
+                noteData.dx = 0;
+                noteData.dy = -circle.r - noteData.rd;
+                break;
+            case "bottom":
+                noteData.dx = 0;
+                noteData.dy = circle.r + noteData.rd;
+                break;
+            case "left":
+                noteData.dx = -circle.r - noteData.rd;
+                noteData.dy = 0;
+                break;
+            default:
+                noteData.dx = circle.r + noteData.rd;
+                noteData.dy = 0;
+        }
+    }
+    //TODO: Support .ra (setting angle)
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.circleEnclosure = circleEnclosure;
+const rectangleEnclosure = ({ bboxNodes, d, i }) => {
+    const { padding = 0, dx = -25, dy = -25, label } = d;
+    const bbox = [
+        [
+            Math.min(...bboxNodes.map((p) => p.x0)) - padding,
+            Math.min(...bboxNodes.map((p) => p.y0)) - padding
+        ],
+        [
+            Math.max(...bboxNodes.map((p) => p.x1)) + padding,
+            Math.max(...bboxNodes.map((p) => p.y1)) + padding
+        ]
+    ];
+    const noteData = Object.assign({
+        dx: dx,
+        dy: dy,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-rect",
+        x: bbox[0][0],
+        y: bbox[0][1],
+        subject: {
+            width: bbox[1][0] - bbox[0][0],
+            height: bbox[1][1] - bbox[0][1]
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.rectangleEnclosure = rectangleEnclosure;
+const hullEnclosure = ({ points, d, i }) => {
+    const { color = "currentColor", dx = -25, dy = -25, label, padding = 10, buffer = padding, strokeWidth = 10 } = d;
+    const hullPoints = (0, d3_polygon_1.polygonHull)(points);
+    const offset = new polygon_offset_1.default();
+    const bufferedHull = offset
+        .data([...hullPoints, hullPoints[0]])
+        .margin(buffer)[0];
+    const hullD = `M${bufferedHull.map((d) => d.join(",")).join("L")}Z`;
+    const firstCoord = bufferedHull[0];
+    const { nx = firstCoord[0] + dx, ny = firstCoord[1] + dy } = d;
+    const closestCoordinates = bufferedHull.reduce((p, c) => {
+        if (Math.hypot(nx - p[0], ny - p[1]) > Math.hypot(nx - c[0], ny - c[1])) {
+            p = c;
+        }
+        return p;
+    }, firstCoord);
+    const noteData = Object.assign({
+        dx: dx,
+        dy: dy,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-custom",
+        x: closestCoordinates[0],
+        y: closestCoordinates[1],
+        subject: {
+            custom: [
+                React.createElement("path", { key: "hull-drawing", d: hullD, strokeWidth: strokeWidth, strokeMiterlimit: "10", strokeLinejoin: "miter", strokeLinecap: "butt", fill: "none", stroke: color, transform: `translate(${-closestCoordinates[0]},${-closestCoordinates[1]})` })
+            ],
+            customID: "hull-annotation"
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.hullEnclosure = hullEnclosure;
+const desaturationLayer = ({ style = { fill: "white", fillOpacity: 0.5 }, size, i, key }) => (React.createElement("rect", { "data-testid": "desaturation-layer", key: key || `desaturation-${i}`, x: -5, y: -5, width: size[0] + 10, height: size[1] + 10, style: style }));
+exports.desaturationLayer = desaturationLayer;