Supply variable select component with actual meta data variables

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

@@ -325,6 +325,7 @@ class PrepareUploadedData extends Component {
                 disabled={isUnEditable}
                 onChange={(target) => this.onChangeMultiInputs(target, KEY_DIMENSIONS)} />
               <Variables variable={variable}
+                options={metaData.variableAttributes}
                 disabled={isUnEditable}
                 onChange={this.changeVariable} />
               <MultiInputs presentationLabel='Lower Domain Bounds'

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

@@ -7,16 +7,25 @@ import Row from '../../common/Row/Row';
 import styles from './Variables.scss';
 
 const Variables = (props) => {
-  const{ variable, onChange, disabled } = props;
-  const options = 'r theta phi rho T P ur utheta uphi br btheta bphi jr jtheta jphi'
+  const { variable, onChange, disabled, options } = props;
+
+  let processedOptions = []
+  for (const opt of options) {
+    processedOptions.push({
+      label: opt,
+      value: opt
+    })
+  }
+
+  const standardOptions = 'r theta phi rho T P ur utheta uphi br btheta bphi jr jtheta jphi'
     .split(' ').map(v => ({ value: v, label: v }));
 
-  return(
+  return (
     <div className={styles.variables}>
       <Label size={'medium'}>Variable: </Label>
-      <Select 
+      <Select
         label={variable === '' ? "Select..." : variable}
-        options={options}
+        options={processedOptions || standardOptions}
         disabled={disabled}
         onChange={onChange}
         placeholder={''}
@@ -27,12 +36,14 @@ const Variables = (props) => {
 
 Variables.propTypes = {
   variable: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func,
 };
 
 Variables.defaultProps = {
   variable: '',
-  onChange: () => {},
+  options: [],
+  onChange: () => { },
 };
 
 export default Variables;