@material-ui/core#Chip TypeScript Examples

BankAccount = () => {
	const [account, isLoading] = useAccount()
	const [showModal, closeModal] = useModal()
	const currently_due: string[] = account?.stripe?.requirements.currently_due ?? []
	const isRequired = isLoading || currently_due.includes("external_account")
	const bankAccounts = account?.stripe?.external_accounts.data || []

	return (
		<Box>
			<List>
				{bankAccounts.map(value => {
					return (
						<ListItem button key={value.id}>
							<ListItemText primary={`${value.bank_name} - ${value.account_holder_name}`} primaryTypographyProps={{ variant: "subtitle1" }} />
							<ListItemSecondaryAction>
								<Box display="flex" alignItems="center">
									<NavigateNextIcon />
								</Box>
							</ListItemSecondaryAction>
						</ListItem>
					)
				})}

				<ListItem button onClick={() => {
					showModal(<Payout onClose={closeModal} />, false)
				}}>
					<ListItemText primary="Register your bank account" primaryTypographyProps={{ variant: "subtitle2" }} />
					<ListItemSecondaryAction>
						<Box display="flex" alignItems="center">
							{isRequired && <Chip variant="outlined" size="small" color="secondary" label="Required" />}
							<NavigateNextIcon />
						</Box>
					</ListItemSecondaryAction>
				</ListItem>
			</List>
		</Box>
	)
}

