feat(trace): add reset zoom button (#67106)

Add a quick buttom to zoom out of the view


https://github.com/getsentry/sentry/assets/9317857/26e1a590-600c-4a1e-9147-496e3221ce4a

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

@@ -13,6 +13,7 @@ import styled from '@emotion/styled';
 import type {Location} from 'history';
 import * as qs from 'query-string';
 
+import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import DiscoverButton from 'sentry/components/discoverButton';
 import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
@@ -394,6 +395,10 @@ function TraceViewContent(props: TraceViewContentProps) {
     null
   );
 
+  const onResetZoom = useCallback(() => {
+    viewManager.resetZoom();
+  }, [viewManager]);
+
   return (
     <TraceExternalLayout>
       <Layout.Header>
@@ -439,6 +444,9 @@ function TraceViewContent(props: TraceViewContentProps) {
             resultCount={searchState.results?.length}
             resultIteratorIndex={searchState.resultIteratorIndex}
           />
+          <Button size="xs" onClick={onResetZoom}>
+            {t('Reset Zoom')}
+          </Button>
         </TraceToolbar>
         <TraceGrid ref={r => (traceContainerRef.current = r)}>
           <Trace
@@ -561,6 +569,9 @@ const TraceInnerLayout = styled('div')`
 
 const TraceToolbar = styled('div')`
   flex-grow: 0;
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  gap: ${space(1)};
 `;
 
 const TraceGrid = styled('div')`

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

@@ -619,6 +619,10 @@ export class VirtualizedViewManager {
     this.zoomIntoSpaceRaf = window.requestAnimationFrame(rafCallback);
   }
 
+  resetZoom() {
+    this.onZoomIntoSpace([this.to_origin, this.trace_space.width]);
+  }
+
   onWheelEndRaf: number | null = null;
   enqueueOnWheelEndRaf() {
     if (this.onWheelEndRaf !== null) {