Basic Center Layout with Custom Icons - Simple graph setup with icon-enhanced nodes and mini-map

Basic Center Layout with Custom Node Icons

Functional Overview

This example demonstrates a simple relationship graph with center layout, featuring custom nodes with icons from Lucide React. It showcases the basic setup pattern including RGProvider wrapper, RGHooks for graph instance access, custom node components, and the mini-map navigation feature. The graph uses static data representing company investment relationships with different icon types for visual categorization.

Implementation of Key Features

Basic RGProvider and Hook Pattern

Demonstrates the standard v3.x pattern for wrapping the graph and accessing instance:

// Entry point (index.tsx)
const Demo = () => {
    return (
        <RGProvider>
            <MyGraph />
        </RGProvider>
    );
};

// Graph component (MyGraph.tsx)
const MyGraph: React.FC = () => {
    const graphInstance = RGHooks.useGraphInstance();
    // ... graph logic
};

Key aspects:

• RGProvider wrapper: Required at top level for context
• RGHooks.useGraphInstance(): Replaces ref-based instance access from v2.x
• Component separation: Entry component wraps graph component in provider

Static Graph Data with Icon Metadata

Uses static JSON data with custom icon data property:

const staticJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },
        { id: '1', text: 'Paper Street Soap Co.', data: { myicon: 'fries' } },
        { id: '3', text: 'Cyberdyne Systems', data: { myicon: 'football' } },
        { id: '4', text: 'Tyrell Corporation', data: { myicon: 'desktop' } },
        { id: '6', text: 'Weyland-Yutani', data: { myicon: 'fries' } },
        { id: '7', text: 'Hooli', data: { myicon: 'desktop' } },
        { id: '8', text: 'Vehement Capital', data: { myicon: 'football' } },
        { id: '9', text: 'Omni Consumer Products', data: { myicon: 'football' } },
        { id: '71', text: 'Stark Industries', data: { myicon: 'delivery_truck' } },
        { id: '72', text: 'Buy n Large', data: { myicon: 'fries' } },
        { id: '73', text: 'Binford Tools', data: { myicon: 'delivery_truck' } },
        { id: '81', text: 'Initech', data: { myicon: 'fries' } },
        { id: '82', text: 'Aperture Science', data: { myicon: 'desktop' } },
        { id: '83', text: 'Prestige Worldwide', data: { myicon: 'delivery_truck' } },
        { id: '84', text: 'Massive Dynamic', data: { myicon: 'football' } },
        { id: '85', text: 'Virtucon', data: { myicon: 'delivery_truck' } },
        { id: '91', text: 'Acme Corp', data: { myicon: 'football' } },
        { id: '92', text: 'Nakatomi Trading', data: { myicon: 'football' } },
        { id: '5', text: 'Los Pollos Hermanos', data: { myicon: 'burger' } }
    ],
    lines: [
        { from: '7', to: '71', text: 'Invest' },
        { from: '7', to: '72', text: 'Invest' },
        { from: '7', to: '73', text: 'Invest' },
        { from: '8', to: '81', text: 'Invest' },
        { from: '8', to: '82', text: 'Invest' },
        { from: '8', to: '83', text: 'Invest' },
        { from: '8', to: '84', text: 'Invest' },
        { from: '8', to: '85', text: 'Invest' },
        { from: '9', to: '91', text: 'Invest' },
        { from: '9', to: '92', text: 'Invest' },
        { from: '1', to: '2', text: 'Invest' },
        { from: '3', to: '1', text: 'Executive' },
        { from: '4', to: '2', text: 'Executive' },
        { from: '6', to: '2', text: 'Executive' },
        { from: '7', to: '2', text: 'Executive' },
        { from: '8', to: '2', text: 'Executive' },
        { from: '9', to: '2', text: 'Executive' },
        { from: '1', to: '5', text: 'Invest' }
    ]
};

Key aspects:

• Custom data property: Each node has data.myicon for icon type
• Sized root node: Node ‘2’ has explicit width/height (100x100)
• Line labels: Investment relationships labeled “Invest”, “Executive”
• Type annotations: Uses as JsonNode[] and as JsonLine[] for TypeScript

Center Layout Configuration

const graphOptions: RGOptions = {
    debug: true,
    defaultLineShape: 1,  // RGLineShape.StandardStraight
    defaultNodeShape: RGNodeShape.circle,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'center',
        maxLayoutTimes: 3000
    },
    defaultExpandHolderPosition: 'right',
    reLayoutWhenExpandedOrCollapsed: true
};

Custom Node Component with Icons

The CustomNode component renders Lucide icons based on node data:

// CustomNode.tsx (assumed implementation)
const CustomNode: React.FC<RGNodeSlotProps> = ({ node, checked, dragging }) => {
    const iconMap = {
        delivery_truck: TruckIcon,
        fries: CoffeeIcon,
        football: FootballIcon,
        desktop: DesktopIcon,
        burger: BurgerIcon
    };
    const IconComponent = iconMap[node.data.myicon] || DefaultIcon;

    return (
        <div className={`custom-node ${checked ? 'checked' : ''} ${dragging ? 'dragging' : ''}`}>
            <IconComponent size={24} />
            <div className="node-text">{node.text}</div>
        </div>
    );
};

Slot-Based Node Customization

Uses RGSlotOnNode component to inject custom node rendering:

<RelationGraph options={graphOptions} onNodeClick={onNodeClick} onLineClick={onLineClick}>
    <RGSlotOnNode>
        {({ node, checked, dragging }: RGNodeSlotProps) => (
            <CustomNode node={node} checked={checked} dragging={dragging} />
        )}
    </RGSlotOnNode>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

Key aspects:

• Slot pattern: Replaces v2.x nodeSlot prop
• Props destructuring: Receives node, checked, dragging state
• Mini-map: Uses RGMiniView in RGSlotOnView slot

Event Handlers

Standard click handlers returning true for default behavior:

const onNodeClick = (node: RGNode, e: RGUserEvent) => {
    console.log('onNodeClick:', node.text);
    return true;
};

const onLineClick = (line: RGLine, link: RGLink, e: RGUserEvent) => {
    console.log('onLineClick:', line.text, line.from, line.to);
    return true;
};

Graph Initialization

const initializeGraph = async () => {
    await graphInstance.setJsonData(staticJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

useEffect(() => {
    initializeGraph();
}, []);

Creative Use Cases

Corporate Portfolio Management: Visualize company investments and subsidiaries with icons representing industry sectors (tech, manufacturing, food, etc.). Use different icons for visual categorization.

Startup Ecosystem Mapping: Display startups with icons indicating their business model (SaaS, marketplace, hardware). Show funding relationships between startups and investors.

Supply Chain Visualization: Map suppliers and distributors with icons representing their role (manufacturer, logistics, retail). Show material flow and supplier relationships.

Organizational Structure: Display company departments with role-based icons (engineering, sales, HR). Show reporting lines and cross-functional teams.

Product Feature Dependencies: Visualize software features with icons representing component types (API, UI, database). Show dependencies between features and modules.