DiffPercentageChip: React.FunctionComponent<DiffPercentageChipProps> = ({
  value,
  size = "small",
}) => {
  if (typeof value !== "number") return null;

  const classes = useStyles();
  const isPositiveDiff = value >= 0;

  return (
    <Chip
      size={size}
      className={clsx(
        {
          [classes.green]: isPositiveDiff,
          [classes.red]: !isPositiveDiff,
          [classes.small]: size === "small",
          [classes.medium]: size === "medium",
        },
        classes.root
      )}
      classes={{ label: classes.label }}
      icon={isPositiveDiff ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
      label={<FormattedNumber style="percent" maximumFractionDigits={2} value={Math.abs(value)} />}
      // label="11.33%"
    />
  );
}

function AvailableValueTag({ label, details }) {
  return (
    <Tooltip
      style={{
        zIndex: 9999,
        marginRight: 4,
      }}
      title={<>{details}</>}
    >
      <Chip label={label} size="small" />
    </Tooltip>
  );
}

ChallengeCard = (props: IChallengeCardProps) => {

  const history = useHistory();
  const done = <Chip size="small" label="Done" style={{ backgroundColor: 'green', color: 'white' }} />;

  const onChallengeClick = (path: string) => {
    return () => {
      history.push(path);
    };
  };


  return (
    <Card>
      <CardActionArea>
        <CardContent style={{ height: '180px' }} onClick={onChallengeClick(props.challenge.url)}>
          <Typography gutterBottom variant="h5" component="h2" style={{ height: '60px' }}>
            {pad(props.index + 1, 2)} - {props.challenge.name}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {props.challenge.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary" onClick={onChallengeClick(props.challenge.url)}>
          Take the challenge
        </Button>
        {props.done ? done : ""}
      </CardActions>
    </Card >
  );

}

StyledChip = withStyles({
  root: {
    color: COLORS.white,
    backgroundColor: COLORS.inverse,
    borderRadius: 0,
    fontFamily: BASE_FONT.fontFamily as string,
    fontSize: 10,
    fontWeight: 100,
    paddingLeft: 1,
    paddingRight: 1,
    marginLeft: 4,
    marginRight: 4,
  },
})(Chip)

StatusChip = ({ alert }: { alert: Alert }) => {
    const classes = useStyles();

    let chipClass = classes.error;
    let label = 'Unknown';
    let icon = <Warning />;
    if (alert.status === 'open' && !alert.acknowledged && !alert.isSeen) {
        chipClass = classes.error;
        label = 'Open';
        icon = <Warning />;
    } else if (alert.status === 'open' && !alert.acknowledged && alert.isSeen) {
        chipClass = classes.error;
        label = 'Seen';
        icon = <Done />;
    } else if (alert.status === 'open' && alert.acknowledged) {
        chipClass = classes.warning;
        label = 'Acknowledged';
        icon = <DoneAll />;
    } else if (alert.status === 'closed') {
        chipClass = classes.closed;
        label = 'Closed';
    }

    return (<Chip
        label={label}
        size="small"
        variant="outlined"
        icon={alert.status === "closed" ? undefined : icon}
        className={chipClass}
    />);
}

BuildStatusChip: React.FunctionComponent<{
  status: BuildStatus;
}> = ({ status }) => {
  let color: "inherit" | "primary" | "secondary" | "default" | undefined;
  let variant: "default" | "outlined" | undefined;
  switch (status) {
    case BuildStatus.passed:
      color = "primary";
      variant = "outlined";
      break;
    case BuildStatus.unresolved:
      color = "secondary";
      break;
    case BuildStatus.failed:
      color = "secondary";
      variant = "outlined";
      break;
    default:
      color = undefined;
      variant = undefined;
  }
  return <Chip variant={variant} color={color} label={status} size="small" />;
}

PlayerChip: React.FC<Props> = (props) => {
  const username =
    props.username ?? (props.children ? String(props.children) : "")
  return (
    <Chip
      avatar={
        props.handleSwitch && (
          <LoopIcon
            style={{
              color: grey[600],
              backgroundColor: "transparent",
              cursor: "pointer",
            }}
            onClick={props.handleSwitch}
          ></LoopIcon>
        )
      }
      key={username}
      color={
        props.team
          ? props.team === Team.Red
            ? "secondary"
            : "primary"
          : "default"
      }
      variant="outlined"
      size="small"
      label={username}
      onDelete={props.handleDelete}
    ></Chip>
  )
}

DomainCard = ({ entity }: DomainCardProps) => {
  const catalogEntityRoute = useRouteRef(entityRouteRef);

  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
  const url = catalogEntityRoute(entityRouteParams(entity));

  const owner = (
    <EntityRefLinks
      entityRefs={ownedByRelations}
      defaultKind="group"
      color="inherit"
    />
  );

  return (
    <Card>
      <CardMedia>
        <ItemCardHeader title={entity.metadata.name} subtitle={owner} />
      </CardMedia>
      <CardContent>
        {entity.metadata.tags?.length ? (
          <Box>
            {entity.metadata.tags.map(tag => (
              <Chip size="small" label={tag} key={tag} />
            ))}
          </Box>
        ) : null}
        {entity.metadata.description}
      </CardContent>
      <CardActions>
        <Button to={url} color="primary">
          Explore
        </Button>
      </CardActions>
    </Card>
  );
}

renderExpressionEmoji(key: string, display: string | React.ReactNode, hasExpressed: boolean, onLoggedInClick: ((currentTarget: HTMLElement) => void) | undefined = undefined, count: number = 0) {
    return (
      <Chip
        clickable={!!onLoggedInClick}
        key={key}
        variant='outlined'
        color={hasExpressed ? 'primary' : 'default'}
        onClick={onLoggedInClick ? e => {
          const currentTarget = e.currentTarget;
          if (this.props.loggedInUser) {
            onLoggedInClick && onLoggedInClick(currentTarget);
          } else {
            this.onLoggedIn = () => onLoggedInClick && onLoggedInClick(currentTarget);
            this.setState({ logInOpen: true });
          }
        } : undefined}
        classes={{
          label: this.props.classes.expressionInner,
          root: `${this.props.classes.expressionOuter} ${hasExpressed ? this.props.classes.expressionHasExpressed : this.props.classes.expressionNotExpressed}`,
        }}
        label={(
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span className={this.props.classes.expression}>{display}</span>
            {count > 0 && (<Typography variant='caption' color={hasExpressed ? 'primary' : undefined}>&nbsp;{count}</Typography>)}
          </div>
        )}
      />
    );
  }

InputChip = forwardRef<HTMLInputElement, IInputChip>(
  ({ chips, label, onDelete, error, fullWidth, className, ...inputProps }, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const refCallback = useCombinedRefs<HTMLInputElement>([ref, inputRef]);

    return (
      <div
        className={classNames('MuiChipInput', className, { 'MuiChipInput-fullWidth': fullWidth })}
        onClick={() => inputRef.current && inputRef.current.focus()}
      >
        {!!label && <div>{label}</div>}
        <Grid container alignItems='center'>
          {chips.map((chip, idx) => (
            <Grid item key={idx}>
              <Chip label={chip} onDelete={() => onDelete(idx)} />
            </Grid>
          ))}
          <Grid item>
            <input {...inputProps} ref={refCallback} />
          </Grid>
        </Grid>
        {error && <div className='MuiAlert-standardError'>{error}</div>}
      </div>
    );
  }
)

function RenderNode(value, key = 0) {
    return <HtmlTooltip key={key + "-" + value.identity} arrow title={
        <div>
            <b> {value.labels.length > 0 ? value.labels.join(", ") : "Node"}</b>
            <table>
                <tbody>
                    {Object.keys(value.properties).length == 0 ?
                        <tr><td>(No properties)</td></tr> :
                        Object.keys(value.properties).sort().map((k, i) =>
                            <tr key={i}>
                                <td key={0}>{k.toString()}:</td>
                                <td key={1}>{value.properties[k].toString()}</td>
                            </tr>)}
                </tbody>
            </table>
        </div>}>
        <Chip label={value.labels.length > 0 ? value.labels.join(", ") : "Node"} />
    </HtmlTooltip>
}

AvatarTag = ({ option, ...rest }: Props) => {
  return (
    <Chip
      key={option.id}
      avatar={<Avatar alt={option.avatar?.name} src={option.avatar?.photo} />}
      variant="outlined"
      label={option.username}
      size="small"
      {...rest}
    />
  );
}

ErrorChip: typeof Chip = styled(Chip)({
    zIndex: 1,
    position: 'absolute',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 50,
    marginLeft: 50,
    marginRight: 50,
})

export function AdrStatusChip({ className, status }: AdrStatusChipProps) {
  const classes = useStyles();
  return (
    <Chip
      variant="outlined"
      size="small"
      label={status.toUpperCase()}
      className={clsx(className, classes.root, classes[status])}
      classes={{ labelSmall: classes.label }}
    />
  );
}

ListItem = ({ data }: { data: Order }) => {
	const classes = useStyles();
	const { orderID } = useParams<{ orderID?: string }>()
	const salesMethod = useSalesMethod()
	const orderedDate = Dayjs(data.createdAt.toDate())
	const currency = data.currency
	const amount = data.amount || 0
	const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: currency }).format(amount)
	const imageURL = data.imageURLs().length > 0 ? data.imageURLs()[0] : undefined

	return (
		<Link className={classes.list} to={`/admin/orders/${data.id}` + (salesMethod ? `?salesMethod=${salesMethod}` : "")}>
			<Box>
				<Box padding={1} paddingY={2} style={{
					backgroundColor: orderID === data.id ? "rgba(0, 0, 140, 0.03)" : "inherit"
				}}>
					<Grid container>
						<Grid item xs={1}>
						</Grid>
						<Grid item xs={2}>
							<Avatar variant="rounded" src={imageURL} >
								<ImageIcon />
							</Avatar>
						</Grid>
						<Grid item xs={9}>
							<Box display="flex" justifyContent="space-between">
								<Box>
									<Typography variant="subtitle1">{data.title}</Typography>
									<Typography variant="body2">{data.id}</Typography>
									<Typography variant="caption">
										{orderedDate.format("YYYY-MM-DD HH:mm:ss")}
									</Typography>
								</Box>
							</Box>
							<Box className={classes.tags}>
								<Chip size="small" label={DeliveryStatusLabel[data.deliveryStatus]} />
								<Chip size="small" label={SalesMethodLabel[data.salesMethod]} />
								<Chip size="small" label={PaymentStatusLabel[data.paymentStatus]} />
								{
									data.tags.map((tag, index) => {
										return <Chip key={index} size="small" label={tag} />
									})
								}
							</Box>
						</Grid>
					</Grid>
				</Box>
				<Divider />
			</Box>
		</Link>
	)
}

