selectable channel types

Author: MaximeBICMTL

modules/electrophysiology_browser/jsx/electrophysiologySessionView.js

@@ -358,6 +358,10 @@ class ElectrophysiologySessionView extends Component {
           eegMontage,
         } = this.state.database[i];
         const file = this.state.database[i].file;
+        const channelsURL = `${loris.BaseURL}/api/v0.0.4-dev/candidates`
+          + `/${this.state.patient.info.pscid}`
+          + `/${this.state.patient.info.visit_label}/recordings/${file.name}`
+          + `/channels`;
         const splitPagination = [];
         for (const j of Array(file.splitData?.splitCount).keys()) {
           splitPagination.push(
@@ -403,6 +407,7 @@ class ElectrophysiologySessionView extends Component {
               {EEG_VIS_ENABLED &&
               <div className="react-series-data-viewer-scoped col-xs-12">
                 <EEGLabSeriesProvider
+                  channelsURL={channelsURL}
                   chunksURL={
                     chunksURLs?.[file.splitData?.splitIndex] || chunksURLs
                   }

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

@@ -22,7 +22,9 @@ import {setDomain, setInterval} from '../series/store/state/bounds';
 import {
   setCoordinateSystem, setElectrodes,
 } from '../series/store/state/montage';
-import {EventMetadata, HEDSchemaElement} from '../series/store/types';
+import {
+  ChannelInfos, EventMetadata, HEDSchemaElement,
+} from '../series/store/types';
 import TriggerableModal from 'jsx/TriggerableModal';
 import DatasetTagger from '../series/components/DatasetTagger';
 import {InfoIcon} from '../series/components/components';
@@ -35,6 +37,7 @@ declare global {
 
 
 type CProps = {
+  channelsURL: string,
   chunksURL: string,
   epochsURL: string,
   electrodesURL: string,
@@ -178,6 +181,12 @@ 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) {

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

@@ -0,0 +1,50 @@
+import {useTranslation} from "node_modules/react-i18next";
+import {ChannelTypeState} from "./SeriesRenderer";
+
+/**
+ * Component that displays the list of channel types present in the acquisition and
+ * allows to configure which ones should be displayed or not.
+ */
+const ChannelTypesSelector = ({channelTypes, setChannelTypes}: {
+  channelTypes: Record<string, ChannelTypeState>,
+  setChannelTypes: React.Dispatch<React.SetStateAction<Record<string, ChannelTypeState>>>,
+}) => {
+  const {t} = useTranslation();
+  return (
+    <div style={{position: 'relative'}}>
+      <button className="btn btn-primary dropdown" data-toggle="dropdown">
+        {t('Channel Types')}
+      </button>
+      <ul className="dropdown-menu">
+        {Object.entries(channelTypes).map(([name, {visible, channelsCount}]) => (
+          <li key={name} style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '0.75rem 1.5rem',
+          }}>
+            <span>{name} ({channelsCount})</span>
+            <input
+              type="checkbox"
+              checked={visible || false}
+              onClick={
+                // Do not collapse the dropdown on click.
+                (e) => e.stopPropagation()
+              }
+              onChange={(e) => {
+                setChannelTypes((channelTypes) => ({
+                  ...channelTypes,
+                  [name]: {
+                    ...channelTypes[name],
+                    visible: e.target.checked,
+                  },
+                }));
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default ChannelTypesSelector;

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import {useTranslation} from "react-i18next";
+import {CHANNEL_DISPLAY_OPTIONS} from "../../vector";
+import {RightPanel} from "../store/types";
+
+/**
+ * Pagination component that provides controls for selecting how many channels
+ * should be displayed at once, and navigating through the paginated channels.
+ */
+function Pagination({
+  limit,
+  selectedChannelsCount,
+  visibleChannelsCount,
+  offsetIndex,
+  setOffsetIndex,
+  displayedChannelsLimit,
+  setDisplayedChannelsLimit,
+  rightPanel,
+}: {
+  limit: number,
+  selectedChannelsCount: number,
+  visibleChannelsCount: number,
+  offsetIndex: number,
+  setOffsetIndex: (_: number) => void,
+  displayedChannelsLimit: number,
+  setDisplayedChannelsLimit: (_: number) => void,
+  rightPanel: RightPanel,
+}) {
+  const {t} = useTranslation();
+
+  const hardLimit = Math.min(offsetIndex + limit - 1, visibleChannelsCount);
+
+  return (
+    <div
+      className={
+        (rightPanel ? '' : 'pull-right-lg col-lg-5 ') + 'pagination-nav'
+      }
+      style={{padding: '5px 15px'}}
+    >
+      <small style={{marginRight: '3px'}}>
+        {t('Displaying: ', {ns: 'electrophysiology_browser'})}
+        <select
+          value={displayedChannelsLimit}
+          onChange={(e) => {
+            const displayedChannelsLimit = parseInt(e.target.value, 10);
+            setDisplayedChannelsLimit(displayedChannelsLimit);
+          }}
+        >
+          {CHANNEL_DISPLAY_OPTIONS.map((numChannels) => (
+            <option
+              key={numChannels}
+              value={numChannels}
+            >
+              {t('{{numChannels}} channels', {
+                ns: 'electrophysiology_browser',
+                numChannels: numChannels,
+              })}
+            </option>
+          ))};
+        </select>
+        &nbsp;
+        {t('Showing:', {ns: 'electrophysiology_browser'})}
+        &nbsp;
+        <input
+          type='number'
+          style={{width: '45px'}}
+          value={offsetIndex}
+          onChange={(e) => {
+            const value = parseInt(e.target.value);
+            !isNaN(value) && setOffsetIndex(value);
+          }}
+        />
+        &nbsp;
+        {t('to {{channelsInView}} of {{totalChannels}}', {
+          ns: 'electrophysiology_browser',
+          channelsInView: hardLimit,
+          totalChannels: selectedChannelsCount
+        })}
+      </small>
+      <div
+        className='btn-group'
+        style={{marginRight: 0}}
+      >
+        <input
+          type='button'
+          className='btn btn-primary btn-xs'
+          onClick={() => setOffsetIndex(offsetIndex - limit)}
+          value='<<'
+        />
+        <input
+          type='button'
+          className='btn btn-primary btn-xs'
+          onClick={() => setOffsetIndex(offsetIndex - 1)}
+          value='<'
+        />
+        <input
+          type='button'
+          className='btn btn-primary btn-xs'
+          onClick={() => setOffsetIndex(offsetIndex + 1)}
+          value='>'
+        />
+        <input
+          type='button'
+          className='btn btn-primary btn-xs'
+          onClick={() => setOffsetIndex(offsetIndex + limit)}
+          value='>>'
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Pagination;