Limit the thickness of spans in the minimap

Signed-off-by: Ruben Vargas <[email protected]>

packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js

@@ -21,6 +21,7 @@ import renderIntoCanvas, {
   MAX_TOTAL_HEIGHT,
   MIN_ITEM_WIDTH,
   MIN_TOTAL_HEIGHT,
+  MAX_ITEM_HEIGHT,
 } from './render-into-canvas';
 
 const getCanvasWidth = () => window.innerWidth * 2;
@@ -124,16 +125,19 @@ describe('renderIntoCanvas()', () => {
         { input: items[1].serviceName, output: [1, 1, 1] },
         { input: items[2].serviceName, output: [2, 2, 2] },
       ];
+      const cHeight =
+        items.length < MIN_TOTAL_HEIGHT ? MIN_TOTAL_HEIGHT : Math.min(items.length, MAX_TOTAL_HEIGHT);
+
       const expectedDrawings = [
         getBgFillRect(),
         ...items.map((item, i) => {
           const { valueWidth, valueOffset } = item;
           const color = expectedColors[i].output;
           const fillStyle = `rgba(${color.concat(ITEM_ALPHA).join()})`;
-          const height = MIN_TOTAL_HEIGHT / items.length;
+          const height = Math.min(MAX_ITEM_HEIGHT, Math.max(MIN_ITEM_HEIGHT, cHeight / items.length));
           const width = valueWidth / totalValueWidth * getCanvasWidth();
           const x = valueOffset / totalValueWidth * getCanvasWidth();
-          const y = height * i;
+          const y = cHeight / items.length * i;
           return { fillStyle, height, width, x, y };
         }),
       ];

packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.tsx

@@ -21,6 +21,7 @@ export const MIN_ITEM_HEIGHT = 2;
 export const MAX_TOTAL_HEIGHT = 200;
 export const MIN_ITEM_WIDTH = 10;
 export const MIN_TOTAL_HEIGHT = 60;
+export const MAX_ITEM_HEIGHT = 6;
 
 export default function renderIntoCanvas(
   canvas: HTMLCanvasElement,
@@ -36,7 +37,7 @@ export default function renderIntoCanvas(
   canvas.width = cWidth;
   // eslint-disable-next-line no-param-reassign
   canvas.height = cHeight;
-  const itemHeight = Math.max(MIN_ITEM_HEIGHT, cHeight / items.length);
+  const itemHeight = Math.min(MAX_ITEM_HEIGHT, Math.max(MIN_ITEM_HEIGHT, cHeight / items.length));
   const itemYChange = cHeight / items.length;
 
   const ctx = canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;