Commit 90dac9cf authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

frontend rendering optimizations

parent d6697495

js-apps/meep-frontend/package-lock.json

+5 −0
Original line number Diff line number Diff line
@@ -13124,6 +13124,11 @@ 
        "prop-types": "^15.6.2"

      }

    },

    "react-autobind": {

      "version": "1.0.6",

      "resolved": "https://registry.npmjs.org/react-autobind/-/react-autobind-1.0.6.tgz",

      "integrity": "sha1-k2u1jt9ribYZxQ+C8OYXFZ/f1PE="

    },

    "react-d3-axis": {

      "version": "0.1.2",

      "resolved": "https://registry.npmjs.org/react-d3-axis/-/react-d3-axis-0.1.2.tgz",

js-apps/meep-frontend/package.json

+1 −0
Original line number Diff line number Diff line
@@ -57,6 +57,7 @@ 
    "material-design-icons": "3.0.1",

    "prop-types": "15.6.2",

    "react": "^16.8.6",

    "react-autobind": "^1.0.6",

    "react-d3-axis": "^0.1.2",

    "react-d3-graph": "^2.0.2",

    "react-dom": "^16.8.6",

js-apps/meep-frontend/src/js/components/dialogs/id-deploy-scenario-dialog.js

+9 −6
Original line number Diff line number Diff line
@@ -15,6 +15,7 @@ 
 */



import React, { Component } from 'react';

import autoBind from 'react-autobind';



import IDDialog from './id-dialog';

import IDSelect from '../helper-components/id-select';
@@ -26,6 +27,8 @@ import { 
class IDDeployScenarioDialog extends Component {

  constructor(props) {

    super(props);

    autoBind(this);



    this.state = {

      selectedScenario: null

    };
@@ -45,24 +48,24 @@ class IDDeployScenarioDialog extends Component { 
    );

  }



  onChange(e) {

    this.setState({ selectedScenario: e.target.value });

  }



  render() {

    return (

      <IDDialog

        title="Deploy Scenario"

        open={this.props.open}

        onClose={this.props.onClose}

        onSubmit={() => {

          this.onDeployScenario();

        }}

        onSubmit={this.onDeployScenario}

        cydata={MEEP_DLG_DEPLOY_SCENARIO}

      >

        <IDSelect

          label={this.props.label || 'Scenario'}

          value={this.props.value}

          options={this.props.options}

          onChange={e => {

            this.setState({ selectedScenario: e.target.value });

          }}

          onChange={this.onChange}

          cydata={MEEP_DLG_DEPLOY_SCENARIO_SELECT}

        />

      </IDDialog>

js-apps/meep-frontend/src/js/components/dialogs/id-dialog.js

+59 −49
Original line number Diff line number Diff line
@@ -14,7 +14,7 @@ 
 * limitations under the License.

 */



import React from 'react';

import React, { Component } from 'react';

import { Grid, GridCell } from '@rmwc/grid';



import {
@@ -25,25 +25,34 @@ import { 
  DialogButton

} from '@rmwc/dialog';



const IDDialog = props => {

class IDDialog extends Component {

  constructor(props) {

    super(props);



    this.state = {

      sandboxName: '',

      err: null

      

    };

  }



  render() {

    return (

      <Dialog

        style={{zIndex: 10000}}

      open={props.open}

      onClose={() => {

        props.onClose();

      }}

      data-cy={props.cydata}

        open={this.props.open}

        onClose={this.props.onClose}

        data-cy={this.props.cydata}

      >

        <DialogTitle style={styles.title}>

          <Grid>

          <GridCell span={12}>{props.title}</GridCell>

            <GridCell span={12}>{this.props.title}</GridCell>

          </Grid>

        </DialogTitle>



        <DialogContent style={styles.content}>

          <Grid>

          <GridCell span={12}>{props.children}</GridCell>

            <GridCell span={12}>{this.props.children}</GridCell>

          </Grid>

        </DialogContent>
@@ -54,7 +63,7 @@ const IDDialog = props => { 
              <DialogButton

                style={styles.button}

                action="close"

              onClick={props.onClose}

                onClick={this.props.onClose}

              >

                Cancel

              </DialogButton>
@@ -65,8 +74,8 @@ const IDDialog = props => { 
                style={styles.button}

                action="accept"

                isDefaultAction

              onClick={() => props.onSubmit()}

              disabled={props.okDisabled}

                onClick={this.props.onSubmit}

                disabled={this.props.okDisabled}

              >

                Ok

              </DialogButton>
@@ -75,7 +84,8 @@ const IDDialog = props => { 
        </DialogActions>

      </Dialog>

    );

};

  }

}



const styles = {

  title: {

js-apps/meep-frontend/src/js/components/dialogs/id-new-sandbox-dialog.js

+13 −4
Original line number Diff line number Diff line
@@ -15,6 +15,7 @@ 
 */



import React, { Component } from 'react';

import autoBind from 'react-autobind';

import { TextField, TextFieldHelperText } from '@rmwc/textfield';



import IDDialog from './id-dialog';
@@ -26,6 +27,8 @@ import { 
class IDNewSandboxDialog extends Component {

  constructor(props) {

    super(props);

    autoBind(this);



    this.state = {

      sandboxName: '',

      err: null
@@ -46,22 +49,28 @@ class IDNewSandboxDialog extends Component { 
    this.setState({ sandboxName: name, err: err });

  }



  onSubmit() {

    this.props.createSandbox(this.state.sandboxName);

  }



  onChange(e) {

    this.changeSandboxName(e.target.value);

  }



  render() {

    return (

      <IDDialog

        title={this.props.title}

        open={this.props.open}

        onClose={this.props.onClose}

        onSubmit={() => {this.props.createSandbox(this.state.sandboxName);}}

        onSubmit={this.onSubmit}

        cydata={MEEP_DLG_NEW_SANDBOX}

      >

        <TextField

          outlined

          style={{ width: '100%' }}

          label={'Sandbox Name'}

          onChange={e => {

            this.changeSandboxName(e.target.value);

          }}

          onChange={this.onChange}

          value={this.state.sandboxName}

          invalid={this.state.err ? true : false}

          data-cy={MEEP_DLG_NEW_SANDBOX_NAME}