Advanced Layout Switching - Professional layout transitions with state preservation

Advanced Layout Switching with Performance Optimization

Functional Overview

This example demonstrates professional-grade layout switching with smooth transitions, state preservation, and performance optimizations. Unlike the basic switch-layout demo, this version includes layout state caching, transition animations, and advanced configuration options for each layout type.

Implementation of Key Features

Layout State Caching

const layoutStatesRef = useRef(new Map());

const saveLayoutState = (layoutName: string) => {
    const nodes = graphInstance.getNodes();
    const state = nodes.map(n => ({ id: n.id, x: n.x, y: n.y }));
    layoutStatesRef.current.set(layoutName, state);
};

const restoreLayoutState = (layoutName: string) => {
    const state = layoutStatesRef.current.get(layoutName);
    if (state) {
        state.forEach(nodeState => {
            graphInstance.updateNode(nodeState.id, {
                x: nodeState.x,
                y: nodeState.y
            });
        });
    }
};

Smooth Transitions

const switchLayout = async (newLayout: string) => {
    saveLayoutState(currentLayout);
    graphInstance.updateOptions({ layout: { layoutName: newLayout } });
    await graphInstance.doLayout();
    restoreLayoutState(newLayout);
};

Layout Configuration Registry

const layoutConfigs = {
    force: { layoutName: 'force', force_node_repulsion: 500 },
    tree: { layoutName: 'tree', from: 'left', gap: 100 },
    circle: { layoutName: 'circle', radius: 300 },
    center: { layoutName: 'center' }
};

Creative Use Cases

Interactive Graph Editor: Switch between edit mode (force) and presentation mode (center).

Data Analysis: Toggle between different layouts to reveal patterns.

Multi-Perspective Views: Save user’s preferred position for each layout.

A/B Testing: Compare how different layouts affect comprehension.

Layout Recommendation System: Suggest best layout based on graph characteristics.