semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.RealtimeWaterfallChart = exports.RealtimeSwarmChart = exports.RealtimeBarChart = exports.RealtimeLineChart = exports.CirclePack = exports.Treemap = exports.TreeDiagram = exports.SankeyDiagram = exports.ChordDiagram = exports.ForceDirectedGraph = exports.GroupedBarChart = exports.DonutChart = exports.PieChart = exports.DotPlot = exports.BoxPlot = exports.SwarmPlot = exports.StackedBarChart = exports.BarChart = exports.BubbleChart = exports.Heatmap = exports.AreaChart = exports.LineChart = exports.Scatterplot = exports.nodesEdgesFromHierarchy = exports.heatmapping = exports.hexbinning = exports.FacetController = exports.calculateDataExtent = exports.funnelize = exports.Legend = exports.SparkXYFrame = exports.SparkNetworkFrame = exports.SparkOrdinalFrame = exports.ResponsiveXYFrame = exports.ResponsiveNetworkFrame = exports.ResponsiveOrdinalFrame = exports.ResponsiveMinimapXYFrame = exports.NetworkFrame = exports.Annotation = exports.OrdinalFrame = exports.VisualizationLayer = exports.InteractionLayer = exports.Axis = exports.Brush = exports.MiniMap = exports.MinimapXYFrame = exports.XYFrame = exports.DividedLine = exports.AnnotationLayer = void 0;
+exports.normalizeTooltip = exports.MultiLineTooltip = void 0;
+const AnnotationLayer_1 = __importDefault(require("./AnnotationLayer"));
+exports.AnnotationLayer = AnnotationLayer_1.default;
+const DividedLine_1 = __importDefault(require("./DividedLine"));
+exports.DividedLine = DividedLine_1.default;
+const XYFrame_1 = __importDefault(require("./XYFrame"));
+exports.XYFrame = XYFrame_1.default;
+const OrdinalFrame_1 = __importDefault(require("./OrdinalFrame"));
+exports.OrdinalFrame = OrdinalFrame_1.default;
+const MinimapXYFrame_1 = __importDefault(require("./MinimapXYFrame"));
+exports.MinimapXYFrame = MinimapXYFrame_1.default;
+const MiniMap_1 = __importDefault(require("./MiniMap"));
+exports.MiniMap = MiniMap_1.default;
+const Axis_1 = __importDefault(require("./Axis"));
+exports.Axis = Axis_1.default;
+const Legend_1 = __importDefault(require("./Legend"));
+exports.Legend = Legend_1.default;
+const Annotation_1 = __importDefault(require("./Annotation"));
+exports.Annotation = Annotation_1.default;
+const Brush_1 = __importDefault(require("./Brush"));
+exports.Brush = Brush_1.default;
+const InteractionLayer_1 = __importDefault(require("./InteractionLayer"));
+exports.InteractionLayer = InteractionLayer_1.default;
+const VisualizationLayer_1 = __importDefault(require("./VisualizationLayer"));
+exports.VisualizationLayer = VisualizationLayer_1.default;
+const NetworkFrame_1 = __importDefault(require("./NetworkFrame"));
+exports.NetworkFrame = NetworkFrame_1.default;
+const lineDrawing_1 = require("./svg/lineDrawing");
+Object.defineProperty(exports, "funnelize", { enumerable: true, get: function () { return lineDrawing_1.funnelize; } });
+const dataFunctions_1 = require("./data/dataFunctions");
+Object.defineProperty(exports, "calculateDataExtent", { enumerable: true, get: function () { return dataFunctions_1.calculateDataExtent; } });
+const FacetController_1 = __importDefault(require("./FacetController"));
+exports.FacetController = FacetController_1.default;
+const ResponsiveNetworkFrame_1 = require("./ResponsiveNetworkFrame");
+Object.defineProperty(exports, "ResponsiveNetworkFrame", { enumerable: true, get: function () { return ResponsiveNetworkFrame_1.ResponsiveNetworkFrame; } });
+const ResponsiveMinimapXYFrame_1 = require("./ResponsiveMinimapXYFrame");
+Object.defineProperty(exports, "ResponsiveMinimapXYFrame", { enumerable: true, get: function () { return ResponsiveMinimapXYFrame_1.ResponsiveMinimapXYFrame; } });
+const ResponsiveXYFrame_1 = require("./ResponsiveXYFrame");
+Object.defineProperty(exports, "ResponsiveXYFrame", { enumerable: true, get: function () { return ResponsiveXYFrame_1.ResponsiveXYFrame; } });
+const ResponsiveOrdinalFrame_1 = require("./ResponsiveOrdinalFrame");
+Object.defineProperty(exports, "ResponsiveOrdinalFrame", { enumerable: true, get: function () { return ResponsiveOrdinalFrame_1.ResponsiveOrdinalFrame; } });
+const SparkXYFrame_1 = require("./SparkXYFrame");
+Object.defineProperty(exports, "SparkXYFrame", { enumerable: true, get: function () { return SparkXYFrame_1.SparkXYFrame; } });
+const SparkOrdinalFrame_1 = require("./SparkOrdinalFrame");
+Object.defineProperty(exports, "SparkOrdinalFrame", { enumerable: true, get: function () { return SparkOrdinalFrame_1.SparkOrdinalFrame; } });
+const SparkNetworkFrame_1 = require("./SparkNetworkFrame");
+Object.defineProperty(exports, "SparkNetworkFrame", { enumerable: true, get: function () { return SparkNetworkFrame_1.SparkNetworkFrame; } });
+const areaDrawing_1 = require("./svg/areaDrawing");
+Object.defineProperty(exports, "hexbinning", { enumerable: true, get: function () { return areaDrawing_1.hexbinning; } });
+Object.defineProperty(exports, "heatmapping", { enumerable: true, get: function () { return areaDrawing_1.heatmapping; } });
+const network_1 = require("./processing/network");
+Object.defineProperty(exports, "nodesEdgesFromHierarchy", { enumerable: true, get: function () { return network_1.nodesEdgesFromHierarchy; } });
+// Higher-order chart components
+const charts_1 = require("./charts");
+Object.defineProperty(exports, "Scatterplot", { enumerable: true, get: function () { return charts_1.Scatterplot; } });
+Object.defineProperty(exports, "LineChart", { enumerable: true, get: function () { return charts_1.LineChart; } });
+Object.defineProperty(exports, "AreaChart", { enumerable: true, get: function () { return charts_1.AreaChart; } });
+Object.defineProperty(exports, "Heatmap", { enumerable: true, get: function () { return charts_1.Heatmap; } });
+Object.defineProperty(exports, "BubbleChart", { enumerable: true, get: function () { return charts_1.BubbleChart; } });
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return charts_1.BarChart; } });
+Object.defineProperty(exports, "StackedBarChart", { enumerable: true, get: function () { return charts_1.StackedBarChart; } });
+Object.defineProperty(exports, "SwarmPlot", { enumerable: true, get: function () { return charts_1.SwarmPlot; } });
+Object.defineProperty(exports, "BoxPlot", { enumerable: true, get: function () { return charts_1.BoxPlot; } });
+Object.defineProperty(exports, "DotPlot", { enumerable: true, get: function () { return charts_1.DotPlot; } });
+Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return charts_1.PieChart; } });
+Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return charts_1.DonutChart; } });
+Object.defineProperty(exports, "GroupedBarChart", { enumerable: true, get: function () { return charts_1.GroupedBarChart; } });
+Object.defineProperty(exports, "ForceDirectedGraph", { enumerable: true, get: function () { return charts_1.ForceDirectedGraph; } });
+Object.defineProperty(exports, "ChordDiagram", { enumerable: true, get: function () { return charts_1.ChordDiagram; } });
+Object.defineProperty(exports, "SankeyDiagram", { enumerable: true, get: function () { return charts_1.SankeyDiagram; } });
+Object.defineProperty(exports, "TreeDiagram", { enumerable: true, get: function () { return charts_1.TreeDiagram; } });
+Object.defineProperty(exports, "Treemap", { enumerable: true, get: function () { return charts_1.Treemap; } });
+Object.defineProperty(exports, "CirclePack", { enumerable: true, get: function () { return charts_1.CirclePack; } });
+Object.defineProperty(exports, "RealtimeLineChart", { enumerable: true, get: function () { return charts_1.RealtimeLineChart; } });
+Object.defineProperty(exports, "RealtimeBarChart", { enumerable: true, get: function () { return charts_1.RealtimeBarChart; } });
+Object.defineProperty(exports, "RealtimeSwarmChart", { enumerable: true, get: function () { return charts_1.RealtimeSwarmChart; } });
+Object.defineProperty(exports, "RealtimeWaterfallChart", { enumerable: true, get: function () { return charts_1.RealtimeWaterfallChart; } });
+// Tooltip utilities
+const Tooltip_1 = require("./Tooltip/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+Object.defineProperty(exports, "MultiLineTooltip", { enumerable: true, get: function () { return Tooltip_1.MultiLineTooltip; } });
+Object.defineProperty(exports, "normalizeTooltip", { enumerable: true, get: function () { return Tooltip_1.normalizeTooltip; } });
+exports.default = {
+    AnnotationLayer: AnnotationLayer_1.default,
+    DividedLine: DividedLine_1.default,
+    XYFrame: XYFrame_1.default,
+    MinimapXYFrame: MinimapXYFrame_1.default,
+    MiniMap: MiniMap_1.default,
+    Brush: Brush_1.default,
+    Axis: Axis_1.default,
+    InteractionLayer: InteractionLayer_1.default,
+    VisualizationLayer: VisualizationLayer_1.default,
+    OrdinalFrame: OrdinalFrame_1.default,
+    Annotation: Annotation_1.default,
+    NetworkFrame: NetworkFrame_1.default,
+    ResponsiveMinimapXYFrame: ResponsiveMinimapXYFrame_1.ResponsiveMinimapXYFrame,
+    ResponsiveOrdinalFrame: ResponsiveOrdinalFrame_1.ResponsiveOrdinalFrame,
+    ResponsiveNetworkFrame: ResponsiveNetworkFrame_1.ResponsiveNetworkFrame,
+    ResponsiveXYFrame: ResponsiveXYFrame_1.ResponsiveXYFrame,
+    SparkOrdinalFrame: SparkOrdinalFrame_1.SparkOrdinalFrame,
+    SparkNetworkFrame: SparkNetworkFrame_1.SparkNetworkFrame,
+    SparkXYFrame: SparkXYFrame_1.SparkXYFrame,
+    Legend: Legend_1.default,
+    FacetController: FacetController_1.default,
+    funnelize: lineDrawing_1.funnelize,
+    calculateDataExtent: dataFunctions_1.calculateDataExtent,
+    hexbinning: areaDrawing_1.hexbinning,
+    heatmapping: areaDrawing_1.heatmapping,
+    nodesEdgesFromHierarchy: network_1.nodesEdgesFromHierarchy,
+    // Higher-order chart components
+    Scatterplot: charts_1.Scatterplot,
+    LineChart: charts_1.LineChart,
+    AreaChart: charts_1.AreaChart,
+    Heatmap: charts_1.Heatmap,
+    BubbleChart: charts_1.BubbleChart,
+    BarChart: charts_1.BarChart,
+    StackedBarChart: charts_1.StackedBarChart,
+    SwarmPlot: charts_1.SwarmPlot,
+    BoxPlot: charts_1.BoxPlot,
+    DotPlot: charts_1.DotPlot,
+    PieChart: charts_1.PieChart,
+    DonutChart: charts_1.DonutChart,
+    GroupedBarChart: charts_1.GroupedBarChart,
+    ForceDirectedGraph: charts_1.ForceDirectedGraph,
+    ChordDiagram: charts_1.ChordDiagram,
+    SankeyDiagram: charts_1.SankeyDiagram,
+    TreeDiagram: charts_1.TreeDiagram,
+    Treemap: charts_1.Treemap,
+    CirclePack: charts_1.CirclePack,
+    // Realtime chart components
+    RealtimeLineChart: charts_1.RealtimeLineChart,
+    RealtimeBarChart: charts_1.RealtimeBarChart,
+    RealtimeSwarmChart: charts_1.RealtimeSwarmChart,
+    RealtimeWaterfallChart: charts_1.RealtimeWaterfallChart,
+    // Tooltip utilities
+    Tooltip: Tooltip_1.Tooltip,
+    MultiLineTooltip: Tooltip_1.MultiLineTooltip,
+    normalizeTooltip: Tooltip_1.normalizeTooltip
+};

package/ai/dist/src/components/interactionLayerBehavior/InteractionCanvas.js

@@ -0,0 +1,128 @@
+"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 });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const frameFunctions_1 = require("../svg/frameFunctions");
+exports.default = React.memo(function InteractionCanvas({ width, height, overlayRegions, margin, voronoiHover }) {
+    let canvasRef = (0, react_1.useRef)();
+    (0, react_1.useLayoutEffect)(() => {
+        renderInteractionCanvas(canvasRef.current, voronoiHover, height, width, overlayRegions, margin);
+    }, [width, height, overlayRegions]);
+    return (React.createElement("canvas", { className: "frame-canvas-interaction", ref: (canvas) => {
+            if (canvas != null && canvasRef.current !== canvas) {
+                canvasRef.current = canvas;
+                renderInteractionCanvas(canvas, voronoiHover, height, width, overlayRegions, margin);
+            }
+        }, style: {
+            position: "absolute",
+            left: `0px`,
+            top: `0px`,
+            imageRendering: "pixelated",
+            pointerEvents: "all",
+            opacity: 0
+        }, width: width, height: height }));
+});
+function renderInteractionCanvas(interactionContext, voronoiHover, height, width, overlayRegions, margin) {
+    const canvasMap = new Map();
+    if (interactionContext === null || !overlayRegions)
+        return;
+    const boundCanvasEvent = frameFunctions_1.canvasEvent.bind(null, interactionContext, overlayRegions, canvasMap);
+    interactionContext.onmousemove = (e) => {
+        const overlay = boundCanvasEvent(e);
+        if (overlay?.props?.onMouseEnter) {
+            overlay?.props?.onMouseEnter();
+        }
+        else if (overlay?.props?.children?.[0]) {
+            overlay.props.children[0].props.onMouseEnter();
+        }
+        else {
+            voronoiHover(null);
+        }
+    };
+    interactionContext.onmouseout = () => {
+        voronoiHover(null);
+    };
+    interactionContext.onclick = (e) => {
+        const overlay = boundCanvasEvent(e);
+        if (overlay?.props?.onClick) {
+            overlay?.props?.onClick();
+        }
+        else if (overlay?.props?.children?.[0]) {
+            overlay.props.children[0].props.onClick(e);
+        }
+    };
+    interactionContext.ondblclick = (e) => {
+        const overlay = boundCanvasEvent(e);
+        if (overlay?.props?.onDoubleClick) {
+            overlay?.props?.onDoubleClick();
+        }
+        else if (overlay?.props?.children?.[0]) {
+            overlay.props.children[0].props.onDoubleClick(e);
+        }
+    };
+    const interactionContext2D = interactionContext.getContext("2d", { willReadFrequently: true });
+    interactionContext2D.imageSmoothingEnabled = false;
+    interactionContext2D.setTransform(1, 0, 0, 1, margin.left, margin.top);
+    interactionContext2D.clearRect(-margin.left, -margin.top, width, height);
+    interactionContext2D.lineWidth = 1;
+    overlayRegions.forEach((overlay, oi) => {
+        const interactionRGBA = `rgba(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},255)`;
+        canvasMap.set(interactionRGBA, oi);
+        const props = overlay.props;
+        interactionContext2D.fillStyle = interactionRGBA;
+        interactionContext2D.strokeStyle = interactionRGBA;
+        if (props.d || props.children?.[0]?.props?.d) {
+            const overlayD = props.d || props.children[0].props.d;
+            const transform = props.transform ||
+                props.children?.[0]?.props?.transform ||
+                "translate(0,0)";
+            const [x, y] = transform
+                .replace("translate(", "")
+                .replace(")", "")
+                .split(",")
+                .map(Number);
+            interactionContext2D.translate(x, y);
+            const p = new Path2D(overlayD);
+            interactionContext2D.stroke(p);
+            interactionContext2D.fill(p);
+            interactionContext2D.translate(-x, -y);
+        }
+        else if (props.markType === "rect") {
+            interactionContext2D.fillRect(props.x, props.y, props.width, props.height);
+            interactionContext2D.strokeRect(props.x, props.y, props.width, props.height);
+        }
+    });
+}

package/ai/dist/src/components/processing/InteractionItems.js

@@ -0,0 +1,223 @@
+"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.calculateOverlay = exports.brushEnd = exports.brushing = exports.brushStart = exports.doubleclickVoronoi = exports.clickVoronoi = exports.changeVoronoi = void 0;
+const React = __importStar(require("react"));
+const coordinateNames_1 = require("../constants/coordinateNames");
+const d3_array_1 = require("d3-array");
+const d3_delaunay_1 = require("d3-delaunay");
+const constructDataObject = (d, points) => {
+    if (d === undefined)
+        return d;
+    return d && d.data ? { points, ...d.data, ...d } : { points, ...d };
+};
+const changeVoronoi = (voronoiHover, d, customHoverTypes, customHoverBehavior, points, e) => {
+    //Until semiotic 2
+    const dataObject = constructDataObject(d, points);
+    if (customHoverBehavior)
+        customHoverBehavior(dataObject);
+    if (!d)
+        voronoiHover(null);
+    else if (customHoverTypes === true) {
+        const vorD = Object.assign({}, dataObject);
+        vorD.type = vorD.type === "column-hover" ? "column-hover" : "frame-hover";
+        voronoiHover(vorD, e);
+    }
+    else if (customHoverTypes) {
+        const arrayWrappedHoverTypes = Array.isArray(customHoverTypes)
+            ? customHoverTypes
+            : [customHoverTypes];
+        const mappedHoverTypes = arrayWrappedHoverTypes
+            .map((c) => {
+            const finalC = typeof c === "function" ? c(dataObject) : c;
+            if (!finalC)
+                return undefined;
+            return Object.assign({}, dataObject, finalC);
+        })
+            .filter((d) => d);
+        voronoiHover(mappedHoverTypes, e);
+    }
+};
+exports.changeVoronoi = changeVoronoi;
+const clickVoronoi = (d, customClickBehavior, points, e) => {
+    //Until semiotic 2
+    const dataObject = constructDataObject(d, points);
+    if (customClickBehavior)
+        customClickBehavior(dataObject, e);
+};
+exports.clickVoronoi = clickVoronoi;
+const doubleclickVoronoi = (d, customDoubleClickBehavior, points, e) => {
+    //Until semiotic 2
+    const dataObject = constructDataObject(d, points);
+    if (customDoubleClickBehavior)
+        customDoubleClickBehavior(dataObject, e);
+};
+exports.doubleclickVoronoi = doubleclickVoronoi;
+const brushStart = (e, columnName, data, columnData, interaction) => {
+    if (interaction && interaction.start)
+        interaction.start(e, columnName, data, columnData);
+};
+exports.brushStart = brushStart;
+const brushing = (e, columnName, data, columnData, interaction) => {
+    if (interaction && interaction.during)
+        interaction.during(e, columnName, data, columnData);
+};
+exports.brushing = brushing;
+const brushEnd = (e, columnName, data, columnData, interaction) => {
+    if (interaction && interaction.end)
+        interaction.end(e, columnName, data, columnData);
+};
+exports.brushEnd = brushEnd;
+const calculateOverlay = (props, voronoiHover) => {
+    let voronoiPaths = [];
+    const { xScale, yScale, points, projectedX, showLinePoints, size, overlay, interactionOverflow = { top: 0, bottom: 0, left: 0, right: 0 }, customClickBehavior, customDoubleClickBehavior, customHoverBehavior, hoverAnnotation, margin, advancedSettings = {} } = props;
+    const whichPoints = {
+        top: coordinateNames_1.projectedYTop,
+        bottom: coordinateNames_1.projectedYBottom
+    };
+    const pointerStyle = customClickBehavior || customDoubleClickBehavior
+        ? { cursor: "pointer" }
+        : {};
+    if (points && hoverAnnotation && !overlay) {
+        const { voronoiFilter = () => true } = advancedSettings;
+        const voronoiDataset = [];
+        const voronoiUniqueMap = new Map();
+        for (const d of points) {
+            if (voronoiFilter({ ...d, ...d.data })) {
+                const xValue = Math.floor(xScale(d[projectedX]));
+                const yValue = Math.floor(yScale(showLinePoints && d[whichPoints[showLinePoints]] !== undefined
+                    ? d[whichPoints[showLinePoints]]
+                    : d[coordinateNames_1.projectedYMiddle] !== undefined
+                        ? d[coordinateNames_1.projectedYMiddle]
+                        : d[coordinateNames_1.projectedY]));
+                if (xValue >= 0 - margin.left &&
+                    xValue <= size[0] + margin.right &&
+                    yValue >= 0 - margin.top &&
+                    yValue <= size[1] + margin.bottom &&
+                    xValue !== undefined &&
+                    yValue !== undefined &&
+                    isNaN(xValue) === false &&
+                    isNaN(yValue) === false) {
+                    const pointKey = `${xValue},${yValue}`;
+                    if (!voronoiUniqueMap.has(pointKey)) {
+                        const voronoiPoint = {
+                            ...d,
+                            coincidentPoints: [d],
+                            voronoiX: xValue,
+                            voronoiY: yValue
+                        };
+                        voronoiDataset.push(voronoiPoint);
+                        voronoiUniqueMap.set(pointKey, voronoiPoint);
+                    }
+                    else
+                        voronoiUniqueMap.get(pointKey).coincidentPoints.push(d);
+                }
+            }
+        }
+        let voronoiXExtent = (0, d3_array_1.extent)(voronoiDataset.map((d) => d.voronoiX));
+        let voronoiYExtent = (0, d3_array_1.extent)(voronoiDataset.map((d) => d.voronoiY));
+        if (voronoiXExtent[0] == null || voronoiYExtent == null) {
+            voronoiXExtent = [0, 0];
+            voronoiYExtent = [0, 0];
+        }
+        const voronoiExtent = [
+            Math.min(voronoiXExtent[0] - 5, -interactionOverflow.left),
+            Math.min(voronoiYExtent[0] - 5, -interactionOverflow.top),
+            Math.max(voronoiXExtent[1] + 5, size[0] + interactionOverflow.right),
+            Math.max(voronoiYExtent[1] + 5, size[1] + interactionOverflow.bottom)
+        ];
+        const delaunay = d3_delaunay_1.Delaunay.from(voronoiDataset, (d) => d.voronoiX, (d) => d.voronoiY);
+        const voronoi = delaunay.voronoi(voronoiExtent);
+        voronoiPaths = voronoiDataset.map((d, i) => {
+            let clipPath = null;
+            if (advancedSettings.voronoiClipping) {
+                const circleSize = advancedSettings.voronoiClipping === true
+                    ? 50
+                    : advancedSettings.voronoiClipping;
+                clipPath = (React.createElement("clipPath", { id: `voronoi-${i}` },
+                    React.createElement("circle", { r: circleSize, cx: d.voronoiX, cy: d.voronoiY })));
+            }
+            return (React.createElement("g", { key: `voronoi-${i}` },
+                React.createElement("path", { onClick: (e) => {
+                        (0, exports.clickVoronoi)(voronoiDataset[i], customClickBehavior, points, e);
+                    }, onDoubleClick: (e) => {
+                        (0, exports.doubleclickVoronoi)(voronoiDataset[i], customDoubleClickBehavior, points, e);
+                    }, onMouseEnter: (e) => {
+                        (0, exports.changeVoronoi)(voronoiHover, voronoiDataset[i], hoverAnnotation, customHoverBehavior, points, e);
+                    }, onMouseLeave: (e) => {
+                        (0, exports.changeVoronoi)(voronoiHover, undefined, undefined, customHoverBehavior, undefined, e);
+                    }, key: `interactionVoronoi${i}`, d: voronoi.renderCell(i), style: {
+                        fillOpacity: 0,
+                        ...pointerStyle
+                    }, clipPath: `url(#voronoi-${i})` }),
+                clipPath));
+        }, this);
+        return voronoiPaths;
+    }
+    else if (overlay) {
+        const renderedOverlay = overlay.map((overlayRegion, i) => {
+            const { overlayData, ...rest } = overlayRegion;
+            const overlayProps = {
+                key: `overlay-${i}`,
+                onMouseEnter: (e) => {
+                    (0, exports.changeVoronoi)(voronoiHover, overlayData, props.hoverAnnotation, customHoverBehavior, points, e);
+                },
+                onMouseLeave: (e) => {
+                    (0, exports.changeVoronoi)(voronoiHover, undefined, undefined, customHoverBehavior, undefined, e);
+                },
+                onClick: (e) => {
+                    (0, exports.clickVoronoi)(overlayData, customClickBehavior, points, e);
+                },
+                onDoubleClick: (e) => {
+                    (0, exports.doubleclickVoronoi)(overlayData, customDoubleClickBehavior, points, e);
+                },
+                style: { opacity: 0, ...pointerStyle }
+            };
+            if (React.isValidElement(overlayRegion.renderElement)) {
+                return React.cloneElement(overlayRegion.renderElement, overlayProps);
+            }
+            else {
+                const { markType, ...restProps } = rest;
+                return React.createElement(markType || 'path', {
+                    ...restProps,
+                    key: `overlay-${i}`,
+                    ...overlayProps
+                });
+            }
+        });
+        return renderedOverlay;
+    }
+};
+exports.calculateOverlay = calculateOverlay;

package/ai/dist/src/components/processing/hierarchyUtils.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matrixify = exports.nodesEdgesFromHierarchy = exports.defaultHierarchicalIDAccessor = void 0;
+exports.recursiveIDAccessor = recursiveIDAccessor;
+exports.breadthFirstCompontents = breadthFirstCompontents;
+const d3_hierarchy_1 = require("d3-hierarchy");
+function recursiveIDAccessor(idAccessor, node, accessorString) {
+    if (node.parent) {
+        accessorString = `${accessorString}-${recursiveIDAccessor(idAccessor, { ...node.parent, ...node.parent.data }, accessorString)}`;
+    }
+    return `${accessorString}-${idAccessor({ ...node, ...node.data })}`;
+}
+const defaultHierarchicalIDAccessor = (d) => d.id || d.descendantIndex;
+exports.defaultHierarchicalIDAccessor = defaultHierarchicalIDAccessor;
+const nodesEdgesFromHierarchy = (baseRootNode, idAccessor = exports.defaultHierarchicalIDAccessor) => {
+    const edges = [];
+    const nodes = [];
+    const rootNode = baseRootNode.descendants
+        ? baseRootNode
+        : (0, d3_hierarchy_1.hierarchy)(baseRootNode);
+    const descendants = rootNode.descendants();
+    let i = 0;
+    for (const node of descendants) {
+        node.descendantIndex = i;
+        i++;
+    }
+    for (const node of descendants) {
+        const generatedID = `${idAccessor({
+            ...node,
+            ...node.data
+        }) ?? (0, exports.defaultHierarchicalIDAccessor)(node)}-${node.parent
+            ? recursiveIDAccessor(idAccessor, { ...node.parent, ...node.parent.data }, "") ?? node.parent.name
+            : "root"}`;
+        const dataD = Object.assign(node, node.data || {}, {
+            hierarchicalID: generatedID
+        });
+        nodes.push(dataD);
+        if (node.parent !== null) {
+            const dataParent = Object.assign(node.parent, node.parent.data || {});
+            edges.push({
+                source: dataParent,
+                target: dataD,
+                depth: node.depth,
+                weight: 1,
+                value: 1,
+                _NWFEdgeKey: generatedID
+            });
+        }
+    }
+    return { edges, nodes };
+};
+exports.nodesEdgesFromHierarchy = nodesEdgesFromHierarchy;
+function breadthFirstCompontents(baseNodes, hash) {
+    const componentMap = {
+        "0": { componentNodes: [], componentEdges: [] }
+    };
+    const components = [componentMap["0"]];
+    let componentID = 0;
+    traverseNodesBF(baseNodes, true);
+    function traverseNodesBF(nodes, top) {
+        for (const node of nodes) {
+            const hashNode = hash.get(node);
+            if (!hashNode) {
+                componentMap["0"].componentNodes.push(node);
+            }
+            else if (hashNode.component === -99) {
+                if (top === true) {
+                    componentID++;
+                    componentMap[componentID] = {
+                        componentNodes: [],
+                        componentEdges: []
+                    };
+                    components.push(componentMap[componentID]);
+                }
+                hashNode.component = componentID;
+                componentMap[componentID].componentNodes.push(node);
+                componentMap[componentID].componentEdges.push(...hashNode.edges);
+                const traversibleNodes = [...hashNode.connectedNodes];
+                traverseNodesBF(traversibleNodes, hash);
+            }
+        }
+    }
+    return components.sort((a, b) => b.componentNodes.length - a.componentNodes.length);
+}
+const matrixify = ({ edgeHash, nodes, edgeWidthAccessor, nodeIDAccessor }) => {
+    const matrix = [];
+    for (const nodeSource of nodes) {
+        const nodeSourceID = nodeIDAccessor(nodeSource);
+        const sourceRow = [];
+        matrix.push(sourceRow);
+        for (const nodeTarget of nodes) {
+            const nodeTargetID = nodeIDAccessor(nodeTarget);
+            const theEdge = edgeHash.get(`${nodeSourceID}|${nodeTargetID}`);
+            if (theEdge) {
+                sourceRow.push(edgeWidthAccessor(theEdge));
+            }
+            else {
+                sourceRow.push(0);
+            }
+        }
+    }
+    return matrix;
+};
+exports.matrixify = matrixify;

package/ai/dist/src/components/processing/layouts/chordLayout.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chordLayout = void 0;
+const d3_chord_1 = require("d3-chord");
+const d3_shape_1 = require("d3-shape");
+const svg_path_bounding_box_1 = __importDefault(require("svg-path-bounding-box"));
+const hierarchyUtils_1 = require("../hierarchyUtils");
+const chordLayout = ({ projectedNodes, projectedEdges, networkSettings, adjustedSize, edgeHash, nodeIDAccessor, edgeWidthAccessor }) => {
+    const radius = adjustedSize[1] / 2;
+    const { groupWidth = 20, padAngle = 0.01, sortGroups } = networkSettings;
+    const arcGenerator = (0, d3_shape_1.arc)()
+        .innerRadius(radius - groupWidth)
+        .outerRadius(radius);
+    const ribbonGenerator = (0, d3_chord_1.ribbon)().radius(radius - groupWidth);
+    const matrixifiedNetwork = (0, hierarchyUtils_1.matrixify)({
+        edgeHash: edgeHash,
+        nodes: projectedNodes,
+        edgeWidthAccessor,
+        nodeIDAccessor
+    });
+    const chordGenerator = (0, d3_chord_1.chord)().padAngle(padAngle);
+    if (sortGroups) {
+        chordGenerator.sortGroups(sortGroups);
+    }
+    const chords = chordGenerator(matrixifiedNetwork);
+    const groups = chords.groups;
+    groups.forEach((group) => {
+        const groupCentroid = arcGenerator.centroid(group);
+        const groupD = arcGenerator(group);
+        const groupNode = projectedNodes[group.index];
+        groupNode.d = groupD;
+        groupNode.index = group.index;
+        groupNode.x = groupCentroid[0] + adjustedSize[0] / 2;
+        groupNode.y = groupCentroid[1] + adjustedSize[1] / 2;
+    });
+    chords.forEach((generatedChord) => {
+        const chordD = ribbonGenerator(generatedChord);
+        const nodeSourceID = nodeIDAccessor(projectedNodes[generatedChord.source.index]);
+        const nodeTargetID = nodeIDAccessor(projectedNodes[generatedChord.target.index]);
+        // d3-chord always emits source.index < target.index, which may
+        // not match the original edge direction. Try both key orders.
+        const chordEdge = edgeHash.get(`${nodeSourceID}|${nodeTargetID}`) ||
+            edgeHash.get(`${nodeTargetID}|${nodeSourceID}`);
+        if (chordEdge) {
+            chordEdge.d = chordD;
+            const chordBounds = (0, svg_path_bounding_box_1.default)(chordD);
+            chordEdge.x =
+                adjustedSize[0] / 2 + (chordBounds.x1 + chordBounds.x2) / 2;
+            chordEdge.y =
+                adjustedSize[1] / 2 + (chordBounds.y1 + chordBounds.y2) / 2;
+        }
+    });
+    return { projectedNodes, projectedEdges };
+};
+exports.chordLayout = chordLayout;