Step-by-Step Graph Expansion

Demonstrates controlled graph expansion where users navigate through data systematically, revealing related nodes incrementally.

Step-by-Step Graph Expansion

Functional Overview

This example demonstrates a controlled approach to expanding a graph, where users can navigate through the data systematically, revealing related nodes incrementally.

Implementation of Key Features

Sequential Expansion

Expand nodes in a controlled sequence:

const expandStepByStep = async (startNode: RGNode) => {
    // Expand first level
    graphInstance.setNodeCollapsed(startNode, false);
    await graphInstance.sleep(500);

    // Expand children one by one
    const children = startNode.lot.childs;
    for (const child of children) {
        graphInstance.setNodeCollapsed(child, false);
        await graphInstance.sleep(300);
    }
};

User-Controlled Pacing

Let users control expansion speed:

const expandWithDelay = async (node: RGNode, delay: number) => {
    await graphInstance.sleep(delay);
    // ... expansion logic
};

Creative Use Cases

• Complex Systems: Break down complicated architectures
• Learning Paths: Guide learners through dependencies
• Process Documentation: Step-by-step workflow explanation
• Data Lineage: Trace data flow progressively
• Network Discovery: Methodical network exploration