ui: delineat last counter sample in the trace

Use a gradiient + dashed line to indicate the last sample. This allows making clear that
the last sample didn't have any further data and *not* that we know the sample had this value
until the end of the trace

Author: LalitMaganti

ui/src/components/tracks/base_counter_track.ts

@@ -814,6 +814,7 @@ export abstract class BaseCounterTrack implements TrackRenderer {
     const timestamp = Time.fromRaw(timestamps[0]);
     ctx.moveTo(Math.max(0, calculateX(timestamp)), zeroY);
     let lastDrawnY = zeroY;
+    let lastX = 0;
     for (let i = 0; i < timestamps.length; i++) {
       const timestamp = Time.fromRaw(timestamps[i]);
       const x = Math.max(0, calculateX(timestamp));
@@ -831,12 +832,45 @@ export abstract class BaseCounterTrack implements TrackRenderer {
         ctx.lineTo(x, lastY);
       }
       lastDrawnY = lastY;
+      lastX = x;
     }
-    ctx.lineTo(endPx, lastDrawnY);
-    ctx.lineTo(endPx, zeroY);
+
+    // Draw the main shape (without extension)
+    // We need to stroke before closing the path to avoid stroking the vertical
+    // line at lastX
+    ctx.lineTo(lastX, lastDrawnY);
+    ctx.stroke();
+
+    // Now close the fill without stroking
+    ctx.lineTo(lastX, zeroY);
     ctx.closePath();
     ctx.fill();
-    ctx.stroke();
+
+    // Draw fade-out from last sample to edge
+    if (endPx > lastX) {
+      // Gradient fill for fade-out (no vertical line at lastX)
+      const gradient = ctx.createLinearGradient(lastX, 0, endPx, 0);
+      gradient.addColorStop(0, `hsla(${hue}, 45%, 50%, 0.6)`);
+      gradient.addColorStop(1, `hsla(${hue}, 45%, 50%, 0)`);
+
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastDrawnY);
+      ctx.lineTo(endPx, lastDrawnY);
+      ctx.lineTo(endPx, zeroY);
+      ctx.lineTo(lastX, zeroY);
+      ctx.closePath();
+      ctx.fill();
+
+      // Dashed line
+      ctx.strokeStyle = `hsl(${hue}, 10%, 71%)`;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastDrawnY);
+      ctx.lineTo(endPx, lastDrawnY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
 
     if (yMin < 0 && yMax > 0) {
       // Draw the Y=0 dashed line.
@@ -874,7 +908,11 @@ export abstract class BaseCounterTrack implements TrackRenderer {
       ctx.moveTo(xStart, y);
       ctx.lineTo(xEnd, y);
       ctx.lineWidth = 3;
+      if (hover.tsEnd === undefined) {
+        ctx.setLineDash([4, 4]);
+      }
       ctx.stroke();
+      ctx.setLineDash([]);
       ctx.lineWidth = 1;
 
       // Draw change marker if it would be visible.

ui/src/plugins/dev.perfetto.TraceProcessorTrack/counter_details_panel.ts

@@ -188,11 +188,12 @@ async function loadCounterDetails(
   });
   const value = row.value;
   const leftTs = Time.fromRaw(row.leftTs);
-  const rightTs = row.rightTs !== null ? Time.fromRaw(row.rightTs) : leftTs;
   const prevValue = row.prevValue !== null ? row.prevValue : value;
 
   const delta = value - prevValue;
-  const duration = rightTs - leftTs;
+  // If there's no next event, duration is -1 (no more events)
+  const duration =
+    row.rightTs !== null ? Time.fromRaw(row.rightTs) - leftTs : -1n;
   const argSetId = row.argSetId;
   const args =
     argSetId == null ? undefined : await getArgs(engine, asArgSetId(argSetId));