function ResultRow()

in apps/televisit-demo/frontend/src/containers/transcriptions/AnalysisPane.js [32:149]
109 lines of code
19 McCabe index (conditional complexity)

function ResultRow({ result, onDeleteClick, onSelectedConceptChange }) {
  const closeIcon = (
    <IconButton
      aria-label="Delete"
      icon={<DeleteIcon />}
      onClick={onDeleteClick}
      size="xs"
      isRound
      border="1px solid #545b64"
      _hover={{ bg: '#545b64' }}
      sx={{
        '&:hover svg': {
          color: '#fff',
        },
      }}
    />
  );

  const attrs = useMemo(() => {
    const a = [];

    (result.Attributes || []).forEach((attr) => {
      a.push([displayNames[attr.Type], attr.Text]);
    });
    return a;
  }, [result]);

  const conceptsPresent = result.ICD10CMConcepts || result.RxNormConcepts;
  const attributesPresent = result.Attributes && result.Attributes.length !== 0;

  if (!conceptsPresent && !attributesPresent) {
    return (
      <Flex width="100%" alignItems="center">
        <Flex
          flex="1"
          mr={2}
          height="2.5rem"
          border={
            result.Score && result.Score < CONFIDENCE_THRESHOLD
              ? '2px solid #B30000'
              : '1px solid grey'
          }
          bg="white"
          px={4}
          alignItems="center"
        >
          {result.Text} {result.Type && '|'} {displayNames[result.Type]}
        </Flex>
        {closeIcon}
      </Flex>
    );
  }

  if (!conceptsPresent && attributesPresent) {
    return (
      <Flex width="100%" alignItems="center">
        <Flex
          flex="1"
          mr={2}
          height="2.5rem"
          border={
            result.Score && result.Score < CONFIDENCE_THRESHOLD
              ? '2px solid #B30000'
              : '1px solid grey'
          }
          bg="white"
          px={4}
          alignItems="center"
        >
          {attrs.map(([key, value]) => (
            <React.Fragment key={key}>
              {result.Text} {value && '|'} {value}
            </React.Fragment>
          ))}
        </Flex>

        {closeIcon}
      </Flex>
    );
  }

  const concepts = [
    ...(result.ICD10CMConcepts
      ? result.ICD10CMConcepts
      : result.RxNormConcepts),
  ];
  const selectedConcept = getSelectedConcept(result);
  const borderColor =
    concepts[0].Score < CONFIDENCE_THRESHOLD ? '#B30000 ' : 'grey';

  return (
    <Flex width="100%" alignItems="center">
      <Select
        mr={2}
        border={
          selectedConcept.Score < CONFIDENCE_THRESHOLD
            ? '2px solid'
            : '1px solid'
        }
        borderColor={borderColor}
        borderRadius="0"
        bg="white"
        value={result.selectedConceptCode}
        onChange={(e) => onSelectedConceptChange(result.id, e.target.value)}
        _hover={{ borderColor: borderColor, boxShadow: 'none' }}
      >
        {concepts.map(({ Code, Description, Score }) => (
          <option key={Code} value={Code}>
            {result.Text} {Code && ' | '} {Code} {Description && ' | '}
            {Description} &nbsp;&nbsp; {(Score * 100).toPrecision(4)}%
          </option>
        ))}
      </Select>

      {closeIcon}
    </Flex>
  );
}