Display label when available in pod_viewer

PiperOrigin-RevId: 567685714
tensorflow · Sep 22, 2023 · 9d3c07b · 9d3c07b
1 parent 73b514f
commit 9d3c07b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
@@ -40,6 +40,10 @@
       </mat-form-field>
     </div>
   </div>
+  <div>
+    <pre>The global chip_id is displayed for each chip.</pre>
+    <pre>The chips are displayed along the x,y axis. A new row is created for each z axis</pre>
+  </div>
   <div
     *ngFor="let z_nodes of nodes; let z_axis=index;"
     class="container"
@@ -68,8 +72,10 @@
       [attr.rid]="node.rid"
       [style.top]="node.y + 'px'"
       [style.left]="node.x + 'px'"
+      [style.z-index] = "node.label? 0 : -1"
       (mouseenter)="showTooltip(node.id, $event)"
       (mouseleave)="hideTooltip()">
+      <pre>{{node.label}}</pre>
     </div>
     <div
       *ngFor="let arrow of arrows"

diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.scss b/frontend/app/components/pod_viewer/topology_graph/topology_graph.scss
@@ -48,6 +48,7 @@
   border-radius: 8px;
   border: 1px solid #333;
   background-color: #eee;
+  z-index:-2;
 }
 
 .node {
@@ -56,10 +57,16 @@
   border: 1px solid #333;
   width: 15px;
   height: 30px;
-  background-color: #1d91c0;
+  background-color: #4b4b4b;
   transition: background-color 1s;
 }
 
+.node pre {
+  margin: 8px 0px 0px 2px;
+  font-size:13px;
+  color: white;
+}
+
 .color-table {
   display: flex;
   flex-wrap: nowrap;

diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ts
@@ -15,6 +15,7 @@ interface ColorInfo {
 interface ElementInfo {
   id?: string;
   rid?: number;
+  label?: string;
   x: number;
   y: number;
 }
@@ -360,6 +361,9 @@ export class TopologyGraph implements OnChanges, OnDestroy {
           const chipz = chip.z || 0;
           const nodeInfo = this.getNodePositionFromCoordinates(chipx, chipy, i);
           nodeInfo.id = this.createElementId(chipId, i);
+          if (i === 0) {
+            nodeInfo.label = chipId.toString();
+          }
           if (this.coreIdToReplicaIdMap &&
               this.coreIdToReplicaIdMap[chipId] !== undefined) {
             nodeInfo.rid = this.coreIdToReplicaIdMap[chipId];