backport edf info box to sn-editor

sn-webrtc contains a feature to display edf headers in a popup modal,
this commit ports that feature to sn-editor

Author: jmz-b

sn-editor/src/components/EdfInfoBox.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { formatSize } from '../utils/utils';
+
+const edfHeader = [
+  'numberOfSignals',
+  'start',
+  'end',
+  'patientIdentification',
+  'recordIdentification',
+  'recordHeaderByteSize',
+  'numberOfDataRecords',
+  'recordDurationTime',
+  'recordSize',
+  'recordSampleSize',
+];
+
+const EdfInfoBox = ({ edf, onClose }) => (
+  <div className="infobox">
+    <button className="toggleInfobox" onClick={onClose}>
+      ×
+    </button>
+    {edf && (
+      <section>
+        <h2>EDF file header informationen</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>EDF Header</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {edfHeader.map(key => (
+              <tr key={key}>
+                <td>{key}</td>
+                <td>{`${edf.header[key]}`}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Channel</th>
+              <th>Label</th>
+              <th>physical Dimension</th>
+              <th>Number of Samples</th>
+              <th>Digital min / max</th>
+              <th>Physical min / max</th>
+            </tr>
+          </thead>
+          <tbody>
+            {edf.header.channels.map(channel => (
+              <tr key={channel.index}>
+                <td>{channel.index + 1}</td>
+                <td>{channel.label}</td>
+                <td>{channel.physicalDimension}</td>
+                <td>{channel.numberOfSamples}</td>
+                <td>
+                  {channel.digitalMinimum} / {channel.digitalMaximum}
+                </td>
+                <td>
+                  {channel.physicalMinimum} / {channel.physicalMaximum}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    )}
+  </div>
+);
+
+EdfInfoBox.propTypes = {
+  edf: PropTypes.object,
+  onClose: PropTypes.func,
+};
+
+EdfInfoBox.defaultProps = {
+  edf: null,
+  onClose() {},
+};
+
+export default EdfInfoBox;

sn-editor/src/containers/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Dropzone from 'react-dropzone';
 import queryString from 'query-string';
 import EDF from 'components/EDF-View';
+import EdfInfoBox from 'components/EdfInfoBox';
 import Controls from 'components/Controls';
 import Sidebar from 'components/Sidebar';
 import XNAT from 'components/Xnat';
@@ -15,6 +16,7 @@ export default class App extends Component {
     activeBundle: null,
     showSidebar: true,
     loggedIn: false,
+    isInfoboxVisible: false,
   }
 
   proxy = { onClick() {} }
@@ -100,6 +102,11 @@ export default class App extends Component {
     this.setState({ showSidebar });
   }
 
+  toggleInfobox = () => {
+    const { isInfoboxVisible } = this.state;
+    this.setState({ isInfoboxVisible: !isInfoboxVisible });
+  };
+
   renderEditor() {
     const { edf, artifacts } = this.state.activeBundle || {};
     const sidebarWidth = this.state.showSidebar ? '20rem' : '0rem';
@@ -135,15 +142,28 @@ export default class App extends Component {
   }
 
   render() {
+    const { edf } = this.state.activeBundle || {};
     const hasBundle = this.state.bundles.length > 0;
     const hasActiveBundle = !!this.state.activeBundle;
     const containerClass = `container ${hasBundle ? 'full-width' : ''}`;
+    const isInfoboxVisible = this.state.isInfoboxVisible;
 
     return (
       <div className={containerClass}>
         <header className="site-header dashed-bottom">
           <a href="." className="site-title">copla-editor</a>
-          {hasActiveBundle && <Controls proxy={this.proxy} />}
+          {hasActiveBundle && (
+            <nav>
+              <Controls proxy={this.proxy} />
+              <button
+                className="btn btn-default btn-ghost"
+                onClick={this.toggleInfobox}
+                title="Zeige Dateiinfos"
+              >
+                ℹ️️
+              </button>
+            </nav>
+          )}
           {hasBundle && this.renderDropzone('site-nav')}
         </header>
 
@@ -161,6 +181,13 @@ export default class App extends Component {
         <footer className="site-footer dashed-top">
           Gitlab: <a href="https://git.tools.f4.htw-berlin.de/somnonetz/copla-editor">somnonetz/copla-editor</a>
         </footer>
+
+        {isInfoboxVisible && (
+          <EdfInfoBox
+            edf={edf}
+            onClose={this.toggleInfobox}
+          />
+        )}
       </div>
     );
   }

sn-editor/src/index.css

@@ -34,4 +34,44 @@
 
 .select-box select, .select-box input {
   width: 100%;
+}
+
+.infobox {
+  z-index: 10;
+  position: absolute;
+  top: 6rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rem;
+  padding: 1rem;
+  max-width: calc(100% - 4rem);
+  min-height: calc(100vh - 8rem);
+  background: #eee;
+}
+
+.infobox .toggleInfobox {
+  position: absolute;
+  top: 1px;
+  right: 0.5rem;
+  background: none;
+  font-size: 32px;
+  color: #333;
+}
+
+.infobox table {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.infobox table.fixed {
+  table-layout: fixed;
+}
+
+.infobox td {
+  padding: 0.5rem;
+  word-break: break-all;
+}
+
+.infobox tr:nth-child(odd) td {
+  background: #ddd;
 }