feat(apm): Navigate from an ancestor transaction to a descendent transaction within a trace

src/sentry/static/sentry/app/components/events/interfaces/spans/index.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import styled from 'react-emotion';
-import SentryTypes from 'app/sentryTypes';
-import SearchBar from 'app/components/searchBar';
+import PropTypes from 'prop-types';
 
 import {t} from 'app/locale';
+import SearchBar from 'app/components/searchBar';
+import SentryTypes from 'app/sentryTypes';
 import {Panel} from 'app/components/panels';
 import space from 'app/styles/space';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {SentryTransactionEvent} from './types';
 import TraceView from './traceView';
 
 type PropType = {
+  orgId: string;
   event: SentryTransactionEvent;
+  eventView: EventView;
 };
 
 type State = {
@@ -21,6 +25,7 @@ type State = {
 class SpansInterface extends React.Component<PropType, State> {
   static propTypes = {
     event: SentryTypes.Event.isRequired,
+    orgId: PropTypes.string.isRequired,
   };
 
   state: State = {
@@ -34,7 +39,7 @@ class SpansInterface extends React.Component<PropType, State> {
   };
 
   render() {
-    const {event} = this.props;
+    const {event, orgId, eventView} = this.props;
 
     return (
       <div>
@@ -45,7 +50,12 @@ class SpansInterface extends React.Component<PropType, State> {
           onSearch={this.handleSpanFilter}
         />
         <Panel>
-          <TraceView event={event} searchQuery={this.state.searchQuery} />
+          <TraceView
+            event={event}
+            searchQuery={this.state.searchQuery}
+            orgId={orgId}
+            eventView={eventView}
+          />
         </Panel>
       </div>
     );

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

@@ -9,6 +9,7 @@ import space from 'app/styles/space';
 import Count from 'app/components/count';
 import Tooltip from 'app/components/tooltip';
 import InlineSvg from 'app/components/inlineSvg';
+import EventView from 'app/views/eventsV2/eventView';
 
 import {
   toPercent,
@@ -164,6 +165,7 @@ const getDurationDisplay = ({
 };
 
 type SpanBarProps = {
+  orgId: string;
   trace: Readonly<ParsedTraceType>;
   span: Readonly<SpanType>;
   spanBarColour: string;
@@ -177,6 +179,7 @@ type SpanBarProps = {
   isRoot?: boolean;
   toggleSpanTree: () => void;
   isCurrentSpanFilteredOut: boolean;
+  eventView: EventView;
 };
 
 type SpanBarState = {
@@ -218,9 +221,11 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
       return null;
     }
 
-    const {span} = this.props;
+    const {span, orgId, isRoot, eventView} = this.props;
 
-    return <SpanDetail span={span} />;
+    return (
+      <SpanDetail span={span} orgId={orgId} isRoot={!!isRoot} eventView={eventView} />
+    );
   };
 
   getBounds = (): {