semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/stream/StreamNetworkFrame.js

@@ -0,0 +1,561 @@
+"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 });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const networkTypes_1 = require("./networkTypes");
+const NetworkPipelineStore_1 = require("./NetworkPipelineStore");
+const NetworkCanvasHitTester_1 = require("./NetworkCanvasHitTester");
+const NetworkSVGOverlay_1 = require("./NetworkSVGOverlay");
+// Canvas renderers
+const networkRectRenderer_1 = require("./renderers/networkRectRenderer");
+const networkCircleRenderer_1 = require("./renderers/networkCircleRenderer");
+const networkArcRenderer_1 = require("./renderers/networkArcRenderer");
+const networkEdgeRenderer_1 = require("./renderers/networkEdgeRenderer");
+const networkParticleRenderer_1 = require("./renderers/networkParticleRenderer");
+const colorUtils_1 = require("../charts/shared/colorUtils");
+// ── Defaults ───────────────────────────────────────────────────────────
+const DEFAULT_MARGIN = { top: 20, right: 80, bottom: 20, left: 80 };
+const CENTERED_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+const CENTERED_TYPES = new Set(["chord", "force", "circlepack"]);
+const DEFAULT_SIZE = [800, 600];
+// ── Tooltip ────────────────────────────────────────────────────────────
+const defaultTooltipStyle = {
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    padding: "6px 10px",
+    borderRadius: 4,
+    fontSize: 12,
+    lineHeight: 1.5,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    pointerEvents: "none",
+    whiteSpace: "nowrap"
+};
+function DefaultNetworkTooltip({ data }) {
+    if (data.type === "edge") {
+        const edge = data.data;
+        const sourceId = typeof edge.source === "object" ? edge.source.id : edge.source;
+        const targetId = typeof edge.target === "object" ? edge.target.id : edge.target;
+        return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+            React.createElement("div", { style: { fontWeight: 600 } },
+                sourceId,
+                " \u2192 ",
+                targetId),
+            edge.value != null && (React.createElement("div", { style: { marginTop: 4, opacity: 0.8 } },
+                "Value:",
+                " ",
+                typeof edge.value === "number"
+                    ? edge.value.toLocaleString()
+                    : String(edge.value)))));
+    }
+    const node = data.data;
+    // Hierarchy nodes have a __hierarchyNode with a .parent chain.
+    // Show ancestor breadcrumb: grandparent → parent → **node**
+    const hNode = node?.__hierarchyNode;
+    if (hNode) {
+        const ancestors = [];
+        let cur = hNode;
+        while (cur) {
+            const name = cur.data?.name ?? cur.data?.id ?? node.id;
+            if (name != null)
+                ancestors.unshift(String(name));
+            cur = cur.parent;
+        }
+        // Drop root (first entry) from the breadcrumb — it's usually unnamed
+        if (ancestors.length > 1)
+            ancestors.shift();
+        const last = ancestors.length - 1;
+        return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+            React.createElement("div", null, ancestors.map((name, i) => (React.createElement("span", { key: i },
+                i > 0 && (React.createElement("span", { style: { margin: "0 3px", opacity: 0.5 } }, " → ")),
+                i === last ? (React.createElement("strong", null, name)) : (React.createElement("span", { style: { opacity: 0.7 } }, name)))))),
+            node.value != null && node.value > 0 && (React.createElement("div", { style: { marginTop: 4, opacity: 0.8 } }, typeof node.value === "number"
+                ? node.value.toLocaleString()
+                : String(node.value)))));
+    }
+    // Compute degree centrality from source/target links
+    const degree = (node.sourceLinks?.length || 0) + (node.targetLinks?.length || 0);
+    const weightedDegree = (node.sourceLinks || []).reduce((s, e) => s + (e.value || 0), 0)
+        + (node.targetLinks || []).reduce((s, e) => s + (e.value || 0), 0);
+    return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+        React.createElement("div", { style: { fontWeight: 600 } }, node.id),
+        node.value != null && node.value > 0 && (React.createElement("div", { style: { marginTop: 4, opacity: 0.8 } },
+            "Total:",
+            " ",
+            typeof node.value === "number"
+                ? node.value.toLocaleString()
+                : String(node.value))),
+        degree > 0 && (React.createElement("div", { style: { marginTop: 4, opacity: 0.8 } },
+            "Connections: ",
+            degree,
+            weightedDegree !== degree && ` (weighted: ${weightedDegree.toLocaleString()})`))));
+}
+// ── StreamNetworkFrame ─────────────────────────────────────────────────
+const StreamNetworkFrame = (0, react_1.forwardRef)(function StreamNetworkFrame(props, ref) {
+    const { chartType, nodes: nodesProp, edges: edgesProp, data: dataProp, initialEdges, nodeIDAccessor = "id", sourceAccessor = "source", targetAccessor = "target", valueAccessor = "value", childrenAccessor, hierarchySum, orientation = "horizontal", nodeAlign = "justify", nodePaddingRatio = 0.05, nodeWidth = 15, iterations = 300, forceStrength = 0.1, padAngle = 0.01, groupWidth = 20, sortGroups, edgeSort, treeOrientation = "vertical", edgeType = "curve", padding, paddingTop, tensionConfig: tensionConfigProp, showParticles = false, particleStyle: particleStyleProp, nodeStyle, edgeStyle, colorBy, colorScheme = "category10", edgeColorBy = "source", edgeOpacity = 0.5, colorByDepth = false, nodeSize = 8, nodeSizeRange = [5, 20], nodeLabel, showLabels = true, size = DEFAULT_SIZE, margin: marginProp, className, background, enableHover = true, tooltipContent, onTopologyChange, annotations, svgAnnotationRules, legend, title, foregroundGraphics, backgroundGraphics } = props;
+    const baseMargin = CENTERED_TYPES.has(chartType) ? CENTERED_MARGIN : DEFAULT_MARGIN;
+    const margin = { ...baseMargin, ...marginProp };
+    const adjustedWidth = size[0] - margin.left - margin.right;
+    const adjustedHeight = size[1] - margin.top - margin.bottom;
+    const tensionConfig = (0, react_1.useMemo)(() => ({ ...networkTypes_1.DEFAULT_TENSION_CONFIG, ...tensionConfigProp }), [tensionConfigProp]);
+    const particleStyle = (0, react_1.useMemo)(() => ({ ...networkTypes_1.DEFAULT_PARTICLE_STYLE, ...particleStyleProp }), [particleStyleProp]);
+    // ── Pipeline config ──────────────────────────────────────────────────
+    const pipelineConfig = (0, react_1.useMemo)(() => ({
+        chartType,
+        nodeIDAccessor,
+        sourceAccessor,
+        targetAccessor,
+        valueAccessor,
+        childrenAccessor,
+        hierarchySum,
+        orientation,
+        nodeAlign,
+        nodePaddingRatio,
+        nodeWidth,
+        iterations,
+        forceStrength,
+        padAngle,
+        groupWidth,
+        sortGroups,
+        edgeSort,
+        treeOrientation,
+        edgeType,
+        padding,
+        paddingTop,
+        tensionConfig,
+        showParticles,
+        particleStyle,
+        nodeStyle,
+        edgeStyle,
+        nodeLabel,
+        showLabels,
+        colorBy,
+        colorScheme,
+        edgeColorBy,
+        edgeOpacity,
+        colorByDepth,
+        nodeSize,
+        nodeSizeRange
+    }), [
+        chartType,
+        nodeIDAccessor,
+        sourceAccessor,
+        targetAccessor,
+        valueAccessor,
+        childrenAccessor,
+        hierarchySum,
+        orientation,
+        nodeAlign,
+        nodePaddingRatio,
+        nodeWidth,
+        iterations,
+        forceStrength,
+        padAngle,
+        groupWidth,
+        sortGroups,
+        edgeSort,
+        treeOrientation,
+        edgeType,
+        padding,
+        paddingTop,
+        tensionConfig,
+        showParticles,
+        particleStyle,
+        nodeStyle,
+        edgeStyle,
+        nodeLabel,
+        showLabels,
+        colorBy,
+        colorScheme,
+        edgeColorBy,
+        edgeOpacity,
+        colorByDepth,
+        nodeSize,
+        nodeSizeRange
+    ]);
+    // ── Refs ─────────────────────────────────────────────────────────────
+    const canvasRef = (0, react_1.useRef)(null);
+    const rafRef = (0, react_1.useRef)(0);
+    const lastFrameTimeRef = (0, react_1.useRef)(0);
+    const dirtyRef = (0, react_1.useRef)(true);
+    const renderFnRef = (0, react_1.useRef)(() => { });
+    // ── Store ────────────────────────────────────────────────────────────
+    const storeRef = (0, react_1.useRef)(null);
+    if (!storeRef.current) {
+        storeRef.current = new NetworkPipelineStore_1.NetworkPipelineStore(pipelineConfig);
+    }
+    // ── State ────────────────────────────────────────────────────────────
+    const [hoverData, setHoverData] = (0, react_1.useState)(null);
+    const [layoutVersion, setLayoutVersion] = (0, react_1.useState)(0);
+    const [annotationFrame, setAnnotationFrame] = (0, react_1.useState)(0);
+    const hoverRef = (0, react_1.useRef)(null);
+    // ── Color functions ──────────────────────────────────────────────────
+    const nodeColorMap = (0, react_1.useRef)(new Map());
+    const colorIndexRef = (0, react_1.useRef)(0);
+    const getNodeColor = (0, react_1.useCallback)((node) => {
+        if (typeof colorBy === "function")
+            return colorBy(node);
+        if (typeof colorBy === "string" && node.data) {
+            const val = node.data[colorBy];
+            if (val !== undefined) {
+                if (!nodeColorMap.current.has(String(val))) {
+                    const colors = Array.isArray(colorScheme)
+                        ? colorScheme
+                        : colorUtils_1.DEFAULT_COLORS;
+                    nodeColorMap.current.set(String(val), colors[colorIndexRef.current++ % colors.length]);
+                }
+                return nodeColorMap.current.get(String(val));
+            }
+        }
+        if (!nodeColorMap.current.has(node.id)) {
+            const colors = Array.isArray(colorScheme)
+                ? colorScheme
+                : colorUtils_1.DEFAULT_COLORS;
+            nodeColorMap.current.set(node.id, colors[colorIndexRef.current++ % colors.length]);
+        }
+        return nodeColorMap.current.get(node.id);
+    }, [colorBy, colorScheme]);
+    const getEdgeColor = (0, react_1.useCallback)((edge) => {
+        if (typeof edgeColorBy === "function")
+            return edgeColorBy(edge);
+        const sourceNode = typeof edge.source === "object" ? edge.source : null;
+        const targetNode = typeof edge.target === "object" ? edge.target : null;
+        if (edgeColorBy === "target" && targetNode) {
+            return getNodeColor(targetNode);
+        }
+        if (sourceNode) {
+            return getNodeColor(sourceNode);
+        }
+        return "#999";
+    }, [edgeColorBy, getNodeColor]);
+    const getParticleColor = (0, react_1.useCallback)((edge) => {
+        const colorByMode = particleStyle.colorBy || "source";
+        const sourceNode = typeof edge.source === "object" ? edge.source : null;
+        const targetNode = typeof edge.target === "object" ? edge.target : null;
+        if (colorByMode === "target" && targetNode) {
+            return getNodeColor(targetNode);
+        }
+        if (sourceNode) {
+            return getNodeColor(sourceNode);
+        }
+        return "#999";
+    }, [particleStyle.colorBy, getNodeColor]);
+    // ── Stable scheduleRender ────────────────────────────────────────────
+    const isContinuous = chartType === "sankey" && showParticles;
+    const scheduleRender = (0, react_1.useCallback)(() => {
+        if (rafRef.current && !isContinuous)
+            return;
+        if (!rafRef.current) {
+            rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+        }
+    }, [isContinuous]);
+    // Update config when props change
+    (0, react_1.useEffect)(() => {
+        storeRef.current?.updateConfig(pipelineConfig);
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [pipelineConfig, scheduleRender]);
+    // ── Layout execution ─────────────────────────────────────────────────
+    const runLayout = (0, react_1.useCallback)(() => {
+        const store = storeRef.current;
+        if (!store)
+            return;
+        store.runLayout([adjustedWidth, adjustedHeight]);
+        store.buildScene([adjustedWidth, adjustedHeight]);
+        dirtyRef.current = true;
+        setLayoutVersion(store.layoutVersion);
+        if (onTopologyChange) {
+            const { nodes, edges } = store.getLayoutData();
+            onTopologyChange(nodes, edges);
+        }
+    }, [adjustedWidth, adjustedHeight, onTopologyChange]);
+    // ── Push API ─────────────────────────────────────────────────────────
+    const pushEdge = (0, react_1.useCallback)((edge) => {
+        const store = storeRef.current;
+        if (!store)
+            return;
+        const needsRelayout = store.ingestEdge(edge);
+        if (needsRelayout) {
+            runLayout();
+        }
+        scheduleRender();
+    }, [runLayout, scheduleRender]);
+    const pushManyEdges = (0, react_1.useCallback)((edges) => {
+        const store = storeRef.current;
+        if (!store)
+            return;
+        let needsRelayout = false;
+        for (const edge of edges) {
+            if (store.ingestEdge(edge)) {
+                needsRelayout = true;
+            }
+        }
+        if (needsRelayout) {
+            runLayout();
+        }
+        scheduleRender();
+    }, [runLayout, scheduleRender]);
+    const clearAll = (0, react_1.useCallback)(() => {
+        storeRef.current?.clear();
+        nodeColorMap.current.clear();
+        colorIndexRef.current = 0;
+        setLayoutVersion(0);
+        setHoverData(null);
+        hoverRef.current = null;
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [scheduleRender]);
+    const forceRelayout = (0, react_1.useCallback)(() => {
+        const store = storeRef.current;
+        if (!store)
+            return;
+        store.tension += 999;
+        runLayout();
+        scheduleRender();
+    }, [runLayout, scheduleRender]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        push: pushEdge,
+        pushMany: pushManyEdges,
+        clear: clearAll,
+        getTopology: () => storeRef.current?.getLayoutData() ?? { nodes: [], edges: [] },
+        relayout: forceRelayout,
+        getTension: () => storeRef.current?.tension ?? 0
+    }), [pushEdge, pushManyEdges, clearAll, forceRelayout]);
+    // ── Bounded data ingestion ───────────────────────────────────────────
+    // Determine if this is a hierarchical chart type
+    const isHierarchical = ["tree", "cluster", "treemap", "circlepack", "partition"].includes(chartType);
+    // Resolve hierarchy root: `data` prop or single-object `edges` prop
+    const hierarchyRoot = isHierarchical ? (dataProp || (!Array.isArray(edgesProp) ? edgesProp : undefined)) : undefined;
+    (0, react_1.useEffect)(() => {
+        const store = storeRef.current;
+        if (!store)
+            return;
+        if (isHierarchical && hierarchyRoot) {
+            // Hierarchy data: single root object
+            store.ingestHierarchy(hierarchyRoot, [adjustedWidth, adjustedHeight]);
+            store.buildScene([adjustedWidth, adjustedHeight]);
+            dirtyRef.current = true;
+            scheduleRender();
+        }
+        else {
+            // Graph data: nodes + edges arrays
+            const rawNodes = nodesProp || [];
+            const rawEdges = Array.isArray(edgesProp) ? edgesProp : [];
+            if (rawNodes.length === 0 && rawEdges.length === 0)
+                return;
+            store.ingestBounded(rawNodes, rawEdges, [adjustedWidth, adjustedHeight]);
+            store.buildScene([adjustedWidth, adjustedHeight]);
+            dirtyRef.current = true;
+            scheduleRender();
+        }
+    }, [nodesProp, edgesProp, dataProp, hierarchyRoot, isHierarchical, adjustedWidth, adjustedHeight, pipelineConfig, scheduleRender]);
+    // ── Initial streaming data ───────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        if (initialEdges && initialEdges.length > 0) {
+            pushManyEdges(initialEdges);
+        }
+        // Only run on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // ── Hover handlers ───────────────────────────────────────────────────
+    const hoverHandlerRef = (0, react_1.useRef)(() => { });
+    const hoverLeaveRef = (0, react_1.useRef)(() => { });
+    hoverHandlerRef.current = (e) => {
+        if (!enableHover)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const chartX = e.clientX - rect.left - margin.left;
+        const chartY = e.clientY - rect.top - margin.top;
+        if (chartX < 0 ||
+            chartX > adjustedWidth ||
+            chartY < 0 ||
+            chartY > adjustedHeight) {
+            if (hoverRef.current) {
+                hoverRef.current = null;
+                setHoverData(null);
+                scheduleRender();
+            }
+            return;
+        }
+        const store = storeRef.current;
+        if (!store)
+            return;
+        const hit = (0, NetworkCanvasHitTester_1.findNearestNetworkNode)(store.sceneNodes, store.sceneEdges, chartX, chartY);
+        if (!hit) {
+            if (hoverRef.current) {
+                hoverRef.current = null;
+                setHoverData(null);
+                scheduleRender();
+            }
+            return;
+        }
+        const hover = {
+            type: hit.type,
+            data: hit.datum,
+            x: hit.x,
+            y: hit.y
+        };
+        hoverRef.current = hover;
+        setHoverData(hover);
+        scheduleRender();
+    };
+    hoverLeaveRef.current = () => {
+        if (hoverRef.current) {
+            hoverRef.current = null;
+            setHoverData(null);
+            scheduleRender();
+        }
+    };
+    const onMouseMove = (0, react_1.useCallback)((e) => hoverHandlerRef.current(e), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => hoverLeaveRef.current(), []);
+    // ── Render function ──────────────────────────────────────────────────
+    renderFnRef.current = () => {
+        rafRef.current = 0;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const store = storeRef.current;
+        if (!store)
+            return;
+        const now = performance.now();
+        const deltaTime = lastFrameTimeRef.current
+            ? Math.min((now - lastFrameTimeRef.current) / 1000, 0.1)
+            : 0.016;
+        lastFrameTimeRef.current = now;
+        // Advance transition animation
+        const isTransitioning = store.advanceTransition(now);
+        if (isTransitioning || dirtyRef.current) {
+            // Rebuild scene for current positions
+            store.buildScene([adjustedWidth, adjustedHeight]);
+        }
+        // DPR setup
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = size[0] * dpr;
+        canvas.height = size[1] * dpr;
+        canvas.style.width = `${size[0]}px`;
+        canvas.style.height = `${size[1]}px`;
+        ctx.scale(dpr, dpr);
+        ctx.translate(margin.left, margin.top);
+        ctx.clearRect(-margin.left, -margin.top, size[0], size[1]);
+        // Background
+        if (background) {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
+        }
+        // Render edges first (they go behind nodes)
+        (0, networkEdgeRenderer_1.networkEdgeRenderer)(ctx, store.sceneEdges);
+        // Render nodes
+        (0, networkRectRenderer_1.networkRectRenderer)(ctx, store.sceneNodes);
+        (0, networkCircleRenderer_1.networkCircleRenderer)(ctx, store.sceneNodes);
+        (0, networkArcRenderer_1.networkArcRenderer)(ctx, store.sceneNodes);
+        // Render particles (sankey only)
+        if (showParticles && store.particlePool) {
+            const edges = Array.from(store.edges.values());
+            if (edges.length > 0) {
+                (0, networkParticleRenderer_1.spawnNetworkParticles)(store.particlePool, edges, deltaTime, particleStyle);
+                const speed = (particleStyle.speedMultiplier ?? 1) * 0.5;
+                store.particlePool.step(deltaTime, speed, edges);
+                (0, networkParticleRenderer_1.renderNetworkParticles)(ctx, store.particlePool, edges, particleStyle, getParticleColor);
+            }
+        }
+        const wasDirty = dirtyRef.current;
+        dirtyRef.current = false;
+        // Update SVG overlay when layout changes
+        if (wasDirty || isTransitioning) {
+            setAnnotationFrame((f) => f + 1);
+        }
+        // Schedule next frame for continuous rendering (particles/transitions)
+        if (isContinuous || isTransitioning) {
+            rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+        }
+    };
+    // ── Lifecycle ────────────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        scheduleRender();
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleRender]);
+    (0, react_1.useEffect)(() => {
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [chartType, adjustedWidth, adjustedHeight, background, scheduleRender]);
+    // ── Tooltip ──────────────────────────────────────────────────────────
+    const tooltipElement = enableHover && hoverData ? (React.createElement("div", { className: "stream-network-tooltip", style: {
+            position: "absolute",
+            left: margin.left + hoverData.x,
+            top: margin.top + hoverData.y,
+            transform: `translate(${hoverData.x > adjustedWidth * 0.6
+                ? "calc(-100% - 12px)"
+                : "12px"}, ${hoverData.y < adjustedHeight * 0.3
+                ? "4px"
+                : "calc(-100% - 4px)"})`,
+            pointerEvents: "none",
+            zIndex: 2
+        } }, tooltipContent ? (tooltipContent(hoverData)) : (React.createElement(DefaultNetworkTooltip, { data: hoverData })))) : null;
+    // ── Render ───────────────────────────────────────────────────────────
+    const store = storeRef.current;
+    return (React.createElement("div", { className: `stream-network-frame${className ? ` ${className}` : ""}`, style: {
+            position: "relative",
+            width: size[0],
+            height: size[1]
+        }, onMouseMove: enableHover ? onMouseMove : undefined, onMouseLeave: enableHover ? onMouseLeave : undefined },
+        backgroundGraphics && (React.createElement("svg", { style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: size[0],
+                height: size[1],
+                pointerEvents: "none"
+            } },
+            React.createElement("g", { transform: `translate(${margin.left},${margin.top})` }, backgroundGraphics))),
+        React.createElement("canvas", { ref: canvasRef, style: {
+                position: "absolute",
+                top: 0,
+                left: 0
+            } }),
+        React.createElement(NetworkSVGOverlay_1.NetworkSVGOverlay, { width: adjustedWidth, height: adjustedHeight, totalWidth: size[0], totalHeight: size[1], margin: margin, labels: store?.labels || [], title: title, legend: legend, foregroundGraphics: foregroundGraphics, annotations: annotations, svgAnnotationRules: svgAnnotationRules, annotationFrame: annotationFrame }),
+        tooltipElement));
+});
+StreamNetworkFrame.displayName = "StreamNetworkFrame";
+exports.default = StreamNetworkFrame;