From 5162309dea08582ce80601c36f2c9cb8aea447bd Mon Sep 17 00:00:00 2001 From: Joe Farro Date: Thu, 21 Sep 2017 11:58:51 -0700 Subject: [PATCH] Fix #76 trace mini-map blurry when < 60 spans (#77) --- .../TracePage/SpanGraph/render-into-canvas.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/TracePage/SpanGraph/render-into-canvas.js b/src/components/TracePage/SpanGraph/render-into-canvas.js index 3f09c3de19..eb53e9c998 100644 --- a/src/components/TracePage/SpanGraph/render-into-canvas.js +++ b/src/components/TracePage/SpanGraph/render-into-canvas.js @@ -22,6 +22,7 @@ const CV_WIDTH = 4000; const MIN_WIDTH = 50; +const MIN_TOTAL_HEIGHT = 60; export default function renderIntoCanvas( canvas: HTMLCanvasElement, @@ -29,10 +30,18 @@ export default function renderIntoCanvas( 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); } }