Is your feature request related to a problem? Please describe.
Add a search box to the graph toolbar that highlights matching nodes/relationships — both in
the interactive widget (Jupyter/anywidget/Streamlit) and in the standalone HTML export produced
by VisualizationGraph.render().
Currently there's no way to search within an exported HTML file at all, and no way to
search-and-highlight within the live widget either (only whatever selection/filtering a user
does manually). I think especially allowing search in the exported html is of interest, since this will improve the experience of sharing and receiving a graph as a standalone file drastically.
Describe the solution you would like
The dependency this project already uses, @neo4j-ndl/react-graph (currently pinned to 2.1.3 in
js-applet/package.json), already ships everything needed:
- GraphVisualization.SearchButton — a ready-made toolbar button component with an
onSearch(nodeIds, relationshipIds) callback (see its type defs, e.g. via
@neo4j-ndl/react-graph@2.1.3/lib/types/graph-visualization.d.ts)
- highlightedNodeIds / highlightedRelationshipIds — props on the root
component itself, explicitly documented for this exact use case:
// undefined = no highlighting (default behavior)
// empty array = no search matches (dims all nodes)
// array with IDs = highlight only those items
highlightedNodeIds={searchResults.nodeIds}
highlightedRelationshipIds={searchResults.relationshipIds}
Neither is currently mounted in js-applet/src/graph-widget.tsx. The toolbar there
(IconButtonArray) already conditionally renders GraphVisualization.LayoutSelectButton behind a
showLayoutButton prop threaded from options.py → WidgetOptions → JS. A showSearchButton prop
mirroring that same pattern, wired to GraphVisualization.SearchButton + the highlighted*Ids
props, would add this feature.
Because graph-widget.tsx is the shared component used by both the anywidget bundle
(vite.config.ts) and the standalone HTML build (vite.config.html.ts), this single change would
fix both the interactive widget and the static HTML export at once.
Suggested shape of the change
In graph-widget.tsx:
const [searchResults, setSearchResults] = useState<{
nodeIds?: string[];
relationshipIds?: string[];
}>();
// toolbar, alongside the existing buttons:
{showSearchButton && (
<GraphVisualization.SearchButton
onSearch={(nodeIds, relationshipIds) => setSearchResults({ nodeIds, relationshipIds })}
/>
)}
// root <GraphVisualization ...>:
highlightedNodeIds={searchResults?.nodeIds}
highlightedRelationshipIds={searchResults?.relationshipIds}
And in options.py, a show_search_button: bool mirroring the existing show_layout_button field,
threaded through WidgetOptions/RenderOptions.to_widget_options().
Describe alternatives you have considered
Currently, I've had to build a custom search bar in the exported html, but this solution only allows me to see if something is in the graph, not where it is.
Additional context
Exported HTML files are used as standalone artifacts (e.g. shared with people who don't have
access to the app that generated them), and right now there's no way to find anything in a
large exported graph without external tooling. Since the search UI is already built and shipped
as a dependency, this seems like a good return-on-effort addition.
Happy to test a build if someone puts up a branch — I don't currently have bandwidth to build
the JS toolchain myself, but I've verified the above by inspecting the published
@neo4j-ndl/react-graph@2.1.3 type definitions and the current graph-widget.tsx toolbar wiring.
Is your feature request related to a problem? Please describe.
Add a search box to the graph toolbar that highlights matching nodes/relationships — both in
the interactive widget (Jupyter/anywidget/Streamlit) and in the standalone HTML export produced
by VisualizationGraph.render().
Currently there's no way to search within an exported HTML file at all, and no way to
search-and-highlight within the live widget either (only whatever selection/filtering a user
does manually). I think especially allowing search in the exported html is of interest, since this will improve the experience of sharing and receiving a graph as a standalone file drastically.
Describe the solution you would like
The dependency this project already uses, @neo4j-ndl/react-graph (currently pinned to 2.1.3 in
js-applet/package.json), already ships everything needed:
onSearch(nodeIds, relationshipIds) callback (see its type defs, e.g. via
@neo4j-ndl/react-graph@2.1.3/lib/types/graph-visualization.d.ts)
component itself, explicitly documented for this exact use case:
Neither is currently mounted in js-applet/src/graph-widget.tsx. The toolbar there
(IconButtonArray) already conditionally renders GraphVisualization.LayoutSelectButton behind a
showLayoutButton prop threaded from options.py → WidgetOptions → JS. A showSearchButton prop
mirroring that same pattern, wired to GraphVisualization.SearchButton + the highlighted*Ids
props, would add this feature.
Because graph-widget.tsx is the shared component used by both the anywidget bundle
(vite.config.ts) and the standalone HTML build (vite.config.html.ts), this single change would
fix both the interactive widget and the static HTML export at once.
Suggested shape of the change
In graph-widget.tsx:
And in options.py, a show_search_button: bool mirroring the existing show_layout_button field,
threaded through WidgetOptions/RenderOptions.to_widget_options().
Describe alternatives you have considered
Currently, I've had to build a custom search bar in the exported html, but this solution only allows me to see if something is in the graph, not where it is.
Additional context
Exported HTML files are used as standalone artifacts (e.g. shared with people who don't have
access to the app that generated them), and right now there's no way to find anything in a
large exported graph without external tooling. Since the search UI is already built and shipped
as a dependency, this seems like a good return-on-effort addition.
Happy to test a build if someone puts up a branch — I don't currently have bandwidth to build
the JS toolchain myself, but I've verified the above by inspecting the published
@neo4j-ndl/react-graph@2.1.3 type definitions and the current graph-widget.tsx toolbar wiring.