- Consolidate style and templates for overview page.

- Flex align left and right column of the page to `start`, to avoid wasted space caused by aligned height before.

PiperOrigin-RevId: 720347947

frontend/app/components/overview_page/overview_page.ng.html

@@ -1,24 +1,25 @@
 <!--
   The Overview Page is a view within the tf-profile-dashboard.
   It is the first page that users would look at in order to understand
-  the overall performance of their TPU workloads. The page has five
-  sections of results:
+  the overall performance of their TPU workloads. The page is divided into the left and right section:
+  Left section:
     (1) Performance summary
-    (2) Step-time graph
-    (3) Top 10 TensorFlow Operations executed on TPU
-    (4) Run environment
-    (5) Recommendation for next steps
+    (2) Run environment
+  Right section:
+    (1) Step-time graph for training / inference
+    (2) Top 10 TensorFlow Operations executed on TPU
+    (3) Recommendation for next steps
 -->
 
 <div>
   <diagnostics-view [diagnostics]="diagnostics"></diagnostics-view>
   <div class="container">
     <div class="left-column">
       <performance-summary
+          [isInference]="hasInferenceLatencyData"
           [generalAnalysis]="generalAnalysis"
           [inputPipelineAnalysis]="inputPipelineAnalysis"
-          [inferenceLatencyData]="inferenceLatencyData"
-          [isInference]="hasInferenceLatencyData()">
+          [inferenceLatencyData]="inferenceLatencyData">
       </performance-summary>
       <run-environment-view [runEnvironment]="runEnvironment">
         <div profileDetail>
@@ -31,19 +32,22 @@
     </div>
 
     <div class="right-column">
-      <step-time-graph id="step-time-graph" [inputPipelineAnalysis]="inputPipelineAnalysis" *ngIf="inputPipelineAnalysis?.rows?.length"></step-time-graph>
+      <step-time-graph
+        *ngIf="hasStepTimeGraphData"
+        id="step-time-graph"
+        [inputPipelineAnalysis]="inputPipelineAnalysis">
+      </step-time-graph>
       <inference-latency-chart
-      [inferenceLatencyData]="inferenceLatencyData" *ngIf="hasInferenceLatencyData()">
+        *ngIf="hasInferenceLatencyData"
+        [inferenceLatencyData]="inferenceLatencyData">
       </inference-latency-chart>
-      <recommendation-result-view [recommendationResult]="recommendationResult">
-      </recommendation-result-view>
-    </div>
-
-    <div class="full-column">
       <top-ops-table
-          [generalAnalysis]="generalAnalysis"
-          [inputPipelineAnalysis]="inputPipelineAnalysis">
+        [initiallyExpanded]="false"
+        [generalAnalysis]="generalAnalysis"
+        [inputPipelineAnalysis]="inputPipelineAnalysis">
       </top-ops-table>
+      <recommendation-result-view [recommendationResult]="recommendationResult">
+      </recommendation-result-view>
     </div>
   </div>
 </div>

frontend/app/components/overview_page/overview_page.scss

@@ -4,11 +4,13 @@
 
 :host {
   display: block;
+  padding-top: 10px;
 }
 
 .container {
   display: flex;
   flex-wrap: wrap;
+  align-items: start;
   width: 100%;
 }
 
@@ -41,3 +43,11 @@
     width: 100%;
   }
 }
+
+.key-label {
+  font-weight: 500;
+}
+
+.value-label {
+  word-break: break-all;
+}

frontend/app/components/overview_page/overview_page_common.ts

@@ -44,7 +44,12 @@ export class OverviewPageCommon {
     this.diagnostics = parseDiagnosticsDataTable(data[DIAGNOSTICS_INDEX]);
   }
 
-  hasInferenceLatencyData(): boolean {
+  get hasInferenceLatencyData(): boolean {
+    // Assumption: is inference session if hasInferenceLatencyData is not empty
     return !!this.inferenceLatencyData?.rows?.length;
   }
+
+  get hasStepTimeGraphData(): boolean {
+    return !!this.inputPipelineAnalysis?.rows?.length;
+  }
 }