Creates search bar for filtering HLO ops in the op profile tool

frontend/app/components/op_profile/op_profile.ng.html

@@ -66,12 +66,30 @@
               (change)="updateChildrenCount($event.target.value)" />
       </mat-form-field>
     </div>
+    <div class="control">
+      <mat-form-field class="full-width">
+        <mat-label>Op Name</mat-label>
+        <input
+          matInput
+          matTooltip="Op name to filter by."
+          aria-label="op-name"
+          required
+          autocomplete="off"
+          type="text"
+          name="Search Bar"
+          [value]="searchFilterString"
+          (keyup)="updateSearchFilter($event.target.value)"
+          placeholder="Search for ops.."
+        />
+      </mat-form-field>
+    </div>
   </div>
 </div>
 
 <op-table
   [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,10 @@ export class OpProfileBase {
   updateShowP90() {
     this.showP90 = !this.showP90;
   }
+
+  updateSearchFilter(value: string) {
+    this.searchFilterString = value.toLowerCase() ?? '';
+    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) => {