fn-design-system/components/graph/graph_container.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
graph_container	component	ts	ui	1.0.0	impure	GraphContainer(props: GraphContainerProps): JSX.Element	Interactive graph visualization with sigma.js, graphology, and ForceAtlas2 layout	component ui graph visualization sigma graphology network				false		graphology graphology-layout-forceatlas2 sigma	Componente GraphContainer que renderiza grafo interactivo con sigma.js, ForceAtlas2 layout y legend	false			frontend/functions/ui/graph/index.tsx	name type required description data GraphData true Graph data with nodes and edges arrays name type required description layout 'organic' | 'random' false Layout algorithm (default: organic/ForceAtlas2) name type required description showLegend boolean false Show node type legend overlay name type required description nodeTypes NodeType[] false Node type definitions for legend name type required description onNodeClick (node: GraphNode) => void false Node click handler name type required description onNodeDoubleClick (node: GraphNode) => void false Node double-click handler name type required description theme GraphTheme false Visual theme overrides name type required description height string | number false Container height (default: 100%) name type required description className string false Additional CSS classes		true	react

Ejemplo

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