From fc3d60ef8467ab9ce22f688f066238e67a13796b Mon Sep 17 00:00:00 2001
From: Profiler Team <copybara-servicebot@google.com>
Date: Thu, 29 Feb 2024 15:47:07 -0800
Subject: [PATCH] Add tooltip for Memory Aggregation Stats

PiperOrigin-RevId: 611620598
---
 .../memory_profile_summary/BUILD              |  2 +
 .../memory_profile_summary.ng.html            | 45 ++++++++++++++++---
 .../memory_profile_summary.scss               | 12 +++++
 .../memory_profile_summary_module.ts          |  7 ++-
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
index c06a8adf..4b1d3ae7 100644
--- 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
index 1095e27c..bfffb0de 100644
--- 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
index 260ea7bf..3dd40e21 100644
--- 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/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
index d3c88bd8..240ef50a 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
+++ b/frontend/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 {