Smart Tree Layout with Horizontal and Vertical Modes

Functional Overview

This example demonstrates the Smart Tree layout algorithm, which automatically determines node levels and positions to create clear, readable tree structures. Unlike traditional tree layouts that require strict parent-child relationships, Smart Tree analyzes the graph structure and intelligently organizes nodes into levels. The example showcases dynamic switching between horizontal (left-to-right) and vertical (top-to-bottom) layouts with real-time node and line property updates.

Implementation of Key Features

Dual Configuration System

Maintains separate option sets for horizontal and vertical layouts:

// Horizontal tree layout configuration
const graphOptionsH: RGOptions = {
    layout: {
        layoutName: 'smart-tree',
        treeNodeGapH: 300,  // Large horizontal gap
        treeNodeGapV: 10,   // Small vertical gap
        from: 'left'
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 120,
    defaultNodeHeight: 30,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultNodeBorderWidth: 0,
    defaultLineColor: '#ca8a04',
    defaultNodeColor: '#ca8a04'
};

// Vertical tree layout configuration
const graphOptionsV: RGOptions = {
    layout: {
        layoutName: 'smart-tree',
        treeNodeGapH: 10,   // Small horizontal gap
        treeNodeGapV: 300,  // Large vertical gap
        from: 'top'
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 30,   // Narrow width
    defaultNodeHeight: 120, // Tall height
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.tb,
    defaultNodeBorderWidth: 0
};

Key aspects:

Dimensions swapped: Width/height inverted between orientations
Gap adjustments: Large gap in flow direction (300), small gap perpendicular (10)
Junction point changes: lr (left-right) for horizontal, tb (top-bottom) for vertical
Color theme: Gold/yellow color scheme for horizontal mode

Dynamic Layout Switching

The updateOptionsAndRelayout function handles orientation changes:

const updateOptionsAndRelayout = async () => {
    const targetOptions = layoutFrom === 'left' ? graphOptionsH : graphOptionsV;
    graphInstance.setOptions(targetOptions);

    // Update existing nodes to match new dimensions
    graphInstance.getNodes().forEach((node) => {
        graphInstance.updateNode(node, {
            width: targetOptions.defaultNodeWidth,
            height: targetOptions.defaultNodeHeight
        });
    });

    // Update line shapes
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape: targetOptions.defaultLineShape
        });
    });

    await graphInstance.sleep(100); // Wait for browser rendering
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

Key aspects:

Options replacement: Entire options object swapped via setOptions
Node dimension updates: Existing nodes resized to match new orientation
Line shape updates: Ensures lines use appropriate curve style
Render wait: sleep(100) allows browser to apply dimension changes before layout
View adjustment: Recenters and zooms after relayout

Smart Tree Layout Characteristics

The smart-tree algorithm automatically:

Determines node levels based on graph topology
Creates parent-child relationships implicitly from structure
Positions nodes to minimize crossings
Handles complex graphs with multiple parent/child connections

Complex Graph Data Structure

Uses a multi-branch tree with cross-connections:

const myJsonData: RGJsonData = {
    rootId: 'root',
    nodes: [
        { id: 'root', text: 'Root' },
        { id: 'N2', text: 'N2' },
        { id: 'N3', text: 'N3' },
        // ... many more nodes (N4-N41)
    ],
    lines: [
        { from: 'N3', to: 'N2', text: 'Line 1' },
        { from: 'N2', to: 'root', text: 'Line 1' },
        { from: 'root', to: 'N4', text: 'Line 2' },
        { from: 'N4', to: 'N5', text: 'Line 3' },
        // ... complex interconnections
    ]
};

Key aspects:

Implicit hierarchy: Lines define relationships, algorithm determines levels
Multiple parents: Nodes can have multiple incoming connections
Cross-links: Connections between nodes at same or different levels
Text labels: Each line has descriptive text

Layout Direction Control

UI selector for orientation switching:

<SimpleUISelect
    data={[
        { value: 'left', text: 'Horizontal Tree' },
        { value: 'top', text: 'Vertical Tree' }
    ]}
    currentValue={layoutFrom}
    onChange={(newValue: string) => { setLayoutFrom(newValue); }}
/>

Responsive Styling

Uses CSS class based on layout direction:

<div className={`my-graph my-layout-${layoutFrom}`} style={{ height: '100vh' }}>

This allows different styles for horizontal vs vertical orientation in SCSS.

React Effect for Layout Changes

Triggers relayout when direction state changes:

useEffect(() => {
    initializeGraph();
}, []);

useEffect(() => {
    updateOptionsAndRelayout();
}, [layoutFrom]);

Mini-Map Navigation

Includes RGMiniView for overview navigation:

<RelationGraph options={graphOptionsH} onNodeClick={onNodeClick} onLineClick={onLineClick}>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

Creative Use Cases

Organizational Chart with Matrix Reporting: Display company hierarchy with horizontal layout for executive levels and vertical for functional areas. Smart Tree handles dotted-line reporting relationships automatically.

Decision Tree Visualization: Show decision paths with horizontal flow for high-level strategy and vertical for detailed tactics. Switch orientation based on audience preference.

Skill Progression Maps: Visualize learning paths with horizontal layout for beginner-to-advanced progression and vertical for subject categories. Smart Tree organizes prerequisites automatically.

Process Flow with Branches: Display business processes where some steps have multiple outcomes. Horizontal for timeline view, vertical for organizational responsibility view.

Network Topology Diagrams: Show network infrastructure with horizontal for physical layout and vertical for logical layers. Smart Tree handles cross-layer connections intelligently.

Product Feature Dependencies: Map software features with horizontal for user flow and vertical for technical dependencies. Switch orientation for different stakeholder presentations.