Prevent area selections from going beyond the start and end of the trace bounds

Author: stevegolton

ui/src/base/bigint_math.ts

@@ -113,4 +113,14 @@ export class BigintMath {
   static abs(n: bigint) {
     return n < 0n ? -1n * n : n;
   }
+
+  static clamp(n: bigint, min: bigint, max: bigint): bigint {
+    if (n < min) {
+      return min;
+    } else if (n > max) {
+      return max;
+    } else {
+      return n;
+    }
+  }
 }

ui/src/base/bigint_math_unittest.ts

@@ -255,4 +255,32 @@ describe('BigIntMath', () => {
       expect(result).toEqual(0n);
     });
   });
+
+  describe('clamp', () => {
+    it('returns value when within range', () => {
+      expect(BIM.clamp(5n, 0n, 10n)).toEqual(5n);
+    });
+
+    it('returns min when value is below range', () => {
+      expect(BIM.clamp(-5n, 0n, 10n)).toEqual(0n);
+    });
+
+    it('returns max when value is above range', () => {
+      expect(BIM.clamp(15n, 0n, 10n)).toEqual(10n);
+    });
+
+    it('returns value when equal to min', () => {
+      expect(BIM.clamp(0n, 0n, 10n)).toEqual(0n);
+    });
+
+    it('returns value when equal to max', () => {
+      expect(BIM.clamp(10n, 0n, 10n)).toEqual(10n);
+    });
+
+    it('works with negative ranges', () => {
+      expect(BIM.clamp(-15n, -10n, -5n)).toEqual(-10n);
+      expect(BIM.clamp(-7n, -10n, -5n)).toEqual(-7n);
+      expect(BIM.clamp(0n, -10n, -5n)).toEqual(-5n);
+    });
+  });
 });

ui/src/base/time.ts

@@ -176,6 +176,10 @@ export class Time {
     return Time.fromRaw(BigintMath.quant(a, b));
   }
 
+  static clamp(t: time, min: time, max: time): time {
+    return Time.fromRaw(BigintMath.clamp(t, min, max));
+  }
+
   static formatSeconds(time: time): string {
     return Time.toSeconds(time).toString() + ' s';
   }
@@ -440,6 +444,13 @@ export class TimeSpan {
       Time.add(this.end, padding),
     );
   }
