fix(trace) offset spans that end < 1px from the right edge (getsentry…

…#76271) Prevent spans from being rendered at the far right side of the trace from being clipped outside of the view
fubop · Aug 15, 2024 · 90d8115 · 90d8115
1 parent 88808a8
commit 90d8115
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.spec.tsx b/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.spec.tsx
@@ -174,7 +174,9 @@ describe('VirtualizedViewManger', () => {
       manager.view.setTraceSpace([0, 0, 100, 1]);
       manager.view.setTracePhysicalSpace([0, 0, 1000, 1], [0, 0, 1000, 1]);
 
-      expect(manager.computeSpanCSSMatrixTransform([0, 100])).toEqual([1, 0, 0, 1, 0, 0]);
+      expect(manager.computeSpanCSSMatrixTransform([0, 100])).toEqual([
+        1, 0, 0, 1, -2, 0,
+      ]);
     });
 
     it('computes x position correctly', () => {
@@ -191,7 +193,7 @@ describe('VirtualizedViewManger', () => {
       manager.view.setTracePhysicalSpace([0, 0, 1000, 1], [0, 0, 1000, 1]);
 
       expect(manager.computeSpanCSSMatrixTransform([50, 1000])).toEqual([
-        1, 0, 0, 1, 50, 0,
+        1, 0, 0, 1, 48, 0,
       ]);
     });
 
@@ -209,7 +211,7 @@ describe('VirtualizedViewManger', () => {
       manager.view.setTracePhysicalSpace([0, 0, 1000, 1], [0, 0, 1000, 1]);
 
       expect(manager.computeSpanCSSMatrixTransform([50, 1000])).toEqual([
-        1, 0, 0, 1, 50, 0,
+        1, 0, 0, 1, 48, 0,
       ]);
     });
 
@@ -228,7 +230,7 @@ describe('VirtualizedViewManger', () => {
         manager.view.setTracePhysicalSpace([0, 0, 1000, 1], [0, 0, 1000, 1]);
 
         expect(manager.computeSpanCSSMatrixTransform([100, 100])).toEqual([
-          1, 0, 0, 1, 0, 0,
+          1, 0, 0, 1, -2, 0,
         ]);
       });
       it('computes x position correctly when view is offset', () => {
@@ -245,7 +247,7 @@ describe('VirtualizedViewManger', () => {
         manager.view.setTracePhysicalSpace([0, 0, 1000, 1], [0, 0, 1000, 1]);
 
         expect(manager.computeSpanCSSMatrixTransform([100, 100])).toEqual([
-          1, 0, 0, 1, 0, 0,
+          1, 0, 0, 1, -2, 0,
         ]);
       });
     });

diff --git a/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx b/static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx
@@ -878,6 +878,15 @@ export class VirtualizedViewManager {
       (space[0] - this.view.to_origin) / this.span_to_px[0] -
       this.view.trace_view.x / this.span_to_px[0];
 
+    // if span ends less than 1px before the end of the view, we move it back by 1px and prevent it from being clipped
+    if (
+      (this.view.to_origin + this.view.trace_space.width - space[0] - space[1]) /
+        this.span_to_px[0] <=
+      1
+    ) {
+      // 1px for the span and 1px for the border
+      this.span_matrix[4] = this.span_matrix[4] - 2;
+    }
     return this.span_matrix;
   }