@material-ui/core#LinearProgress TypeScript Examples

generateLinearProgressWithLabel = (rate: number) => {
    return (
        <div style={{ display: "flex", alignItems: "center" }}>
            <div style={{ width: "100%" }}>
                <LinearProgress variant="determinate" value={rate} />
            </div>
            <div style={{ minWidth: 35 }}>
                <Typography variant="body2">{`${Math.round(rate)}%`}</Typography>
            </div>
        </div>
    );
}

WidgetContent = ({
  error,
  loading,
  lastRun,
  branch,
}: {
  error?: Error;
  loading?: boolean;
  lastRun: WorkflowRun;
  branch: string;
}) => {
  const classes = useStyles();
  if (error) return <Typography>Couldn't fetch latest {branch} run</Typography>;
  if (loading) return <LinearProgress />;
  return (
    <StructuredMetadataTable
      metadata={{
        status: (
          <>
            <WorkflowRunStatus
              status={lastRun.status}
              conclusion={lastRun.conclusion}
            />
          </>
        ),
        message: lastRun.message,
        url: (
          <Link to={lastRun.githubUrl ?? ''}>
            See more on GitHub{' '}
            <ExternalLinkIcon className={classes.externalLinkIcon} />
          </Link>
        ),
      }}
    />
  );
}

TourChecklistGroup = (props: {
  title: string,
  guides: React.ReactNode,
  completePerc: number;
  defaultExpanded?: boolean;
}) => {
  const classes = useStyles();
  const [expand, setExpand] = useState<boolean | undefined>(undefined);
  const expandWithDefault = expand === undefined ? !!props.defaultExpanded : expand;
  return (
    <>
      <div className={classNames(
        classes.checklistGroup,
        props.completePerc >= 100 && classes.areaCompleted,
      )}>
        <ListItem button onClick={() => setExpand(!expandWithDefault)}>
          <Typography variant='h5'>{props.title}</Typography>
          <div className={classes.flexGrow} />
          <ExpandIcon expanded={expandWithDefault} />
        </ListItem>
        <LinearProgress
          variant='determinate'
          value={props.completePerc}
          classes={{
            determinate: classes.progressBackground,
          }}
        />
      </div>
      <Collapse in={expandWithDefault}>
        {props.guides}
      </Collapse>
    </>
  );
}

export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
  const classes = useStyles();

  return (
    <Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
      <Paper className={classes.paper}>
        <Typography variant="h4" component="h1" className={classes.wordmark}>
          firetable
        </Typography>
        <Typography variant="overline" className={classes.projectName}>
          {process.env.REACT_APP_FIREBASE_PROJECT_ID}
        </Typography>
        {children}

        {loading && <LinearProgress className={classes.progress} />}
      </Paper>
    </Div100vh>
  );
}

Content = () => {
  const collection = useSelector(collectionDetailsSelector);
  const collectionLoading = useSelector(collectionLoadingSelector);
  const collectionErrored = useSelector(collectionErrorSelector);

  if (collectionLoading) {
    return <LinearProgress />;
  }

  if (collectionErrored) {
    return <FullScreenMessage message="Collection not found" />;
  }

  if (collection?.sites.length === 0) {
    return (
      <FullScreenMessage message="There are no sites in your dashboard. Add sites to your dashboard to monitor multiple locations in a single view." />
    );
  }

  return collection ? (
    <Container>
      <Header collection={collection} />
      <Grid container justify="center" spacing={2}>
        <Grid item xs={12} sm={11} md={6}>
          <Map collection={collection} />
        </Grid>
        <Grid item xs={12} sm={11} md={6}>
          <Info collection={collection} />
        </Grid>
      </Grid>
      <Table collection={collection} />
    </Container>
  ) : null;
}

LockedTokensBar = styled(LinearProgress)(({ theme }) => ({
  width: "100%",
  height: "8px",
  marginTop: "15px",
  marginBottom: "43px",
  "&.MuiLinearProgress-colorSecondary": {
    background: theme.palette.primary.light,
  },

  ["@media (max-width:1030px)"]: { 
    marginTop: "13px",
    marginBottom: "40px",
  },
}))

