Relation Graph

Functional Overview

This example demonstrates the thumbnail minimap feature that provides a birds-eye view of the entire graph and indicates the current visible area. The minimap shows the position of all nodes in a compact view and displays a rectangle representing the current viewport. Users can drag the viewport indicator in the minimap to navigate the graph quickly.

Implementation of Key Features

MiniView Component

The RGMiniView component provides the thumbnail functionality:

<RGMiniView width={`${miniViewSize.width}px`} height={`${miniViewSize.height}px`} position={miniViewPosition as RGWidgetPosition} />

The component displays a scaled-down view of all nodes and the current viewport rectangle.

Position Configuration

The minimap can be positioned in any corner:

<SimpleUISelect
    data={[
        { value: 'tl', text: 'Top-Left' },
        { value: 'tr', text: 'Top-Right' },
        { value: 'bl', text: 'Bottom-Left' },
        { value: 'br', text: 'Bottom-Right' }
    ]}
    currentValue={miniViewPosition}
    onChange={(newValue: string) => { setMiniViewPosition(newValue); }}
/>

The four corner positions provide flexibility for different UI layouts.

Size Customization

Users can adjust the width and height of the minimap:

<SimpleUISlider currentValue={miniViewSize.width} min={50} max={500} step={10} onChange={(newValue) => {setMiniViewSize({...miniViewSize, width: newValue});}} />
<SimpleUISlider currentValue={miniViewSize.height} min={50} max={500} step={10} onChange={(newValue) => {setMiniViewSize({...miniViewSize, height: newValue});}} />

The range from 50px to 500px allows for compact or detailed thumbnails.

CSS-Based Styling

The demo notes that additional styling can be applied through CSS:

<div className="py-1 text-sm">You can also continue to freely adjust the thumbnail position and appearance through CSS styles.</div>

This allows for complete visual customization beyond the built-in options.

Randomized Node Styling

To demonstrate the minimap effectively, nodes have varied colors and sizes:

myJsonData.nodes.forEach(node => {
    node.color = randomColorRange[Math.floor(Math.random() * randomColorRange.length)];
    node.width = 30 + Math.floor(Math.random() * 200);
    node.height = 30 + Math.floor(Math.random() * 200);
    node.nodeShape = Math.random() < 0.3 ? RGNodeShape.circle : RGNodeShape.rect;
});

This variety makes the minimap more visually interesting and useful for navigation.

Creative Use Cases

Large Graph Navigation

Use for exploring large graphs (hundreds or thousands of nodes) where panning and zooming can be disorienting. The minimap helps users maintain spatial awareness and navigate efficiently.

Map and Terrain Visualization

Adapt for geographic visualizations where the minimap shows a smaller-scale version of a map. Users can see their current viewport position relative to the entire geographic area.

Floor Plan and Building Navigation

Create tools for navigating complex floor plans or building layouts. The minimap shows the entire floor plan while the viewport shows the current room or section being viewed.

CAD and Engineering Drawings

Implement in CAD software where large technical drawings need overview thumbnails. Engineers can quickly jump to different sections of complex schematics.

Genome and Molecular Maps

Use in bioinformatics for navigating large genome or molecular interaction maps. The minimap helps researchers find regions of interest in massive datasets.

Project Management and Timeline Views

Create project management tools with large Gantt charts or timeline visualizations. The minimap allows managers to quickly navigate to different time periods.

Game Level Editors

Build level editors for game development where the minimap shows the entire level layout. Designers can quickly navigate to different areas of large game worlds.

Network and Infrastructure Maps

Use for network operations centers where large network topologies need monitoring. The minimap provides context while operators focus on specific network segments.

Thumbnail diagram