Multiple Node Slot Templates

Demonstrates using multiple node slot templates with dynamic switching based on node type, allowing different visual presentations for the same graph data.

Multiple Node Slot Templates

Functional Overview

This example demonstrates how to use multiple different node slot templates and switch between them dynamically. Each node can have a different type, and the appropriate template is rendered based on that type.

Implementation of Key Features

Type-Based Slot Selection

<RGSlotOnNode>
    {({ node, checked }: RGNodeSlotProps) => {
        switch (node.type) {
        case 'slot2': return <NodeSlot2 node={node} />;
        case 'slot3': return <NodeSlot3 node={node} checked={checked} />;
        case 'slot4': return <NodeSlot4 node={node} />;
        case 'slot5': return <NodeSlot5 node={node} />;
        default: return <NodeSlot1 node={node} />;
        }
    }}
</RGSlotOnNode>

Dynamic Template Switching

const changeNodeSlot = async(newSlotId: string, _newSlotName?: string) => {
    console.log('Switching Node Template to:', newSlotId);
    setSlotTeamplateId(newSlotId);
    const allNodes: RGNode[] = graphInstance.getNodes();
    for (const node of allNodes) {
        const randomSlot = allSlotIds[Math.floor(Math.random() * allSlotIds.length)];
        graphInstance.updateNode(node, {
            type: newSlotId === 'random' ? randomSlot.value : newSlotId
        });
    }
    graphInstance.enableCanvasAnimation();
    await graphInstance.sleep(50);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

Template Tab Switcher

const allSlotIds = [
    { value: 'slot2', text: 'Slot2' },
    { value: 'slot3', text: 'Slot3' },
    { value: 'slot4', text: 'Slot4' },
    { value: 'slot5', text: 'Slot5' },
    { value: 'random', text: 'Random' }
];

<SimpleUIVTabs data={allSlotIds} onChange={changeNodeSlot} currentValue={slotTeamplateId} />

Creative Use Cases

User Profile Cards: Switch between different profile card layouts - compact, detailed, with avatar, or with stats. Each template emphasizes different information.

Task Management: Display tasks as simple cards, detailed cards with subtasks, Kanban-style cards, or timeline view cards. Templates can be switched based on project phase or user preference.

Organization Charts: Show employees as simple name cards, detailed cards with contact info, cards with photos, or cards with performance metrics.

Product Catalogs: Display products in different formats - grid view, list view, card view with images, or minimal view. Each template highlights different product attributes.

Network Devices: Show network equipment as status indicators, detailed configuration cards, performance graphs, or connection topology views.

Social Networks: Display user nodes as simple avatars, profile cards, connection maps, or activity summaries. Different templates suit different analysis needs.

Project Milestones: Render milestones as simple markers, detailed cards with dates, progress indicators, or dependency views. Templates adapt to different project views.

Knowledge Graph Concepts: Show concepts as minimal nodes, detailed cards with definitions, rich media cards with images, or citation networks. Templates support different knowledge exploration modes.