Advanced

import { useState } from 'react';
import { InferaGraph, exportGraph, importGraph } from '@inferagraph/core';
import type { GraphData } from '@inferagraph/core';

const initialData: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham' } },
    { id: 'sarah', attributes: { name: 'Sarah' } },
  ],
  edges: [
    { id: 'e1', sourceId: 'abraham', targetId: 'sarah',
      attributes: { type: 'husband_of' } },
  ],
};

function GraphWithSerialization() {
  const [data, setData] = useState(initialData);

  const handleSave = () => {
    localStorage.setItem('biblegraph', JSON.stringify(data));
  };

  const handleLoad = () => {
    const saved = localStorage.getItem('biblegraph');
    if (saved) setData(JSON.parse(saved));
  };

  return (
    <div>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleLoad}>Load</button>
      <InferaGraph data={data} />
    </div>
  );
}

import { GraphStore, exportGraph, importGraph } from '@inferagraph/core';

const store = new GraphStore();
store.addNode({ id: 'abraham', attributes: { name: 'Abraham' } });
store.addNode({ id: 'sarah', attributes: { name: 'Sarah' } });
store.addEdge({ id: 'e1', sourceId: 'abraham', targetId: 'sarah',
  attributes: { type: 'husband_of' } });

// Export full graph to JSON string
const json = exportGraph(store);
localStorage.setItem('biblegraph', json);

// Restore from JSON string
const saved = localStorage.getItem('biblegraph');
if (saved) {
  const store2 = new GraphStore();
  importGraph(store2, saved);
}

import { useState } from 'react';
import { InferaGraph, TimelineEngine } from '@inferagraph/core';
import type { GraphData, Era } from '@inferagraph/core';

const eras: Era[] = [
  { name: 'Patriarchs', startYear: -2000, endYear: -1500 },
  { name: 'Exodus', startYear: -1500, endYear: -1200 },
  { name: 'United Kingdom', startYear: -1050, endYear: -930 },
];

const data: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham', era: 'Patriarchs' } },
    { id: 'moses', attributes: { name: 'Moses', era: 'Exodus' } },
    { id: 'david', attributes: { name: 'David', era: 'United Kingdom' } },
  ],
  edges: [],
};

function TimelineGraph() {
  const [range, setRange] = useState({ start: -2000, end: -930 });

  return (
    <div>
      <select onChange={(e) => {
        const era = eras.find(er => er.name === e.target.value);
        if (era) setRange({ start: era.startYear, end: era.endYear });
      }}>
        {eras.map(e => <option key={e.name}>{e.name}</option>)}
      </select>
      <InferaGraph data={data} timeRange={range} eras={eras} />
    </div>
  );
}

import { GraphStore, TimelineEngine } from '@inferagraph/core';

const store = new GraphStore();
store.addNode({ id: 'abraham', attributes: { name: 'Abraham', era: 'Patriarchs' } });
store.addNode({ id: 'moses', attributes: { name: 'Moses', era: 'Exodus' } });
store.addNode({ id: 'david', attributes: { name: 'David', era: 'United Kingdom' } });

const timeline = new TimelineEngine(store, {
  eras: [
    { name: 'Patriarchs', startYear: -2000, endYear: -1500 },
    { name: 'Exodus', startYear: -1500, endYear: -1200 },
    { name: 'United Kingdom', startYear: -1050, endYear: -930 },
  ],
  eraKey: 'era',
});

// Set visible range to Patriarchs era
timeline.setRange(-2000, -1500);

// Filter nodes within the active range
const patriarchs = timeline.filter();
// [{ id: 'abraham', ... }]

// Get transition between eras
const transition = timeline.getTransition('Patriarchs', 'Exodus');
// { appearing: ['moses'], disappearing: ['abraham'], persisting: [] }

import { useState, useCallback } from 'react';
import { InferaGraph, ClusterEngine } from '@inferagraph/core';
import type { GraphData, Cluster } from '@inferagraph/core';

const data: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham' } },
    { id: 'sarah', attributes: { name: 'Sarah' } },
    { id: 'isaac', attributes: { name: 'Isaac' } },
    { id: 'jacob', attributes: { name: 'Jacob' } },
  ],
  edges: [
    { id: 'e1', sourceId: 'abraham', targetId: 'isaac', attributes: { type: 'father_of' } },
    { id: 'e2', sourceId: 'isaac', targetId: 'jacob', attributes: { type: 'father_of' } },
  ],
};

