Search and Focus Nodes

Demonstrates search functionality to find and focus on specific nodes in the graph with automatic centering and highlighting.

Search and Focus Nodes

Functional Overview

This example demonstrates implementing search functionality to find and focus on specific nodes in the graph. Users can search for nodes by text or ID and the graph automatically centers and highlights the matching nodes.

Implementation of Key Features

Search Panel

<QueryFormPanel
    nodeItems={nodeItems}
    onSearch={handleSearch}
    onSelect={focusOnNode}
/>

Focus Functionality

const focusOnNode = (nodeId: string) => {
    graphInstance.focusNodeById(nodeId);
};

const focusOnNodeWithAnimation = async (nodeId: string) => {
    graphInstance.enableCanvasAnimation();
    focusOnNode(nodeId);
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

Node Search

Search through all nodes by text or ID with autocomplete suggestions.

Creative Use Cases

Large Organization Charts: Search for employees by name or ID. Quick navigation in large orgs.

Network Topology: Search for devices by hostname or IP. Network management.

Knowledge Graphs: Search for concepts or topics. Knowledge exploration.

Process Maps: Search for process steps or activities. Process documentation navigation.

System Architecture: Search for components or modules. Architecture documentation.

Social Networks: Search for users or profiles. Network exploration.

Product Catalogs: Search for products or categories. Catalog navigation.

Site Maps: Search for pages or sections. Website navigation.