Enhance Discoverability: Node Search, Zoom, and Highlight #59
Description
Describe the feature
Add a node search and navigation feature that allows users to:
- Search and select nodes via a dropdown or search bar.
- On selection, the graph should zoom to and highlight the node.
- This complements the existing node expand/remove functionality by improving discoverability in larger graphs.
Use case or motivation
When dealing with large graphs, manually locating nodes is difficult and inefficient. While the component already supports node expansion and removal via interactions, users still need a way to:
- Quickly find nodes of interest without manually searching in the visualization.
- Zoom in and focus on a node to inspect or expand it further.
This significantly improves workflows where users start with partial views of the graph or need to navigate complex networks efficiently.
Additional context
This feature addresses and consolidates the needs raised in the following existing issues:
- Search interface and drop-down menu for sub-graphs #52
- Display the node list and then highlight and zoom the selected node #57
Include any of the following if helpful:
- Example Use Case: A user wants to quickly locate a customer node in a fraud investigation graph, zoom into it, and then use existing expansion features to explore its relationships.
- Suggested implementation: A dropdown or search input listing node labels or IDs. On selection:
- Zoom and center the node.
- Visually highlight it (e.g., change border, pulse, or color temporarily).
- This can either be enabled directly in the component, or allow passing of selected node from the backend. Each has its own pros and cons. TBD.