Relation Graph

Functional Overview

This example demonstrates inventory structure diagram visualization using tree layout to clearly display product composition hierarchies. From finished products to raw materials, each component is broken down into its sub-parts, showing complete bill of materials (BOM) structure. Supports node expand/collapse, allowing users to explore different levels of product structure in depth.

Implementation of Key Features

Tree Layout Configuration

Use left-to-right tree layout:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 100,
        treeNodeGapV: 20
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultJunctionPoint: RGJunctionPoint.lr
};

Horizontal display of product structure with clear hierarchy.

Hierarchical Data Structure

Represent multi-level product composition:

const myJsonData: RGJsonData = {
    rootId: 'product',
    nodes: [
        { id: 'product', text: 'Finished Product' },
        { id: 'assembly-a', text: 'Assembly A' },
        { id: 'part-a1', text: 'Part A1' },
        { id: 'material-a1-1', text: 'Material A1-1' },
        // ... more nodes
    ],
    lines: [
        { from: 'product', to: 'assembly-a' },
        { from: 'assembly-a', to: 'part-a1' },
        { from: 'part-a1', to: 'material-a1-1' },
        // ... more connections
    ]
};

Data structure reflects actual bill of materials hierarchy.

Auto Expand Control

Automatically set expand state based on node level:

const openByLevel = async (level: number) => {
    const nodes = graphInstance.getNodes();
    nodes.forEach(node => {
        const nodeLevel = Math.abs(node.lot.level || 0);
        graphInstance.updateNode(node, {
            expanded: nodeLevel < level
        });
    });
    await graphInstance.doLayout();
};

Users can control expansion to which level, defaulting to level 2.

Responsive Layout

Use reLayoutWhenExpandedOrCollapsed for automatic re-layout:

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true
};

When users expand or collapse nodes, graph automatically recalculates layout to maintain clarity.

Custom Node Rendering

Display different styles based on node type:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const level = node.lot?.level || 0;
        return (
            <div className={`inventory-node level-${level}`}>
                <div className="node-type">{getNodeTypeName(level)}</div>
                <div className="node-text">{node.text}</div>
            </div>
        );
    }}
</RGSlotOnNode>

Nodes at different levels have different visual identifiers.

Initialization Expansion

Automatically expand to specified level on initialization:

const initializeGraph = async () => {
    await graphInstance.setJsonData(myJsonData);
    await openByLevel(2); // Expand to level 2
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

Initial state shows appropriate level of information without being too complex.

Level-Based Styling

Use CSS to style nodes at different levels:

.inventory-node.level-0 { /* finished product */ }
.inventory-node.level-1 { /* assembly */ }
.inventory-node.level-2 { /* part */ }
.inventory-node.level-3 { /* raw material */ }

Colors or border styles distinguish different item types.

Creative Use Cases

Manufacturing BOM Management

Visualize product bill of materials, helping engineers and procurement understand product structure. Supports complete traceability from finished products to raw materials.

Cost Analysis

Display cost composition at each product level. Each node can show cost information, aggregating to calculate total cost.

Supply Chain Planning

Analyze product structure impact on supply chain. Identify key components, single-source risks, etc.

Alternative Part Management

Display part substitution relationships. When a part is out of stock, quickly find alternatives.

Product Configurator

Help sales teams and customers configure products. Users can expand/collapse options to see configuration impacts.

Quality Traceability

When quality issues arise, quickly trace affected components and raw materials. Reverse trace all products using that part.

Inventory Optimization

Analyze product structure impact on inventory. Identify common parts, standard parts, optimize inventory levels.

Engineering Change Management

Visualize engineering change impact scope. When modifying a part, see all affected parent assemblies.

Product Comparison

Side-by-side comparison of different product or version structures. Identify shared components and unique designs.

Training and Education

Train new employees on product structure. Visualization is more intuitive than documentation.

Competitor Analysis

Analyze competitor product structures, inferring their cost and design strategies.

Maintenance and Repair

Help maintenance personnel understand product structure, quickly locate fault parts and repair steps.

Environmental Impact Assessment

Analyze environmental impact of materials and processes at each product level. Support green design and sustainability analysis.

Modular Design

Show product modular structure, identifying components that can be independently designed and replaced. Supports mass customization.

Inventory Structure Diagram

Product Bill of Materials (BOM) Visualization