Fix trace minimap and timeline colors differ

- Make trace minimap colors more prounounced
jaegertracing · Oct 17, 2017 · 3cc5817 · 3cc5817
1 parent 272cd64
commit 3cc5817
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/src/components/TracePage/SpanGraph/render-into-canvas.js b/src/components/TracePage/SpanGraph/render-into-canvas.js
@@ -24,6 +24,7 @@
 export const CV_WIDTH = 4000;
 export const MIN_WIDTH = 16;
 export const MIN_TOTAL_HEIGHT = 60;
+export const ALPHA = 0.8;
 
 export default function renderIntoCanvas(
   canvas: HTMLCanvasElement,
@@ -56,7 +57,7 @@ export default function renderIntoCanvas(
     if (width < MIN_WIDTH) {
       width = MIN_WIDTH;
     }
-    ctx.fillStyle = `rgba(${getFillColor(serviceName).concat(0.3).join()})`;
+    ctx.fillStyle = `rgba(${getFillColor(serviceName).concat(ALPHA).join()})`;
     ctx.fillRect(x, i * itemYChange, width, itemHeight);
   }
 }
diff --git a/src/components/TracePage/SpanGraph/render-into-canvas.test.js b/src/components/TracePage/SpanGraph/render-into-canvas.test.js
@@ -20,7 +20,7 @@
 
 import _range from 'lodash/range';
 
-import renderIntoCanvas, { CV_WIDTH, MIN_TOTAL_HEIGHT, MIN_WIDTH } from './render-into-canvas';
+import renderIntoCanvas, { ALPHA, CV_WIDTH, MIN_TOTAL_HEIGHT, MIN_WIDTH } from './render-into-canvas';
 
 describe('renderIntoCanvas()', () => {
   const basicItem = { valueWidth: 100, valueOffset: 50, serviceName: 'some-name' };
@@ -104,7 +104,7 @@ describe('renderIntoCanvas()', () => {
       const expectedDrawings = items.map((item, i) => {
         const { valueWidth: width, valueOffset: x } = item;
         const color = expectedColors[i].output;
-        const fillStyle = `rgba(${color.concat(0.3).join()})`;
+        const fillStyle = `rgba(${color.concat(ALPHA).join()})`;
         const height = MIN_TOTAL_HEIGHT / items.length;
         const y = height * i;
         return { fillStyle, height, width, x, y };
@@ -147,7 +147,7 @@ describe('renderIntoCanvas()', () => {
         const { valueWidth, valueOffset: x } = item;
         const width = Math.max(valueWidth, MIN_WIDTH);
         const color = expectedColors[i].output;
-        const fillStyle = `rgba(${color.concat(0.3).join()})`;
+        const fillStyle = `rgba(${color.concat(ALPHA).join()})`;
         const height = itemHeight;
         const y = i;
         return { fillStyle, height, width, x, y };

diff --git a/src/components/TracePage/index.js b/src/components/TracePage/index.js
@@ -40,7 +40,6 @@ import NotFound from '../App/NotFound';
 import * as jaegerApiActions from '../../actions/jaeger-api';
 import { getTraceName } from '../../model/trace-viewer';
 import type { Trace } from '../../types';
-import colorGenerator from '../../utils/color-generator';
 
 import './index.css';
 
@@ -112,7 +111,6 @@ export default class TracePage extends React.PureComponent<TracePageProps, Trace
   }
 
   componentDidMount() {
-    colorGenerator.clear();
     this.ensureTraceFetched();
     this.updateViewRangeTime(0, 1);
     if (!this._scrollManager) {