Fix rendering of distinct compSeqs

Author: josh

src/SeqViz.tsx

@@ -294,7 +294,7 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
     seq: string;
     seqType: SeqType;
   } => {
-    const { annotations, file, name = "", seq } = props || this.props;
+    const { annotations, compSeq, file, name = "", seq } = props || this.props;
 
     if (file) {
       // Parse a sequence file
@@ -319,7 +319,7 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
       const seqType = guessType(seq);
       return {
         annotations: this.parseAnnotations(annotations, seq),
-        compSeq: complement(seq, seqType).compSeq,
+        compSeq: compSeq || complement(seq, seqType).compSeq,
         name,
         seq,
         seqType,

src/index.test.tsx

@@ -89,4 +89,25 @@ describe("SeqViz rendering (React)", () => {
     expect(getAllByTestId("la-vz-selection-block")).toBeTruthy();
     expect(getAllByTestId("la-vz-selection-edge")).toHaveLength(1);
   });
+
+  // https://github.com/Lattice-Automation/seqviz/issues/203
+  it("renders a distinct compSeq", () => {
+    const seq = "ATGC";
+    const compSeq = "00TA";
+
+    const { getAllByTestId } = render(
+      <SeqViz {...props} compSeq={compSeq} selection={{ end: 15, start: 1 }} seq={seq} viewer="linear" />
+    );
+    expect(getAllByTestId("la-vz-seqviz")).toBeTruthy();
+
+    const seqValue = getAllByTestId("la-vz-seq")
+      .map(s => s.textContent)
+      .join("");
+    const compSeqValue = getAllByTestId("la-vz-comp-seq")
+      .map(s => s.textContent)
+      .join("");
+
+    expect(seqValue).toEqual(seq);
+    expect(compSeqValue).toEqual(compSeq);
+  });
 });