<commit_before>// @flow
import React from "react"
import { Link } from "react-router-dom"
import Typography from "@material-ui/core/Typography"
import Grid from "@material-ui/core/Grid"
import IconButton from "@material-ui/core/IconButton"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import useStyles from "components/Stocks/Details/styles"

type Props = {
  /** Stock ID */
  id: string,
  /** Strain descriptor or plasmid name */
  name: string,
  /** Type of stock (strain or plasmid) */
  stockType: string,
}

/**
 * DetailsHeader is the header at the top of every stock details page.
 */

const DetailsHeader = ({ name, id, stockType }: Props) => {
  const classes = useStyles()

  return (
    <Grid item xs={12} className={classes.header}>
      <Grid container alignItems="center">
        <Grid item xs={1} className={classes.backButton}>
          <IconButton
            component={Link}
            to="/strains"
            title="Back to strain catalog"
            aria-label="strain catalog">
            <FontAwesomeIcon icon="arrow-left" size="lg" />
          </IconButton>
        </Grid>
        <Grid item xs={10}>
          <Typography variant="h4">{name}</Typography>
          <Typography variant="h6" color="textSecondary">
            <em>{id}</em>{" "}
            <IconButton
              onClick={() => {
                navigator.clipboard.writeText(id)
              }}
              title="Copy ID to clipboard"
              aria-label="copy icon">
              <FontAwesomeIcon icon="copy" size="sm" />
            </IconButton>{" "}
          </Typography>
        </Grid>
        <Grid item xs={1}></Grid>
      </Grid>
    </Grid>
  )
}

export default DetailsHeader<commit_msg>refactor: use smaller copy icon<commit_after>// @flow
import React from "react"
import { Link } from "react-router-dom"
import Typography from "@material-ui/core/Typography"
import Grid from "@material-ui/core/Grid"
import IconButton from "@material-ui/core/IconButton"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import useStyles from "components/Stocks/Details/styles"

type Props = {
  /** Stock ID */
  id: string,
  /** Strain descriptor or plasmid name */
  name: string,
  /** Type of stock (strain or plasmid) */
  stockType: string,
}

/**
 * DetailsHeader is the header at the top of every stock details page.
 */

const DetailsHeader = ({ name, id, stockType }: Props) => {
  const classes = useStyles()

  return (
    <Grid item xs={12} className={classes.header}>
      <Grid container alignItems="center">
        <Grid item xs={1} className={classes.backButton}>
          <IconButton
            component={Link}
            to="/strains"
            title="Back to strain catalog"
            aria-label="strain catalog">
            <FontAwesomeIcon icon="arrow-left" size="lg" />
          </IconButton>
        </Grid>
        <Grid item xs={10}>
          <Typography variant="h4">{name}</Typography>
          <Typography variant="h6" color="textSecondary">
            <em>{id}</em>{" "}
            <IconButton
              onClick={() => {
                navigator.clipboard.writeText(id)
              }}
              title="Copy ID to clipboard"
              aria-label="copy icon">
              <FontAwesomeIcon icon="copy" size="xs" />
            </IconButton>{" "}
          </Typography>
        </Grid>
        <Grid item xs={1}></Grid>
      </Grid>
    </Grid>
  )
}

export default DetailsHeader
{'fraction_non_alphanumeric': 0.13807890222984562, 'fraction_numerical': 0.004574042309891366, 'mean_word_length': 2.3165876777251184, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1687961', 'n_tokens_mistral': 1025, 'n_tokens_neox': 996, 'n_words': 263}