[EEG Browser] Visualization

.eslintignore

@@ -1,9 +1,11 @@
 node_modules/*
 vendor/*
+babel.config.js
 
 # compiled js ignored since it is run on the jsx directory
 modules/*/js/*
 modules/*/js/*/*
+modules/electrophysiology_browser/jsx/react-series-data-viewer/src/protocol-buffers/chunk_pb.js
 htdocs/js/components/*
 
 # Ignore external libs

.flowconfig

@@ -0,0 +1,15 @@
+[ignore]
+<PROJECT_ROOT>/node_modules/npm/test/fixtures/config/package.json
+<PROJECT_ROOT>/node_modules/npm/node_modules/config-chain/test/broken.json
+
+[include]
+<PROJECT_ROOT>/modules/electrophysiology_browser/jsx/react-series-data-viewer/src
+
+[libs]
+
+[lints]
+
+[options]
+react.runtime=automatic
+
+[strict]

babel.config.js

@@ -0,0 +1,20 @@
+module.exports = function(api) {
+  api.cache(true);
+  const presets = [
+    "@babel/preset-flow",
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ];
+  const plugins = [
+    "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ];
+  return {
+    presets,
+    plugins
+  };
+}

modules/electrophysiology_browser/css/electrophysiology_browser.css

@@ -0,0 +1,80 @@
+.react-series-data-viewer-scoped .dropdown-menu {
+  width: calc(100% - 5px);
+}
+
+.react-series-data-viewer-scoped .dropdown-menu li {
+  margin-top: 0;
+  padding: 0 10px;
+}
+
+.react-series-data-viewer-scoped .dropdown-menu li:hover {
+  background: #eee;
+  cursor: pointer;
+  margin-top: 0;
+  width: 100%;
+}
+
+.btn.btn-xs {
+  font-size: 12px;
+}
+
+.btn-group .btn {
+  margin: 0;
+}
+
+.btn-group {
+  margin-right: 10px;
+}
+
+.btn-primary:focus:not(.active),
+.btn-primary:active:not(.active) {
+  color: #246EB6;
+  background-color: white;
+  border-color: #246EB6;
+  outline: 0;
+}
+
+.no-gutters > div {
+  padding:0;
+}
+
+svg {
+  user-select: none;
+}
+
+.annotation.list-group-item {
+  background: #fffae6;
+  border-left: 5px solid #ff6600;
+}
+
+.event-list .btn.btn-primary {
+  color: #555;
+  border: 1px solid #555;
+}
+
+.event-list .btn.btn-primary.active {
+  color: #000;
+  background-color: #ddd;
+  border: 1px solid #000;
+}
+
+.event-list .btn.btn-primary:hover {
+  color: #333;
+  background-color: #eee;
+  border: 1px solid #333;
+}
+
+#electrode-montage .list-group {
+  border: 1px solid #ddd;
+}
+
+#electrode-montage .list-group-item:first-child {
+  border-top: none;
+}
+
+#electrode-montage .list-group-item {
+  margin-bottom: 0;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}

modules/electrophysiology_browser/jsx/components/DownloadPanel.js

@@ -0,0 +1,105 @@
+/**
+ * This file contains React component for Electrophysiology module.
+ */
+import React, {Component} from 'react';
+import Panel from 'Panel';
+
+/**
+ * EEG Download Panel
+ *
+ * Display EEG files fto download
+ */
+class DownloadPanel extends Component {
+  /**
+   * @constructor
+   * @param {object} props - React Component properties
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: this.props.data,
+      labels: {
+        physiological_file: 'EEG File',
+        physiological_electrode_file: 'Electrode Info',
+        physiological_channel_file: 'Channels Info',
+        physiological_task_event_file: 'Events',
+        all_files: 'All Files',
+        physiological_fdt_file: '',
+      },
+    };
+  }
+
+  /**
+   * Renders the React component.
+   *
+   * @return {JSX} - React markup for the component
+   */
+  render() {
+    return (
+      <Panel
+        id='file-download'
+        title={'File Download'}
+      >
+        <div style={{
+          minHeight: '330px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}>
+          {this.state.data.downloads
+            .filter((download) =>
+              download.type != 'physiological_fdt_file'
+            )
+            .map((download, i) => {
+              const disabled = (download.file === '') ? true : false;
+              return (
+                <div
+                  key={i}
+                  className={'form-group row'}
+                >
+                  <div
+                    className={'col-xs-offset-3 col-xs-4'}
+                    style={{
+                      color: '#074785',
+                      fontWeight: 'bold',
+                      lineHeight: '30px',
+                      verticalAlign: 'middle',
+                    }}
+                  >{this.state.labels[download.type]}</div>
+                  {disabled
+                    ? <a
+                        className='btn disabled'
+                        style={{
+                          width: '120px',
+                          color: '#b3b3b3',
+                          cursor: 'not-allowed',
+                          borderRadius: '10px',
+                          border: '1px solid #b3b3b3',
+                        }}
+                      >Not Available</a>
+                    : <a
+                        className='btn'
+                        href={'/mri/jiv/get_file.php?file=' + download.file}
+                        target='_blank'
+                        download={this.state.data.downloads[0].file}
+                        style={{
+                          width: '120px',
+                          outline: 'none',
+                          color: '#1c4781',
+                          borderRadius: '10px',
+                          textDecoration: 'none',
+                          border: '1px solid #1c4781',
+                        }}
+                      >Download</a>
+                  }
+                </div>
+              );
+            })
+          }
+        </div>
+      </Panel>
+    );
+  }
+}
+
+export {DownloadPanel};

modules/electrophysiology_browser/jsx/components/SidebarContent.js

@@ -8,12 +8,13 @@ const styles = {
   sidebar: {
     width: 150,
     height: 'calc(100vh)',
-    backgroundColor: '#1a487e',
+    background: '#E4EBF2',
+    border: '1px solid #C3D5DB',
     fontWeight: 200,
     fontFamily: 'Helvetica, Arial, sans-serif',
   },
   sidebarLink: {
-    color: '#fff',
+    color: '#064785',
     fontSize: '16px',
     display: 'none',
     padding: '10px 0 0 30px',
@@ -36,19 +37,18 @@ const SidebarContent = (props) => {
     <div style={styles.sidebar}>
       <div style={
         {
-          color: '#fff',
+          color: '#064785',
           fontSize: '24px',
           fontWeight: 'bold',
           padding: '80px 0 0 10px',
-          backgroundColor: '#1a487e',
         }
       }>
         Navigation
       </div>
       <div style={styles.content}>
         <a id={'nav_previous'} href={props.previous} target={'_self'} style={
           {
-            color: '#fff',
+            color: '#064785',
             fontSize: '16px',
             display: 'none',
             padding: '0 0 0 10px',