Repository: microsoft/playwright
File: packages/html-reporter/src/testResultView.tsx (TypeScript)

Code before:
          <img className='screenshot' src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
        </a>
        {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} result={result} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
      </div>}
    </AutoChip></Anchor>}

    {!!videos.length && <Anchor id='attachment-video'><AutoChip header='Videos' revealOnAnchorId='attachment-video'>
      {videos.map(a => <div key={a.path}>
        <video controls>
          <source src={formatUrl(a.path)} type={a.contentType}/>
        </video>
        <AttachmentLink attachment={a} result={result}></AttachmentLink>
      </div>)}
    </AutoChip></Anchor>}

    {!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors} dataTestId='attachments'>
      {[...otherAttachments].map((a, i) =>
        <Anchor key={`attachment-link-${i}`} id={`attachment-${result.attachments.indexOf(a)}`}>
          <AttachmentLink attachment={a} result={result} openInNewTab={a.contentType.startsWith('text/html')} />
        </Anchor>
      )}
    </AutoChip>}

    <AutoChip header={`Executed in Worker #${result.workerIndex}`} dataTestId='worker-test-list' initialExpanded={false} noInsets={true} body={() => {
      if (!workerTestList.current)
        workerTestList.current = buildWorkerTestList(report, result.workerIndex);
      return <TestCaseListView
        tests={workerTestList.current.tests}
        runs={workerTestList.current.runs}
        projectNames={report.json().projectNames}
        selectedTestId={test.testId}
      />;
    }}/>
  </div>;
};

function pickDiffForError(error: string, diffs: ImageDiff[]): ImageDiff | undefined {
  const firstLine = error.split('\n')[0];
  if (!firstLine.includes('toHaveScreenshot') && !firstLine.includes('toMatchSnapshot'))
    return undefined;
  return diffs.find(diff => error.includes(diff.name));
}

const StepTreeItem: React.FC<{
  test: TestCase;
  result: TestResult;
  step: TestStep;
  depth: number,
}> = ({ test, step, result, depth }) => {
  const searchParams = useSearchParams();
  return <TreeItem title={<div aria-label={step.title} className='step-title-container'>

Review comment (suggestion):
i believe you're using the ref to prevent wasted computation. this is unconventional - instead, add one more component `WorkerListChip` between `TestResultView` and `TestCaseListView`g that performs the computation in its render. It'll only be run on expanded, and you can use `useMemo` instead of `useRef`.

Code after:
        {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} result={result} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
      </div>}
    </AutoChip></Anchor>}

    {!!videos.length && <Anchor id='attachment-video'><AutoChip header='Videos' revealOnAnchorId='attachment-video'>
      {videos.map(a => <div key={a.path}>
        <video controls>
          <source src={formatUrl(a.path)} type={a.contentType}/>
        </video>
        <AttachmentLink attachment={a} result={result}></AttachmentLink>
      </div>)}
    </AutoChip></Anchor>}

    {!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors} dataTestId='attachments'>
      {[...otherAttachments].map((a, i) =>
        <Anchor key={`attachment-link-${i}`} id={`attachment-${result.attachments.indexOf(a)}`}>
          <AttachmentLink attachment={a} result={result} openInNewTab={a.contentType.startsWith('text/html')} />
        </Anchor>
      )}
    </AutoChip>}

    <AutoChip header={`Executed in Worker #${result.workerIndex}`} dataTestId='worker-test-list' initialExpanded={false} noInsets={true} body={() => {
      const list = buildWorkerLists(report).get(result.workerIndex) || { tests: [], runs: [] };
      return <TestCaseListView
        tests={list.tests}
        runs={list.runs}
        projectNames={report.json().projectNames}
        selectedTestId={test.testId}
      />;
    }}/>
  </div>;
};

function pickDiffForError(error: string, diffs: ImageDiff[]): ImageDiff | undefined {
  const firstLine = error.split('\n')[0];
  if (!firstLine.includes('toHaveScreenshot') && !firstLine.includes('toMatchSnapshot'))
    return undefined;
  return diffs.find(diff => error.includes(diff.name));
}

const StepTreeItem: React.FC<{
  test: TestCase;
  result: TestResult;
  step: TestStep;
  depth: number,
}> = ({ test, step, result, depth }) => {
  const searchParams = useSearchParams();
  return <TreeItem title={<div aria-label={step.title} className='step-title-container'>
    {statusIcon(step.error || step.duration === -1 ? 'failed' : (step.skipped ? 'skipped' : 'passed'))}
    <span className='step-title-text'>
      <span>{step.title}</span>