[EEG Browser] Signal Visualization, Events, Electrode map and EEG split files support

.eslintignore

@@ -1,10 +1,12 @@
 node_modules/*
 vendor/*
 project/*
+babel.config.js
 
 # compiled js ignored since it is run on the jsx directory
 modules/*/js/*
 modules/*/js/*/*
+modules/electrophysiology_browser/jsx/react-series-data-viewer/src/protocol-buffers/chunk_pb.js
 htdocs/js/components/*
 
 # Ignore external libs
@@ -21,4 +23,3 @@ htdocs/js/FileSaver.min.js
 htdocs/vendor/
 htdocs/fontawesome/
 htdocs/bootstrap/
-

.github/workflows/loristest.yml

@@ -40,7 +40,10 @@ jobs:
 
     - name: Change PHP Version in Dockerfile
       run: sed -i "s/7.4/${{ matrix.php }}/g" Dockerfile.test.php7
-
+
+    - name: Install OS package dependencies
+      run: sudo apt-get install -y protobuf-compiler
+
     - name: Install composer dependencies
       if: steps.composer-cache.outputs.cache-hit != 'true'
       run: composer install --prefer-dist --no-progress --no-suggest

SQL/0000-00-05-ElectrophysiologyTables.sql

@@ -32,6 +32,8 @@ CREATE TABLE `physiological_file` (
   `AcquisitionTime`           DATETIME             DEFAULT '1970-01-01 00:00:01',
   `InsertedByUser`            VARCHAR(50)          NOT NULL,
   `FilePath`                  VARCHAR(255)         NOT NULL,
+  `Index`                     INT(5)               DEFAULT NULL,
+  `ParentID`                  INT(10) unsigned     DEFAULT NULL,
   PRIMARY KEY (`PhysiologicalFileID`),
   CONSTRAINT `FK_session_ID`
     FOREIGN KEY (`SessionID`)
@@ -44,10 +46,29 @@ CREATE TABLE `physiological_file` (
     REFERENCES `physiological_modality` (`PhysiologicalModalityID`),
   CONSTRAINT `FK_phys_output_type_TypeID`
     FOREIGN KEY (`PhysiologicalOutputTypeID`)
-    REFERENCES `physiological_output_type` (`PhysiologicalOutputTypeID`)
+    REFERENCES `physiological_output_type` (`PhysiologicalOutputTypeID`),
+  CONSTRAINT `FK_ParentID`
+    FOREIGN KEY (`ParentID`)
+    REFERENCES `physiological_file` (`PhysiologicalFileID`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
 
+-- Create a physiological_split_file table
+CREATE TABLE `physiological_split_file` (
+  `ID`        INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
+  `Index`     INT(5)           NOT NULL,
+  `ArchiveID` INT(10) UNSIGNED NOT NULL,
+  `FileType`  VARCHAR(12)      DEFAULT NULL,
+  `FilePath`  VARCHAR(255)     NOT NULL,
+  `Duration`  DECIMAL(10,3)    NOT NULL,
+  CONSTRAINT `FK_ArchiveID`
+    FOREIGN KEY (`ArchiveID`)
+    REFERENCES `physiological_file` (`PhysiologicalFileID`),
+  CONSTRAINT `FK_ImagingFileTypes`
+    FOREIGN KEY (`FileType`)
+    REFERENCES `ImagingFileTypes` (`type`),
+  PRIMARY KEY (`ID`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
 -- Create a physiological_parameter_file table that will store all JSON
 -- information that accompanies the BIDS physiological dataset
@@ -350,7 +371,8 @@ INSERT INTO ImagingFileTypes
   ('vhdr', 'Brainvision file format (EEG)'),
   ('vsm',  'BrainStorm file format (EEG)'),
   ('edf',  'European data format (EEG)'),
-  ('cnt',  'Neuroscan CNT data format (EEG)');
+  ('cnt',  'Neuroscan CNT data format (EEG)'),
+  ('archive', 'Archive file');
 
 -- Insert into annotation_file_type
 INSERT INTO physiological_annotation_file_type

SQL/New_patches/2021-05-20-Electrophysiology-split-files.sql

@@ -0,0 +1,22 @@
+INSERT INTO `ImagingFileTypes` VALUE ('archive', 'Archive file');
+
+ALTER TABLE `physiological_file`
+    ADD COLUMN `Index` INT(5) DEFAULT NULL,
+    ADD COLUMN `ParentID` INT(10) unsigned DEFAULT NULL,
+    ADD CONSTRAINT `FK_ParentID` FOREIGN KEY (`ParentID`) REFERENCES `physiological_file` (`PhysiologicalFileID`);
+
+CREATE TABLE `physiological_split_file` (
+  `ID`        INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
+  `Index`     INT(5)           NOT NULL,
+  `ArchiveID` INT(10) UNSIGNED NOT NULL,
+  `FileType`  VARCHAR(12)      DEFAULT NULL,
+  `FilePath`  VARCHAR(255)     NOT NULL,
+  `Duration`  DECIMAL(10,3)    NOT NULL,
+  CONSTRAINT `FK_ArchiveID`
+    FOREIGN KEY (`ArchiveID`)
+    REFERENCES `physiological_file` (`PhysiologicalFileID`),
+  CONSTRAINT `FK_ImagingFileTypes`
+    FOREIGN KEY (`FileType`)
+    REFERENCES `ImagingFileTypes` (`type`),
+  PRIMARY KEY (`ID`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = function(api) {
+  api.cache(true);
+  const presets = [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ];
+  const plugins = [
+    "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ];
+  return {
+    presets,
+    plugins
+  };
+}

htdocs/bootstrap/css/custom-css.css

@@ -496,7 +496,7 @@ div.navbar div.container div.navbar-brand {
     margin-right: 5px;
 }
 
-.btn-default {
+.btn-default:not(.disabled) {
     border-color: #246EB6;
     color: #246EB6;
     background-color: white;
@@ -533,15 +533,15 @@ div.navbar div.container div.navbar-brand {
     border-color: #246EB6;
 }
 
-a.btn.btn-primary {
+a.btn.btn-primary:not(.download, .split-nav) {
     color: #064785;
     border-color: transparent;
     background-color: white;
     -webkit-transition: background-color 0.2s ease-in; /* Safari */
     transition: background-color 0.2s ease-in;
 }
 
