feat(rocprofiler-compute) Data fix and UX improvement for roofline

projects/rocprofiler-compute/CHANGELOG.md

@@ -7,6 +7,8 @@ Full documentation for ROCm Compute Profiler is available at [https://rocm.docs.
 
 ### Added
 
+* Added a *Limited by* mode to the *AI axis* selector in the standalone roofline HTML. It shows each kernel at its limiting memory-level point, falling back to the leftmost point for compute-bound or unknown kernels.
+
 * Added Data Fabric to MALL bandwidth arrows to the CDNA (gfx9) Memory Chart. On gfx940–gfx942 these report estimated HBM bandwidth, derived from a 64B-per-request approximation, through the new `Estimated HBM Read BW` and `Estimated HBM Write and Atomic BW` metrics. On gfx950 they use the existing `HBM Read BW` and the new `HBM Write and Atomic BW` metric.
 
 * Added the `VL1 Coalesce` metric to the VL1D panel of the CDNA (gfx9) Memory Chart.
@@ -15,6 +17,10 @@ Full documentation for ROCm Compute Profiler is available at [https://rocm.docs.
 
 ### Changed
 
+* Improved the standalone roofline HTML kernel hover tooltip: it now shows the limiting roof, percent of roofline, achieved and peak bandwidth per memory level, dispatch count and share of total application dispatches, and kernel duration and share of total application time. Kernel names longer than 200 characters are truncated in the sidebar, with the full name shown on hover.
+
+* The roofline benchmark now reports the peak measured sample across runs instead of the mean.
+
 * Renamed the Memory Chart left-hand panel from "Kernel" to "Compute Units" on CDNA (gfx9) and to "WGPs" on gfx115x and gfx1250. The panel now shows resource allocation stats: Wave Occupancy as a percent of the maximum wavefronts per CU (gfx9) or per WGP (gfx115x, gfx1250), vGPRs, sGPRs, Scratch in KB per wave, LDS Allocation, and Workgroups per active CU (gfx9) or per WGP (gfx115x, gfx1250).
 
 * All Memory Chart bandwidth values now use uniform fixed-point GB/s formatting (3 decimal places) for easy cross-level comparison.

projects/rocprofiler-compute/docs/how-to/analyze/cli.rst

@@ -624,7 +624,8 @@ Example with multiple ``--mem-level`` and ``--roofline-data-type`` options:
 
 Interactive Roofline HTML:
 
-* Use the *AI axis* selector to choose one memory level per kernel, or *All peaks* to plot every level at once. Isolating one kernel shows it across all available memory levels.
+* Use the *AI axis* selector to choose one memory level per kernel, *All peaks* to plot every level at once, or *Limited by* to show each kernel's limiting memory-level point (falling back to its leftmost point when no memory-level limiter is available).
+Isolating one kernel shows it across all available memory levels.
 * Use the *Precision* selector to choose one or more arithmetic precision's peak roofline to display on the plot.
 * Use the *Kernels* and *Bandwidth rooflines* panels to isolate, multi-select, or reset plotted items. The *Runtime shown* slider filters to the heaviest kernels that reach the selected GPU resident-time cutoff.
 * Hover over kernel dots and rooflines to see arithmetic intensity, throughput, roofline percentage, limiter, runtime, bandwidth, and compute-peak details.

projects/rocprofiler-compute/src/roofline/assets/roofline_kernel_list_tooltip.css

@@ -0,0 +1,30 @@
+/* Copyright (c) Advanced Micro Devices, Inc. */
+/* SPDX-License-Identifier:  MIT */
+
+.roofline-name-tooltip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 500;
+  max-width: min(480px, calc(100vw - 24px));
+  padding: 6px 10px;
+  background: var(--roofline-surface);
+  color: var(--roofline-text);
+  border: 1px solid var(--roofline-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-family: var(--roofline-kernel-font, monospace);
+  font-size: 12px;
+  line-height: 1.35;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.1s ease;
+}
+
+.roofline-name-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}

projects/rocprofiler-compute/src/roofline/assets/roofline_kernel_list_tooltip.js

@@ -0,0 +1,99 @@
+// Copyright (c) Advanced Micro Devices, Inc.
+// SPDX-License-Identifier:  MIT
+
+// Kernel's list "click-to-filter" action prevents a default tooltip being shown.
+// Therefore custom tooltip is added to overcome this.
+(function () {
+  "use strict";
+
+  function clamp(value, minimum, maximum) {
+    return Math.min(Math.max(value, minimum), maximum);
+  }
+
+  class RooflineKernelNameTooltip {
+    #offset = 14;
+    #delayMs = 2000;
+    #element = null;
+    #timer = null;
+
+    attachTooltipToKernelRow(kernelRow, kernelLabel, kernelFullName) {
+      var self = this;
+      var lastMousePosition = { x: 0, y: 0 };
+      kernelLabel.addEventListener("mouseenter", function (event) {
+        lastMousePosition = { x: event.clientX, y: event.clientY };
+        self.#showWithDelay(kernelFullName, function () {
+          return lastMousePosition;
+        });
+      });
+      kernelLabel.addEventListener("mousemove", function (event) {
+        lastMousePosition = { x: event.clientX, y: event.clientY };
+        if (self.#element && self.#element.classList.contains("visible")) {
+          self.#position(event.clientX, event.clientY);
+        }
+      });
+      kernelLabel.addEventListener("mouseleave", function () {
+        self.hide();
+      });
+      kernelRow.addEventListener("focus", function () {
+        var rect = kernelLabel.getBoundingClientRect();
+        self.#showWithDelay(kernelFullName, function () {
+          return { x: rect.left, y: rect.bottom };
+        });
+      });
+      kernelRow.addEventListener("blur", function () {
+        self.hide();
+      });
+    }
+
+    hide() {
+      clearTimeout(this.#timer);
+      if (this.#element) {
+        this.#element.classList.remove("visible");
+      }
+    }
+
+    #showWithDelay(text, getPosition) {
+      var self = this;
+      clearTimeout(this.#timer);
+      this.#timer = setTimeout(function () {
+        var position = getPosition();
+        self.#show(text, position.x, position.y);
+      }, this.#delayMs);
+    }
+
+    #show(text, x, y) {
+      var tooltip = this.#createElement();
+      tooltip.textContent = text;
+      tooltip.classList.add("visible");
+      this.#position(x, y);
+    }
+
+    #createElement() {
+      if (!this.#element) {
+        this.#element = document.createElement("div");
+        this.#element.className = "roofline-name-tooltip";
+        this.#element.setAttribute("role", "tooltip");
+        document.body.appendChild(this.#element);
+      }
+      return this.#element;
+    }
+
+    #position(x, y) {
+      var tooltip = this.#element;
+      if (!tooltip) {
+        return;
+      }
+      var maxLeft = Math.max(4, window.innerWidth - tooltip.offsetWidth - 4);
+      var maxTop = Math.max(4, window.innerHeight - tooltip.offsetHeight - 4);
+      tooltip.style.left = clamp(x + this.#offset, 4, maxLeft) + "px";
+      tooltip.style.top = clamp(y + this.#offset, 4, maxTop) + "px";
+    }
+  }
+
+  var tooltip = new RooflineKernelNameTooltip();
+
+  window.RooflineKernelListTooltip = {
+    attachTooltipToKernelRow: tooltip.attachTooltipToKernelRow.bind(tooltip),
+    hide: tooltip.hide.bind(tooltip),
+  };
+})();

