ref(trace-view): Move shared tree toggle component (#25321)

Ripped from #25264 part 3

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

@@ -5,7 +5,15 @@ import styled from '@emotion/styled';
 
 import Count from 'app/components/count';
 import Tooltip from 'app/components/tooltip';
-import {IconChevron, IconWarning} from 'app/icons';
+import {ROW_HEIGHT, ROW_PADDING} from 'app/components/waterfallTree/constants';
+import {
+  ConnectorBar,
+  StyledIconChevron,
+  TreeConnector,
+  TreeToggle,
+  TreeToggleContainer,
+} from 'app/components/waterfallTree/treeConnector';
+import {IconWarning} from 'app/icons';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
@@ -24,13 +32,7 @@ import {
 } from './header';
 import * as ScrollbarManager from './scrollbarManager';
 import SpanDetail from './spanDetail';
-import {
-  getHatchPattern,
-  SPAN_ROW_HEIGHT,
-  SPAN_ROW_PADDING,
-  SpanRow,
-  zIndex,
-} from './styles';
+import {getHatchPattern, SpanRow, zIndex} from './styles';
 import {ParsedTraceType, ProcessedSpanType, TreeDepthType} from './types';
 import {
   durationlessBrowserOps,
@@ -448,7 +450,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
           style={{
             right: '16px',
             height: '10px',
-            bottom: isLast ? `-${SPAN_ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
             top: 'auto',
           }}
           key={`${spanID}-last`}
@@ -458,13 +460,13 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     }
 
     return (
-      <SpanTreeConnector
+      <TreeConnector
         isLast={isLast}
         hasToggler={hasToggler}
         orphanBranch={isOrphanSpan(span)}
       >
         {connectorBars}
-      </SpanTreeConnector>
+      </TreeConnector>
     );
   }
 
@@ -475,18 +477,18 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
 
     if (numOfSpanChildren <= 0) {
       return (
-        <SpanTreeTogglerContainer style={{left: `${left}px`}}>
+        <TreeToggleContainer style={{left: `${left}px`}}>
           {this.renderSpanTreeConnector({hasToggler: false})}
-        </SpanTreeTogglerContainer>
+        </TreeToggleContainer>
       );
     }
 
     const chevronElement = !isRoot ? <div>{chevron}</div> : null;
 
     return (
-      <SpanTreeTogglerContainer style={{left: `${left}px`}} hasToggler>
+      <TreeToggleContainer style={{left: `${left}px`}} hasToggler>
         {this.renderSpanTreeConnector({hasToggler: true})}
-        <SpanTreeToggler
+        <TreeToggle
           disabled={!!isRoot}
           isExpanded={showSpanTree}
           onClick={event => {
@@ -501,8 +503,8 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
         >
           <Count value={numOfSpanChildren} />
           {chevronElement}
-        </SpanTreeToggler>
-      </SpanTreeTogglerContainer>
+        </TreeToggle>
+      </TreeToggleContainer>
     );
   }
 
@@ -943,7 +945,7 @@ export const SpanRowCell = styled('div')<SpanRowCellProps>`
 export const SpanRowCellContainer = styled('div')<SpanRowCellProps>`
   display: flex;
   position: relative;
-  height: ${SPAN_ROW_HEIGHT}px;
+  height: ${ROW_HEIGHT}px;
 
   /* for virtual scrollbar */
   overflow: hidden;
@@ -1008,7 +1010,7 @@ export const DividerLineGhostContainer = styled('div')`
 export const SpanBarTitleContainer = styled('div')`
   display: flex;
   align-items: center;
-  height: ${SPAN_ROW_HEIGHT}px;
+  height: ${ROW_HEIGHT}px;
   position: absolute;
   left: 0;
   top: 0;
@@ -1026,110 +1028,6 @@ export const SpanBarTitle = styled('div')`
   align-items: center;
 `;
 
-type TogglerTypes = OmitHtmlDivProps<{
-  hasToggler?: boolean;
-  isLast?: boolean;
-}>;
-
-export const SpanTreeTogglerContainer = styled('div')<TogglerTypes>`
-  position: relative;
-  height: ${SPAN_ROW_HEIGHT}px;
-  width: 40px;
-  min-width: 40px;
-  margin-right: ${space(1)};
-  z-index: ${zIndex.spanTreeToggler};
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-`;
-
-export const SpanTreeConnector = styled('div')<TogglerTypes & {orphanBranch: boolean}>`
-  height: ${p => (p.isLast ? SPAN_ROW_HEIGHT / 2 : SPAN_ROW_HEIGHT)}px;
-  width: 100%;
-  border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
-  position: absolute;
-  top: 0;
-
-  &:before {
-    content: '';
-    height: 1px;
-    border-bottom: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')}
-      ${p => p.theme.border};
-
-    width: 100%;
-    position: absolute;
-    bottom: ${p => (p.isLast ? '0' : '50%')};
-  }
-
-  &:after {
-    content: '';
-    background-color: ${p => p.theme.border};
-    border-radius: 4px;
-    height: 3px;
-    width: 3px;
-    position: absolute;
-    right: 0;
-    top: ${SPAN_ROW_HEIGHT / 2 - 2}px;
-  }
-`;
-
-export const ConnectorBar = styled('div')<{orphanBranch: boolean}>`
-  height: 250%;
-
-  border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
-  top: -5px;
-  position: absolute;
-`;
-
-const getTogglerTheme = ({
-  isExpanded,
-  theme,
-  disabled,
-}: {
-  isExpanded: boolean;
-  theme: any;
-  disabled: boolean;
-}) => {
-  const buttonTheme = isExpanded ? theme.button.default : theme.button.primary;
-
-  if (disabled) {
-    return `
-    background: ${buttonTheme.background};
-    border: 1px solid ${theme.border};
-    color: ${buttonTheme.color};
-    cursor: default;
-  `;
-  }
-
-  return `
-    background: ${buttonTheme.background};
-    border: 1px solid ${theme.border};
-    color: ${buttonTheme.color};
-  `;
-};
-
-type SpanTreeTogglerAndDivProps = OmitHtmlDivProps<{
-  isExpanded: boolean;
-  disabled: boolean;
-}>;
-
-export const SpanTreeToggler = styled('div')<SpanTreeTogglerAndDivProps>`
-  height: 16px;
-  white-space: nowrap;
-  min-width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 99px;
-  padding: 0px ${space(0.5)};
-  transition: all 0.15s ease-in-out;
-  font-size: 10px;
-  line-height: 0;
-  z-index: 1;
-
-  ${p => getTogglerTheme(p)}
-`;
-
 const getDurationPillAlignment = ({
   durationDisplay,
   theme,
@@ -1175,8 +1073,8 @@ export const DurationPill = styled('div')<{
 
 export const SpanBarRectangle = styled('div')<{spanBarHatch: boolean}>`
   position: absolute;
-  height: ${SPAN_ROW_HEIGHT - 2 * SPAN_ROW_PADDING}px;
-  top: ${SPAN_ROW_PADDING}px;
+  height: ${ROW_HEIGHT - 2 * ROW_PADDING}px;
+  top: ${ROW_PADDING}px;
   left: 0;
   min-width: 1px;
   user-select: none;
@@ -1187,7 +1085,7 @@ export const SpanBarRectangle = styled('div')<{spanBarHatch: boolean}>`
 const MeasurementMarker = styled('div')<{failedThreshold: boolean}>`
   position: absolute;
   top: 0;
-  height: ${SPAN_ROW_HEIGHT}px;
+  height: ${ROW_HEIGHT}px;
   user-select: none;
   width: 1px;
   background: repeating-linear-gradient(
@@ -1205,11 +1103,6 @@ const StyledIconWarning = styled(IconWarning)`
   margin-bottom: ${space(0.25)};
 `;
 
-export const StyledIconChevron = styled(IconChevron)`
-  width: 7px;
-  margin-left: ${space(0.25)};
-`;
-
 export const OperationName = styled('span')<{spanErrors: any[]}>`
   color: ${p => (p.spanErrors.length ? p.theme.error : 'inherit')};
 `;

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {ROW_HEIGHT} from 'app/components/waterfallTree/constants';
 import space from 'app/styles/space';
 import theme from 'app/utils/theme';
 
@@ -10,9 +11,6 @@ export const zIndex = {
   spanTreeToggler: theme.zIndex.traceView.spanTreeToggler,
 };
 
-export const SPAN_ROW_HEIGHT = 24;
-export const SPAN_ROW_PADDING = 4;
-
 type SpanRowProps = {
   visible?: boolean;
   showBorder?: boolean;
@@ -27,7 +25,7 @@ export const SpanRow = styled('div')<SpanRowAndDivProps>`
   margin-top: ${p => (p.showBorder ? '-1px' : null)}; /* to prevent offset on toggle */
   position: relative;
   overflow: hidden;
-  min-height: ${SPAN_ROW_HEIGHT}px;
+  min-height: ${ROW_HEIGHT}px;
   cursor: pointer;
   transition: background-color 0.15s ease-in-out;
 
@@ -41,7 +39,7 @@ export const SpanRow = styled('div')<SpanRowAndDivProps>`
 export const SpanRowMessage = styled(SpanRow)`
   display: block;
   cursor: auto;
-  line-height: ${SPAN_ROW_HEIGHT}px;
+  line-height: ${ROW_HEIGHT}px;
   padding-left: ${space(1)};
   padding-right: ${space(1)};
   color: ${p => p.theme.gray300};

static/app/components/waterfallTree/constants.tsx

@@ -0,0 +1,2 @@
+export const ROW_HEIGHT = 24;
+export const ROW_PADDING = 4;

static/app/components/waterfallTree/treeConnector.tsx

@@ -0,0 +1,93 @@
+import styled from '@emotion/styled';
+
+import {ROW_HEIGHT} from 'app/components/waterfallTree/constants';
+import {getToggleTheme} from 'app/components/waterfallTree/utils';
+import {IconChevron} from 'app/icons';
+import space from 'app/styles/space';
+import {OmitHtmlDivProps} from 'app/utils';
+
+const TOGGLE_BUTTON_MARGIN_RIGHT = 16;
+const TOGGLE_BUTTON_MAX_WIDTH = 30;
+export const TOGGLE_BORDER_BOX = TOGGLE_BUTTON_MAX_WIDTH + TOGGLE_BUTTON_MARGIN_RIGHT;
+
+export const ConnectorBar = styled('div')<{orphanBranch: boolean}>`
+  height: 250%;
+
+  border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
+  top: -5px;
+  position: absolute;
+`;
+
+type TogglerTypes = OmitHtmlDivProps<{
+  hasToggler?: boolean;
+  isLast?: boolean;
+}>;
+
+export const TreeConnector = styled('div')<TogglerTypes & {orphanBranch: boolean}>`
+  height: ${p => (p.isLast ? ROW_HEIGHT / 2 : ROW_HEIGHT)}px;
+  width: 100%;
+  border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
+  position: absolute;
+  top: 0;
+
+  &:before {
+    content: '';
+    height: 1px;
+    border-bottom: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')}
+      ${p => p.theme.border};
+
+    width: 100%;
+    position: absolute;
+    bottom: ${p => (p.isLast ? '0' : '50%')};
+  }
+
+  &:after {
+    content: '';
+    background-color: ${p => p.theme.border};
+    border-radius: 4px;
+    height: 3px;
+    width: 3px;
+    position: absolute;
+    right: 0;
+    top: ${ROW_HEIGHT / 2 - 2}px;
+  }
+`;
+
+type SpanTreeTogglerAndDivProps = OmitHtmlDivProps<{
+  isExpanded: boolean;
+  disabled: boolean;
+}>;
+
+export const TreeToggle = styled('div')<SpanTreeTogglerAndDivProps>`
+  height: 16px;
+  white-space: nowrap;
+  min-width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 99px;
+  padding: 0px ${space(0.5)};
+  transition: all 0.15s ease-in-out;
+  font-size: 10px;
+  line-height: 0;
+  z-index: 1;
+
+  ${p => getToggleTheme(p)}
+`;
+
+export const TreeToggleContainer = styled('div')<TogglerTypes>`
+  position: relative;
+  height: ${ROW_HEIGHT}px;
+  width: 40px;
+  min-width: 40px;
+  margin-right: ${space(1)};
+  z-index: ${p => p.theme.zIndex.traceView.spanTreeToggler};
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export const StyledIconChevron = styled(IconChevron)`
+  width: 7px;
+  margin-left: ${space(0.25)};
+`;

static/app/components/waterfallTree/utils.tsx

@@ -0,0 +1,26 @@
+export const getToggleTheme = ({
+  isExpanded,
+  theme,
+  disabled,
+}: {
+  isExpanded: boolean;
+  theme: any;
+  disabled: boolean;
+}) => {
+  const buttonTheme = isExpanded ? theme.button.default : theme.button.primary;
+
+  if (disabled) {
+    return `
+    background: ${buttonTheme.background};
+    border: 1px solid ${theme.border};
+    color: ${buttonTheme.color};
+    cursor: default;
+  `;
+  }
+
+  return `
+    background: ${buttonTheme.background};
+    border: 1px solid ${theme.border};
+    color: ${buttonTheme.color};
+  `;
+};

static/app/views/performance/compare/spanBar.tsx

@@ -5,7 +5,6 @@ import {withTheme} from 'emotion-theming';
 import Count from 'app/components/count';
 import * as DividerHandlerManager from 'app/components/events/interfaces/spans/dividerHandlerManager';
 import {
-  ConnectorBar,
   DividerLine,
   DividerLineGhostContainer,
   getBackgroundColor,
@@ -14,18 +13,9 @@ import {
   SpanBarTitleContainer,
   SpanRowCell,
   SpanRowCellContainer,
-  SpanTreeConnector,
-  SpanTreeToggler,
-  SpanTreeTogglerContainer,
-  StyledIconChevron,
   TOGGLE_BORDER_BOX,
 } from 'app/components/events/interfaces/spans/spanBar';
-import {
-  getHatchPattern,
-  SPAN_ROW_HEIGHT,
-  SPAN_ROW_PADDING,
-  SpanRow,
-} from 'app/components/events/interfaces/spans/styles';
+import {getHatchPattern, SpanRow} from 'app/components/events/interfaces/spans/styles';
 import {TreeDepthType} from 'app/components/events/interfaces/spans/types';
 import {
   getHumanDuration,
@@ -33,6 +23,14 @@ import {
   toPercent,
   unwrapTreeDepth,
 } from 'app/components/events/interfaces/spans/utils';
+import {ROW_HEIGHT, ROW_PADDING} from 'app/components/waterfallTree/constants';
+import {
+  ConnectorBar,
+  StyledIconChevron,
+  TreeConnector,
+  TreeToggle,
+  TreeToggleContainer,
+} from 'app/components/waterfallTree/treeConnector';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Theme} from 'app/utils/theme';
@@ -127,7 +125,7 @@ class SpanBar extends React.Component<Props, State> {
           style={{
             right: '16px',
             height: '10px',
-            bottom: isLast ? `-${SPAN_ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
             top: 'auto',
           }}
           key={`${spanID}-last`}
@@ -137,13 +135,13 @@ class SpanBar extends React.Component<Props, State> {
     }
 
     return (
-      <SpanTreeConnector
+      <TreeConnector
         isLast={isLast}
         hasToggler={hasToggler}
         orphanBranch={isOrphanDiffSpan(span)}
       >
         {connectorBars}
-      </SpanTreeConnector>
+      </TreeConnector>
     );
   }
 
@@ -154,18 +152,18 @@ class SpanBar extends React.Component<Props, State> {
 
     if (numOfSpanChildren <= 0) {
       return (
-        <SpanTreeTogglerContainer style={{left: `${left}px`}}>
+        <TreeToggleContainer style={{left: `${left}px`}}>
           {this.renderSpanTreeConnector({hasToggler: false})}
-        </SpanTreeTogglerContainer>
+        </TreeToggleContainer>
       );
     }
 
     const chevronElement = !isRoot ? <div>{chevron}</div> : null;
 
     return (
-      <SpanTreeTogglerContainer style={{left: `${left}px`}} hasToggler>
+      <TreeToggleContainer style={{left: `${left}px`}} hasToggler>
         {this.renderSpanTreeConnector({hasToggler: true})}
-        <SpanTreeToggler
+        <TreeToggle
           disabled={!!isRoot}
           isExpanded={this.props.showSpanTree}
           onClick={event => {
@@ -180,8 +178,8 @@ class SpanBar extends React.Component<Props, State> {
         >
           <Count value={numOfSpanChildren} />
           {chevronElement}
-        </SpanTreeToggler>
-      </SpanTreeTogglerContainer>
+        </TreeToggle>
+      </TreeToggleContainer>
     );
   }
 
@@ -528,8 +526,8 @@ const ComparisonLabel = styled('div')`
   position: absolute;
   user-select: none;
   right: ${space(1)};
-  line-height: ${SPAN_ROW_HEIGHT - 2 * SPAN_ROW_PADDING}px;
-  top: ${SPAN_ROW_PADDING}px;
+  line-height: ${ROW_HEIGHT - 2 * ROW_PADDING}px;
+  top: ${ROW_PADDING}px;
   font-size: ${p => p.theme.fontSizeExtraSmall};
 `;
 

static/app/views/performance/compare/styles.tsx

@@ -1,14 +1,11 @@
 import styled from '@emotion/styled';
 
-import {
-  SPAN_ROW_HEIGHT,
-  SPAN_ROW_PADDING,
-} from 'app/components/events/interfaces/spans/styles';
+import {ROW_HEIGHT, ROW_PADDING} from 'app/components/waterfallTree/constants';
 
 export const SpanBarRectangle = styled('div')`
   position: relative;
-  height: ${SPAN_ROW_HEIGHT - 2 * SPAN_ROW_PADDING}px;
-  top: ${SPAN_ROW_PADDING}px;
+  height: ${ROW_HEIGHT - 2 * ROW_PADDING}px;
+  top: ${ROW_PADDING}px;
   min-width: 1px;
   user-select: none;
   transition: border-color 0.15s ease-in-out;

static/app/views/performance/traceDetails/styles.tsx

@@ -9,7 +9,7 @@ import {SpanRow} from 'app/components/events/interfaces/spans/styles';
 import {Panel} from 'app/components/panels';
 import Pills from 'app/components/pills';
 import SearchBar from 'app/components/searchBar';
-import {IconChevron, IconFire} from 'app/icons';
+import {IconFire} from 'app/icons';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
@@ -20,7 +20,6 @@ import {Theme} from 'app/utils/theme';
 import {transactionSummaryRouteWithQuery} from 'app/views/performance/transactionSummary/utils';
 
 export {
-  ConnectorBar,
   DividerLine,
   DividerLineGhostContainer,
   DurationPill,
@@ -29,9 +28,6 @@ export {
   SpanBarTitleContainer as TransactionBarTitleContainer,
   SpanRowCell as TransactionRowCell,
   SpanRowCellContainer as TransactionRowCellContainer,
-  SpanTreeConnector as TransactionTreeConnector,
-  SpanTreeToggler as TransactionTreeToggle,
-  SpanTreeTogglerContainer as TransactionTreeToggleContainer,
 } from 'app/components/events/interfaces/spans/spanBar';
 
 export {
@@ -40,11 +36,7 @@ export {
   SpanDetailContainer as TransactionDetailsContainer,
 } from 'app/components/events/interfaces/spans/spanDetail';
 
-export {
-  SPAN_ROW_HEIGHT as TRANSACTION_ROW_HEIGHT,
-  SPAN_ROW_PADDING as TRANSACTION_ROW_PADDING,
-  SpanRowMessage as TransactionRowMessage,
-} from 'app/components/events/interfaces/spans/styles';
+export {SpanRowMessage as TransactionRowMessage} from 'app/components/events/interfaces/spans/styles';
 
 export const SearchContainer = styled('div')`
   display: flex;
@@ -88,11 +80,6 @@ export const StyledPanel = styled(Panel)`
   overflow: hidden;
 `;
 
-export const StyledIconChevron = styled(IconChevron)`
-  width: 7px;
-  margin-left: ${space(0.25)};
-`;
-
 export const TransactionRow = styled(SpanRow)<{cursor: 'pointer' | 'default'}>`
   cursor: ${p => p.cursor};
 `;

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -7,21 +7,26 @@ import * as DividerHandlerManager from 'app/components/events/interfaces/spans/d
 import * as ScrollbarManager from 'app/components/events/interfaces/spans/scrollbarManager';
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import Tooltip from 'app/components/tooltip';
+import {ROW_HEIGHT} from 'app/components/waterfallTree/constants';
+import {
+  ConnectorBar,
+  StyledIconChevron,
+  TreeConnector,
+  TreeToggle,
+  TreeToggleContainer,
+} from 'app/components/waterfallTree/treeConnector';
 import {Organization} from 'app/types';
 import {TraceFullDetailed} from 'app/utils/performance/quickTrace/types';
 import Projects from 'app/utils/projects';
 import {Theme} from 'app/utils/theme';
 
 import {
-  ConnectorBar,
   DividerContainer,
   DividerLine,
   DividerLineGhostContainer,
   DurationPill,
   ErrorBadge,
   OperationName,
-  StyledIconChevron,
-  TRANSACTION_ROW_HEIGHT,
   TransactionBarRectangle,
   TransactionBarTitle,
   TransactionBarTitleContainer,
@@ -29,9 +34,6 @@ import {
   TransactionRow,
   TransactionRowCell,
   TransactionRowCellContainer,
-  TransactionTreeConnector,
-  TransactionTreeToggle,
-  TransactionTreeToggleContainer,
 } from './styles';
 import TransactionDetail from './transactionDetail';
 import {TraceInfo, TraceRoot, TreeDepth} from './types';
@@ -134,7 +136,7 @@ class TransactionBar extends React.Component<Props, State> {
           style={{
             right: '16px',
             height: '10px',
-            bottom: isLast ? `-${TRANSACTION_ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
             top: 'auto',
           }}
           key={`${eventId}-last`}
@@ -144,13 +146,9 @@ class TransactionBar extends React.Component<Props, State> {
     }
 
     return (
-      <TransactionTreeConnector
-        isLast={isLast}
-        hasToggler={hasToggle}
-        orphanBranch={isOrphan}
-      >
+      <TreeConnector isLast={isLast} hasToggler={hasToggle} orphanBranch={isOrphan}>
         {connectorBars}
-      </TransactionTreeConnector>
+      </TreeConnector>
     );
   }
 
@@ -161,18 +159,18 @@ class TransactionBar extends React.Component<Props, State> {
 
     if (children.length <= 0) {
       return (
-        <TransactionTreeToggleContainer style={{left: `${left}px`}}>
+        <TreeToggleContainer style={{left: `${left}px`}}>
           {this.renderConnector(false)}
-        </TransactionTreeToggleContainer>
+        </TreeToggleContainer>
       );
     }
 
     const isRoot = generation === 0;
 
     return (
-      <TransactionTreeToggleContainer style={{left: `${left}px`}} hasToggler>
+      <TreeToggleContainer style={{left: `${left}px`}} hasToggler>
         {this.renderConnector(true)}
-        <TransactionTreeToggle
+        <TreeToggle
           disabled={isRoot}
           isExpanded={isExpanded}
           onClick={event => {
@@ -191,8 +189,8 @@ class TransactionBar extends React.Component<Props, State> {
               <StyledIconChevron direction={isExpanded ? 'up' : 'down'} />
             </div>
           )}
-        </TransactionTreeToggle>
-      </TransactionTreeToggleContainer>
+        </TreeToggle>
+      </TreeToggleContainer>
     );
   }