render()

in connectors/grafana-plugin/src/QueryEditor.tsx [193:342]
150 lines of code
18 McCabe index (conditional complexity)

  render() {
    const query = defaults(this.props.query);
    let { expression, prefixPath, condition, control, fillClauses, aggregateFun, paths, options, sqlType, groupBy } =
      query;
    return (
      <>
        {
          <>
            <div className="gf-form">
              <Segment
                onChange={({ value: value = selectType[0] }) => {
                  const { onChange, query } = this.props;
                  if (value === selectType[0]) {
                    this.props.query.sqlType = selectType[0];
                    this.props.query.aggregateFun = '';
                    if (this.props.query.paths) {
                      const nextTimeSeries = this.props.query.paths.filter((_, i) => i < 0);
                      const nextOptions = this.props.query.options.filter((_, i) => i < 0);
                      this.onTimeSeriesChange(nextTimeSeries, nextOptions, true);
                    }
                    if (this.props.query.groupBy?.samplingInterval) {
                      this.props.query.groupBy.samplingInterval = '';
                    }
                    if (this.props.query.groupBy?.groupByLevel) {
                      this.props.query.groupBy.groupByLevel = '';
                    }
                    if (this.props.query.groupBy?.step) {
                      this.props.query.groupBy.step = '';
                    }
                    this.props.query.condition = '';
                    this.props.query.fillClauses = '';
                    this.props.query.isDropDownList = false;
                    this.setState({
                      isDropDownList: false,
                      sqlType: selectType[0],
                      shouldAdd: true,
                      aggregateFun: '',
                      fillClauses: '',
                      condition: '',
                    });
                    onChange({ ...query, sqlType: value, isDropDownList: false });
                  } else {
                    this.props.query.sqlType = selectType[1];
                    this.props.query.expression = [''];
                    this.props.query.prefixPath = [''];
                    this.props.query.condition = '';
                    this.props.query.control = '';
                    this.props.query.isDropDownList = true;
                    this.setState({
                      isDropDownList: true,
                      sqlType: selectType[1],
                      expression: [''],
                      prefixPath: [''],
                      condition: '',
                      control: '',
                    });
                    onChange({ ...query, sqlType: value, isDropDownList: true });
                  }
                }}
                options={selectType.map(toOption)}
                value={sqlType ? sqlType : this.state.sqlType}
                className="query-keyword width-10"
              />
            </div>
            {!this.state.isDropDownList && (
              <>
                <div className="gf-form">
                  <QueryInlineField label={'SELECT'}>
                    <SelectValue
                      expressions={expression ? expression : this.state.expression}
                      onChange={this.onSelectValueChange}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'FROM'}>
                    <FromValue
                      prefixPath={prefixPath ? prefixPath : this.state.prefixPath}
                      onChange={this.onFromValueChange}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'WHERE'}>
                    <WhereValue
                      condition={condition ? condition : this.state.condition}
                      onChange={this.onWhereValueChange}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'CONTROL'}>
                    <ControlValue
                      control={control ? control : this.state.control}
                      onChange={this.onControlValueChange}
                    />
                  </QueryInlineField>
                </div>
              </>
            )}
            {this.state.isDropDownList && (
              <>
                <div className="gf-form">
                  <QueryInlineField label={'TIME-SERIES'}>
                    <TimeSeries
                      timeSeries={paths ? paths : this.state.timeSeries}
                      onChange={this.onTimeSeriesChange}
                      variableOptionGroup={options ? options : this.state.options}
                      shouldAdd={this.state.shouldAdd}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'FUNCTION'}>
                    <AggregateFun
                      aggregateFun={aggregateFun ? aggregateFun : this.state.aggregateFun}
                      onChange={this.onAggregationsChange}
                      variableOptionGroup={selectElement.map(toOption)}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'WHERE'}>
                    <WhereValue
                      condition={condition ? condition : this.state.condition}
                      onChange={this.onWhereValueChange}
                    />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'GROUP BY'}>
                    <QueryField label={'SAMPLING INTERVAL'} />
                    <GroupByLabel groupBy={groupBy ? groupBy : this.state.groupBy} onChange={this.onGroupByChange} />
                  </QueryInlineField>
                </div>
                <div className="gf-form">
                  <QueryInlineField label={'FILL'}>
                    <FillValue
                      fill={fillClauses ? fillClauses : this.state.fillClauses}
                      onChange={this.onFillsChange}
                    />
                  </QueryInlineField>
                </div>
              </>
            )}
          </>
        }
      </>
    );
  }