function MapTooltip({ classes }: TooltipProps) {
  const popup = useSelector(tooltipSelector);
  const { t, i18n } = useSafeTranslation();
  return popup.showing && popup.coordinates ? (
    <Popup
      anchor="bottom"
      coordinates={popup.coordinates}
      className={classes.popup}
    >
      <h4>
        {isEnglishLanguageSelected(i18n)
          ? popup.locationName
          : popup.locationLocalName}
      </h4>
      {Object.entries(popup.data)
        .filter(([, value]) => value.coordinates === popup.coordinates)
        .map(([key, value]) => (
          <h4 key={key}>
            {t(key)}: {value.data}
          </h4>
        ))}

      {popup.wmsGetFeatureInfoLoading ? <LinearProgress /> : null}
    </Popup>
  ) : null;
}

export function RoutingProgress() {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress > 99.999) {
          clearInterval(timer);
          return 100;
        }
        return oldProgress + (100 - oldProgress) / 8;
      });
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <LinearProgress
      color="secondary"
      variant={progress < 100 ? "determinate" : "indeterminate"}
      value={progress}
      className={classes.root}
    />
  );
}

FullScreenLoading: FunctionComponent<FullScreenLoadingProps> = ({ displayed = true }) => {
  const classes = useStyles();

  if (!displayed) return null;

  return (
    <div className={clsx(classes.background, classes.alwaysOnTop)}>
      <div className={classes.loadingHeader} />
      <div className={classes.loadingBody}>
        {/* Use a bare PNG image. No weird WEBP handling should prevent rendering this. */}
        <NextImage
          priority
          src={'/images/logo.png'}
          width={80}
          height={80}
          className={classes.logo}
          alt="GenshinMap"
        />
        <Typography variant="h3">{t('loading')}</Typography>
        <LinearProgress className={classes.progress} />
      </div>
      <div className={classes.loadingFooter}>
        <Typography className={classes.subtitle}>
          {f('version-format', { version: getApplicationVersion() })}
        </Typography>
      </div>
    </div>
  );
}

Loading = () => {
  const layoutContext = useContext(LayoutContext);
  const loading = layoutContext.loading;
  const lp = <LinearProgress />;

  return (
    <Box style={{ height: '4px' }}>{loading ? lp : null}</Box>

  );
}

Experiments = function (): JSX.Element {
  debug('ExperimentsPage#render')

  const { isLoading, data: experiments, error } = useDataSource(() => ExperimentsApi.findAll(), [])

  useDataLoadingError(error, 'Experiment')

  return (
    <Layout headTitle='Experiments' flexContent>
      {isLoading ? <LinearProgress /> : <ExperimentsTableAgGrid experiments={experiments || []} />}
    </Layout>
  )
}

export function LinearProgressWithLabel(props: LinearProgressProps & { value: number; min: number; max: number; }) {
  return props.value > 0 ? (
      <div style={{ width: '98%' }}>
        <Box display="flex" alignItems="center">
          <Box width="100%" mr={1}>
            <LinearProgress variant="determinate" value={normalise(props.value, props.min, props.max)} />
          </Box>
          <Box minWidth={35} style={{ whiteSpace: "nowrap" }}>
            <Typography variant="body2" color="textSecondary">
              {`${Math.round(normalise(props.value, props.min, props.max))}% (${props.value}/${props.max})`}
            </Typography>
          </Box>
        </Box>
      </div>
  ) : null;
}

BottomProgress = withStyles({
    root: {
        marginTop: 'calc(var(--height) - 6.62px)',
        height: '6.5px'
    },
    colorPrimary: {
        backgroundColor: '#567d2e'
    },
    barColorPrimary: {
        backgroundColor: '#96c267'
    }
})(LinearProgress)

