export default function TranscriptLine()

in app/src/components/TranscriptLine.js [79:131]
43 lines of code
4 McCabe index (conditional complexity)

export default function TranscriptLine({
  // The specific transcript chunk for this line
  chunk,

  // Comprehend results filtered to just this line
  results,

  // List of enabled categories to highlight
  enabledCategories,

  enableEditing,

  handleTranscriptChange,
  onSpeakerChange,
}) {
  const filteredResults = useMemo(() => results.filter((r) => enabledCategories.includes(r.Category)), [
    results,
    enabledCategories,
  ]);
  const sortedResults = useMemo(() => filteredResults.sort((a, b) => a.BeginOffset - b.BeginOffset), [filteredResults]);
  const splitSegments = useMemo(() => combineSegments(sortedResults), [sortedResults]);
  const ranges = useMemo(() => applySegmentsToWords(chunk.text, splitSegments), [chunk, splitSegments]);

  return (
    <React.Fragment>
      {enableEditing && (
        <Box mb={8}>
          {chunk.speaker && (
            <Editable defaultValue={chunk.speaker} onSubmit={(nextSpeaker) => onSpeakerChange(nextSpeaker.trim())}>
              <EditablePreview width='100%' />
              <EditableInput />
            </Editable>
          )}

          <Editable
            defaultValue={chunk.text}
            onSubmit={(nextTranscriptLine) => handleTranscriptChange(nextTranscriptLine.trim())}
          >
            {({ isEditing, onEdit }) => (
              <>
                <EditableInput />

                {!isEditing && (
                  <p className={s.base} onClick={onEdit}>
                    {ranges.map((r, i) => (
                      <span key={i} className={cs(r.matches.map((x) => classMap[x.Category]))}>
                        {r.text}
                      </span>
                    ))}
                  </p>
                )}
              </>
            )}