Add tooltip for Memory Aggregation Stats

PiperOrigin-RevId: 611620598
tensorflow · Feb 29, 2024 · fc3d60e · fc3d60e
1 parent fe3d482
commit fc3d60e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
@@ -16,6 +16,8 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@org_xprof//frontend/app/common/angular:angular_material_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_icon",
+        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
     ],

diff --git a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary.ng.html b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary.ng.html
@@ -65,11 +65,46 @@
       </table>
     </div>
     <ul>
-      <li class="primary-content">Timestamp: {{ timestampAtPeakMs }} ms</li>
-      <li class="primary-content">Stack Reservation: {{ stackAtPeak }}</li>
-      <li class="primary-content">Heap Allocation: {{ heapAtPeak }} </li>
-      <li class="primary-content">Free Memory: {{ freeAtPeak }} </li>
-      <li class="primary-content">Fragmentation: {{ fragmentationAtPeakPct }}</li>
+      <li class="primary-content">Timestamp: {{ timestampAtPeakMs }} ms
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Where this happens on the Timeline Graph."
+          matTooltipPosition="above">
+          info
+        </mat-icon>
+      </li>
+      <li class="primary-content">Stack Reservation: {{ stackAtPeak }}
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Amount of memory (in GiBs) reserved on the stack"
+          matTooltipPosition="above">
+          info
+        </mat-icon>
+      </li>
+      <li class="primary-content">Heap Allocation: {{ heapAtPeak }}
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Amount of memory (in GiBs) allocated on the heap"
+          matTooltipPosition="above">
+          info
+        </mat-icon>
+      </li>
+      <li class="primary-content">Free Memory: {{ freeAtPeak }}
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Amount of memory (in GiBs) that is free (so Stack Reservation + Heap Allocation + Free Memory = Memory Capacity)."
+          matTooltipPosition="above">
+          info
+        </mat-icon>
+      </li>
+      <li class="primary-content">Fragmentation: {{ fragmentationAtPeakPct }}
+      <mat-icon
+        class="tooltip-icon"
+        matTooltip="The percentage of fragmentation (lower is better), It is defined as: Fragmentation = 100% * (1 - largest-chunk-of-free-memory / total-free-memory)"
+        matTooltipPosition="above">
+        info
+      </mat-icon>
+      </li>
     </ul>
   </mat-card-content>
 </mat-card>
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary.scss b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary.scss
@@ -51,3 +51,15 @@ ul {
   color: #e8710a;
   border-bottom: 1px dotted #e8710a;
 }
+
+.tooltip-icon-container {
+  position: relative;
+}
+
+.tooltip-icon {
+  color: #e8710a;
+  font-size: 20px;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+
diff --git a/...end/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts b/...end/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
@@ -1,15 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {MemoryProfileSummary} from './memory_profile_summary';
 
 @NgModule({
   declarations: [MemoryProfileSummary],
-  imports: [
-    CommonModule,
-    MatCardModule,
-  ],
+  imports: [CommonModule, MatCardModule, MatTooltipModule, MatIconModule],
   exports: [MemoryProfileSummary]
 })
 export class MemoryProfileSummaryModule {