Convert DataLoader component from TabMenuItem to Picker with Popover

modules/webgui/web/src/components/BottomBar/BottomBar.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import OriginPicker from './Origin/OriginPicker';
 import TimePicker from './TimePicker';
 import TfEditor from './TfEditor/containers/TfEditor';
-import ToggleDataLoader from '../DataLoader/ToggleDataLoader';
+import DataLoader from '../DataLoader/DataLoader';
 import styles from './BottomBar.scss';
 
 const BottomBar = () => (
@@ -11,7 +11,7 @@ const BottomBar = () => (
     <TfEditor />
     <OriginPicker />
     <TimePicker />
-    <ToggleDataLoader />
+    <DataLoader />
   </div>
 );
 

modules/webgui/web/src/components/DataLoader/DataLoader.jsx

@@ -8,12 +8,12 @@ import { stringListToArray } from './utils/helpers';
 
 import DataManager from '../../api/DataManager';
 import styles from './DataLoader.scss';
-import Window from '../common/Window/Window';
-import { setActivated } from '../../api/Actions/dataLoaderActions';
 import Button from '../common/Input/Button/Button';
 import Label from '../common/Label/Label';
 import UploadDataButton from './UploadDataButton';
 import provideWindowWidth from './HOC/provideWindowSize';
+import Popover from '../common/Popover/Popover';
+import Picker from '../../components/BottomBar/Picker';
 
 class DataLoader extends Component {
   constructor(props) {
@@ -22,15 +22,72 @@ class DataLoader extends Component {
     this.dataTypesToLoad = ['Volumes', 'Fieldlines'];
 
     this.handleDataTypeList = this.handleDataTypeList.bind(this);
+    this.popover = this.popover.bind(this);
 
     this.state = {
       activeDataType: '',
       dataToLoadUri: '',
       dataItems: [],
-      aButtonIsPressed: false
+      aButtonIsPressed: false,
+      showPopover: false
     };
   }
 
+  popover() {
+    const { width, height } = this.props
+    const { dataItems, aButtonIsPressed, showPopover } = this.state;
+    const minSize = 700;
+
+    const position = {
+      x: width < minSize ? 0 : 100,
+      y: height < minSize ? 0 : 300
+    };
+
+    let DataTypeButtons = () => {
+      return(
+        <section className={styles.dataButtons}>
+          <div>
+          {this.dataTypesToLoad.map(dataType => (
+            <Button key={dataType} 
+                    onClick={() => this.setState({activeDataType: dataType, aButtonIsPressed: true})}
+                    disabled={dataType !== 'Volumes'}>
+              <Label>{dataType}</Label>
+            </Button>
+          ))}
+          </div>
+        </section>
+      );
+    };
+
+    return(
+      <Popover
+        className={Picker.Popover}
+        title="DATA"
+        closeCallback={() => this.togglePopover()}
+        detachable={true}
+      >
+          <div className={styles.container}>
+            <div className={styles.upload}>
+              <Label size="large">Upload data from disk</Label>
+              <div className={styles.buttons}>
+                <UploadDataButton/>
+              </div>
+            </div>
+            <div className={styles.horizontalLine}/>
+            <div className={styles.load}>
+              <Label size="large">Load saved data</Label>
+              <div className={styles.buttons}>
+                <DataTypeButtons/>
+              </div>
+              { aButtonIsPressed && (
+                <DataItemList items={dataItems} />
+              )}
+            </div>
+          </div>
+      </Popover>
+    );  
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const { activeDataType, dataToLoadUri } = this.state;
 
@@ -70,84 +127,24 @@ class DataLoader extends Component {
     DataManager.subscribe(uri || this.state.dataToLoadUri, this.handleDataTypeList);
   }
 
+  togglePopover() {
+    this.setState({ showPopover: !this.state.showPopover });
+  }
+  
   render() {
-    const { setActivated, activated, width, height } = this.props
-    const { dataItems, aButtonIsPressed } = this.state;
-    const minSize = 700;
-
-    const size = {
-      width: width < minSize ? width / 2 : width / 3,
-      height: height / 2
-    };
-
-    const position = {
-      x: width < minSize ? 0 : 100,
-      y: height < minSize ? 0 : 300
-    };
-
-    let DataTypeButtons = () => {
-      return(
-        <section className={styles.dataButtons}>
-          <div>
-          {this.dataTypesToLoad.map(dataType => (
-            <Button key={dataType} 
-                    onClick={() => this.setState({activeDataType: dataType, aButtonIsPressed: true})}
-                    disabled={dataType !== 'Volumes'}>
-              <Label>{dataType}</Label>
-            </Button>
-          ))}
-          </div>
-        </section>
-      );
-    };
-
+    const { showPopover } = this.state;
     return(
-      <div className="page-content-wrapper">
-        { this.props.activated && (
-            <Window type='large'
-                    title='Data Loader'
-                    size={size}
-                    position={position}
-                    closeCallback={() => setActivated(false)}>
-              <div className={styles.container}>
-                <div className={styles.upload}>
-                  <Label size="large">Upload data from disk</Label>
-                  <div className={styles.buttons}>
-                    <UploadDataButton/>
-                  </div>
-                </div>
-                <div className={styles.horizontalLine}/>
-                <div className={styles.load}>
-                  <Label size="large">Load saved data</Label>
-                  <div className={styles.buttons}>
-                    <DataTypeButtons/>
-                  </div>
-                  { aButtonIsPressed && (
-                    <DataItemList items={dataItems} />
-                  )}
-                </div>
-              </div>
-            </Window>
-        )}
+      <div className={Picker.Wrapper}>
+        <Picker onClick={() => this.togglePopover()}>
+          <div className={`${styles.container}`}>
+            <Label size='medium'>DATA LOADER</Label>
+          </div>
+        </Picker>
+        
+        { showPopover && this.popover() }
       </div>
     );
   }
 }
 
-const mapStateToProps = state => ({
-  activated: state.dataLoader.activated,
-  filePaths: state.dataLoader.filePaths,
-});
-
-const mapDispatchToProps = dispatch => ({
-  setActivated: (isActivated) => {
-    dispatch(setActivated(isActivated));
-  },
-});
-
-DataLoader = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(DataLoader);
-
 export default provideWindowWidth(DataLoader);

modules/webgui/web/src/components/common/Popover/Popover.jsx

@@ -27,7 +27,7 @@ class Popover extends Component {
   }
 
   get inheritedProps() {
-    const doNotInclude = 'title arrow closeCallback';
+    const doNotInclude = 'title arrow closeCallback detachable';
     return excludeKeys(this.props, doNotInclude);
   }
 
@@ -60,7 +60,7 @@ class Popover extends Component {
   }
 
   get asWindow() {
-    return (<Window {...this.props}>{ this.props.children }</Window>);
+    return (<Window {...excludeKeys(this.props, 'detachable arrow')}>{ this.props.children }</Window>);
   }
 
   toggleDetach() {

modules/webgui/web/src/components/common/Window/Window.jsx

@@ -75,7 +75,7 @@ Window.defaultProps = {
   closeCallback: null,
   className: '',
   position: { x: 10, y: 10 },
-  size: { height: 'auto', width: '300px' },
+  size: { height: 300, width: 300 },
   type: "medium",
   title: 'Window',
 };

modules/webgui/web/src/views/OnScreenGui.jsx

@@ -55,7 +55,6 @@ class OnScreenGui extends Component {
           <BottomBar />
         </section>
         <section style={{position: 'fixed'}}>
-          <DataLoader />
           <PrepareUploadedData />
         </section>
       </div>