projects/rocprofiler-compute/src/roofline/assets/roofline_plot.js

@@ -17,11 +17,13 @@
 
   // ---- Config forwarded from roofline_html.py via the model ---------------
   var ALL_PEAKS_VALUE = model.allPeaksValue;
+  var LIMITING_PEAK_VALUE = model.limitingPeakValue;
   var ROOF_EXTREME_MAX_AI = model.roofExtremeMaxAi;
   var KERNEL_NAME_FONT_FAMILY = model.kernelNameFontFamily;
 
   // ---- Own presentation ---------------------------------------------------
   var ALL_PEAKS_LABEL = "All peaks";
+  var LIMITING_PEAK_LABEL = "Limited by";
   var FALLBACK_COLOR = "#888888";
   var PLOT_DIM_OPACITY = 0.15;
   // How far a roof drawn at 45 degrees in data space may lean on screen.
@@ -295,6 +297,11 @@
     if (peak === ALL_PEAKS_VALUE) {
       return points;
     }
+    if (peak === LIMITING_PEAK_VALUE) {
+      return points.filter(function (point) {
+        return point.peak === kernel.limitingPeak;
+      });
+    }
     return points.filter(function (point) {
       return point.peak === peak;
     });
@@ -1184,9 +1191,13 @@
 
   function exportViewSubtitle() {
     var peak = effectivePeak();
-    var parts = [
-      "AI axis: " + (peak === ALL_PEAKS_VALUE ? ALL_PEAKS_LABEL : peak),
-    ];
+    var peakLabel =
+      peak === ALL_PEAKS_VALUE
+        ? ALL_PEAKS_LABEL
+        : peak === LIMITING_PEAK_VALUE
+        ? LIMITING_PEAK_LABEL
+        : peak;
+    var parts = ["AI axis: " + peakLabel];
     if (hasRuntimeData && isFinite(state.runtimeThreshold)) {
       parts.push("runtime shown: " + state.runtimeThreshold.toFixed(3) + "%");
     }
@@ -1400,6 +1411,9 @@
     var action = document.createElement("button");
     action.type = "button";
     action.className = "roofline-panel-action";
+    if (opts.title) {
+      action.setAttribute("aria-label", opts.title);
+    }
 
     var swatch = document.createElement("span");
     swatch.className = opts.swatchClass || "roofline-swatch";
@@ -1408,13 +1422,21 @@
     var label = document.createElement("span");
     label.className = opts.labelClass || "roofline-panel-name";
     label.textContent = opts.label;
+    if (opts.title) {
+      RooflineKernelListTooltip.attachTooltipToKernelRow(action, label, opts.title);
+    }
 
     action.appendChild(swatch);
     action.appendChild(label);
     opts.actionExtras.forEach(function (node) {
       action.appendChild(node);
     });
-    action.addEventListener("click", opts.onClick);
+    action.addEventListener("click", function (event) {
+      if (opts.title) {
+        RooflineKernelListTooltip.hide();
+      }
+      opts.onClick(event);
+    });
     item.appendChild(action);
     opts.siblingControls.forEach(function (node) {
       item.appendChild(node);
@@ -1426,6 +1448,10 @@
     if (!peakSelect) {
       return;
     }
+    var limitingEl = document.createElement("option");
+    limitingEl.value = LIMITING_PEAK_VALUE;
+    limitingEl.textContent = LIMITING_PEAK_LABEL;
+    peakSelect.appendChild(limitingEl);
     model.peaks.forEach(function (peak) {
       var el = document.createElement("option");
       el.value = peak;
@@ -1508,7 +1534,8 @@
       kernelList.appendChild(
         createPanelRow({
           color: kernel.color,
-          label: kernel.name,
+          label: kernel.label,
+          title: kernel.name,
           labelClass: "roofline-panel-name roofline-kernel-name",
           dataset: { index: String(index) },
           actionExtras: actionExtras,