From 369220d9fbd96e0acad5499f4e511633d975e8ff Mon Sep 17 00:00:00 2001 From: Ruben Vargas Date: Wed, 17 Apr 2019 13:47:29 -0500 Subject: [PATCH] Limit the thickness of spans in the minimap Signed-off-by: Ruben Vargas --- .../TracePageHeader/SpanGraph/render-into-canvas.test.js | 9 +++++++-- .../TracePageHeader/SpanGraph/render-into-canvas.tsx | 5 ++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js index 2ad060db5e..3076dfbc53 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js +++ b/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,20 @@ 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 computedHeight = cHeight / items.length; + const height = computedHeight > MAX_ITEM_HEIGHT ? MAX_ITEM_HEIGHT : computedHeight; 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 }; }), ]; diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.tsx index 60e9be79f1..3bad46b7a4 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.tsx +++ b/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,9 @@ 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 computedItemHeight = Math.max(MIN_ITEM_HEIGHT, cHeight / items.length); + const itemHeight = computedItemHeight > MAX_ITEM_HEIGHT ? MAX_ITEM_HEIGHT : computedItemHeight; + const itemYChange = cHeight / items.length; const ctx = canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;