feat(trace-tabs-ui): Adding ops to search on click and hiding trace level ops breakdown

static/app/views/performance/newTraceDetails/trace.tsx

@@ -33,6 +33,7 @@ import {
   scoreToStatus,
   STATUS_TEXT,
 } from 'sentry/views/insights/browser/webVitals/utils/scoreToStatus';
+import {useHasTraceTabsUI} from 'sentry/views/performance/newTraceDetails/useHasTraceTabsUI';
 
 import type {TraceMetaQueryResults} from './traceApi/useTraceMeta';
 import {TraceTree} from './traceModels/traceTree';
@@ -145,6 +146,7 @@ export function Trace({
   const traceState = useTraceState();
   const traceDispatch = useTraceStateDispatch();
   const {theme: colorMode} = useLegacyStore(ConfigStore);
+  const hasTraceTabsUi = useHasTraceTabsUI();
 
   const rerenderRef = useRef<TraceProps['rerender']>(rerender);
   rerenderRef.current = rerender;
@@ -410,10 +412,12 @@ export function Trace({
         className="TraceScrollbarContainer"
         ref={manager.registerHorizontalScrollBarContainerRef}
       >
-        <TraceLevelOpsBreakdown
-          isTraceLoading={isLoading}
-          metaQueryResults={metaQueryResults}
-        />
+        {hasTraceTabsUi ? null : (
+          <TraceLevelOpsBreakdown
+            isTraceLoading={isLoading}
+            metaQueryResults={metaQueryResults}
+          />
+        )}
         <div className="TraceScrollbarScroller" />
       </div>
       <div className="TraceDivider" ref={manager.registerDividerRef} />

static/app/views/performance/newTraceDetails/traceContextVitals.tsx

@@ -188,7 +188,11 @@ const VitalPillName = styled('div')<{status: PerformanceScore}>`
 
   height: 100%;
   padding: 0 ${space(1)};
-  border: solid 1px ${p => makePerformanceScoreColors(p.theme)[p.status].border};
+  border: solid 1px
+    ${p =>
+      p.status === 'none'
+        ? p.theme.border
+        : makePerformanceScoreColors(p.theme)[p.status].border};
   border-radius: ${p => p.theme.borderRadius} 0 0 ${p => p.theme.borderRadius};
 
   background-color: ${p => makePerformanceScoreColors(p.theme)[p.status].light};

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -1,4 +1,4 @@
-import {Fragment, type PropsWithChildren, useMemo, useState} from 'react';
+import {Fragment, type PropsWithChildren, useCallback, useMemo, useState} from 'react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
@@ -426,6 +426,15 @@ function Highlights({
   headerContent,
   bodyContent,
 }: HighlightProps) {
+  const dispatch = useTraceStateDispatch();
+
+  const onOpsBreakdownRowClick = useCallback(
+    (op: string) => {
+      dispatch({type: 'set query', query: `op:${op}`, source: 'external'});
+    },
+    [dispatch]
+  );
+
   if (!isTransactionNode(node) && !isSpanNode(node) && !isEAPSpanNode(node)) {
     return null;
   }
@@ -475,9 +484,9 @@ function Highlights({
             <PanelBody>{bodyContent}</PanelBody>
           </StyledPanel>
           {isEAPSpanNode(node) ? (
-            <HighLightEAPOpsBreakdown node={node} />
+            <HighLightEAPOpsBreakdown onRowClick={onOpsBreakdownRowClick} node={node} />
           ) : event ? (
-            <HighLightsOpsBreakdown event={event} />
+            <HighLightsOpsBreakdown onRowClick={onOpsBreakdownRowClick} event={event} />
           ) : null}
         </HighlightsRightColumn>
       </HighlightsWrapper>
@@ -490,7 +499,13 @@ const StyledPanel = styled(Panel)`
   margin-bottom: 0;
 `;
 
-function HighLightsOpsBreakdown({event}: {event: EventTransaction}) {
+function HighLightsOpsBreakdown({
+  event,
+  onRowClick,
+}: {
+  event: EventTransaction;
+  onRowClick: (op: string) => void;
+}) {
   const theme = useTheme();
   const breakdown = generateStats(event, {type: 'no_filter'});
 
@@ -508,7 +523,10 @@ function HighLightsOpsBreakdown({event}: {event: EventTransaction}) {
           const pctLabel = isFinite(percentage) ? Math.round(percentage * 100) : '∞';
 
           return (
-            <HighlightsOpRow key={operationName}>
+            <HighlightsOpRow
+              key={operationName}
+              onClick={() => onRowClick(operationName)}
+            >
               <IconCircleFill size="xs" color={color as Color} />
               {operationName}
               <HighlightsOpPct>{pctLabel}%</HighlightsOpPct>
@@ -520,7 +538,13 @@ function HighLightsOpsBreakdown({event}: {event: EventTransaction}) {
   );
 }
 
-function HighLightEAPOpsBreakdown({node}: {node: TraceTreeNode<TraceTree.EAPSpan>}) {
+function HighLightEAPOpsBreakdown({
+  node,
+  onRowClick,
+}: {
+  node: TraceTreeNode<TraceTree.EAPSpan>;
+  onRowClick: (op: string) => void;
+}) {
   const theme = useTheme();
   const breakdown = node.eapSpanOpsBreakdown;
 
@@ -555,7 +579,10 @@ function HighLightEAPOpsBreakdown({node}: {node: TraceTreeNode<TraceTree.EAPSpan
           const pctLabel = Math.round(currOp.percentage);
 
           return (
-            <HighlightsOpRow key={operationName}>
+            <HighlightsOpRow
+              key={operationName}
+              onClick={() => onRowClick(operationName)}
+            >
               <IconCircleFill size="xs" color={color as Color} />
               {operationName}
               <HighlightsOpPct>{pctLabel}%</HighlightsOpPct>
@@ -586,6 +613,7 @@ const HighlightsSpanCount = styled('div')`
 const HighlightsOpRow = styled(FlexBox)`
   font-size: 13px;
   gap: ${space(0.5)};
+  cursor: pointer;
 `;
 
 const HighlightsOpsBreakdownWrapper = styled(FlexBox)`