Introduce a Primer element

[isaacguerreir]

I made the component to visualize primers (#232).

So far, so good. Some problems I would like to ask for some help.

1. We have a gap between the complementary sequence and the reverse primer line, but we do not have a gap between the forward primer line and the sequence.
2. When I select a specific area where a forward prime component is rendered, the component is erased. Do you know why?

[jjti]

@isaacguerreir this is epic. You killed it, this is dope.

I made a couple small changes to address your points:

We have a gap between the complementary sequence and the reverse primer line, but we do not have a gap between the forward primer line and the sequence.

I don't like this part of SeqBlock, because it's so.. brittle and hard-coded, but it was a slightly misordered height calc in this block:

seqviz/src/Linear/SeqBlock.tsx

Lines 256 to 262 in 13fcc68

	// height and yDiff of cut sites
	const cutSiteYDiff = 0; // spacing for cutSite names
	const cutSiteHeight = zoomed && cutSiteRows.length ? lineHeight : 0;
	// height and yDiff of the sequence strand
	const indexYDiff = cutSiteYDiff + cutSiteHeight;
	const indexHeight = seqType === "aa" ? 0 : lineHeight; // if aa, no seq row is shown

When I select a specific area where a forward prime component is rendered, the component is erased. Do you know why?

This was just ordering in the SeqBlock. I changed it so Highlight.Block is first and the Forward Primer is above it:

        <Selection.Block
          findXAndWidth={this.findXAndWidth}
          firstBase={firstBase}
          fullSeq={fullSeq}
          lastBase={lastBase}
          selectHeight={selectHeight}
          onUnmount={onUnmount}
        />
        {primerFwdRows.length && (
          <PrimeRows
            bpsPerBlock={bpsPerBlock}
            direction={1}
            elementHeight={elementHeight}
            findXAndWidth={this.findXAndWidthElement}
            firstBase={firstBase}
            fullSeq={fullSeq}
            inputRef={inputRef}
            lastBase={lastBase}
            primerRows={primerFwdRows}
            seqBlockRef={this}
            width={size.width}
            yDiff={primerFwdYDiff}
          />
        )}

[jjti]

because it's a row of rows, we have to multiple the row count by lineHeight (in case there's >1 rows of primers)

[isaacguerreir]

Sorry, I didn't get it. Should I change something?

[jjti]

No this and the other comments are just me sharing the things I changed as an FYI about some internal details

[jjti]

here and in a couple other places we'll want "primers" in place of annotations

[jjti]

I've been trying to make these *Prop version of arguments. They're like the regular thing, but as a "Prop" when passed as props they can be missing id/color, whereas Primer cannot

[jjti]

No this and the other comments are just me sharing the things I changed as an FYI about some internal details

[isaacguerreir]

Should I make a Circle visual element? Or this is not imperative for accepting this PR?

[jjti]

Should I make a Circle visual element? Or this is not imperative for accepting this PR?

I think that'd be great, and probably part of the acceptance criteria for closing #232

But that we can merge this and release it without having it Circular (yet)

One more small thing: could you please add docs on the primers prop to the README?

[isaacguerreir]

Should I make a Circle visual element? Or this is not imperative for accepting this PR?

I think that'd be great, and probably part of the acceptance criteria for closing #232

But that we can merge this and release it without having it Circular (yet)

One more small thing: could you please add docs on the primers prop to the README?

Primer props added on the README.

[jjti]

small fixes to sed replace annotations > primers

[jjti]

LGTM, this is cool!

[jjti]

released @isaacguerreir : https://github.com/Lattice-Automation/seqviz/releases/tag/3.10.0 🎉

[isaacguerreir]

Thanks for helping me, @jjti. I was talking today with @guzmanvig about how the code is definitely much simpler than it should be for the complexity it's taking it. So thanks for making so many comments and the cleanness of the Seqviz code.