Method render

src/EECBSVisualizer.jsx:495–1069

()

  }

  render() {
    return (
      <BaseLayout title="Classic MAPF">
        <MKBox component="section">
          <Modal
            open={this.state.isInfoDialogOpen}
            onClose={() => {
              this.setState({ isInfoDialogOpen: false });
            }}
            sx={{ display: "grid", placeItems: "center" }}
          >
            <Slide direction="down" in={this.state.isInfoDialogOpen} timeout={500}>
              <MKBox
                position="relative"
                width="50vw"
                display="flex"
                flexDirection="column"
                borderRadius="xl"
                variant="gradient"
                shadow="sm"
              >
                <MKBox display="flex" alginItems="center" justifyContent="center" p={2}>
                  <MKTypography variant="h4">A few things to know</MKTypography>
                </MKBox>
                <Divider sx={{ my: 0 }} />

                <MKBox px={6} py={3} textAlign="left">
                  <MKTypography variant="body2" mb={1}>
                    1. For better display of the map, the number of rows are restricted to be no
                    more that the number of columns. So if you want to add a map with more rows than
                    columns, simply swap these two numbers.
                  </MKTypography>
                  <MKTypography variant="body2" mb={1}>
                    2. The MAPF variant you choose is <b>classic MAPF</b>, and the algorithm you
                    choose is <b>EECBS</b>. The available improvement techniques include:{" "}
                    <b>
                      High-level admissible heuristics, High-level solvers, Suboptimal solver,
                      Inadmissible heuristics, Prioritizing conflict, Rectangle reasoning, Corridor
                      reasoning, Bypassing conflict, Disjoint splitting, Target reasoning.
                    </b>
                    .
                  </MKTypography>
                </MKBox>
                <Divider light sx={{ my: 0 }} />
                <MKBox display="flex" justifyContent="right" py={1} px={1.5}>
                  <MKButton onClick={() => this.setState({ isInfoDialogOpen: false })}>
                    ok, got it
                  </MKButton>
                </MKBox>
              </MKBox>
            </Slide>
          </Modal>
        </MKBox>
        <MKBox component="section">
          <Modal
            open={this.state.isDialogOpen}
            onClose={() => {
              this.setState({ isDialogOpen: false });