render()

in frontend/webapp/src/containers/InferencePage.js [392:491]
88 lines of code
4 McCabe index (conditional complexity)

  render() {
    const {modelEndpoints, selectedEndpoint, isInfering, inferenceInputs, rangeInput} = this.state;
    return (
      <OneColumnLayout>
        <Row>
          <Col>
            <h1>Predict</h1>
            <h3>Instruction</h3>
            <ol>
              <li>
                Change the amount of feature to be sent to the model. The number of features <b>must be the same as </b>
                in the training file used to train the model.
              </li>
              <li>
                Enter values for all features
              </li>
              <li>
                Click "Predict" button to get the result with the current model
              </li>
            </ol>
            <hr/>
          </Col>
        </Row>
        <Row className="home-input-box">

          <Col>
            <Row>
              <Col>
                <h3>Inputs</h3>
              </Col>
            </Row>
            <Row className="home-model-selection-box">
              <Col>
                {this.renderModelSelection(modelEndpoints, selectedEndpoint)}
              </Col>
            </Row>
            <Row className="home-model-selection-box">
              <Col>
                <FormGroup row>
                  <Label for="noOfInputs" sm={2}>Number of non-range inputs:</Label>
                  <Col sm={6}>
                    <Input type="number"
                           name="noOfInputs"
                           id="noOfInputs"
                           value={inferenceInputs.length}
                           onChange={e => this.updateNoOfInputs(e.target.value)}
                    />
                  </Col>
                </FormGroup>
              </Col>
            </Row>
            <Row className="home-input-area">
              {this.renderAllInputGroups(inferenceInputs)}
            </Row>

            <Row className="home-input-area">
              <Col>
                <p>The last input is a range value. It will be used as an x-axis for the result below. The range will be
                  from start value to end value (exclusive) with the incremental step</p>
                {this.renderRangeInput(rangeInput)}

                <hr/>
              </Col>
            </Row>


            {/*<Row>*/}
            {/*  <Col>*/}
            {/*    <h3>Preview</h3>*/}
            {/*    <p>The table below shows how all inputs are combined together and sent to backend.</p>*/}
            {/*    {this.renderInputPreview(inferenceInputs, rangeInput)}*/}
            {/*  </Col>*/}
            {/*</Row>*/}

            <Row>
              <Col>
                <LoaderButton
                  color="primary"
                  onClick={this.handleInfer}
                  className="float-right"
                  isLoading={isInfering || (selectedEndpoint === 'Loading...')}
                  loadingText="Loading..."
                  text="Predict"
                />
              </Col>
            </Row>


          </Col>
        </Row>


        <Row className="home-result-graph">
          <Col>
            {this.renderGraph()}
          </Col>
        </Row>
      </OneColumnLayout>
    );
  }