From 75c10c12f52afeafccc521595f87d0d71ac170b1 Mon Sep 17 00:00:00 2001
From: Laetitia Fesselier <laetitia.fesselier@mail.mcgill.ca>
Date: Tue, 1 Jun 2021 14:21:23 -0400
Subject: [PATCH] Flow -> TypeScript conversion

---
 babel.config.js                               |  1 -
 .../jsx/react-series-data-viewer/.flowconfig  | 15 -----
 .../jsx/react-series-data-viewer/README.md    |  2 +-
 .../jsx/react-series-data-viewer/package.json |  9 +--
 .../src/ajax/index.js                         | 23 -------
 .../src/ajax/index.tsx                        | 23 +++++++
 .../src/chunks/{index.js => index.tsx}        |  1 -
 .../src/color/{index.js => index.tsx}         |  2 -
 ...esProvider.js => EEGLabSeriesProvider.tsx} | 30 ++++++---
 .../{AnnotationForm.js => AnnotationForm.tsx} | 44 ++++++++-----
 .../series/components/{Axis.js => Axis.tsx}   | 10 ++-
 .../{EEGMontage.js => EEGMontage.tsx}         | 26 ++++----
 .../series/components/{Epoch.js => Epoch.tsx} |  9 ++-
 .../{EventManager.js => EventManager.tsx}     | 23 ++++---
 .../{IntervalSelect.js => IntervalSelect.tsx} | 35 +++++-----
 .../{LineChunk.js => LineChunk.tsx}           | 14 ++--
 ...sponsiveViewer.js => ResponsiveViewer.tsx} | 28 ++++----
 .../{SeriesCursor.js => SeriesCursor.tsx}     | 14 ++--
 .../{SeriesRenderer.js => SeriesRenderer.tsx} | 66 +++++++++----------
 .../{components.js => components.tsx}         |  0
 .../src/series/store/{index.js => index.tsx}  |  4 +-
 .../logic/{dragBounds.js => dragBounds.tsx}   |  8 +--
 .../logic/{fetchChunks.js => fetchChunks.tsx} | 25 ++++---
 .../{filterEpochs.js => filterEpochs.tsx}     | 10 ++-
 .../logic/{highLowPass.js => highLowPass.tsx} | 12 ++--
 .../logic/{pagination.js => pagination.tsx}   | 10 ++-
 ...scaleAmplitudes.js => scaleAmplitudes.tsx} |  9 ++-
 .../{timeSelection.js => timeSelection.tsx}   | 10 +--
 .../store/state/{bounds.js => bounds.tsx}     | 12 ++--
 .../store/state/{channel.js => channel.tsx}   |  6 +-
 .../store/state/{cursor.js => cursor.tsx}     |  8 +--
 .../store/state/{dataset.js => dataset.tsx}   | 14 ++--
 .../store/state/{filters.js => filters.tsx}   | 16 ++---
 .../store/state/{montage.js => montage.tsx}   |  6 +-
 .../state/{rightPanel.js => rightPanel.tsx}   |  6 +-
 .../{timeSelection.js => timeSelection.tsx}   |  8 +--
 .../src/series/store/{types.js => types.tsx}  |  8 +--
 .../src/vector/{index.js => index.tsx}        |  4 +-
 .../php/models/electrophysiofile.class.inc    | 60 +++++++++++------
 .../php/sessions.class.inc                    | 32 +++++----
 .../php/split_data.class.inc                  | 12 ++--
 package.json                                  |  3 +-
 tsconfig.json                                 | 20 ++++++
 webpack.config.js                             |  9 ++-
 44 files changed, 349 insertions(+), 338 deletions(-)
 delete mode 100644 modules/electrophysiology_browser/jsx/react-series-data-viewer/.flowconfig
 delete mode 100644 modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.js
 create mode 100644 modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.tsx
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/{index.js => index.tsx} (98%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/{index.js => index.tsx} (98%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/{EEGLabSeriesProvider.js => EEGLabSeriesProvider.tsx} (89%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{AnnotationForm.js => AnnotationForm.tsx} (83%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{Axis.js => Axis.tsx} (90%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{EEGMontage.js => EEGMontage.tsx} (94%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{Epoch.js => Epoch.tsx} (84%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{EventManager.js => EventManager.tsx} (89%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{IntervalSelect.js => IntervalSelect.tsx} (85%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{LineChunk.js => LineChunk.tsx} (90%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{ResponsiveViewer.js => ResponsiveViewer.tsx} (82%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{SeriesCursor.js => SeriesCursor.tsx} (96%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{SeriesRenderer.js => SeriesRenderer.tsx} (93%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/{components.js => components.tsx} (100%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/{index.js => index.tsx} (97%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{dragBounds.js => dragBounds.tsx} (91%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{fetchChunks.js => fetchChunks.tsx} (90%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{filterEpochs.js => filterEpochs.tsx} (90%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{highLowPass.js => highLowPass.tsx} (92%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{pagination.js => pagination.tsx} (87%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{scaleAmplitudes.js => scaleAmplitudes.tsx} (85%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/{timeSelection.js => timeSelection.tsx} (94%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{bounds.js => bounds.tsx} (84%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{channel.js => channel.tsx} (89%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{cursor.js => cursor.tsx} (77%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{dataset.js => dataset.tsx} (92%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{filters.js => filters.tsx} (78%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{montage.js => montage.tsx} (88%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{rightPanel.js => rightPanel.tsx} (80%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/{timeSelection.js => timeSelection.tsx} (77%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/{types.js => types.tsx} (84%)
 rename modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/{index.js => index.tsx} (82%)
 create mode 100644 tsconfig.json

diff --git a/babel.config.js b/babel.config.js
index 3df220b14a5..6e76911457a 100644
--- a/babel.config.js
+++ b/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"
   ];
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/.flowconfig b/modules/electrophysiology_browser/jsx/react-series-data-viewer/.flowconfig
deleted file mode 100644
index ca078320be1..00000000000
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/.flowconfig
+++ /dev/null
@@ -1,15 +0,0 @@
-[ignore]
-<PROJECT_ROOT>/node_modules/npm/
-
-[include]
-../../../../jsx
-
-[libs]
-
-[lints]
-
-[options]
-react.runtime=automatic
-module.name_mapper='^jsx' -> '<PROJECT_ROOT>/../../../../jsx/'
-
-[strict]
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/README.md b/modules/electrophysiology_browser/jsx/react-series-data-viewer/README.md
index 3736f710e73..3fdb76869e6 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/README.md
+++ b/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)
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/package.json b/modules/electrophysiology_browser/jsx/react-series-data-viewer/package.json
index c5428d87369..ce869505d17 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/package.json
+++ b/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",
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.js
deleted file mode 100644
index 35ba2acde27..00000000000
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const fetchBlob = (...args) =>
-  fetch(...args).then((response) => {
-    if (!response.ok) {
-      return new Promise(() => {});
-    }
-    return response.blob().then((data) => data);
-  });
-
-export const fetchJSON = (...args) =>
-  fetch(...args).then((response) => {
-    if (!response.ok) {
-      return new Promise(() => {});
-    }
-    return response.json().then((data) => data);
-  });
-
-export const fetchText = (...args) =>
-  fetch(...args).then((response) => {
-    if (!response.ok) {
-      return new Promise(() => {});
-    }
-    return response.text().then((data) => data);
-  });
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/ajax/index.tsx
new file mode 100644
index 00000000000..021f6a76f5d
--- /dev/null
+++ b/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);
+  });
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.tsx
similarity index 98%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.tsx
index 9005ebd88e2..465b6dd3976 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/chunks/index.js
+++ b/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';
 
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx
similarity index 98%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx
index c0d7ee7f4c3..1f2027139d8 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.js
+++ b/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';
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
similarity index 89%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
index bff25a0c5f6..a8316b47419 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.js
+++ b/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;
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
similarity index 83%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
index 8bb432663ec..cce1762d5b1 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.js
+++ b/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,
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.tsx
similarity index 90%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.tsx
index ac1b9b6590a..82a569f2ae3 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Axis.js
+++ b/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);
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.tsx
similarity index 94%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.tsx
index 11f051e00d5..cb053df941b 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EEGMontage.tsx
@@ -1,24 +1,23 @@
-// @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 = (
@@ -26,7 +25,7 @@ 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,
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.tsx
similarity index 84%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.tsx
index 6c323b36cbf..3ea2c4c60ea 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Epoch.tsx
@@ -1,13 +1,12 @@
-// @flow
-
 import {vec2} from 'gl-matrix';
 import {MIN_EPOCH_WIDTH} from '../../vector';
+import {ScaleLinear} from 'd3-scale';
 
-type Props = {
+type CProps = {
   parentHeight: number,
   onset: number,
   duration: number,
-  scales: [any, any],
+  scales: [ScaleLinear<number, number, never>, ScaleLinear<number, number, never>],
   color: string,
   opacity: number,
 };
@@ -20,7 +19,7 @@ const Epoch = (
     scales,
     color,
     opacity,
-  }: Props) => {
+  }: CProps) => {
   const start = vec2.fromValues(
     scales[0](onset),
     scales[1](-parentHeight/2),
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.tsx
similarity index 89%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.tsx
index e3f30b13c6a..a3f5c0da2a0 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/EventManager.tsx
@@ -1,21 +1,20 @@
-// @flow
-
 import React from 'react';
-import type {Epoch as EpochType, RightPanel} from '../store/types';
+import {Epoch as EpochType, RightPanel} from '../store/types';
 import {connect} 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],
 };
 
@@ -27,7 +26,7 @@ const EventManager = ({
   toggleEpoch,
   updateActiveEpoch,
   interval,
-}: Props) => {
+}: CProps) => {
   return (
     <div className="panel panel-primary event-list">
       <div
@@ -116,13 +115,13 @@ EventManager.defaultProps = {
 };
 
 export default connect(
-  (state)=> ({
+  (state: RootState)=> ({
     timeSelection: state.timeSelection,
     epochs: state.dataset.epochs,
     filteredEpochs: state.dataset.filteredEpochs,
     interval: state.bounds.interval,
   }),
-  (dispatch: (any) => void) => ({
+  (dispatch: (_: any) => void) => ({
     setTimeSelection: R.compose(
       dispatch,
       setTimeSelection
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.tsx
similarity index 85%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.tsx
index d9b5b7d1e35..7c38dfdb799 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/IntervalSelect.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {connect} from 'react-redux';
 import {
@@ -11,20 +9,21 @@ import {setInterval} from '../store/state/bounds';
 import {updateFilteredEpochs} from '../store/logic/filterEpochs';
 import {Slider, Rail, Handles, Ticks} from 'react-compound-slider';
 import {Handle, Tick} from './components';
-import React, {useState} from 'react';
+import React, {useState, FunctionComponent} from 'react';
+import {RootState} from '../store';
 
-type Props = {
-  viewerHeight: number,
+type CProps = {
+  viewerHeight?: number,
   domain: [number, number],
   interval: [number, number],
-  setInterval: [number, number] => void,
-  dragStart: number => void,
-  dragContinue: number => void,
-  dragEnd: number => void,
-  updateFilteredEpochs: void => void,
+  setInterval: (_: [number, number]) => void,
+  dragStart: (_: [number, number]) => void,
+  dragContinue: (_: [number, number]) => void,
+  dragEnd: (_: [number, number]) => void,
+  updateFilteredEpochs: (_: void) => void,
 };
 
-const IntervalSelect = ({
+const IntervalSelect: FunctionComponent<CProps> = ({
   viewerHeight,
   domain,
   interval,
@@ -33,7 +32,7 @@ const IntervalSelect = ({
   dragContinue,
   dragEnd,
   updateFilteredEpochs,
-}: Props) => {
+}) => {
   const [isDragging, setIsDragging] = useState(false);
 
   const sliderStyle = {
@@ -84,15 +83,15 @@ const IntervalSelect = ({
           values={[interval[0], interval[1]]}
           onUpdate={(values) => {
             if (!isDragging) {
-              dragStart(values);
+              dragStart([values[0], values[1]]);
               setIsDragging(true);
             } else {
-              dragContinue(values);
+              dragContinue([values[0], values[1]]);
             }
           }}
           onChange={(values) => {
-            dragStart(values);
-            dragEnd(values);
+            dragStart([values[0], values[1]]);
+            dragEnd([values[0], values[1]]);
             setIsDragging(false);
           }}
         >
@@ -155,11 +154,11 @@ IntervalSelect.defaultProps = {
 };
 
 export default connect(
-  (state) => ({
+  (state: RootState) => ({
     domain: state.bounds.domain,
     interval: state.bounds.interval,
   }),
-  (dispatch: any => void) => ({
+  (dispatch: (_: any) => void) => ({
     dragStart: R.compose(
       dispatch,
       startDragInterval
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
similarity index 90%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
index 83d9424b957..d726698c97c 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
@@ -1,10 +1,8 @@
-// @flow
-
 import * as R from 'ramda';
-import {scaleLinear} from 'd3-scale';
+import {scaleLinear, ScaleLinear} from 'd3-scale';
 import {vec2} from 'gl-matrix';
 import {colorOrder} from '../../color';
-import type {Chunk} from '../store/types';
+import {Chunk} from '../store/types';
 import {LinePath} from '@visx/shape';
 import {Group} from '@visx/group';
 
@@ -54,14 +52,14 @@ const LineMemo = R.memoizeWith(
   }
 );
 
-type Props = {
+type CProps = {
   channelIndex: number,
   traceIndex: number,
   chunkIndex: number,
   chunk: Chunk,
   seriesRange: [number, number],
   amplitudeScale: number,
-  scales: [any, any],
+  scales: [ScaleLinear<number, number, never>, ScaleLinear<number, number, never>],
   color?: string
 };
 
@@ -75,7 +73,7 @@ const LineChunk = ({
   scales,
   color,
   ...rest
-}: Props) => {
+}: CProps) => {
   const {interval, values} = chunk;
 
   if (values.length === 0) {
@@ -91,7 +89,7 @@ const LineChunk = ({
     (range[0] + range[1]) / 2
   );
 
-  const lineColor = colorOrder(channelIndex) || '#999';
+  const lineColor = colorOrder(channelIndex.toString()) || '#999';
 
   return (
     <Group
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.tsx
similarity index 82%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.tsx
index e86d49935a2..53f14d1e712 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/ResponsiveViewer.tsx
@@ -1,31 +1,27 @@
-// @flow
-
 import * as R from 'ramda';
-import React from 'react';
-import type {Node} from 'react';
+import React, { FunctionComponent, ReactNode, Children } from 'react';
 import {scaleLinear} from 'd3-scale';
 import {withParentSize} from '@visx/responsive';
-import type {Vector2} from '../../vector';
+import { WithParentSizeProps } from '@visx/responsive/lib/enhancers/withParentSizeModern';
 
-type Props = {
-  parentWidth: number,
-  parentHeight: number,
-  mouseDown: Vector2 => void,
-  mouseMove: Vector2 => void,
-  mouseUp: Vector2 => void,
-  mouseLeave: Vector2 => void,
-  children: Node
+type CProps = {
+  parentWidth?: number,
+  parentHeight?: number,
+  mouseDown?: (_: any) => void,
+  mouseMove?: (_: any) => void,
+  mouseUp?: (_: any) => void,
+  mouseLeave?: (_: any) => void
 };
 
-const ResponsiveViewer = ({
+const ResponsiveViewer : FunctionComponent<CProps> = ({
   parentWidth,
   parentHeight,
   mouseDown,
   mouseMove,
   mouseUp,
   mouseLeave,
-  children,
-}: Props) => {
+  children
+}) => {
   const provision = (layer) =>
     React.cloneElement(
       layer,
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
similarity index 96%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
index 4ac08d8fbd8..faffed62d85 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
@@ -1,13 +1,11 @@
-// @flow
-
 import * as R from 'ramda';
-import type {Node} from 'react';
 import {bisector} from 'd3-array';
 import {colorOrder} from '../../color';
-import type {Channel, Epoch} from '../store/types';
+import {Channel, Epoch} from '../store/types';
 import {connect} from 'react-redux';
 import {MAX_RENDERED_EPOCHS, SIGNAL_SCALE} from '../../vector';
 import {useEffect} from 'react';
+import {RootState} from '../store';
 
 type CursorContentProps = {
   time: number,
@@ -16,12 +14,12 @@ type CursorContentProps = {
   showMarker: boolean,
 };
 
-type Props = {
+type CProps = {
   cursor: number,
   channels: Channel[],
   epochs: Epoch[],
   filteredEpochs: number[],
-  CursorContent: CursorContentProps => Node,
+  CursorContent: (_: CursorContentProps) => JSX.Element,
   interval: [number, number],
   showMarker: boolean
 };
@@ -35,7 +33,7 @@ const SeriesCursor = (
     CursorContent,
     interval,
     showMarker,
-  }: Props
+  }: CProps
 ) => {
   if (!cursor) return null;
 
@@ -215,7 +213,7 @@ SeriesCursor.defaultProps = {
 };
 
 export default connect(
-  (state)=> ({
+  (state: RootState)=> ({
     epochs: state.dataset.epochs,
     filteredEpochs: state.dataset.filteredEpochs,
   })
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
similarity index 93%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
index 5a6ea9e1965..d6f97023ae6 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
@@ -1,12 +1,10 @@
-// @flow
-
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState, FunctionComponent} from 'react';
 import * as R from 'ramda';
 import {vec2} from 'gl-matrix';
 import {Group} from '@visx/group';
 import {connect} from 'react-redux';
-import {scaleLinear} from 'd3-scale';
-import {MAX_RENDERED_EPOCHS, MAX_CHANNELS, SIGNAL_UNIT} from '../../vector';
+import {scaleLinear, ScaleLinear} from 'd3-scale';
+import {MAX_RENDERED_EPOCHS, MAX_CHANNELS, SIGNAL_UNIT, Vector2} from '../../vector';
 import ResponsiveViewer from './ResponsiveViewer';
 import Axis from './Axis';
 import LineChunk from './LineChunk';
@@ -19,6 +17,7 @@ import {setOffsetIndex} from '../store/logic/pagination';
 import IntervalSelect from './IntervalSelect';
 import EventManager from './EventManager';
 import AnnotationForm from './AnnotationForm';
+import {RootState} from '../store';
 
 import {
   setAmplitudesScale,
@@ -40,23 +39,23 @@ import {
   startDragSelection,
 } from '../store/logic/timeSelection';
 
-import type {
+import {
   ChannelMetadata,
   Channel,
   Epoch as EpochType,
   RightPanel,
 } from '../store/types';
 
-type Props = {
+type CProps = {
   viewerWidth: number,
   viewerHeight: number,
   interval: [number, number],
   amplitudeScale: number,
   rightPanel: RightPanel,
-  cursor: ?number,
-  timeSelection: ?[number, number],
-  setCursor: (?number) => void,
-  setRightPanel: RightPanel => void,
+  cursor?: number,
+  timeSelection?: [number, number],
+  setCursor: (number) => void,
+  setRightPanel: (_: RightPanel) => void,
   channels: Channel[],
   channelMetadata: ChannelMetadata[],
   hidden: number[],
@@ -64,21 +63,21 @@ type Props = {
   filteredEpochs: number[],
   activeEpoch: number,
   offsetIndex: number,
-  setOffsetIndex: number => void,
-  setAmplitudesScale: number => void,
-  resetAmplitudesScale: void => void,
-  setLowPassFilter: string => void,
-  setHighPassFilter: string => void,
-  setViewerWidth: number => void,
-  setViewerHeight: number => void,
-  setFilteredEpochs: number[] => void,
-  dragStart: number => void,
-  dragContinue: number => void,
-  dragEnd: number => void,
+  setOffsetIndex: (_: number) => void,
+  setAmplitudesScale: (_: number) => void,
+  resetAmplitudesScale: (_: void) => void,
+  setLowPassFilter: (_: string) => void,
+  setHighPassFilter: (_: string) => void,
+  setViewerWidth: (_: number) => void,
+  setViewerHeight: (_: number) => void,
+  setFilteredEpochs: (_: number[]) => void,
+  dragStart: (_: number) => void,
+  dragContinue: (_: number) => void,
+  dragEnd: (_: number) => void,
   limit: number,
 };
 
-const SeriesRenderer = ({
+const SeriesRenderer: FunctionComponent<CProps> = ({
   viewerHeight,
   viewerWidth,
   interval,
@@ -107,7 +106,7 @@ const SeriesRenderer = ({
   dragContinue,
   dragEnd,
   limit,
-}: Props) => {
+}) => {
   if (channels.length === 0) return null;
 
   useEffect(() => {
@@ -122,8 +121,8 @@ const SeriesRenderer = ({
 
   const [highPass, setHighPass] = useState('none');
   const [lowPass, setLowPass] = useState('none');
-  const [refNode, setRefNode] = useState<?HTMLDivElement>(null);
-  const [bounds, setBounds] = useState<?ClientRect>(null);
+  const [refNode, setRefNode] = useState<HTMLDivElement>(null);
+  const [bounds, setBounds] = useState<ClientRect>(null);
   const getBounds = useCallback((domNode) => {
     if (domNode) {
       setRefNode(domNode);
@@ -147,7 +146,7 @@ const SeriesRenderer = ({
   vec2.add(center, topLeft, bottomRight);
   vec2.scale(center, center, 1 / 2);
 
-  const scales = [
+  const scales: [ScaleLinear<number, number, never>, ScaleLinear<number, number, never>] = [
     scaleLinear()
       .domain(interval)
       .range([topLeft[0], bottomRight[0]]),
@@ -285,7 +284,7 @@ const SeriesRenderer = ({
           vec2.add(axisEnd, subTopLeft, vec2.fromValues(0.1, subDiagonal[1]));
 
           const seriesRange = channelMetadata[channel.index].seriesRange;
-          const scales = [
+          const scales: [ScaleLinear<number, number, never>, ScaleLinear<number, number, never>] = [
             scaleLinear()
               .domain(interval)
               .range([subTopLeft[0], subBottomRight[0]]),
@@ -452,7 +451,7 @@ const SeriesRenderer = ({
                         type='number'
                         style={{width: '55px'}}
                         value={offsetIndex}
-                        onChange={(e) => setOffsetIndex(e.target.value)}
+                        onChange={(e) => setOffsetIndex(parseInt(e.target.value))}
                       />
                       {' '}
                       to {hardLimit} of {channelMetadata.length}
@@ -545,9 +544,9 @@ const SeriesRenderer = ({
                   />
                   <div style={{height: viewerHeight}} ref={getBounds}>
                     <ResponsiveViewer
-                      transparent={true}
+                      // @ts-ignore
                       mouseMove={R.compose(setCursor, R.nth(0))}
-                      mouseDown={(v) => {
+                      mouseDown={(v: Vector2) => {
                         document.addEventListener('mousemove', onMouseMove);
                         document.addEventListener('mouseup', onMouseUp);
                         R.compose(dragStart, R.nth(0))(v);
@@ -644,7 +643,6 @@ SeriesRenderer.defaultProps = {
   interval: [0.25, 0.75],
   amplitudeScale: 1,
   viewerHeight: 400,
-  viewerSize: [400, 400],
   channels: [],
   epochs: [],
   hidden: [],
@@ -654,7 +652,7 @@ SeriesRenderer.defaultProps = {
 };
 
 export default connect(
-  (state)=> ({
+  (state: RootState)=> ({
     viewerWidth: state.bounds.viewerWidth,
     viewerHeight: state.bounds.viewerHeight,
     interval: state.bounds.interval,
@@ -670,7 +668,7 @@ export default connect(
     channelMetadata: state.dataset.channelMetadata,
     offsetIndex: state.dataset.offsetIndex,
   }),
-  (dispatch: (any) => void) => ({
+  (dispatch: (_: any) => void) => ({
     setOffsetIndex: R.compose(
       dispatch,
       setOffsetIndex
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/components.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/components.tsx
similarity index 100%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/components.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/components.tsx
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.tsx
similarity index 97%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.tsx
index 49e1ad78312..3e5a761865d 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/index.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {combineReducers} from 'redux';
 import {combineEpics} from 'redux-observable';
@@ -73,3 +71,5 @@ export const rootEpic = combineEpics(
     return {epochs};
   }),
 );
+
+export type RootState = ReturnType<typeof rootReducer>;
\ No newline at end of file
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.tsx
similarity index 91%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.tsx
index 9a0c78cafa3..ac596cbbfd0 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/dragBounds.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {Observable, merge} from 'rxjs';
 import * as Rx from 'rxjs/operators';
@@ -8,7 +6,7 @@ import {createAction} from 'redux-actions';
 import {SET_INTERVAL, setInterval} from '../state/bounds';
 import {updateViewedChunks} from './fetchChunks';
 
-import type {
+import {
   State as BoundsState,
   Action as BoundsAction,
 } from '../state/bounds';
@@ -24,7 +22,7 @@ export const endDragInterval = createAction(END_DRAG_INTERVAL);
 
 export type Action = BoundsAction | { type: 'UPDATE_VIEWED_CHUNKS' };
 
-export const createDragBoundsEpic = (fromState: any => BoundsState) => (
+export const createDragBoundsEpic = (fromState: (any) => BoundsState) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
@@ -40,7 +38,7 @@ export const createDragBoundsEpic = (fromState: any => BoundsState) => (
 
   const endDrag$ = action$.pipe(ofType(END_DRAG_INTERVAL));
 
-  const computeNewInterval = ([selection]) => setInterval(selection);
+  const computeNewInterval = ([selection, _]) => setInterval(selection);
 
   const startUpdates$ = startDrag$.pipe(
     Rx.withLatestFrom(state$),
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
similarity index 90%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
index 454b305a82f..c964e1ea1f6 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
@@ -1,16 +1,12 @@
-// @flow
-
 import * as R from 'ramda';
 import {ofType} from 'redux-observable';
 import {Observable, from, of} from 'rxjs';
 import * as Rx from 'rxjs/operators';
 import {createAction} from 'redux-actions';
-import type {
-  State as DatasetState,
-  Action as DatasetAction,
-} from '../state/dataset';
-import type {Chunk} from '../types';
-import type {State as BoundsState} from '../state/bounds';
+import {State as DatasetState} from '../state/dataset';
+import {Filter} from '../state/filters'
+import {Chunk} from '../types';
+import {State as BoundsState} from '../state/bounds';
 import {fetchChunk} from '../../../chunks';
 import {MAX_VIEWED_CHUNKS} from '../../../vector';
 import {setActiveChannel} from '../state/dataset';
@@ -24,13 +20,14 @@ type FetchedChunks = {
   chunks: Chunk[]
 };
 
+
 export const loadChunks = ({channelIndex, ...rest}: FetchedChunks) => {
-  return (dispatch: any => void) => {
-    let filters = window.EEGLabSeriesProviderStore.getState().filters;
+  return (dispatch: (_: any) => void) => {
+    let filters: Filter[] = window.EEGLabSeriesProviderStore.getState().filters;
     rest.chunks.forEach((chunk, index, chunks) => {
       chunk.filters = [];
-      chunks[index].values = (Object.values(filters) : any).reduce(
-        (signal, filter) => {
+      chunks[index].values = Object.values(filters).reduce(
+        (signal: number[], filter: Filter) => {
           chunks[index].filters.push(filter.name);
           return filter.fn(signal);
         },
@@ -63,10 +60,10 @@ type State = {bounds: BoundsState, dataset: DatasetState};
 
 const UPDATE_DEBOUNCE_TIME = 100;
 
-export const createFetchChunksEpic = (fromState: any => State) => (
+export const createFetchChunksEpic = (fromState: (any) => State) => (
   action$: Observable<any>,
   state$: Observable<any>
-): Observable<DatasetAction> => {
+) => {
   return action$.pipe(
     ofType(UPDATE_VIEWED_CHUNKS),
     Rx.withLatestFrom(state$),
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.tsx
similarity index 90%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.tsx
index c50fec9a6e4..137211163dc 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/filterEpochs.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {Observable} from 'rxjs';
 import * as Rx from 'rxjs/operators';
@@ -17,9 +15,9 @@ export const toggleEpoch = createAction(TOGGLE_EPOCH);
 export const UPDATE_ACTIVE_EPOCH = 'UPDATE_ACTIVE_EPOCH';
 export const updateActiveEpoch = createAction(UPDATE_ACTIVE_EPOCH);
 
-export type Action = ((any) => void) => void;
+export type Action = (_: (_: any) => void) => void;
 
-export const createFilterEpochsEpic = (fromState: any => any) => (
+export const createFilterEpochsEpic = (fromState: (_: any) => any) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
@@ -46,7 +44,7 @@ export const createFilterEpochsEpic = (fromState: any => any) => (
   );
 };
 
-export const createToggleEpochEpic = (fromState: any => any) => (
+export const createToggleEpochEpic = (fromState: (_: any) => any) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
@@ -76,7 +74,7 @@ export const createToggleEpochEpic = (fromState: any => any) => (
   );
 };
 
-export const createActiveEpochEpic = (fromState: any => any) => (
+export const createActiveEpochEpic = (fromState: (_: any) => any) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.tsx
similarity index 92%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.tsx
index af370b291b7..5a391d7f427 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/highLowPass.tsx
@@ -13,7 +13,7 @@ export const setLowPassFilter = createAction(SET_LOW_PASS_FILTER);
 export const SET_HIGH_PASS_FILTER = 'SET_HIGH_PASS_FILTER';
 export const setHighPassFilter = createAction(SET_HIGH_PASS_FILTER);
 
-export type Action = ((any) => void) => void;
+export type Action = (_: (_: any) => void) => void;
 
 const applyFilter = (coefficients, input) => {
   const diffFilter = new DifferenceEquationSignal1D();
@@ -64,14 +64,14 @@ export const LOW_PASS_FILTERS = {
   },
 };
 
-export const createLowPassFilterEpic = (fromState: any => State) => (
+export const createLowPassFilterEpic = () => (
   action$: Observable<any>,
-  state$: Observable<any>
+  state$: Observable<any>,
 ): Observable<Action> => action$.pipe(
   ofType(SET_LOW_PASS_FILTER),
   Rx.map(R.prop('payload')),
   Rx.withLatestFrom(state$),
-  Rx.map(([payload]) => (dispatch) => {
+  Rx.map<[string, any], any>(([payload]) => (dispatch) => {
     dispatch(setFilter({
       key: 'lowPass',
       name: payload,
@@ -116,14 +116,14 @@ export const HIGH_PASS_FILTERS = {
   },
 };
 
-export const createHighPassFilterEpic = (fromState: any => State) => (
+export const createHighPassFilterEpic = () => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => action$.pipe(
   ofType(SET_HIGH_PASS_FILTER),
   Rx.map(R.prop('payload')),
   Rx.withLatestFrom(state$),
-  Rx.map(([payload]) => (dispatch) => {
+  Rx.map<[string, any], any>(([payload]) => (dispatch) => {
     dispatch(setFilter({
       key: 'highPass',
       name: payload,
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.tsx
similarity index 87%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.tsx
index 3b2b0c6ac93..aa19a21a8cd 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/pagination.tsx
@@ -1,11 +1,9 @@
-// @flow
-
 import * as R from 'ramda';
 import {Observable} from 'rxjs';
 import * as Rx from 'rxjs/operators';
 import {ofType} from 'redux-observable';
 import {createAction} from 'redux-actions';
-import type {Channel, ChannelMetadata} from '../types';
+import {Channel, ChannelMetadata} from '../types';
 import {
   emptyChannels,
   setDatasetMetadata,
@@ -16,7 +14,7 @@ import {updateViewedChunks} from './fetchChunks';
 export const SET_OFFSET_INDEX = 'SET_OFFSET_INDEX';
 export const setOffsetIndex = createAction(SET_OFFSET_INDEX);
 
-export type Action = ((any) => void) => void;
+export type Action = (_: (_: any) => void) => void;
 
 export type State = {
   limit: number,
@@ -24,7 +22,7 @@ export type State = {
   channels: Channel[]
 };
 
-export const createPaginationEpic = (fromState: any => State) => (
+export const createPaginationEpic = (fromState: (_: any) => State) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
@@ -32,7 +30,7 @@ export const createPaginationEpic = (fromState: any => State) => (
     ofType(SET_OFFSET_INDEX),
     Rx.map(R.prop('payload')),
     Rx.withLatestFrom(state$),
-    Rx.map(([payload, state]) => {
+    Rx.map<[number, State], any>(([payload, state]) => {
       const {limit, channelMetadata, channels} = fromState(state);
 
       const offsetIndex = Math.min(
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.tsx
similarity index 85%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.tsx
index 2e60538eb4f..a597ca9aab2 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/scaleAmplitudes.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {Observable} from 'rxjs';
 import * as Rx from 'rxjs/operators';
@@ -7,14 +5,15 @@ import {ofType} from 'redux-observable';
 import {createAction} from 'redux-actions';
 import {setAmplitudeScale} from '../state/bounds';
 import {updateViewedChunks} from './fetchChunks';
+import {State} from '../state/dataset';
 
 export const SET_AMPLITUDES_SCALE = 'SET_AMPLITUDES_SCALE';
 export const setAmplitudesScale = createAction(SET_AMPLITUDES_SCALE);
 export const RESET_AMPLITUDES_SCALE = 'RESET_AMPLITUDES_SCALE';
 export const resetAmplitudesScale = createAction(RESET_AMPLITUDES_SCALE);
-export type Action = ((any) => void) => void;
+export type Action = (_: (_: any) => void) => void;
 
-export const createScaleAmplitudesEpic = (fromState: any => number) => (
+export const createScaleAmplitudesEpic = (fromState: (_: any) => number) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
@@ -22,7 +21,7 @@ export const createScaleAmplitudesEpic = (fromState: any => number) => (
     ofType(SET_AMPLITUDES_SCALE),
     Rx.map(R.prop('payload')),
     Rx.withLatestFrom(state$),
-    Rx.map(([payload, state]) => {
+    Rx.map<[number, State], any>(([payload, state]) => {
       const scale = payload;
       const amplitudeScale = fromState(state);
 
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.tsx
similarity index 94%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.tsx
index 1d1ca590146..3f169f97cc3 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/timeSelection.tsx
@@ -1,16 +1,10 @@
-// @flow
-
 import * as R from 'ramda';
 import {Observable, merge} from 'rxjs';
 import * as Rx from 'rxjs/operators';
 import {ofType} from 'redux-observable';
 import {createAction} from 'redux-actions';
 import {setTimeSelection} from '../state/timeSelection';
-
-import type {
-  Action as BoundsAction,
-} from '../state/bounds';
-
+import {Action as BoundsAction} from '../state/bounds';
 import {MIN_INTERVAL_FACTOR} from '../../../vector';
 
 export const START_DRAG_SELECTION = 'START_DRAG_SELECTION';
@@ -24,7 +18,7 @@ export const endDragSelection = createAction(END_DRAG_SELECTION);
 
 export type Action = BoundsAction | { type: 'UPDATE_VIEWED_CHUNKS' };
 
-export const createTimeSelectionEpic = (fromState: any => any) => (
+export const createTimeSelectionEpic = (fromState: (_: any) => any) => (
   action$: Observable<any>,
   state$: Observable<any>
 ): Observable<Action> => {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.tsx
similarity index 84%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.tsx
index c981946e0a2..e71100a14ad 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/bounds.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import {createAction} from 'redux-actions';
 
 export const SET_INTERVAL = 'SET_INTERVAL';
@@ -32,35 +30,35 @@ export type State = {
   viewerHeight: number,
 };
 
-const interval = (state = [0.25, 0.75], action: ?Action): [number, number] => {
+const interval = (state: [number, number] = [0.25, 0.75], action?: Action): [number, number] => {
   if (action && action.type === 'SET_INTERVAL') {
     return action.payload;
   }
   return state;
 };
 
-const domain = (state = [0, 1], action: ?Action): [number, number] => {
+const domain = (state: [number, number] = [0, 1], action?: Action): [number, number] => {
   if (action && action.type === 'SET_DOMAIN') {
     return action.payload;
   }
   return state;
 };
 
-const amplitudeScale = (state = 1, action: ?Action): number => {
+const amplitudeScale = (state = 1, action?: Action): number => {
   if (action && action.type === 'SET_AMPLITUDE_SCALE') {
     return action.payload;
   }
   return state;
 };
 
-const viewerWidth = (state = 400, action: ?Action): number => {
+const viewerWidth = (state = 400, action?: Action): number => {
   if (action && action.type === 'SET_VIEWER_WIDTH') {
     return action.payload;
   }
   return state;
 };
 
-const viewerHeight = (state = 400, action: ?Action): number => {
+const viewerHeight = (state = 400, action?: Action): number => {
   if (action && action.type === 'SET_VIEWER_HEIGHT') {
     return action.payload;
   }
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.tsx
similarity index 89%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.tsx
index 0fdf9112ade..bc2c06eb132 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/channel.tsx
@@ -1,8 +1,6 @@
-// @flow
-
 import * as R from 'ramda';
 import {createAction} from 'redux-actions';
-import type {Channel, Chunk} from '../types';
+import {Channel, Chunk} from '../types';
 
 export const SET_CHUNKS = 'SET_CHUNKS';
 export const setChunks = createAction(SET_CHUNKS);
@@ -16,7 +14,7 @@ export type State = Channel;
 
 export const channelReducer = (
   state: Channel = {index: 0, traces: []},
-  action: ?Action
+  action?: Action
 ): State => {
   if (!action) {
     return state;
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.tsx
similarity index 77%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.tsx
index a453d04dd30..2d406b793ee 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/cursor.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import {createAction} from 'redux-actions';
 
 export const SET_CURSOR = 'SET_CURSOR';
@@ -7,12 +5,12 @@ export const setCursor = createAction(SET_CURSOR);
 
 export type Action = {
   type: "SET_CURSOR",
-  payload: ?number
+  payload?: number
 };
 
-export type State = ?number;
+export type State = number;
 
-export type Reducer = (state: ?number, action: ?Action) => State;
+export type Reducer = (state?: number, action?: Action) => State;
 
 export const cursorReducer: Reducer = (state = null, action) => {
   if (!action) {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
similarity index 92%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
index a3490c9a5a5..1a362fbc440 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
@@ -1,9 +1,7 @@
-// @flow
-
 import * as R from 'ramda';
 import {createAction} from 'redux-actions';
-import type {Channel, ChannelMetadata, Epoch} from '../types';
-import type {Action as ChannelAction} from './channel';
+import {Channel, ChannelMetadata, Epoch} from '../types';
+import {Action as ChannelAction} from './channel';
 import {channelReducer} from './channel';
 import {MAX_CHANNELS} from '../../../vector';
 
@@ -55,7 +53,8 @@ export type State = {
   filteredEpochs: number[],
   activeEpoch: number | null,
   shapes: number[][],
-  timeInterval: [number, number]
+  timeInterval: [number, number],
+  seriesRange: [number, number],
 };
 
 export const datasetReducer = (
@@ -63,7 +62,6 @@ export const datasetReducer = (
     chunksURL: '',
     channelMetadata: [],
     channels: [],
-    filteredChannels: [],
     activeChannel: null,
     epochs: [],
     filteredEpochs: [],
@@ -74,7 +72,7 @@ export const datasetReducer = (
     timeInterval: [0, 1],
     seriesRange: [-1, 2],
   },
-  action: ?Action
+  action?: Action
 ): State => {
   if (!action) {
     return state;
@@ -107,7 +105,7 @@ export const datasetReducer = (
       }
       return R.assocPath(
         ['channels', activeIndex],
-        channelReducer(state.channels[activeIndex], (action: any)),
+        channelReducer(state.channels[activeIndex], action),
         state
       );
     }
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.tsx
similarity index 78%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.tsx
index c000ea1ea7a..7fbcbdafc4a 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/filters.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from 'ramda';
 import {createAction} from 'redux-actions';
 
@@ -11,16 +9,18 @@ export type Action = {
   payload: {
     key: string,
     name: string,
-    fn: (number[]) => number[],
+    fn: (_: number[]) => number[],
   }
 };
 
+export type Filter = {
+  name: string,
+  fn: (n: number[]) => number[]
+}
+
 export const filtersReducer = (
-  state: {[key: string]: {
-    name: string,
-    fn: (number[]) => number[]
-  }} = {},
-  action: ?Action
+  state: {[key: string]: Filter} = {},
+  action?: Action
 ): any => {
   if (!action) {
     return state;
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.tsx
similarity index 88%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.tsx
index 951313dcda5..8fa3748050c 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/montage.tsx
@@ -1,8 +1,6 @@
-// @flow
-
 import * as R from 'ramda';
 import {createAction} from 'redux-actions';
-import type {Electrode} from '../types';
+import {Electrode} from '../types';
 
 export const SET_ELECTRODES = 'SET_ELECTRODES';
 export const setElectrodes = createAction(SET_ELECTRODES);
@@ -19,7 +17,7 @@ export type State = {
   hidden: number[]
 };
 
-export type Reducer = (state: State, action: ?Action) => State;
+export type Reducer = (state: State, action?: Action) => State;
 
 export const montageReducer: Reducer = (
   state = {electrodes: [], hidden: []},
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.tsx
similarity index 80%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.tsx
index 9d2ae6acee8..8f3ea261c60 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/rightPanel.tsx
@@ -1,7 +1,5 @@
-// @flow
-
 import {createAction} from 'redux-actions';
-import type {RightPanel} from '../types';
+import {RightPanel} from '../types';
 
 export const SET_RIGHT_PANEL = 'SET_RIGHT_PANEL';
 export const setRightPanel = createAction(SET_RIGHT_PANEL);
@@ -11,7 +9,7 @@ export type Action = {
   payload: RightPanel
 };
 
-export type Reducer = (state: RightPanel, action: ?Action) => RightPanel;
+export type Reducer = (state: RightPanel, action?: Action) => RightPanel;
 
 export const panelReducer: Reducer = (state = null, action) => {
   if (!action) {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.tsx
similarity index 77%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.tsx
index 20176404680..12958af2580 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/timeSelection.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 import {createAction} from 'redux-actions';
 
 export const SET_TIME_SELECTION = 'SET_TIME_SELECTION';
@@ -7,12 +5,12 @@ export const setTimeSelection = createAction(SET_TIME_SELECTION);
 
 export type Action = {
   type: "SET_TIME_SELECTION",
-  payload: ?[number, number]
+  payload?: [number, number]
 };
 
-export type State = ?[number, number];
+export type State = [number, number];
 
-export type Reducer = (state: ?[number, number], action: ?Action) => State;
+export type Reducer = (state?: [number, number], action?: Action) => State;
 
 export const timeSelectionReducer: Reducer = (state = null, action) => {
   if (!action) {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.tsx
similarity index 84%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.tsx
index 8097beb66d2..2c378859f57 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/types.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 export type Chunk = {
   index: number,
   originalValues: number[],
@@ -30,14 +28,14 @@ export type Epoch = {
   duration: number,
   type: 'Event' | 'Annotation',
   label: string,
-  comment: ?string,
+  comment?: string,
   channels: number[] | "all",
 };
 
-export type RightPanel = ?('annotationForm' | 'epochList');
+export type RightPanel = 'annotationForm' | 'epochList' | null;
 
 export type Electrode = {
   name: string,
-  channelIndex: ?number,
+  channelIndex?: number,
   position: [number, number, number],
 };
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.tsx
similarity index 82%
rename from modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.js
rename to modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.tsx
index 501a9ccddf2..88e5515f216 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/vector/index.tsx
@@ -1,10 +1,8 @@
-// @flow
-
 import {vec2, glMatrix} from 'gl-matrix';
 
 export type Vector2 = typeof glMatrix.ARRAY_TYPE;
 
-export const ap = (f: [(any) => any, (any) => any], p: Vector2): Vector2 =>
+export const ap = (f: [(_: any) => any, (_: any) => any], p: Vector2): Vector2 =>
   vec2.fromValues(f[0](p[0]), f[1](p[1]));
 
 export const MIN_INTERVAL_FACTOR = 0.005;
diff --git a/modules/electrophysiology_browser/php/models/electrophysiofile.class.inc b/modules/electrophysiology_browser/php/models/electrophysiofile.class.inc
index 562d6369bcc..9939fa897c2 100644
--- a/modules/electrophysiology_browser/php/models/electrophysiofile.class.inc
+++ b/modules/electrophysiology_browser/php/models/electrophysiofile.class.inc
@@ -24,10 +24,10 @@ namespace LORIS\electrophysiology_browser\Models;
  */
 class ElectrophysioFile implements \LORIS\Data\DataInstance
 {
-    private $_fileData        = [];
-    private $_parameters      = [];
-    private $_chunksURLs      = [];
-    private $_splitFileIDs    = [];
+    private $_fileData     = [];
+    private $_parameters   = [];
+    private $_chunksURLs   = [];
+    private $_splitFileIDs = [];
 
     /**
      * Construct a BIDSFile
@@ -80,11 +80,19 @@ class ElectrophysioFile implements \LORIS\Data\DataInstance
          * set or override a few parameters
          */
 
-        $query               = "SELECT PhysiologicalFileID
+        $query        = "SELECT PhysiologicalFileID
                                 FROM `physiological_file`
                                 WHERE ParentID=:PFID
                                 ORDER BY `Index`";
-        $this->_splitFileIDs = $db->pselectCol($query, ['PFID' => $physiologicalFileID]);
+        $splitFileIDs = $db->pselectCol(
+            $query,
+            ['PFID' => $physiologicalFileID]
+        );
+
+        $this->_splitFileIDs = array_combine(
+            array_map('intval', array_keys($splitFileIDs)),
+            array_values($splitFileIDs)
+        );
 
         if (count($this->_splitFileIDs) > 0) {
             $this->_fileData['SplitCount'] = strval(count($this->_splitFileIDs));
@@ -93,7 +101,9 @@ class ElectrophysioFile implements \LORIS\Data\DataInstance
             $query = "SELECT SUM(ppf.Value)
                     FROM physiological_parameter_file as ppf
                       LEFT JOIN parameter_type as pt USING (ParameterTypeID)
-                    WHERE PhysiologicalFileID IN (" . join($this->_splitFileIDs, ',') . ")
+                    WHERE PhysiologicalFileID IN ("
+                    . join(',', $this->_splitFileIDs)
+                    . ")
                       AND pt.Name = 'RecordingDuration'";
             $this->_parameters['RecordingDuration'] = $db->pselectOne($query, []);
 
@@ -101,18 +111,23 @@ class ElectrophysioFile implements \LORIS\Data\DataInstance
             $query = "SELECT ppf.Value
                     FROM physiological_parameter_file as ppf
                       LEFT JOIN parameter_type as pt USING (ParameterTypeID)
-                    WHERE PhysiologicalFileID IN (" . join($this->_splitFileIDs, ',') . ")
+                    WHERE PhysiologicalFileID IN ("
+                    . join(',', $this->_splitFileIDs)
+                    . ")
                       AND pt.Name = 'electrophyiology_chunked_dataset_path'";
             $this->_chunksURLs = $db->pselectCol($query, []);
         } else {
-          $this->_fileData['SplitCount'] = 'n/a';
+            $this->_fileData['SplitCount'] = 'n/a';
 
-          $query = "SELECT ppf.Value
+            $query = "SELECT ppf.Value
                     FROM physiological_parameter_file as ppf
                       LEFT JOIN parameter_type as pt USING (ParameterTypeID)
                     WHERE PhysiologicalFileID=:PFID
                       AND pt.Name = 'electrophyiology_chunked_dataset_path'";
-          $this->_chunksURLs = $db->pselectCol($query, ['PFID' => $physiologicalFileID]);
+            $this->_chunksURLs = $db->pselectCol(
+                $query,
+                ['PFID' => $physiologicalFileID]
+            );
         }
     }
 
@@ -136,25 +151,30 @@ class ElectrophysioFile implements \LORIS\Data\DataInstance
      */
     function getChunksURLs() : array
     {
-      return $this->_chunksURLs;
+        return $this->_chunksURLs;
     }
 
     /**
      * Gets the split data for this file
-     * 
+     *
      * @param int $index The split index
      *
-     * @return array The split data
+     * @return ?array The split data
      */
     function getSplitData(int $index) : ?array
     {
-      if (count($this->_splitFileIDs) === 0) return null;
+        if (count($this->_splitFileIDs) === 0) {
+
+            return null;
+        }
 
-      return [
-        'splitIndex'      => $index,
-        'splitCount'      => intval($this->_fileData['SplitCount']),
-        'splitPhysioFile' => new ElectrophysioFile(intval($this->_splitFileIDs[$index])),
-      ];
+        return [
+            'splitIndex'      => $index,
+            'splitCount'      => intval($this->_fileData['SplitCount']),
+            'splitPhysioFile' => new ElectrophysioFile(
+                intval($this->_splitFileIDs[$index])
+            ),
+        ];
     }
 
     /**
diff --git a/modules/electrophysiology_browser/php/sessions.class.inc b/modules/electrophysiology_browser/php/sessions.class.inc
index 812ae268851..aa6c29855e3 100644
--- a/modules/electrophysiology_browser/php/sessions.class.inc
+++ b/modules/electrophysiology_browser/php/sessions.class.inc
@@ -455,7 +455,7 @@ class Sessions extends \NDB_Page
 
         // get the links to the files for downloads
 
-        $fileSummary['downloads']  = $this->getDownloadLinks($physioFileObj);
+        $fileSummary['downloads']   = $this->getDownloadLinks($physioFileObj);
         $fileSummary['chunks_urls'] = $physioFileObj->getChunksURLs();
 
         $fileSummary['splitData'] = $physioFileObj->getSplitData(0);
@@ -473,10 +473,9 @@ class Sessions extends \NDB_Page
      */
     function getDownloadlinks(ElectrophysioFile $physioFile): array
     {
-        $nSplit         = intval($physioFile->getParameter('SplitCount'));
-        $physioFileName = basename($physioFile->getParameter('FilePath'));
-        $downloadLinks  = [];
-            
+        $nSplit        = intval($physioFile->getParameter('SplitCount'));
+        $downloadLinks = [];
+
         if ($nSplit === 0) {
             $downloadLinks[] = [
                 'groupName' => '',
@@ -484,12 +483,18 @@ class Sessions extends \NDB_Page
             ];
         } else {
             foreach (range(0, $nSplit-1) as $i) {
-                $splitData       = $physioFile->getSplitData($i);
+                $splitData = $physioFile->getSplitData($i);
+                if (is_null($splitData)) {
+                    continue;
+                }
+
                 $splitPhysioFile = $splitData['splitPhysioFile'];
-                
+
                 $downloadLinks[] = [
                     'groupName' => 'Split '.($i+1),
-                    'links'     => $this->getPhysioFileDownloadlinks($splitPhysioFile),
+                    'links'     => $this->getPhysioFileDownloadlinks(
+                        $splitPhysioFile
+                    ),
                 ];
             }
         }
@@ -497,8 +502,8 @@ class Sessions extends \NDB_Page
     }
 
     /**
-     * Gets the download link for the files associated to a particular electrophysiology
-     * file (channels.tsv, electrodes.tsv, task events.tsv...)
+     * Gets the download link for the files associated to a particular
+     * electrophysiology file (channels.tsv, electrodes.tsv, task events.tsv...)
      *
      * @param ElectrophysioFile $physioFileObj ElectrophysiologyFile instance
      *
@@ -511,7 +516,7 @@ class Sessions extends \NDB_Page
         $physioFile    = $physioFileObj->getParameter('FilePath');
         $db            = \NDB_Factory::singleton()->database();
         $downloadLinks = [];
-        
+
         $downloadLinks[] = [
             'type'  => 'physiological_file',
             'file'  => $physioFile,
@@ -541,7 +546,10 @@ class Sessions extends \NDB_Page
                             $query_key
                             WHERE
                             PhysiologicalFileID=:PFID";
-            $query_statement = $db->pselectRow($query_statement, ['PFID' => $physioFileID]);
+            $query_statement = $db->pselectRow(
+                $query_statement,
+                ['PFID' => $physioFileID]
+            );
             if (isset($query_statement['FileType'])) {
                 $downloadLinks[] = [
                     'type'  => $query_statement['FileType'],
diff --git a/modules/electrophysiology_browser/php/split_data.class.inc b/modules/electrophysiology_browser/php/split_data.class.inc
index 675e333cb61..529fc7d5d66 100644
--- a/modules/electrophysiology_browser/php/split_data.class.inc
+++ b/modules/electrophysiology_browser/php/split_data.class.inc
@@ -28,20 +28,22 @@ class Split_Data extends \NDB_Page
     public function handle(ServerRequestInterface $request): ResponseInterface
     {
         $user = \NDB_Factory::singleton()->user();
-        
+
         switch ($request->getMethod()) {
         case 'POST':
             if (!($user->hasPermission('electrophysiology_browser_view_allsites')
-            || ($user->hasPermission('electrophysiology_browser_view_site')
-                && $user->hasStudySite()))) {
+                || ($user->hasPermission('electrophysiology_browser_view_site')
+                && $user->hasStudySite()))
+            ) {
                 return (new \LORIS\Http\Response\JSON\Unauthorized());
             }
 
             // Parse POST request body.
             $values = (array)$request->getParsedBody();
-            
+
             if (!isset($values['physioFileID'])
-               || !isset($values['splitIndex'])) {
+                || !isset($values['splitIndex'])
+            ) {
                 return (new \LORIS\Http\Response\JSON\BadRequest());
             }
 
diff --git a/package.json b/package.json
index c3539e813bd..88cab86dc52 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.6.3",
-    "@babel/preset-flow": "^7.12.1",
     "alex": ">=8.0.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
@@ -40,6 +39,8 @@
     "eslint-webpack-plugin": "2.1.0",
     "style-loader": "^1.1.3",
     "terser-webpack-plugin": "^1.3.0",
+    "ts-loader": "^8.3.0",
+    "typescript": "^3.0.1",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.0"
   },
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000000..c02925e9a01
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es6",
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*", "jsx/*"]
+    },
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "lib": [
+      "es6", "dom", "es2017"
+    ],
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index ab0ba88bbcb..858526361a9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,20 +42,19 @@ const resolve = {
     TriggerableModal: path.resolve(__dirname, './jsx/TriggerableModal'),
     Card: path.resolve(__dirname, './jsx/Card'),
   },
-  extensions: ['*', '.js', '.jsx', '.json'],
+  extensions: ['*', '.js', '.jsx', '.json', '.ts', '.tsx'],
 };
 
 const mod = {
   rules: [
     {
-      test: /\.(js|jsx)$/,
+      test: /\.(jsx?|tsx?)$/,
       exclude: /node_modules/,
       use: [
         {
           loader: 'babel-loader?cacheDirectory',
         },
       ],
-      enforce: 'pre',
     },
     {
       test: /\.css$/,
@@ -64,6 +63,10 @@ const mod = {
         'css-loader',
       ],
     },
+    {
+      test: /\.tsx?$/,
+      loader: 'ts-loader',
+    },
   ],
 };