function ClusteredGraph() {
  const [clusters, setClusters] = useState<Cluster[]>([]);

  const handleReady = useCallback((engine: ClusterEngine) => {
    const detected = engine.detectCommunities();
    setClusters(detected);
  }, []);

  return (
    <div>
      {clusters.map(c => (
        <button key={c.id} onClick={() => c.toggle()}>
          {c.id} ({c.nodeIds.size} nodes)
        </button>
      ))}
      <InferaGraph data={data} onClusterReady={handleReady} />
    </div>
  );
}

import { GraphStore, ClusterEngine } from '@inferagraph/core';

const store = new GraphStore();
store.addNode({ id: 'abraham', attributes: { name: 'Abraham' } });
store.addNode({ id: 'sarah', attributes: { name: 'Sarah' } });
store.addNode({ id: 'isaac', attributes: { name: 'Isaac' } });
store.addNode({ id: 'jacob', attributes: { name: 'Jacob' } });

const clusters = new ClusterEngine(store);

// Detect communities (Louvain-inspired)
const detected = clusters.detectCommunities();
// [{ id: 'cluster-0', nodeIds: Set(['abraham', 'sarah', 'isaac', 'jacob']) }]

// Collapse a cluster into a single representative node
clusters.collapseCluster('cluster-0');
const visible = clusters.getVisibleNodes();
// Collapsed: 1 representative node instead of 4

// Expand to reveal all nodes
clusters.expand('cluster-0');

// Convex hull boundary for rendering
const hull = clusters.getClusterBoundary('cluster-0', positions);

import { useEffect, useRef } from 'react';
import { InferaGraph, Minimap } from '@inferagraph/core';
import type { GraphData } from '@inferagraph/core';

const data: GraphData = {
  nodes: [
    { id: 'jerusalem', attributes: { name: 'Jerusalem', type: 'place' } },
    { id: 'bethlehem', attributes: { name: 'Bethlehem', type: 'place' } },
    { id: 'david', attributes: { name: 'David', type: 'person' } },
  ],
  edges: [
    { id: 'e1', sourceId: 'david', targetId: 'bethlehem', attributes: { type: 'born_in' } },
    { id: 'e2', sourceId: 'david', targetId: 'jerusalem', attributes: { type: 'traveled_to' } },
  ],
};

function GraphWithMinimap() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const minimap = new Minimap(containerRef.current, {
      width: 200, height: 150,
      nodeColor: '#4a9eff',
    });
    return () => minimap.destroy();
  }, []);

  return (
    <div ref={containerRef}>
      <InferaGraph data={data} />
    </div>
  );
}

import { Minimap } from '@inferagraph/core';

const container = document.getElementById('graph')!;

const minimap = new Minimap(container, {
  width: 200,
  height: 150,
  nodeColor: '#4a9eff',
  viewportColor: 'rgba(255, 107, 53, 0.3)',
});

// Update node positions after layout computes
minimap.updatePositions(positions);

// Sync viewport rectangle with current camera view
minimap.updateViewport({ x: 0, y: 0, width: 800, height: 600 });

// Navigate main view on minimap click
minimap.setOnNavigate((x, y) => {
  camera.lookAt(x, y, 0);
});

import { useState, useCallback } from 'react';
import { InferaGraph } from '@inferagraph/core';
import type { GraphData } from '@inferagraph/core';

const data: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham' } },
    { id: 'sarah', attributes: { name: 'Sarah' } },
    { id: 'isaac', attributes: { name: 'Isaac' } },
    { id: 'jacob', attributes: { name: 'Jacob' } },
    { id: 'joseph', attributes: { name: 'Joseph' } },
  ],
  edges: [
    { id: 'e1', sourceId: 'abraham', targetId: 'isaac', attributes: { type: 'father_of' } },
    { id: 'e2', sourceId: 'isaac', targetId: 'jacob', attributes: { type: 'father_of' } },
    { id: 'e3', sourceId: 'jacob', targetId: 'joseph', attributes: { type: 'father_of' } },
  ],
};

function MultiSelectGraph() {
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const handleSelectionChange = useCallback((ids: Set<string>) => {
    setSelected(ids);
  }, []);

  return (
    <div>
      <p>Selected: {[...selected].join(', ')}</p>
      <button onClick={() => setSelected(new Set())}>Clear</button>
      <InferaGraph data={data} selectedIds={selected}
        onSelectionChange={handleSelectionChange} />
    </div>
  );
}

import { SelectionManager, BatchOperations } from '@inferagraph/core';

const selection = new SelectionManager();

