Use canvas instead of SVG for trace mini-map (jaegertracing#72)

* WIP trace mini-map via canvas

* Fix jaegertracing#61 render span graph as canvas instead of SVG
- Render span graph via canvas instead of SVG
- Zoom range changed to [0, 1], e.g. time and trace agnostic allowed
  removal of some utils
- "Timeline" -> 0ms
- Use props instead of context to provide span graph with viewing range
- Move all span graph related classes into same folder
- Misc CSS cleanup

* Use flow instead of prop types (PR feedback)

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

src/components/TracePage/SpanGraph/CanvasSpanGraph.css

@@ -0,0 +1,28 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.CanvasSpanGraph {
+  background: #fafafa;
+  height: 60px;
+  position: absolute;
+  width: 100%;
+}

src/components/TracePage/SpanGraph/CanvasSpanGraph.js

@@ -0,0 +1,78 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as React from 'react';
+
+import renderIntoCanvas from './render-into-canvas';
+import colorGenerator from '../../../utils/color-generator';
+
+import './CanvasSpanGraph.css';
+
+type CanvasSpanGraphProps = {
+  items: { valueWidth: number, valueOffset: number, serviceName: string }[],
+  valueWidth: number,
+};
+
+const CV_WIDTH = 4000;
+
+const getColor = str => colorGenerator.getColorByKey(str);
+
+export default class CanvasSpanGraph extends React.PureComponent<CanvasSpanGraphProps> {
+  props: CanvasSpanGraphProps;
+  _canvasElm: ?HTMLCanvasElement;
+
+  constructor(props: CanvasSpanGraphProps) {
+    super(props);
+    this._canvasElm = undefined;
+    this._setCanvasRef = this._setCanvasRef.bind(this);
+  }
+
+  componentDidMount() {
+    this._draw();
+  }
+
+  componentDidUpdate() {
+    this._draw();
+  }
+
+  _setCanvasRef = function _setCanvasRef(elm: React.Node) {
+    this._canvasElm = elm;
+  };
+
+  _draw() {
+    if (this._canvasElm) {
+      const { valueWidth: totalValueWidth, items } = this.props;
+      renderIntoCanvas(this._canvasElm, items, totalValueWidth, getColor);
+    }
+  }
+
+  render() {
+    return (
+      <canvas
+        className="CanvasSpanGraph"
+        ref={this._setCanvasRef}
+        width={CV_WIDTH}
+        height={this.props.items.length}
+      />
+    );
+  }
+}

src/components/TracePage/SpanGraph/GraphTicks.css

@@ -0,0 +1,26 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.GraphTick {
+  stroke: #aaa;
+  stroke-width: 1px;
+}

src/components/TracePage/SpanGraph/GraphTicks.js

@@ -0,0 +1,45 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+
+import './GraphTicks.css';
+
+type GraphTicksProps = {
+  numTicks: number,
+};
+
+export default function GraphTicks(props: GraphTicksProps) {
+  const { numTicks } = props;
+  const ticks = [];
+  // i starts at 1, limit is `i < numTicks` so the first and last ticks aren't drawn
+  for (let i = 1; i < numTicks; i++) {
+    const x = `${i / numTicks * 100}%`;
+    ticks.push(<line className="GraphTick" x1={x} y1="0%" x2={x} y2="100%" key={i / numTicks} />);
+  }
+
+  return (
+    <g data-test="ticks" aria-hidden="true">
+      {ticks}
+    </g>
+  );
+}

src/components/TracePage/SpanGraph/GraphTicks.test.js

@@ -0,0 +1,50 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import GraphTicks from './GraphTicks';
+
+describe('<GraphTicks>', () => {
+  const defaultProps = {
+    items: [
+      { valueWidth: 100, valueOffset: 25, serviceName: 'a' },
+      { valueWidth: 100, valueOffset: 50, serviceName: 'b' },
+    ],
+    valueWidth: 200,
+    numTicks: 4,
+  };
+
+  let ticksG;
+
+  beforeEach(() => {
+    const wrapper = shallow(<GraphTicks {...defaultProps} />);
+    ticksG = wrapper.find('[data-test="ticks"]');
+  });
+
+  it('creates a <g> for ticks', () => {
+    expect(ticksG.length).toBe(1);
+  });
+
+  it('creates a line for each ticks excluding the first and last', () => {
+    expect(ticksG.find('line').length).toBe(defaultProps.numTicks - 1);
+  });
+});

src/components/TracePage/SpanGraph/Scrubber.css

@@ -0,0 +1,50 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.timeline-scrubber {
+  cursor: ew-resize;
+}
+
+.timeline-scrubber__line {
+  stroke: #999;
+  stroke-width: 1;
+}
+
+.timeline-scrubber:hover .timeline-scrubber__line {
+  stroke: #777;
+}
+
+.timeline-scrubber__handle {
+  stroke: #999;
+  fill: #fff;
+}
+
+.timeline-scrubber:hover .timeline-scrubber__handle {
+  stroke: #777;
+}
+
+.timeline-scrubber__handle--grip {
+  fill: #bbb;
+}
+.timeline-scrubber:hover .timeline-scrubber__handle--grip {
+  fill: #999;
+}

src/components/TracePage/TimelineScrubber.js → src/components/TracePage/SpanGraph/Scrubber.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,39 +20,35 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import { getTraceTimestamp, getTraceDuration } from '../../selectors/trace';
-import { getPercentageOfInterval } from '../../utils/date';
+import './Scrubber.css';
+
+type ScrubberProps = {
+  position: number,
+  onMouseDown: (SyntheticMouseEvent<any>) => void,
+  handleTopOffset: number,
+  handleWidth: number,
+  handleHeight: number,
+};
 
 const HANDLE_WIDTH = 6;
 const HANDLE_HEIGHT = 20;
 const HANDLE_TOP_OFFSET = 0;
 
-export default function TimelineScrubber({
-  trace,
-  timestamp,
+export default function Scrubber({
+  position,
   onMouseDown,
   handleTopOffset = HANDLE_TOP_OFFSET,
   handleWidth = HANDLE_WIDTH,
   handleHeight = HANDLE_HEIGHT,
-}) {
-  const initialTimestamp = getTraceTimestamp(trace);
-  const totalDuration = getTraceDuration(trace);
-  const xPercentage = getPercentageOfInterval(timestamp, initialTimestamp, totalDuration);
-
+}: ScrubberProps) {
+  const xPercent = `${position * 100}%`;
   return (
     <g className="timeline-scrubber" onMouseDown={onMouseDown}>
-      <line
-        className="timeline-scrubber__line"
-        y1={0}
-        y2="100%"
-        x1={`${xPercentage}%`}
-        x2={`${xPercentage}%`}
-      />
+      <line className="timeline-scrubber__line" y2="100%" x1={xPercent} x2={xPercent} />
       <rect
-        x={`${xPercentage}%`}
+        x={xPercent}
         y={handleTopOffset}
         className="timeline-scrubber__handle"
         style={{ transform: `translate(${-(handleWidth / 2)}px)` }}
@@ -62,25 +60,18 @@ export default function TimelineScrubber({
       <circle
         className="timeline-scrubber__handle--grip"
         style={{ transform: `translateY(${handleHeight / 4}px)` }}
-        cx={`${xPercentage}%`}
-        cy={'50%'}
+        cx={xPercent}
+        cy="50%"
+        r="2"
       />
-      <circle className="timeline-scrubber__handle--grip" cx={`${xPercentage}%`} cy={'50%'} />
+      <circle className="timeline-scrubber__handle--grip" cx={xPercent} cy="50%" r="2" />
       <circle
         className="timeline-scrubber__handle--grip"
-        style={{ transform: `translateY(${-(handleHeight / 4)}px)` }}
-        cx={`${xPercentage}%`}
-        cy={'50%'}
+        style={{ transform: `translateY(${-handleHeight / 4}px)` }}
+        cx={xPercent}
+        cy="50%"
+        r="2"
       />
     </g>
   );
 }
-
-TimelineScrubber.propTypes = {
-  onMouseDown: PropTypes.func,
-  trace: PropTypes.object,
-  timestamp: PropTypes.number.isRequired,
-  handleTopOffset: PropTypes.number,
-  handleWidth: PropTypes.number,
-  handleHeight: PropTypes.number,
-};