MarkerTimeline

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828814

fbshipit-source-id: 13b86338a73a4838857a31e16ea184e35ebfa7d0

src/ui/components/MarkerTimeline.tsx

@@ -6,27 +6,28 @@
  */
 
 import {Component} from 'react';
-import styled from '../styled/index.js';
-import Text from './Text.js';
-import FlexRow from './FlexRow.js';
-import {colors} from './colors.tsx';
+import styled from 'react-emotion';
+import Text from './Text';
+import FlexRow from './FlexRow';
+import {colors} from './colors';
+import React from 'react';
 
 type DataPoint = {
-  time: number,
-  color?: string,
-  label: string,
-  key: string,
+  time: number;
+  color?: string;
+  label: string;
+  key: string;
 };
 
-type Props = {|
-  onClick?: (keys: Array<string>) => mixed,
-  selected?: ?string,
-  points: Array<DataPoint>,
-  lineHeight: number,
-  maxGap: number,
-|};
+type Props = {
+  onClick?: (keys: Array<string>) => void;
+  selected?: string | null | undefined;
+  points: DataPoint[];
+  lineHeight: number;
+  maxGap: number;
+};
 
-const Markers = styled('div')(props => ({
+const Markers = styled('div')((props: {totalTime: number}) => ({
   position: 'relative',
   margin: 10,
   height: props.totalTime,
@@ -41,7 +42,15 @@ const Markers = styled('div')(props => ({
   },
 }));
 
-const Point = styled(FlexRow)(props => ({
+const Point = styled(FlexRow)(
+  (props: {
+    positionY: number;
+    onClick: Function;
+    number: number;
+    threadColor: string;
+    selected: boolean;
+    cut: boolean;
+  }) => ({
     position: 'absolute',
     top: props.positionY,
     left: 0,
@@ -62,7 +71,7 @@ const Point = styled(FlexRow)(props => ({
       position: 'relative',
       textAlign: 'center',
       fontSize: 8,
-    fontWeight: '500',
+      fontWeight: 500,
       content: props.number ? `'${props.number}'` : '""',
       display: 'inline-block',
       width: 9,
@@ -91,11 +100,12 @@ const Point = styled(FlexRow)(props => ({
       borderBottom: `1px solid ${colors.light30}`,
       transform: `skewY(-10deg)`,
     },
-}));
+  }),
+);
 
 const Time = styled('span')({
   color: colors.light30,
-  fontWeight: '300',
+  fontWeight: 300,
   marginRight: 4,
   marginTop: -2,
 });
@@ -107,17 +117,17 @@ const Code = styled(Text)({
 });
 
 type TimePoint = {
-  timestamp: number,
-  markerNames: Array<string>,
-  markerKeys: Array<string>,
-  isCut: boolean,
-  positionY: number,
-  color: string,
+  timestamp: number;
+  markerNames: Array<string>;
+  markerKeys: Array<string>;
+  isCut: boolean;
+  positionY: number;
+  color: string;
 };
 
-type State = {|
-  timePoints: Array<TimePoint>,
-|};
+type State = {
+  timePoints: Array<TimePoint>;
+};
 
 export default class MarkerTimeline extends Component<Props, State> {
   static defaultProps = {
@@ -126,9 +136,9 @@ export default class MarkerTimeline extends Component<Props, State> {
   };
 
   static getDerivedStateFromProps(props: Props) {
-    const sortedMarkers: Array<[number, Array<DataPoint>]> = Array.from(
+    const sortedMarkers: [number, DataPoint[]][] = Array.from(
       props.points
-        .reduce((acc: Map<number, Array<DataPoint>>, cv: DataPoint) => {
+        .reduce((acc: Map<number, DataPoint[]>, cv: DataPoint) => {
           const list = acc.get(cv.time);
           if (list) {
             list.push(cv);
@@ -136,7 +146,7 @@ export default class MarkerTimeline extends Component<Props, State> {
             acc.set(cv.time, [cv]);
           }
           return acc;
-        }, (new Map(): Map<number, Array<DataPoint>>))
+        }, new Map())
         .entries(),
     ).sort((a, b) => a[0] - b[0]);
 

src/ui/index.js

@@ -144,7 +144,7 @@ export {default as Heading} from './components/Heading.js';
 // filters
 export type {Filter} from './components/filter/types.js';
 
-export {default as MarkerTimeline} from './components/MarkerTimeline.js';
+export {default as MarkerTimeline} from './components/MarkerTimeline.tsx';
 
 export {default as StackTrace} from './components/StackTrace.js';