feat: componente GraphContainer con sigma.js y graphology

Visualizacion interactiva de grafos con WebGL via sigma.js, estructura de datos graphology, y layout ForceAtlas2 adaptativo. Soporta grafos dirigidos multi-edge, leyenda de tipos de nodo, y eventos click/double-click. Nuevas deps: graphology, sigma, recharts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 15:02:34 +02:00
parent 74b4c40f18
commit 9b3c57471f
4 changed files with 700 additions and 0 deletions
@@ -0,0 +1,103 @@
+---
+name: graph_container
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "GraphContainer(props: GraphContainerProps): JSX.Element"
+description: "Interactive graph visualization with sigma.js, graphology, and ForceAtlas2 layout"
+tags: [component, ui, graph, visualization, sigma, graphology, network]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["graphology", "graphology-layout-forceatlas2", "sigma"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/graph/index.tsx"
+props:
+  - name: data
+    type: "GraphData"
+    required: true
+    description: "Graph data with nodes and edges arrays"
+  - name: layout
+    type: "'organic' | 'random'"
+    required: false
+    description: "Layout algorithm (default: organic/ForceAtlas2)"
+  - name: showLegend
+    type: "boolean"
+    required: false
+    description: "Show node type legend overlay"
+  - name: nodeTypes
+    type: "NodeType[]"
+    required: false
+    description: "Node type definitions for legend"
+  - name: onNodeClick
+    type: "(node: GraphNode) => void"
+    required: false
+    description: "Node click handler"
+  - name: onNodeDoubleClick
+    type: "(node: GraphNode) => void"
+    required: false
+    description: "Node double-click handler"
+  - name: theme
+    type: "GraphTheme"
+    required: false
+    description: "Visual theme overrides"
+  - name: height
+    type: "string | number"
+    required: false
+    description: "Container height (default: 100%)"
+  - name: className
+    type: "string"
+    required: false
+    description: "Additional CSS classes"
+emits: []
+has_state: true
+framework: react
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { GraphContainer } from '@fn_library/graph'
+import type { GraphData } from '@fn_library/graph'
+
+const data: GraphData = {
+  nodes: [
+    { id: '1', label: 'Node A', color: '#e74c3c', size: 10 },
+    { id: '2', label: 'Node B', color: '#3498db', size: 8 },
+  ],
+  edges: [
+    { id: 'e1', source: '1', target: '2', label: 'connects', type: 'arrow' },
+  ],
+}
+
+function MyGraph() {
+  return (
+    <GraphContainer
+      data={data}
+      layout="organic"
+      showLegend
+      nodeTypes={[
+        { type: 'person', color: '#e74c3c', label: 'Person' },
+        { type: 'org', color: '#3498db', label: 'Organization' },
+      ]}
+      onNodeClick={(node) => console.log('clicked:', node.id)}
+      height="500px"
+    />
+  )
+}
+```
+
+## Notas
+
+- Usa graphology como estructura de datos de grafo
+- ForceAtlas2 para layout organico (iterations adaptativas segun numero de nodos)
+- Sigma.js para renderizado WebGL de alto rendimiento
+- Soporta grafos dirigidos multi-edge
+- El componente limpia la instancia Sigma al desmontar