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) => {