[EEG Browser] Addition of new changes to signal plot of electrophysiology_browser module from EEGNet

modules/electrophysiology_browser/css/electrophysiology_browser.css

@@ -42,6 +42,10 @@ svg {
   user-select: none;
 }
 
+svg:not(:root) {
+  overflow: clip;
+}
+
 .list-group-item {
   position: relative;
   display: flex;
@@ -97,6 +101,26 @@ svg {
   border: 1px solid #333;
 }
 
+.input-interval-bound {
+  width: 60px;
+  height: 22px;
+  font-size: 10px;
+  float: left;
+  text-align: center;
+}
+
+.btn-zoom {
+  margin: 0 auto 3px auto;
+  width: 50px;
+  text-align: center;
+}
+
+.col-xs-title {
+  color: #064785;
+  font-weight: bold;
+  text-align: center;
+}
+
 #electrode-montage .list-group {
   border: 1px solid #ddd;
 }
@@ -135,6 +159,14 @@ svg {
   height: auto !important;
 }
 
+#eegSessionView .panel-heading > div > i {
+  cursor: pointer;
+}
+
+#eegSessionView .panel-heading > div > i:hover {
+  scale: 1.05;
+}
+
 #eegSidebar {
   top: 0;
   bottom: 0;
@@ -187,10 +219,10 @@ svg {
 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {
   .pull-right-lg {
-    float: right;
+    text-align: right;
   }
 
   .pagination-nav {
     padding-top: 0;
   }
-}
+}

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