// Click to select individual nodes
selection.selectNode('abraham');                  // replace
selection.selectNode('sarah', 'add');             // Shift+click
selection.selectNode('isaac', 'toggle');          // Ctrl/Cmd+click

// Drag-box selection
selection.selectByRect(
  { startX: 0, startY: 0, endX: 200, endY: 200 },
  nodePositions
);

// Batch operations on selected nodes
const batch = new BatchOperations(store, queryEngine, selection);
batch.deleteSelected();
const subgraph = batch.getSelectedSubgraph();

import { useEffect, useRef } from 'react';
import { InferaGraph, KeyboardManager } from '@inferagraph/core';
import type { GraphData } from '@inferagraph/core';

const data: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham' } },
    { id: 'sarah', attributes: { name: 'Sarah' } },
    { id: 'isaac', attributes: { name: 'Isaac' } },
    { id: 'jacob', attributes: { name: 'Jacob' } },
  ],
  edges: [],
};

function KeyboardGraph() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const keyboard = new KeyboardManager({
      getAllNodeIds: () => ['abraham', 'sarah', 'isaac', 'jacob'],
      onFocusChange: (id) => console.log('Focused:', id),
    });
    keyboard.attach(containerRef.current);
    keyboard.addBinding({ key: 'Delete', action: 'delete' });
    return () => keyboard.detach();
  }, []);

  return (
    <div ref={containerRef} tabIndex={0}>
      <InferaGraph data={data} />
    </div>
  );
}

import { KeyboardManager } from '@inferagraph/core';

const keyboard = new KeyboardManager({
  focusedNodeId: null,
  getNeighborIds: (id) => store.getNeighborIds(id),
  getAllNodeIds: () => ['abraham', 'sarah', 'isaac', 'jacob'],
  onFocusChange: (id) => highlightNode(id),
  onSelect: (id) => selection.selectNode(id),
  onDeselect: () => selection.clearSelection(),
});

keyboard.attach(container);

// Register a custom shortcut
keyboard.registerAction('delete', (ctx) => {
  if (ctx.focusedNodeId) store.removeNode(ctx.focusedNodeId);
});

keyboard.addBinding({ key: 'Delete', action: 'delete' });
keyboard.addBinding({ key: 'Backspace', action: 'delete' });

import { useCallback, useRef } from 'react';
import { InferaGraph, ExportEngine } from '@inferagraph/core';
import type { GraphData, RendererRef } from '@inferagraph/core';

const data: GraphData = {
  nodes: [
    { id: 'abraham', attributes: { name: 'Abraham' } },
    { id: 'sarah', attributes: { name: 'Sarah' } },
    { id: 'isaac', attributes: { name: 'Isaac' } },
  ],
  edges: [
    { id: 'e1', sourceId: 'abraham', targetId: 'sarah', attributes: { type: 'husband_of' } },
    { id: 'e2', sourceId: 'abraham', targetId: 'isaac', attributes: { type: 'father_of' } },
  ],
};

function ExportableGraph() {
  const rendererRef = useRef<RendererRef>(null);

  const handleExportJSON = useCallback(() => {
    const exporter = new ExportEngine(rendererRef.current!);
    const json = exporter.toJSON();
    exporter.download(json, 'patriarchs.json', 'application/json');
  }, []);

  const handleExportPNG = useCallback(() => {
    const exporter = new ExportEngine(rendererRef.current!);
    const png = exporter.toPNG({ scale: 2 });
    exporter.download(png, 'patriarchs.png', 'image/png');
  }, []);

  return (
    <div>
      <button onClick={handleExportJSON}>Export JSON</button>
      <button onClick={handleExportPNG}>Export PNG</button>
      <InferaGraph ref={rendererRef} data={data} />
    </div>
  );
}

import { ExportEngine } from '@inferagraph/core';

const exporter = new ExportEngine(renderer);

// Export graph data as JSON
const json = exporter.toJSON();

// Export visible canvas as PNG (from WebGL)
const pngDataUrl = exporter.toPNG({ scale: 2 });

// Export as SVG (generated from node positions)
const svgString = exporter.toSVG({
  width: 1024, height: 768,
  nodeColor: '#4a9eff',
});

// Export only selected nodes
const partial = exporter.toJSON({
  selectedOnly: true,
  selectedNodeIds: ['abraham', 'sarah', 'isaac'],
});

// Trigger browser download
exporter.download(svgString, 'patriarchs.svg', 'image/svg+xml');
exporter.download(json, 'patriarchs.json', 'application/json');