ref(trace-view): Move shared row bar component (#25328)

* ref(trace-view): Move shared divider line component

Ripped from #25264 part 3

* ref(trace-view): Move shared row title component

Ripped from #25264 part 4

* ref(trace-view): Move shared row bar component

Ripped from #25264 part 5

* fix bad merge

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

@@ -5,7 +5,8 @@ import styled from '@emotion/styled';
 
 import Count from 'app/components/count';
 import Tooltip from 'app/components/tooltip';
-import {ROW_HEIGHT, ROW_PADDING} from 'app/components/waterfallTree/constants';
+import {ROW_HEIGHT} from 'app/components/waterfallTree/constants';
+import {DurationPill, RowRectangle} from 'app/components/waterfallTree/rowBar';
 import {
   DividerLine,
   DividerLineGhostContainer,
@@ -22,6 +23,7 @@ import {
   TreeToggle,
   TreeToggleContainer,
 } from 'app/components/waterfallTree/treeConnector';
+import {getDurationDisplay} from 'app/components/waterfallTree/utils';
 import {IconWarning} from 'app/icons';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
@@ -41,7 +43,7 @@ import {
 } from './header';
 import * as ScrollbarManager from './scrollbarManager';
 import SpanDetail from './spanDetail';
-import {getHatchPattern, SpanRow, zIndex} from './styles';
+import {SpanRow, zIndex} from './styles';
 import {ParsedTraceType, ProcessedSpanType, TreeDepthType} from './types';
 import {
   durationlessBrowserOps,
@@ -173,29 +175,6 @@ const TOGGLE_BUTTON_MAX_WIDTH = 30;
 export const TOGGLE_BORDER_BOX = TOGGLE_BUTTON_MAX_WIDTH + TOGGLE_BUTTON_MARGIN_RIGHT;
 const MARGIN_LEFT = 0;
 
-type DurationDisplay = 'left' | 'right' | 'inset';
-
-export const getDurationDisplay = ({
-  width,
-  left,
-}: {
-  width: undefined | number;
-  left: undefined | number;
-}): DurationDisplay => {
-  const spaceNeeded = 0.3;
-
-  if (left === undefined || width === undefined) {
-    return 'inset';
-  }
-  if (left + width < 1 - spaceNeeded) {
-    return 'right';
-  }
-  if (left > spaceNeeded) {
-    return 'left';
-  }
-  return 'inset';
-};
-
 export const getBackgroundColor = ({
   showStriping,
   showDetail,
@@ -852,7 +831,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
           }}
         >
           {displaySpanBar && (
-            <SpanBarRectangle
+            <RowRectangle
               spanBarHatch={!!spanBarHatch}
               style={{
                 backgroundColor: spanBarColour,
@@ -868,7 +847,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
                 {durationString}
                 {this.renderWarningText({warningText: bounds.warning})}
               </DurationPill>
-            </SpanBarRectangle>
+            </RowRectangle>
           )}
           {this.renderMeasurements()}
           {this.renderCursorGuide()}
@@ -976,60 +955,6 @@ const CursorGuide = styled('div')`
   height: 100%;
 `;
 
-const getDurationPillAlignment = ({
-  durationDisplay,
-  theme,
-  spanBarHatch,
-}: {
-  durationDisplay: DurationDisplay;
-  theme: any;
-  spanBarHatch: boolean;
-}) => {
-  switch (durationDisplay) {
-    case 'left':
-      return `right: calc(100% + ${space(0.5)});`;
-    case 'right':
-      return `left: calc(100% + ${space(0.75)});`;
-    default:
-      return `
-        right: ${space(0.75)};
-        color: ${spanBarHatch === true ? theme.gray300 : theme.white};
-      `;
-  }
-};
-
-export const DurationPill = styled('div')<{
-  durationDisplay: DurationDisplay;
-  showDetail: boolean;
-  spanBarHatch: boolean;
-}>`
-  position: absolute;
-  top: 50%;
-  display: flex;
-  align-items: center;
-  transform: translateY(-50%);
-  white-space: nowrap;
-  font-size: ${p => p.theme.fontSizeExtraSmall};
-  color: ${p => (p.showDetail === true ? p.theme.gray200 : p.theme.gray300)};
-
-  ${getDurationPillAlignment}
-
-  @media (max-width: ${p => p.theme.breakpoints[1]}) {
-    font-size: 10px;
-  }
-`;
-
-export const SpanBarRectangle = styled('div')<{spanBarHatch: boolean}>`
-  position: absolute;
-  height: ${ROW_HEIGHT - 2 * ROW_PADDING}px;
-  top: ${ROW_PADDING}px;
-  left: 0;
-  min-width: 1px;
-  user-select: none;
-  transition: border-color 0.15s ease-in-out;
-  ${p => getHatchPattern(p, '#dedae3', '#f4f2f7')}
-`;
-
 const MeasurementMarker = styled('div')<{failedThreshold: boolean}>`
   position: absolute;
   top: 0;

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

@@ -53,38 +53,3 @@ export const SpanRowMessage = styled(SpanRow)`
     margin-left: ${space(2)};
   }
 `;
-
-type HatchProps = {
-  spanBarHatch: boolean;
-};
-
-export function getHatchPattern(
-  {spanBarHatch}: HatchProps,
-  primary: string,
-  alternate: string
-) {
-  if (spanBarHatch === true) {
-    return `
-      background-image: linear-gradient(135deg,
-        ${alternate},
-        ${alternate} 2.5px,
-        ${primary} 2.5px,
-        ${primary} 5px,
-        ${alternate} 6px,
-        ${alternate} 8px,
-        ${primary} 8px,
-        ${primary} 11px,
-        ${alternate} 11px,
-        ${alternate} 14px,
-        ${primary} 14px,
-        ${primary} 16.5px,
-        ${alternate} 16.5px,
-        ${alternate} 19px,
-        ${primary} 20px
-      );
-      background-size: 16px 16px;
-    `;
-  }
-
-  return null;
-}

static/app/components/waterfallTree/rowBar.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+import {ROW_HEIGHT, ROW_PADDING} from 'app/components/waterfallTree/constants';
+import {DurationDisplay} from 'app/components/waterfallTree/types';
+import {
+  getDurationPillAlignment,
+  getHatchPattern,
+} from 'app/components/waterfallTree/utils';
+
+export const RowRectangle = styled('div')<{spanBarHatch: boolean}>`
+  position: absolute;
+  height: ${ROW_HEIGHT - 2 * ROW_PADDING}px;
+  top: ${ROW_PADDING}px;
+  left: 0;
+  min-width: 1px;
+  user-select: none;
+  transition: border-color 0.15s ease-in-out;
+  ${p => getHatchPattern(p, '#dedae3', '#f4f2f7')}
+`;
+
+export const DurationPill = styled('div')<{
+  durationDisplay: DurationDisplay;
+  showDetail: boolean;
+  spanBarHatch: boolean;
+}>`
+  position: absolute;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+  color: ${p => (p.showDetail === true ? p.theme.gray200 : p.theme.gray300)};
+
+  ${getDurationPillAlignment}
+
+  @media (max-width: ${p => p.theme.breakpoints[1]}) {
+    font-size: 10px;
+  }
+`;

static/app/components/waterfallTree/types.tsx

@@ -0,0 +1 @@
+export type DurationDisplay = 'left' | 'right' | 'inset';

static/app/components/waterfallTree/utils.tsx

@@ -1,3 +1,63 @@
+import {DurationDisplay} from 'app/components/waterfallTree/types';
+import space from 'app/styles/space';
+
+type HatchProps = {
+  spanBarHatch: boolean;
+};
+
+export function getHatchPattern(
+  {spanBarHatch}: HatchProps,
+  primary: string,
+  alternate: string
+) {
+  if (spanBarHatch === true) {
+    return `
+      background-image: linear-gradient(135deg,
+        ${alternate},
+        ${alternate} 2.5px,
+        ${primary} 2.5px,
+        ${primary} 5px,
+        ${alternate} 6px,
+        ${alternate} 8px,
+        ${primary} 8px,
+        ${primary} 11px,
+        ${alternate} 11px,
+        ${alternate} 14px,
+        ${primary} 14px,
+        ${primary} 16.5px,
+        ${alternate} 16.5px,
+        ${alternate} 19px,
+        ${primary} 20px
+      );
+      background-size: 16px 16px;
+    `;
+  }
+
+  return null;
+}
+
+export const getDurationPillAlignment = ({
+  durationDisplay,
+  theme,
+  spanBarHatch,
+}: {
+  durationDisplay: DurationDisplay;
+  theme: any;
+  spanBarHatch: boolean;
+}) => {
+  switch (durationDisplay) {
+    case 'left':
+      return `right: calc(100% + ${space(0.5)});`;
+    case 'right':
+      return `left: calc(100% + ${space(0.75)});`;
+    default:
+      return `
+        right: ${space(0.75)};
+        color: ${spanBarHatch === true ? theme.gray300 : theme.white};
+      `;
+  }
+};
+
 export const getToggleTheme = ({
   isExpanded,
   theme,
@@ -24,3 +84,24 @@ export const getToggleTheme = ({
     color: ${buttonTheme.color};
   `;
 };
+
+export const getDurationDisplay = ({
+  width,
+  left,
+}: {
+  width: undefined | number;
+  left: undefined | number;
+}): DurationDisplay => {
+  const spaceNeeded = 0.3;
+
+  if (left === undefined || width === undefined) {
+    return 'inset';
+  }
+  if (left + width < 1 - spaceNeeded) {
+    return 'right';
+  }
+  if (left > spaceNeeded) {
+    return 'left';
+  }
+  return 'inset';
+};

static/app/utils/discover/fieldRenderers.tsx

@@ -5,11 +5,6 @@ import partial from 'lodash/partial';
 
 import Count from 'app/components/count';
 import Duration from 'app/components/duration';
-import {
-  DurationPill,
-  getDurationDisplay,
-  SpanBarRectangle,
-} from 'app/components/events/interfaces/spans/spanBar';
 import {
   getHumanDuration,
   pickSpanBarColour,
@@ -19,6 +14,8 @@ import ProjectBadge from 'app/components/idBadge/projectBadge';
 import UserBadge from 'app/components/idBadge/userBadge';
 import UserMisery from 'app/components/userMisery';
 import Version from 'app/components/version';
+import {DurationPill, RowRectangle} from 'app/components/waterfallTree/rowBar';
+import {getDurationDisplay} from 'app/components/waterfallTree/utils';
 import {t} from 'app/locale';
 import {Organization} from 'app/types';
 import {defined} from 'app/utils';
@@ -497,7 +494,7 @@ const spanOperationBreakdownRenderer = (field: string) => (
 
   return (
     <div style={{position: 'relative'}}>
-      <SpanBarRectangle
+      <RowRectangle
         spanBarHatch={false}
         style={{
           backgroundColor: pickSpanBarColour(operationName),
@@ -515,7 +512,7 @@ const spanOperationBreakdownRenderer = (field: string) => (
         >
           {getHumanDuration(spanOpDuration / 1000)}
         </DurationPill>
-      </SpanBarRectangle>
+      </RowRectangle>
     </div>
   );
 };

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

@@ -10,7 +10,7 @@ import {
   SpanRowCellContainer,
   TOGGLE_BORDER_BOX,
 } from 'app/components/events/interfaces/spans/spanBar';
-import {getHatchPattern, SpanRow} from 'app/components/events/interfaces/spans/styles';
+import {SpanRow} from 'app/components/events/interfaces/spans/styles';
 import {TreeDepthType} from 'app/components/events/interfaces/spans/types';
 import {
   getHumanDuration,
@@ -35,6 +35,7 @@ import {
   TreeToggle,
   TreeToggleContainer,
 } from 'app/components/waterfallTree/treeConnector';
+import {getHatchPattern} from 'app/components/waterfallTree/utils';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Theme} from 'app/utils/theme';

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

@@ -19,8 +19,6 @@ import {Theme} from 'app/utils/theme';
 import {transactionSummaryRouteWithQuery} from 'app/views/performance/transactionSummary/utils';
 
 export {
-  DurationPill,
-  SpanBarRectangle as TransactionBarRectangle,
   SpanRowCell as TransactionRowCell,
   SpanRowCellContainer as TransactionRowCellContainer,
 } from 'app/components/events/interfaces/spans/spanBar';

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

@@ -8,6 +8,7 @@ import * as ScrollbarManager from 'app/components/events/interfaces/spans/scroll
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import Tooltip from 'app/components/tooltip';
 import {ROW_HEIGHT} from 'app/components/waterfallTree/constants';
+import {DurationPill, RowRectangle} from 'app/components/waterfallTree/rowBar';
 import {
   DividerLine,
   DividerLineGhostContainer,
@@ -24,6 +25,7 @@ import {
   TreeToggle,
   TreeToggleContainer,
 } from 'app/components/waterfallTree/treeConnector';
+import {getDurationDisplay} from 'app/components/waterfallTree/utils';
 import {Organization} from 'app/types';
 import {TraceFullDetailed} from 'app/utils/performance/quickTrace/types';
 import Projects from 'app/utils/projects';
@@ -31,9 +33,7 @@ import {Theme} from 'app/utils/theme';
 
 import {
   DividerContainer,
-  DurationPill,
   ErrorBadge,
-  TransactionBarRectangle,
   TransactionBarTitleContent,
   TransactionRow,
   TransactionRowCell,
@@ -41,12 +41,7 @@ import {
 } from './styles';
 import TransactionDetail from './transactionDetail';
 import {TraceInfo, TraceRoot, TreeDepth} from './types';
-import {
-  getDurationDisplay,
-  getHumanDuration,
-  isTraceFullDetailed,
-  toPercent,
-} from './utils';
+import {getHumanDuration, isTraceFullDetailed, toPercent} from './utils';
 
 const TOGGLE_BUTTON_MARGIN_RIGHT = 16;
 const TOGGLE_BUTTON_MAX_WIDTH = 30;
@@ -354,7 +349,7 @@ class TransactionBar extends React.Component<Props, State> {
     const widthPercentage = duration / delta;
 
     return (
-      <TransactionBarRectangle
+      <RowRectangle
         spanBarHatch={false}
         style={{
           backgroundColor: palette[transaction.generation % palette.length],
@@ -372,7 +367,7 @@ class TransactionBar extends React.Component<Props, State> {
         >
           {getHumanDuration(duration)}
         </DurationPill>
-      </TransactionBarRectangle>
+      </RowRectangle>
     );
   }
 

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

@@ -67,8 +67,6 @@ export function isTraceFullDetailed(transaction): transaction is TraceFullDetail
   return Boolean((transaction as TraceFullDetailed).event_id);
 }
 
-export {getDurationDisplay} from 'app/components/events/interfaces/spans/spanBar';
-
 export {getHumanDuration, toPercent} from 'app/components/events/interfaces/spans/utils';
 
 export function isRootTransaction(trace: TraceFullDetailed): boolean {