Flow -> TypeScript conversion

babel.config.js

@@ -1,7 +1,6 @@
 module.exports = function(api) {
   api.cache(true);
   const presets = [
-    "@babel/preset-flow",
     "@babel/preset-react",
     "@babel/preset-env"
   ];

modules/electrophysiology_browser/jsx/react-series-data-viewer/README.md

@@ -13,7 +13,7 @@ A collection of expressive, low-level visualization primitives for React.
 RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 
 It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators to allow handling asynchronous events as collections.
 
-### flow (https://flow.org)
+### TypeScript (https://www.typescriptlang.org)
 A static type checker for javascript.
 
 ### Protocol Buffers (https://developers.google.com/protocol-buffers)

modules/electrophysiology_browser/jsx/react-series-data-viewer/package.json

@@ -27,14 +27,15 @@
     "redux-observable": "^1.0.0",
     "redux-thunk": "^2.3.0",
     "resize-observer-polyfill": "^1.5.0",
-    "rxjs": "^6.6.3"
+    "rxjs": "^6.6.3",
+    "tslib": "^1.9.3"
   },
   "devDependencies": {
-    "babel-plugin-flow-react-proptypes": "^24.1.2",
-    "flow-bin": "^0.123.0"
+    "@types/react": "^16.12.0",
+    "@types/react-dom": "^16.9.9",
+    "@types/react-redux": "7.1.16"
   },
   "scripts": {
-    "flow": "./node_modules/flow-bin/cli.js",
     "postinstall": "protoc protocol-buffers/chunk.proto --js_out=import_style=commonjs,binary:./src/"
   },
   "license": "MIT",

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.tsx

@@ -0,0 +1,23 @@
+export const fetchBlob = (url: string, params?: {}) =>
+  fetch(url, params).then((response) => {
+    if (!response.ok) {
+      return Promise.resolve(null) as Promise<Blob>;
+    }
+    return response.blob().then((data) => data);
+  });
+
+export const fetchJSON = (url: string, params?: {}) =>
+  fetch(url, params).then((response) => {
+    if (!response.ok) {
+      return Promise.resolve(null) as Promise<any>;
+    }
+    return response.json().then((data) => data);
+  });
+
+export const fetchText = (url: string, params?: {}) =>
+  fetch(url, params).then((response) => {
+    if (!response.ok) {
+      return Promise.resolve(null) as Promise<string>;
+    }
+    return response.text().then((data) => data);
+  });

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.tsx

@@ -1,4 +1,3 @@
-// @flow
 import {FloatChunk} from '../protocol-buffers/chunk_pb';
 import {fetchBlob} from '../ajax';
 

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx

@@ -1,5 +1,3 @@
-// @flow
-
 import {scaleOrdinal} from 'd3-scale';
 // import * as R from 'ramda';
 // import {schemeCategory10, schemeSet3} from 'd3-scale-chromatic';

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx

@@ -1,6 +1,6 @@
+import React, {Component} from 'react';
 import {tsvParse} from 'd3-dsv';
-import {Component} from 'react';
-import {createStore, applyMiddleware} from 'redux';
+import {createStore, applyMiddleware, Store} from 'redux';
 import {Provider} from 'react-redux';
 import {createEpicMiddleware} from 'redux-observable';
 import thunk from 'redux-thunk';
