adaptative channel metadata

factorize get channel values

dynamic visible channel type range

Author: MaximeBICMTL

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

@@ -0,0 +1,41 @@
+/**
+ * A function to compare to objects of the same type.
+ */
+export type Comparator<T> = (a: T, b: T) => boolean;
+
+/**
+ * A dependency-aware key-value mutable cache.
+ *
+ * Only a single value is cached per key, when querying the cache, that value
+ * is recomputed it the dependencies of that entry have changed.
+ */
+export default class MutableKeyDepCache<K, D, V> {
+  private cache = new Map<K, {deps: D; value: V}>();
+  private comparator: Comparator<D>;
+
+  /**
+   * Create a new mutable key dependency cache with the given dependency
+   * comparator.
+   */
+  constructor(comparator: Comparator<D> = Object.is) {
+    this.comparator = comparator;
+  }
+
+  /**
+   * Query the cache for a value with the given key and dependencies.
+   */
+  get(key: K, deps: D, compute: () => V): V {
+    const entry = this.cache.get(key);
+
+    // If the key is present and its dependencies have not changed, return the
+    // existing value.
+    if (entry && this.comparator(entry.deps, deps)) {
+      return entry.value;
+    }
+
+    // Otherwise, recompute, cache, and return the new value.
+    const value = compute();
+    this.cache.set(key, {deps, value});
+    return value;
+  }
+}

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx

@@ -1,4 +1,6 @@
-import React, {Component, createRef} from 'react';
+import React, {
+  Component, createContext, createRef, useState, useEffect,
+} from 'react';
 import {tsvParse} from 'd3-dsv';
 import {applyMiddleware, createStore, Store} from 'redux';
 import {Provider} from 'react-redux';
@@ -23,7 +25,7 @@ import {
   setCoordinateSystem, setElectrodes,
 } from '../series/store/state/montage';
 import {
-  ChannelInfos, EventMetadata, HEDSchemaElement,
+  ChannelInfo, ChannelInfos, ChannelMetadata, EventMetadata, HEDSchemaElement,
 } from '../series/store/types';
 import TriggerableModal from 'jsx/TriggerableModal';
 import DatasetTagger from '../series/components/DatasetTagger';
@@ -62,16 +64,66 @@ const MenuOption = {
 };
 
 /**
- * EEGLabSeriesProvider component
+ * The channel informaton context, which provides the BIDS information about\
+ * the channels present in the acquisition, if available.
  */
