Fix jaegertracing#76 trace mini-map blurry when < 60 spans (jaegertracing#77)

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>

Author: tiffon

src/components/TracePage/SpanGraph/render-into-canvas.js

@@ -22,17 +22,26 @@
 
 const CV_WIDTH = 4000;
 const MIN_WIDTH = 50;
+const MIN_TOTAL_HEIGHT = 60;
 
 export default function renderIntoCanvas(
   canvas: HTMLCanvasElement,
   items: { valueWidth: number, valueOffset: number, serviceName: string }[],
   totalValueWidth: number,
   getFillColor: string => string
 ) {
-  // eslint-disable-next-line  no-param-reassign
+  // eslint-disable-next-line no-param-reassign
   canvas.width = CV_WIDTH;
-  // eslint-disable-next-line  no-param-reassign
-  canvas.height = items.length;
+  let itemHeight = 1;
+  if (items.length < MIN_TOTAL_HEIGHT) {
+    // eslint-disable-next-line no-param-reassign
+    canvas.height = MIN_TOTAL_HEIGHT;
+    itemHeight = MIN_TOTAL_HEIGHT / items.length;
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    canvas.height = items.length;
+    itemHeight = 1;
+  }
   const ctx = canvas.getContext('2d');
   for (let i = 0; i < items.length; i++) {
     const { valueWidth, valueOffset, serviceName } = items[i];
@@ -44,6 +53,6 @@ export default function renderIntoCanvas(
       width = MIN_WIDTH;
     }
     ctx.fillStyle = getFillColor(serviceName);
-    ctx.fillRect(x, i, width, 1);
+    ctx.fillRect(x, i * itemHeight, width, itemHeight);
   }
 }