### Install and Run Solid G6 Playground Locally

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

This bash script outlines the steps to clone the Solid G6 repository, install its dependencies using bun, and start the interactive playground. This is the recommended way to explore the library's features. No specific inputs or outputs are defined, as it's a setup process.

```bash
# Clone the repository
git clone https://github.com/dsnchz/solid-g6.git
cd solid-g6

# Install dependencies
bun install

# Start the playground
bun start

# Open http://localhost:3000 in your browser

```

--------------------------------

### Install Solid G6 Dependencies

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Provides commands for installing the necessary dependencies for Solid G6 using different package managers like npm, pnpm, yarn, and bun.

```bash
# Using npm
npm install @antv/g6 @dschz/solid-g6

# Using pnpm
pnpm install @antv/g6 @dschz/solid-g6

# Using yarn
yarn install @antv/g6 @dschz/solid-g6

# Using bun
bun install @antv/g6 @dschz/solid-g6
```

--------------------------------

### Create a Basic Graph with Solid G6

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

This snippet demonstrates how to initialize and render a simple graph using the Solid G6 library. It defines nodes and edges, and applies a force-directed layout. Dependencies include `@dschz/solid-g6` and `solid-js`. The input is graph data, and the output is a rendered graph component.

```tsx
import { Graph, createGraphData } from "@dschz/solid-g6";
import { createSignal } from "solid-js";

function App() {
  const [graphData] = createSignal(
    createGraphData({
      nodes: [
        { id: "node1", data: { label: "Node 1" } },
        { id: "node2", data: { label: "Node 2" } },
        { id: "node3", data: { label: "Node 3" } },
      ],
      edges: [
        { source: "node1", target: "node2" },
        { source: "node2", target: "node3" },
      ],
    }),
  );

  return (
    <Graph
      data={graphData()}
      layout={{
        type: "force",
        gravity: 1,
        edgeStrength: 0.5,
        nodeStrength: -10,
      }}
      style={{ width: "800px", height: "600px" }}
    />
  );
}

```

--------------------------------

### Create Graph Node Options (TypeScript)

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Demonstrates configuring node styles with `createGraphNodeOptions`, including dynamic styling based on node data and type-safe labeling.

```typescript
import { createGraphNodeOptions } from "@dschz/solid-g6";

const nodeConfig = createGraphNodeOptions<typeof data>({ 
  style: (node) => (
    node.data.category === "important" ? "#ff4d4f" : "#1890ff"
  ),
  labelText: (node) => node.data.label,
});
```

--------------------------------

### Custom Layout Implementation

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Demonstrates registering and using a custom layout algorithm with G6, allowing for specialized graph arrangements and visualizations.

```tsx
// Register custom layout
import { Graph, register } from "@dschz/solid-g6";

register("custom-layout", CustomLayoutAlgorithm);

// Use in graph
<Graph
  layout={{
    type: "custom-layout",
    customParam: "value",
  }}
/>;
```

--------------------------------

### Real-time Graph Updates with SolidJS Signals

Source: https://context7.com/dsnchz/solid-g6/llms.txt

This component demonstrates how to create a live network monitor using SolidJS signals. It initializes graph data, simulates real-time updates to node loads and statuses using `setInterval`, and dynamically adds or removes nodes and edges. The graph is rendered using the `Graph` component from `@dschz/solid-g6`, with node and edge styling that reacts to the changing data.

