Deep Node Traversal and Highlighting

Demonstrates how to recursively traverse all descendant nodes from a selected node and highlight the complete subgraph while dimming other nodes.

Deep Node Traversal and Highlighting

Functional Overview

This example demonstrates how to recursively traverse all descendant nodes starting from a selected node and highlight the complete subgraph. Non-descendant nodes are dimmed to focus attention on the selected branch.

Implementation of Key Features

Recursive Traversal Function

Implement a depth-first traversal function that collects all child and grandchild node IDs:

const deepGetAllChildIds = (node: RGNode, ids: string[] = []): string[] => {
    if (ids.includes(node.id)) return ids;
    ids.push(node.id);
    // node.lot.childs is the standard way to access child nodes
    for (const cNode of node.lot.childs) {
        deepGetAllChildIds(cNode, ids);
    }
    return ids;
};

Node Click Handler

When a node is clicked, traverse its descendants and apply visual highlighting:

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    const allChildIds = deepGetAllChildIds(nodeObject);

    // Update nodes: highlight descendants, dim others
    graphInstance.getNodes().forEach(node => {
        if (allChildIds.includes(node.id)) {
            graphInstance.updateNode(node, {
                opacity: 1,
                color: 'rgb(116,2,173)'
            });
        } else {
            graphInstance.updateNode(node, {
                opacity: 0.1,
                color: undefined
            });
        }
    });

    // Update lines: highlight connections within subgraph
    graphInstance.getLines().forEach(line => {
        if (allChildIds.includes(line.from) && allChildIds.includes(line.to)) {
            graphInstance.updateLine(line, { color: 'rgb(116,2,173)' });
        } else {
            graphInstance.updateLine(line, { color: undefined });
        }
    });

    graphInstance.dataUpdated();
};

Canvas Click to Reset

Clicking on empty canvas resets all nodes and lines to their original state:

const onCanvasClick = ($event: RGUserEvent) => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, { opacity: 1, color: undefined });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, { color: undefined });
    });
    graphInstance.dataUpdated();
};

Accessing Child Nodes

The node.lot.childs property provides access to a node’s direct children in the tree structure. This is populated when using tree layouts or hierarchical data.

Creative Use Cases

• Organization Charts: Highlight a department and all its sub-departments
• File System Browsers: Focus on a directory and its entire contents
• Decision Trees: Emphasize a branch and all its outcomes
• Bill of Materials: Show a component and all its sub-components
• Skill Trees: Display a skill and all prerequisite skills