Implement RadioButtons component and add Spherical/Cartesian option

modules/dataloader/operators/loader.cpp

@@ -297,13 +297,15 @@ void Loader::processCurrentlySelectedUploadData(const std::string& dictionaryStr
         taskDictionary.setValue("RawVolumeOutput", rawVolumeOutput);
         taskDictionary.setValue("DictionaryOutput", dictionaryOutput);
 
+        std::string gridType = _currentVolumeConversionDictionary.value<std::string>(KeyGridType);
+
         /*** create state file ***/
         // Check if file exists
         // If it exists, clear contents? delete and create new?
         // Create file, write dictionary to string contents
         std::initializer_list<std::pair<std::string, ghoul::any>> stateList = {
             std::make_pair( KeyStepSize, DefaultStepSize ),
-            std::make_pair( KeyGridType, DefaultGridType ),
+            std::make_pair( KeyGridType, gridType ),
             std::make_pair( KeySecondsAfter, DefaultSecondsAfter ),
             std::make_pair( KeySecondsBefore, DefaultSecondsBefore )
         };

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

@@ -12,6 +12,7 @@ import Input from '../common/Input/Input/Input';
 import styles from './PrepareUploadedData.scss';
 import CenteredLabel from '../common/CenteredLabel/CenteredLabel';
 import Button from '../common/Input/Button/Button';
+import RadioButtons from '../common/Input/RadioButtons/RadioButtons';
 import Window from '../common/Window/Window';
 import ProgressBar from '../common/ProgressBar/ProgressBar';
 import Checkbox from '../common/Input/Checkbox/Checkbox';
@@ -29,6 +30,7 @@ class PrepareUploadedData extends Component {
       volumeProgress: 0,
       uploadButtonIsClicked: false,
       itemName: '',
+      gridType: '',
 
       data: {
         dimensions: { x: 100, y: 100, z: 128 },
@@ -43,6 +45,7 @@ class PrepareUploadedData extends Component {
     this.changeVariable = this.changeVariable.bind(this);
     this.changeRSquared = this.changeRSquared.bind(this);
     this.changeItemName = this.changeItemName.bind(this);
+    this.handleGridTypeChange = this.handleGridTypeChange.bind(this);
     this.getDefaultItemName = this.getDefaultItemName.bind(this);
     this.upload = this.upload.bind(this);
     this.handleProgressValue = this.handleProgressValue.bind(this);
@@ -97,6 +100,10 @@ class PrepareUploadedData extends Component {
     this.setState({ data: { ...this.state.data, rSquared: checked }});
   }
 
+  handleGridTypeChange(option) {
+    this.setState({ gridType: option });
+  }
+
   getDefaultItemName() {
     return `${getFileBasename(getDirectoryLeaf(this.props.filePaths))}_${this.state.data.variable}`
   }
@@ -108,6 +115,7 @@ class PrepareUploadedData extends Component {
     let payload = `\'
       return {
         ItemName = "${this.state.itemName || this.getDefaultItemName()}",
+        GridType = "${this.state.gridType}",
         Task = {
           Input="${this.props.filePaths}",
           Dimensions={${dimensions.x}, ${dimensions.y}, ${dimensions.z}}, 
@@ -171,6 +179,10 @@ class PrepareUploadedData extends Component {
           <MultiInputs label='Upper Domain Bounds'
                         options={upperDomainBounds} 
                         onChange={(target) => this.onChangeMultiInputs(target, KEY_UPPER_DOMAIN_BOUNDS)}/>
+          <div><RadioButtons options={['Spherical', 'Cartesian']}
+                             defaultOption='Spherical'
+                             label='Grid type'
+                             onChange={this.handleGridTypeChange} /></div>
           <Checkbox label='Factor r^2?'
                     onChange={this.changeRSquared}/>
           <Button onClick={() => this.upload()}> Convert </Button>

modules/webgui/web/src/components/common/Input/RadioButtons/RadioButtons.jsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { excludeKeys } from '../../../../utils/helpers';
+import styles from './RadioButtons.scss';
+
+// TODO: intitial double render
+class RadioButtons extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+        selectedOption: ''
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(event) {    
+    const selectedOption = event.target.value;
+    this.setState({ selectedOption });
+
+    this.props.onChange(selectedOption);
+  }
+
+  componentDidUpdate() {
+    if (this.state.selectedOption === '' && this.props.defaultOption) {
+        this.setState({ selectedOption: this.props.defaultOption });
+        this.props.onChange(this.props.defaultOption);
+    }
+  }
+
+  render() {
+    const inheritProps = excludeKeys(this.props, 'onChange label options defaultOption');
+    const { options, label, isHorizontal } = this.props;
+
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.label}>
+            { label }
+            </div>
+            <div className={`${isHorizontal ? styles.optionsHorizontal : styles.optionsVertical}`}>
+            {options.map(option => (
+                <label key={option}>
+                    <input type="radio" 
+                        value={option} 
+                        checked={this.state.selectedOption === option} 
+                        onChange={this.onChange} />
+                    {option}
+                </label>
+            ))}
+            </div>
+        </div>
+    );
+  }
+}
+
+RadioButtons.propTypes = {
+  defaultOption: PropTypes.string,
+  isHorizontal: PropTypes.bool,
+  label: PropTypes.node,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+RadioButtons.defaultProps = {
+  isHorizontal: true,
+  label: 'Select',
+  onChange: () => {},
+};
+
+export default RadioButtons;

modules/webgui/web/src/components/common/Input/RadioButtons/RadioButtons.scss

@@ -0,0 +1,22 @@
+.wrapper {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+}
+
+.optionsHorizontal {
+    flex-direction: row;
+}
+.optionsVertical {
+    flex-direction: column;
+}
+
+.optionsHorizontal,
+.optionsVertical {
+    display: flex;
+    display: -webkit-flex;
+    label {
+        display: flex;
+        display: -webkit-flex;
+    }
+}