```tsx
import { Graph, createGraphData } from "@dschz/solid-g6";
import { createSignal, createEffect } from "solid-js";

function LiveNetworkMonitor() {
  // Reactive data state
  const [graphData, setGraphData] = createSignal(
    createGraphData({
      nodes: [
        { id: "server1", data: { label: "Server 1", status: "healthy", load: 45 } },
        { id: "server2", data: { label: "Server 2", status: "healthy", load: 30 } },
        { id: "server3", data: { label: "Server 3", status: "healthy", load: 60 } }
      ],
      edges: [
        { source: "server1", target: "server2", data: { latency: 5 } },
        { source: "server2", target: "server3", data: { latency: 3 } }
      ]
    })
  );

  // Simulate real-time updates
  setInterval(() => {
    const currentData = graphData();
    const updatedNodes = currentData.nodes?.map(node => ({
      ...node,
      data: {
        ...node.data,
        load: Math.random() * 100,
        status: Math.random() > 0.8 ? "warning" : "healthy"
      }
    }));

    setGraphData(createGraphData({
      nodes: updatedNodes || [],
      edges: currentData.edges || []
    }));
  }, 2000);

  // Add new server dynamically
  const addServer = () => {
    const current = graphData();
    const newId = `server${(current.nodes?.length || 0) + 1}`;

    setGraphData(createGraphData({
      nodes: [
        ...(current.nodes || []),
        {
          id: newId,
          data: { label: `Server ${newId}`, status: "healthy", load: 20 }
        }
      ],
      edges: [
        ...(current.edges || []),
        {
          source: current.nodes?.[current.nodes.length - 1]?.id || "server1",
          target: newId,
          data: { latency: Math.floor(Math.random() * 10) }
        }
      ]
    }));
  };

  // Remove last server
  const removeServer = () => {
    const current = graphData();
    if (!current.nodes || current.nodes.length <= 1) return;

    const lastNodeId = current.nodes[current.nodes.length - 1].id;

    setGraphData(createGraphData({
      nodes: current.nodes.slice(0, -1),
      edges: current.edges?.filter(
        e => e.source !== lastNodeId && e.target !== lastNodeId
      ) || []
    }));
  };

  return (
    <div>
      <div style={{ padding: "20px" }}>
        <button onClick={addServer}>Add Server</button>
        <button onClick={removeServer}>Remove Server</button>
      </div>

      <Graph
        data={graphData()}
        width={1000}
        height={600}
        layout={{
          type: "force",
          gravity: 5,
          linkDistance: 150,
          animate: true
        }}
        node={{
          type: "circle",
          style: {
            // Dynamic styling based on real-time data
            fill: (d) => {
              const load = d.data?.load || 0;
              if (load > 80) return "#ff4d4f";
              if (load > 50) return "#faad14";
              return "#52c41a";
            },
            stroke: (d) => d.data?.status === "warning" ? "#ff4d4f" : "#ffffff",
            lineWidth: 3,
            r: (d) => 20 + (d.data?.load || 0) / 5,
            labelText: (d) => `${d.data?.label}\n${Math.round(d.data?.load || 0)}%`,
            labelFill: "#ffffff",
            labelFontSize: 11
          }
        }}
        edge={{
          style: {
            labelText: (d) => `${d.data?.latency}ms`,
            labelFill: "#666666",
            labelFontSize: 10
          }
        }}
        behaviors={["zoom-canvas", "drag-canvas", "drag-element"]}
      />
    </div>
  );
}

```

--------------------------------

### Create Graph Layouts with Different Algorithms

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Configure various graph layout algorithms including force-directed, DAGRE, circular, clustered, and grid layouts with type-safe parameters. Each layout supports specific configuration options for controlling node positioning and visual arrangement. Requires importing createGraphLayout from @dschz/solid-g6.

```tsx
import { createGraphLayout, createGraphData, Graph } from "@dschz/solid-g6";

// Force-directed layout with physics simulation
const forceLayout = createGraphLayout({
  type: "force",
  gravity: 10,
  linkDistance: 150,
  nodeStrength: -1000,
  edgeStrength: 200,
  coulombDisScale: 0.005,
  damping: 0.9,
  preventOverlap: true,
  nodeSpacing: 10,
  maxSpeed: 200,
  animate: true
});

// Hierarchical directed graph layout
const dagLayout = createGraphLayout({
  type: "dagre",
  rankdir: "TB", // Top to Bottom
  align: "UL", // Upper Left alignment
  nodesep: 50,
  ranksep: 80,
  controlPoints: true
});

// Circular layout with radius control
const circularLayout = createGraphLayout({
  type: "circular",
  radius: 250,
  startAngle: 0,
  endAngle: Math.PI * 2,
  divisions: 1,
  ordering: "degree"
});

// Force layout with clustering
const clusterLayout = createGraphLayout({
  type: "force",
  gravity: 5,
  linkDistance: 100,
  clustering: true,
  clusterNodeStrength: -5,
  clusterEdgeStrength: 0.1,
  nodeClusterBy: "cluster", // Group by node.data.cluster
  preventOverlap: true
});

// Grid layout for regular arrangement
const gridLayout = createGraphLayout({
  type: "grid",
  rows: 4,
  cols: 5,
  sortBy: "id",
  nodeSize: 40,
  preventOverlap: true
});

const myData = createGraphData({
  nodes: [
    { id: "1", data: { label: "A", cluster: "group1" } },
    { id: "2", data: { label: "B", cluster: "group1" } },
    { id: "3", data: { label: "C", cluster: "group2" } },
    { id: "4", data: { label: "D", cluster: "group2" } }
  ],
  edges: [
    { source: "1", target: "2" },
    { source: "3", target: "4" },
    { source: "2", target: "3" }
  ]
});

// Use different layouts in components
function ForceGraph() {
  return <Graph data={myData} width={800} height={600} layout={forceLayout} />;
}

function HierarchyGraph() {
  return <Graph data={myData} width={800} height={600} layout={dagLayout} />;
}

function ClusteredGraph() {
  return <Graph data={myData} width={800} height={600} layout={clusterLayout} />;
}
```

--------------------------------

