feat(spans): Allow horizontal scrolling on left pane of span view

static/app/components/events/interfaces/spans/scrollbarManager.tsx

@@ -14,6 +14,7 @@ export type ScrollbarManagerChildrenProps = {
   generateContentSpanBarRef: () => (instance: HTMLDivElement | null) => void;
   onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onScroll: () => void;
+  onWheel: (deltaX: number) => void;
   scrollBarAreaRef: React.RefObject<HTMLDivElement>;
   updateScrollState: () => void;
   virtualScrollbarRef: React.RefObject<HTMLDivElement>;
@@ -25,6 +26,7 @@ const ScrollbarManagerContext = createContext<ScrollbarManagerChildrenProps>({
   scrollBarAreaRef: createRef<HTMLDivElement>(),
   onDragStart: () => {},
   onScroll: () => {},
+  onWheel: () => {},
   updateScrollState: () => {},
 });
 
@@ -105,6 +107,8 @@ export class Provider extends Component<Props, State> {
   virtualScrollbar: React.RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
   scrollBarArea: React.RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
   isDragging: boolean = false;
+  isWheeling: boolean = false;
+  wheelTimeout: NodeJS.Timeout | null = null;
   previousUserSelect: UserSelectValues | null = null;
 
   getReferenceSpanBar() {
@@ -233,11 +237,70 @@ export class Provider extends Component<Props, State> {
   hasInteractiveLayer = (): boolean => !!this.props.interactiveLayerRef.current;
   initialMouseClickX: number | undefined = undefined;
 
-  onScroll = () => {
+  onWheel = (deltaX: number) => {
     if (this.isDragging || !this.hasInteractiveLayer()) {
       return;
     }
 
+    // Setting this here is necessary, since updating the virtual scrollbar position will also trigger the onScroll function
+    this.isWheeling = true;
+
+    if (this.wheelTimeout) {
+      clearTimeout(this.wheelTimeout);
+    }
+
+    this.wheelTimeout = setTimeout(() => {
+      this.isWheeling = false;
+      this.wheelTimeout = null;
+    }, 200);
+
+    const interactiveLayerRefDOM = this.props.interactiveLayerRef.current!;
+
+    const interactiveLayerRect = interactiveLayerRefDOM.getBoundingClientRect();
+    const maxScrollLeft =
+      interactiveLayerRefDOM.scrollWidth - interactiveLayerRefDOM.clientWidth;
+
+    const scrollLeft = clamp(
+      interactiveLayerRefDOM.scrollLeft + deltaX,
+      0,
+      maxScrollLeft
+    );
+
+    interactiveLayerRefDOM.scrollLeft = scrollLeft;
+
+    // Update scroll position of the virtual scroll bar
+    selectRefs(this.scrollBarArea, (scrollBarAreaDOM: HTMLDivElement) => {
+      selectRefs(this.virtualScrollbar, (virtualScrollbarDOM: HTMLDivElement) => {
+        const scrollBarAreaRect = scrollBarAreaDOM.getBoundingClientRect();
+        const virtualScrollbarPosition = scrollLeft / scrollBarAreaRect.width;
+
+        const virtualScrollBarRect = rectOfContent(virtualScrollbarDOM);
+        const maxVirtualScrollableArea =
+          1 - virtualScrollBarRect.width / interactiveLayerRect.width;
+
+        const virtualLeft =
+          clamp(virtualScrollbarPosition, 0, maxVirtualScrollableArea) *
+          interactiveLayerRect.width;
+
+        virtualScrollbarDOM.style.transform = `translate3d(${virtualLeft}px, 0, 0)`;
+        virtualScrollbarDOM.style.transformOrigin = 'left';
+      });
+    });
+
+    // Update scroll positions of all the span bars
+    selectRefs(this.contentSpanBar, (spanBarDOM: HTMLDivElement) => {
+      const left = -scrollLeft;
+
+      spanBarDOM.style.transform = `translate3d(${left}px, 0, 0)`;
+      spanBarDOM.style.transformOrigin = 'left';
+    });
+  };
+
+  onScroll = () => {
+    if (this.isDragging || this.isWheeling || !this.hasInteractiveLayer()) {
+      return;
+    }
+
     const interactiveLayerRefDOM = this.props.interactiveLayerRef.current!;
 
     const interactiveLayerRect = interactiveLayerRefDOM.getBoundingClientRect();
@@ -415,6 +478,7 @@ export class Provider extends Component<Props, State> {
       generateContentSpanBarRef: this.generateContentSpanBarRef,
       onDragStart: this.onDragStart,
       onScroll: this.onScroll,
+      onWheel: this.onWheel,
       virtualScrollbarRef: this.virtualScrollbar,
       scrollBarAreaRef: this.scrollBarArea,
       updateScrollState: this.initializeScrollState,

static/app/components/events/interfaces/spans/spanBar.tsx

@@ -58,7 +58,6 @@ import {
   NUM_OF_SPANS_FIT_IN_MINI_MAP,
 } from './constants';
 import * as DividerHandlerManager from './dividerHandlerManager';
-import * as ScrollbarManager from './scrollbarManager';
 import SpanBarCursorGuide from './spanBarCursorGuide';
 import SpanDetail from './spanDetail';
 import {MeasurementMarker} from './styles';
@@ -108,9 +107,11 @@ type SpanBarProps = {
   event: Readonly<EventTransaction>;
   fetchEmbeddedChildrenState: FetchEmbeddedChildrenState;
   generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
+  generateContentSpanBarRef: () => (instance: HTMLDivElement | null) => void;
   isEmbeddedTransactionTimeAdjusted: boolean;
   numOfSpanChildren: number;
   numOfSpans: number;
+  onWheel: (deltaX: number) => void;
   organization: Organization;
   showEmbeddedChildren: boolean;
   showSpanTree: boolean;
@@ -146,18 +147,42 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
     if (this.spanRowDOMRef.current) {
       this.connectObservers();
     }
+
+    if (this.spanTitleRef.current) {
+      this.spanTitleRef.current.addEventListener('wheel', this.handleWheel, {
+        passive: false,
+      });
+    }
   }
 
   componentWillUnmount() {
     this._mounted = false;
     this.disconnectObservers();
+
+    if (this.spanTitleRef.current) {
+      this.spanTitleRef.current.removeEventListener('wheel', this.handleWheel);
+    }
   }
 
   spanRowDOMRef = createRef<HTMLDivElement>();
+  spanTitleRef = createRef<HTMLDivElement>();
   intersectionObserver?: IntersectionObserver = void 0;
   zoomLevel: number = 1; // assume initial zoomLevel is 100%
   _mounted: boolean = false;
 
+  handleWheel = (event: WheelEvent) => {
+    // https://stackoverflow.com/q/57358640
+    // https://github.com/facebook/react/issues/14856
+    if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    const {onWheel} = this.props;
+    onWheel(event.deltaX);
+  };
+
   toggleDisplayDetail = () => {
     this.setState(state => ({
       showDetail: !state.showDetail,
@@ -425,11 +450,8 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
     );
   }
 
-  renderTitle(
-    scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps,
-    errors: TraceError[] | null
-  ) {
-    const {generateContentSpanBarRef} = scrollbarManagerChildrenProps;
+  renderTitle(errors: TraceError[] | null) {
+    const {generateContentSpanBarRef} = this.props;
     const {
       span,
       treeDepth,
@@ -832,14 +854,12 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
   }
 
   renderHeader({
-    scrollbarManagerChildrenProps,
     dividerHandlerChildrenProps,
     errors,
     transactions,
   }: {
     dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps;
     errors: TraceError[] | null;
-    scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps;
     transactions: QuickTraceEvent[] | null;
   }) {
     const {span, spanBarColor, spanBarHatch, spanNumber} = this.props;
@@ -864,8 +884,9 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
           onClick={() => {
             this.toggleDisplayDetail();
           }}
+          ref={this.spanTitleRef}
         >
-          {this.renderTitle(scrollbarManagerChildrenProps, errors)}
+          {this.renderTitle(errors)}
         </RowCell>
         <DividerContainer>
           {this.renderDivider(dividerHandlerChildrenProps)}
@@ -973,22 +994,18 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
               const transactions = this.getChildTransactions(quickTrace);
               return (
                 <Fragment>
-                  <ScrollbarManager.Consumer>
-                    {scrollbarManagerChildrenProps => (
-                      <DividerHandlerManager.Consumer>
-                        {(
-                          dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
-                        ) =>
-                          this.renderHeader({
-                            dividerHandlerChildrenProps,
-                            scrollbarManagerChildrenProps,
-                            errors,
-                            transactions,
-                          })
-                        }
-                      </DividerHandlerManager.Consumer>
-                    )}
-                  </ScrollbarManager.Consumer>
+                  <DividerHandlerManager.Consumer>
+                    {(
+                      dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
+                    ) =>
+                      this.renderHeader({
+                        dividerHandlerChildrenProps,
+                        errors,
+                        transactions,
+                      })
+                    }
+                  </DividerHandlerManager.Consumer>
+
                   {this.renderDetail({
                     isVisible: isSpanVisibleInView,
                     transactions,

static/app/components/events/interfaces/spans/spanDescendantGroupBar.tsx

@@ -33,6 +33,8 @@ type Props = {
   continuingTreeDepths: Array<TreeDepthType>;
   event: Readonly<EventTransaction>;
   generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
+  generateContentSpanBarRef: () => (instance: HTMLDivElement | null) => void;
+  onWheel: (deltaX: number) => void;
   span: Readonly<ProcessedSpanType>;
   spanGrouping: EnhancedSpan[];
   spanNumber: number;
@@ -49,6 +51,8 @@ export function SpanDescendantGroupBar(props: Props) {
     spanGrouping,
     spanNumber,
     toggleSpanGroup,
+    onWheel,
+    generateContentSpanBarRef,
   } = props;
 
   function renderGroupSpansTitle() {
@@ -161,6 +165,8 @@ export function SpanDescendantGroupBar(props: Props) {
       renderSpanTreeConnector={renderSpanTreeConnector}
       renderGroupSpansTitle={renderGroupSpansTitle}
       renderSpanRectangles={renderSpanRectangles}
+      onWheel={onWheel}
+      generateContentSpanBarRef={generateContentSpanBarRef}
     />
   );
 }