BetaBanner = () => {
  const [isBetaBarVisible, setIsBetaBarVisible] = useState(false);
  const classes = useStyles();

  useEffect(() => {
    const isBetaBarSeen = localStorage.getItem("isBetaBarSeen");
    setIsBetaBarVisible(isBetaBarSeen === null ? true : false);
  }, []);

  const hideIsBetaBarVisible = () => {
    localStorage.setItem("isBetaBarSeen", "true");
    setIsBetaBarVisible(false);
  };

  return (
    <>
      {isBetaBarVisible && (
        <AppBar position="static" color="default" className={classes.root}>
          <Toolbar>
            <Chip label="BETA" color="primary" className={classes.betaChip} />
            <div className={classes.betaText}>
              <Box marginBottom=".5rem">
                <Typography variant="body2">
                  Akashlytics Deploy is now currently in open BETA.
                </Typography>
              </Box>
              <Button
                component={Link}
                to="/deploy"
                variant="contained"
                size="small"
                onClick={() => hideIsBetaBarVisible()}
              >
                Take a look!
              </Button>
            </div>

            <div className={classes.grow} />
            <IconButton
              aria-label="Close beta app bar"
              color="inherit"
              onClick={() => hideIsBetaBarVisible()}
            >
              <CloseIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
      )}
    </>
  );
}