export function CloneWikiDoneButton({ form, isCreateMainWorkspace, errorInWhichComponentSetter }: IWikiWorkspaceFormProps): JSX.Element {
  const { t } = useTranslation();
  const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateCloneWiki(
    isCreateMainWorkspace,
    form,
    errorInWhichComponentSetter,
  );
  const onSubmit = useCloneWiki(isCreateMainWorkspace, form, wikiCreationMessageSetter, hasErrorSetter, errorInWhichComponentSetter);
  const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
  if (hasError) {
    return (
      <>
        <CloseButton variant="contained" disabled>
          {wikiCreationMessage}
        </CloseButton>
        {wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
      </>
    );
  }
  return (
    <>
      {inProgressOrError && <LinearProgress color="secondary" />}
      <Snackbar open={logPanelOpened} autoHideDuration={5000} onClose={() => logPanelSetter(false)}>
        <Alert severity="info">{wikiCreationMessage}</Alert>
      </Snackbar>

      {isCreateMainWorkspace ? (
        <CloseButton variant="contained" color="secondary" disabled={inProgressOrError} onClick={onSubmit}>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.CloneWiki')}
          </Typography>
          <WikiLocation>{form.wikiFolderLocation}</WikiLocation>
        </CloseButton>
      ) : (
        <CloseButton variant="contained" color="secondary" disabled={inProgressOrError} onClick={onSubmit}>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.CloneWiki')}
          </Typography>
          <WikiLocation>{form.wikiFolderLocation}</WikiLocation>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.AndLinkToMainWorkspace')}
          </Typography>
        </CloseButton>
      )}
    </>
  );
}

AppNavMac: React.FC<AppNavMacProps> = (props) => {
  const theme = useTheme();
  const styles = useStyles();
  const { title } = props;
  const settings = useTypedSelector(state => state.settings);
  const status = useTypedSelector(state => state.status);

  const [open, setOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setOpen(!open);
  };

  return (
    <div className={styles.appNavWrapper}>
      <AdaptiveAppBar position="fixed" className={styles.appBar}>
        <Toolbar className={styles.toolBar} variant="dense">
          <div className={styles['disableDrag']}>
            {
              !settings.fixedMenu && (
                <IconButton
                  color="inherit"
                  edge="start"
                  onClick={handleDrawerToggle}
                >
                  <MenuIcon className={styles.menuButton} />
                </IconButton>
              )
            }
              <span className={styles.title}>{title}</span>
          </div>
        </Toolbar>
        <LinearProgress className={clsx(!status.waiting ? styles.visibilityHidden : '')} />
      </AdaptiveAppBar>
      <nav className={styles.drawer}>
          <AdaptiveDrawer
            mode={settings.fixedMenu ? 'absolute' : 'fixed'}
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={open}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true
            }}
          >
            <DrawerMenu hideIcon={settings.fixedMenu} onClick={handleDrawerToggle} />
          </AdaptiveDrawer>
      </nav>
    </div>
  );
}

Progress = () => {

  const context = useContext(LayoutContext);
  const classes = useStyles();

  const [showResetConfirmation, setShowResetConfirmation] = useState(false);

  const onResetClicked = () => {
    setShowResetConfirmation(true);
  };

  const onConfirmationCancel = () => { setShowResetConfirmation(false); };
  const onConfirmationClose = () => { setShowResetConfirmation(false); };
  const onConfirmationOk = () => {
    context.setProgress({ challenges: {} });
    context.setChallengesDone(0);
    context.setProgressPercentage(0);
    ProgressService.clearProgress();
    setShowResetConfirmation(false);

  };

  return (
    <Box className={classes.progressContainer}>
      <Box className={classes.progressBox}>
        <Box><Typography>Your Progress: {context.challengesDone}</Typography></Box>
        <LinearProgress variant="determinate" color="secondary" value={context.progressPercentage} className={classes.progress} />
        <Box><Typography>{Challenges.length}</Typography> </Box>
      </Box>
      <Box>
        <IconButton className={classes.resetButton} aria-label="delete" title="Reset all progress" onClick={onResetClicked}>
          <RotateLeftIcon />
        </IconButton>
      </Box>

      <Confirmation
        title="Reset All Progress"
        isOpen={showResetConfirmation}
        message="Are you sure you want to proceed? All progress will be lost"
        negativeButton="Cancel"
        onClose={onConfirmationClose}
        onNegativeButtonClick={onConfirmationCancel}
        onPositiveButtonClick={onConfirmationOk}
        positiveButton="Sure!" />
    </Box>
  );
}