@@ -9,7 +9,6 @@ To enable the visualization components, set the `useEEGBrowserVisualizationCompo
 
 
 ## Main dependencies
-
 - [Ramda](https://ramdajs.com)
 A practical functional library for JavaScript programmers.
 
@@ -35,29 +34,58 @@ To install the Protocol Buffers Compiler (protoc), run:
 
 The EEG Browser visualization component adds support for some useful visual helpers: The **Signal Viewer** and the **Electrode Map**.
 
-![Overall View](./../../images/overall-view.png)
+![Overall View](https://images.loris.ca/eeg-browser/overall-view.png)
 
 ### Signal Viewer
-![Signal Viewer](./../../images/signal-values-details.png) <br/><br/>
+![Signal Viewer](https://images.loris.ca/eeg-browser/signal-values-details.png) <br/><br/>
 Several tools can be used to navigate through the Signal Viewer:
- - The **Timeline Range View** (1) can be used to change the boundaries of the viewed timeline.
- - The **Amplitude** and **Filter** tools (2) can be used to increase/reduce the amplitude scale and apply high or low-pass filters.
- - The **Channel navigation** (3) can be used to navigate through the viewed channels.
- - The **Event Panel** (4) can be used to display information about the events when event data is available.
- - If the selected timeline range contains more than 100 events, a message (5) indicates the user to reduce the boundaries of the timeline in order to display the event data.
+ - The **Zoom Controls** (1) can be used to increase or reduce the time interval while maintaining the same midpoint.
+   - *Reset*: Set 'zoom' level to default value (5 second interval).
+   - *+ / -*: Zoom in or out, respectively.
+   - *Region*: This button becomes available when a region is highlighted on the plot (left-click drag). Pressing it sets the time interval to the selected region.
+ - The **Timeline Range View** (2) can be used to change the boundaries of the viewed timeline.
+   - *[<] / [>]*: These arrows translate the interval bounds backwards or forwards, respectively, by 1 second.
+   - *[<<] / [>>]*: These arrows translate the interval bounds backwards or forwards, respectively, by the value of the interval.
+   - *Text fields*: The text fields can be edited to manually set the interval.
+   - *Sliders*: The sliders can be dragged as an alternative way to set the interval range.
+ - The **Amplitude** and **Filter** tools and the **Show/Hide Overflow** button (3) can be used to increase/reduce the amplitude scale, apply high or low-pass filters, or toggle the visibility of signal spillage, respectively.
+ - The **Channel Navigation** (4) toolbar can be used to navigate through the viewed channels.
+   - *Dropdown*: This dropdown allow to change the number of displayed channels. Currently supported values are: 4, 8 16, 32 or 64 visible channels.
+   - *Text field*: This can be used to manually set the starting index of the displayed channels.
+   - *[<] / [>]*: These arrows translate the visible channel range backwards or forwards, respectively, by 1 channel.
+   - *[<<] / [>>]*: These arrows translate the visible channel range backwards or forwards, respectively, by the number of displayed channel.
+ - The **Channel Adjustment** (5) buttons can be used to vertically adjust the position of the signals.
+   - *DC/NO Offset*: This button toggles the subtraction of DC offset from the signals, used to center them with respect to their assigned row.
+   - *Stack/Spread*: This button toggles the channels from being in their assigned row to being all stacked on the same row. [[Stacked View Demo](#stacked-view)]
+ - The **Event Panel** (6) can be used to display information about the events when event data is available.
+   - If the selected timeline range contains more than 500 events, a message inside the panel indicates the user to reduce the boundaries of the timeline in order to display the event data.
 <br/><br/>
-<p align="center">
-  <img width="650" src="./../../images/signal-values.png"/><br/>
-  <sub>Signal Viewer with signal values and event data displayed.</sub>
+<p style="text-align: center;">
+  <img width src="https://images.loris.ca/eeg-browser/signal-values.png"/><br/>
+  <sub>Signal Viewer with hovered signal value and event data displayed.</sub>
 </p>
 
+
+### Stacked View
+Hovering channel names while in 'stacked' or 'spread (default)' view will thicken the respective signal(s). While in stacked view, a feature called "Isolate" becomes available. [[Isolate Mode Demo](#isolate-mode)]
+<br/><br/>![Stacked View](https://images.loris.ca/eeg-browser/signal-stacked.png) <br/>
+
+
+### Isolate Mode
+Hovering channel names while in 'isolate' mode will make that signal the only visible signal on the plot.
+<br/><br/>![Isolate Mode](https://images.loris.ca/eeg-browser/signal-isolated.png) <br/>
+
+
 ### Electrode Map 
 The current implementation of the Electrode Map supports 2 display modes: 2D and 3D.
 
 | 2D View | 3D View |
 |:-------------------------:|:-------------------------:|
-|<img width="300" src="./../../images/electrodes-2d-hover.png"/><br/> The 2D view is a stereographic projection of the electrodes position. Electrodes are indexed and their name is displayed on mouse hover.  | <img width="300" src="./../../images/electrodes-3d.png" /><br/> The 3D view displays the exact position of the electrodes on the brain. |
+|<img width="300" src="https://images.loris.ca/eeg-browser/electrodes-2d-hover.png"/><br/> The 2D view is a stereographic projection of the electrodes position. Electrodes are indexed and their name is 
+displayed on mouse hover.  | <img width="300" src="https://images.loris.ca/eeg-browser/electrodes-3d.png" /><br/> The 3D view displays the exact position of the electrodes on the brain. |
+
 
 ### Future developements to come
+A signal annotation feature is currently under development.
+
 
-A signal annotation feature is currently under development. 

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

@@ -1,12 +1,10 @@
+import * as R from 'ramda';
 import {scaleOrdinal} from 'd3-scale';
+import {schemeDark2, schemeCategory10} from 'd3-scale-chromatic';
 
-// import * as R from 'ramda';
-// import {schemeCategory10, schemeSet3} from 'd3-scale-chromatic';
-// export const colorOrder = scaleOrdinal(
-//   R.concat(schemeCategory10, schemeSet3)
-// );
-
-export const colorOrder = scaleOrdinal();
+export const colorOrder = scaleOrdinal(
+  R.concat(schemeDark2, schemeCategory10)
+);
 
 /**
  * hex2rgba

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

@@ -6,7 +6,7 @@ import {createEpicMiddleware} from 'redux-observable';
 import thunk from 'redux-thunk';
 import {fetchJSON, fetchText} from '../ajax';
 import {rootReducer, rootEpic} from '../series/store';
-import {MAX_CHANNELS} from '../vector';
+import {DEFAULT_MAX_CHANNELS, DEFAULT_TIME_INTERVAL} from '../vector';
 import {
   setChannels,
   emptyChannels,
@@ -15,9 +15,9 @@ import {
   setEpochs,
   setDatasetMetadata,
   setPhysioFileID,
+  setFilteredEpochs,
 } from '../series/store/state/dataset';
 import {setDomain, setInterval} from '../series/store/state/bounds';
-import {updateFilteredEpochs} from '../series/store/logic/filterEpochs';
 import {setElectrodes} from '../series/store/state/montage';
 import {AnnotationMetadata, EventMetadata} from '../series/store/types';
 
@@ -107,11 +107,11 @@ class EEGLabSeriesProvider extends Component<CProps> {
             })
           );
           this.store.dispatch(setChannels(emptyChannels(
-              Math.min(limit, channelMetadata.length),
+              Math.min(this.props.limit, channelMetadata.length),
               1
           )));
           this.store.dispatch(setDomain(timeInterval));
-          this.store.dispatch(setInterval(timeInterval));
+          this.store.dispatch(setInterval(DEFAULT_TIME_INTERVAL));
         }
       }).then(() => {
         return events.instances.map((instance) => {
@@ -160,7 +160,7 @@ class EEGLabSeriesProvider extends Component<CProps> {
             })
           )
         );
-        this.store.dispatch(updateFilteredEpochs());
+        this.store.dispatch(setFilteredEpochs(epochs.map((_, index) => index)));
       })
     ;
 
@@ -199,7 +199,7 @@ class EEGLabSeriesProvider extends Component<CProps> {
   }
 
   static defaultProps = {
-    limit: MAX_CHANNELS,
+    limit: DEFAULT_MAX_CHANNELS,
   };
 }
 

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

@@ -29,6 +29,7 @@ type CProps = {
   toggleEpoch: (_: number) => void,
   updateActiveEpoch: (_: number) => void,
   interval: [number, number],
+  domain: [number, number],
 };
 
 /**
@@ -43,7 +44,12 @@ type CProps = {
  * @param root0.setCurrentAnnotation
  * @param root0.physioFileID
  * @param root0.annotationMetadata
+ * @param root0.toggleEpoch,
+ * @param root0.updateActiveEpoch,
  * @param root0.interval
+ * @param root0.domain
+ * @param root0.toggleEpoch
+ * @param root0.updateActiveEpoch
  */
 const AnnotationForm = ({
   timeSelection,
@@ -55,10 +61,18 @@ const AnnotationForm = ({
   setCurrentAnnotation,
   physioFileID,
   annotationMetadata,
+  toggleEpoch,
+  updateActiveEpoch,
   interval,
+  domain,
 }: CProps) => {
   const [startEvent = '', endEvent = ''] = timeSelection || [];
-  const [event, setEvent] = useState([startEvent, endEvent]);
+  const [event, setEvent] = useState<(number | string)[]>(
+    [
+      startEvent,
+      endEvent,
+    ]
+  );
   const [label, setLabel] = useState(
     currentAnnotation ?
     currentAnnotation.label :
@@ -97,13 +111,14 @@ const AnnotationForm = ({
    * @param val
    */
   const handleStartTimeChange = (id, val) => {
-    const value = parseInt(val);
+    const value = parseFloat(val);
     setEvent([value, event[1]]);
 
     if (validate([value, event[1]])) {
       let endTime = event[1];
+
       if (typeof endTime === 'string') {
-        endTime = parseInt(endTime);
+        endTime = parseFloat(endTime);
       }
       setTimeSelection(
         [
@@ -120,13 +135,14 @@ const AnnotationForm = ({
    * @param val
    */
   const handleEndTimeChange = (name, val) => {
-    const value = parseInt(val);
+    const value = parseFloat(val);
     setEvent([event[0], value]);
 
     if (validate([event[0], value])) {
       let startTime = event[0];
+
       if (typeof startTime === 'string') {
-        startTime = parseInt(startTime);
+        startTime = parseFloat(startTime);
       }
       setTimeSelection(
         [
@@ -203,10 +219,10 @@ const AnnotationForm = ({
     let startTime = event[0];
     let endTime = event[1];
     if (typeof startTime === 'string') {
-      startTime = parseInt(startTime);
+      startTime = parseFloat(startTime);
     }
     if (typeof endTime === 'string') {
-      endTime = parseInt(endTime);
+      endTime = parseFloat(endTime);
     }
     const duration = endTime - startTime;
 
@@ -399,20 +415,34 @@ const AnnotationForm = ({
           <NumericElement
             name="start-time"
             id="start-time"
-            min="0"
+            min={0}
+            max={Math.max(0, domain[1])}
             label="Start Time"
-            value={event[0]}
+            value={event
+              ? Math.min(
+                parseFloat(event[0] ? event[0].toString() : '0'),
+                parseFloat(event[1] ? event[1].toString() : '0')
+              ).toString()
+              : ''
+            }
             required={true}
             onUserInput={handleStartTimeChange}
           />
           <NumericElement
-              name="end-time"
-              id="end-time"
-              min="0"
-              label="End Time"
-              value={event[1]}
-              required={true}
-              onUserInput={handleEndTimeChange}
+            name="end-time"
+            id="end-time"
+            min={0}
+            max={Math.max(0, domain[1])}
+            label="End Time"
+            value={event
+              ? Math.max(
+                parseFloat(event[0] ? event[0].toString() : '0'),
+                parseFloat(event[1] ? event[1].toString() : '0')
+              ).toString()
+              : ''
+            }
+            required={true}
+            onUserInput={handleEndTimeChange}
           />
           <SelectElement
             name="label"
@@ -432,7 +462,7 @@ const AnnotationForm = ({
           />
           <button
             type="submit"
-            disabled={isSubmitted}
+            disabled={isSubmitted || !validate(event)}
             onClick={handleSubmit}
             className="btn btn-primary btn-xs"
           >
@@ -482,6 +512,7 @@ export default connect(
     filteredEpochs: state.dataset.filteredEpochs,
     currentAnnotation: state.currentAnnotation,
     interval: state.bounds.interval,
+    domain: state.bounds.domain,
   }),
   (dispatch: (any) => void) => ({
     setTimeSelection: R.compose(

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

@@ -2,6 +2,7 @@ import {scaleLinear} from 'd3-scale';
 import {Axis as VxAxis} from '@visx/axis';
 
 type CProps = {
+  top: number,
   orientation: 'top' | 'right' | 'bottom' | 'left',
   domain: [number, number],
   range: [number, number],
@@ -23,6 +24,7 @@ type CProps = {
  * @param root0.hideLine
  */
 const Axis = ({
+  top,
   orientation,
   domain,
   range,
@@ -40,6 +42,7 @@ const Axis = ({
 
   return (
     <VxAxis
+      top={top}
       scale={scale}
       orientation={orientation}
       tickValues={tickValues}
@@ -51,6 +54,7 @@ const Axis = ({
 };
 
 Axis.defaultProps = {
+  top: 0,
   orientation: 'bottom',
   domain: [0, 1],
   ticks: 10,