function ResultTable()

in app/src/components/AnalysisPane.js [125:218]
88 lines of code
2 McCabe index (conditional complexity)

function ResultTable({
  results,
  category,
  stage,
  onToggleItem,
  excludedItems,
  onResultDelete,
  onResultAdd,
  onSelectedConceptChange,
}) {
  const filteredResults = useMemo(() => results.filter((r) => r.Category === category), [results, category]);
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => setInputValue(event.target.value);

  const handleSubmit = (event) => {
    event.preventDefault();
    const input = inputValue.trim();
    if (input !== '') {
      onResultAdd(input, category);
      setInputValue('');
    }
  };

  const addEntityInputId = `add-${displayNames[category]}`;

  const addIcon = (
    <IconButton
      aria-label='Add'
      type='submit'
      icon={<AddIcon />}
      size='xs'
      isRound
      isDisabled={stage === STAGE_TRANSCRIBING}
      border='1px solid #545b64'
      _hover={{ bg: '#545b64' }}
      sx={{
        '&:hover svg': {
          color: '#fff',
        },
      }}
    />
  );

  return (
    <Box mb={4} mx='3em' _first={{ marginTop: '3em' }} _last={{ marginBottom: '3em' }}>
      <Box
        as='h1'
        mb={4}
        textAlign='left'
        width='max-content'
        fontWeight='bold'
        fontSize='1.2rem'
        className={highlightClasses[category]}
      >
        {displayNames[category]}
      </Box>

      <VStack spacing={2}>
        <FormControl as='form' onSubmit={handleSubmit}>
          <Flex width='100%' mb={4} alignItems='center'>
            <VisuallyHidden as='label' htmlFor={addEntityInputId}>
              Add {displayNames[category]}
            </VisuallyHidden>
            <Input
              id={addEntityInputId}
              mr={2}
              border='1px solid'
              borderColor='grey'
              borderRadius='0'
              bg='white'
              isDisabled={stage === STAGE_TRANSCRIBING}
              placeholder={`Add ${displayNames[category]}`}
              value={inputValue}
              onChange={handleInputChange}
            />
            {addIcon}
          </Flex>
        </FormControl>

        {filteredResults.map((r) => (
          <ResultRow
            result={r}
            key={r.id}
            stage={stage}
            onToggleItem={onToggleItem}
            excludedItems={excludedItems}
            onDeleteClick={() => onResultDelete(r)}
            onSelectedConceptChange={onSelectedConceptChange}
          />
        ))}
      </VStack>
    </Box>
  );
}