### Basic Network Graph Rendering with @dschz/solid-g6

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Demonstrates how to use the `Graph` component to render a basic network visualization. It includes defining graph data, layout, node and edge styles, behaviors, and event handlers. The `createGraphData` utility is used for data preparation.

```tsx
import { Graph, createGraphData } from "@dschz/solid-g6";

function BasicNetworkGraph() {
  const graphData = createGraphData({
    nodes: [
      { id: "node1", data: { label: "Frontend", category: "web" } },
      { id: "node2", data: { label: "Backend", category: "server" } },
      { id: "node3", data: { label: "Database", category: "storage" } }
    ],
    edges: [
      { source: "node1", target: "node2" },
      { source: "node2", target: "node3" }
    ]
  });

  return (
    <Graph
      width={800}
      height={600}
      data={graphData}
      layout={{
        type: "force",
        gravity: 10,
        edgeStrength: 0.5,
        nodeStrength: -1000,
        linkDistance: 200
      }}
      node={{
        type: "circle",
        style: {
          fill: "#1890ff",
          stroke: "#ffffff",
          lineWidth: 2,
          r: 25,
          labelText: (d) => d.data?.label,
          labelFill: "#ffffff",
          labelFontSize: 14
        }
      }}
      edge={{
        style: {
          stroke: "#d9d9d9",
          lineWidth: 2,
          endArrow: true
        }
      }}
      behaviors={["zoom-canvas", "drag-canvas", "drag-element"]}
      events={{
        "node:click": (e) => console.log("Clicked node:", e.itemId),
        "edge:mouseenter": (e) => console.log("Hovering edge:", e.itemId)
      }}
      onReady={(graph) => console.log("Graph ready!", graph)}
    />
  );
}

```

--------------------------------

### Create Graph Edge Options (TypeScript)

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Shows how to use `createGraphEdgeOptions` to style edges, including stroke color, width, and dynamic labeling.

```typescript
import { createGraphEdgeOptions } from "@dschz/solid-g6";

const edgeConfig = createGraphEdgeOptions<typeof data>({ 
  style: {
    stroke: "#e6f7ff",
    strokeWidth: 2,
  },
  labelText: (edge) => edge.data?.label,
});
```

--------------------------------

### Responsive Design

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Shows how to implement responsive design for G6 graphs by setting width and height styles and leveraging the graph's automatic layout adjustments.

```tsx
<Graph
  style={{
    width: "100%",
    height: "60vh",
    "min-width": "300px",
    "min-height": "400px",
  }}
  layout={{
    type: "force",
    // Layout automatically adjusts for container size
  }}
/>
```

--------------------------------

### Create Graph Configuration in TypeScript

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Demonstrates how to create a comprehensive graph configuration for a project management dashboard. Includes node, edge, and combo styling, layout settings, and interaction behaviors.

```tsx
import { createGraphOptions, Graph } from "@dschz/solid-g6";

// Complete configuration for a project management dashboard
const projectDashboardConfig = createGraphOptions({
  // Canvas dimensions
  width: 1200,
  height: 800,

  // Graph data
  data: {
    nodes: [
      {
        id: "epic1",
        data: { label: "Authentication Epic", type: "epic", priority: "high" },
        combo: "frontend"
      },
      {
        id: "story1",
        data: { label: "Login UI", type: "story", priority: "high" },
        combo: "frontend"
      },
      {
        id: "story2",
        data: { label: "OAuth Integration", type: "story", priority: "medium" },
        combo: "backend"
      },
      {
        id: "bug1",
        data: { label: "Fix Token Refresh", type: "bug", priority: "critical" },
        combo: "backend"
      }
    ],
    edges: [
      { source: "epic1", target: "story1" },
      { source: "epic1", target: "story2" },
      { source: "story2", target: "bug1" }
    ],
    combos: [
      { id: "frontend", data: { label: "Frontend Team" } },
      { id: "backend", data: { label: "Backend Team" } }
    ]
  },

  // Node styling with data-aware functions
  node: {
    type: "rect",
    style: {
      fill: (d) => {
        if (d.data?.type === "epic") return "#722ed1";
        if (d.data?.type === "bug") return "#ff4d4f";
        return "#1890ff";
      },
      stroke: "#ffffff",
      lineWidth: 2,
      width: 140,
      height: 40,
      radius: 6,
      labelText: (d) => d.data?.label || "",
      labelFill: "#ffffff",
      labelFontSize: 12
    },
    state: {
      hover: { shadowColor: "#000000", shadowBlur: 10 },
      selected: { stroke: "#faad14", lineWidth: 4 }
    }
  },

  // Edge styling
  edge: {
    type: "polyline",
    style: {
      stroke: "#8c8c8c",
      lineWidth: 2,
      endArrow: true,
      radius: 10
    }
  },

  // Combo styling
  combo: {
    type: "rect",
    style: {
      fill: "#f5f5f5",
      stroke: "#d9d9d9",
      lineWidth: 2,
      radius: 8,
      labelText: (d) => d.data?.label || "",
      labelFontSize: 14,
      labelFontWeight: "bold",
      padding: [30, 20, 20, 20]
    }
  },

  // Layout algorithm
  layout: {
    type: "dagre",
    rankdir: "TB",
    nodesep: 40,
    ranksep: 70,
    controlPoints: true
  },

  // Interaction behaviors
  behaviors: [
    "zoom-canvas",
    "drag-canvas",
    "drag-element",
    { type: "click-select", multiple: true },
    "hover-activate"
  ],

  // Additional options
  autoResize: true,
  background: "#fafafa"
});

// Multiple configuration variants
const compactConfig = createGraphOptions({
  width: 600,
  height: 400,
  data: projectDashboardConfig.data,
  layout: { type: "circular", radius: 150 },
  node: {
    type: "circle",
    style: { fill: "#1890ff", r: 20 }
  },
  behaviors: ["zoom-canvas", "drag-canvas"]
});

// Usage in components - ultra-clean
function ProjectDashboard() {
  return <Graph {...projectDashboardConfig} />;
}

function CompactView() {
  return <Graph {...compactConfig} />;
}

// Can still override specific options
function CustomDashboard() {
  return (
    <Graph
      {...projectDashboardConfig}
      width={1600}
      onReady={(graph) => {
        graph.fitView({ padding: [50, 50, 50, 50] });
      }}
    />
  );
}
```

