Use flow instead of prop types (PR feedback)

src/components/TracePage/SpanGraph/CanvasSpanGraph.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,20 +20,27 @@
 // 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 * 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 {
-  constructor(props) {
+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);
@@ -45,9 +54,9 @@ export default class CanvasSpanGraph extends React.PureComponent {
     this._draw();
   }
 
-  _setCanvasRef(elm) {
+  _setCanvasRef = function _setCanvasRef(elm: React.Node) {
     this._canvasElm = elm;
-  }
+  };
 
   _draw() {
     if (this._canvasElm) {
@@ -67,14 +76,3 @@ export default class CanvasSpanGraph extends React.PureComponent {
     );
   }
 }
-
-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.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,12 +20,15 @@
 // 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) {
+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
@@ -38,7 +43,3 @@ export default function SpanGraph(props) {
     </g>
   );
 }
-
-SpanGraph.propTypes = {
-  numTicks: PropTypes.number.isRequired,
-};

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,11 +20,18 @@
 // 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 './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;
@@ -33,7 +42,7 @@ export default function Scrubber({
   handleTopOffset = HANDLE_TOP_OFFSET,
   handleWidth = HANDLE_WIDTH,
   handleHeight = HANDLE_HEIGHT,
-}) {
+}: ScrubberProps) {
   const xPercent = `${position * 100}%`;
   return (
     <g className="timeline-scrubber" onMouseDown={onMouseDown}>
@@ -66,11 +75,3 @@ export default function Scrubber({
     </g>
   );
 }
-
-Scrubber.propTypes = {
-  onMouseDown: PropTypes.func,
-  position: PropTypes.number.isRequired,
-  handleTopOffset: PropTypes.number,
-  handleWidth: PropTypes.number,
-  handleHeight: PropTypes.number,
-};

src/components/TracePage/SpanGraph/TickLabels.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,14 +20,18 @@
 // 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 { formatDuration } from '../../../utils/date';
 
 import './TickLabels.css';
 
-export default function TickLabels(props) {
+type TickLabelsProps = {
+  numTicks: number,
+  duration: number,
+};
+
+export default function TickLabels(props: TickLabelsProps) {
   const { numTicks, duration } = props;
 
   const ticks = [];
@@ -45,8 +51,3 @@ export default function TickLabels(props) {
     </div>
   );
 }
-
-TickLabels.propTypes = {
-  numTicks: PropTypes.number.isRequired,
-  duration: PropTypes.number.isRequired,
-};

src/components/TracePage/SpanGraph/index.css

@@ -27,6 +27,7 @@ THE SOFTWARE.
 
 .SpanGraph--graph {
   border: 1px solid #999;
+  /* need !important here to overcome something from semantic UI */
   overflow: visible !important;
   position: relative;
   transform-origin: 0 0;

src/components/TracePage/SpanGraph/index.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,41 +20,49 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, { Component } from 'react';
-import { window } from 'global';
+import * as React from 'react';
 import PropTypes from 'prop-types';
+import { window } from 'global';
 
 import GraphTicks from './GraphTicks';
 import CanvasSpanGraph from './CanvasSpanGraph';
 import TickLabels from './TickLabels';
 import Scrubber from './Scrubber';
+import type { Trace } from '../../../types';
 
 import './index.css';
 
 const TIMELINE_TICK_INTERVAL = 4;
 
-export default class SpanGraph extends Component {
-  static get propTypes() {
-    return {
-      height: PropTypes.number.isRequired,
-      trace: PropTypes.object,
-      viewRange: PropTypes.arrayOf(PropTypes.number).isRequired,
-    };
-  }
+type SpanGraphProps = {
+  height: number,
+  trace: Trace,
+  viewRange: [number, number],
+};
 
-  static get defaultProps() {
-    return {
-      height: 60,
-    };
-  }
+type SpanGraphState = {
+  currentlyDragging: ?string,
+  leftBound: ?number,
+  prevX: ?number,
+  rightBound: ?number,
+};
 
-  static get contextTypes() {
-    return {
-      updateTimeRangeFilter: PropTypes.func.isRequired,
-    };
-  }
+export default class SpanGraph extends React.Component<SpanGraphProps, SpanGraphState> {
+  props: SpanGraphProps;
+  state: SpanGraphState;
+
+  _wrapper: ?HTMLElement;
+  _publishIntervalID: ?number;
+
+  static defaultProps = {
+    height: 60,
+  };
+
+  static contextTypes = {
+    updateTimeRangeFilter: PropTypes.func.isRequired,
+  };
 
-  constructor(props) {
+  constructor(props: SpanGraphProps) {
     super(props);
     this.state = {
       currentlyDragging: null,
@@ -63,10 +73,10 @@ export default class SpanGraph extends Component {
     this._wrapper = undefined;
     this._setWrapper = this._setWrapper.bind(this);
     this._publishTimeRange = this._publishTimeRange.bind(this);
-    this.publishIntervalID = undefined;
+    this._publishIntervalID = undefined;
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps: SpanGraphProps, nextState: SpanGraphState) {
     const { trace: newTrace, viewRange: newViewRange } = nextProps;
     const {
       currentlyDragging: newCurrentlyDragging,
@@ -86,11 +96,11 @@ export default class SpanGraph extends Component {
     );
   }
 
-  _setWrapper(elm) {
+  _setWrapper = function _setWrapper(elm: React.Node) {
     this._wrapper = elm;
-  }
+  };
 
-  _startDragging(boundName, { clientX }) {
+  _startDragging(boundName: string, { clientX }: SyntheticMouseEvent<any>) {
     const { viewRange } = this.props;
     const [leftBound, rightBound] = viewRange;
 
@@ -112,20 +122,20 @@ export default class SpanGraph extends Component {
     this.setState({ currentlyDragging: null, prevX: null });
   }
 
-  _publishTimeRange() {
+  _publishTimeRange = function _publishTimeRange() {
     const { currentlyDragging, leftBound, rightBound } = this.state;
     const { updateTimeRangeFilter } = this.context;
-    clearTimeout(this.publishIntervalID);
-    this.publishIntervalID = undefined;
+    clearTimeout(this._publishIntervalID);
+    this._publishIntervalID = undefined;
     if (currentlyDragging) {
       updateTimeRangeFilter(leftBound, rightBound);
     }
-  }
+  };
 
-  _onMouseMove({ clientX }) {
+  _onMouseMove({ clientX }: SyntheticMouseEvent<any>) {
     const { currentlyDragging } = this.state;
     let { leftBound, rightBound } = this.state;
-    if (!currentlyDragging) {
+    if (!currentlyDragging || !this._wrapper) {
       return;
     }
     const newValue = clientX / this._wrapper.clientWidth;
@@ -140,8 +150,8 @@ export default class SpanGraph extends Component {
         break;
     }
     this.setState({ prevX: clientX, leftBound, rightBound });
-    if (this.publishIntervalID == null) {
-      this.publishIntervalID = window.requestAnimationFrame(this._publishTimeRange);
+    if (this._publishIntervalID == null) {
+      this._publishIntervalID = window.requestAnimationFrame(this._publishTimeRange);
     }
   }
 
@@ -178,9 +188,9 @@ export default class SpanGraph extends Component {
           />
           <div className="SpanGraph--zlayer">
             <svg height={height} className={`SpanGraph--graph ${currentlyDragging ? 'is-dragging' : ''}`}>
-              {leftInactive > 0 &&
+              {leftInactive &&
                 <rect x={0} y={0} height="100%" width={`${leftInactive}%`} className="SpanGraph--inactive" />}
-              {rightInactive > 0 &&
+              {rightInactive &&
                 <rect
                   x={`${100 - rightInactive}%`}
                   y={0}
@@ -204,7 +214,7 @@ export default class SpanGraph extends Component {
                   handleWidth={8}
                   handleHeight={30}
                   handleTopOffset={15}
-                  onMouseDown={(...args) => this._startDragging('leftBound', ...args)}
+                  onMouseDown={event => this._startDragging('leftBound', event)}
                 />
               }
               {
@@ -214,7 +224,7 @@ export default class SpanGraph extends Component {
                   handleWidth={8}
                   handleHeight={30}
                   handleTopOffset={15}
-                  onMouseDown={(...args) => this._startDragging('rightBound', ...args)}
+                  onMouseDown={event => this._startDragging('rightBound', event)}
                 />
               }
             </svg>

src/components/TracePage/SpanGraph/render-into-canvas.js

@@ -1,7 +1,34 @@
+// @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.
+
 const CV_WIDTH = 4000;
 const MIN_WIDTH = 50;
 
-export default function renderIntoCanvas(canvas, items, totalValueWidth, getFillColor) {
+export default function renderIntoCanvas(
+  canvas: HTMLCanvasElement,
+  items: { valueWidth: number, valueOffset: number, serviceName: string }[],
+  totalValueWidth: number,
+  getFillColor: string => string
+) {
   // eslint-disable-next-line  no-param-reassign
   canvas.width = CV_WIDTH;
   // eslint-disable-next-line  no-param-reassign