>>,
+}) => {
+ const {t} = useTranslation();
+
+ // Toggle the visibility of a channel type.
+ const toggleChannelType = useCallback((channelTypeName: string) => {
+ setChannelTypes((channelTypes) => {
+ const channelType = channelTypes[channelTypeName];
+ return ({
+ ...channelTypes,
+ [channelTypeName]: {
+ ...channelType,
+ visible: !channelType.visible,
+ },
+ });
+ });
+ }, [setChannelTypes]);
+
+ return (
+
+
+
+
- {channelName}: {Math.round(chunkValue)} {SIGNAL_UNIT}
+ {channelName}: {value} {unit}
);
})}
@@ -267,7 +269,7 @@ const computeValue = (chunk, time) => {
const idx = bisectTime(indices, time);
const value = chunk.values[idx-1];
- return value * SIGNAL_SCALE;
+ return value;
};
/**
@@ -290,6 +292,8 @@ const CursorContent = (
channelMetadata,
}: CursorContentProps
) => {
+ const rawUnit = getChannelUnit(useChannelInfo(channel));
+ const unit = normalizeUnit(rawUnit);
return (
{channel.traces.map((trace, i) => {
@@ -313,7 +317,7 @@ const CursorContent = (
}}
>
{channelMetadata[channel.index].name}:
- {chunk && Math.round(computeValue(chunk, time))} {SIGNAL_UNIT}
+ {chunk && normalizeValueUnit(computeValue(chunk, time), unit)} {unit}
);
})}
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
index 39b6ba5e91..8d7a28065a 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx
@@ -5,6 +5,8 @@ import React, {
useRef,
FunctionComponent,
MutableRefObject,
+ useMemo,
+ useContext,
} from 'react';
import * as R from 'ramda';
import {vec2} from 'gl-matrix';
@@ -16,11 +18,9 @@ import {colorOrder} from '../../color';
import {
MAX_RENDERED_EPOCHS,
DEFAULT_MAX_CHANNELS,
- CHANNEL_DISPLAY_OPTIONS,
- SIGNAL_UNIT,
+ DEFAULT_SIGNAL_UNIT,
Vector2,
DEFAULT_TIME_INTERVAL,
- STATIC_SERIES_RANGE,
DEFAULT_VIEWER_HEIGHT,
MIN_EPOCH_WIDTH,
} from '../../vector';
@@ -32,11 +32,12 @@ import SeriesCursor from './SeriesCursor';
import LoadingBar from './LoadingBar';
import {setRightPanel} from '../store/state/rightPanel';
import {setDatasetMetadata} from '../store/state/dataset';
-import {setOffsetIndex} from '../store/logic/pagination';
+import {createChannelTypesDict, filterDisplayedChannels, filterSelectedChannels, findBidsChannel} from '../store/logic/channels';
import IntervalSelect from './IntervalSelect';
import EventManager from './EventManager';
import AnnotationForm from './AnnotationForm';
import {RootState} from '../store';
+import {createAction} from 'redux-actions';
import {
setAmplitudesScale,
@@ -60,10 +61,10 @@ import {
} from '../store/logic/timeSelection';
import {
- ChannelMetadata,
Channel,
Epoch as EpochType,
RightPanel, EpochFilter,
+ Trace,
} from '../store/types';
import {setCurrentAnnotation} from '../store/state/currentAnnotation';
import {setCursorInteraction} from '../store/logic/cursorInteraction';
@@ -72,6 +73,62 @@ import {getEpochsInRange, updateActiveEpoch} from '../store/logic/filterEpochs';
import HEDEndorsement from "./HEDEndorsement";
import {setTimeSelection} from "../store/state/timeSelection";
import {useTranslation} from "react-i18next";
+import ChannelTypesSelector from './ChannelTypesSelector';
+import Pagination from './Pagination';
+import {SET_CHANNELS} from '../store/state/channels';
+import {UPDATE_VIEWED_CHUNKS} from '../store/logic/fetchChunks';
+import {ChannelInfosContext, ChannelMetasContext} from '../../eeglab/EEGLabSeriesProvider';
+import {computePercentileRange, computeMean} from '../../utils';
+import MutableKeyDepCache from '../../MutableDepCache';
+
+/**
+ * The state of a channel type.
+ */
+export type ChannelTypeState = {
+ visible: boolean,
+ channelsCount: number,
+};
+
+/**
+ * The specific cache type used to cache channel ranges.
+ */
+type ChannelRangeCache = MutableKeyDepCache<
+ // The channel index.
+ number,
+ // The dependencies upon which the range depends.
+ ChannelRangeCacheDeps,
+ // The computed range.
+ [number, number]
+>
+
+/**
+ * The dependencies upon which a channel range depends.
+ */
+type ChannelRangeCacheDeps = {
+ interval: [number, number],
+ chunkIds: number[],
+}
+
+/**
+ * Check whethere two channel range cache dependencies are equal.
+ */
+function compareChannelRangeDeps(a: ChannelRangeCacheDeps, b: ChannelRangeCacheDeps): boolean {
+ if (a.interval[0] !== b.interval[0] || a.interval[1] !== b.interval[1]) {
+ return false;
+ }
+
+ if (a.chunkIds.length !== b.chunkIds.length) {
+ return false;
+ }
+
+ for (let i = 0; i < a.chunkIds.length; i += 1) {
+ if (a.chunkIds[i] !== b.chunkIds[i]) {
+ return false;
+ }
+ }
+
+ return true;
+}
type CProps = {
ref: MutableRefObject,
@@ -86,13 +143,10 @@ type CProps = {
setRightPanel: (_: RightPanel | void) => void,
chunksURL: string,
channels: Channel[],
- channelMetadata: ChannelMetadata[],
hidden: number[],
epochs: EpochType[],
filteredEpochs: EpochFilter,
activeEpoch: number,
- offsetIndex: number,
- setOffsetIndex: (_: number) => void,
setAmplitudesScale: (_: number) => void,
resetAmplitudesScale: (_: void) => void,
setLowPassFilter: (_: string) => void,
@@ -130,13 +184,10 @@ const SeriesRenderer: FunctionComponent = ({
setRightPanel,
chunksURL,
channels,
- channelMetadata,
hidden,
epochs,
filteredEpochs,
activeEpoch,
- offsetIndex,
- setOffsetIndex,
setAmplitudesScale,
resetAmplitudesScale,
setLowPassFilter,
@@ -160,6 +211,11 @@ const SeriesRenderer: FunctionComponent = ({
numDisplayedChannels,
setNumDisplayedChannels,
] = useState(DEFAULT_MAX_CHANNELS);
+
+ // The channel types are indexed by channel type name.
+ const [channelTypes, setChannelTypes] = useState>({});
+ const channelMetadata = useContext(ChannelMetasContext);
+
const [cursorEnabled, setCursorEnabled] = useState(false);
const toggleCursor = () => setCursorEnabled((value) => !value);
const [DCOffsetView, setDCOffsetView] = useState(true);
@@ -174,6 +230,7 @@ const SeriesRenderer: FunctionComponent = ({
const [lowPass, setLowPass] = useState('none');
const [refNode, setRefNode] = useState(null);
const [bounds, setBounds] = useState(null);
+ const [offsetIndex, setOffsetIndex] = useState(1);
const getBounds = useCallback((domNode) => {
if (domNode) {
setRefNode(domNode);
@@ -185,6 +242,13 @@ const SeriesRenderer: FunctionComponent = ({
const [eventChannels, setEventChannels] = useState([]);
const {t} = useTranslation();
+ const bidsChannels = useContext(ChannelInfosContext);
+
+ // Initialize the channel types mapping once channels information is loaded.
+ useEffect(() => {
+ setChannelTypes(createChannelTypesDict(channelMetadata, bidsChannels));
+ }, [channelMetadata, bidsChannels]);
+
window.onbeforeunload = function() {
if (panelIsDirty) {
return t(
@@ -297,6 +361,49 @@ const SeriesRenderer: FunctionComponent = ({
const viewerRef = useRef(null);
const cursorRef = useRef(null);
+ // Selected channels are all the channels that should be currently available in the viewer,
+ // including those not currently displayed because of pagination.
+ const selectedChannels = useMemo(() => (
+ filterSelectedChannels(channelMetadata, bidsChannels, channelTypes)
+ ), [bidsChannels, channelMetadata, channelTypes]);
+
+ // Indexes of the selected channel indexes for comparison with previous renders.
+ const selectedChannelIndexes = JSON.stringify(selectedChannels.map((channel) => channel.index));
+
+ // Displayed channels are all the selected channels that are currently displayed on screen.
+ channels = useMemo(() => (
+ filterDisplayedChannels(selectedChannels, offsetIndex, limit, channels)
+ ), [bidsChannels, selectedChannelIndexes, offsetIndex, limit, channels]);
+
+ // Indexes of the displayed channel indexes for comparison with previous renders.
+ const displayedChannelIndexes = JSON.stringify(channels.map((channel) => channel.index));
+
+ // Hack to update the global store whenever displayed channels are updated.
+ useEffect(() => {
+ const store = window.EEGLabSeriesProviderStore[chunksURL];
+ if (store === undefined) {
+ return;
+ }
+
+ store.dispatch(createAction(SET_CHANNELS)(channels));
+ store.dispatch(createAction(UPDATE_VIEWED_CHUNKS)());
+ }, [displayedChannelIndexes]);
+
+ const filteredChannels = channels.filter((_, i) => !hidden.includes(i));
+
+ // Function used to update the pagination offset index, with checks to prevent invalid indexes.
+ const updateOffsetIndex = useCallback((newOffsetIndex: number) => {
+ if (
+ isNaN(newOffsetIndex)
+ || newOffsetIndex < 1
+ || newOffsetIndex > selectedChannels.length - limit + 1
+ ) {
+ return;
+ }
+
+ setOffsetIndex(newOffsetIndex);
+ }, [selectedChannels.length, limit]);
+
useEffect(() => { // Keypress handler
/**
*
@@ -317,10 +424,10 @@ const SeriesRenderer: FunctionComponent = ({
const intervalSize = interval[1] - interval[0];
switch (e.code) {
case 'ArrowUp':
- setOffsetIndex(offsetIndex - limit);
+ updateOffsetIndex(offsetIndex - limit);
break;
case 'ArrowDown':
- setOffsetIndex(offsetIndex + limit);
+ updateOffsetIndex(offsetIndex + limit);
break;
case 'ArrowRight':
setInterval([
@@ -514,6 +621,11 @@ const SeriesRenderer: FunctionComponent = ({
vec2.add(center, topLeft, bottomRight);
vec2.scale(center, center, 1 / 2);
+ // A mutable cache for the visible range of the values each channel.
+ const channelRangeCache: MutableRefObject = useRef(
+ new MutableKeyDepCache(compareChannelRangeDeps)
+ );
+
const scales: [
ScaleLinear,
ScaleLinear
@@ -526,7 +638,6 @@ const SeriesRenderer: FunctionComponent = ({
.range([topLeft[1], bottomRight[1]]),
];
- const filteredChannels = channels.filter((_, i) => !hidden.includes(i));
const showAxisScaleLines = false; // Visibility state of y-axis scale lines
/**
@@ -664,6 +775,31 @@ const SeriesRenderer: FunctionComponent = ({
)
: filteredChannels;
+ // Get the maximum range for each channel type based on the ranges of
+ // the visible values of each visible channel of that type.
+ const channelTypeRanges: Record = {};
+ channelList.forEach((channel) => {
+ const bidsChannel = findBidsChannel(channelMetadata[channel.index], bidsChannels);
+ const type = bidsChannel?.ChannelType ?? 'Unknown';
+
+ // Get the visible values range of that channel, from the cache if possible.
+ const [min, max] = channelRangeCache.current.get(
+ channel.index,
+ {
+ interval,
+ chunkIds: channel.traces.flatMap((trace) => trace.chunks.map((chunk) => chunk.index)).sort(),
+ },
+ () => {console.log("RECOMPUTE"); return getChannelVisibleRange(channel, interval) }
+ );
+
+ const range = max - min;
+ if (!channelTypeRanges[type]) {
+ channelTypeRanges[type] = range;
+ } else {
+ channelTypeRanges[type] = Math.max(channelTypeRanges[type], range);
+ }
+ });
+
return (
<>
= ({
(chunk) => chunk.values.length > 0
).length;
- const valuesInView = trace.chunks.map((chunk) => {
- let includedIndices = [0, chunk.values.length];
- if (chunk.interval[0] < interval[0]) {
- const startIndex = chunk.values.length *
- (interval[0] - chunk.interval[0]) /
- (chunk.interval[1] - chunk.interval[0]);
- includedIndices = [startIndex, includedIndices[1]];
- }
- if (chunk.interval[1] > interval[1]) {
- const endIndex = chunk.values.length *
- (interval[1] - chunk.interval[0]) /
- (chunk.interval[1] - chunk.interval[0]);
- includedIndices = [includedIndices[0], endIndex];
- }
- return chunk.values.slice(
- includedIndices[0], includedIndices[1]
- );
- }).flat();
+ const valuesInView = getTraceVisibleValues(trace, interval);
if (valuesInView.length === 0) {
return;
}
- const seriesRange: [number, number] = STATIC_SERIES_RANGE;
+ // Get the range centered on the average for channels of the same type
+ const average = computeMean(valuesInView);
+ const bidsChannel = findBidsChannel(channelMetadata[channel.index], bidsChannels);
+ const type = bidsChannel?.ChannelType ?? 'Unknown';
+ const overallRange = channelTypeRanges[type] || 0;
+ const seriesRange: [number, number] = [average - overallRange / 2, average + overallRange / 2];
const scales: [
ScaleLinear,
@@ -819,8 +943,6 @@ const SeriesRenderer: FunctionComponent = ({
);
};
- const hardLimit = Math.min(offsetIndex + limit - 1, channelMetadata.length);
-
/**
*
*/
@@ -845,13 +967,12 @@ const SeriesRenderer: FunctionComponent = ({
};
/**
- *
+ * Handle a change to the limit of the number of displayed channels.
*/
- const handleChannelChange = (e) => {
- const numChannels = parseInt(e.target.value, 10);
+ const handleChannelChange = (numChannels: number) => {
setNumDisplayedChannels(numChannels); // This one is the frontend controller
setDatasetMetadata({limit: numChannels}); // Will trigger re-render to the store
- setOffsetIndex(offsetIndex); // Will include new channels on limit increase
+ updateOffsetIndex(offsetIndex); // Will include new channels on limit increase
setViewerHeight(
numChannels > 4
? DEFAULT_VIEWER_HEIGHT
@@ -983,6 +1104,10 @@ const SeriesRenderer: FunctionComponent = ({
)
}
+