comment flow annotations (#2335)

8 files changed, 129 insertions, 91 deletions

diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
index 9578a6726f6..d58d2e4479b 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js
@@ -25,11 +25,20 @@ import { bisector, extent, max } from 'd3-array';
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { line as d3Line, area, curveBasis } from 'd3-shape';
 
+/*::
 type Event = { className?: string, name: string, date: Date };
+*/
+/*::
 export type Point = { x: Date, y: number | string };
+*/
+/*::
 export type Serie = { name: string, data: Array<Point>, type: string };
+*/
+/*::
 type Scale = Function;
+*/
 
+/*::
 type Props = {
   basisCurve?: boolean,
   endDate: ?Date,
@@ -54,7 +63,9 @@ type Props = {
   updateZoom?: (start: ?Date, endDate: ?Date) => void,
   zoomSpeed: number
 };
+*/
 
+/*::
 type State = {
   maxXRange: Array<number>,
   mouseOver?: boolean,
@@ -65,10 +76,11 @@ type State = {
   yScale: Scale,
   xScale: Scale
 };
+*/
 
 export default class AdvancedTimeline extends React.PureComponent {
-  props: Props;
-  state: State;
+  /*:: props: Props; */
+  /*:: state: State; */
 
   static defaultProps = {
     eventSize: 8,
@@ -76,7 +88,7 @@ export default class AdvancedTimeline extends React.PureComponent {
     zoomSpeed: 1
   };
 
-  constructor(props: Props) {
+  constructor(props /*: Props */) {
     super(props);
     const scales = this.getScales(props);
     const selectedDatePos = this.getSelectedDatePos(scales.xScale, props.selectedDate);
@@ -85,7 +97,7 @@ export default class AdvancedTimeline extends React.PureComponent {
     this.handleZoomUpdate = throttle(this.handleZoomUpdate, 40);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps /*: Props */) {
     let scales;
     let selectedDatePos;
     if (
@@ -121,13 +133,13 @@ export default class AdvancedTimeline extends React.PureComponent {
     }
   }
 
-  getRatingScale = (availableHeight: number) =>
+  getRatingScale = (availableHeight /*: number */) =>
     scalePoint().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
 
-  getLevelScale = (availableHeight: number) =>
+  getLevelScale = (availableHeight /*: number */) =>
     scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
 
-  getYScale = (props: Props, availableHeight: number, flatData: Array<Point>) => {
+  getYScale = (props /*: Props */, availableHeight /*: number */, flatData /*: Array<Point> */) => {
     if (props.metricType === 'RATING') {
       return this.getRatingScale(availableHeight);
     } else if (props.metricType === 'LEVEL') {
@@ -140,7 +152,11 @@ export default class AdvancedTimeline extends React.PureComponent {
     }
   };
 
-  getXScale = ({ startDate, endDate }: Props, availableWidth: number, flatData: Array<Point>) => {
+  getXScale = (
+    { startDate, endDate } /*: Props */,
+    availableWidth /*: number */,
+    flatData /*: Array<Point> */
+  ) => {
     const dateRange = extent(flatData, d => d.x);
     const start = startDate && startDate > dateRange[0] ? startDate : dateRange[0];
     const end = endDate && endDate < dateRange[1] ? endDate : dateRange[1];
@@ -151,17 +167,17 @@ export default class AdvancedTimeline extends React.PureComponent {
     };
   };
 
-  getScales = (props: Props) => {
+  getScales = (props /*: Props */) => {
     const availableWidth = props.width - props.padding[1] - props.padding[3];
     const availableHeight = props.height - props.padding[0] - props.padding[2];
-    const flatData = flatten(props.series.map((serie: Serie) => serie.data));
+    const flatData = flatten(props.series.map((serie /*: Serie */) => serie.data));
     return {
       ...this.getXScale(props, availableWidth, flatData),
       yScale: this.getYScale(props, availableHeight, flatData)
     };
   };
 
-  getSelectedDatePos = (xScale: Scale, selectedDate: ?Date) => {
+  getSelectedDatePos = (xScale /*: Scale */, selectedDate /*: ?Date */) => {
     const firstSerie = this.props.series[0];
     if (selectedDate && firstSerie) {
       const idx = firstSerie.data.findIndex(
@@ -181,12 +197,12 @@ export default class AdvancedTimeline extends React.PureComponent {
     return { selectedDate: null, selectedDateXPos: null, selectedDateIdx: null };
   };
 
-  getEventMarker = (size: number) => {
+  getEventMarker = (size /*: number */) => {
     const half = size / 2;
     return `M${half} 0 L${size} ${half} L ${half} ${size} L0 ${half} L${half} 0 L${size} ${half}`;
   };
 
-  getMouseOverlayPos = (target: HTMLElement) => {
+  getMouseOverlayPos = (target /*: HTMLElement */) => {
     if (this.state.mouseOverlayPos) {
       return this.state.mouseOverlayPos;
     }
@@ -195,7 +211,7 @@ export default class AdvancedTimeline extends React.PureComponent {
     return pos;
   };
 
-  handleWheel = (evt: WheelEvent & { target: HTMLElement }) => {
+  handleWheel = (evt /*: WheelEvent & { target: HTMLElement } */) => {
     evt.preventDefault();
     const { maxXRange, xScale } = this.state;
     const parentBbox = this.getMouseOverlayPos(evt.target);
@@ -209,20 +225,20 @@ export default class AdvancedTimeline extends React.PureComponent {
     this.handleZoomUpdate(startDate, endDate);
   };
 
-  handleZoomUpdate = (startDate: ?Date, endDate: ?Date) => {
+  handleZoomUpdate = (startDate /*: ?Date */, endDate /*: ?Date */) => {
     if (this.props.updateZoom) {
       this.props.updateZoom(startDate, endDate);
     }
   };
 
-  handleMouseMove = (evt: MouseEvent & { target: HTMLElement }) => {
+  handleMouseMove = (evt /*: MouseEvent & { target: HTMLElement } */) => {
     const parentBbox = this.getMouseOverlayPos(evt.target);
     this.updateTooltipPos(evt.pageX - parentBbox.left);
   };
 
   handleMouseEnter = () => this.setState({ mouseOver: true });
 
-  handleMouseOut = (evt: Event & { relatedTarget: HTMLElement }) => {
+  handleMouseOut = (evt /*: Event & { relatedTarget: HTMLElement } */) => {
     const { updateTooltip } = this.props;
     const targetClass =
       evt.relatedTarget && typeof evt.relatedTarget.className === 'string'
@@ -251,7 +267,7 @@ export default class AdvancedTimeline extends React.PureComponent {
     }
   };
 
-  updateTooltipPos = (xPos: number) => {
+  updateTooltipPos = (xPos /*: number */) => {
     const firstSerie = this.props.series[0];
     if (this.state.mouseOver && firstSerie) {
       const { updateTooltip } = this.props;
@@ -465,7 +481,7 @@ export default class AdvancedTimeline extends React.PureComponent {
     );
   };
 
-  renderMouseEventsOverlay = (zoomEnabled: boolean) => {
+  renderMouseEventsOverlay = (zoomEnabled /*: boolean */) => {
     const mouseEvents = {};
     if (zoomEnabled) {
       mouseEvents.onWheel = this.handleWheel;
diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.js b/server/sonar-web/src/main/js/components/charts/BubbleChart.js
index a17e603b151..3426761dc5f 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.js
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.js
@@ -26,16 +26,18 @@ import { sortBy, uniq } from 'lodash';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import { TooltipsContainer } from '../mixins/tooltips-mixin';
 
+/*::
 type Scale = {
   (number): number,
   range: () => [number, number],
   ticks: number => Array<number>
 };
+*/
 
 const TICKS_COUNT = 5;
 
 export class Bubble extends React.PureComponent {
-  props: {
+  /*:: props: {
     color?: string,
     link?: string,
     onClick: (?string) => void,
@@ -44,6 +46,7 @@ export class Bubble extends React.PureComponent {
     x: number,
     y: number
   };
+*/
 
   handleClick = () => {
     if (this.props.onClick) {
@@ -92,7 +95,7 @@ export class Bubble extends React.PureComponent {
 }
 
 export default class BubbleChart extends React.PureComponent {
-  props: {|
+  /*:: props: {|
     items: Array<{|
       x: number,
       y: number,
@@ -115,6 +118,7 @@ export default class BubbleChart extends React.PureComponent {
     xDomain?: [number, number],
     yDomain?: [number, number]
   |};
+*/
 
   static defaultProps = {
     sizeRange: [5, 45],
@@ -127,7 +131,7 @@ export default class BubbleChart extends React.PureComponent {
     formatYTick: d => d
   };
 
-  getXRange(xScale: Scale, sizeScale: Scale, availableWidth: number) {
+  getXRange(xScale /*: Scale */, sizeScale /*: Scale */, availableWidth /*: number */) {
     const minX = min(this.props.items, d => xScale(d.x) - sizeScale(d.size));
     const maxX = max(this.props.items, d => xScale(d.x) + sizeScale(d.size));
     const dMinX = minX < 0 ? xScale.range()[0] - minX : xScale.range()[0];
@@ -135,7 +139,7 @@ export default class BubbleChart extends React.PureComponent {
     return [dMinX, availableWidth - dMaxX];
   }
 
-  getYRange(yScale: Scale, sizeScale: Scale, availableHeight: number) {
+  getYRange(yScale /*: Scale */, sizeScale /*: Scale */, availableHeight /*: number */) {
     const minY = min(this.props.items, d => yScale(d.y) - sizeScale(d.size));
     const maxY = max(this.props.items, d => yScale(d.y) + sizeScale(d.size));
     const dMinY = minY < 0 ? yScale.range()[1] - minY : yScale.range()[1];
@@ -143,14 +147,14 @@ export default class BubbleChart extends React.PureComponent {
     return [availableHeight - dMaxY, dMinY];
   }
 
-  getTicks(scale: Scale, format: number => string) {
+  getTicks(scale /*: Scale */, format /*: number => string */) {
     const ticks = scale.ticks(TICKS_COUNT).map(tick => format(tick));
     const uniqueTicksCount = uniq(ticks).length;
     const ticksCount = uniqueTicksCount < TICKS_COUNT ? uniqueTicksCount - 1 : TICKS_COUNT;
     return scale.ticks(ticksCount);
   }
 
-  renderXGrid(ticks: Array<number>, xScale: Scale, yScale: Scale) {
+  renderXGrid(ticks /*: Array<number> */, xScale /*: Scale */, yScale /*: Scale */) {
     if (!this.props.displayXGrid) {
       return null;
     }
@@ -169,7 +173,7 @@ export default class BubbleChart extends React.PureComponent {
     );
   }
 
-  renderYGrid(ticks: Array<number>, xScale: Scale, yScale: Scale) {
+  renderYGrid(ticks /*: Array<number> */, xScale /*: Scale */, yScale /*: Scale */) {
     if (!this.props.displayYGrid) {
       return null;
     }
@@ -188,7 +192,7 @@ export default class BubbleChart extends React.PureComponent {
     );
   }
 
-  renderXTicks(xTicks: Array<number>, xScale: Scale, yScale: Scale) {
+  renderXTicks(xTicks /*: Array<number> */, xScale /*: Scale */, yScale /*: Scale */) {
     if (!this.props.displayXTicks) {
       return null;
     }
@@ -211,7 +215,7 @@ export default class BubbleChart extends React.PureComponent {
     );
   }
 
-  renderYTicks(yTicks: Array<number>, xScale: Scale, yScale: Scale) {
+  renderYTicks(yTicks /*: Array<number> */, xScale /*: Scale */, yScale /*: Scale */) {
     if (!this.props.displayYTicks) {
       return null;
     }
@@ -240,7 +244,7 @@ export default class BubbleChart extends React.PureComponent {
     );
   }
 
-  renderChart(width: number) {
+  renderChart(width /*: number */) {
     const availableWidth = width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
 
diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.js b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.js
index 390b3ccc838..da60f2f7ab1 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.js
+++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.js
@@ -22,14 +22,16 @@ import React from 'react';
 import classNames from 'classnames';
 import { formatMeasure } from '../../helpers/measures';
 
-type Props = {
+/*:: type Props = {
   className?: string,
   colorScale: Object,
   colorNA?: string,
   metricType: string
-};
+}; */
 
-export default function ColorBoxLegend({ className, colorScale, colorNA, metricType }: Props) {
+export default function ColorBoxLegend(
+  { className, colorScale, colorNA, metricType } /*: Props */
+) {
   const colorDomain = colorScale.domain();
   const colorRange = colorScale.range();
   return (
diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.js b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.js
index 18dec37a7d7..224170b67f0 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.js
+++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.js
@@ -20,7 +20,7 @@
 // @flow
 import React from 'react';
 
-type Props = {
+/*:: type Props = {
   className?: string,
   colorScale: Object,
   colorNA?: string,
@@ -28,19 +28,21 @@ type Props = {
   padding?: Array<number>,
   height: number,
   width: number
-};
+}; */
 
 const NA_SPACING = 4;
 
-export default function ColorGradientLegend({
-  className,
-  colorScale,
-  colorNA,
-  direction,
-  padding = [12, 24, 0, 0],
-  height,
-  width
-}: Props) {
+export default function ColorGradientLegend(
+  {
+    className,
+    colorScale,
+    colorNA,
+    direction,
+    padding = [12, 24, 0, 0],
+    height,
+    width
+  } /*: Props */
+) {
   let colorDomain = colorScale.domain();
   let colorRange = colorScale.range();
   if (direction !== 1) {
diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.js b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.js
index a5caf0e534a..67017ea7d80 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.js
+++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.js
@@ -23,7 +23,7 @@ import classNames from 'classnames';
 import { formatMeasure } from '../../helpers/measures';
 import { RATING_COLORS } from '../../helpers/constants';
 
-export default function ColorRatingsLegend({ className }: { className?: string }) {
+export default function ColorRatingsLegend({ className } /*: { className?: string } */) {
   return (
     <div className={classNames('color-box-legend', className)}>
       {[1, 2, 3, 4, 5].map(rating =>
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMap.js b/server/sonar-web/src/main/js/components/charts/TreeMap.js
index 887f3fa7322..21ae66da1bb 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMap.js
+++ b/server/sonar-web/src/main/js/components/charts/TreeMap.js
@@ -23,7 +23,7 @@ import { treemap as d3Treemap, hierarchy as d3Hierarchy } from 'd3-hierarchy';
 import TreeMapRect from './TreeMapRect';
 import { translate } from '../../helpers/l10n';
 
-export type TreeMapItem = {
+/*:: export type TreeMapItem = {
   key: string,
   size: number,
   color: string,
@@ -31,19 +31,19 @@ export type TreeMapItem = {
   tooltip?: string | React.Element<*>,
   label: string,
   link?: string
-};
+}; */
 
-type Props = {|
+/*:: type Props = {|
   items: Array<TreeMapItem>,
   onRectangleClick?: string => void,
   height: number,
   width: number
-|};
+|}; */
 
 export default class TreeMap extends React.PureComponent {
-  props: Props;
+  /*:: props: Props; */
 
-  mostCommitPrefix = (labels: Array<string>) => {
+  mostCommitPrefix = (labels /*: Array<string> */) => {
     const sortedLabels = labels.slice(0).sort();
     const firstLabel = sortedLabels[0];
     const firstLabelLength = firstLabel.length;
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMapRect.js b/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
index 498f4cb5976..9834d35077c 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
+++ b/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
@@ -27,7 +27,7 @@ import Tooltip from '../controls/Tooltip';
 
 const SIZE_SCALE = scaleLinear().domain([3, 15]).range([11, 18]).clamp(true);
 
-type Props = {|
+/*:: type Props = {|
   x: number,
   y: number,
   width: number,
@@ -41,12 +41,12 @@ type Props = {|
   link?: string,
   onClick?: string => void,
   placement?: string
-|};
+|}; */
 
 export default class TreeMapRect extends React.PureComponent {
-  props: Props;
+  /*:: props: Props; */
 
-  handleLinkClick = (e: Event) => e.stopPropagation();
+  handleLinkClick = (e /*: Event */) => e.stopPropagation();
 
   handleRectClick = () => {
     if (this.props.onClick != null) {
diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js
index d9b1e7562d7..22205dfdf73 100644
--- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js
+++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js
@@ -25,11 +25,14 @@ import { extent, max } from 'd3-array';
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { line as d3Line, area, curveBasis } from 'd3-shape';
 import Draggable, { DraggableCore } from 'react-draggable';
-import type { DraggableData } from 'react-draggable';
-import type { Point, Serie } from './AdvancedTimeline';
+/*:: import type { DraggableData } from 'react-draggable'; */
+/*:: import type { Point, Serie } from './AdvancedTimeline'; */
 
+/*::
 type Scale = Function;
+*/
 
+/*::
 type Props = {
   basisCurve?: boolean,
   endDate: ?Date,
@@ -43,34 +46,37 @@ type Props = {
   startDate: ?Date,
   updateZoom: (start: ?Date, endDate: ?Date) => void
 };
+*/
 
+/*::
 type State = {
   overlayLeftPos: ?number,
   newZoomStart: ?number
 };
+*/
 
 export default class ZoomTimeLine extends React.PureComponent {
-  props: Props;
-  state: State;
+  /*:: props: Props; */
+  /*:: state: State; */
 
   static defaultProps = {
     padding: [0, 0, 18, 0],
     showXTicks: true
   };
 
-  constructor(props: Props) {
+  constructor(props /*: Props */) {
     super(props);
     this.state = { overlayLeftPos: null, newZoomStart: null };
     this.handleZoomUpdate = throttle(this.handleZoomUpdate, 40);
   }
 
-  getRatingScale = (availableHeight: number) =>
+  getRatingScale = (availableHeight /*: number */) =>
     scalePoint().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
 
-  getLevelScale = (availableHeight: number) =>
+  getLevelScale = (availableHeight /*: number */) =>
     scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
 
-  getYScale = (availableHeight: number, flatData: Array<Point>) => {
+  getYScale = (availableHeight /*: number */, flatData /*: Array<Point> */) => {
     if (this.props.metricType === 'RATING') {
       return this.getRatingScale(availableHeight);
     } else if (this.props.metricType === 'LEVEL') {
@@ -80,34 +86,34 @@ export default class ZoomTimeLine extends React.PureComponent {
     }
   };
 
-  getXScale = (availableWidth: number, flatData: Array<Point>) =>
+  getXScale = (availableWidth /*: number */, flatData /*: Array<Point> */) =>
     scaleTime().domain(extent(flatData, d => d.x)).range([0, availableWidth]).clamp(true);
 
   getScales = () => {
     const availableWidth = this.props.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
-    const flatData = flatten(this.props.series.map((serie: Serie) => serie.data));
+    const flatData = flatten(this.props.series.map((serie /*: Serie */) => serie.data));
     return {
       xScale: this.getXScale(availableWidth, flatData),
       yScale: this.getYScale(availableHeight, flatData)
     };
   };
 
-  getEventMarker = (size: number) => {
+  getEventMarker = (size /*: number */) => {
     const half = size / 2;
     return `M${half} 0 L${size} ${half} L ${half} ${size} L0 ${half} L${half} 0 L${size} ${half}`;
   };
 
-  handleDoubleClick = (xScale: Scale, xDim: Array<number>) => () => {
+  handleDoubleClick = (xScale /*: Scale */, xDim /*: Array<number> */) => () => {
     this.handleZoomUpdate(xScale, xDim);
   };
 
   handleSelectionDrag = (
-    xScale: Scale,
-    width: number,
-    xDim: Array<number>,
-    checkDelta?: boolean
-  ) => (e: Event, data: DraggableData) => {
+    xScale /*: Scale */,
+    width /*: number */,
+    xDim /*: Array<number> */,
+    checkDelta /*: ?boolean */
+  ) => (e /*: Event */, data /*: DraggableData */) => {
     if (!checkDelta || data.deltaX) {
       const x = Math.max(xDim[0], Math.min(data.x, xDim[1] - width));
       this.handleZoomUpdate(xScale, [x, width + x]);
@@ -115,19 +121,22 @@ export default class ZoomTimeLine extends React.PureComponent {
   };
 
   handleSelectionHandleDrag = (
-    xScale: Scale,
-    fixedX: number,
-    xDim: Array<number>,
-    handleDirection: string,
-    checkDelta?: boolean
-  ) => (e: Event, data: DraggableData) => {
+    xScale /*: Scale */,
+    fixedX /*: number */,
+    xDim /*: Array<number> */,
+    handleDirection /*: string */,
+    checkDelta /*: ?boolean */
+  ) => (e /*: Event */, data /*: DraggableData */) => {
     if (!checkDelta || data.deltaX) {
       const x = Math.max(xDim[0], Math.min(data.x, xDim[1]));
       this.handleZoomUpdate(xScale, handleDirection === 'right' ? [fixedX, x] : [x, fixedX]);
     }
   };
 
-  handleNewZoomDragStart = (xDim: Array<number>) => (e: Event, data: DraggableData) => {
+  handleNewZoomDragStart = (xDim /*: Array<number> */) => (
+    e /*: Event */,
+    data /*: DraggableData */
+  ) => {
     const overlayLeftPos = data.node.getBoundingClientRect().left;
     this.setState({
       overlayLeftPos,
@@ -135,7 +144,10 @@ export default class ZoomTimeLine extends React.PureComponent {
     });
   };
 
-  handleNewZoomDrag = (xScale: Scale, xDim: Array<number>) => (e: Event, data: DraggableData) => {
+  handleNewZoomDrag = (xScale /*: Scale */, xDim /*: Array<number> */) => (
+    e /*: Event */,
+    data /*: DraggableData */
+  ) => {
     const { newZoomStart, overlayLeftPos } = this.state;
     if (newZoomStart != null && overlayLeftPos != null && data.deltaX) {
       this.handleZoomUpdate(
@@ -145,9 +157,9 @@ export default class ZoomTimeLine extends React.PureComponent {
     }
   };
 
-  handleNewZoomDragEnd = (xScale: Scale, xDim: Array<number>) => (
-    e: Event,
-    data: DraggableData
+  handleNewZoomDragEnd = (xScale /*: Scale */, xDim /*: Array<number> */) => (
+    e /*: Event */,
+    data /*: DraggableData */
   ) => {
     const { newZoomStart, overlayLeftPos } = this.state;
     if (newZoomStart != null && overlayLeftPos != null) {
@@ -157,7 +169,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     }
   };
 
-  handleZoomUpdate = (xScale: Scale, xArray: Array<number>) => {
+  handleZoomUpdate = (xScale /*: Scale */, xArray /*: Array<number> */) => {
     const xRange = xScale.range();
     const startDate =
       xArray[0] > xRange[0] && xArray[0] < xRange[xRange.length - 1]
@@ -172,7 +184,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     }
   };
 
-  renderBaseLine = (xScale: Scale, yScale: Scale) => {
+  renderBaseLine = (xScale /*: Scale */, yScale /*: Scale */) => {
     return (
       <line
         className="line-chart-grid"
@@ -184,7 +196,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     );
   };
 
-  renderTicks = (xScale: Scale, yScale: Scale) => {
+  renderTicks = (xScale /*: Scale */, yScale /*: Scale */) => {
     const format = xScale.tickFormat(7);
     const ticks = xScale.ticks(7);
     const y = yScale.range()[0];
@@ -203,7 +215,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     );
   };
 
-  renderLeak = (xScale: Scale, yScale: Scale) => {
+  renderLeak = (xScale /*: Scale */, yScale /*: Scale */) => {
     if (!this.props.leakPeriodDate) {
       return null;
     }
@@ -219,7 +231,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     );
   };
 
-  renderLines = (xScale: Scale, yScale: Scale) => {
+  renderLines = (xScale /*: Scale */, yScale /*: Scale */) => {
     const lineGenerator = d3Line()
       .defined(d => d.y || d.y === 0)
       .x(d => xScale(d.x))
@@ -240,7 +252,7 @@ export default class ZoomTimeLine extends React.PureComponent {
     );
   };
 
-  renderAreas = (xScale: Scale, yScale: Scale) => {
+  renderAreas = (xScale /*: Scale */, yScale /*: Scale */) => {
     const areaGenerator = area()
       .defined(d => d.y || d.y === 0)
       .x(d => xScale(d.x))
@@ -262,14 +274,16 @@ export default class ZoomTimeLine extends React.PureComponent {
     );
   };
 
-  renderZoomHandle = (options: {
+  renderZoomHandle = (
+    options /*: {
     xScale: Scale,
     xPos: number,
     fixedPos: number,
     yDim: Array<number>,
     xDim: Array<number>,
     direction: string
-  }) =>
+  } */
+  ) =>
     <Draggable
       axis="x"
       bounds={{ left: options.xDim[0], right: options.xDim[1] }}
@@ -296,7 +310,7 @@ export default class ZoomTimeLine extends React.PureComponent {
       />
     </Draggable>;
 
-  renderZoom = (xScale: Scale, yScale: Scale) => {
+  renderZoom = (xScale /*: Scale */, yScale /*: Scale */) => {
     const xRange = xScale.range();
     const yRange = yScale.range();
     const xDim = [xRange[0], xRange[xRange.length - 1]];