Node Groups with Area Background

Demonstrates creating visual node groups with background areas by clicking nodes to group related nodes together.

Node Groups with Area Background

Functional Overview

This example demonstrates creating visual groups of nodes with background areas. Clicking a node automatically creates a group containing that node and its related nodes, visualized with a background shape.

Implementation of Key Features

Group Creation on Node Click

const onNodeClick = (nodeObject: RGNode) => {
    createNodeGroup(nodeObject.id);
};

const createNodeGroup = (nodeId: string) => {
    const groupCoreNode = graphInstance.getNodeById(nodeId);
    if (!groupCoreNode) return;
    const relatedNodes = graphInstance.getNodeRelatedNodes(groupCoreNode);
    const groupNodes = [groupCoreNode, ...relatedNodes];
    const groupId = 'my-group-' + groupCoreNode.id;

    setMyNodeGroups(prev => {
        if (prev.some(g => g.groupId === groupId)) return prev;
        const nextGroups = [...prev, { groupId, groupNodes }];
        return nextGroups.length > 3 ? nextGroups.slice(1) : nextGroups;
    });
};

Canvas Slot for Background Groups

<RGSlotOnCanvas>
    {myNodeGroups.map(thisGroup => (
        <GroupAreaBackground key={thisGroup.groupId} group={thisGroup} />
    ))}
</RGSlotOnCanvas>

Force Layout Configuration

const graphOptions: RGOptions = {
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeColor: 'rgb(130,102,246)',
    layout: {
        layoutName: 'force',
        maxLayoutTimes: Number.MAX_SAFE_INTEGER
    }
};

Creative Use Cases

Cluster Analysis: Visualize data clusters by clicking nodes. Groups show related data points with background highlighting.

Social Network Analysis: Click a person to see their social circle. Background areas highlight community clusters.

Knowledge Domains: Click a concept to see its domain. Groups show related concepts and subdomains.

Network Segmentation: Click a device to see its network segment. Visual isolation of network groups.

Project Teams: Click a team member to see their team. Groups show team composition and relationships.

Feature Grouping: Click a feature to see related features. Helps understand feature dependencies and modules.

Topic Clustering: Click a document to see similar documents. Visual grouping of related content.

Geographic Regions: Click a location to see its region. Background areas show geographic groupings.