[EEG Browser] Addition of new changes to signal plot of electrophysiology_browser module from EEGNet (#8415)

This brings in the latest changes to the signal plot of the electrophysiology_browser module from the EEGNet project.

High-level list of changes
- Default display is changed to the first 5 seconds of every signal (not full recording) and 16 channels (up from 6)
- Keyboard shortcuts (legend coming soon)
- Channel hovering - clearer highlighting for a single signal
- Dynamic # of displayed channels - up to 64 channels displayed
- Fixed right-to-left interval selection
- Added text fields for time interval and interval precision increased
- List of cursor values toggle feature
- Zooming controls - including "Zoom to selected region" with 1 click/keypress
- Stacking toggle feature : to show variance across all channels on a single track
‘- Isolate’ toggle feature (highlights a single channel on-hover, when stacked)
- DC offset toggle feature : filter
- Overflow toggle feature: signals that wander outside the plot can be made visible
- Event panel improvements and behaviour consistency

Author: jeffersoncasimir

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/images/electrodes-2d-hover.png

@@ -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/images/electrodes-2d.png

@@ -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