Enhanced Folder Layout with Hierarchical Data

Advanced folder layout supporting hierarchical data via children property, with adjustable line offsets, horizontal/vertical spacing, and rich node card rendering.

Functional Overview

This example demonstrates an enhanced version of folder layout that supports passing hierarchical data structures through the setJsonData method. The graph automatically recognizes hierarchical relationships between nodes (through the children property) and flattens them for display. Three adjustable parameters are provided: line start position offset, horizontal spacing, and vertical spacing. Users can adjust these parameters in real-time for optimal visual effects.

Implementation of Key Features

Hierarchical Data Auto-Recognition

Use children property to define node hierarchy:

const myJsonData: RGJsonData = {
    rootId: 'root',
    nodes: [
        {
            id: 'root',
            text: 'Root Folder',
            children: [
                {
                    id: 'child1',
                    text: 'Child 1',
                    children: [/* more child nodes */]
                }
            ]
        }
    ]
};

relation-graph automatically recognizes the children property and expands it into a flat node array.

Dynamic Layout Parameters

Support real-time adjustment of horizontal and vertical spacing:

const updateMyOptions = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: 'folder',
            from: 'left',
            treeNodeGapH: rangeHorizontal,
            treeNodeGapV: rangeVertical
        }
    });
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

useEffect(() => {
    updateMyOptions();
}, [rangeHorizontal, rangeVertical]);

Sliders adjust spacing with automatic re-layout.

Junction Point Offset Control

Dynamically adjust line start point offset:

const updateMyData = () => {
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            fromJunctionPointOffsetX: fromOffsetX
        });
    });
};

useEffect(() => {
    updateMyData();
}, [fromOffsetX]);

Offset is relative to the specified connection point position (RGJunctionPoint).

Initialize Junction Point Configuration

Set connection points and offsets before data loading:

myJsonData.lines.forEach((line, index) => {
    if (!line.id) {
        line.id = `l${index + 1}`;
    }
    line.fromJunctionPoint = RGJunctionPoint.bottom;
    line.fromJunctionPointOffsetX = fromOffsetX;
    line.toJunctionPoint = RGJunctionPoint.left;
});

Before adding data to the graph, you can directly modify line properties.

Responsive Parameter Sliders

Provide three sliders controlling different parameters:

<input type="range" value={fromOffsetX} min={-100} step={5" max={200} onChange={(e) => { setFromOffsetX(Number(e.target.value)); }} />

<input type="range" min="-150" max="200" value={rangeHorizontal} onChange={(e) => { setRangeHorizontal(parseFloat(e.target.value)); }} />

<input type="range" min="5" max="100" value={rangeVertical} onChange={(e) => { setRangeVertical(parseFloat(e.target.value)); }} />

Each slider controls different layout parameters with real-time feedback.

Custom Node Card

Use slots to render rich node content:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="my-card-node">
            <div className="card-left" />
            <div className="card-right">
                <div className="card-name">{node.text}</div>
                <div className="card-tags">
                    {node.data?.tags.map((tag: string) => (
                        <div key={tag} className="card-tag">{tag}</div>
                    ))}
                </div>
                <div className="card-location">{node.data?.location}</div>
            </div>
        </div>
    )}
</RGSlotOnNode>

Nodes display tags, locations, and other rich information.

Negative Spacing Support

Horizontal spacing supports negative values:

<input type="range" min="-150" max="200" value={rangeHorizontal} />

Negative spacing allows child nodes to overlap vertically with parent nodes, creating more compact layouts.

Color Theme Configuration

Set node and line colors:

const graphOptions: RGOptions = {
    defaultLineColor: '#447fff',
    defaultNodeColor: '#333333'
};

Unified color theme provides consistent visual experience.

Creative Use Cases

Enhanced File Browser

Create feature-rich file browsers supporting tags, locations, and other metadata display. More intuitive than traditional file managers.

Knowledge Base Navigation

Build knowledge base navigation systems with tags, categories, location information. Help users quickly find relevant content.

Organization Structure Display

Show company or organization department structures, each department displaying tags, locations, managers, etc.

Product Catalog Browsing

E-commerce website product classification catalogs, each category showing tags, inventory locations, etc.

Project Task Management

Task hierarchy structures in project management systems, tasks showing tags, assignees, deadlines, etc.

Location Hierarchy Display

Geographic information system location hierarchies, like country-province-city-district, showing location tags and coordinates.

Course System Navigation

Online education platform course structures, each course showing difficulty tags, hours, instructors, etc.

Equipment Asset Inventory

Enterprise equipment asset trees, each device showing model tags, placement locations, status, etc.

Document Management System

Enterprise document management systems, documents showing category tags, authors, modification dates, etc.

Customer Relationship Management

CRM system customer hierarchy structures, customers showing industry tags, regions, contacts, etc.

Supply Chain Visualization

Supply chain hierarchy structures, each node showing supplier tags, geographic locations, capacity, etc.

Product Configurator

Complex product configuration option trees, each option showing compatibility tags, prices, inventory, etc.

Legal and Regulation Library

Legal regulation classification systems, each regulation showing effect tags, publication dates, applicable regions, etc.

Medical Diagnosis Guidelines

Medical diagnosis decision trees, each node showing symptom tags, test items, treatment plans, etc.

Cooking Recipe Navigation

Cooking website recipe classifications, each recipe showing cuisine tags, difficulty, ingredients, etc.