semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/charts/network/ChordDiagram.js

@@ -0,0 +1,245 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChordDiagram = ChordDiagram;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const NetworkFrame_1 = __importDefault(require("../../NetworkFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const hooks_1 = require("../shared/hooks");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+const chordLayout_1 = require("../../processing/layouts/chordLayout");
+/**
+ * ChordDiagram - Visualize directed relationships with circular chord layout
+ *
+ * A simplified wrapper around NetworkFrame for creating chord diagrams.
+ * Perfect for showing flow and relationships between entities, especially
+ * when there are reciprocal connections and self-loops.
+ *
+ * @example
+ * ```tsx
+ * // Simple chord diagram
+ * <ChordDiagram
+ *   edges={[
+ *     {source: 'A', target: 'B', value: 100},
+ *     {source: 'B', target: 'A', value: 80},
+ *     {source: 'A', target: 'A', value: 50}
+ *   ]}
+ *   colorBy={(d) => d.id}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling and padding
+ * <ChordDiagram
+ *   edges={edges}
+ *   nodes={nodes}
+ *   colorBy="category"
+ *   edgeColorBy="source"
+ *   padAngle={0.05}
+ *   groupWidth={30}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With sorting and labels
+ * <ChordDiagram
+ *   edges={edges}
+ *   sortGroups={(a, b) => b.value - a.value}
+ *   nodeLabel="name"
+ *   showLabels={true}
+ * />
+ * ```
+ *
+ * @remarks
+ * This component wraps {@link NetworkFrame} with sensible defaults for chord diagrams.
+ * Chord diagrams work best when there are asymmetric relationships and self-loops.
+ *
+ * **Data Requirements:**
+ * - Edges must have source, target, and value properties
+ * - Self-loops (source === target) are displayed as curved arcs
+ * - Reciprocal edges show the asymmetry in relationships
+ *
+ * **Breadcrumb to advanced usage:**
+ * - Use the `frameProps` prop to pass any NetworkFrame prop
+ * - See NetworkFrame documentation: https://semiotic.nteract.io/guides/network-frame
+ * - All NetworkFrame props are available via `frameProps`
+ *
+ * @param props - ChordDiagram configuration
+ * @returns Rendered chord diagram
+ */
+function ChordDiagram(props) {
+    const { nodes, edges, width = 600, height = 600, margin = { top: 50, bottom: 50, left: 50, right: 50 }, className, title, sourceAccessor = "source", targetAccessor = "target", valueAccessor = "value", nodeIdAccessor = "id", colorBy, colorScheme = "category10", edgeColorBy = "source", padAngle = 0.01, groupWidth = 20, sortGroups, nodeLabel, showLabels = true, enableHover = true, edgeOpacity = 0.5, tooltip, frameProps = {} } = props;
+    // Safe data defaults (hooks must always run)
+    const safeEdges = edges || [];
+    // Infer nodes from edges if not provided
+    const inferredNodes = (0, react_1.useMemo)(() => {
+        if (nodes && nodes.length > 0)
+            return nodes;
+        const nodeSet = new Set();
+        safeEdges.forEach((edge) => {
+            const sourceId = typeof sourceAccessor === "function"
+                ? sourceAccessor(edge)
+                : edge[sourceAccessor];
+            const targetId = typeof targetAccessor === "function"
+                ? targetAccessor(edge)
+                : edge[targetAccessor];
+            nodeSet.add(sourceId);
+            nodeSet.add(targetId);
+        });
+        return Array.from(nodeSet).map((id) => ({ id }));
+    }, [nodes, safeEdges, sourceAccessor, targetAccessor]);
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(inferredNodes, colorBy, colorScheme);
+    // Node style function
+    const nodeStyle = (0, react_1.useMemo)(() => {
+        return (d, i) => {
+            const baseStyle = {
+                stroke: "black",
+                strokeWidth: 1
+            };
+            // Apply color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                // Default: color by index using the color scheme
+                const palette = Array.isArray(colorScheme)
+                    ? colorScheme
+                    : (colorUtils_1.COLOR_SCHEMES[colorScheme] || colorUtils_1.DEFAULT_COLORS);
+                const colors = Array.isArray(palette) ? palette : colorUtils_1.DEFAULT_COLORS;
+                baseStyle.fill = colors[i % colors.length];
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, colorScheme, inferredNodes]);
+    // Edge style function
+    const edgeStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                stroke: "black",
+                strokeWidth: 0.5,
+                fillOpacity: edgeOpacity,
+                strokeOpacity: edgeOpacity
+            };
+            // Apply color based on edge coloring strategy
+            if (typeof edgeColorBy === "function") {
+                baseStyle.fill = edgeColorBy(d);
+            }
+            else if (edgeColorBy === "source") {
+                if (colorBy) {
+                    baseStyle.fill = (0, colorUtils_1.getColor)(d.source, colorBy, colorScale);
+                }
+                else {
+                    baseStyle.fill = nodeStyle(d.source, d.source.index).fill;
+                }
+            }
+            else if (edgeColorBy === "target") {
+                if (colorBy) {
+                    baseStyle.fill = (0, colorUtils_1.getColor)(d.target, colorBy, colorScale);
+                }
+                else {
+                    baseStyle.fill = nodeStyle(d.target, d.target.index).fill;
+                }
+            }
+            return baseStyle;
+        };
+    }, [edgeColorBy, colorBy, colorScale, nodeStyle, edgeOpacity]);
+    // Node label function
+    const nodeLabelFn = (0, react_1.useMemo)(() => {
+        if (!showLabels)
+            return undefined;
+        const accessor = nodeLabel || nodeIdAccessor;
+        return (d) => {
+            if (typeof accessor === "function")
+                return accessor(d);
+            return d[accessor];
+        };
+    }, [showLabels, nodeLabel, nodeIdAccessor]);
+    // Build network type configuration
+    const networkType = (0, react_1.useMemo)(() => {
+        const config = {
+            type: "chord",
+            padAngle,
+            groupWidth
+        };
+        if (sortGroups) {
+            config.sortGroups = sortGroups;
+        }
+        return config;
+    }, [padAngle, groupWidth, sortGroups]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateNetworkData)({
+        componentName: "ChordDiagram",
+        edges,
+        edgesRequired: true,
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "ChordDiagram", message: error, width: width, height: height });
+    // Build NetworkFrame props
+    const networkFrameProps = {
+        size: [width, height],
+        nodes: inferredNodes,
+        edges: safeEdges,
+        nodeStyle,
+        edgeStyle,
+        nodeIDAccessor: nodeIdAccessor,
+        sourceAccessor,
+        targetAccessor,
+        edgeWidthAccessor: valueAccessor,
+        networkType,
+        hoverAnnotation: enableHover,
+        margin,
+        nodeSizeAccessor: () => 5, // Small size for hover target
+        ...(nodeLabelFn && { nodeLabels: nodeLabelFn }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps,
+        _layoutMap: { chord: chordLayout_1.chordLayout }
+    };
+    return React.createElement(NetworkFrame_1.default, { ...networkFrameProps });
+}

