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

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

@@ -1,561 +0,0 @@
-"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;