@material-ui/lab#ToggleButton TypeScript Examples

PullRequestBoardOptions: FunctionComponent<Props> = (props: Props) => {
  const { value, onClickOption, options } = props;
  return (
    <ToggleButtonGroup
      size="small"
      value={value}
      onChange={(_event, selectedOptions) => onClickOption(selectedOptions)}
      aria-label="Pull Request board settings"
    >
      {options.map(({ icon, value: toggleValue, ariaLabel }, index) => (
        <ToggleButton
          value={toggleValue}
          aria-label={ariaLabel}
          key={`${ariaLabel}-${index}`}
        >
          <Tooltip title={ariaLabel}>
            <Box display="flex" justifyContent="center" alignItems="center">
              {icon}
            </Box>
          </Tooltip>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

render() {
    return (
      <div>
        {/* <Typography variant='caption' display='block'>Platform</Typography>
        <ToggleButtonGroup
          {...{ size: 'small' }}
          value={this.state.device}
          exclusive
          className={this.props.classes.toggleButtonGroup}
          onChange={(e, val) => {
            switch (val) {
              case 'mobile':
                this.setState({ device: Device.Mobile });
                this.props.onboardingDemoRef.current
                  && this.props.onboardingDemoRef.current.onDeviceChange
                  && this.props.onboardingDemoRef.current.onDeviceChange(Device.Mobile);
                break;
              case 'desktop':
                this.setState({ device: Device.Desktop });
                this.props.onboardingDemoRef.current
                  && this.props.onboardingDemoRef.current.onDeviceChange
                  && this.props.onboardingDemoRef.current.onDeviceChange(Device.Desktop);
                break;
            }
          }}
        >
          <ToggleButton value='desktop'>Desktop</ToggleButton>
          <ToggleButton value='mobile'>Mobile</ToggleButton>
        </ToggleButtonGroup> */}
        <Typography variant='caption' display='block'>Signup methods</Typography>
        <ToggleButtonGroup
          size='small'
          value={this.state.signupMethods}
          className={this.props.classes.toggleButtonGroup}
          onChange={(e, val) => {
            const signupMethods = val as SignupMethods[];
            this.setState({ signupMethods: signupMethods });
            setSignupMethodsTemplate(this.props.templater, signupMethods);
          }}
        >
          {/* <ToggleButton
            disabled={this.state.device === Device.Desktop}
            value={SignupMethods.Mobile}>Mobile</ToggleButton> */}
          <ToggleButton
            disabled={this.state.device === Device.Mobile}
            value={SignupMethods.Web}>Web</ToggleButton>
          <ToggleButton value={SignupMethods.Email}>Email</ToggleButton>
          <ToggleButton value={SignupMethods.Anonymous}>Anon</ToggleButton>
          <ToggleButton value={SignupMethods.Sso}>SSO</ToggleButton>
          <ToggleButton value={SignupMethods.Oauth}>OAuth</ToggleButton>
        </ToggleButtonGroup>
        {this.props.showDisplayNameControls && (
          <>
            <Typography variant='caption' display='block'>Display name</Typography>
            <ToggleButtonGroup
              {...{ size: 'small' }}
              value={this.state.collectDisplayName}
              exclusive
              className={this.props.classes.toggleButtonGroup}
              onChange={(e, val) => {
                if (!val) return;
                const displayName = val as Client.AccountFieldsDisplayNameEnum;
                this.setState({ collectDisplayName: displayName });
                this.props.templater.usersOnboardingDisplayName(displayName);
              }}
            >
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.None}>None</ToggleButton>
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.Optional}>Opt</ToggleButton>
              <ToggleButton value={Client.AccountFieldsDisplayNameEnum.Required}>Req</ToggleButton>
            </ToggleButtonGroup>
          </>
        )}
      </div>
    );
  }

OverclockingCard: React.FC = () => {
    const classes = useStyles();
    const dispatch = useDispatch();
    const overclockLevel = useSelector((state: RootState) => state.overclock.level);
    const { enabled } = useSelector((state: RootState) => state.overclock);

    const [rebootRequired, setRebootRequired] = React.useState(false);
    const [enableDialogOpen, setEnableDialogOpen] = React.useState(false);
    const [infoDialogOpen, setInfoDialogOpen] = React.useState(false);

    const handleLevelSelect = (_event: React.MouseEvent<HTMLElement>, level: OverclockLevel | null) => {
        if (level !== null) {
            dispatch(setOverclockLevel(level));
            flushStore();

            if (level !== overclockLevel) {
                setTimeout(() => {
                    setRebootRequired(true);
                }, 1000);
            }
        }
    }

    const openInfoDialog = () => {
        setInfoDialogOpen(true);
    };

    const openEnableDialog = () => {
        setEnableDialogOpen(true);
    }

    const closeEnableDialog = (confirmed: boolean) => {
        if (confirmed) { dispatch(enableOverclocking()); }
        setEnableDialogOpen(false);
    }

    const closeInfoDialog = () => {
        setInfoDialogOpen(false);
    }

    const triggerReboot = () => {
        const msg: CommandMessage = {
            command: Command.Reboot
        };

        daemon.next(msg);
    }


    const cardActions = (
        <Tooltip title="About overclocking" placement="left">
            <IconButton aria-label="delete" color="default" onClick={openInfoDialog}>
                <HelpOutlineIcon />
            </IconButton>
        </Tooltip>
    );

    const rebootButton = (
        <ButtonGroup className={classes.rebootButtonGroup}>
            <Box flexShrink={1}>
                <Tooltip title="Go back" placement="bottom">
                    <Button
                        className={classes.rebootButton}
                        variant="contained"
                        onClick={(_e) => setRebootRequired(false)}
                        size="large">
                        <ArrowBackIcon />
                    </Button>
                </Tooltip>
            </Box>
            <Button
                className={classes.rebootButton}
                variant="contained"
                startIcon={<PowerSettingsNewIcon />}
                onClick={triggerReboot}
                size="large">
                Reboot Pi now
	</Button>
        </ButtonGroup>
    );

    const enableButton = (
        <Button
            className={classes.enableButton}
            variant="contained"
            color="primary"
            startIcon={<SpeedIcon />}
            onClick={openEnableDialog}
            size="large">
            Enable overclocking
	</Button>
    );

    const overclockLevels = [
        OverclockLevel.BaseClock,
        OverclockLevel.Level1,
        OverclockLevel.Level2,
        OverclockLevel.Level3
    ];

    const tooltipTitle = (level: OverclockLevel) => {
        return formatLevelValues(level).map((s, index) => {
            return <span key={index}>{s}<br /></span>;
        });
    };

    const overclockButtons = overclockLevels.map((level, index) => (
        <ToggleButton key={index} value={level} className={classes.toggleButton}>
            <Tooltip title={
                <Typography variant="caption">
                    {tooltipTitle(level)}
                </Typography>
            }
                placement="bottom" enterDelay={1000}>
                <Typography className={classes.buttonLabels}>
                    {levelToString(level)}
                </Typography>
            </Tooltip>
        </ToggleButton>
    ));

    const overclockButtonGroup = (
        <ToggleButtonGroup
            value={overclockLevel}
            exclusive={true}
            className={classes.buttonGroup}
            onChange={handleLevelSelect}>

            {overclockButtons}
        </ToggleButtonGroup>
    );


    return (
        <MainCard title="Overclocking" actions={cardActions}>
            <EnableOverclockingDialog
                open={enableDialogOpen}
                onClose={closeEnableDialog} />
            <OverclockingDialog
                open={infoDialogOpen}
                onClose={closeInfoDialog} />
            <Box display="flex" justifyContent="space-between">
                {!enabled ? enableButton : (rebootRequired ? rebootButton : overclockButtonGroup)}
            </Box>
        </MainCard >
    );
}

TestDetailsModal: React.FunctionComponent<{
  testRun: TestRun;
  touched: boolean;
  handleClose: () => void;
}> = ({ testRun, touched, handleClose }) => {
  const classes = useStyles();
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const testRunDispatch = useTestRunDispatch();

  const stageWidth = (window.innerWidth / 2) * 0.8;
  const stageHeigth = window.innerHeight * 0.6;
  const stageScaleBy = 1.2;
  const [stageScale, setStageScale] = React.useState(1);
  const [stagePos, setStagePos] = React.useState(defaultStagePos);
  const [stageInitPos, setStageInitPos] = React.useState(defaultStagePos);
  const [stageOffset, setStageOffset] = React.useState(defaultStagePos);
  const [processing, setProcessing] = React.useState(false);
  const [isDrawMode, setIsDrawMode] = useState(false);
  const [valueOfIgnoreOrCompare, setValueOfIgnoreOrCompare] = useState(
    "Ignore Areas"
  );
  const [isDiffShown, setIsDiffShown] = useState(false);
  const [selectedRectId, setSelectedRectId] = React.useState<string>();
  const [ignoreAreas, setIgnoreAreas] = React.useState<IgnoreArea[]>([]);
  const [applyIgnoreDialogOpen, setApplyIgnoreDialogOpen] = React.useState(
    false
  );

  const toggleApplyIgnoreDialogOpen = () => {
    setApplyIgnoreDialogOpen(!applyIgnoreDialogOpen);
  };

  const [image, imageStatus] = useImage(
    staticService.getImage(testRun.imageName)
  );
  const [baselineImage, baselineImageStatus] = useImage(
    staticService.getImage(testRun.baselineName)
  );
  const [diffImage, diffImageStatus] = useImage(
    staticService.getImage(testRun.diffName)
  );

  const applyIgnoreAreaText =
    "Apply selected ignore area to all images in this build.";

  React.useEffect(() => {
    fitStageToScreen();
    // eslint-disable-next-line
  }, [image]);

  React.useEffect(() => {
    setIsDiffShown(!!testRun.diffName);
  }, [testRun.diffName]);

  React.useEffect(() => {
    setIgnoreAreas(JSON.parse(testRun.ignoreAreas));
  }, [testRun]);

  const isImageSizeDiffer = React.useMemo(
    () =>
      testRun.baselineName &&
      testRun.imageName &&
      (image?.height !== baselineImage?.height ||
        image?.width !== baselineImage?.width),
    [image, baselineImage, testRun.baselineName, testRun.imageName]
  );

  const handleIgnoreAreaChange = (ignoreAreas: IgnoreArea[]) => {
    setIgnoreAreas(ignoreAreas);
    testRunDispatch({
      type: "touched",
      payload: testRun.ignoreAreas !== JSON.stringify(ignoreAreas),
    });
  };

  const removeSelection = (event: KonvaEventObject<MouseEvent>) => {
    // deselect when clicked not on Rect
    const isRectClicked = event.target.className === "Rect";
    if (!isRectClicked) {
      setSelectedRectId(undefined);
    }
  };

  const deleteIgnoreArea = (id: string) => {
    handleIgnoreAreaChange(ignoreAreas.filter((area) => area.id !== id));
    setSelectedRectId(undefined);
  };

  const saveTestRun = (ignoreAreas: IgnoreArea[], successMessage: string) => {
    testRunService
      .updateIgnoreAreas({
        ids: [testRun.id],
        ignoreAreas,
      })
      .then(() => {
        enqueueSnackbar(successMessage, {
          variant: "success",
        });
      })
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  const saveIgnoreAreasOrCompareArea = () => {
    if (valueOfIgnoreOrCompare.includes("Ignore")) {
      saveTestRun(ignoreAreas, "Ignore areas are updated.");
    } else {
      const invertedIgnoreAreas = invertIgnoreArea(
        image!.width,
        image!.height,
        head(ignoreAreas)
      );

      handleIgnoreAreaChange(invertedIgnoreAreas);
      saveTestRun(
        invertedIgnoreAreas,
        "Selected area has been inverted to ignore areas and saved."
      );
    }
    testRunDispatch({ type: "touched", payload: false });
  };

  const onIgnoreOrCompareSelectChange = (value: string) => {
    if (value.includes("Compare")) {
      setValueOfIgnoreOrCompare("Compare Area");
    } else {
      setValueOfIgnoreOrCompare("Ignore Areas");
    }
  };

  const setOriginalSize = () => {
    setStageScale(1);
    resetPositioin();
  };

  const fitStageToScreen = () => {
    const scale = image
      ? Math.min(
          stageWidth < image.width ? stageWidth / image.width : 1,
          stageHeigth < image.height ? stageHeigth / image.height : 1
        )
      : 1;
    setStageScale(scale);
    resetPositioin();
  };

  const resetPositioin = () => {
    setStagePos(defaultStagePos);
    setStageOffset(defaultStagePos);
  };

  const applyIgnoreArea = () => {
    let newIgnoreArea = ignoreAreas.find((area) => selectedRectId! === area.id);
    if (newIgnoreArea) {
      setProcessing(true);
      testRunService
        .getList(testRun.buildId)
        .then((testRuns: TestRun[]) => {
          let allIds = testRuns.map((item) => item.id);
          let data: UpdateIgnoreAreaDto = {
            ids: allIds,
            ignoreAreas: [newIgnoreArea!],
          };
          testRunService.addIgnoreAreas(data).then(() => {
            setProcessing(false);
            setSelectedRectId(undefined);
            enqueueSnackbar(
              "Ignore areas are updated in all images in this build.",
              {
                variant: "success",
              }
            );
          });
        })
        .catch((error) => {
          enqueueSnackbar("There was an error : " + error, {
            variant: "error",
          });
          setProcessing(false);
        });
    } else {
      enqueueSnackbar(
        "There was an error determining which ignore area to apply.",
        { variant: "error" }
      );
    }
  };

  useHotkeys(
    "d",
    () => !!testRun.diffName && setIsDiffShown((isDiffShown) => !isDiffShown),
    [testRun.diffName]
  );
  useHotkeys("ESC", handleClose, [handleClose]);

  return (
    <React.Fragment>
      <AppBar position="sticky">
        <Toolbar>
          <Grid container justifyContent="space-between">
            <Grid item>
              <Typography variant="h6">{testRun.name}</Typography>
            </Grid>
            {testRun.diffName && (
              <Grid item>
                <Tooltip title={"Hotkey: D"}>
                  <Switch
                    checked={isDiffShown}
                    onChange={() => setIsDiffShown(!isDiffShown)}
                    name="Toggle diff"
                  />
                </Tooltip>
              </Grid>
            )}
            {(testRun.status === TestStatus.unresolved ||
              testRun.status === TestStatus.new) && (
              <Grid item>
                <ApproveRejectButtons testRun={testRun} />
              </Grid>
            )}
            <Grid item>
              <IconButton color="inherit" onClick={handleClose}>
                <Close />
              </IconButton>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      {processing && <LinearProgress />}
      <Box m={1}>
        <Grid container alignItems="center">
          <Grid item xs={12}>
            <Grid container alignItems="center">
              <Grid item>
                <TestRunDetails testRun={testRun} />
              </Grid>
              {isImageSizeDiffer && (
                <Grid item>
                  <Tooltip
                    title={
                      "Image height/width differ from baseline! Cannot calculate diff!"
                    }
                  >
                    <IconButton>
                      <WarningRounded color="secondary" />
                    </IconButton>
                  </Tooltip>
                </Grid>
              )}
            </Grid>
          </Grid>
          <Grid item>
            <Grid container alignItems="center" spacing={2}>
              <Grid item>
                <Select
                  id="area-select"
                  labelId="areaSelect"
                  value={valueOfIgnoreOrCompare}
                  onChange={(event) =>
                    onIgnoreOrCompareSelectChange(event.target.value as string)
                  }
                >
                  {["Ignore Areas", "Compare Area"].map((eachItem) => (
                    <MenuItem key={eachItem} value={eachItem}>
                      {eachItem}
                    </MenuItem>
                  ))}
                </Select>
              </Grid>
              <Grid item>
                <ToggleButton
                  value={"drawMode"}
                  selected={isDrawMode}
                  onClick={() => {
                    setIsDrawMode(!isDrawMode);
                  }}
                >
                  <Add />
                </ToggleButton>
              </Grid>
              <Grid item>
                <IconButton
                  disabled={!selectedRectId || ignoreAreas.length === 0}
                  onClick={() =>
                    selectedRectId && deleteIgnoreArea(selectedRectId)
                  }
                >
                  <Delete />
                </IconButton>
              </Grid>
              <Tooltip title="Clears all ignore areas." aria-label="reject">
                <Grid item>
                  <IconButton
                    disabled={ignoreAreas.length === 0}
                    onClick={() => {
                      handleIgnoreAreaChange([]);
                    }}
                  >
                    <LayersClear />
                  </IconButton>
                </Grid>
              </Tooltip>
              <Tooltip
                title={applyIgnoreAreaText}
                aria-label="apply ignore area"
              >
                <Grid item>
                  <IconButton
                    disabled={!selectedRectId || ignoreAreas.length === 0}
                    onClick={() => toggleApplyIgnoreDialogOpen()}
                  >
                    <Collections />
                  </IconButton>
                </Grid>
              </Tooltip>
              <Grid item>
                <IconButton
                  disabled={!touched}
                  onClick={() => saveIgnoreAreasOrCompareArea()}
                >
                  <Save />
                </IconButton>
              </Grid>
            </Grid>
          </Grid>
          <Grid item>
            <Button
              color="primary"
              disabled={!testRun.testVariationId}
              onClick={() => {
                navigate(
                  `${routes.VARIATION_DETAILS_PAGE}/${testRun.testVariationId}`
                );
              }}
            >
              Baseline history
            </Button>
          </Grid>
          <Grid item>
            <CommentsPopper
              text={testRun.comment}
              onSave={(comment) =>
                testRunService
                  .update(testRun.id, { comment })
                  .then(() =>
                    enqueueSnackbar("Comment updated", {
                      variant: "success",
                    })
                  )
                  .catch((err) =>
                    enqueueSnackbar(err, {
                      variant: "error",
                    })
                  )
              }
            />
          </Grid>
        </Grid>
      </Box>
      <Box
        overflow="hidden"
        minHeight="65%"
        className={classes.drawAreaContainer}
      >
        <Grid container style={{ height: "100%" }}>
          <Grid item xs={6} className={classes.drawAreaItem}>
            <DrawArea
              type="Baseline"
              imageName={testRun.baselineName}
              branchName={testRun.baselineBranchName}
              imageState={[baselineImage, baselineImageStatus]}
              ignoreAreas={[]}
              tempIgnoreAreas={[]}
              setIgnoreAreas={handleIgnoreAreaChange}
              selectedRectId={selectedRectId}
              setSelectedRectId={setSelectedRectId}
              onStageClick={removeSelection}
              stageScaleState={[stageScale, setStageScale]}
              stagePosState={[stagePos, setStagePos]}
              stageInitPosState={[stageInitPos, setStageInitPos]}
              stageOffsetState={[stageOffset, setStageOffset]}
              drawModeState={[false, setIsDrawMode]}
            />
          </Grid>
          <Grid item xs={6} className={classes.drawAreaItem}>
            {isDiffShown ? (
              <DrawArea
                type="Diff"
                imageName={testRun.diffName}
                branchName={testRun.branchName}
                imageState={[diffImage, diffImageStatus]}
                ignoreAreas={ignoreAreas}
                tempIgnoreAreas={JSON.parse(testRun.tempIgnoreAreas)}
                setIgnoreAreas={handleIgnoreAreaChange}
                selectedRectId={selectedRectId}
                setSelectedRectId={setSelectedRectId}
                onStageClick={removeSelection}
                stageScaleState={[stageScale, setStageScale]}
                stagePosState={[stagePos, setStagePos]}
                stageInitPosState={[stageInitPos, setStageInitPos]}
                stageOffsetState={[stageOffset, setStageOffset]}
                drawModeState={[isDrawMode, setIsDrawMode]}
              />
            ) : (
              <DrawArea
                type="Image"
                imageName={testRun.imageName}
                branchName={testRun.branchName}
                imageState={[image, imageStatus]}
                ignoreAreas={ignoreAreas}
                tempIgnoreAreas={JSON.parse(testRun.tempIgnoreAreas)}
                setIgnoreAreas={handleIgnoreAreaChange}
                selectedRectId={selectedRectId}
                setSelectedRectId={setSelectedRectId}
                onStageClick={removeSelection}
                stageScaleState={[stageScale, setStageScale]}
                stagePosState={[stagePos, setStagePos]}
                stageInitPosState={[stageInitPos, setStageInitPos]}
                stageOffsetState={[stageOffset, setStageOffset]}
                drawModeState={[isDrawMode, setIsDrawMode]}
              />
            )}
          </Grid>
        </Grid>
      </Box>
      <ScaleActionsSpeedDial
        onZoomInClick={() => setStageScale(stageScale * stageScaleBy)}
        onZoomOutClick={() => setStageScale(stageScale / stageScaleBy)}
        onOriginalSizeClick={setOriginalSize}
        onFitIntoScreenClick={fitStageToScreen}
      />
      <BaseModal
        open={applyIgnoreDialogOpen}
        title={applyIgnoreAreaText}
        submitButtonText={"Yes"}
        onCancel={toggleApplyIgnoreDialogOpen}
        content={
          <Typography>
            {`All images in the current build will be re-compared with new ignore area taken into account. Are you sure?`}
          </Typography>
        }
        onSubmit={() => {
          toggleApplyIgnoreDialogOpen();
          applyIgnoreArea();
        }}
      />
    </React.Fragment>
  );
}

CatalogGraphPage = (props: {
  relationPairs?: RelationPairs;
  initialState?: {
    selectedRelations?: string[];
    selectedKinds?: string[];
    rootEntityRefs?: string[];
    maxDepth?: number;
    unidirectional?: boolean;
    mergeRelations?: boolean;
    direction?: Direction;
    showFilters?: boolean;
  };
}) => {
  const { relationPairs = ALL_RELATION_PAIRS, initialState } = props;

  const navigate = useNavigate();
  const classes = useStyles();
  const catalogEntityRoute = useRouteRef(entityRouteRef);
  const {
    maxDepth,
    setMaxDepth,
    selectedKinds,
    setSelectedKinds,
    selectedRelations,
    setSelectedRelations,
    unidirectional,
    setUnidirectional,
    mergeRelations,
    setMergeRelations,
    direction,
    setDirection,
    rootEntityNames,
    setRootEntityNames,
    showFilters,
    toggleShowFilters,
  } = useCatalogGraphPage({ initialState });
  const analytics = useAnalytics();
  const onNodeClick = useCallback(
    (node: EntityNode, event: MouseEvent<unknown>) => {
      const nodeEntityName = parseEntityRef(node.id);

      if (event.shiftKey) {
        const path = catalogEntityRoute({
          kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),
          namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),
          name: nodeEntityName.name,
        });

        analytics.captureEvent(
          'click',
          node.title ?? humanizeEntityRef(nodeEntityName),
          { attributes: { to: path } },
        );
        navigate(path);
      } else {
        analytics.captureEvent(
          'click',
          node.title ?? humanizeEntityRef(nodeEntityName),
        );
        setRootEntityNames([nodeEntityName]);
      }
    },
    [catalogEntityRoute, navigate, setRootEntityNames, analytics],
  );

  return (
    <Page themeId="home">
      <Header
        title="Catalog Graph"
        subtitle={rootEntityNames.map(e => humanizeEntityRef(e)).join(', ')}
      />
      <Content stretch className={classes.content}>
        <ContentHeader
          titleComponent={
            <ToggleButton
              value="show filters"
              selected={showFilters}
              onChange={() => toggleShowFilters()}
            >
              <FilterListIcon /> Filters
            </ToggleButton>
          }
        >
          <SupportButton>
            Start tracking your component in by adding it to the software
            catalog.
          </SupportButton>
        </ContentHeader>
        <Grid container alignItems="stretch" className={classes.container}>
          {showFilters && (
            <Grid item xs={12} lg={2} className={classes.filters}>
              <MaxDepthFilter value={maxDepth} onChange={setMaxDepth} />
              <SelectedKindsFilter
                value={selectedKinds}
                onChange={setSelectedKinds}
              />
              <SelectedRelationsFilter
                value={selectedRelations}
                onChange={setSelectedRelations}
                relationPairs={relationPairs}
              />
              <DirectionFilter value={direction} onChange={setDirection} />
              <SwitchFilter
                value={unidirectional}
                onChange={setUnidirectional}
                label="Simplified"
              />
              <SwitchFilter
                value={mergeRelations}
                onChange={setMergeRelations}
                label="Merge Relations"
              />
            </Grid>
          )}
          <Grid item xs className={classes.fullHeight}>
            <Paper className={classes.graphWrapper}>
              <Typography
                variant="caption"
                color="textSecondary"
                display="block"
                className={classes.legend}
              >
                <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move
                around the diagram. Click to change active node, shift click to
                navigate to entity.
              </Typography>
              <EntityRelationsGraph
                rootEntityNames={rootEntityNames}
                maxDepth={maxDepth}
                kinds={
                  selectedKinds && selectedKinds.length > 0
                    ? selectedKinds
                    : undefined
                }
                relations={
                  selectedRelations && selectedRelations.length > 0
                    ? selectedRelations
                    : undefined
                }
                mergeRelations={mergeRelations}
                unidirectional={unidirectional}
                onNodeClick={onNodeClick}
                direction={direction}
                relationPairs={relationPairs}
                className={classes.graph}
                zoom="enabled"
              />
            </Paper>
          </Grid>
        </Grid>
      </Content>
    </Page>
  );
}

function Main() {
  const classes = useStyles();
  const { actions, action, setAction, isBridged, setBridged } = useGUIContext();
  const { dispatchTransaction } = useUpdateTransactionContext();
  const { transactionRunning, action: transactionContextAction } = useTransactionContext();

  const handleOnSwitch = useCallback(
    (event: React.MouseEvent<HTMLElement>, isBridged: boolean) => {
      if (!isNull(isBridged)) {
        setBridged(isBridged);
        dispatchTransaction(
          TransactionActionCreators.setTransferType(
            isBridged ? TransactionTypes.TRANSFER : TransactionTypes.INTERNAL_TRANSFER
          )
        );
      }
    },
    [dispatchTransaction, setBridged]
  );

  const form = action === TransactionTypes.TRANSFER ? classes.transactionFormHeight : classes.formHeight;

  return (
    <>
      <BoxSidebar>
        <div>
          <Typography variant="button" color="secondary">
            Bridges UI
          </Typography>
          <NetworkSides />
          <BridgedLocalWrapper blurred>
            <NetworkStats />
          </BridgedLocalWrapper>
        </div>
        <ButtonExt> Help & Feedback </ButtonExt>
      </BoxSidebar>

      <Container className={classes.ui}>
        {!transactionRunning ? (
          <Paper elevation={24} className={form}>
            <Grid item spacing={6}>
              <Box component="div" display="flex" marginY={2} textAlign="left" width="100%">
                <MenuAction actions={actions} action={action} changeMenu={setAction} />
                {action === TransactionTypes.TRANSFER && (
                  <ToggleButtonGroup
                    size="small"
                    value={isBridged}
                    exclusive
                    onChange={handleOnSwitch}
                    classes={{ root: classes.root }}
                  >
                    <ToggleButton value={false}>Internal</ToggleButton>
                    <ToggleButton value={true}>Bridge</ToggleButton>
                  </ToggleButtonGroup>
                )}
              </Box>
              <ExtensionAccountCheck component={<Sender />} />
              <Box marginY={2} textAlign="center" width="100%">
                <ArrowDownwardIcon fontSize="large" color="primary" />
              </Box>
              <Box>
                <>{ActionComponents[action]}</>
              </Box>
            </Grid>
          </Paper>
        ) : (
          <Paper elevation={24} className={form}>
            <Box className={classes.transactionSubmited}>
              <Check style={{ fontSize: 150 }} color="primary" />
              <Typography color="primary">Transaction Submited</Typography>
            </Box>
          </Paper>
        )}
        <Grid item spacing={6} className={classes.transactions}>
          <Transactions type={transactionContextAction ? transactionContextAction : action} />
        </Grid>
      </Container>
      <SnackBar />
    </>
  );
}