package/ai/dist/src/components/charts/network/CirclePack.js

@@ -0,0 +1,177 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CirclePack = CirclePack;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const NetworkFrame_1 = __importDefault(require("../../NetworkFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const hooks_1 = require("../shared/hooks");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+const hierarchyLayout_1 = require("../../processing/layouts/hierarchyLayout");
+/**
+ * CirclePack - Visualize hierarchical data as nested circles.
+ *
+ * A simplified wrapper around NetworkFrame with circlepack layout.
+ * Each circle's area is proportional to its value.
+ *
+ * @example
+ * ```tsx
+ * <CirclePack
+ *   data={{
+ *     name: 'root',
+ *     children: [
+ *       {name: 'A', value: 100},
+ *       {name: 'B', value: 200},
+ *       {name: 'C', value: 150}
+ *     ]
+ *   }}
+ *   colorByDepth
+ * />
+ * ```
+ */
+function CirclePack(props) {
+    const { data, width = 600, height = 600, margin = { top: 10, bottom: 10, left: 10, right: 10 }, className, title, childrenAccessor = "children", valueAccessor = "value", nodeIdAccessor = "name", colorBy, colorScheme = "category10", colorByDepth = false, showLabels = true, nodeLabel, circleOpacity = 0.7, enableHover = true, tooltip, frameProps = {} } = props;
+    // Flatten hierarchy to get all nodes for color scale
+    const allNodes = (0, react_1.useMemo)(() => {
+        if (!data)
+            return [];
+        const nodes = [];
+        const traverse = (node) => {
+            nodes.push(node);
+            const children = typeof childrenAccessor === "function"
+                ? childrenAccessor(node)
+                : node[childrenAccessor];
+            if (children && Array.isArray(children)) {
+                children.forEach(traverse);
+            }
+        };
+        traverse(data);
+        return nodes;
+    }, [data, childrenAccessor]);
+    // Create color scale
+    const colorScale = (0, react_1.useMemo)(() => {
+        if (colorByDepth) {
+            return (0, colorUtils_1.createColorScale)(allNodes.map((_, idx) => ({ depth: idx % 5 })), "depth", colorScheme);
+        }
+        if (!colorBy || typeof colorBy === "function") {
+            return undefined;
+        }
+        return (0, colorUtils_1.createColorScale)(allNodes, colorBy, colorScheme);
+    }, [allNodes, colorBy, colorByDepth, colorScheme]);
+    // Node style function
+    const nodeStyleFn = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                stroke: "currentColor",
+                strokeWidth: 1,
+                strokeOpacity: 0.3,
+                fillOpacity: circleOpacity
+            };
+            if (colorByDepth) {
+                baseStyle.fill = (0, colorUtils_1.getColor)({ depth: d.depth || 0 }, "depth", colorScale);
+            }
+            else if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorByDepth, colorScale, circleOpacity]);
+    // Hierarchy configuration
+    const hierarchyChildren = (0, react_1.useMemo)(() => {
+        if (typeof childrenAccessor === "function") {
+            return childrenAccessor;
+        }
+        return (d) => d[childrenAccessor];
+    }, [childrenAccessor]);
+    const hierarchySum = (0, react_1.useMemo)(() => {
+        if (typeof valueAccessor === "function") {
+            return valueAccessor;
+        }
+        return (d) => d[valueAccessor] || 1;
+    }, [valueAccessor]);
+    // Node label function
+    const nodeLabelFn = (0, react_1.useMemo)(() => {
+        if (!showLabels)
+            return undefined;
+        if (nodeLabel) {
+            if (typeof nodeLabel === "function")
+                return nodeLabel;
+            return (d) => d[nodeLabel];
+        }
+        if (typeof nodeIdAccessor === "function")
+            return nodeIdAccessor;
+        return (d) => d[nodeIdAccessor];
+    }, [showLabels, nodeLabel, nodeIdAccessor]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateObjectData)({
+        componentName: "CirclePack",
+        data,
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "CirclePack", message: error, width: width, height: height });
+    // Build NetworkFrame props
+    const networkFrameProps = {
+        size: [width, height],
+        edges: data,
+        nodeStyle: nodeStyleFn,
+        edgeStyle: () => ({ fill: "none", stroke: "none" }),
+        nodeIDAccessor: nodeIdAccessor,
+        networkType: { type: "circlepack" },
+        hoverAnnotation: enableHover,
+        margin,
+        ...(hierarchyChildren && {
+            hierarchyChildren: hierarchyChildren
+        }),
+        ...(hierarchySum && { hierarchySum: hierarchySum }),
+        ...(nodeLabelFn && { nodeLabels: nodeLabelFn }),
+        ...(className && { className }),
+        ...(title && { title }),
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        transition: true,
+        ...frameProps,
+        _layoutMap: { circlepack: hierarchyLayout_1.hierarchyLayouts.circlepack }
+    };
+    return React.createElement(NetworkFrame_1.default, { ...networkFrameProps });
+}

