LinearViewer Improvements

[ninjha01]

This issue will track the improvements that need to be made to the LinearViewer component.

1) Mismatches the way mismatches are rendered.

{mismatches.map((base) => {
        const xPerc = (base.index / maxEnd) * 100;
        const width = Math.max((1 / sequence.length) * 100, 0.25);

        return (
          <g
            className={classNames(mismatchClassName?.(base) || "bg-red-400")}
            key={`sequence-${sequenceIdx}-mismatch-${base.index}`}
          >
            <line
              x1={`${xPerc - width / 2}%`}
              y1={`${sequenceIdx * 10 + 10}`}
              x2={`${xPerc + width / 2}%`}
              y2={`${sequenceIdx * 10 + 10}`}
              strokeWidth={5}
            />
          </g>
        );
      })}

Right now we render an element for every mismatch between the first sequence, and all other sequences. This is predictably inefficient and slow on any sequences of non trivial length. We should first have a prop hideMismatches?: boolean that opts out of rendering mismatches.

Secondly, we should render mismatches more efficiently. Some ideas I've had, but open to others: 1) collapse adjacent mismatches into a mismatch range, and render that instead 2) Use an element with a linear gradient based on where mismatches are

• [ ] The first thing we should do to tackle this is create a storybook story that repros this performance issue.

[ninjha01]

Deliverable: story per perf fix

[ninjha01]

2. Annotation layout bug Annotations are currently slotted into different "tracks" by the type field. We should instead lay them out in an efficient way that avoids overlaps.

[ninjha01]

3. Small Fixes
   • [ ] Rename sequence to "baseSequence" and otherSequences to "alignedSequences"
   • [ ] move stackAnnsByType to utils
   • [ ] create dedicate props types instead of inline
   • [ ] document/tighten down the ref typing of useLinearSelectionRect hooks
   • [ ] rename generateRandomSequences to generateRandomAlignedSequences