export default function ConnectService({
  column,
  control,
  disabled,
  docRef,
}: ISideDrawerFieldProps) {
  const theme = useTheme();

  const config = column.config ?? {};
  const displayKey = config.titleKey ?? config.primaryKey;

  return (
    <Controller
      control={control}
      name={column.key}
      render={({ onChange, onBlur, value }) => {
        const handleDelete = (hit: any) => () => {
          // if (multiple)
          onChange(
            value.filter(
              (v) => get(v, config.primaryKey) !== get(hit, config.primaryKey)
            )
          );
          // else form.setFieldValue(field.name, []);
        };

        return (
          <>
            {!disabled && (
              <ConnectServiceSelect
                config={(config as any) ?? {}}
                value={value}
                onChange={onChange}
                docRef={docRef}
                TextFieldProps={{
                  label: "",
                  hiddenLabel: true,
                  fullWidth: true,
                  onBlur,
                  // SelectProps: {
                  //   renderValue: () => `${value?.length ?? 0} selected`,
                  // },
                }}
              />
            )}

            {Array.isArray(value) && (
              <Grid
                container
                spacing={1}
                style={{ marginTop: theme.spacing(1) }}
              >
                {value.map((snapshot) => (
                  <Grid item key={get(snapshot, config.primaryKey)}>
                    <Chip
                      component="li"
                      size="medium"
                      label={get(snapshot, displayKey)}
                      onDelete={disabled ? undefined : handleDelete(snapshot)}
                    />
                  </Grid>
                ))}
              </Grid>
            )}
          </>
        );
      }}
    />
  );
}

MessageChip = (content: string, className: string) => (<Chip label={content} className={className} />)

IncidentsTable = ({ incidents }: {incidents: Incident[]}) => {
    const opsgenieApi = useApi(opsgenieApiRef);
    const smallColumnStyle = {
        width: '5%',
        maxWidth: '5%',
    };
    const mediumColumnStyle = {
        width: '10%',
        maxWidth: '10%',
    };

    const columns: TableColumn<Incident>[] = [
        {
            title: 'ID',
            field: 'tinyId',
            highlight: true,
            cellStyle: smallColumnStyle,
            headerStyle: smallColumnStyle,
            render: rowData => <Link href={opsgenieApi.getIncidentDetailsURL(rowData)}>#{(rowData).tinyId}</Link>
        },
        {
            title: 'Priority',
            field: 'priority',
            cellStyle: smallColumnStyle,
            headerStyle: smallColumnStyle,
            render: rowData => <PriorityChip priority={rowData.priority} />
        },
        {
            title: 'Status',
            field: 'status',
            cellStyle: smallColumnStyle,
            headerStyle: smallColumnStyle,
            render: rowData => <Chip  label={rowData.status} color={rowData.status === 'open' ? 'secondary' : 'default'} size="small" />
        },
        {
            title: 'Description',
            field: 'message',
        },
        {
            title: 'Tags',
            field: 'tags',
            render: rowData => <>{rowData.tags.map((tag, i) => <Chip label={tag} key={i} size="small" />)}</>
        },
        {
            title: 'Updated At',
            field: 'updatedAt',
            type: 'datetime',
            dateSetting: {locale: 'en-UK'},
            cellStyle: mediumColumnStyle,
            headerStyle: mediumColumnStyle,
        },
    ];

    return (
        <Table
            options={{
                sorting: true,
                search: true,
                paging: true,
                actionsColumnIndex: -1,
                pageSize: 25,
                pageSizeOptions: [25, 50, 100, 150, 200],
                padding: 'dense',
            }}
            localization={{ header: { actions: undefined } }}
            columns={columns}
            data={incidents}
        />
    );
}

