Use canvas instead of SVG for trace mini-map

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,80 @@
+// 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import renderIntoCanvas from './render-into-canvas';
+import colorGenerator from '../../../utils/color-generator';
+
+import './CanvasSpanGraph.css';
+
+const CV_WIDTH = 4000;
+
+const getColor = str => colorGenerator.getColorByKey(str);
+
+export default class CanvasSpanGraph extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this._canvasElm = undefined;
+    this._setCanvasRef = this._setCanvasRef.bind(this);
+  }
+
+  componentDidMount() {
+    this._draw();
+  }
+
+  componentDidUpdate() {
+    this._draw();
+  }
+
+  _setCanvasRef(elm) {
+    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}
+      />
+    );
+  }
+}
+
+CanvasSpanGraph.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      valueWidth: PropTypes.number.isRequired,
+      valueOffset: PropTypes.number.isRequired,
+      serviceName: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  valueWidth: PropTypes.number.isRequired,
+};

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,44 @@
+// 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import './GraphTicks.css';
+
+export default function SpanGraph(props) {
+  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>
+  );
+}
+
+SpanGraph.propTypes = {
+  numTicks: PropTypes.number.isRequired,
+};

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

@@ -21,36 +21,25 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { getTraceTimestamp, getTraceDuration } from '../../selectors/trace';
-import { getPercentageOfInterval } from '../../utils/date';
+import './Scrubber.css';
 
 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);
-
+  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,24 +51,25 @@ 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 = {
+Scrubber.propTypes = {
   onMouseDown: PropTypes.func,
-  trace: PropTypes.object,
-  timestamp: PropTypes.number.isRequired,
+  position: PropTypes.number.isRequired,
   handleTopOffset: PropTypes.number,
   handleWidth: PropTypes.number,
   handleHeight: PropTypes.number,

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

@@ -22,23 +22,18 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
-import TimelineScrubber from '../../../src/components/TracePage/TimelineScrubber';
-import traceGenerator from '../../../src/demo/trace-generators';
+import Scrubber from './Scrubber';
 
-import { getTraceTimestamp, getTraceDuration } from '../../../src/selectors/trace';
-
-describe('<TimelineScrubber>', () => {
-  const generatedTrace = traceGenerator.trace({ numberOfSpans: 45 });
+describe('<Scrubber>', () => {
   const defaultProps = {
     onMouseDown: sinon.spy(),
-    trace: generatedTrace,
-    timestamp: getTraceTimestamp(generatedTrace),
+    position: 0,
   };
 
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<TimelineScrubber {...defaultProps} />);
+    wrapper = shallow(<Scrubber {...defaultProps} />);
   });
 
   it('contains the proper svg components', () => {
@@ -56,8 +51,7 @@ describe('<TimelineScrubber>', () => {
   });
 
   it('calculates the correct x% for a timestamp', () => {
-    const timestamp = getTraceDuration(generatedTrace) * 0.5 + getTraceTimestamp(generatedTrace);
-    wrapper = shallow(<TimelineScrubber {...defaultProps} timestamp={timestamp} />);
+    wrapper = shallow(<Scrubber {...defaultProps} position={0.5} />);
     const line = wrapper.find('line').first();
     const rect = wrapper.find('rect').first();
     expect(line.prop('x1')).toBe('50%');