+
+  clamp(min: time, max: time): TimeSpan {
+    return new TimeSpan(
+      Time.clamp(this.start, min, max),
+      Time.clamp(this.end, min, max),
+    );
+  }
 }
 
 /**

ui/src/base/time_unittest.ts

@@ -156,6 +156,51 @@ describe('TimeSpan', () => {
     const x = mkSpan(10n, 20n);
     expect(x.pad(5n)).toEqual(mkSpan(5n, 25n));
   });
+
+  describe('clamp', () => {
+    it('returns same span when fully within bounds', () => {
+      expect(mkSpan(10n, 20n).clamp(t(0n), t(30n))).toEqual(mkSpan(10n, 20n));
+    });
+
+    it('clamps start when below lower bound', () => {
+      expect(mkSpan(0n, 20n).clamp(t(5n), t(30n))).toEqual(mkSpan(5n, 20n));
+    });
+
+    it('clamps end when above upper bound', () => {
+      expect(mkSpan(10n, 40n).clamp(t(0n), t(30n))).toEqual(mkSpan(10n, 30n));
+    });
+
+    it('clamps both ends when span exceeds bounds', () => {
+      expect(mkSpan(0n, 40n).clamp(t(5n), t(30n))).toEqual(mkSpan(5n, 30n));
+    });
+
+    it('produces zero-length span when entirely before lower bound', () => {
+      expect(mkSpan(0n, 5n).clamp(t(10n), t(20n))).toEqual(mkSpan(10n, 10n));
+    });
+
+    it('produces zero-length span when entirely after upper bound', () => {
+      expect(mkSpan(25n, 30n).clamp(t(10n), t(20n))).toEqual(mkSpan(20n, 20n));
+    });
+  });
+});
+
+describe('Time.clamp', () => {
+  it('returns value when within range', () => {
+    expect(Time.clamp(t(5n), t(0n), t(10n))).toBe(t(5n));
+  });
+
+  it('returns min when below range', () => {
+    expect(Time.clamp(t(-1n), t(0n), t(10n))).toBe(t(0n));
+  });
+
+  it('returns max when above range', () => {
+    expect(Time.clamp(t(15n), t(0n), t(10n))).toBe(t(10n));
+  });
+
+  it('returns value when equal to min or max', () => {
+    expect(Time.clamp(t(0n), t(0n), t(10n))).toBe(t(0n));
+    expect(Time.clamp(t(10n), t(0n), t(10n))).toBe(t(10n));
+  });
 });
 
 test('formatTimezone', () => {

ui/src/core_plugins/dev.perfetto.Timeline/track_tree_view.ts

@@ -37,7 +37,7 @@ import {
 import {HighPrecisionTime} from '../../base/high_precision_time';
 import {HighPrecisionTimeSpan} from '../../base/high_precision_time_span';
 import {assertExists} from '../../base/assert';
-import {Time} from '../../base/time';
+import {Time, TimeSpan} from '../../base/time';
 import {TimeScale} from '../../base/time_scale';
 import {
   DragEvent,
@@ -624,7 +624,11 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
               renderedTracks,
             );
 
-            this.handleDrag.currentTime = currentTime;
+            this.handleDrag.currentTime = currentTime.clamp(
+              trace.traceInfo.start,
+              trace.traceInfo.end,
+            );
+
             trace.timeline.selectedSpan = this.handleDrag
               .timeSpan()
               .toTimeSpan();
@@ -640,10 +644,15 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
               renderedTracks,
             );
 
+            const newAreaSelection = new TimeSpan(
+              Time.min(newStartTime.toTime('ceil'), areaSelection.end),
+              Time.max(newStartTime.toTime('ceil'), areaSelection.end),
+            ).clamp(trace.traceInfo.start, trace.traceInfo.end);
+
             trace.selection.selectArea({
               ...areaSelection,
-              end: Time.max(newStartTime.toTime('ceil'), areaSelection.end),
-              start: Time.min(newStartTime.toTime('ceil'), areaSelection.end),
+              start: newAreaSelection.start,
+              end: newAreaSelection.end,
             });
             trace.timeline.selectedSpan = undefined;
             this.handleDrag = undefined;
@@ -678,7 +687,10 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
               renderedTracks,
             );
 
-            this.handleDrag.currentTime = currentTime;
+            this.handleDrag.currentTime = currentTime.clamp(
+              trace.traceInfo.start,
+              trace.traceInfo.end,
+            );
             trace.timeline.selectedSpan = this.handleDrag
               .timeSpan()
               .toTimeSpan();
@@ -694,10 +706,14 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
               renderedTracks,
             );
 
+            const newAreaSelection = new TimeSpan(
+              Time.min(newEndTime.toTime('ceil'), areaSelection.start),
+              Time.max(newEndTime.toTime('ceil'), areaSelection.start),
+            ).clamp(trace.traceInfo.start, trace.traceInfo.end);
             trace.selection.selectArea({
               ...areaSelection,
-              end: Time.max(newEndTime.toTime('ceil'), areaSelection.start),
-              start: Time.min(newEndTime.toTime('ceil'), areaSelection.start),
+              end: newAreaSelection.end,
+              start: newAreaSelection.start,
             });
             trace.timeline.selectedSpan = undefined;
             this.handleDrag = undefined;
@@ -737,7 +753,10 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
             this.areaDrag.currentY = e.dragCurrent.y;
 
             this.trace.raf.scheduleCanvasRedraw();
-            trace.timeline.selectedSpan = this.areaDrag.timeSpan().toTimeSpan();
+            trace.timeline.selectedSpan = this.areaDrag
+              .timeSpan()
+              .toTimeSpan()
+              .clamp(trace.traceInfo.start, trace.traceInfo.end);
           },
           onDragEnd: (e) => {
             if (!this.areaDrag) {
@@ -768,7 +787,11 @@ export class TrackTreeView implements m.ClassComponent<TrackTreeViewAttrs> {
               .map((t) => t.uri)
               .filter((uri) => uri !== undefined);
 
-            const timeSpan = this.areaDrag.timeSpan().toTimeSpan();
+            const timeSpan = this.areaDrag
+              .timeSpan()
+              .toTimeSpan()
+              .clamp(trace.traceInfo.start, trace.traceInfo.end);
+
             trace.selection.selectArea({
               start: timeSpan.start,
               end: timeSpan.end,