wip

Author: dashed

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/minimap.tsx

@@ -14,6 +14,7 @@ import {
 import {DragManagerChildrenProps} from './dragManager';
 import {ParsedTraceType, TickAlignment} from './types';
 
+export const MINIMAP_CONTAINER_HEIGHT = 106;
 const MINIMAP_HEIGHT = 75;
 const TIME_AXIS_HEIGHT = 30;
 
@@ -564,6 +565,8 @@ const DurationGuideBox = styled('div')`
 `;
 
 const MinimapContainer = styled('div')`
+  opacity: 0.3;
+
   width: 100%;
   position: sticky;
   left: 0;

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/span.tsx

@@ -8,12 +8,16 @@ import Count from 'app/components/count';
 import Tooltip from 'app/components/tooltip';
 
 import {SPAN_ROW_HEIGHT, SpanRow} from './styles';
+import {MINIMAP_CONTAINER_HEIGHT} from './minimap';
 
 import {
   toPercent,
   SpanBoundsType,
   SpanGeneratedBoundsType,
   getHumanDuration,
+  // rectOfElement,
+  // rectRelativeTo,
+  // rectOfViewport,
 } from './utils';
 import {SpanType} from './types';
 import {DividerHandlerManagerChildrenProps} from './dividerHandlerManager';
@@ -26,6 +30,7 @@ type PropType = {
   numOfSpanChildren: number;
   renderedSpanChildren: Array<JSX.Element>;
   spanBarColour: string;
+  spanNumber: number;
 
   dividerHandlerChildrenProps: DividerHandlerManagerChildrenProps;
 };
@@ -35,12 +40,22 @@ type State = {
   showSpanTree: boolean;
 };
 
+const INTERSECTION_THRESHOLDS: Array<number> = [];
+
+for (let i = 0; i <= 1.0; i += 0.01) {
+  INTERSECTION_THRESHOLDS.push(i);
+}
+
 class Span extends React.Component<PropType, State> {
   state: State = {
     displayDetail: false,
     showSpanTree: true,
   };
 
+  spanRowDOMRef = React.createRef<HTMLDivElement>();
+  intersectionObserver?: IntersectionObserver = void 0;
+  resizeObserver?: any = void 0;
+
   toggleSpanTree = () => {
     this.setState(state => {
       return {
@@ -202,6 +217,8 @@ class Span extends React.Component<PropType, State> {
 
     return (
       <SpanRow
+        innerRef={this.spanRowDOMRef}
+        data-span-number={String(this.props.spanNumber)}
         style={{
           display: isVisible ? 'block' : 'none',
 
@@ -272,6 +289,83 @@ class Span extends React.Component<PropType, State> {
     );
   };
 
+  connectObserver = () => {
+    if (!this.spanRowDOMRef.current) {
+      return;
+    }
+
+    this.disconnectObserver();
+
+    this.intersectionObserver = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          const spanNumber = entry.target.getAttribute('data-span-number');
+
+          // console.log('entry', entry, entry.target);
+
+          // root refers to the root intersection rectangle used for the IntersectionObserver
+          const rectRelativeToRoot = entry.boundingClientRect as DOMRect;
+
+          const bottomYCoord = rectRelativeToRoot.y + rectRelativeToRoot.height;
+
+          // refers to if the rect is out of view from the viewport
+          const isOutOfViewAbove = rectRelativeToRoot.y < 0 && bottomYCoord < 0;
+
+          if (isOutOfViewAbove) {
+            return;
+          }
+
+          const relativeToMinimap = {
+            top: rectRelativeToRoot.y - MINIMAP_CONTAINER_HEIGHT,
+            bottom: bottomYCoord - MINIMAP_CONTAINER_HEIGHT,
+          };
+
+          const rectBelowMinimap =
+            relativeToMinimap.top > 0 && relativeToMinimap.bottom > 0;
+
+          if (rectBelowMinimap || relativeToMinimap.bottom <= 0) {
+            return;
+          }
+
+          console.log('entry', spanNumber);
+        });
+      },
+      {
+        threshold: INTERSECTION_THRESHOLDS,
+        rootMargin: `-${MINIMAP_CONTAINER_HEIGHT}px 0px 0px 0px`,
+      }
+    );
+
+    this.intersectionObserver.observe(this.spanRowDOMRef.current);
+  };
+
+  disconnectObserver = () => {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+  };
+
+  componentDidMount() {
+    if (this.spanRowDOMRef.current) {
+      this.connectObserver();
+
+      this.resizeObserver = new (window as any).ResizeObserver(() => {
+        console.log('resized');
+        this.connectObserver();
+      });
+
+      this.resizeObserver.observe(this.spanRowDOMRef.current);
+    }
+  }
+
+  componentWillUnmount() {
+    this.disconnectObserver();
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
   render() {
     return (
       <React.Fragment>

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/spanTree.tsx

@@ -15,6 +15,7 @@ import DividerHandlerManager, {
 
 type RenderedSpanTree = {
   spanTree: JSX.Element | null;
+  nextSpanNumber: number;
   numOfHiddenSpansAbove: number;
 };
 
@@ -26,6 +27,7 @@ type PropType = {
 
 class SpanTree extends React.Component<PropType> {
   renderSpan = ({
+    spanNumber,
     treeDepth,
     numOfHiddenSpansAbove,
     spanID,
@@ -36,6 +38,7 @@ class SpanTree extends React.Component<PropType> {
     pickSpanBarColour,
     dividerHandlerChildrenProps,
   }: {
+    spanNumber: number;
     treeDepth: number;
     numOfHiddenSpansAbove: number;
     spanID: string;
@@ -59,6 +62,7 @@ class SpanTree extends React.Component<PropType> {
 
     type AccType = {
       renderedSpanChildren: Array<JSX.Element>;
+      nextSpanNumber: number;
       numOfHiddenSpansAbove: number;
     };
 
@@ -67,6 +71,7 @@ class SpanTree extends React.Component<PropType> {
         const key = `${traceID}${spanChild.span_id}`;
 
         const results = this.renderSpan({
+          spanNumber: acc.nextSpanNumber,
           treeDepth: treeDepth + 1,
           numOfHiddenSpansAbove: acc.numOfHiddenSpansAbove,
           span: spanChild,
@@ -84,10 +89,13 @@ class SpanTree extends React.Component<PropType> {
 
         acc.numOfHiddenSpansAbove = results.numOfHiddenSpansAbove;
 
+        acc.nextSpanNumber = results.nextSpanNumber;
+
         return acc;
       },
       {
         renderedSpanChildren: [],
+        nextSpanNumber: spanNumber + 1,
         numOfHiddenSpansAbove: isCurrentSpanHidden ? numOfHiddenSpansAbove + 1 : 0,
       }
     );
@@ -104,10 +112,12 @@ class SpanTree extends React.Component<PropType> {
 
     return {
       numOfHiddenSpansAbove: reduced.numOfHiddenSpansAbove,
+      nextSpanNumber: reduced.nextSpanNumber,
       spanTree: (
         <React.Fragment>
           {hiddenSpansMessage}
           <Span
+            spanNumber={spanNumber}
             span={span}
             generateBounds={generateBounds}
             treeDepth={treeDepth}
@@ -156,6 +166,7 @@ class SpanTree extends React.Component<PropType> {
     });
 
     return this.renderSpan({
+      spanNumber: 1,
       treeDepth: 0,
       numOfHiddenSpansAbove: 0,
       span: rootSpan,

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/utils.tsx

@@ -9,7 +9,7 @@ type Rect = {
 };
 
 // get position of element relative to top/left of document
-const getOffsetOfElement = (element: HTMLElement) => {
+const getOffsetOfElement = (element: Element) => {
   // left and top are relative to viewport
   const {left, top} = element.getBoundingClientRect();
 
@@ -20,7 +20,7 @@ const getOffsetOfElement = (element: HTMLElement) => {
   return {x: left + scrollLeft, y: top + scrollTop};
 };
 
-export const rectOfContent = (element: HTMLElement): Rect => {
+export const rectOfContent = (element: Element): Rect => {
   const {x, y} = getOffsetOfElement(element);
 
   // offsets for the border and any scrollbars (clientLeft and clientTop),
@@ -38,6 +38,15 @@ export const rectOfContent = (element: HTMLElement): Rect => {
   };
 };
 
+export const rectOfViewport = (): Rect => {
+  return {
+    x: window.pageXOffset,
+    y: window.pageYOffset,
+    width: window.document.documentElement.clientWidth,
+    height: window.document.documentElement.clientHeight,
+  };
+};
+
 export const rectRelativeTo = (rect: Rect, pos = {x: 0, y: 0}): Rect => {
   return {
     x: rect.x - pos.x,