-class EEGLabSeriesProvider extends Component<CProps, any> {
+export const ChannelInfosContext = createContext<ChannelInfo[]>([]);
+
+/**
+ * The channel metadata context, which provides the metadata about the channels
+ * present in the acquisition.
+ */
+export const ChannelMetasContext = createContext<ChannelMetadata[]>([]);
+
+/**
+ * Function wrapper around the older `EEGLabSeriesProviderClass` class
+ * component.
+ */
+function EEGLabSeriesProvider(props: CProps) {
+  const [channelInfos, setChannelInfos] = useState<ChannelInfo[]>([]);
+  const [channelMetas, setChannelMetas] = useState<ChannelMetadata[]>([]);
+
+  // Fetch the channel BIDS information from the API.
+  useEffect(() => {
+    fetchJSON(props.channelsURL).then((json: ChannelInfos) => {
+      setChannelInfos(json.Channels);
+    });
+  }, [props.channelsURL]);
+
+  return (
+    <ChannelInfosContext.Provider value={channelInfos}>
+      <ChannelMetasContext.Provider value={channelMetas}>
+        <EEGLabSeriesProviderClass
+          {...props}
+          setChannelMetas={setChannelMetas}
+        />
+      </ChannelMetasContext.Provider>
+    </ChannelInfosContext.Provider>
+  );
+}
+
+/**
+ * Props for the `EEGLabSeriesProviderClass` component, which extend the props
+ * of the functional component.
+ */
+type CClassProps = CProps & {
+  /**
+   * Setter for the channel metadata context lifted to the functional component.
+   */
+  setChannelMetas: (_: ChannelMetadata[]) => void,
+};
+
+/**
+ * EEGLabSeriesProviderClass component
+ */
+class EEGLabSeriesProviderClass extends Component<CClassProps, any> {
   private store: Store;
 
   /**
    * @class
    * @param {object} props - React Component properties
    */
-  constructor(props: CProps) {
+  constructor(props: CClassProps) {
     super(props);
     const epicMiddleware = createEpicMiddleware();
 
@@ -102,6 +154,7 @@ class EEGLabSeriesProvider extends Component<CProps, any> {
       eegMontageName,
       recordingHasHED,
       t,
+      setChannelMetas,
     } = props;
 
     if (!window.EEGLabSeriesProviderStore) {
@@ -181,18 +234,13 @@ class EEGLabSeriesProvider extends Component<CProps, any> {
       }
     };
 
-    fetchJSON(props.channelsURL).then((json: ChannelInfos) => {
-      this.store.dispatch(setDatasetMetadata({
-        bidsChannels: json.Channels,
-      }));
-    });
-
     Promise.race(racers(fetchJSON, chunksURL, '/index.json')).then(
       ({json, url}) => {
         if (json) {
           const {
             channelMetadata, shapes, timeInterval, seriesRange, validSamples,
           } = json;
+          setChannelMetas(channelMetadata);
           this.store.dispatch(
             setDatasetMetadata({
               chunksURL: url,

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {ChannelMetadata, Epoch as EpochType, HEDSchemaElement, HEDTag, RightPanel,} from '../store/types';
 import {connect} from 'react-redux';
 import {setTimeSelection} from '../store/state/timeSelection';
@@ -21,6 +21,7 @@ import swal from 'sweetalert2';
 import {InfoIcon} from "./components";
 import {colorOrder} from "../../color";
 import {useTranslation} from "react-i18next";
+import {ChannelMetasContext} from '../../eeglab/EEGLabSeriesProvider';
 
 
 type CProps = {
@@ -40,7 +41,6 @@ type CProps = {
   hedSchema: HEDSchemaElement[],
   datasetTags: any,
   channelDelimiter: string,
-  channelMetadata: ChannelMetadata[],
   panelIsDirty: boolean,
   setPanelIsDirty: (_: boolean) => void,
   eventChannels: string[],
@@ -65,7 +65,6 @@ type CProps = {
  * @param root0.hedSchema
  * @param root0.datasetTags
  * @param root0.channelDelimiter
- * @param root0.channelMetadata
  * @param root0.panelIsDirty
  * @param root0.setPanelIsDirty
  * @param root0.eventChannels
@@ -87,13 +86,13 @@ const AnnotationForm = ({
   hedSchema,
   datasetTags,
   channelDelimiter,
-  channelMetadata,
   panelIsDirty,
   setPanelIsDirty,
   eventChannels,
   setEventChannels,
 }: CProps) => {
   const {t} = useTranslation();
+  const channelMetadata = useContext(ChannelMetasContext);
   const [eventInterval, setEventInterval] = useState<(number | string)[]>(
     timeSelection ?? ['', '']
   );
@@ -1636,7 +1635,6 @@ export default connect(
     hedSchema: state.dataset.hedSchema,
     datasetTags: state.dataset.datasetTags,
     channelDelimiter: state.dataset.channelDelimiter,
-    channelMetadata: state.dataset.channelMetadata,
     channels: state.channels,
   }),
   (dispatch: (any) => void) => ({

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {vec2} from 'gl-matrix';
 import {MIN_EPOCH_WIDTH} from '../../vector';
 import {ScaleLinear} from 'd3-scale';
 import {connect} from "react-redux";
 import {RootState} from "../store";
-import {Channel, ChannelMetadata} from "../store/types";
+import {Channel} from "../store/types";
+import {ChannelMetasContext} from '../../eeglab/EEGLabSeriesProvider';
 
 type CProps = {
   key: string,
@@ -20,7 +21,6 @@ type CProps = {
   minWidth: number,
   epochChannels?: string[],
   channels: Channel[],
-  channelMetadata: ChannelMetadata[],
 };
 
 /**
@@ -35,7 +35,6 @@ type CProps = {
  * @param root0.minWidth
  * @param root0.epochChannels
  * @param root0.channels
- * @param root0.channelMetadata
  */
 const Epoch = (
   {
@@ -49,8 +48,9 @@ const Epoch = (
     minWidth,
     epochChannels,
     channels,
-    channelMetadata,
   }: CProps) => {
+  const channelMetadata = useContext(ChannelMetasContext);
+
   onset = isNaN(onset) ? 0 : onset;
   duration = isNaN(duration) ? 0 : duration;
 
@@ -121,5 +121,4 @@ Epoch.defaultProps = {
 export default connect(
   (state: RootState)=> ({
     channels: state.channels,
-    channelMetadata: state.dataset.channelMetadata,
   }))(Epoch);

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

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
 import {setCurrentAnnotation} from '../store/state/currentAnnotation';
 import {MAX_RENDERED_EPOCHS} from '../../vector';
 import {
@@ -15,7 +15,6 @@ import {
   HEDTag,
   HEDSchemaElement,
   RightPanel,
-  ChannelMetadata,
   Channel
 } from '../store/types';
 import {connect} from 'react-redux';
@@ -26,6 +25,7 @@ import {RootState} from '../store';
 import {setFilteredEpochs} from '../store/state/dataset';
 import {CheckboxElement} from './Form';
 import {useTranslation, Trans} from "react-i18next";
+import {ChannelMetasContext} from '../../eeglab/EEGLabSeriesProvider';
 
 type CProps = {
   timeSelection?: [number, number],
@@ -46,7 +46,6 @@ type CProps = {
   datasetTags: any,
   channelDelimiter: string,
   channels: Channel[],
-  channelMetadata: ChannelMetadata[],
   canEdit: boolean,
   tagsHaveChanges: boolean,
 };
@@ -70,7 +69,6 @@ type CProps = {
  * @param root0.hedSchema
  * @param root0.channelDelimiter
  * @param root0.channels
- * @param root0.channelMetadata
  * @param root0.datasetTags
  * @param root0.tagsHaveChanges
  */
@@ -92,11 +90,11 @@ const EventManager = ({
   datasetTags,
   channelDelimiter,
   channels,
-  channelMetadata,
   canEdit,
   tagsHaveChanges,
 }: CProps) => {
   const {t} = useTranslation();
+  const channelMetadata = useContext(ChannelMetasContext);
   const [epochsInRange, setEpochsInRange] = useState(getEpochsInRange(epochs, interval));
   const [allEpochsVisible, setAllEpochsVisibility] = useState(() => {
     if (epochsInRange.length < MAX_RENDERED_EPOCHS) {
@@ -769,7 +767,6 @@ export default connect(
     datasetTags: state.dataset.datasetTags,
     channelDelimiter: state.dataset.channelDelimiter,
     channels: state.channels, // TODO: merge with below and pass?
-    channelMetadata: state.dataset.channelMetadata,
     tagsHaveChanges: state.dataset.tagsHaveChanges,
   }),
   (dispatch: (_: any) => void) => ({

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

@@ -3,11 +3,13 @@ import {bisector} from 'd3-array';
 import {colorOrder} from '../../color';
 import {Channel, ChannelMetadata, Epoch} from '../store/types';
 import {connect} from 'react-redux';
-import {MAX_RENDERED_EPOCHS, SIGNAL_SCALE, SIGNAL_UNIT} from '../../vector';
+import {MAX_RENDERED_EPOCHS} from '../../vector';
 import {MutableRefObject, useEffect} from 'react';
 import {RootState} from '../store';
 import {getEpochsInRange} from '../store/logic/filterEpochs';
 import {useTranslation} from "react-i18next";
+import {getChannelUnit, useChannelInfo} from '../store/logic/channels';
+import {normalizeUnit, normalizeValueUnit} from '../../utils';
 
 type CursorContentProps = {
   time: number,
@@ -158,8 +160,11 @@ const SeriesCursor = (
               chunk.interval[1] >= time
           );
           if (!hoveredChunk) return;
+          const rawUnit = getChannelUnit(useChannelInfo(hoveredChannel));
           const chunkValue = computeValue(hoveredChunk, time);
           const channelColor = colorOrder(channelIndex.toString()).toString();
+          const unit = normalizeUnit(rawUnit);
+          const value = normalizeValueUnit(chunkValue, unit);
           return (
             <div
               key={channelIndex.toString()}
@@ -168,7 +173,7 @@ const SeriesCursor = (
                 width: '100px',
               }}
             >
-            {channelName}: {Math.round(chunkValue)} {SIGNAL_UNIT}
+            {channelName}: {value} {unit}
             </div>
           );
         })}
@@ -267,7 +272,7 @@ const computeValue = (chunk, time) => {
   const idx = bisectTime(indices, time);
   const value = chunk.values[idx-1];
 
-  return value * SIGNAL_SCALE;
+  return value;
 };
 
 /**
@@ -290,6 +295,8 @@ const CursorContent = (
     channelMetadata,
   }: CursorContentProps
 ) => {
+  const rawUnit = getChannelUnit(useChannelInfo(channel));
+  const unit = normalizeUnit(rawUnit);
   return (
     <div style={{margin: '0 5px', width: '120px'}}>
       {channel.traces.map((trace, i) => {
@@ -313,7 +320,7 @@ const CursorContent = (
             }}
           >
             {channelMetadata[channel.index].name}:&nbsp;
-            {chunk && Math.round(computeValue(chunk, time))} {SIGNAL_UNIT}
+            {chunk && normalizeValueUnit(computeValue(chunk, time), unit)} {unit}
           </div>
         );
       })}