Tested by entering input into this search bar and checking if items f…

…iltered out match the criteria that the name of an item or its children must regex match the string in the search bar

PiperOrigin-RevId: 705934808

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)" />
       </mat-form-field>
+      <div class="control">
+        <input type="text" name="Search Bar" [value]="searchFilterString" (keyup)="updateSearchFilter($event.target.value)" placeholder="Search for ops..">
+      </div>
     </div>
   </div>
 </div>
@@ -73,5 +76,6 @@
   [rootNode]="rootNode"
   [byWasted]="byWasted"
   [showP90]="showP90"
-  [childrenCount]="childrenCount">
+  [childrenCount]="childrenCount"
+  [searchFilterString]="searchFilterString">
 </op-table>

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);
+  }
 }

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);">
 </op-table-entry>

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

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);">
   </op-table-entry>

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<Node|null>();
 
@@ -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) => {