Method render

src/LAMAPFVisualizer.jsx:638–1216

()

  }

  render() {
    return (
      <BaseLayout title="Large Agent 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>Large Agent MAPF</b>, and the algorithm you
                    choose is <b>MC-CBS</b>. The available improvement techniques include:{" "}
                    <b>Mutex Propagation</b>.
                  </MKTypography>
                  <MKTypography variant="body2" mb={1}>
                    3. In <b>Large Agent MAPF</b>, we denote the location of an agent by the
                    coordinate of its top-left grid.
                  </MKTypography>
                  <MKTypography variant="body2" mb={1}>
                    4. When you use <b>Mutex Propagation</b>, please make sure all agents are no
                    smaller than <b>2x2</b>. Agent with height or width of 1 is currently not
                    supported.
                  </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">