export function ExistedWikiDoneButton({
  form,
  isCreateMainWorkspace,
  isCreateSyncedWorkspace,
  errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateMainWorkspace: boolean; isCreateSyncedWorkspace: boolean }): JSX.Element {
  const { t } = useTranslation();
  const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateExistedWiki(
    isCreateMainWorkspace,
    isCreateSyncedWorkspace,
    form,
    errorInWhichComponentSetter,
  );
  const onSubmit = useExistedWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, wikiCreationMessageSetter, hasErrorSetter, errorInWhichComponentSetter);
  const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
  if (hasError) {
    return (
      <>
        <CloseButton variant="contained" disabled>
          {wikiCreationMessage}
        </CloseButton>
        {wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
      </>
    );
  }
  return (
    <>
      {inProgressOrError && <LinearProgress color="secondary" />}
      <Snackbar open={logPanelOpened} autoHideDuration={5000} onClose={() => logPanelSetter(false)}>
        <Alert severity="info">{wikiCreationMessage}</Alert>
      </Snackbar>

      {isCreateMainWorkspace ? (
        <CloseButton variant="contained" color="secondary" disabled={inProgressOrError} onClick={onSubmit}>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.ImportWiki')}
          </Typography>
          <WikiLocation>{form.wikiFolderLocation}</WikiLocation>
        </CloseButton>
      ) : (
        <CloseButton variant="contained" color="secondary" disabled={inProgressOrError} onClick={onSubmit}>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.ImportWiki')}
          </Typography>
          <WikiLocation>{form.wikiFolderLocation}</WikiLocation>
          <Typography variant="body1" display="inline">
            {t('AddWorkspace.AndLinkToMainWorkspace')}
          </Typography>
        </CloseButton>
      )}
    </>
  );
}

SurveyPoint = ({ match }: SurveyPointProps) => {
  const { id, pointId } = match.params;
  const siteIdNumber = parseInt(id, 10);
  const pointIdNumber = parseInt(pointId, 10);

  const dispatch = useDispatch();
  const site = useSelector(siteDetailsSelector);
  const liveData = useSelector(liveDataSelector);
  const siteLoading = useSelector(siteLoadingSelector);
  const surveysLoading = useSelector(surveyListLoadingSelector);
  const timeSeriesRangeLoading = useSelector(
    siteTimeSeriesDataRangeLoadingSelector
  );
  const { hobo: hoboBottomTemperatureRange } =
    useSelector(siteTimeSeriesDataRangeSelector)?.bottomTemperature || {};
  const loading = siteLoading || surveysLoading || timeSeriesRangeLoading;

  const hasSpotterData = Boolean(liveData?.topTemperature);
  const hasRange = !!(
    hoboBottomTemperatureRange?.data &&
    hoboBottomTemperatureRange.data.length > 0
  );
  const showChart = hasSpotterData || hasRange;

  // Always scroll to top on first render
  useEffect(() => {
    window.scrollTo(0, 0);
    return () => {
      dispatch(clearTimeSeriesDataRange());
      dispatch(clearTimeSeriesData());
    };
  }, [dispatch]);

  // Get HOBO data range
  useEffect(() => {
    dispatch(siteTimeSeriesDataRangeRequest({ siteId: id, pointId }));
  }, [dispatch, id, pointId]);

  useEffect(() => {
    if (!site || site.id !== siteIdNumber) {
      dispatch(siteRequest(id));
      dispatch(liveDataRequest(id));
      dispatch(surveysRequest(id));
    }
  }, [dispatch, id, pointId, site, siteIdNumber]);

  return (
    <>
      <NavBar searchLocation />
      {loading && <LinearProgress />}
      {!loading && site && (
        <>
          <BackButton siteId={id} bgColor={BG_COLOR} />
          <InfoCard site={site} pointId={pointIdNumber} bgColor={BG_COLOR} />
          {showChart && (
            <MultipleSensorsCharts
              disableGutters={false}
              site={site}
              pointId={pointId}
              surveysFiltered
              displayOceanSenseCharts={false}
            />
          )}
          <SurveyHistory
            site={site}
            pointId={pointIdNumber}
            bgColor={BG_COLOR}
          />
          <Footer />
        </>
      )}
    </>
  );
}