package/ai/dist/src/components/charts/network/ForceDirectedGraph.js

@@ -0,0 +1,248 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForceDirectedGraph = ForceDirectedGraph;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const NetworkFrame_1 = __importDefault(require("../../NetworkFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const hooks_1 = require("../shared/hooks");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+const forceLayout_1 = require("../../processing/layouts/forceLayout");
+/**
+ * ForceDirectedGraph - Visualize network relationships with force-directed layout
+ *
+ * A simplified wrapper around NetworkFrame for creating force-directed graphs.
+ * Perfect for visualizing connections, communities, and network structures.
+ *
+ * @example
+ * ```tsx
+ * // Simple force-directed graph
+ * <ForceDirectedGraph
+ *   nodes={[
+ *     {id: 'A', label: 'Node A'},
+ *     {id: 'B', label: 'Node B'},
+ *     {id: 'C', label: 'Node C'}
+ *   ]}
+ *   edges={[
+ *     {source: 'A', target: 'B'},
+ *     {source: 'B', target: 'C'}
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With color and size encoding
+ * <ForceDirectedGraph
+ *   nodes={nodes}
+ *   edges={edges}
+ *   colorBy="group"
+ *   nodeSize="connections"
+ *   nodeSizeRange={[5, 25]}
+ *   showLabels={true}
+ *   iterations={500}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Advanced: Override NetworkFrame props
+ * <ForceDirectedGraph
+ *   nodes={nodes}
+ *   edges={edges}
+ *   frameProps={{
+ *     networkType: { type: "force", iterations: 500, edgeStrength: 2 },
+ *     customNodeIcon: ({ d }) => <circle r={10} fill="gold" />
+ *   }}
+ * />
+ * ```
+ *
+ * @remarks
+ * This component wraps {@link NetworkFrame} with sensible defaults for force-directed graphs.
+ * For more advanced features like custom layouts, hierarchical networks, or complex interactions,
+ * use NetworkFrame directly.
+ *
+ * **Breadcrumb to advanced usage:**
+ * - Use the `frameProps` prop to pass any NetworkFrame prop
+ * - See NetworkFrame documentation: https://semiotic.nteract.io/guides/network-frame
+ * - All NetworkFrame props are available via `frameProps`
+ *
+ * @param props - ForceDirectedGraph configuration
+ * @returns Rendered force-directed graph
+ */
+function ForceDirectedGraph(props) {
+    const { nodes, edges, width = 600, height = 600, margin: userMargin, className, title, nodeIDAccessor = "id", sourceAccessor = "source", targetAccessor = "target", nodeLabel, colorBy, colorScheme = "category10", nodeSize = 8, nodeSizeRange = [5, 20], edgeWidth = 1, edgeColor = "#999", edgeOpacity = 0.6, iterations = 300, forceStrength = 0.1, showLabels = false, enableHover = true, showLegend, tooltip, frameProps = {} } = props;
+    // Safe data defaults (hooks must always run)
+    const safeNodes = nodes || [];
+    const safeEdges = edges || [];
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(safeNodes, colorBy, colorScheme);
+    // Calculate node size domain if dynamic sizing
+    const nodeSizeDomain = (0, react_1.useMemo)(() => {
+        if (typeof nodeSize === "number")
+            return undefined;
+        if (!nodeSize)
+            return undefined;
+        const sizes = safeNodes.map((d) => {
+            if (typeof nodeSize === "function") {
+                return nodeSize(d);
+            }
+            return d[nodeSize];
+        });
+        return [Math.min(...sizes), Math.max(...sizes)];
+    }, [safeNodes, nodeSize]);
+    // Node style function
+    const nodeStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {};
+            // Apply color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            // Apply size
+            if (typeof nodeSize === "number") {
+                baseStyle.r = nodeSize;
+            }
+            else if (nodeSize) {
+                baseStyle.r = (0, colorUtils_1.getSize)(d, nodeSize, nodeSizeRange, nodeSizeDomain);
+            }
+            else {
+                baseStyle.r = 8;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, nodeSize, nodeSizeRange, nodeSizeDomain]);
+    // Edge style function
+    const edgeStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                stroke: edgeColor,
+                strokeOpacity: edgeOpacity
+            };
+            // Apply width
+            if (typeof edgeWidth === "number") {
+                baseStyle.strokeWidth = edgeWidth;
+            }
+            else if (typeof edgeWidth === "function") {
+                baseStyle.strokeWidth = edgeWidth(d);
+            }
+            else if (edgeWidth) {
+                baseStyle.strokeWidth = d[edgeWidth];
+            }
+            return baseStyle;
+        };
+    }, [edgeWidth, edgeColor, edgeOpacity]);
+    // Node label function
+    const nodeLabelFn = (0, react_1.useMemo)(() => {
+        if (!showLabels || !nodeLabel)
+            return undefined;
+        return (d) => {
+            if (typeof nodeLabel === "function") {
+                return nodeLabel(d);
+            }
+            return d[nodeLabel];
+        };
+    }, [showLabels, nodeLabel]);
+    // Determine if we should show legend
+    const shouldShowLegend = showLegend !== undefined ? showLegend : !!colorBy;
+    // Build legend if needed
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({
+            data: safeNodes,
+            colorBy,
+            colorScale,
+            getColor: colorUtils_1.getColor
+        });
+    }, [shouldShowLegend, colorBy, safeNodes, colorScale]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 20, bottom: 20, left: 20, right: 20 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        // If legend is present and right margin is too small, increase it
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateNetworkData)({
+        componentName: "ForceDirectedGraph",
+        nodes,
+        edges,
+        nodesRequired: true,
+        edgesRequired: true,
+        accessors: { nodeIDAccessor },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "ForceDirectedGraph", message: error, width: width, height: height });
+    // Build NetworkFrame props
+    const networkFrameProps = {
+        size: [width, height],
+        nodes: safeNodes,
+        edges: safeEdges,
+        nodeIDAccessor,
+        sourceAccessor,
+        targetAccessor,
+        networkType: { type: "force", iterations, edgeStrength: forceStrength },
+        nodeStyle,
+        edgeStyle,
+        hoverAnnotation: enableHover,
+        margin,
+        ...(legend && { legend }),
+        ...(nodeLabelFn && { nodeLabels: nodeLabelFn }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps,
+        _layoutMap: { force: forceLayout_1.forceLayout }
+    };
+    return React.createElement(NetworkFrame_1.default, { ...networkFrameProps });
+}