--------------------------------

### Create Graph Behaviors (TypeScript)

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Demonstrates defining interactive behaviors for the graph using `createGraphBehaviors`, providing a user-friendly interface.

```typescript
import { createGraphBehaviors } from "@dschz/solid-g6";

const behaviors = createGraphBehaviors(["drag-canvas", "zoom-canvas", "drag-element"]);
```

--------------------------------

### Event Handling

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Demonstrates how to handle events such as node clicks, edge hovers, and canvas drags, enabling interactive graph manipulation and user feedback.

```tsx
<Graph
  events={{
    "node:click": (event) => {
      console.log("Node clicked:", event.itemId);
    },
    "edge:hover": (event) => {
      console.log("Edge hovered:", event.itemId);
    },
    "canvas:drag": (event) => {
      console.log("Canvas dragged");
    },
  }}
/>
```

--------------------------------

### Create Graph Layout (TypeScript)

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Shows how to use `createGraphLayout` to configure a graph layout with type inference for enhanced code clarity and error prevention.

```typescript
import { createGraphLayout } from "@dschz/solid-g6";

const layout = createGraphLayout({
  type: "force",
  gravity: 1,
  clustering: true,
  clusterNodeStrength: -5,
});
```

--------------------------------

### Accessing Graph Instance with Context API

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Hook-based API for accessing graph instance, data, and options within components. Enables programmatic graph interactions and dynamic updates. Requires useGraph hook from @dschz/solid-g6.

```tsx
import { useGraph } from "@dschz/solid-g6";

function GraphComponent() {
  const { graph, graphData, setGraphOptions } = useGraph();

  // Access graph instance
  const g = graph();

  // Get current data
  const data = graphData();

  // Update options
  await setGraphOptions({ layout: { type: "circular" } });
}
```

--------------------------------

### G6 vs Solid G6 TypeScript Configuration

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Compares the configuration of a graph using the standard G6 library with TypeScript versus the enhanced approach provided by Solid G6. Highlights the benefits of generics and data inference in Solid G6 for improved autocomplete and type safety.

```tsx
// Before: G6 with TypeScript (lacks generics & data inference)
const graph = new G6Graph({
  container: containerRef,
  data: myData, // Basic typing, no data shape inference
  layout: { type: "force", gravity: 1 }, // Layout options typed, but not connected to data
  node: {
    style: {
      labelText: (d) => d.data?.label, // 'd.data' is 'unknown' - no autocomplete
    },
  },
});

// After: Solid G6 (adds generics & cross-field inference)
const data = createGraphData({
  nodes: [{ id: "1", data: { label: "Node 1", category: "important" } }],
  edges: [{ source: "1", target: "2" }],
});

const nodeConfig = createGraphNodeOptions<typeof data>({
  style: {
    labelText: (d) => d.data.label, // Full autocomplete - knows 'label' exists
    fill: (d) => (d.data.category === "important" ? "red" : "blue"), // 'category' typed
  },
});

<Graph data={data} node={nodeConfig} />;
```

--------------------------------

### Event Handling Implementation - solid-g6

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Complete event handling implementation for solid-g6 showing node, edge, canvas, and lifecycle events. Includes real-time state management with selected nodes, hovered edges, and click tracking. Features preventDefault for context menus and graph lifecycle callbacks.

