feat(traces): Use new slice quantization from backend (#72034)

### Summary
This uses the quantization from the backend when provided (trace
breakdowns), but still uses time for the spans since they don't have
quantization.


|![Screenshot 2024-06-04 at 2 47
54 PM](https://github.com/getsentry/sentry/assets/6111995/90359c0d-7020-4f7a-91f5-50ef582f8f3a)|
|
|--|--|

Author: k-fish

static/app/views/performance/traces/content.tsx

@@ -34,6 +34,7 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 
 import {type Field, FIELDS, SORTS} from './data';
 import {
+  BREAKDOWN_SLICES,
   ProjectRenderer,
   SpanBreakdownSliceRenderer,
   SpanDescriptionRenderer,
@@ -420,6 +421,7 @@ export interface TraceResult<F extends string> {
   numOccurrences: number;
   numSpans: number;
   project: string | null;
+  slices: number;
   spans: SpanResult<F>[];
   start: number;
   trace: string;
@@ -430,6 +432,9 @@ interface TraceBreakdownBase {
   end: number;
   opCategory: string | null;
   sdkName: string | null;
+  sliceEnd: number;
+  sliceStart: number;
+  sliceWidth: number;
   start: number;
 }
 
@@ -494,8 +499,7 @@ function useTraces<F extends string>({
       suggestedQuery,
       sort,
       per_page: limit,
-      breakdownSlices: 40,
-      minBreakdownPercentage: 1 / 40,
+      breakdownSlices: BREAKDOWN_SLICES,
       maxSpansPerTrace: 10,
       mri,
       metricsMax,

static/app/views/performance/traces/fieldRenderers.tsx

@@ -128,6 +128,8 @@ export function TraceBreakdownRenderer({
             sliceEnd={breakdown.end}
             sliceDurationReal={breakdown.duration}
             sliceSecondaryName={breakdown.sdkName}
+            sliceNumberStart={breakdown.sliceStart}
+            sliceNumberWidth={breakdown.sliceWidth}
             trace={trace}
             theme={theme}
             offset={index}
@@ -146,16 +148,22 @@ export function TraceBreakdownRenderer({
   );
 }
 
-const BREAKDOWN_BAR_SIZE = 200;
-const BREAKDOWN_QUANTIZE_STEP = 1;
-const BREAKDOWN_NUM_SLICES = BREAKDOWN_BAR_SIZE / BREAKDOWN_QUANTIZE_STEP; // 200
+const BREAKDOWN_SIZE_PX = 200;
+export const BREAKDOWN_SLICES = 40;
 
+/**
+ * This renders slices in two different ways;
+ * - Slices in the breakdown for the trace. These have slice numbers returned for quantization from the backend.
+ * - Slices derived from span timings. Spans aren't quantized into slices.
+ */
 export function SpanBreakdownSliceRenderer({
   trace,
   theme,
   sliceName,
   sliceStart,
   sliceEnd,
+  sliceNumberStart,
+  sliceNumberWidth,
   sliceDurationReal,
   sliceSecondaryName,
   onMouseEnter,
@@ -170,26 +178,34 @@ export function SpanBreakdownSliceRenderer({
   trace: TraceResult<Field>;
   offset?: number;
   sliceDurationReal?: number;
+  sliceNumberStart?: number;
+  sliceNumberWidth?: number;
 }) {
-  const traceSliceSize = (trace.end - trace.start) / BREAKDOWN_NUM_SLICES;
-  const traceDuration = BREAKDOWN_NUM_SLICES * traceSliceSize;
+  const traceDuration = trace.end - trace.start;
 
   const sliceDuration = sliceEnd - sliceStart;
 
-  if (sliceDuration <= 0) {
+  if (sliceNumberWidth === 0 && sliceNumberWidth === undefined && sliceDuration <= 0) {
+    // No slice width or no duration width if it's a regular span.
     return null;
   }
 
+  const pixelsPerSlice = BREAKDOWN_SIZE_PX / BREAKDOWN_SLICES;
+  const relativeSliceStart = sliceStart - trace.start;
+
   const stylingSliceName = getStylingSliceName(sliceName, sliceSecondaryName);
   const sliceColor = stylingSliceName ? pickBarColor(stylingSliceName) : theme.gray100;
 
   const sliceWidth =
-    BREAKDOWN_QUANTIZE_STEP *
-    Math.ceil(BREAKDOWN_NUM_SLICES * (sliceDuration / traceDuration));
-  const relativeSliceStart = sliceStart - trace.start;
+    sliceNumberWidth !== undefined
+      ? pixelsPerSlice * sliceNumberWidth
+      : pixelsPerSlice * Math.ceil(BREAKDOWN_SLICES * (sliceDuration / traceDuration));
   const sliceOffset =
-    BREAKDOWN_QUANTIZE_STEP *
-    Math.floor((BREAKDOWN_NUM_SLICES * relativeSliceStart) / traceDuration);
+    sliceNumberStart !== undefined
+      ? pixelsPerSlice * sliceNumberStart
+      : pixelsPerSlice *
+        Math.floor((BREAKDOWN_SLICES * relativeSliceStart) / traceDuration);
+
   return (
     <BreakdownSlice
       sliceName={sliceName}