@@ -16,8 +16,15 @@ import {
 import {setDomain, setInterval} from '../series/store/state/bounds';
 import {updateFilteredEpochs} from '../series/store/logic/filterEpochs';
 import {setElectrodes} from '../series/store/state/montage';
+import {Channel} from '../series/store/types';
 
-type Props = {
+declare global {
+  interface Window {
+    EEGLabSeriesProviderStore: Store;
+  }
+}
+
+type CProps = {
   chunksURL: string,
   epochsURL: string,
   electrodesURL: string,
@@ -27,12 +34,17 @@ type Props = {
 /**
  * EEGLabSeriesProvider component
  */
-class EEGLabSeriesProvider extends Component {
+class EEGLabSeriesProvider extends Component<CProps> {
+  private store: Store;
+  public state: {
+    channels: Channel[]
+  };
+
   /**
    * @constructor
    * @param {object} props - React Component properties
    */
-  constructor(props: Props) {
+  constructor(props: CProps) {
     super(props);
     const epicMiddleware = createEpicMiddleware();
 
@@ -154,10 +166,10 @@ class EEGLabSeriesProvider extends Component {
       </Provider>
     );
   }
-}
 
-EEGLabSeriesProvider.defaultProps = {
-  limit: MAX_CHANNELS,
-};
+  static defaultProps = {
+    limit: MAX_CHANNELS,
+  };  
+}
 
 export default EEGLabSeriesProvider;

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx

@@ -1,21 +1,20 @@
-// @flow
-
 import React, {useEffect, useState} from 'react';
-import type {Epoch as EpochType, RightPanel} from '../store/types';
-import {connect} from 'react-redux';
+import {Epoch as EpochType, RightPanel} from '../store/types';
+import {connect, DefaultRootState} from 'react-redux';
 import {setTimeSelection} from '../store/state/timeSelection';
 import {setRightPanel} from '../store/state/rightPanel';
 import * as R from 'ramda';
 import {toggleEpoch, updateActiveEpoch} from '../store/logic/filterEpochs';
+import {RootState} from '../store';
 
-type Props = {
-  timeSelection: ?[number, number],
+type CProps = {
+  timeSelection?: [number, number],
   epochs: EpochType[],
   filteredEpochs: number[],
-  setTimeSelection: [?number, ?number] => void,
-  setRightPanel: RightPanel => void,
-  toggleEpoch: number => void,
-  updateActiveEpoch: ?number => void,
+  setTimeSelection: (_: [number, number]) => void,
+  setRightPanel: (_: RightPanel) => void,
+  toggleEpoch: (_: number) => void,
+  updateActiveEpoch: (_: number) => void,
   interval: [number, number],
 };
 
@@ -28,7 +27,7 @@ const AnnotationForm = ({
   toggleEpoch,
   updateActiveEpoch,
   interval,
-}: Props) => {
+}: CProps) => {
   const [startEvent = '', endEvent = ''] = timeSelection || [];
   let [event, setEvent] = useState([startEvent, endEvent]);
 
@@ -81,10 +80,14 @@ const AnnotationForm = ({
                 setEvent([value, event[1]]);
 
                 if (validate([value, event[1]])) {
+                  let endTime = event[1];
+                  if (typeof endTime === 'string'){
+                    endTime = parseInt(endTime);
+                  }
                   setTimeSelection(
                     [
-                      parseInt(value) || null,
-                      parseInt(event[1]) || null,
+                      value || null,
+                      endTime || null,
                     ]
                   );
                 }
@@ -104,7 +107,16 @@ const AnnotationForm = ({
                 setEvent([event[0], value]);
 
                 if (validate([event[0], value])) {
-                  setTimeSelection([parseInt(event[0]) || null, value]);
+                  let startTime = event[0];
+                  if (typeof startTime === 'string'){
+                    startTime = parseInt(startTime);
+                  }
+                  setTimeSelection(
+                    [
+                      startTime || null,
+                      value
+                    ]
+                  );
                 }
               }}
               value={event[1]}
@@ -145,7 +157,7 @@ const AnnotationForm = ({
           <textarea
             className="form-control"
             id="comment"
-            rows="3"
+            rows={3}
           ></textarea>
         </div>
         <button type="submit" className="btn btn-primary btn-xs">
@@ -163,7 +175,7 @@ AnnotationForm.defaultProps = {
 };
 
 export default connect(
-  (state)=> ({
+  (state: RootState)=> ({
     timeSelection: state.timeSelection,
     epochs: state.dataset.epochs,
     filteredEpochs: state.dataset.filteredEpochs,

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.tsx

@@ -1,16 +1,14 @@
-// @flow
-
 import {scaleLinear} from 'd3-scale';
 import {Axis as VxAxis} from '@visx/axis';
 
-type Props = {
+type CProps = {
   orientation: 'top' | 'right' | 'bottom' | 'left',
   domain: [number, number],
   range: [number, number],
   ticks: number,
   padding: number,
-  format: number => string,
-  hideLine: bool,
+  format: (_: number) => string,
+  hideLine: boolean,
 };
 
 const Axis = ({
@@ -21,7 +19,7 @@ const Axis = ({
   padding,
   format,
   hideLine,
-}: Props) => {
+}: CProps) => {
   const scale = scaleLinear()
     .domain(domain)
     .range(range);

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.js → modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.tsx

@@ -1,32 +1,31 @@
-// @flow
-
 import * as R from 'ramda';
 import {connect} from 'react-redux';
 import {_3d} from 'd3-3d';
 import {Group} from '@visx/group';
 import ResponsiveViewer from './ResponsiveViewer';
-import type {Electrode} from '../../series/store/types';
+import {Electrode} from '../../series/store/types';
 import {setHidden} from '../../series/store/state/montage';
 import React, {useState} from 'react';
-import Panel from 'jsx/Panel';
+import Panel from 'Panel';
+import {RootState} from '../store';
 
-type Props = {
+type CProps = {
   electrodes: Electrode[],
   hidden: number[],
-  drag: bool,
+  drag: boolean,
   mx: number,
   my: number,
   mouseX: number,
   mouseY: number,
-  setHidden: (number[]) => void,
+  setHidden: (_: number[]) => void,
 };
 
 const EEGMontage = (
   {
     electrodes,
     hidden,
     setHidden,
-  }: Props) => {
+  }: CProps) => {
   if (electrodes.length === 0) return null;
 
   const [angleX, setAngleX] = useState(0);
@@ -52,13 +51,13 @@ const EEGMontage = (
     .rotateX(-startAngle)
     .scale(scale);
 
-  const dragStart = (v) => {
+  const dragStart = (v: any) => {
     setDrag(true);
     setMx(v[0]);
     setMy(v[1]);
   };
 
-  const dragged = (v) => {
+  const dragged = (v: any) => {
     if (!drag) return;
     const beta = (v[0] - mx + mouseX) * -2 * Math.PI;
     const alpha = (v[1] - my + mouseY) * -2 * Math.PI;
@@ -70,7 +69,7 @@ const EEGMontage = (
     setAngleZ(angleZ);
   };
 
-  const dragEnd = (v) => {
+  const dragEnd = (v: any) => {
     setDrag( false);
     setMouseX( v[0] - mx + mouseX);
     setMouseY(v[1] - my + mouseY);
@@ -211,6 +210,7 @@ const EEGMontage = (
           <div style={{height: '100%', position: 'relative'}}>
             {view3D ?
               <ResponsiveViewer
+                // @ts-ignore
                 mouseMove={dragged}
                 mouseDown={dragStart}
                 mouseUp={dragEnd}
@@ -255,11 +255,11 @@ EEGMontage.defaultProps = {
 };
 
 export default connect(
-  (state) => ({
+  (state: RootState) => ({
     hidden: state.montage.hidden,
     electrodes: state.montage.electrodes,
   }),
-  (dispatch: any => void) => ({
+  (dispatch: (_: any) => void) => ({
     setHidden: R.compose(
       dispatch,
       setHidden,