Custom Graph Instance with Dual Layouts

Customized graph instance rendering two separate datasets on left and right sides with independent layouts.

Custom Graph Instance with Dual Layouts

Functional Overview

This demo demonstrates how to customize the graph instance to render and layout two separate datasets on left and right sides of the canvas independently.

Implementation of Key Features

1. Store Multiple Datasets

Keep separate data in options:

const graphOptions: RGOptions = {
    layout: { layoutName: 'fixed' },
    data: {
        myLeftJsonData,
        myRightJsonData
    }
};

2. Custom Graph Instance

Override doLayout method:

const initializeGraph = async () => {
    // The graphInstance here is a custom instance that overrides doLayout
    // It internally reads myLeftJsonData and myRightJsonData from graphOptions.data
    graphInstance.doLayout();
};

3. Separate Data Structures

Define independent datasets:

const myLeftJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* Left side nodes */],
    lines: [/* Left side lines */]
};

const myRightJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* Right side nodes */],
    lines: [/* Right side lines */]
};

4. Different Node Styles

Apply distinct styles to each side:

myRightJsonData.nodes.forEach(node => {
    node.opacity = 0.5;
    node.nodeShape = RGNodeShape.circle;
    node.width = 80;
    node.height = 80;
    node.color = 'transparent';
});

myRightJsonData.lines.forEach(line => {
    line.lineShape = RGLineShape.StandardStraight;
    line.fromJunctionPoint = RGJunctionPoint.border;
    line.toJunctionPoint = RGJunctionPoint.border;
});

5. Layout Positioning

Custom layout logic positions groups on different sides:

// In custom graph instance:
doLayout() {
    // Layout left data with tree layout
    // Layout right data with center layout
    // Position left group on left side
    // Position right group on right side
}

Creative Use Cases

• Comparative Views: Compare two related datasets
• Before/After: Show state changes side by side
• Input/Output: Display process inputs and outputs
• Source/Destination: Show data flow sources and destinations
• Left/Right Navigation: Bidirectional navigation systems
• Parallel Processes: Display concurrent processes