```tsx
import { Graph, createGraphData } from "@dschz/solid-g6";
import { createSignal } from "solid-js";

function EventDrivenGraph() {
  const [selectedNode, setSelectedNode] = createSignal<string | null>(null);
  const [hoveredEdge, setHoveredEdge] = createSignal<string | null>(null);
  const [clickCount, setClickCount] = createSignal(0);

  const graphData = createGraphData({
    nodes: [
      { id: "A", data: { label: "Node A" } },
      { id: "B", data: { label: "Node B" } },
      { id: "C", data: { label: "Node C" } }
    ],
    edges: [
      { id: "e1", source: "A", target: "B" },
      { id: "e2", source: "B", target: "C" }
    ]
  });

  return (
    <div>
      <Graph
        data={graphData}
        width={800}
        height={600}
        layout={{ type: "circular" }}
        events={{
          // Node events
          "node:click": (e) => {
            console.log("Node clicked:", e.itemId);
            setSelectedNode(e.itemId);
            setClickCount(c => c + 1);
          },
          "node:dblclick": (e) => {
            console.log("Node double-clicked:", e.itemId);
            alert(`Double clicked: ${e.itemId}`);
          },
          "node:mouseenter": (e) => {
            console.log("Mouse entered node:", e.itemId);
          },
          "node:mouseleave": (e) => {
            console.log("Mouse left node:", e.itemId);
          },
          "node:contextmenu": (e) => {
            e.preventDefault();
            console.log("Right-clicked node:", e.itemId);
          },

          // Edge events
          "edge:click": (e) => {
            console.log("Edge clicked:", e.itemId);
          },
          "edge:mouseenter": (e) => {
            setHoveredEdge(e.itemId);
          },
          "edge:mouseleave": (e) => {
            setHoveredEdge(null);
          },

          // Canvas events
          "canvas:click": (e) => {
            console.log("Canvas clicked at:", e.canvas.x, e.canvas.y);
            setSelectedNode(null);
          },
          "canvas:drag": (e) => {
            console.log("Canvas dragged");
          },

          // Graph lifecycle events
          "afterrender": (e) => {
            console.log("Graph rendered");
          },
          "afterlayout": (e) => {
            console.log("Layout complete");
          }
        }}
        onInit={(graph) => {
          console.log("Graph initialized");
          // Access G6 graph instance for advanced operations
          graph.fitView();
        }}
        onReady={(graph) => {
          console.log("Graph ready for interaction");
          // Perform post-render operations
        }}
        onDestroy={() => {
          console.log("Graph destroyed - cleanup complete");
        }}
      />

      <div style={{ padding: "20px" }}>
        <p>Selected Node: {selectedNode() || "None"}</p>
        <p>Hovered Edge: {hoveredEdge() || "None"}</p>
        <p>Total Clicks: {clickCount()}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### Create Graph Interaction Behaviors

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Configure various interaction behaviors for graph elements and canvas manipulation including zoom, drag, selection, and editing capabilities. Supports both simple string-based behaviors and complex configuration objects with custom styling and triggers. Requires importing createGraphBehaviors from @dschz/solid-g6.

```tsx
import { createGraphBehaviors, Graph, createGraphData } from "@dschz/solid-g6";

// Basic interaction behaviors
const basicBehaviors = createGraphBehaviors([
  "zoom-canvas",      // Mouse wheel zoom
  "drag-canvas",      // Drag to pan
  "drag-element"      // Drag nodes and combos
]);

// Advanced interaction with configuration
const advancedBehaviors = createGraphBehaviors([
  { type: "zoom-canvas", enableOptimize: true },
  { type: "drag-canvas", enableOptimize: true },
  {
    type: "drag-element",
    enableTransient: false,
    enableDelegate: true
  },
  {
    type: "click-select",
    multiple: true,
    trigger: "ctrl"
  },
  "brush-select",      // Rectangular brush selection
  "hover-activate",    // Highlight on hover
  "collapse-expand"    // Expand/collapse tree nodes
]);

// Selection-focused behaviors
const selectionBehaviors = createGraphBehaviors([
  {
    type: "click-select",
    multiple: true,
    trigger: "shift"
  },
  {
    type: "brush-select",
    brushStyle: {
      fill: "#1890ff",
      fillOpacity: 0.2,
      stroke: "#1890ff",
      lineWidth: 2
    }
  },
  {
    type: "lasso-select",
    trigger: "drag"
  }
]);

// Canvas-only behaviors (no element interaction)
const viewOnlyBehaviors = createGraphBehaviors([
  "zoom-canvas",
  "drag-canvas",
  "scroll-canvas"
]);

