Internal Cleanup.

PiperOrigin-RevId: 829628249

Author: cliveverghese

frontend/app/common/interfaces/data_table.ts

@@ -254,7 +254,7 @@ export type OpProfileProto = opProfileProto.Profile;
 /** All overview page data table type. */
 export type OverviewPageDataTable =
     GeneralAnalysis|InputPipelineAnalysis|RecommendationResult|RunEnvironment|
-    SimpleDataTable|NormalizedAcceleratorPerformance;
+    SimpleDataTable|NormalizedAcceleratorPerformance|PodViewerTopology;
 
 /** All overview page data tuple type. */
 export type OverviewPageDataTuple = [
@@ -265,6 +265,7 @@ export type OverviewPageDataTuple = [
   SimpleDataTable,
   NormalizedAcceleratorPerformance,
   SimpleDataTable,
+  PodViewerTopology,
 ];
 
 /* tslint:disable enforce-name-casing */

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

@@ -47,6 +47,7 @@
       </smart-suggestion-view>
       <ng-content select="[sblView]"></ng-content>
       <ng-content select="[tfDataView]"></ng-content>
+      <ng-content select="[topology]"></ng-content>
     </div>
   </div>
 </div>

frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html

@@ -2,8 +2,8 @@
   <div class="mat-title">
     {{deviceType}} {{xDimension}}x{{yDimension}}
   </div>
-  <div class="topology-header">
-    <div class="control-row-left">
+  <div class="topology-header" *ngIf="(metricList && metricList.length) || (channelDb && channelDb.length)">
+    <div class="control-row-left" >
       <span class="selected-metric-label control">{{selectedMetricLabel}}</span>
       <button mat-icon-button [matMenuTriggerFor]="mecticMenu" aria-label="Metric menu">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -100,7 +100,7 @@
       <pre>{{tooltipText}}</pre>
   </div>
 
-  <div class="color-table">
+  <div class="color-table" *ngIf="podStatsPerCore">
     <div
       *ngFor="let colorInfo of colorInfos">
       <div class="color-cell" [style.backgroundColor]="colorInfo.color"></div>

frontend/app/components/pod_viewer/topology_graph/topology_graph.scss

@@ -25,6 +25,7 @@
 
 .container {
   position: relative;
+  z-index: 0;
 }
 
 .label {
@@ -48,7 +49,7 @@
   border-radius: 8px;
   border: 1px solid #333;
   background-color: #eee;
-  z-index:-2;
+  z-index: -2;
 }
 
 .node {
@@ -63,7 +64,7 @@
 
 .node pre {
   margin: 8px 0px 0px 2px;
-  font-size:13px;
+  font-size: 13px;
   color: white;
 }
 
@@ -94,7 +95,7 @@
 
 .selected-metric-item {
   font-weight: bold;
-  background: rgba(0, 0, 0, 0.02)
+  background: rgba(0, 0, 0, 0.02);
 }
 
 .channel-input {

frontend/app/components/pod_viewer/topology_graph/topology_graph.ts

@@ -348,7 +348,7 @@ export class TopologyGraph implements OnChanges, OnDestroy {
   private updateNodes() {
     this.nodes = [];
 
-    if (!this.topology || !this.podStatsPerCore) {
+    if (!this.topology) {
       return;
     }
 
@@ -375,7 +375,7 @@ export class TopologyGraph implements OnChanges, OnDestroy {
           this.nodes[chipz].nodes.push(nodeInfo);
         }
       });
-    } else {
+    } else if (this.podStatsPerCore) {
       this.nodes[0] = {nodes: []};
       Object.keys(this.podStatsPerCore).forEach(coreId => {
         const podStatsRecord = this.podStatsPerCore![coreId];