ApproveRejectButtons: React.FunctionComponent<{
  testRun: TestRun;
}> = ({ testRun }) => {
  const { enqueueSnackbar } = useSnackbar();

  const approve = () => {
    testRunService
      .approveBulk([testRun.id], testRun.merge)
      .then(() =>
        enqueueSnackbar("Approved", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  const reject = () => {
    testRunService
      .rejectBulk([testRun.id])
      .then(() =>
        enqueueSnackbar("Rejected", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  useHotkeys("a", approve, [testRun]);
  useHotkeys("x", reject, [testRun]);

  return (
    <Grid container spacing={2} alignItems="center">
      {testRun.merge && (
        <Grid item>
          <Tooltip title="Will replace target branch baseline if accepted">
            <Chip
              label={`merge into: ${testRun.baselineBranchName}`}
              color="secondary"
              size="small"
            />
          </Tooltip>
        </Grid>
      )}
      <Grid item>
        <Tooltip title={"Hotkey: A"}>
          <Button color="inherit" onClick={approve}>
            Approve
          </Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title={"Hotkey: X"}>
          <Button color="secondary" onClick={reject}>
            Reject
          </Button>
        </Tooltip>
      </Grid>
    </Grid>
  );
}

OceanSenseMetrics = ({ classes }: OceanSenseMetricsProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
  const isTablet = useMediaQuery(theme.breakpoints.up("md"));
  const data = useSelector(siteLatestOceanSenseDataSelector);
  const loading = useSelector(siteLatestOceanSenseDataLoadingSelector);

  const lastTimestamp = last(data?.PH)?.timestamp;
  const relativeTime = lastTimestamp
    ? toRelativeTime(lastTimestamp)
    : undefined;

  return (
    <>
      <Box className={classes.root}>
        <Grid container justify="space-between" alignItems="center" spacing={2}>
          {Object.values(metrics(data)).map((item) => (
            <Grid
              item
              xs={isMobile ? 12 : undefined}
              sm={isTablet ? undefined : 5}
              key={item.label}
            >
              <Grid
                className={classes.cardItem}
                container
                alignItems="center"
                spacing={2}
              >
                <Grid item>{item.icon}</Grid>
                <Grid item>
                  <Typography display="block" variant="caption">
                    {item.label}
                  </Typography>
                  {loading ? (
                    <Box py={0.5}>
                      <CircularProgress size={22} thickness={2} />
                    </Box>
                  ) : (
                    <Typography className={classes.blueText} variant="h3">
                      {item.value}
                    </Typography>
                  )}
                  <Chip className={classes.chip} label={item.measure} />
                </Grid>
              </Grid>
            </Grid>
          ))}
        </Grid>
      </Box>
      <Grid container>
        <Grid item xs={12} sm={6} md={3}>
          <UpdateInfo
            timeText="Last data received"
            relativeTime={relativeTime}
            imageText="VIEWBLUE"
            live={false}
            frequency="hourly"
          />
        </Grid>
        {!isMobile && <Grid item className={classes.triangle} />}
      </Grid>
    </>
  );
}

LanguagePicker = () => {
  const classes = useStyles()
  const { t, i18n } = useTranslation()

  return (
    <Box textAlign="center">
      <ul className={classes.root}>
        {SupportedLanguages.map((code) => (
          <li key={code}>
            <Chip
              label={languageNameFromCode(code)}
              variant="outlined"
              color={code === i18n.language ? "primary" : "default"}
              onClick={() => {
                i18n.changeLanguage(code)
              }}
            />
          </li>
        ))}
        <li>
          <IconButton
            component={Link}
            size="small"
            href="https://github.com/avimoondra/fishbowl#Localization"
            target="_blank"
          >
            <AddCircleOutlineIcon />
          </IconButton>
        </li>
      </ul>
      <Typography color="textSecondary" variant="caption">
        <Trans t={t} i18nKey="languagesPoweredBy">
          {"Powered by our friends at "}
          <Link href="https://locize.com" target="_blank">
            {{ serviceName: "locize" }}
          </Link>
          .
        </Trans>
      </Typography>
    </Box>
  )
}

AdrSearchResultListItem = ({
  lineClamp = 5,
  highlight,
  result,
}: {
  lineClamp?: number;
  highlight?: ResultHighlight;
  result: AdrDocument;
}) => {
  const classes = useStyles();

  return (
    <Link to={result.location}>
      <ListItem alignItems="flex-start" className={classes.flexContainer}>
        <ListItemText
          className={classes.itemText}
          primaryTypographyProps={{ variant: 'h6' }}
          primary={
            highlight?.fields.title ? (
              <HighlightedSearchResultText
                text={highlight.fields.title}
                preTag={highlight.preTag}
                postTag={highlight.postTag}
              />
            ) : (
              result.title
            )
          }
          secondary={
            <span
              style={{
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: lineClamp,
                overflow: 'hidden',
              }}
            >
              {highlight?.fields.text ? (
                <HighlightedSearchResultText
                  text={highlight.fields.text}
                  preTag={highlight.preTag}
                  postTag={highlight.postTag}
                />
              ) : (
                result.text
              )}
            </span>
          }
        />
        <Box>
          {result.status && (
            <Chip label={`Status: ${result.status}`} size="small" />
          )}
          {result.date && <Chip label={`Date: ${result.date}`} size="small" />}
        </Box>
      </ListItem>
      <Divider component="li" />
    </Link>
  );
}

TaggedArrayInput: React.FC<Props> = (props) => {
  const { values, onAddTag, onRemoveTag, placeholder = '' } = props;
  const [inpValue, setInpValue] = useState('');
  const classes = useStyles();

  const error = useMemo(
    () => (values.includes(inpValue) ? 'Filters must be unique' : ''),
    [values, inpValue]
  );

  const onSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();
    if (!error && inpValue !== '') {
      onAddTag(inpValue);
      setInpValue('');
    }
  };

  const onRemove = (key: string) => {
    onRemoveTag(key);
  };

  const onInpChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    e.persist();
    setInpValue(e.target.value);
  };

  return (
    <form onSubmit={onSubmit} className={classes.form}>
      <input
        className={classes.inp}
        value={inpValue}
        onChange={onInpChange}
        aria-label="Filter"
        placeholder={placeholder}
      />
      {error && <span className={classes.error}>{error}</span>}
      <div className={classes.tagsWrapper}>
        {values.map((val) => (
          <div key={val}>
            <Chip
              classes={{ root: classes.chip }}
              label={val}
              onDelete={() => onRemove(val)}
            />
          </div>
        ))}
      </div>
    </form>
  );
}

Tag: FC<TagProps> = (props) => {
  return <Chip {...mapper(props)} />;
}

Train = ({ train, showLastStation }: TrainProps) => {
  const {
    t: translate,
    i18n: { language },
  } = useTranslation();
  const intermediateStations = train.stations.slice(
    1,
    train.stations.length - 1
  );
  const [showExpandButton, setShowExpandButton] = useState<boolean>(
    intermediateStations.length > 1
  );
  const firstStation = getStation(train.stations[0]);
  const lastStation = getStation(train.stations[train.stations.length - 1]);
  const headingStationId = getHeadingDirectionId(train);
  const headingStation = getStation(headingStationId);

  const handleExpandButtonClick = () => {
    setShowExpandButton(false);
  };

  return (
    <>
      <TransferStation station={firstStation} />
      <Grid container>
        <Grid container style={{ marginBottom: "5px" }}>
          <div
            style={{
              marginLeft: "8px",
              marginRight: "12px",
              width: "2px",
              borderLeft: "solid 1px black",
              height: "100%",
            }}
          ></div>
          <Grid item>
            {headingStation && (
              <Grid xs={12}>
                <Chip
                  label={`${getLineTypeLabel(
                    headingStation.lineType
                  )} ${getStationName(headingStation, language)}`}
                />
              </Grid>
            )}
            {showExpandButton ? (
              <IconButton>
                <Typography variant="body1" onClick={handleExpandButtonClick}>
                  {translate("route.intermediateStationText", {
                    count: intermediateStations.length,
                  })}
                </Typography>
              </IconButton>
            ) : (
              <Typography
                variant="body1"
                style={{ padding: "12px", color: "rgba(0, 0, 0, 0.54)" }}
              >
                {intermediateStations.map(
                  (stationId: METRO_STATION_ID, index: number) => {
                    const showNewLine = index < train.stations.length - 1;
                    const station = getStation(stationId);
                    return (
                      <>
                        <StationLabel station={station} />
                        {showNewLine && <br />}
                      </>
                    );
                  }
                )}
              </Typography>
            )}
          </Grid>
        </Grid>
        {showLastStation && <TransferStation station={lastStation} />}
      </Grid>
    </>
  );
}

QuickFilter = ({ label }: InputProps): ReactElement => {
    const translate = useTranslate();
    const classes = useQuickFilterStyles();
    return <Chip className={classes.root} label={translate(label)} />;
}

function RenderPoint(value, key = 0) {
    return <HtmlTooltip key={value.toString()} 
    title={<div>
        <b> Point x={value.x} y={value.y}  </b>
    </div>}>
        <Chip label={"?"} />
    </HtmlTooltip>
 }