CallStatusTable: React.FC<CallStatusTableProps> = ({
  recipients,
  meta,
  loading,
  pageCount,
  rowsPerPage,
  setRowsPerPage,
  currentPage,
  setCurrentPage,
}) => {
  const rowsPerPageOptions = useRowsPerPageOptions(meta?.total);

  const onChangeRowsPerPage = useCallback(
    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      const rows = parseInt(event.target.value, 10);
      setRowsPerPage(rows);
      setCurrentPage(0);
    },
    [setRowsPerPage, setCurrentPage]
  );

  const onChangePagination = useCallback(
    (event: unknown, value: number) => {
      setCurrentPage(value);
    },
    [setCurrentPage]
  );

  return (
    <>
      {recipients && recipients.length > 0 && (
        <>
          <TableContainer
            component={Paper}
            style={{
              marginBottom: loading ? '0' : '4px',
            }}
          >
            <Table
              aria-label="Notification recipients calls details and statuses"
              size="small"
              data-testid={RECIPIENTS_TABLE_TEST_ID}
            >
              <TableHead>
                <TableRow>
                  <TableCell>Number</TableCell>
                  <TableCell>Status</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {recipients?.map((recipient) => (
                  <TableRow key={recipient.callSid}>
                    <TableCell>{recipient.to}</TableCell>
                    <TableCell>{recipient.status}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          {loading && <LinearProgress />}
        </>
      )}
      {pageCount > 0 && meta.total && (
        <TablePagination
          data-testid={PAGINATOR_TEST_ID}
          rowsPerPageOptions={rowsPerPageOptions}
          component="div"
          page={currentPage}
          count={meta.total}
          rowsPerPage={rowsPerPage}
          onChangePage={onChangePagination}
          onChangeRowsPerPage={onChangeRowsPerPage}
        />
      )}
    </>
  );
}

render() {
    if (!this.props.idea
      || !this.props.credits) return null;

    const fundGoal = this.props.idea.fundGoal && this.props.idea.fundGoal > 0
      ? this.props.idea.fundGoal : undefined;
    const fundPerc = Math.floor(100 * (this.props.idea.funded || 0) / (fundGoal || this.props.maxFundAmountSeen));
    const fundPercNew = this.props.fundAmountDiff ? Math.floor(100 * ((this.props.idea.funded || 0) + this.props.fundAmountDiff) / (fundGoal || this.props.maxFundAmountSeen)) : fundPerc;
    const fundFractionDisplay = (
      <CreditFractionView
        numerator={(this.props.idea.funded || 0) + (this.props.fundAmountDiff || 0)}
        numeratorClassName={this.props.classes.fundingAmount}
        denominator={this.props.idea.fundGoal}
        denominatorClassName={this.props.classes.fundingGoal}
        additionalSuffix='raised'
        credits={this.props.credits}
      />
    );
    const fundRightSide = this.props.overrideRight || fundGoal && (
      <Typography variant='body1'>
        <span className={this.props.classes.fundingGoal}>
          {fundPercNew}
          &nbsp;%
        </span>
      </Typography>
    );
    return (
      <div ref={this.props.fundingBarRef} style={this.props.style} className={this.props.classes.container}>
        <div style={{
          display: 'flex',
          alignItems: 'baseline',
        }}>
          {fundFractionDisplay}
          <div style={{ flexGrow: 1 }}>&nbsp;</div>
          {fundRightSide}
        </div>
        <LinearProgress
          variant='buffer'
          value={Math.min(fundPercNew, fundPerc, 100)}
          valueBuffer={Math.min(Math.max(fundPercNew, fundPerc), 100)}
          classes={{
            bar2Buffer: `${this.props.classes.fundingBarTransition} ${fundGoal ? this.props.classes.fundingDiffBar : this.props.classes.fundingDiffBarNoGoal}`,
            barColorPrimary: `${this.props.classes.fundingBarColorPrimary} ${this.props.classes.fundingBarTransition} ${fundGoal ? this.props.classes.fundingBar : this.props.classes.fundingBarNoGoal}`,
            dashedColorPrimary: this.props.classes.fundingBufferUndash,
            root: fundGoal ? this.props.classes.fundingBarBackground : this.props.classes.fundingBarBackgroundNoGoal,
          }}
        />
      </div>
    );
  }

Surveys = ({ match, isView, classes }: SurveysProps) => {
  const siteDetails = useSelector(siteDetailsSelector);
  const loading = useSelector(siteLoadingSelector);
  const error = useSelector(siteErrorSelector);
  const dispatch = useDispatch();
  const siteId = match.params.id;
  const surveyId = match.params.sid;

  useEffect(() => {
    if (!siteDetails || `${siteDetails.id}` !== siteId) {
      dispatch(siteRequest(siteId));
      dispatch(liveDataRequest(siteId));
    }
  }, [dispatch, siteId, siteDetails]);

  if (loading) {
    return (
      <>
        <NavBar searchLocation={false} />
        <LinearProgress />
      </>
    );
  }

  return (
    <>
      <NavBar searchLocation />
      <>
        {/* eslint-disable-next-line no-nested-ternary */}
        {siteDetails && !error ? (
          isView ? (
            <ViewSurvey site={siteDetails} surveyId={surveyId} />
          ) : (
            <NewSurvey site={siteDetails} />
          )
        ) : (
          <Container className={classes.noData}>
            <Grid container direction="column" alignItems="center">
              <Grid item>
                <Typography gutterBottom color="primary" variant="h2">
                  No Data Found
                </Typography>
              </Grid>
            </Grid>
          </Container>
        )}
      </>
      <Footer />
    </>
  );
}

export function ViewProgress({
  state,
}: {
  state: ProgressAsLoading | { loading: boolean };
}) {
  const { Progress } = useApp().getComponents();

  const stateAsSingleProgress = state as ProgessAsSingle;
  const stateAsStepProgress = state as ProgessAsSteps;

  if (
    !stateAsSingleProgress.progress &&
    !stateAsSingleProgress.progressBuffer &&
    !stateAsStepProgress.steps
  ) {
    // Simple spinner
    return <Progress />;
  } else if (stateAsSingleProgress.progress !== undefined) {
    // Simple _single_ progress
    return (
      <Box sx={{ width: '100%' }}>
        <LinearProgress
          variant="buffer"
          value={(stateAsSingleProgress.progress ?? 0) * 100}
          valueBuffer={(stateAsSingleProgress.progressBuffer ?? 0) * 100}
        />
      </Box>
    );
  }

  // Multi-step progresses

  return (
    <Box sx={{ width: '100%' }}>
      <Timeline>
        {stateAsStepProgress.steps.map((step, index) => (
          <TimelineItem key={index}>
            <TimelineOppositeContent>{step.title}</TimelineOppositeContent>
            <TimelineSeparator>
              <TimelineDot color={getDotColor(step)} />
              {index < stateAsStepProgress.steps.length - 1 ? (
                <TimelineConnector />
              ) : null}
            </TimelineSeparator>
            <TimelineContent>
              {!step.progress && !step.progressBuffer ? null : (
                <LinearProgress
                  style={stepProgressStyle}
                  variant="buffer"
                  value={(step.progress ?? 0) * 100}
                  valueBuffer={(step.progressBuffer ?? 0) * 100}
                />
              )}
            </TimelineContent>
          </TimelineItem>
        ))}
      </Timeline>
    </Box>
  );
}

MetricDetail = ({ metric: metricInitial }: { metric: Metric }) => {
  const classes = useMetricDetailStyles()

  const {
    isLoading,
    data: metric,
    error,
  } = useDataSource(() => MetricsApi.findById(metricInitial.metricId), [metricInitial.metricId])
  useDataLoadingError(error)

  const isReady = !isLoading && !error

  return (
    <>
      {!isReady && <LinearProgress />}
      {isReady && metric && (
        <TableContainer className={classes.root}>
          <Table>
            <TableBody>
              <TableRow>
                <TableCell className={classes.headerCell}>Higher is Better:</TableCell>
                <TableCell className={classes.dataCell}>{formatBoolean(metric.higherIsBetter)}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className={classes.headerCell}>Parameters:</TableCell>
                <TableCell className={classes.dataCell}>
                  <div className={classes.pre}>
                    {JSON.stringify(
                      metric.parameterType === 'conversion' ? metric.eventParams : metric.revenueParams,
                      null,
                      4,
                    )}
                  </div>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </>
  )
}

PageContents = () => {
  const api = useApi(gcpApiRef);

  const [{ status, result, error }, { execute }] = useAsync(() =>
    api.listProjects(),
  );
  useMountEffect(execute);

  if (status === 'loading') {
    return <LinearProgress />;
  } else if (error) {
    return (
      <WarningPanel title="Failed to load projects">
        {error.toString()}
      </WarningPanel>
    );
  }

  function renderLink(id: string) {
    return (
      <Link to={`project?projectId=${encodeURIComponent(id)}`}>
        <Typography color="primary">
          <LongText text={id} max={60} />
        </Typography>
      </Link>
    );
  }

  return (
    <div style={{ height: '95%', width: '100%' }}>
      <Table
        columns={[
          {
            field: 'name',
            title: 'Name',
            defaultSort: 'asc',
          },
          {
            field: 'projectNumber',
            title: 'Project Number',
          },
          {
            field: 'projectID',
            title: 'Project ID',
            render: (rowData: { id: string }) => renderLink(rowData.id),
          },
          {
            field: 'state',
            title: 'State',
          },
          {
            field: 'creationTime',
            title: 'Creation Time',
          },
        ]}
        data={
          result?.map((project: Project) => ({
            id: project.projectId,
            name: project.name,
            projectNumber: project?.projectNumber || 'Error',
            projectID: project.projectId,
            state: project?.lifecycleState || 'Error',
            creationTime: project?.createTime || 'Error',
          })) || []
        }
        options={{
          pageSize: 5,
          pageSizeOptions: [5, 10, 25, 50, 100],
        }}
      />
    </div>
  );
}

BuildDetails: React.FunctionComponent = () => {
  const { selectedBuild } = useBuildState();
  const buildNumber = React.useMemo(
    () => `#${selectedBuild?.number} ${selectedBuild?.ciBuildId || ""}`,
    [selectedBuild?.number, selectedBuild?.ciBuildId]
  );

  if (!selectedBuild) {
    return null;
  }

  const loadingAnimation = selectedBuild.isRunning && <LinearProgress />;

  return (
    <Grid container direction="column" id={LOCATOR_BUILD_DETAILS}>
      <Grid item>
        <Box m={0.5}>
          <Grid container spacing={1} alignItems="center">
            <Grid item style={{ maxWidth: "20%", whiteSpace: "nowrap" }}>
              <Tooltip title={buildNumber}>
                <Typography
                  variant="subtitle2"
                  style={{ overflow: "hidden", textOverflow: "ellipsis" }}
                >
                  {buildNumber}
                </Typography>
              </Tooltip>
            </Grid>
            <Grid item style={{ maxWidth: "70%" }}>
              <Tooltip title={selectedBuild.branchName}>
                <Chip
                  size="small"
                  style={{ maxWidth: "100%" }}
                  label={selectedBuild.branchName}
                />
              </Tooltip>
            </Grid>
            <Grid item>
              <BuildStatusChip status={selectedBuild.status} />
            </Grid>
          </Grid>
        </Box>
      </Grid>
      <Grid item>
        <Box m={0.5}>
          <Grid container spacing={1}>
            <Grid item>
              <Typography variant="caption">
                {formatDateTime(selectedBuild.createdAt)}
              </Typography>
            </Grid>
          </Grid>
        </Box>
      </Grid>
      <Grid item>
        <Box m={0.5}>
          <Grid container spacing={1}>
            <Grid item>
              <Typography variant="caption">{`${
                selectedBuild.unresolvedCount +
                selectedBuild.failedCount +
                selectedBuild.passedCount
              } total`}</Typography>
            </Grid>
            <Grid item>
              <Typography variant="caption">{`${selectedBuild.unresolvedCount} unresolved`}</Typography>
            </Grid>
            <Grid item>
              <Typography variant="caption">{`${selectedBuild.failedCount} failed`}</Typography>
            </Grid>
            <Grid item>
              <Typography variant="caption">{`${selectedBuild.passedCount} passed`}</Typography>
            </Grid>
          </Grid>
        </Box>
      </Grid>
      {loadingAnimation}
    </Grid>
  );
}

TransactionPopup: React.FC<TransactionPopupProps> = ({
  hash,
  pending,
  success,
  summary,
}) => {
  const classes = useStyles();
  const { palette } = useTheme();
  const { chainId } = useActiveWeb3React();
  const [progress, setProgress] = React.useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        return Math.min(oldProgress + 2.5, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <>
      <Box
        mb={1.5}
        display='flex'
        justifyContent='space-between'
        alignItems='center'
      >
        <Typography
          variant='body2'
          style={{
            fontWeight: 600,
            color: pending
              ? '#ffa000'
              : success
              ? palette.success.main
              : palette.error.main,
          }}
        >
          {pending ? 'Processing…' : success ? 'Confirmed' : 'Failed'}
        </Typography>
        {chainId && hash.length > 0 && (
          <a
            href={getEtherscanLink(chainId, hash, 'transaction')}
            target='_blank'
            rel='noopener noreferrer'
          >
            <ArrowTopRight />
          </a>
        )}
      </Box>
      <Typography variant='body2'>
        {summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}
      </Typography>
      {pending && (
        <Box className={classes.pendingBar}>
          <LinearProgress variant='determinate' value={progress} />
        </Box>
      )}
    </>
  );
}

LoadingBar: React.FunctionComponent = () => {
  const loadingCount = 0;
  const styles = useStyles();

  return loadingCount > 0 ? (
    <LinearProgress color="primary" className={styles.root} />
  ) : null;
}

CityTileCard = ({ cityTiles, pos }: CityTileCardProps) => {
  let cityTile = cityTiles[0];
  for (const ct of cityTiles) {
    if (ct.pos.x === pos.x && ct.pos.y === pos.y) {
      cityTile = ct;
      break;
    }
  }
  const classes = useStyles();
  const renderUnitSVG = () => {
    let svg = Team1CitySVG;
    if (cityTile.team === 0) {
      svg = Team0CitySVG;
    }
    return <img src={svg} />;
  };
  const maxCooldown = 10;
  return (
    <div className="CityTileCard">
      <div className="unit-id">
        <strong>ID of City:</strong> {cityTile.cityid}
      </div>
      <div className="worker-icon-wrapper">{renderUnitSVG()}</div>
      <div className="cooldown-bar-wrapper">
        <div className="cooldown-value-wrapper">
          <span className="cooldown-title">
            <strong>Cooldown:</strong>
          </span>{' '}
          <span className="cooldown-value">
            {cityTile.cooldown} / {maxCooldown}
          </span>
        </div>

        <LinearProgress
          className={
            (cityTile.team === Unit.TEAM.A ? 'cooldown-a' : 'cooldown-b') +
            ' cooldown-bar'
          }
          variant="determinate"
          value={(cityTile.cooldown * 100) / maxCooldown}
        />
      </div>
    </div>
  );
}

_ControlsSummaryFeature: FunctionComponent<ControlsSummaryFeatureProps> = ({
  featureKey,
  completedCount,
  displayed,
}) => {
  const classes = useStyles({
    bgImage: getNextImageUrl('/images/controls/filter_border.png', 80, 80),
  });

  if (!displayed) return null; // Feature is not displayed.
  if (completedCount === 0) return null; // No markers have been completed.

  const mapFeature = getMapFeature(featureKey);
  if (!mapFeature) return null; // Feature is not valid (CHECK THE CONSOLE).

  // Total number of markers for this feature. Contrast with completedCount.
  const totalCount = _.keys(mapFeature.data).length;

  return (
    <Box className={clsx(classes.featureRoot)}>
      <Box className={classes.iconBorder}>
        <div className={classes.icon}>
          <NextImage
            src={`/images/icons/filter/${mapFeature.icons.filter}.png`}
            width={70}
            height={70}
          />
        </div>
      </Box>
      <Box flexDirection="column" display="flex" flexGrow={1} marginRight={2}>
        <Typography className={classes.label}>{localizeField(mapFeature.name)}</Typography>
        <LinearProgress
          classes={{
            root: classes.progressRoot,
            bar: classes.progressBar,
          }}
          variant="determinate"
          value={(completedCount / totalCount) * 100}
        />
        <Typography className={classes.label}>
          {completedCount} / {totalCount}
        </Typography>
      </Box>
      <ControlsSummaryFeatureMenu featureKey={featureKey} />
    </Box>
  );
}