render()

in frontend/src/App.js [142:248]

• 93 lines of code
• 1 McCabe index (conditional complexity)

  render() {
    const { classes } = this.props;
    const createMarkup = htmlString => ({ __html: htmlString });

    return (
      <div className={classes.root}>

        <Grid container justify='center' alignItems="stretch" spacing={8} xs={12}>
          {/* <Grid item xs={10}>
            <img src={require('./images/header.jpg')} alt="Header" style={{height:"100%", width: "100%"}}/>
          </Grid> */}
          <Grid item xs={10}>
            <Typography variant="h2" style={{textAlign: "center"}}>
              AWS Natural Language Search
            </Typography>
          </Grid>
          <Grid item xs={10}>
            <Paper className={classes.paper}>
              <Typography variant="h5">Step 1: Select the number of similar products (K neighbors):</Typography>
              <p/>
              <FormControl className={classes.formControl}>
                <Select
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={this.state.k}
                  onChange={this.handleKChange}
                >
                  <MenuItem value={3}>Three</MenuItem>
                  <MenuItem value={4}>Four</MenuItem>
                  <MenuItem value={5}>Five</MenuItem>
                  <MenuItem value={6}>Six</MenuItem>
                </Select>
              </FormControl>
            </Paper>
          </Grid>

          <Grid item xs={10}>
            <Paper className={classes.paper}>
            <Typography variant="h5">Step 2: Enter a natural language search query about dresses. Try entering "I want a summery dress that's flowery and yellow": </Typography>
            <p/>
              <form noValidate autoComplete="off" onSubmit={this.handleSearchSubmit}>
                <Input
                  style={{width:'80%'}}
                  placeholder="Search"
                  onChange={this.handleFormChange}
                  value={this.state.searchText}
                  id="standard-basic"
                  margin="dense"
                  width={1200}
                  // fullWidth
                  endAdornment={
                    <InputAdornment position="end">
                      <SearchIcon />
                    </InputAdornment>
                  }
                />
                <Button
                type='submit'
                style={{background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'}}
                >
                  Submit
                </Button>
              </form>
            </Paper>
          </Grid>

          
          <Grid item xs={10}>
              <Paper className={classes.paper2}>
                <Typography variant="h5">Step 3: Results!</Typography>
                <p/>
                  <BorderLinearProgress
                      variant="determinate"
                      color="secondary"
                      value={this.state.completed}
                  />
                <p/>
              </Paper>
              <p/>
              <Paper className={classes.paper2}>
                <Typography variant="h6">KNN Search</Typography>
                <GridList cellHeight={200} cols={3}>
                  {this.state.pictures.map((tile) => (
                    <GridListTile key={tile.img} cols={tile.cols || 1}>
                      <img src={tile.img} alt="Similar products..." style={{height:"200px", width: "auto"}} />
                    </GridListTile>
                  ))}
                </GridList>
              </Paper>
              <p/>
              <Paper className={classes.paper2}>
                <Typography variant="h6">Elasticsearch <span style={{ backgroundColor:"#f18973"}} >Match</span> Search</Typography>
                  <GridList cellHeight={450} cols={3}>
                    {this.state.results.map((tile) => (
                      <Grid item xs={4}>
                        <img src={tile.img} alt="Similar products..." style={{height:"200px", width: "auto"}} />
                        <Typography>
                          <p dangerouslySetInnerHTML={createMarkup(tile.description)} />
                        </Typography>
                      </Grid>
                    ))}
                  </GridList>
              </Paper>
            </Grid>
        </Grid>
      </div>
  );}