Skip to content

Expose a search/highlight toolbar button (the underlying GraphVisualization.SearchButton support is already there, just unused) #442

Description

@conraddonau-kfst

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions