From e8a74a41f685aa00b1dc03b70455fcf658b73bbd Mon Sep 17 00:00:00 2001
From: Eric Yang <yijieyang@google.com>
Date: Fri, 22 May 2026 11:29:23 -0700
Subject: [PATCH] Internal Changes

PiperOrigin-RevId: 919775509
---
 .../visualizer/model_graph_visualizer.ng.html     |  2 +-
 .../visualizer/model_graph_visualizer_base.ts     | 15 ++++++++++++---
 src/ui/src/components/visualizer/node_styler.ts   |  5 +++++
 .../src/components/visualizer/title_bar.ng.html   |  2 +-
 src/ui/src/components/visualizer/title_bar.ts     |  1 +
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/components/visualizer/model_graph_visualizer.ng.html b/src/ui/src/components/visualizer/model_graph_visualizer.ng.html
index f112d961b..19b0a0f7b 100644
--- a/src/ui/src/components/visualizer/model_graph_visualizer.ng.html
+++ b/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>
     }
diff --git a/src/ui/src/components/visualizer/model_graph_visualizer_base.ts b/src/ui/src/components/visualizer/model_graph_visualizer_base.ts
index 3ac7d6b05..8326313ba 100644
--- a/src/ui/src/components/visualizer/model_graph_visualizer_base.ts
+++ b/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({});
     }
   }
 
diff --git a/src/ui/src/components/visualizer/node_styler.ts b/src/ui/src/components/visualizer/node_styler.ts
index 8759de6b7..8fa06a775 100644
--- a/src/ui/src/components/visualizer/node_styler.ts
+++ b/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',
diff --git a/src/ui/src/components/visualizer/title_bar.ng.html b/src/ui/src/components/visualizer/title_bar.ng.html
index 11d5cffd9..4db34bd0d 100644
--- a/src/ui/src/components/visualizer/title_bar.ng.html
+++ b/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">
diff --git a/src/ui/src/components/visualizer/title_bar.ts b/src/ui/src/components/visualizer/title_bar.ts
index 4ea11acea..a2ccb8140 100644
--- a/src/ui/src/components/visualizer/title_bar.ts
+++ b/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);