Internal Changes

src/ui/src/components/visualizer/model_graph_visualizer.ng.html

@@ -24,7 +24,7 @@
   } @else {
     <!-- Title bar at the top. -->
     @if (showTitleBar) {
-      <title-bar (titleClicked)="titleClicked.emit()">
+      <title-bar (titleClicked)="titleClicked.emit()" (nodeStylerOpened)="nodeStylerOpened.emit()">
         <ng-content></ng-content>
       </title-bar>
     }

src/ui/src/components/visualizer/model_graph_visualizer_base.ts

@@ -119,6 +119,12 @@ export abstract class ModelGraphVisualizerBase
   /** Triggered when the double clicked node is changed. */
   @Output() readonly doubleClickedNodeChanged = new EventEmitter<NodeInfo>();
 
+  /** Triggered when the node search shortcut (Ctrl/Cmd+F) is pressed. */
+  @Output() readonly nodeSearchTriggered = new EventEmitter<void>();
+
+  /** Triggered when the node styler dialog is opened. */
+  @Output() readonly nodeStylerOpened = new EventEmitter<void>();
+
   curProcessedModelGraph?: ModelGraph;
   ready = false;
 
@@ -262,10 +268,13 @@ export abstract class ModelGraphVisualizerBase
     }
     // Press ctrl/cmd+f for search.
     else if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
-      if (!this.config?.hideTitleBar) {
-        event.preventDefault();
+      if (!inInputElement()) {
+        if (!this.config?.hideTitleBar) {
+          event.preventDefault();
+        }
+        this.nodeSearchTriggered.emit();
+        this.appService.searchKeyClicked.next({});
       }
-      this.appService.searchKeyClicked.next({});
     }
   }
 

src/ui/src/components/visualizer/node_styler.ts

@@ -20,6 +20,8 @@ import {CommonModule} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
+  Output,
   ViewContainerRef,
   signal,
 } from '@angular/core';
@@ -48,6 +50,8 @@ import {NodeStylerService} from './node_styler_service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodeStyler {
+  @Output() readonly nodeStylerOpened = new EventEmitter<void>();
+
   readonly hasNonEmptyNodeStylerRules;
   readonly dialogOpened = signal<boolean>(false);
 
@@ -62,6 +66,7 @@ export class NodeStyler {
 
   handleClickOpenDialog() {
     this.dialogOpened.set(true);
+    this.nodeStylerOpened.emit();
 
     const dialogRef = this.dialog.open(NodeStylerDialog, {
       width: '800px',

src/ui/src/components/visualizer/title_bar.ng.html

@@ -40,7 +40,7 @@
 
     <div class="divider tighter-right"></div>
 
-    <node-styler></node-styler>
+    <node-styler (nodeStylerOpened)="nodeStylerOpened.emit()"></node-styler>
 
     <div class="icons-container">
       <a href="https://github.com/google-ai-edge/model-explorer" target="_blank">

src/ui/src/components/visualizer/title_bar.ts

@@ -74,6 +74,7 @@ let ndpId = 0;
 })
 export class TitleBar {
   @Output() readonly titleClicked = new EventEmitter<void>();
+  @Output() readonly nodeStylerOpened = new EventEmitter<void>();
 
   private readonly appService = inject(AppService);
   private readonly dialog = inject(MatDialog);