// Edge creation behavior
const editorBehaviors = createGraphBehaviors([
  "zoom-canvas",
  "drag-canvas",
  "drag-element",
  {
    type: "create-edge",
    trigger: "click",
    edgeConfig: {
      style: { stroke: "#1890ff", lineWidth: 2 }
    }
  }
]);

const graphData = createGraphData({
  nodes: [
    { id: "1", data: { label: "Node 1" } },
    { id: "2", data: { label: "Node 2" } },
    { id: "3", data: { label: "Node 3" } }
  ],
  edges: [{ source: "1", target: "2" }]
});

// Apply different behavior sets
function InteractiveGraph() {
  return (
    <Graph
      data={graphData}
      width={800}
      height={600}
      behaviors={advancedBehaviors}
    />
  );
}

function SelectableGraph() {
  return (
    <Graph
      data={graphData}
      width={800}
      height={600}
      behaviors={selectionBehaviors}
    />
  );
}

function ViewOnlyGraph() {
  return (
    <Graph
      data={graphData}
      width={800}
      height={600}
      behaviors={viewOnlyBehaviors}
    />
  );
}
```

--------------------------------

### Create Graph Node Options in TSX

Source: https://context7.com/dsnchz/solid-g6/llms.txt

This function configures node styles and behaviors with full type inference based on graph data. It requires the @dschz/solid-g6 library and typed graph data as input. Produces a configuration object for graph rendering, with limitations on supported style properties and state definitions.

```tsx
import { createGraphData, createGraphNodeOptions, Graph } from "@dschz/solid-g6";

// Define data structure first
const projectData = createGraphData({
  nodes: [
    { id: "1", data: { label: "Planning", status: "complete", size: 40 } },
    { id: "2", data: { label: "Development", status: "in-progress", size: 50 } },
    { id: "3", data: { label: "Testing", status: "pending", size: 30 } },
    { id: "4", data: { label: "Deployment", status: "pending", size: 35 } }
  ],
  edges: [
    { source: "1", target: "2" },
    { source: "2", target: "3" },
    { source: "3", target: "4" }
  ]
});

// Create type-safe node configuration with auto-complete for custom data
const nodeConfig = createGraphNodeOptions<typeof projectData>({
  type: "rect",
  style: {
    // Dynamic styling based on node data - full auto-complete available
    fill: (d) => {
      switch (d.data?.status) {
        case "complete": return "#52c41a";
        case "in-progress": return "#1890ff";
        case "pending": return "#d9d9d9";
        default: return "#f0f0f0";
      }
    },
    stroke: (d) => d.data?.status === "in-progress" ? "#096dd9" : "#8c8c8c",
    lineWidth: 2,
    width: (d) => d.data?.size || 40,
    height: 30,
    radius: 4,
    // Label with type-safe data access
    labelText: (d) => d.data?.label || "",
    labelFill: (d) => d.data?.status === "pending" ? "#666666" : "#ffffff",
    labelFontSize: 12,
    labelFontWeight: "bold"
  },
  state: {
    hover: {
      fill: "#40a9ff",
      stroke: "#096dd9",
      lineWidth: 3
    },
    selected: {
      stroke: "#722ed1",
      lineWidth: 4,
      shadowColor: "#722ed1",
      shadowBlur: 10
    }
  }
});

function ProjectGraph() {
  return (
    <Graph
      data={projectData}
      width={800}
      height={400}
      layout={{ type: "dagre", rankdir: "LR", nodesep: 50 }}
      node={nodeConfig}
      behaviors={["zoom-canvas", "drag-canvas", "click-select"]}
    />
  );
}
```

--------------------------------

### Styling Graph Elements with Themes

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Customize visual properties of nodes, edges, and combos using style configurations. Supports hover and selected states for interactive feedback. Requires Graph component from @dschz/solid-g6.

```tsx
<Graph
  node={{
    style: { fill: "#1890ff", stroke: "#096dd9", lineWidth: 2 },
    labelStyle: { fontSize: 12, fontWeight: "bold" },
    state: {
      hover: { fill: "#40a9ff" },
      selected: { stroke: "#722ed1", lineWidth: 3 },
    },
  }}
  edge={{
    style: { stroke: "#d9d9d9", lineWidth: 1 },
    labelStyle: { background: "white", padding: [2, 4] },
  }}
  combo={{
    style: { fill: "#f0f0f0", stroke: "#d9d9d9" },
    labelStyle: { fontSize: 14, fontWeight: "bold" },
  }}
/>
```

--------------------------------

### Graph Control with useGraph Hook in SolidJS

Source: https://context7.com/dsnchz/solid-g6/llms.txt

Illustrates using the `useGraph` hook to access and manipulate the graph instance within child components. It shows how to dynamically change layout, zoom to fit the view, and retrieve graph data, enhancing interactivity.

```tsx
import { Graph, useGraph, createGraphData } from "@dschz/solid-g6";
import { createSignal } from "solid-js";

