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.
-
-
- Signal Viewer with signal values and event data displayed.
+
+
+ Signal Viewer with hovered signal value and event data displayed.
+
+### 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)]
+
+
+
+### Isolate Mode
+Hovering channel names while in 'isolate' mode will make that signal the only visible signal on the plot.
+
+
+
### Electrode Map
The current implementation of the Electrode Map supports 2 display modes: 2D and 3D.
| 2D View | 3D View |
|:-------------------------:|:-------------------------:|
-| The 2D view is a stereographic projection of the electrodes position. Electrodes are indexed and their name is displayed on mouse hover. | The 3D view displays the exact position of the electrodes on the brain. |
+| The 2D view is a stereographic projection of the electrodes position. Electrodes are indexed and their name is
+displayed on mouse hover. | 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.
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx
index d7aa0d79c63..072788a5946 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/color/index.tsx
+++ b/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
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
index bc1d62bebe2..ab79a11f815 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
+++ b/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 {
})
);
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 {
})
)
);
- this.store.dispatch(updateFilteredEpochs());
+ this.store.dispatch(setFilteredEpochs(epochs.map((_, index) => index)));
})
;
@@ -199,7 +199,7 @@ class EEGLabSeriesProvider extends Component {
}
static defaultProps = {
- limit: MAX_CHANNELS,
+ limit: DEFAULT_MAX_CHANNELS,
};
}
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
index c93c94a6a98..c07c0b12b25 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
+++ b/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 = ({
