diff --git a/frontend/app/components/op_profile/op_profile.ng.html b/frontend/app/components/op_profile/op_profile.ng.html index 004791958..b0a07cadf 100644 --- a/frontend/app/components/op_profile/op_profile.ng.html +++ b/frontend/app/components/op_profile/op_profile.ng.html @@ -65,6 +65,9 @@ matTooltip="Number of ops to show per layer. 10 ~ 100 with increment of 10." (change)="updateChildrenCount($event.target.value)" /> +
+ +
@@ -73,5 +76,6 @@ [rootNode]="rootNode" [byWasted]="byWasted" [showP90]="showP90" - [childrenCount]="childrenCount"> + [childrenCount]="childrenCount" + [searchFilterString]="searchFilterString"> diff --git a/frontend/app/components/op_profile/op_profile_base.ts b/frontend/app/components/op_profile/op_profile_base.ts index cfe7be2bd..fe85bfa59 100644 --- a/frontend/app/components/op_profile/op_profile_base.ts +++ b/frontend/app/components/op_profile/op_profile_base.ts @@ -15,6 +15,7 @@ export class OpProfileBase { showP90 = false; childrenCount = 10; deviceType = 'TPU'; + searchFilterString = ''; private updateRoot() { if (!this.profile) { @@ -76,4 +77,11 @@ export class OpProfileBase { updateShowP90() { this.showP90 = !this.showP90; } + + updateSearchFilter(value: string) { + this.searchFilterString = value ?? ''; + console.log('updateSearchFilter', this.searchFilterString); + this.updateRoot(); + this.data.update(this.rootNode); + } } diff --git a/frontend/app/components/op_profile/op_table/op_table.ng.html b/frontend/app/components/op_profile/op_table/op_table.ng.html index 9a64ccc46..b6d963fd1 100644 --- a/frontend/app/components/op_profile/op_table/op_table.ng.html +++ b/frontend/app/components/op_profile/op_table/op_table.ng.html @@ -18,6 +18,7 @@ [byWasted]="byWasted" [showP90]="showP90" [childrenCount]="childrenCount" + [searchFilterString]="searchFilterString" (hover)="updateActive($event)" (selected)="updateSelected($event); updateActive($event);"> diff --git a/frontend/app/components/op_profile/op_table/op_table.ts b/frontend/app/components/op_profile/op_table/op_table.ts index b5f7a99df..5d66348ea 100644 --- a/frontend/app/components/op_profile/op_table/op_table.ts +++ b/frontend/app/components/op_profile/op_table/op_table.ts @@ -23,6 +23,8 @@ export class OpTable implements OnDestroy { /** The number of children nodes to be shown. */ @Input() childrenCount: number = 10; + @Input() searchFilterString = ''; + selectedNode?: Node; constructor(private readonly store: Store<{}>) {} diff --git a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ng.html b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ng.html index aefe35e6e..424f6fcaa 100644 --- a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ng.html +++ b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ng.html @@ -50,6 +50,7 @@ [byWasted]="byWasted" [showP90]="showP90" [childrenCount]="childrenCount" + [searchFilterString]="searchFilterString" (hover)="hover.emit($event);" (selected)="onSelect($event);"> diff --git a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts index 2c929bf00..c029311ad 100644 --- a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts +++ b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts @@ -33,6 +33,9 @@ export class OpTableEntry implements OnChanges { /** The number of children nodes to be shown. */ @Input() childrenCount = 10; + // Filters out nodes that don't have descendants that match the filter. + @Input() searchFilterString = ''; + /** The event when the mouse enter or leave. */ @Output() readonly hover = new EventEmitter(); @@ -123,11 +126,29 @@ export class OpTableEntry implements OnChanges { return this.childrenCount; } + private matchesSearchFilter(node: Node): boolean { + if (!node || !node.name || node.children?.length === 0) { + return false; + } + if (this.searchFilterString.length === 0) { + return true; + } + if (node.name && + node.name.toLowerCase().includes(this.searchFilterString)) { + return true; + } + return (node.children ?? []) + .some((child) => this.matchesSearchFilter(child)); + } + private getChildren(): Node[] { if (!this.node || !this.node.children || !this.rootNode) { return []; } - let children: Node[] = this.node.children.slice(); + let children: Node[] = + (this.node.children.slice()) + .filter( + (child) => this.level !== 0 || this.matchesSearchFilter(child)); if (this.byWasted && this.rootNode) { children.sort( (a, b) => {