Реагируйте: создайте средство просмотра ДНК для очень длинной последовательности

Я поставил перед собой задачу создать этот секвенсор, но оказалось, что никакая оптимизация в чистом React не поможет. Даже если заключить каждую букву в простой span, это уже слишком, если длина последовательности составляет 5 000 000.

Единственное, что, как я знаю, может помочь, это виртуализация. Эту идею можно сузить до: давайте визуализируем только то, что видно в данный момент, а остальное отключим.

К сожалению, он имеет множество ограничений, в основном связанных с возможностью организации контента в список строк и знанием размеров каждой строки.

Найдите «React virtualization» в Google, чтобы узнать, как это сделать. Хотя переписать онлайн-руководство в этом SO-ответе — слишком многого, я приведу несколько примеров кода, которые, по моему мнению, будут полезны.

Я бы не рекомендовал разбивать всю последовательность на список. Советую везде передавать всю последовательность вместе с beginIndex и endIndex и использовать substring. Таким образом, вы сможете создать компонент, который извлекает только ту часть, которая ему нужна:

const CHUNK_SIZE = 10;

const ROW_HEIGHT = 50;

const ROW_WIDTH = 1100;

function DnaSequenceRow(props) {
  const row = React.useMemo(() => {
    return props.sequence.substring(props.beginIndex, props.endIndex);
  }, [props.beginIndex, props.endIndex, props.sequence]);

  const chunksOfTen = React.useMemo(() => divideIntoSubsequences(row, CHUNK_SIZE),
    [row],
  );

  return (
    <div style = {{
      //size probably has to be arbitrarily set for the sake of virtualization
      height: ROW_HEIGHT,
      width:  ROW_WIDTH,
    }}
    >
      {chunksOfTen.map((ten, indexWithinRow) => (
        <SequenceOfTen
          key = {indexWithinRow}
          sequenceOfTen = {ten}
          index = {props.beginIndex + (indexWithinRow * CHUNK_SIZE)}/>
      ))}
    </div>
  );
}

Это то, что вам, вероятно, понадобится для виртуализации — возможность отображать одну строку, чтобы библиотека виртуализации могла отображать выбранное подмножество строк (а не отображать их все).

Для удобства чтения я также выделил кусок из десяти нуклеотидов в отдельный компонент:

function SequenceOfTen(props) {
  return (
    <>
      <Box
        sx = {{
          display:      'inline-block',
          borderBottom: '3px solid lightblue',
          // color: getNucleotideColor(nucleotide),
          paddingTop:   '2px',
          position:     'relative',
          marginBottom: '20px',
        }}
      >
        {props.sequenceOfTen[0]}
        <Box
          sx = {{
            position:  'absolute',
            top:       '110%', // Below the nucleotide
            left:      '50%',
            transform: 'translateX(-50%)',
            fontSize:  '12px',
            color:     'black',
          }}
        >
          {props.index}
        </Box>
      </Box>
      <Box
        sx = {{
          display:      'inline-block',
          borderBottom: '1px solid lightblue',
          // color: getNucleotideColor(nucleotide),
          paddingTop:   '2px',
          position:     'relative',
          marginBottom: '20px',
        }}
      >
        {props.sequenceOfTen.substring(1)}
      </Box>
    </>
  );
}

Я использовал useMemo, чтобы избежать пересчета строк и фрагментов при каждом рендеринге, и обернул компоненты React.memo, чтобы избежать ненужных повторных рендерингов. Разделение на куски основано на алгоритме, который я нашел здесь: https://stackoverflow.com/a/29202760/12003949

export function divideIntoSubsequences(sequence, subsequenceLength) {
  const numberOfSubsequences = Math.ceil(sequence.length / subsequenceLength);
  const subsequences         = new Array(numberOfSubsequences);
  for (let i = 0, o = 0; i < numberOfSubsequences; ++i, o += subsequenceLength) {
    subsequences[i] = sequence.substring(o, o + subsequenceLength);
  }
  return subsequences;
}

Оберните вокруг этого какую-нибудь библиотеку виртуализации, и она должна работать как шарм. Удачи!