fix: sync reset zoom button state with trace view (#74383)

Fix resizing of trace view causing updates to the x coordinate

static/app/views/performance/newTraceDetails/trace.tsx

@@ -217,6 +217,7 @@ export function Trace({
     const onTraceViewChange: TraceEvents['set trace view'] = () => {
       manager.recomputeTimelineIntervals();
       manager.recomputeSpanToPXMatrix();
+      manager.syncResetZoomButton();
       manager.draw();
     };
     const onPhysicalSpaceChange: TraceEvents['set container physical space'] = () => {

static/app/views/performance/newTraceDetails/traceRenderers/traceView.tsx

@@ -49,16 +49,16 @@ export class TraceView {
     const x = view.x ?? this.trace_view.x;
     const width = view.width ?? this.trace_view.width;
 
-    this.trace_view.width = clamp(
-      width,
-      this.MAX_ZOOM_PRECISION_MS,
-      this.trace_space.width - this.trace_view.x
-    );
     this.trace_view.x = clamp(
       x,
       0,
       Math.max(this.trace_space.width - width, this.MAX_ZOOM_PRECISION_MS)
     );
+    this.trace_view.width = clamp(
+      width,
+      this.MAX_ZOOM_PRECISION_MS,
+      this.trace_space.width - this.trace_view.x
+    );
   }
 
   getConfigSpaceCursor(cursor: {x: number; y: number}): [number, number] {

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx

@@ -166,7 +166,6 @@ export class VirtualizedViewManager {
     this.onHorizontalScrollbarScroll = this.onHorizontalScrollbarScroll.bind(this);
   }
 
-  dividerScale: 1 | undefined = undefined;
   dividerStartVec: [number, number] | null = null;
   previousDividerClientVec: [number, number] | null = null;
 
@@ -175,8 +174,6 @@ export class VirtualizedViewManager {
       return;
     }
 
-    this.dividerScale =
-      this.view.trace_view.width === this.view.trace_space.width ? 1 : undefined;
     this.dividerStartVec = [event.clientX, event.clientY];
     this.previousDividerClientVec = [event.clientX, event.clientY];
 
@@ -194,7 +191,6 @@ export class VirtualizedViewManager {
       return;
     }
 
-    this.dividerScale = undefined;
     const distance = event.clientX - this.dividerStartVec[0];
     const distancePercentage = distance / this.view.trace_container_physical_space.width;
 
@@ -226,17 +222,10 @@ export class VirtualizedViewManager {
       (this.columns.span_list.width - distancePercentage) *
       this.view.trace_container_physical_space.width;
 
-    const physical_distance = this.previousDividerClientVec[0] - event.clientX;
-    const config_distance_pct = physical_distance / this.view.trace_physical_space.width;
-    const config_distance = this.view.trace_view.width * config_distance_pct;
-
-    if (!this.dividerScale) {
-      this.scheduler.dispatch('set trace view', {
-        x: this.view.trace_view.x - config_distance,
-        width: this.view.trace_view.width + config_distance,
-      });
-    }
-
+    this.scheduler.dispatch('set trace view', {
+      x: this.view.trace_view.x,
+      width: this.view.trace_view.width,
+    });
     this.scheduler.dispatch('divider resize', {
       list: this.columns.list.width + distancePercentage,
       span_list: this.columns.span_list.width - distancePercentage,
@@ -560,18 +549,15 @@ export class VirtualizedViewManager {
     const rafCallback = (now: number) => {
       const elapsed = now - start;
       const progress = elapsed / duration;
-
       const eased = easeOutSine(progress);
 
-      const x = start_x + distance_x * eased;
-      const width = start_width - distance_width * eased;
-
-      this.scheduler.dispatch('set trace view', {
-        x,
-        width,
-      });
-
-      if (progress < 1) {
+      if (progress <= 1) {
+        const x = start_x + distance_x * eased;
+        const width = start_width - distance_width * eased;
+        this.scheduler.dispatch('set trace view', {
+          x,
+          width,
+        });
         this.timers.onZoomIntoSpace = window.requestAnimationFrame(rafCallback);
       } else {
         this.timers.onZoomIntoSpace = null;
@@ -702,7 +688,6 @@ export class VirtualizedViewManager {
   syncResetZoomButton() {
     if (!this.reset_zoom_button) return;
     this.reset_zoom_button.disabled =
-      this.view.trace_view.x === 0 &&
       this.view.trace_view.width === this.view.trace_space.width;
   }