-a.btn.btn-primary:hover {
+a.btn.btn-primary:hover:not(.download, .split-nav) {
   color: #E89A0C;
   border-color: transparent;
   background-color: white;

jsx/Panel.js

@@ -68,10 +68,15 @@ class Panel extends Component {
         onClick={this.toggleCollapsed}
         data-toggle="collapse"
         data-target={'#' + this.props.id}
-        style={this.props.collapsing ?
-          {cursor: 'pointer', height: '3em', fontWeight: 'bold'} :
-          {cursor: 'default', height: '3em', fontWeight: 'bold'}
+        data-parent={this.props.parentId ?
+          '#'+this.props.parentId :
+          false
         }
+        style={{
+          cursor: this.props.collapsing ? 'pointer' : 'default',
+          height: '3em',
+          fontWeight: 'bold',
+        }}
       >
         {title}
         {this.props.collapsing ? <span className={glyphClass}/> : ''}
@@ -86,7 +91,7 @@ class Panel extends Component {
         <div id={this.props.id}
              className={this.panelClass}
              role='tabpanel'
-             style={{height: 'calc(100% - 3em)'}}
+             style={this.props.collapsing ? {} : {height: 'calc(100% - 3em)'}}
         >
           <div className="panel-body"
                style={{...this.props.style, height: this.props.height}}>
@@ -100,6 +105,7 @@ class Panel extends Component {
 
 Panel.propTypes = {
   initCollapsed: PropTypes.bool,
+  parentId: PropTypes.string,
   id: PropTypes.string,
   height: PropTypes.string,
   title: PropTypes.string,
@@ -109,6 +115,7 @@ Panel.propTypes = {
 };
 Panel.defaultProps = {
   initCollapsed: false,
+  parentId: null,
   id: 'default-panel',
   height: '100%',
   class: 'panel-primary',

modules/electrophysiology_browser/.gitignore

@@ -1 +1,2 @@
 js/*
+jsx/react-series-data-viewer/src/protocol-buffers/chunk_pb.js

modules/electrophysiology_browser/css/electrophysiology_browser.css

@@ -0,0 +1,163 @@
+.react-series-data-viewer-scoped .dropdown-menu {
+  width: calc(100% - 5px);
+}
+
+.react-series-data-viewer-scoped .dropdown-menu li {
+  margin-top: 0;
+  padding: 0 10px;
+}
+
+.react-series-data-viewer-scoped .dropdown-menu li:hover {
+  background: #eee;
+  cursor: pointer;
+  margin-top: 0;
+  width: 100%;
+}
+
+.btn.btn-xs {
+  font-size: 12px;
+}
+
+.btn-group .btn {
+  margin: 0;
+}
+
+.btn-group {
+  margin-right: 10px;
+}
+
+.btn-primary:focus:not(.active),
+.btn-primary:active:not(.active) {
+  color: #246EB6;
+  background-color: white;
+  border-color: #246EB6;
+  outline: 0;
+}
+
+.no-gutters > div {
+  padding:0;
+}
+
+svg {
+  user-select: none;
+}
+
+.annotation.list-group-item {
+  background: #fffae6;
+  border-left: 5px solid #ff6600;
+}
+
+.event-list .btn.btn-primary {
+  color: #555;
+  border: 1px solid #555;
+}
+
+.event-list .btn.btn-primary.active {
+  color: #000;
+  background-color: #ddd;
+  border: 1px solid #000;
+}
+
+.event-list .btn.btn-primary:hover {
+  color: #333;
+  background-color: #eee;
+  border: 1px solid #333;
+}
+
+#electrode-montage .list-group {
+  border: 1px solid #ddd;
+}
+
+#electrode-montage .list-group-item:first-child {
+  border-top: none;
+}
+
+#electrode-montage .list-group-item {
+  margin-bottom: 0;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.electrode:hover circle {
+  stroke: #064785;
+  cursor: pointer;
+  fill: #E4EBF2
+}
+
+.electrode:hover text {
+  fill: #064785;
+  cursor: pointer;
+}
+
+#eegSessionView .table-scroll {
+  padding-bottom: 0;
+}
+
+#eegSessionView #lorisworkspace > .panel {
+  border: none;
+}
+
+#eegSessionView .panel-heading {
+  height: auto !important;
+}
+
+#eegSidebar {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: calc(100%);
+  position: fixed;
+}
+
+#page.eegBrowser {
+  vertical-align: top;
+  position: relative;
+  width: auto;
+}
+
+/* Custom, iPhone Retina */
+@media only screen and (min-width : 320px) {
+  .pagination-nav {
+    padding-top: 8px;
+  }
+
+  #eegSidebar {
+    display: none;
+  }
+}
+
+/* Extra Small Devices, Phones */
+@media only screen and (min-width : 480px) {
+
+}
+
+/* Small Devices, Tablets */
+@media only screen and (min-width : 768px) {
+  #eegSidebar {
+    display: block;
+  }
+
+  #page.eegBrowser {
+    margin-left: 150px;
+  }
+}
+
+/* Medium Devices, Desktops */
+@media only screen and (min-width : 992px) {
+  .event-list {
+    margin-top: 40px;
+    margin-bottom: 0;
+  }
+}
+
+/* Large Devices, Wide Screens */
+@media only screen and (min-width : 1200px) {
+  .pull-right-lg {
+    float: right;
+  }
+
+  .pagination-nav {
+    padding-top: 0;
+  }
+}