Skip to content

feat(devtools): implement a signal graph nodes search#68991

Open
hawkgs wants to merge 1 commit into
angular:mainfrom
hawkgs:devtools/signal-graph-filter
Open

feat(devtools): implement a signal graph nodes search#68991
hawkgs wants to merge 1 commit into
angular:mainfrom
hawkgs:devtools/signal-graph-filter

Conversation

@hawkgs
Copy link
Copy Markdown
Member

@hawkgs hawkgs commented May 28, 2026

Implement singal graph nodes search for easier navigation within graphs with large sets of nodes. The search provides filtering by node type via type:<SIGNAL_TYPE> syntax.

ng-filter, that is used in the directive tree, has been reused and repurposed as a generic/shared component.

Screen.Recording.2026-05-28.at.19.07.45.mov

Implement singal graph nodes search for easier navigation within graphs with large sets of nodes. The search provides filtering by node type via `type:<SIGNAL_TYPE>` syntax.

`ng-filter`, that had been used in the directive tree, is reused and repurposed as a generic/shared component.
@ngbot ngbot Bot added this to the Backlog milestone May 28, 2026
@angular-robot angular-robot Bot added the detected: feature PR contains a feature commit label May 28, 2026
styleUrls: ['./filter.component.scss'],
imports: [MatIcon, MatTooltip],
})
export class FilterComponent {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes to this component are minimal. Mainly:

  • Added comments
  • Updated the SCSS to enable configurability
  • Added a configurable placeholder and debounce functionality


private debounceTimeout?: ReturnType<typeof setTimeout>;

emitFilter(filterStr: string): void {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q: Wouldn't it be better to use signals forms and debounce? I say this without having the full context of how it interacts with other components in devtools, but I think it could simplify things a bit.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get your point. I guess that purely from semantics point of view, this filter doesn't really qualify as a form since it's rather a real-time type-to-search, and we don't strictly deal with any kind of form state management here.

I could see RxJS as an alternative here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: devtools detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants