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

modules/electrophysiology_browser/README.md

@@ -48,4 +48,3 @@ The visualization components require Protocol Buffers v3.0.0 or higher.
 For install instructions, you can refer to the Protocol Buffers GitHub page: https://github.com/protocolbuffers/protobuf
 
 To enable the visualization components, set the useEEGBrowserVisualizationComponents config (Configuration/GUI) to true and run `make dev` or 'npm install && npm run compile' from the loris root directory.
-

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;
@@ -96,6 +100,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;
 }
@@ -134,6 +158,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;
@@ -186,10 +218,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

@@ -1,7 +1,6 @@
 # EEG Browser Visualization
 
 ## Main dependencies
-
 - [Ramda](https://ramdajs.com)
 A practical functional library for JavaScript programmers.
 
@@ -32,24 +31,52 @@ The EEG Browser visualization component adds support for some useful visual help
 ### Signal Viewer
 ![Signal Viewer](./../../images/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="./../../images/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](./../../images/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](./../../images/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. |
 
+
 ### 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,6 +15,7 @@ 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';
@@ -107,11 +108,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 +161,7 @@ class EEGLabSeriesProvider extends Component<CProps> {
             })
           )
         );
-        this.store.dispatch(updateFilteredEpochs());
+        this.store.dispatch(setFilteredEpochs(epochs.map((_, index) => index)));
       })
     ;
 
@@ -199,7 +200,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

@@ -43,7 +43,11 @@ type CProps = {
  * @param root0.setCurrentAnnotation
  * @param root0.physioFileID
  * @param root0.annotationMetadata
+ * @param root0.toggleEpoch,
+ * @param root0.updateActiveEpoch,
  * @param root0.interval
+ * @param root0.toggleEpoch
+ * @param root0.updateActiveEpoch
  */
 const AnnotationForm = ({
   timeSelection,
@@ -55,10 +59,17 @@ const AnnotationForm = ({
   setCurrentAnnotation,
   physioFileID,
   annotationMetadata,
+  toggleEpoch,
+  updateActiveEpoch,
   interval,
 }: 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 +108,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 +132,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 +216,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;
 
@@ -401,18 +414,30 @@ const AnnotationForm = ({
             id="start-time"
             min="0"
             label="Start Time"
-            value={event[0]}
+            value={event
+              ? Math.min(
+                parseFloat(event[0] ? event[0].toString() : ''),
+                parseFloat(event[1] ? event[1].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"
+            label="End Time"
+            value={event
+              ? Math.max(
+                parseFloat(event[0] ? event[0].toString() : ''),
+                parseFloat(event[1] ? event[1].toString() : '')
+              )
+              : ''
+            }
+            required={true}
+            onUserInput={handleEndTimeChange}
           />
           <SelectElement
             name="label"
@@ -432,7 +457,7 @@ const AnnotationForm = ({
           />
           <button
             type="submit"
-            disabled={isSubmitted}
+            disabled={isSubmitted || !validate(event)}
             onClick={handleSubmit}
             className="btn btn-primary btn-xs"
           >

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

@@ -12,6 +12,7 @@ type CProps = {
   ],
   color: string,
   opacity: number,
+  minWidth: number,
 };
 
 /**
@@ -23,6 +24,7 @@ type CProps = {
  * @param root0.scales
  * @param root0.color
  * @param root0.opacity
+ * @param root0.minWidth
  */
 const Epoch = (
   {
@@ -32,14 +34,18 @@ const Epoch = (
     scales,
     color,
     opacity,
+    minWidth,
   }: CProps) => {
+  onset = isNaN(onset) ? 0 : onset;
+  duration = isNaN(duration) ? 0 : duration;
+
   const start = vec2.fromValues(
     scales[0](onset),
     scales[1](-parentHeight/2),
   );
 
   const end = vec2.fromValues(
-    scales[0](onset + duration) + MIN_EPOCH_WIDTH,
+    scales[0](onset + Math.max(duration, minWidth)),
     scales[1](parentHeight/2)
   );
 
@@ -62,6 +68,7 @@ const Epoch = (
 Epoch.defaultProps = {
   color: '#dae5f2',
   opacity: 1,
+  minWidth: MIN_EPOCH_WIDTH,
 };
 
 export default Epoch;