feat(trace): Desaturate on hover, fix durations (#70661)

### Summary
This fixes trace duration and hover saturation.

Author: k-fish

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

@@ -529,17 +529,20 @@ const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName: string
   ${p =>
     p.highlightedSliceName
       ? `--highlightedSlice-${p.highlightedSliceName}-opacity: 1.0;
+         --highlightedSlice-${p.highlightedSliceName}-saturate: saturate(1.0);
          --highlightedSlice-${p.highlightedSliceName}-transform: translateY(0px);
        `
       : null}
   ${p =>
     p.highlightedSliceName
       ? `
         --defaultSlice-opacity: 1.0;
+        --defaultSlice-saturate: saturate(0.8);
         --defaultSlice-transform: translateY(0px);
         `
       : `
         --defaultSlice-opacity: 1.0;
+        --defaultSlice-saturate: saturate(1.0);
         --defaultSlice-transform: translateY(0px);
         `}
 `;

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

@@ -71,6 +71,9 @@ const RectangleTraceBreakdown = styled(RowRectangle)<{
   position: relative;
   width: 100%;
   height: 15px;
+  ${p => `
+    filter: var(--highlightedSlice-${p.sliceName}-saturate, var(--defaultSlice-saturate));
+  `}
   ${p => `
     opacity: var(--highlightedSlice-${p.sliceName ?? ''}-opacity, var(--defaultSlice-opacity, 1.0));
   `}
@@ -124,8 +127,8 @@ export function TraceBreakdownRenderer({
 }
 
 const BREAKDOWN_BAR_SIZE = 200;
-const BREAKDOWN_QUANTIZE_STEP = 5;
-const BREAKDOWN_BAR_WIDTH = BREAKDOWN_BAR_SIZE / BREAKDOWN_QUANTIZE_STEP;
+const BREAKDOWN_QUANTIZE_STEP = 1;
+const BREAKDOWN_NUM_SLICES = BREAKDOWN_BAR_SIZE / BREAKDOWN_QUANTIZE_STEP; // 200
 
 export function SpanBreakdownSliceRenderer({
   trace,
@@ -146,8 +149,8 @@ export function SpanBreakdownSliceRenderer({
   trace: TraceResult<Field>;
   offset?: number;
 }) {
-  const traceDuration =
-    Math.floor((trace.end - trace.start) / BREAKDOWN_BAR_WIDTH) * BREAKDOWN_BAR_WIDTH;
+  const traceSliceSize = (trace.end - trace.start) / BREAKDOWN_NUM_SLICES;
+  const traceDuration = BREAKDOWN_NUM_SLICES * traceSliceSize;
 
   const sliceDuration = sliceEnd - sliceStart;
 
@@ -160,11 +163,11 @@ export function SpanBreakdownSliceRenderer({
 
   const sliceWidth =
     BREAKDOWN_QUANTIZE_STEP *
-    Math.ceil(BREAKDOWN_BAR_WIDTH * (sliceDuration / traceDuration));
+    Math.ceil(BREAKDOWN_NUM_SLICES * (sliceDuration / traceDuration));
   const relativeSliceStart = sliceStart - trace.start;
   const sliceOffset =
     BREAKDOWN_QUANTIZE_STEP *
-    Math.floor((BREAKDOWN_BAR_WIDTH * relativeSliceStart) / traceDuration);
+    Math.floor((BREAKDOWN_NUM_SLICES * relativeSliceStart) / traceDuration);
   return (
     <BreakdownSlice
       sliceName={sliceName}