function GraphControls() {
  const { graph, graphData, setGraphOptions } = useGraph();

  const changeToCircularLayout = async () => {
    await setGraphOptions({
      layout: {
        type: "circular",
        radius: 200,
        startAngle: 0,
        endAngle: Math.PI * 2
      }
    });
  };

  const changeToGridLayout = async () => {
    await setGraphOptions({
      layout: {
        type: "grid",
        rows: 3,
        cols: 3,
        sortBy: "id"
      }
    });
  };

  const zoomToFit = () => {
    const g = graph();
    g.fitView({ padding: [20, 20, 20, 20] });
  };

  const getCurrentNodeCount = () => {
    const data = graphData();
    return data.nodes?.length || 0;
  };

  return (
    <div style={{ padding: "20px" }}>
      <button onClick={changeToCircularLayout}>Circular Layout</button>
      <button onClick={changeToGridLayout}>Grid Layout</button>
      <button onClick={zoomToFit}>Zoom to Fit</button>
      <p>Nodes: {getCurrentNodeCount()}</p>
    </div>
  );
}

function App() {
  const data = createGraphData({
    nodes: [
      { id: "1", data: { label: "Node 1" } },
      { id: "2", data: { label: "Node 2" } },
      { id: "3", data: { label: "Node 3" } }
    ],
    edges: [
      { source: "1", target: "2" },
      { source: "2", target: "3" }
    ]
  });

  return (
    <Graph data={data} width={800} height={600}>
      <GraphControls />
    </Graph>
  );
}

```

--------------------------------

### Create Type-Safe Graph Data (TypeScript)

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Demonstrates how to use `createGraphData` to create type-safe graph data with nodes, edges, and combos, leveraging TypeScript's generic type inference for improved development experience.

```typescript
import { createGraphData } from "@dschz/solid-g6";

const data = createGraphData({
  nodes: [
    { id: "node1", data: { label: "Node 1", category: "important" } },
    { id: "node2", data: { label: "Node 2", category: "normal" } },
  ],
  edges: [{ source: "node1", target: "node2" }],
  combos: [{ id: "group1", data: { label: "Group 1" } }],
});
```

--------------------------------

### Creating Custom Graph Layout Algorithm

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Extend BaseLayout to implement diagonal positioning logic. Register custom layouts for specialized graph arrangements. Outputs nodes positioned along a diagonal line based on index.

```tsx
import { BaseLayout, register, type GraphData }
import { Graph } from "@dschz/solid-g6";

class DiagonalLayout extends BaseLayout {
  id = 'diagonal-layout';

  async execute(data: GraphData): Promise<GraphData> {
    const { nodes = [] } = data;
    return {
      nodes: nodes.map((node, index) => ({
        id: node.id,
        style: {
          x: 50 * index + 25,
          y: 50 * index + 25,
        },
      })),
    };
  }
}

// Register custom layout
register("diagonal-layout", DiagonalLayout);

// Use in graph
<Graph layout={{ type: "diagonal-layout", customParam: "value" }} />;
```

--------------------------------

### Configure Graph Combos with createGraphComboOptions in TSX

Source: https://context7.com/dsnchz/solid-g6/llms.txt

This function sets up combo containers for grouping nodes with boundaries, including dynamic fills, strokes, labels showing headcount, and padding for organization charts. It relies on @dschz/solid-g6 library, createGraphData for org structure with nodes, edges, combos, and createGraphNodeOptions for node styling. Outputs config for Graph component with rect type, Dagre layout, and behaviors like collapse-expand, but may require adjustments for complex hierarchies.

```tsx
import {
  createGraphData,
  createGraphComboOptions,
  createGraphNodeOptions,
  Graph
} from "@dschz/solid-g6";

const orgData = createGraphData({
  nodes: [
    { id: "pm1", data: { name: "Product Manager", role: "pm" }, combo: "product" },
    { id: "pm2", data: { name: "Product Owner", role: "pm" }, combo: "product" },
    { id: "dev1", data: { name: "Senior Dev", role: "developer" }, combo: "engineering" },
    { id: "dev2", data: { name: "Junior Dev", role: "developer" }, combo: "engineering" },
    { id: "dev3", data: { name: "DevOps", role: "developer" }, combo: "engineering" }
  ],
  edges: [
    { source: "pm1", target: "pm2" },
    { source: "pm1", target: "dev1" },
    { source: "dev1", target: "dev2" },
    { source: "dev1", target: "dev3" }
  ],
  combos: [
    {
      id: "product",
      data: {
        label: "Product Team",
        department: "product",
        headcount: 2
      }
    },
    {
      id: "engineering",
      data: {
        label: "Engineering Team",
        department: "engineering",
        headcount: 3
      }
    }
  ]
});

