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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semiotic",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "description": "The semiotic JavaScript data visualization framework",
   "main": "dist/semiotic.min.js",
   "module": "dist/semiotic.module.min.js",
@@ -8,7 +8,7 @@
   "sideEffects": false,
   "bin": {
     "semiotic-ai": "ai/cli.js",
-    "semiotic-mcp": "ai/dist/ai/mcp-server.js"
+    "semiotic-mcp": "ai/dist/mcp-server.js"
   },
   "exports": {
     ".": {
@@ -62,14 +62,13 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist/*.js",
-    "dist/*.js.map",
+    "dist/*.min.js",
     "dist/**/*.d.ts",
     "ai/schema.json",
     "ai/system-prompt.md",
     "ai/examples.md",
     "ai/cli.js",
-    "ai/dist/**/*.js",
+    "ai/dist/*.js",
     "CLAUDE.md",
     "README.md",
     "LICENSE"
@@ -132,16 +131,25 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@mdx-js/react": "^1.6.22",
-    "@parcel/transformer-inline-string": "^2.8.2",
-    "@parcel/transformer-mdx": "^2.8.2",
+    "@parcel/transformer-inline-string": "^2.16.4",
     "@playwright/test": "^1.17.1",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.3.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/d3-array": "^3.2.0",
+    "@types/d3-brush": "^3.0.0",
+    "@types/d3-chord": "^3.0.0",
+    "@types/d3-force": "^3.0.0",
+    "@types/d3-format": "^3.0.0",
+    "@types/d3-hierarchy": "^3.1.0",
+    "@types/d3-interpolate": "^3.0.0",
     "@types/d3-scale": "^4.0.9",
+    "@types/d3-scale-chromatic": "^3.1.0",
+    "@types/d3-selection": "^3.0.0",
+    "@types/d3-shape": "^3.1.0",
+    "@types/d3-time-format": "^4.0.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.19.35",
     "@types/react": "^18.3.28",
@@ -149,34 +157,27 @@
     "@types/seedrandom": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^5.4.6",
     "@vitest/ui": "^4.0.18",
-    "@vx/pattern": "0.0.143",
     "babel-jest": "^29.7.0",
     "d3-dsv": "1.0.5",
     "d3-flextree-v4": "^1.0.1",
-    "d3-sankey": "0.12.3",
     "dagre": "^0.8.2",
-    "eslint": "^7.0.0",
-    "eslint-config-netflix-dea": "^4.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.27.1",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "marked": "4.0.10",
     "material-design-icons-svg": "1.1.2",
-    "parcel": "^2.8.2",
+    "parcel": "^2.16.4",
     "playwright-chromium": "^1.17.1",
     "prettier": "^3.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-prism": "4.3.2",
     "react-router-dom": "^6.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.59.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^7.0.0",
-    "roughjs": "^3.1.0",
     "seedrandom": "^3.0.5",
     "ts-jest": "^29.4.6",
     "typescript": "~5.9.3",
@@ -188,31 +189,18 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
-    "d3-array": "3.2.4",
-    "d3-brush": "3.0.0",
-    "d3-chord": "3.0.1",
-    "d3-contour": "^1.1.1",
-    "d3-delaunay": "^6.0.4",
-    "d3-force": "3.0.0",
+    "d3-array": "^3.2.4",
+    "d3-brush": "^3.0.0",
+    "d3-chord": "^3.0.1",
+    "d3-force": "^3.0.0",
     "d3-format": "^3.1.0",
-    "d3-glyphedge": "^1.2.0",
-    "d3-hexbin": "^0.2.2",
-    "d3-hierarchy": "3.1.2",
-    "d3-interpolate": "3.0.1",
-    "d3-path-arrows": "^0.4.0",
-    "d3-polygon": "3.0.1",
-    "d3-sankey-circular": "0.34.0",
-    "d3-scale": "4.0.2",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
-    "d3-selection": "3.0.0",
-    "d3-shape": "3.2.0",
-    "d3-time-format": "^4.1.0",
-    "dequal": "^2.0.3",
-    "labella": "1.1.4",
-    "memoize-one": "^6.0.0",
-    "polygon-offset": "0.3.2",
-    "regression": "^2.0.1",
-    "svg-path-bounding-box": "1.0.4"
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-time-format": "^4.1.0"
   },
   "browserslist": {
     "development": [

package/ai/dist/ai/componentRegistry.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COMPONENT_REGISTRY = void 0;
-const LineChart_1 = require("../src/components/charts/xy/LineChart");
-const AreaChart_1 = require("../src/components/charts/xy/AreaChart");
-const StackedAreaChart_1 = require("../src/components/charts/xy/StackedAreaChart");
-const Scatterplot_1 = require("../src/components/charts/xy/Scatterplot");
-const BubbleChart_1 = require("../src/components/charts/xy/BubbleChart");
-const Heatmap_1 = require("../src/components/charts/xy/Heatmap");
-const BarChart_1 = require("../src/components/charts/ordinal/BarChart");
-const StackedBarChart_1 = require("../src/components/charts/ordinal/StackedBarChart");
-const GroupedBarChart_1 = require("../src/components/charts/ordinal/GroupedBarChart");
-const SwarmPlot_1 = require("../src/components/charts/ordinal/SwarmPlot");
-const BoxPlot_1 = require("../src/components/charts/ordinal/BoxPlot");
-const DotPlot_1 = require("../src/components/charts/ordinal/DotPlot");
-const PieChart_1 = require("../src/components/charts/ordinal/PieChart");
-const DonutChart_1 = require("../src/components/charts/ordinal/DonutChart");
-const ForceDirectedGraph_1 = require("../src/components/charts/network/ForceDirectedGraph");
-const ChordDiagram_1 = require("../src/components/charts/network/ChordDiagram");
-const SankeyDiagram_1 = require("../src/components/charts/network/SankeyDiagram");
-const TreeDiagram_1 = require("../src/components/charts/network/TreeDiagram");
-const Treemap_1 = require("../src/components/charts/network/Treemap");
-const CirclePack_1 = require("../src/components/charts/network/CirclePack");
-exports.COMPONENT_REGISTRY = {
-    LineChart: { component: LineChart_1.LineChart, category: "xy" },
-    AreaChart: { component: AreaChart_1.AreaChart, category: "xy" },
-    StackedAreaChart: { component: StackedAreaChart_1.StackedAreaChart, category: "xy" },
-    Scatterplot: { component: Scatterplot_1.Scatterplot, category: "xy" },
-    BubbleChart: { component: BubbleChart_1.BubbleChart, category: "xy" },
-    Heatmap: { component: Heatmap_1.Heatmap, category: "xy" },
-    BarChart: { component: BarChart_1.BarChart, category: "ordinal" },
-    StackedBarChart: { component: StackedBarChart_1.StackedBarChart, category: "ordinal" },
-    GroupedBarChart: { component: GroupedBarChart_1.GroupedBarChart, category: "ordinal" },
-    SwarmPlot: { component: SwarmPlot_1.SwarmPlot, category: "ordinal" },
-    BoxPlot: { component: BoxPlot_1.BoxPlot, category: "ordinal" },
-    DotPlot: { component: DotPlot_1.DotPlot, category: "ordinal" },
-    PieChart: { component: PieChart_1.PieChart, category: "ordinal" },
-    DonutChart: { component: DonutChart_1.DonutChart, category: "ordinal" },
-    ForceDirectedGraph: { component: ForceDirectedGraph_1.ForceDirectedGraph, category: "network" },
-    ChordDiagram: { component: ChordDiagram_1.ChordDiagram, category: "network" },
-    SankeyDiagram: { component: SankeyDiagram_1.SankeyDiagram, category: "network" },
-    TreeDiagram: { component: TreeDiagram_1.TreeDiagram, category: "network" },
-    Treemap: { component: Treemap_1.Treemap, category: "network" },
-    CirclePack: { component: CirclePack_1.CirclePack, category: "network" },
-};

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

@@ -1,358 +0,0 @@
-"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 = SemioticAnnotation;
-const React = __importStar(require("react"));
-function wrapText(text, wrap = 120, charWidth = 8) {
-    if (!text)
-        return [];
-    const maxChars = Math.max(1, Math.floor(wrap / charWidth));
-    const words = text.split(/\s+/);
-    const lines = [];
-    let currentLine = "";
-    for (const word of words) {
-        if (currentLine && currentLine.length + 1 + word.length > maxChars) {
-            lines.push(currentLine);
-            currentLine = word;
-        }
-        else {
-            currentLine = currentLine ? `${currentLine} ${word}` : word;
-        }
-    }
-    if (currentLine)
-        lines.push(currentLine);
-    return lines;
-}
-function bracketPath(type, span, depth, isVertical) {
-    if (type === "curly") {
-        if (isVertical) {
-            return `M0,0 C${depth * 0.6},0 ${depth * 0.4},${span / 2} ${depth},${span / 2} C${depth * 0.4},${span / 2} ${depth * 0.6},${span} 0,${span}`;
-        }
-        return `M0,0 C0,${depth * 0.6} ${span / 2},${depth * 0.4} ${span / 2},${depth} C${span / 2},${depth * 0.4} ${span},${depth * 0.6} ${span},0`;
-    }
-    // square bracket
-    if (isVertical) {
-        return `M0,0 L${depth},0 L${depth},${span} L0,${span}`;
-    }
-    return `M0,0 L0,${depth} L${span},${depth} L${span},0`;
-}
-function renderNote(note, dx, dy, color) {
-    if (!note)
-        return React.createElement("g", { className: "annotation-note" });
-    const { label, title, orientation: explicitOrientation, align: explicitAlign, wrap = 120, noWrap } = note;
-    if (!label && !title)
-        return React.createElement("g", { className: "annotation-note" });
-    let orientation = explicitOrientation;
-    if (!orientation) {
-        orientation = Math.abs(dx) > Math.abs(dy) ? "leftRight" : "topBottom";
-    }
-    let align = explicitAlign;
-    if (!align || align === "dynamic") {
-        if (orientation === "topBottom") {
-            align = dx >= 0 ? "left" : "right";
-        }
-        else {
-            align = dy >= 0 ? "top" : "bottom";
-        }
-    }
-    let textAnchor = "start";
-    if (orientation === "topBottom") {
-        if (align === "right")
-            textAnchor = "end";
-        else if (align === "middle")
-            textAnchor = "middle";
-    }
-    else {
-        textAnchor = dx >= 0 ? "start" : "end";
-    }
-    const lineHeight = 16;
-    const padding = 4;
-    const titleLines = title ? (noWrap ? [title] : wrapText(title, wrap)) : [];
-    const labelLines = label ? (noWrap ? [label] : wrapText(label, wrap)) : [];
-    // For leftRight orientation, offset text horizontally away from the note-line
-    const textX = orientation === "leftRight"
-        ? (textAnchor === "end" ? -padding : padding)
-        : 0;
-    let yOffset = 0;
-    const textElements = [];
-    if (titleLines.length > 0) {
-        textElements.push(React.createElement("text", { key: "annotation-note-title", className: "annotation-note-title", fill: color || undefined, textAnchor: textAnchor, fontWeight: "bold" }, titleLines.map((line, i) => (React.createElement("tspan", { key: i, x: textX, dy: i === 0 ? 0 : lineHeight }, line)))));
-        yOffset = titleLines.length * lineHeight;
-    }
-    if (labelLines.length > 0) {
-        textElements.push(React.createElement("text", { key: "annotation-note-label", className: "annotation-note-label", fill: color || undefined, textAnchor: textAnchor, y: yOffset }, labelLines.map((line, i) => (React.createElement("tspan", { key: i, x: textX, dy: i === 0 ? lineHeight : lineHeight }, line)))));
-    }
-    let noteLine = null;
-    if ((title || label) && (dx !== 0 || dy !== 0)) {
-        if (orientation === "topBottom") {
-            const lineWidth = Math.min(wrap, 120);
-            let x1 = 0;
-            let x2 = lineWidth;
-            if (textAnchor === "end") {
-                x1 = -lineWidth;
-                x2 = 0;
-            }
-            else if (textAnchor === "middle") {
-                x1 = -lineWidth / 2;
-                x2 = lineWidth / 2;
-            }
-            noteLine = (React.createElement("line", { className: "note-line", x1: x1, x2: x2, y1: 0, y2: 0, stroke: color || "currentColor" }));
-        }
-        else {
-            const totalHeight = (titleLines.length + labelLines.length) * lineHeight +
-                (labelLines.length > 0 ? lineHeight : 0);
-            let y1 = 0;
-            let y2 = totalHeight;
-            if (align === "bottom") {
-                y1 = -totalHeight;
-                y2 = 0;
-            }
-            else if (align === "middle") {
-                y1 = -totalHeight / 2;
-                y2 = totalHeight / 2;
-            }
-            noteLine = (React.createElement("line", { className: "note-line", x1: 0, x2: 0, y1: y1, y2: y2, stroke: color || "currentColor" }));
-        }
-    }
-    // Compute vertical offset for note content based on orientation and alignment.
-    // The label's first tspan adds an extra lineHeight gap below the title,
-    // so total visual height is larger when a label is present.
-    const totalLines = titleLines.length + labelLines.length;
-    const totalTextHeight = totalLines * lineHeight;
-    const labelGap = labelLines.length > 0 ? lineHeight : 0;
-    const visualHeight = totalTextHeight + labelGap;
-    let contentYOffset = 0;
-    if (orientation === "topBottom") {
-        if (dy < 0) {
-            contentYOffset = -visualHeight;
-        }
-    }
-    else if (orientation === "leftRight") {
-        if (align === "middle") {
-            contentYOffset = -(visualHeight / 2);
-        }
-        else if (align === "bottom" || dy < 0) {
-            contentYOffset = -visualHeight;
-        }
-    }
-    const contentTransform = contentYOffset !== 0
-        ? `translate(0,${contentYOffset})`
-        : undefined;
-    return (React.createElement("g", { className: "annotation-note", transform: `translate(${dx},${dy})` },
-        React.createElement("g", { className: "annotation-note-content", transform: contentTransform }, textElements),
-        noteLine));
-}
-function renderSubject(type, subject, color, annotX, annotY) {
-    const elements = [];
-    switch (type) {
-        case "callout-circle": {
-            const totalRadius = (subject?.radius || 0) + (subject?.radiusPadding || 0);
-            if (totalRadius > 0) {
-                elements.push(React.createElement("circle", { key: "subject-circle", r: totalRadius, fill: "none", stroke: color || "currentColor" }));
-            }
-            break;
-        }
-        case "callout-rect": {
-            const width = subject?.width || 0;
-            const height = subject?.height || 0;
-            if (width > 0 || height > 0) {
-                elements.push(React.createElement("rect", { key: "subject-rect", width: width, height: height, fill: "none", stroke: color || "currentColor" }));
-            }
-            break;
-        }
-        case "callout-custom": {
-            if (subject?.custom) {
-                const customElements = Array.isArray(subject.custom)
-                    ? subject.custom
-                    : [subject.custom];
-                elements.push(...customElements);
-            }
-            break;
-        }
-        case "xy-threshold": {
-            const x = annotX || 0;
-            const y = annotY || 0;
-            if (subject?.x !== undefined) {
-                const y1 = (subject.y1 || 0) - y;
-                const y2 = (subject.y2 || 0) - y;
-                const sx = (subject.x || 0) - x;
-                elements.push(React.createElement("line", { key: "threshold-line", x1: sx, y1: y1, x2: sx, y2: y2, stroke: color || "currentColor", strokeDasharray: "5,5" }));
-            }
-            else if (subject?.y !== undefined) {
-                const x1 = (subject.x1 || 0) - x;
-                const x2 = (subject.x2 || 0) - x;
-                const sy = (subject.y || 0) - y;
-                elements.push(React.createElement("line", { key: "threshold-line", x1: x1, y1: sy, x2: x2, y2: sy, stroke: color || "currentColor", strokeDasharray: "5,5" }));
-            }
-            else if (subject?.x1 !== undefined || subject?.x2 !== undefined) {
-                // Horizontal threshold line when only x1/x2 provided (no subject.x or subject.y)
-                const x1 = (subject.x1 || 0) - x;
-                const x2 = (subject.x2 || 0) - x;
-                elements.push(React.createElement("line", { key: "threshold-line", x1: x1, y1: 0, x2: x2, y2: 0, stroke: color || "currentColor", strokeDasharray: "5,5" }));
-            }
-            else if (subject?.y1 !== undefined || subject?.y2 !== undefined) {
-                // Vertical threshold line when only y1/y2 provided (no subject.x or subject.y)
-                const y1 = (subject.y1 || 0) - y;
-                const y2 = (subject.y2 || 0) - y;
-                elements.push(React.createElement("line", { key: "threshold-line", x1: 0, y1: y1, x2: 0, y2: y2, stroke: color || "currentColor", strokeDasharray: "5,5" }));
-            }
-            break;
-        }
-        case "bracket": {
-            const bracketType = subject?.type || "curly";
-            const span = subject?.width ?? subject?.height;
-            const depth = subject?.depth || 30;
-            const isVertical = subject?.width === undefined;
-            if (span !== undefined) {
-                elements.push(React.createElement("path", { key: "bracket-path", d: bracketPath(bracketType, span, depth, isVertical), fill: "none", stroke: color || "currentColor" }));
-            }
-            break;
-        }
-    }
-    return React.createElement("g", { className: "annotation-subject" }, elements);
-}
-function renderConnector(dx, dy, connector, color, type, subject) {
-    const elements = [];
-    let startX = 0;
-    let startY = 0;
-    if ((type === "callout-circle" || type === "label") &&
-        subject?.radius) {
-        const totalRadius = (subject.radius || 0) + (subject.radiusPadding || 0);
-        if (totalRadius > 0 && (dx !== 0 || dy !== 0)) {
-            const angle = Math.atan2(dy, dx);
-            startX = Math.cos(angle) * totalRadius;
-            startY = Math.sin(angle) * totalRadius;
-        }
-    }
-    else if (type === "callout-rect" && subject) {
-        const w = subject.width || 0;
-        const h = subject.height || 0;
-        if (w > 0 || h > 0) {
-            const cx = w / 2;
-            const cy = h / 2;
-            const tdx = dx - cx;
-            const tdy = dy - cy;
-            if (tdx !== 0 || tdy !== 0) {
-                const absTdx = Math.abs(tdx);
-                const absTdy = Math.abs(tdy);
-                const hw = w / 2;
-                const hh = h / 2;
-                const t = absTdx * hh > absTdy * hw ? hw / absTdx : hh / absTdy;
-                startX = cx + tdx * t;
-                startY = cy + tdy * t;
-            }
-        }
-    }
-    else if (type === "bracket" && subject) {
-        const width = subject.width;
-        const height = subject.height;
-        const depth = subject.depth || 30;
-        if (width !== undefined) {
-            startX = width / 2;
-            startY = depth;
-        }
-        else if (height !== undefined) {
-            startX = depth;
-            startY = height / 2;
-        }
-    }
-    const connectorLength = Math.sqrt((dx - startX) ** 2 + (dy - startY) ** 2);
-    if (connectorLength > 0.5) {
-        elements.push(React.createElement("line", { key: "connector-line", x1: startX, y1: startY, x2: dx, y2: dy, stroke: color || "currentColor" }));
-        if (connector?.end === "arrow") {
-            const arrowSize = 10;
-            const angleOffset = 16 / 180 * Math.PI;
-            const angle = Math.atan2(dy - startY, dx - startX);
-            const a1x = startX + arrowSize * Math.cos(angle + angleOffset);
-            const a1y = startY + arrowSize * Math.sin(angle + angleOffset);
-            const a2x = startX + arrowSize * Math.cos(angle - angleOffset);
-            const a2y = startY + arrowSize * Math.sin(angle - angleOffset);
-            elements.push(React.createElement("path", { key: "connector-arrow", d: `M${startX},${startY}L${a1x},${a1y}L${a2x},${a2y}Z`, fill: color || "currentColor", stroke: "none" }));
-        }
-    }
-    return React.createElement("g", { className: "annotation-connector" }, elements);
-}
-function AnnotationRenderer(props) {
-    const { x = 0, y = 0, dx: baseDx, dy: baseDy, nx, ny, note, connector, subject, type, color, className, disable, events = {}, "data-testid": dataTestId } = props;
-    const disableSet = new Set(Array.isArray(disable) ? disable : []);
-    let dx = baseDx || 0;
-    let dy = baseDy || 0;
-    if (nx !== undefined && nx !== null)
-        dx = nx - x;
-    if (ny !== undefined && ny !== null)
-        dy = ny - y;
-    const resolvedType = typeof type === "string" ? type : "label";
-    // For bracket type, auto-position note at bracket midpoint tip
-    if (resolvedType === "bracket" && subject && dx === 0 && dy === 0) {
-        if (subject.width !== undefined) {
-            dx = subject.width / 2;
-            const depthVal = subject.depth || 30;
-            dy = depthVal + (depthVal >= 0 ? 5 : -5);
-        }
-        else if (subject.height !== undefined) {
-            const depthVal = subject.depth || 30;
-            dx = depthVal + (depthVal >= 0 ? 5 : -5);
-            dy = subject.height / 2;
-        }
-    }
-    return (React.createElement("g", { className: `annotation ${className || ""}`.trim(), transform: `translate(${x},${y})`, "data-testid": dataTestId, ...events },
-        !disableSet.has("connector") && renderConnector(dx, dy, connector, color, resolvedType, subject),
-        !disableSet.has("subject") && renderSubject(resolvedType, subject, color, x, y),
-        !disableSet.has("note") && renderNote(note, dx, dy, color)));
-}
-function SemioticAnnotation(props) {
-    const { noteData } = props;
-    const { screenCoordinates } = noteData;
-    const annotationType = typeof noteData.type === "string" ? noteData.type : "label";
-    const eventListeners = noteData.eventListeners || noteData.events || {};
-    if (noteData.coordinates && screenCoordinates) {
-        const setNX = noteData.nx || screenCoordinates[0][0] + noteData.dx;
-        const setNY = noteData.ny || screenCoordinates[0][1] + noteData.dy;
-        const notes = screenCoordinates.map((d, i) => {
-            const subjectNote = Object.assign({}, noteData, {
-                note: i === 0 ? noteData.note : { label: "" },
-                x: d[0],
-                y: d[1],
-                nx: setNX,
-                ny: setNY
-            });
-            return (React.createElement(AnnotationRenderer, { "data-testid": "semiotic-annotation", key: `multi-annotation-${i}`, ...subjectNote, type: annotationType }));
-        });
-        return React.createElement("g", null, notes);
-    }
-    const keyData = noteData.note || { title: "none", label: noteData.label };
-    const annotationKey = `${keyData.label}-${keyData.title}-${noteData.i}`;
-    return (React.createElement(AnnotationRenderer, { "data-testid": "semiotic-annotation", key: annotationKey, events: eventListeners, ...noteData, type: annotationType }));
-}