From f7a1d6fc765f8981cfd0ad07d4e9ca6905880aec Mon Sep 17 00:00:00 2001
From: Google AI Edge <noreply@google.com>
Date: Thu, 6 Feb 2025 16:40:29 -0800
Subject: [PATCH] Fix NullInjectorError for the benchmark page

PiperOrigin-RevId: 724119352
---
 src/ui/src/components/visualizer/benchmark_runner.ts         | 3 ++-
 src/ui/src/components/visualizer/complex_queries.scss        | 3 ++-
 src/ui/src/components/visualizer/graph_selector_panel.scss   | 2 ++
 src/ui/src/components/visualizer/search_bar.scss             | 2 ++
 src/ui/src/components/visualizer/sync_navigation_button.scss | 2 +-
 src/ui/src/components/visualizer/view_on_node.scss           | 2 +-
 6 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/ui/src/components/visualizer/benchmark_runner.ts b/src/ui/src/components/visualizer/benchmark_runner.ts
index 4d1035b5..337cbeb6 100644
--- a/src/ui/src/components/visualizer/benchmark_runner.ts
+++ b/src/ui/src/components/visualizer/benchmark_runner.ts
@@ -30,6 +30,7 @@ import * as three from 'three';
 import {ModelEdge, ModelGraph, NodeType, OpNode} from './common/model_graph';
 import {Point} from './common/types';
 import {generateCurvePoints} from './common/utils';
+import {EdgeOverlaysService} from './edge_overlays_service';
 import {Logo} from './logo';
 import {SplitPaneService} from './split_pane_service';
 import {SubgraphSelectionService} from './subgraph_selection_service';
@@ -50,7 +51,7 @@ const THREE = three;
     ReactiveFormsModule,
     WebglRenderer,
   ],
-  providers: [SubgraphSelectionService, SplitPaneService],
+  providers: [EdgeOverlaysService, SubgraphSelectionService, SplitPaneService],
   templateUrl: './benchmark_runner.ng.html',
   styleUrls: ['./benchmark_runner.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/ui/src/components/visualizer/complex_queries.scss b/src/ui/src/components/visualizer/complex_queries.scss
index 43835df8..9c7815d3 100644
--- a/src/ui/src/components/visualizer/complex_queries.scss
+++ b/src/ui/src/components/visualizer/complex_queries.scss
@@ -58,7 +58,8 @@
 
       &.min,
       &.max {
-        width: 50px;
+        width: 46px;
+        flex-shrink: 0;
       }
     }
   }
diff --git a/src/ui/src/components/visualizer/graph_selector_panel.scss b/src/ui/src/components/visualizer/graph_selector_panel.scss
index 252a35d8..b982f807 100644
--- a/src/ui/src/components/visualizer/graph_selector_panel.scss
+++ b/src/ui/src/components/visualizer/graph_selector_panel.scss
@@ -31,6 +31,7 @@
   overflow-y: auto;
 
   input {
+    font-family: sans-serif;
     font-size: 12px;
     margin: 4px 10px;
     width: calc(100% - 20px);
@@ -40,6 +41,7 @@
     height: 20px;
     border-radius: 4px;
     padding: 0 2px;
+    min-width: 184px;
   }
 
   .collection-container {
diff --git a/src/ui/src/components/visualizer/search_bar.scss b/src/ui/src/components/visualizer/search_bar.scss
index e63ce702..44cf6edb 100644
--- a/src/ui/src/components/visualizer/search_bar.scss
+++ b/src/ui/src/components/visualizer/search_bar.scss
@@ -36,6 +36,7 @@
       font-size: 20px;
       width: 20px;
       height: 20px;
+      flex-shrink: 0;
     }
 
     mat-icon.clear {
@@ -55,6 +56,7 @@
       padding: 0 4px;
       font-size: 12px;
       flex-grow: 1;
+      min-width: 0;
     }
 
     .btn-clear-container {
diff --git a/src/ui/src/components/visualizer/sync_navigation_button.scss b/src/ui/src/components/visualizer/sync_navigation_button.scss
index a84e9b6d..4366a0f7 100644
--- a/src/ui/src/components/visualizer/sync_navigation_button.scss
+++ b/src/ui/src/components/visualizer/sync_navigation_button.scss
@@ -182,7 +182,7 @@ $sync_highlight_color: #004fb8;
     margin: 4px 0 0 36px;
     resize: none;
     border-radius: 3px;
-    font-family: 'Google Sans Text', 'Google Sans', Arial, Helvetica, sans-serif;
+    font-family: sans-serif;
     font-size: 11px;
     padding: 2px;
     line-break: anywhere;
diff --git a/src/ui/src/components/visualizer/view_on_node.scss b/src/ui/src/components/visualizer/view_on_node.scss
index 1f4bc5b5..e7fd837e 100644
--- a/src/ui/src/components/visualizer/view_on_node.scss
+++ b/src/ui/src/components/visualizer/view_on_node.scss
@@ -109,7 +109,7 @@
       border: 1px solid #aaa;
       border-radius: 3px;
       padding: 3px 26px 3px 4px;
-      min-width: 200px;
+      width: 200px;
 
       &::placeholder {
         color: #aaa;