Skip to main content

glint-graph-search-field

A search field to find nodes in a graph. The component will try to match the search query to the nodes in the graph. If the query is specific enough to find 1 node, that node will be returned with a found event.

<glint-diagram-control-layout>
  <glint-class-diagram diagram
                       [graph]="graph"
                       [focus]="focus()" />
  <glint-graph-search-field control [graph]="graph" (found)="gotoNode($event)"/>
</glint-diagram-control-layout>
  • [graph]: Graph to search through.
  • (found): Event that triggers when a node is found.

You can use the result to zoom in on the target node by using the [focus] attribute.

class MyDiagram {

  focus = signal<string | undefined>(undefined)
  
  gotoNode(node: GraphNode<ClassNode> | null) {
    if (node) {
      this.focus.set(node.id)
    } else {
      this.focus.set(undefined)
    }
  
  }
}