updateActiveEpoch(epochIndex)}
+ onMouseLeave={() => updateActiveEpoch(null)}
>
- {epoch.label}
- {Math.round(epoch.onset * 1000) / 1000}
- {epoch.duration > 0
- && ' - '
- + (Math.round((epoch.onset + epoch.duration) * 1000) / 1000)
- }
-
-
- {epoch.type === 'Annotation' &&
+
+ {epoch.label}
+
+ {Math.round(epoch.onset * 1000) / 1000}
+ {epoch.duration > 0
+ && ' - '
+ + (Math.round((epoch.onset + epoch.duration) * 1000) / 1000)
+ }
+
+
+ {(epoch.properties.length > 0) &&
+
+ }
- }
-
- {(epoch.comment || epoch.hed) &&
-
- }
+ {epoch.type === 'Event' &&
+
+ }
+
- {visibleComments.includes(index) &&
+ {epoch.properties.length > 0 &&
- {epoch.type == 'Annotation' && epoch.comment &&
-
Comment: {epoch.comment}
- }
- {epoch.type == 'Event' && epoch.hed &&
-
HED: {epoch.hed}
+ {epoch.properties.length > 0 &&
+
Additional Columns:
+ {
+ epoch.properties.map((property) =>
+ `${property.PropertyName}: ${property.PropertyValue}`
+ ).join(', ')
+ }
+
}
}
@@ -304,7 +310,10 @@ const EventManager = ({
EventManager.defaultProps = {
timeSelection: null,
epochs: [],
- filteredEpochs: [],
+ filteredEpochs: {
+ plotVisibility: [],
+ columnVisibility: [],
+ },
};
export default connect(
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Form.js b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Form.js
index 882a3a2a55a..4ce71e7e8eb 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Form.js
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/Form.js
@@ -327,37 +327,39 @@ export const TextboxElement = (props) => {
}
props.onUserInput(props.id, value);
};
+
+ const {disabled, required} = props;
+ let requiredHTML = required ?
* : null;
+ let errorMessage = null;
+ let elementClass = 'row form-group';
+
/**
* Renders the React component.
*
* @return {JSX} - React markup for component.
*/
return (
- <>
+
);
};
TextboxElement.defaultProps = {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
index 89eb142b90f..9df9c957b39 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesCursor.tsx
@@ -180,7 +180,7 @@ const SeriesCursor = (
*
*/
const EpochMarker = () => {
- const visibleEpochs = getEpochsInRange(epochs, interval, 'Event');
+ const visibleEpochs = getEpochsInRange(epochs, interval);
if (visibleEpochs
.filter((index) => {
filteredEpochs.includes(index);
@@ -310,6 +310,6 @@ export default connect(
(state: RootState)=> ({
cursorPosition: state.cursor.cursorPosition,
epochs: state.dataset.epochs,
- filteredEpochs: state.dataset.filteredEpochs,
+ filteredEpochs: state.dataset.filteredEpochs.plotVisibility,
})
)(SeriesCursor);
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 73436fb5bd4..fce1b0e1083 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
@@ -17,6 +17,7 @@ import {
DEFAULT_MAX_CHANNELS,
CHANNEL_DISPLAY_OPTIONS,
SIGNAL_UNIT,
+ Vector2,
DEFAULT_TIME_INTERVAL,
STATIC_SERIES_RANGE,
DEFAULT_VIEWER_HEIGHT,
@@ -28,7 +29,7 @@ import LineChunk from './LineChunk';
import Epoch from './Epoch';
import SeriesCursor from './SeriesCursor';
import {setRightPanel} from '../store/state/rightPanel';
-import {setFilteredEpochs, setDatasetMetadata} from '../store/state/dataset';
+import {setDatasetMetadata} from '../store/state/dataset';
import {setOffsetIndex} from '../store/logic/pagination';
import IntervalSelect from './IntervalSelect';
import EventManager from './EventManager';
@@ -61,7 +62,6 @@ import {
Channel,
Epoch as EpochType,
RightPanel,
- AnnotationMetadata,
} from '../store/types';
import {setCurrentAnnotation} from '../store/state/currentAnnotation';
import {setCursorInteraction} from '../store/logic/cursorInteraction';
@@ -79,6 +79,7 @@ type CProps = {
timeSelection?: [number, number],
setCursor: (number) => void,
setRightPanel: (_: RightPanel) => void,
+ chunksURL: string,
channels: Channel[],
channelMetadata: ChannelMetadata[],
hidden: number[],
@@ -93,7 +94,6 @@ type CProps = {
setHighPassFilter: (_: string) => void,
setViewerWidth: (_: number) => void,
setViewerHeight: (_: number) => void,
- setFilteredEpochs: (_: number[]) => void,
setDatasetMetadata: (_: { limit: number }) => void,
dragStart: (_: number) => void,
dragContinue: (_: number) => void,
@@ -102,9 +102,8 @@ type CProps = {
setInterval: (_: [number, number]) => void,
setCurrentAnnotation: (_: EpochType) => void,
physioFileID: number,
- annotationMetadata: AnnotationMetadata,
hoveredChannels: number[],
- setHoveredChannels: (_: number[]) => void,
+ setHoveredChannels: (_: number[]) => void,
};
/**
@@ -120,6 +119,7 @@ type CProps = {
* @param root0.timeSelection
* @param root0.setCursor
* @param root0.setRightPanel
+ * @param root0.chunksURL
* @param root0.channels
* @param root0.channelMetadata
* @param root0.hidden
@@ -134,7 +134,6 @@ type CProps = {
* @param root0.setHighPassFilter
* @param root0.setViewerWidth
* @param root0.setViewerHeight
- * @param root0.setFilteredEpochs
* @param root0.setDatasetMetadata
* @param root0.dragStart
* @param root0.dragContinue
@@ -142,47 +141,70 @@ type CProps = {
* @param root0.limit
* @param root0.setCurrentAnnotation
* @param root0.physioFileID
- * @param root0.annotationMetadata
* @param root0.hoveredChannels
* @param root0.setHoveredChannels
*/
const SeriesRenderer: FunctionComponent
= ({
- viewerHeight,
- viewerWidth,
- interval,
- setInterval,
- domain,
- amplitudeScale,
- rightPanel,
- timeSelection,
- setCursor,
- setRightPanel,
- channels,
- channelMetadata,
- hidden,
- epochs,
- filteredEpochs,
- activeEpoch,
- offsetIndex,
- setOffsetIndex,
- setAmplitudesScale,
- resetAmplitudesScale,
- setLowPassFilter,
- setHighPassFilter,
- setViewerWidth,
- setViewerHeight,
- setFilteredEpochs,
- setDatasetMetadata,
- dragStart,
- dragContinue,
- dragEnd,
- limit,
- setCurrentAnnotation,
- physioFileID,
- annotationMetadata,
- hoveredChannels,
- setHoveredChannels,
+ viewerHeight,
+ viewerWidth,
+ interval,
+ setInterval,
+ domain,
+ amplitudeScale,
+ rightPanel,
+ timeSelection,
+ setCursor,
+ setRightPanel,
+ chunksURL,
+ channels,
+ channelMetadata,
+ hidden,
+ epochs,
+ filteredEpochs,
+ activeEpoch,
+ offsetIndex,
+ setOffsetIndex,
+ setAmplitudesScale,
+ resetAmplitudesScale,
+ setLowPassFilter,
+ setHighPassFilter,
+ setViewerWidth,
+ setViewerHeight,
+ setDatasetMetadata,
+ dragStart,
+ dragContinue,
+ dragEnd,
+ limit,
+ setCurrentAnnotation,
+ physioFileID,
+ hoveredChannels,
+ setHoveredChannels,
}) => {
+ if (channels.length === 0) return null;
+
+ const [
+ numDisplayedChannels,
+ setNumDisplayedChannels,
+ ] = useState(DEFAULT_MAX_CHANNELS);
+ const [cursorEnabled, setCursorEnabled] = useState(false);
+ const toggleCursor = () => setCursorEnabled((value) => !value);
+ const [DCOffsetView, setDCOffsetView] = useState(true);
+ const toggleDCOffsetView = () => setDCOffsetView((value) => !value);
+ const [stackedView, setStackedView] = useState(false);
+ const toggleStackedView = () => setStackedView((value) => !value);
+ const [singleMode, setSingleMode] = useState(false);
+ const toggleSingleMode = () => setSingleMode((value) => !value);
+ const [showOverflow, setShowOverflow] = useState(false);
+ const toggleShowOverflow = () => setShowOverflow((value) => !value);
+ const [highPass, setHighPass] = useState('none');
+ const [lowPass, setLowPass] = useState('none');
+ const [refNode, setRefNode] = useState(null);
+ const [bounds, setBounds] = useState(null);
+ const getBounds = useCallback((domNode) => {
+ if (domNode) {
+ setRefNode(domNode);
+ }
+ }, []);
const intervalChange = Math.pow(
10,
@@ -259,18 +281,13 @@ const SeriesRenderer: FunctionComponent = ({
const viewerRef = useRef(null);
const cursorRef = useRef(null);
- // Memoized to singal which vars are to be read from
- const memoizedCallback = useCallback(null, [
- offsetIndex, interval, limit, timeSelection, amplitudeScale,
- ]);
-
useEffect(() => { // Keypress handler
/**
*
* @param e
*/
const keybindHandler = (e) => {
- if (cursorRef.current) { // Cursor is on page / focus
+ if (cursorRef.current) { // Cursor is on plot / focus
if ([
'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
].indexOf(e.code) > -1) {
@@ -321,46 +338,42 @@ const SeriesRenderer: FunctionComponent = ({
toggleSingleMode();
}
break;
+ case 'KeyC':
+ setRightPanel(null);
+ break;
+ // case 'KeyA':
+ // setRightPanel('annotationForm');
+ // break;
+ case 'KeyZ':
+ zoomToSelection();
+ break;
+ case 'KeyX':
+ zoomReset();
+ break;
+ case 'Minus':
+ zoomOut();
+ break;
+ case 'Equal': // This key combination is '+'
+ zoomIn();
+ break;
+ case 'KeyN': // Lower amplitude scale
+ setAmplitudesScale(1.1);
+ break;
+ case 'KeyM': // Increase amplitude scale
+ setAmplitudesScale(0.9);
+ break;
}
}
}
-
- // Generic keybinds that don't require focus
- if (e.shiftKey) {
- switch (e.code) {
- case 'KeyC':
- setRightPanel(null);
- break;
- case 'KeyA':
- setRightPanel('annotationForm');
- break;
- case 'KeyZ':
- zoomToSelection();
- break;
- case 'KeyX':
- zoomReset();
- break;
- case 'Minus':
- zoomOut();
- break;
- case 'Equal': // This key combination is '+'
- zoomIn();
- break;
- case 'KeyN': // Lower amplitude scale
- setAmplitudesScale(1.1);
- break;
- case 'KeyM': // Increase amplitude scale
- setAmplitudesScale(0.9);
- break;
- }
- }
};
window.addEventListener('keydown', keybindHandler);
return function cleanUp() { // Prevent multiple listeners
window.removeEventListener('keydown', keybindHandler);
};
- }, [memoizedCallback]);
+ }, [
+ offsetIndex, interval, limit, timeSelection, amplitudeScale, stackedView
+ ]);
useEffect(() => {
setViewerHeight(viewerHeight);
@@ -416,30 +429,6 @@ const SeriesRenderer: FunctionComponent = ({
prevHoveredChannels.current = hoveredChannels;
}, [hoveredChannels]);
- const [
- numDisplayedChannels,
- setNumDisplayedChannels,
- ] = useState(DEFAULT_MAX_CHANNELS);
- const [cursorEnabled, setCursorEnabled] = useState(false);
- const toggleCursor = () => setCursorEnabled((value) => !value);
- const [DCOffsetView, setDCOffsetView] = useState(true);
- const toggleDCOffsetView = () => setDCOffsetView((value) => !value);
- const [stackedView, setStackedView] = useState(false);
- const toggleStackedView = () => setStackedView((value) => !value);
- const [singleMode, setSingleMode] = useState(false);
- const toggleSingleMode = () => setSingleMode((value) => !value);
- const [showOverflow, setShowOverflow] = useState(false);
- const toggleShowOverflow = () => setShowOverflow((value) => !value);
- const [highPass, setHighPass] = useState('none');
- const [lowPass, setLowPass] = useState('none');
- const [refNode, setRefNode] = useState(null);
- const [bounds, setBounds] = useState(null);
- const getBounds = useCallback((domNode) => {
- if (domNode) {
- setRefNode(domNode);
- }
- }, []);
-
const topLeft = vec2.fromValues(
-viewerWidth/2,
viewerHeight/2
@@ -458,8 +447,8 @@ const SeriesRenderer: FunctionComponent = ({
vec2.scale(center, center, 1 / 2);
const scales: [
- ScaleLinear,
- ScaleLinear
+ ScaleLinear,
+ ScaleLinear
] = [
scaleLinear()
.domain(interval)
@@ -502,32 +491,24 @@ const SeriesRenderer: FunctionComponent = ({
);
};
- /**
- *
- */
const EpochsLayer = () => {
- const epochType = rightPanel === 'eventList'
- ? 'Event'
- : rightPanel === 'annotationList'
- ? 'Annotation'
- : null
- ;
- const visibleEpochs = getEpochsInRange(epochs, interval, epochType);
+ const visibleEpochs = rightPanel ? getEpochsInRange(epochs, interval) : [];
const minEpochWidth = (interval[1] - interval[0]) *
MIN_EPOCH_WIDTH / DEFAULT_TIME_INTERVAL[1];
return (
{
- visibleEpochs.length < MAX_RENDERED_EPOCHS &&
+ visibleEpochs.length < MAX_RENDERED_EPOCHS &&
visibleEpochs.map((index) => {
return filteredEpochs.includes(index) && (
= ({
}
{timeSelection &&
= ({
{
channelList.map((channel, i) => {
- if (!channelMetadata[channel.index]) {
- return null;
- }
- const subTopLeft = vec2.create();
- vec2.add(
- subTopLeft,
- topLeft,
- vec2.fromValues(
- 0,
- stackedView && !singleMode
- ? (numDisplayedChannels - 2) *
+ if (!channelMetadata[channel.index]) {
+ return null;
+ }
+ const subTopLeft = vec2.create();
+ vec2.add(
+ subTopLeft,
+ topLeft,
+ vec2.fromValues(
+ 0,
+ stackedView && !singleMode
+ ? (numDisplayedChannels - 2) *
diagonal[1] / (2 * numDisplayedChannels)
- : (i * diagonal[1]) / numDisplayedChannels
- )
- );
+ : (i * diagonal[1]) / numDisplayedChannels
+ )
+ );
- const subBottomRight = vec2.create();
- vec2.add(
- subBottomRight,
- topLeft,
- vec2.fromValues(
- diagonal[0],
- stackedView && !singleMode
- ? (numDisplayedChannels + 2) *
+ const subBottomRight = vec2.create();
+ vec2.add(
+ subBottomRight,
+ topLeft,
+ vec2.fromValues(
+ diagonal[0],
+ stackedView && !singleMode
+ ? (numDisplayedChannels + 2) *
diagonal[1] / (2 * numDisplayedChannels)
- : ((i + 1) * diagonal[1]) / numDisplayedChannels
- )
- );
-
- const subDiagonal = vec2.create();
- vec2.sub(subDiagonal, subBottomRight, subTopLeft);
+ : ((i + 1) * diagonal[1]) / numDisplayedChannels
+ )
+ );
- const axisEnd = vec2.create();
- vec2.add(axisEnd, subTopLeft, vec2.fromValues(0.1, subDiagonal[1]));
+ const subDiagonal = vec2.create();
+ vec2.sub(subDiagonal, subBottomRight, subTopLeft);
+
+ const axisEnd = vec2.create();
+ vec2.add(axisEnd, subTopLeft, vec2.fromValues(0.1, subDiagonal[1]));
+
+ return (
+ channel.traces.map((trace, j) => {
+ const numChunks = trace.chunks.filter(
+ (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();
- return (
- channel.traces.map((trace, j) => {
- const numChunks = trace.chunks.filter(
- (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 (valuesInView.length === 0) {
+ return;
}
- 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();
- if (valuesInView.length === 0) {
- return;
- }
-
- const seriesRange: [number, number] = STATIC_SERIES_RANGE;
-
- const scales: [
- ScaleLinear,
- ScaleLinear
- ] = [
- scaleLinear()
- .domain(interval)
- .range([subTopLeft[0], subBottomRight[0]]),
- scaleLinear()
- .domain(seriesRange)
- .range(
- stackedView
- ? [
- -viewerHeight / (2 * numDisplayedChannels),
- viewerHeight / (2 * numDisplayedChannels),
- ]
- : [subTopLeft[1], subBottomRight[1]]
- ),
- ];
-
- const scaleByAmplitude = scaleLinear()
- .domain(seriesRange.map((x) => x * amplitudeScale))
- .range([-0.5, 0.5]);
-
- /**
- *
- * @param values
- */
- const getScaledMean = (values) => {
- let numValues = values.length;
- return values.reduce((a, b) => {
+ const seriesRange: [number, number] = STATIC_SERIES_RANGE;
+
+ const scales: [
+ ScaleLinear,
+ ScaleLinear
+ ] = [
+ scaleLinear()
+ .domain(interval)
+ .range([subTopLeft[0], subBottomRight[0]]),
+ scaleLinear()
+ .domain(seriesRange)
+ .range(
+ stackedView
+ ? [
+ -viewerHeight / (2 * numDisplayedChannels),
+ viewerHeight / (2 * numDisplayedChannels),
+ ]
+ : [subTopLeft[1], subBottomRight[1]]
+ ),
+ ];
+
+ const scaleByAmplitude = scaleLinear()
+ .domain(seriesRange.map((x) => x * amplitudeScale))
+ .range([-0.5, 0.5]);
+
+ /**
+ *
+ * @param values
+ */
+ const getScaledMean = (values) => {
+ let numValues = values.length;
+ return values.reduce((a, b) => {
if (isNaN(b)) {
numValues--;
return a;
}
- return a + scaleByAmplitude(b);
- }, 0) / numValues;
- };
+ return a + scaleByAmplitude(b);
+ }, 0) / numValues;
+ };
- const DCOffset = DCOffsetView
- ? getScaledMean(valuesInView)
- : 0;
+ const DCOffset = DCOffsetView
+ ? getScaledMean(valuesInView)
+ : 0;
- return (
- trace.chunks.map((chunk, k, chunks) => (
+ return (
+ trace.chunks.map((chunk, k, chunks) => (
= ({
: chunks[k - 1].values.slice(-1)[0]
}
/>
- ))
- );
- })
- );
- })}
+ ))
+ );
+ })
+ );
+ })}
);
};
@@ -808,23 +789,6 @@ const SeriesRenderer: FunctionComponent = ({
);
};
- const updateCursorCallback = useCallback((cursor: [number, number]) => {
- setCursor({
- cursorPosition: [cursor[0], cursor[1]],
- viewerRef: viewerRef,
- });
- }, []);
-
- /**
- *
- * @param v
- */
- const updateTimeSelectionCallback = useCallback((v: vec2) => {
- document.addEventListener('mousemove', onMouseMove);
- document.addEventListener('mouseup', onMouseUp);
- R.compose(dragStart, R.nth(0))(v);
- }, [bounds]);
-
/**
*
* @param channelIndex
@@ -892,7 +856,7 @@ const SeriesRenderer: FunctionComponent = ({
className='btn btn-primary btn-xs btn-zoom'
onClick={zoomToSelection}
disabled={!selectionCanBeZoomedTo}
- value='Region'
+ value='Fit to Window'
/>