diff --git a/packages/ui-patterns/src/Trace/Minimap.tsx b/packages/ui-patterns/src/Trace/Minimap.tsx index 035362921f2..73644f07995 100644 --- a/packages/ui-patterns/src/Trace/Minimap.tsx +++ b/packages/ui-patterns/src/Trace/Minimap.tsx @@ -17,6 +17,8 @@ export interface MinimapProps extends ComponentProps<'div'> { } const VIEWBOX_WIDTH = 1000 +const MIN_LANE_HEIGHT = 2 +const MAX_LANE_HEIGHT = 10 interface DensityBucket { x: number @@ -74,7 +76,7 @@ const STATUS_FILL: Record = { export function Minimap({ height = 48, maxDetailSpans = 2000, - laneHeight = 3, + laneHeight: laneHeightProp, className, ...props }: MinimapProps) { @@ -90,6 +92,9 @@ export function Minimap({ }) const isDetail = index.byId.size <= maxDetailSpans + const depthCount = Math.max(1, ...Array.from(index.depthOf.values())) + 1 + const laneHeight = + laneHeightProp ?? Math.min(MAX_LANE_HEIGHT, Math.max(MIN_LANE_HEIGHT, height / depthCount)) const maxLanes = Math.max(1, Math.floor(height / laneHeight)) const shapes = useMemo(() => { @@ -139,7 +144,7 @@ export function Minimap({ x={x} y={lane * laneHeight} width={w} - height={Math.max(1, laneHeight - 1)} + height={Math.max(1, laneHeight - Math.min(2, laneHeight * 0.25))} className={cn('opacity-70', STATUS_FILL[item.status])} /> ) @@ -195,8 +200,8 @@ export function Minimap({ data-dragging={brush.isDragging ? '' : undefined} data-full={brush.isFull ? '' : undefined} className={cn( - 'absolute inset-y-0 cursor-grab border-x border-foreground-muted bg-foreground/5 focus-inset', - 'data-[dragging]:cursor-grabbing data-[dragging]:bg-foreground/10' + 'absolute inset-y-0 cursor-grab rounded-sm bg-brand/5 ring-2 ring-inset ring-brand focus-inset', + 'data-[dragging]:cursor-grabbing data-[dragging]:bg-brand/10' )} style={{ left: brush.rect.left, width: brush.rect.width }} {...brush.getBrushProps()} @@ -208,7 +213,7 @@ export function Minimap({ className="absolute inset-y-0 -left-1 w-2 cursor-ew-resize focus-ring" {...brush.getHandleProps('start')} > - +
- +