模块设计&编写

工作总结

完成DNA/RNA/Protein序列分析模型表单部分模块编写

组件

DNA/RNA/Protein序列模型训练

代码结构（以DNA为例）

本组件主要任务是完成DNA等生物大分子的结构模型训练的参数传递、大分子序列传递以及训练模型的选择、进度邮件的发送等与大分子训练表单所相关的数据收集、传递给后端。

    <Box>
      <Paper elevation={3} sx={{ overflow: "hidden" }}>
        <StyledHeader icon={<ArticleOutlined />}>Input Dataset</StyledHeader>
        <FastaForm fasta={fasta} setFasta={setFasta} />
        <Box>
          <div className="driver"></div>
          <Button
            variant="outlined"
            onClick={() => setAdvanceOpen(open => !open)}
            sx={{ margin: "0 5px" }}
          >
            {advanceOpen ? <RemoveCircleRounded /> : <AddCircleRounded />}
            <Typography variant="h6" ml={1}>
              Advance options
            </Typography>
          </Button>
          <div className="driver"></div>
        </Box>
        <Collapse in={advanceOpen} appear={false}>
          <Box p={2} pb={0}>
            <RadioGroup
              value={compareTarget}
              onChange={event => setCompareTarget(event.target.value)}
              row
            >
              {compareTargets.map((item, index) => (
                <FormControlLabel/>
              ))}
            </RadioGroup>
          </Box>
          <Divider />
          <Grid container spacing={2} p={2}>
            <Grid item xs={12} sm={12} md={4}>
              {compareTarget === "0" ? (
                <FormGroup sx={{ marginBottom: 2 }}>
                  {trainParameters
                    .filter(item => item.type === "boolean")
                    .map(item => (
                      <FormControlLabel
                        control={
                          <OptionFormSelect
                            checked={modelCompareOptions[item.key]}
                            onChange={handleOptionChange}
                            name={item.key}
                          />
                        }
                        label={parseLabel(item.label, modelCompareOptions)}
                        key={item.key}
                      />
                    ))}
                </FormGroup>
              ) : (
                <Fragment>
                  <Typography variant="h6">
                    Select One Parameter to Compare
                  </Typography>
                  <RadioGroup
                    value={selectedParam}
                    onChange={event => setSelectedParam(event.target.value)}
                  >
                    {trainParameters
                      .filter(
                        item => item.key === "CDHit" || item.type === "boolean"
                      )
                      .map(item => (
                        <FormControlLabel
                          key={item.key}
                          value={item.key}
                          control={<Radio />}
                        />
                      ))}
                  </RadioGroup>
                </Fragment>
              )}
            </Grid>
            <Grid item xs={12} sm={12} md={4}>
              {(compareTarget === "0" || selectedParam === "CDHit") && (
                <Fragment>
                  <Hidden mdUp>
                    <Divider sx={{ margin: "10px 0" }} />
                  </Hidden>
                  <Typography
                    variant={
                      compareTarget === "1" && selectedParam === "CDHit"
                        ? "h6"
                        : "body1"
                    }
                  >
                    {parseLabel(
                      trainParameters.find(item => item.key === "CDHit")?.label,
                      modelCompareOptions
                    )}
                  </Typography>
                  <Box ml={2} mr={2} display="flex" alignItems="flex-start">
                    <Slider
                      track={false}
                      min={0.01}
                      max={1.0}
                      step={0.01}
                      marks={[
                        { value: 0.01, label: "0.01" },
                        { value: 1.0, label: "1.00" },
                      ]}
                      getAriaValueText={(value, index) =>
                        `#${index + 1} ${value.toFixed(2)}`
                      }
                      valueLabelFormat={(value, index) =>
                        `#${index + 1} ${value.toFixed(2)}`
                      }
                      valueLabelDisplay="auto"
                      value={CDHitThreshold}
                      onChange={(_e, value) => setCDHitThreshold(value)}
                      name="CDHit"
                      aria-labelledby="option-cd-hint-group-label"
                    />
                    {compareTarget === "1" && (
                      <Box ml={2} mt="-5px" display="flex">
                        <IconButton
                          onClick={() =>
                            setCDHitThreshold([...CDHitThreshold, 0.8])
                          }
                          aria-label="Add new clustering threshold"
                          title="Add new clustering threshold"
                          color="primary"
                        >
                          <AddRounded />
                        </IconButton>
                        <IconButton
                          onClick={() => setCDHitThreshold([0.8])}
                          aria-label="Reset clustering threshold"
                          title="Reset clustering threshold"
                          color="secondary"
                        >
                          <ReplayRounded />
                        </IconButton>
                      </Box>
                    )}
                  </Box>
                </Fragment>
              )}
            </Grid>
          </Grid>
        </Collapse>
      </Paper>
      <Paper
        elevation={3}
        sx={{ marginTop: 2, overflow: "hidden", paddingBottom: 1 }}
      >
        <StyledHeader
          icon={<AutoAwesomeMotionOutlined />}
          helperText={
            compareTarget === "0"
              ? "?multiple models are supported"
              : "⚠️when comparing between parameters, only one model can be selected"
          }
        >
          {compareTarget === "0"
            ? "Choose your deep learning models for training and comparison"
            : "Choose your deep learning model for training"}
        </StyledHeader>

        <Box sx={{ margin: 2 }}>
          <ModelSelect
            value={models}
            onChange={setModels}
            single={compareTarget === "1"}
          />
        </Box>
      </Paper>
      <Paper elevation={3} sx={{ marginTop: 2, overflow: "hidden" }}>
        <StyledHeader icon={<CloudUploadOutlined />}>Submission</StyledHeader>
        <Box margin={2}>
          <TextField
            value={eMail}
            onChange={({ target: { value } }) => {
              setEMail(value);
            }}
            label="E-mail address"
            fullWidth
            sx={{ mb: 2 }}
          />
          <Typography variant="body2" component="div" marginBottom={2}>
            Model training usually takes a long time, depending on the size of
            the data. Hence, we strongly recommend you to leave your e-mail
            address below so that you will be notified by email when the job is
            done.
          </Typography>
          <Box marginTop={2}>
            <LoadingButton
              onClick={submit}
              loading={uploading}
              variant="contained"
              loadingPosition="start"
              startIcon={<Upload />}
            >
              submit
            </LoadingButton>
            <Button
              onClick={resetData}
              color="error"
              variant="outlined"
              sx={{ marginLeft: 1 }}
            >
              reset
            </Button>
            <Button
              onClick={gotoExample}
              variant="outlined"
              sx={{ marginLeft: 1 }}
            >
              result example
            </Button>
          </Box>
        </Box>
      </Paper>
    </Box>

表单结构较为复杂，涉及到很多参数的设置、模型的选择。主要的思路还是按照输入数据的类型，将表单项总结为一个新的对象，按照对象的结构将数据传递给发送后端请求的模块，完成对后端的数据传递。

demo展示

总结

此类模块的设计是整个前端UI设计的难点，也是整个项目参数最复杂的部分。前后端需要对参数传递的格式、内容、名称、类型等等进行有效地规定与约束，才能尽可能快地完成前后端的连接交互。前端能做的就是将UI设计尽可能完善，给用户一个良好的使用体验；将表单数据按照一定的格式整理收纳，并传送给后端。
下一步将涉及另外一个非常复杂的模块：使用现有模型对生物大分子序列进行分析预测。