const comboConfig = createGraphComboOptions<typeof orgData>({
  type: "rect",
  style: {
    // Type-safe combo data access
    fill: (d) => d.data?.department === "product" ? "#e6f7ff" : "#f6ffed",
    stroke: (d) => d.data?.department === "product" ? "#1890ff" : "#52c41a",
    lineWidth: 2,
    radius: 8,
    // Combo label with dynamic content
    labelText: (d) => {
      const label = d.data?.label || "";
      const count = d.data?.headcount || 0;
      return `${label} (${count})`;
    },
    labelFill: "#262626",
    labelFontSize: 16,
    labelFontWeight: "bold",
    labelPlacement: "top",
    labelOffsetY: -10,
    padding: [20, 10, 10, 10]
  }
});

const nodeConfig = createGraphNodeOptions<typeof orgData>({
  type: "circle",
  style: {
    fill: (d) => d.data?.role === "pm" ? "#1890ff" : "#52c41a",
    stroke: "#ffffff",
    lineWidth: 2,
    r: 20,
    labelText: (d) => d.data?.name || "",
    labelFill: "#ffffff",
    labelFontSize: 11
  }
});

function OrganizationChart() {
  return (
    <Graph
      data={orgData}
      width={1000}
      height={600}
      layout={{ type: "dagre", rankdir: "TB", nodesep: 60, ranksep: 80 }}
      node={nodeConfig}
      combo={comboConfig}
      behaviors={["zoom-canvas", "drag-canvas", "drag-element", "collapse-expand"]}
    />
  );
}
```

--------------------------------

### Edge Customization

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Shows how to customize edge styles, including stroke color, width, and dynamic labeling, for visual clarity and information representation.

```tsx
<Graph
  edge={{
    style: (edge) => ({
      stroke: getEdgeColor(edge),
      strokeWidth: getEdgeWidth(edge),
      strokeOpacity: 0.8,
    }),
    labelText: (edge) => edge.data?.label,
  }}
/>
```

--------------------------------

### Create Graph Data in TSX

Source: https://context7.com/dsnchz/solid-g6/llms.txt

This utility creates type-safe graph data objects with nodes, edges, and optional combos. It depends on the @dschz/solid-g6 library and accepts structured input defining graph elements. Output is a graph data object for use in components, limited to predefined node and edge properties.

```tsx
import { createGraphData } from "@dschz/solid-g6";

// Basic graph with custom node data
const simpleGraph = createGraphData({
  nodes: [
    { id: "1", data: { label: "Task 1", priority: "high", progress: 85 } },
    { id: "2", data: { label: "Task 2", priority: "medium", progress: 60 } },
    { id: "3", data: { label: "Task 3", priority: "low", progress: 30 } }
  ],
  edges: [
    { source: "1", target: "2", data: { relationship: "depends_on" } },
    { source: "2", target: "3", data: { relationship: "blocks" } }
  ]
});

// Graph with combo grouping
const teamOrgChart = createGraphData({
  nodes: [
    { id: "ceo", data: { name: "CEO", role: "executive" }, combo: "exec" },
    { id: "cto", data: { name: "CTO", role: "executive" }, combo: "exec" },
    { id: "dev1", data: { name: "Dev 1", role: "engineer" }, combo: "engineering" },
    { id: "dev2", data: { name: "Dev 2", role: "engineer" }, combo: "engineering" },
    { id: "qa1", data: { name: "QA 1", role: "tester" }, combo: "qa" }
  ],
  edges: [
    { source: "ceo", target: "cto" },
    { source: "cto", target: "dev1" },
    { source: "cto", target: "dev2" },
    { source: "dev1", target: "qa1" }
  ],
  combos: [
    { id: "exec", data: { label: "Executive Team", department: "leadership" } },
    { id: "engineering", data: { label: "Engineering", department: "tech" } },
    { id: "qa", data: { label: "Quality Assurance", department: "tech" } }
  ]
});

// Export for use in components
export { simpleGraph, teamOrgChart };
```

--------------------------------

### Dynamic Data Updates

Source: https://github.com/dsnchz/solid-g6/blob/main/README.md

Shows how to update graph data dynamically using Solid.js signals and effects, enabling real-time visualizations and interactive data exploration.

```tsx
import { createGraphData } from "@dschz/solid-g6";

function DynamicGraph() {
  const [data, setData] = createSignal(
    createGraphData({
      nodes: [{ id: "node1", data: { label: "Initial Node" } }],
      edges: [],
    }),
  );

  // Update data reactively
  createEffect(() => {
    const newGraphData = createGraphData({
      nodes: [
        { id: "node1", data: { label: "Updated Node" } },
        { id: "node2", data: { label: "New Node" } },
      ],
      edges: [{ source: "node1", target: "node2" }],
    });
    setData(newGraphData);
  });

  return <Graph data={data()} />; 
}
```