Network Style Switching - Dynamically change colors, shapes, and line styles

Dynamic Network Style Switching

Functional Overview

This example demonstrates how to dynamically change visual styles of network elements without altering the underlying graph structure. Users can switch between different style themes (e.g., corporate, technical, minimalist) that change colors, line styles, node shapes, and other visual properties in real-time.

Implementation of Key Features

Style Theme Definitions

const themes = {
    corporate: {
        defaultNodeColor: '#0052cc',
        defaultLineColor: '#42526e',
        defaultNodeShape: RGNodeShape.rect,
        defaultLineShape: RGLineShape.StandardStraight
    },
    technical: {
        defaultNodeColor: '#36b37e',
        defaultLineColor: '#006644',
        defaultNodeShape: RGNodeShape.circle,
        defaultLineShape: RGLineShape.BezierCurve
    },
    minimalist: {
        defaultNodeColor: '#ffffff',
        defaultLineColor: '#dfe1e6',
        defaultNodeShape: RGNodeShape.rect,
        defaultLineShape: RGLineShape.StandardStraight
    }
};

Dynamic Style Application

const applyTheme = (themeName: string) => {
    const theme = themes[themeName];
    graphInstance.updateOptions({
        defaultNodeColor: theme.defaultNodeColor,
        defaultLineColor: theme.defaultLineColor,
        defaultNodeShape: theme.defaultNodeShape,
        defaultLineShape: theme.defaultLineShape
    });

    // Update existing elements
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, {
            color: theme.defaultNodeColor
        });
    });
};

Creative Use Cases

Brand Customization: Match graph colors to corporate branding.

Accessibility: Switch to high-contrast themes for visibility.

Presentation Modes: Different styles for different audiences.

Print vs Screen: Optimize colors for different media.

Dark Mode: Toggle between light and dark themes.