function RevisionRow()

in src/components/CompareResults/RevisionRow.tsx [280:461]
173 lines of code
16 McCabe index (conditional complexity)

function RevisionRow(props: RevisionRowProps) {
  const id = useId();
  const { result, view, gridTemplateColumns } = props;
  const {
    platform,
    base_avg_value: baseAvgValue,
    base_measurement_unit: baseUnit,
    new_avg_value: newAvgValue,
    new_measurement_unit: newUnit,
    is_improvement: improvement,
    is_regression: regression,
    delta_percentage: deltaPercent,
    confidence_text: confidenceText,
    base_runs: baseRuns,
    new_runs: newRuns,
    graphs_link: graphLink,
    base_app: baseApp,
    new_app: newApp,
  } = result;

  const platformShortName = getPlatformShortName(platform);
  const platformIcon = platformIcons[platformShortName];
  const platformNameAndVersion = getPlatformAndVersion(platform);

  const [expanded, setExpanded] = useState(false);

  const toggleIsExpanded = () => {
    setExpanded(!expanded);
  };

  // Note that the return type is different depending on the view we're in
  const subtestsCompareLink =
    view === compareView
      ? getSubtestsCompareWithBaseLink(result)
      : getSubtestsCompareOverTimeLink(result);

  const themeMode = useAppSelector((state) => state.theme.mode);

  const styles = themeMode === 'light' ? stylesLight : stylesDark;

  return (
    <>
      <Box
        className={`revisionRow ${styles.revisionRow} ${styles.typography}`}
        sx={{ gridTemplateColumns }}
        role='row'
      >
        <div className='platform cell' role='cell'>
          <Tooltip
            style={{ cursor: 'pointer' }}
            placement='bottom'
            title={platform}
            arrow
          >
            <div className='platform-container'>
              {platformIcon}
              <span>
                {platformNameAndVersion === 'Unspecified'
                  ? platform
                  : platformNameAndVersion}
              </span>
            </div>
          </Tooltip>
        </div>
        <div className={`${browserName} cell`} role='cell'>
          {formatNumber(baseAvgValue)} {baseUnit}
          {getBrowserDisplay(baseApp, newApp, expanded) && (
            <span className={FontSize.xSmall}>({baseApp})</span>
          )}
        </div>
        <div className='comparison-sign cell' role='cell'>
          {determineSign(baseAvgValue, newAvgValue)}
        </div>
        <div className={`${browserName} cell`} role='cell'>
          {formatNumber(newAvgValue)} {newUnit}
          {getBrowserDisplay(baseApp, newApp, expanded) && (
            <span className={FontSize.xSmall}>({newApp})</span>
          )}
        </div>
        <div className='status cell' role='cell'>
          <Box
            sx={{
              bgcolor: improvement
                ? 'status.improvement'
                : regression
                  ? 'status.regression'
                  : 'none',
            }}
            className={`status-hint ${determineStatusHintClass(
              improvement,
              regression,
            )}`}
          >
            {improvement ? <ThumbUpIcon color='success' /> : null}
            {regression ? <ThumbDownIcon color='error' /> : null}
            {determineStatus(improvement, regression)}
          </Box>
        </div>
        <div className='delta cell' role='cell'>
          {' '}
          {deltaPercent} %{' '}
        </div>
        <div className='confidence cell' role='cell'>
          {confidenceText && confidenceIcons[confidenceText]}
          {confidenceText || '-'}
        </div>
        <div className='total-runs cell' role='cell'>
          <span>
            <span title='Base runs'>B:</span>
            <strong>{baseRuns.length}</strong>
          </span>
          <span>
            <span title='New runs'>N:</span>
            <strong>{newRuns.length}</strong>
          </span>
        </div>
        <div className='row-buttons cell'>
          {result.has_subtests && (
            <div className='subtests' role='cell'>
              <div className='subtests-link-button-container'>
                <IconButton
                  title={Strings.components.revisionRow.title.subtestsLink}
                  color='primary'
                  size='small'
                  href={subtestsCompareLink}
                  target='_blank'
                >
                  <SubtestsIcon />
                </IconButton>
              </div>
            </div>
          )}

          <div className='graph' role='cell'>
            <div className='graph-link-button-container'>
              <IconButton
                title={Strings.components.revisionRow.title.graphLink}
                color='primary'
                size='small'
                href={graphLink}
                target='_blank'
              >
                <TimelineIcon />
              </IconButton>
            </div>
          </div>
          <div
            className='retrigger-button'
            role='cell'
            data-testid='retrigger-jobs-button'
          >
            <div className='retrigger-button-container'>
              <RetriggerButton result={result} variant='icon' />
            </div>
          </div>
        </div>
        <div className='expand-button cell' role='cell'>
          <div
            className='expand-button-container'
            onClick={toggleIsExpanded}
            data-testid='expand-revision-button'
          >
            <IconButton
              title={
                expanded
                  ? Strings.components.expandableRow.title.shrink
                  : Strings.components.expandableRow.title.expand
              }
              color='primary'
              size='small'
              aria-expanded={expanded}
              aria-controls={id}
            >
              {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
            </IconButton>
          </div>
        </div>
      </Box>
      {expanded && <RevisionRowExpandable id={id} result={result} />}
    </>
  );
}