primer svg created and rendered to linear component

demo/lib/App.tsx

@@ -17,9 +17,11 @@ import seqparse from "seqparse";
 import Circular from "../../src/Circular/Circular";
 import Linear from "../../src/Linear/Linear";
 import SeqViz from "../../src/SeqViz";
-import { AnnotationProp } from "../../src/elements";
+import { AnnotationProp, Primer } from "../../src/elements";
 import Header from "./Header";
 import file from "./file";
+import { Direction } from "../../src/Linear/Primers";
+import { COLORS, chooseRandomColor } from "../../src/colors";
 
 const viewerTypeOptions = [
   { key: "both", text: "Both", value: "both" },
@@ -33,6 +35,7 @@ interface AppState {
   customChildren: boolean;
   enzymes: any[];
   name: string;
+  primers: Primer[]
   search: { query: string };
   searchResults: any;
   selection: any;
@@ -52,6 +55,24 @@ export default class App extends React.Component<any, AppState> {
     customChildren: true,
     enzymes: ["PstI", "EcoRI", "XbaI", "SpeI"],
     name: "",
+    primers: [
+      {
+        color: chooseRandomColor(),
+        direction: Direction.FOWARD,
+        end: 653,
+        id: "527923581",
+        name: "pLtetO-1 fw primer",
+        start: 633,
+      }, 
+      {
+        color: chooseRandomColor(),
+        direction: Direction.REVERSE,
+        end: 706,
+        id: "527923582",
+        name: "pLtetO-1 rev primer",
+        start: 686,
+      }, 
+    ],
     search: { query: "ttnnnaat" },
     searchResults: {},
     selection: {},
@@ -73,6 +94,7 @@ export default class App extends React.Component<any, AppState> {
 
   componentDidMount = async () => {
     const seq = await seqparse(file);
+
     this.setState({ annotations: seq.annotations, name: seq.name, seq: seq.seq });
   };
 
@@ -215,6 +237,7 @@ export default class App extends React.Component<any, AppState> {
                     // accession="MN623123"
                     key={`${this.state.viewer}${this.state.customChildren}`}
                     annotations={this.state.annotations}
+                    primers={this.state.primers}
                     enzymes={this.state.enzymes}
                     highlights={[{ start: 0, end: 10 }]}
                     name={this.state.name}

src/Linear/Linear.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 
 import { InputRefFunc } from "../SelectionHandler";
-import { Annotation, CutSite, Highlight, NameRange, Range, SeqType, Size } from "../elements";
+import { Annotation, CutSite, Highlight, NameRange, Primer, Range, SeqType, Size } from "../elements";
 import { createMultiRows, createSingleRows, stackElements } from "../elementsToRows";
 import { isEqual } from "../isEqual";
 import { createTranslations } from "../sequence";
 import { InfiniteScroll } from "./InfiniteScroll";
 import { SeqBlock } from "./SeqBlock";
+import { Direction } from "./Primers";
 
 export interface LinearProps {
   annotations: Annotation[];
@@ -21,6 +22,7 @@ export interface LinearProps {
   inputRef: InputRefFunc;
   lineHeight: number;
   onUnmount: (id: string) => void;
+  primers: Primer[];
   search: NameRange[];
   seq: string;
   seqFontSize: number;
@@ -68,6 +70,7 @@ export default class Linear extends React.Component<LinearProps> {
       highlights,
       lineHeight,
       onUnmount,
+      primers,
       search,
       seq,
       seqType,
@@ -99,14 +102,31 @@ export default class Linear extends React.Component<LinearProps> {
     /**
      * Vet the annotations for starts and ends at zero index
      */
-    const vetAnnotations = (annotations: Annotation[]) => {
+    const vetAnnotations = (annotations: Annotation[] | Primer[]) => {
       annotations.forEach(ann => {
         if (ann.end === 0 && ann.start > ann.end) ann.end = seqLength;
         if (ann.start === seqLength && ann.end < ann.start) ann.start = 0;
       });
       return annotations;
     };
 
+    const primerFwRows = createMultiRows(
+      stackElements(vetAnnotations(
+        primers.filter((p) => p.direction == Direction.FOWARD)),
+        seq.length
+      ),
+      bpsPerBlock,
+      arrSize
+    ) 
+    const primerRvRows = createMultiRows(
+      stackElements(vetAnnotations(
+        primers.filter((p) => p.direction == Direction.REVERSE)),
+        seq.length
+      ),
+      bpsPerBlock,
+      arrSize
+    ) 
+
     const annotationRows = createMultiRows(
       stackElements(vetAnnotations(annotations), seq.length),
       bpsPerBlock,
@@ -141,6 +161,12 @@ export default class Linear extends React.Component<LinearProps> {
       if (zoomed) {
         blockHeight += showComplement ? lineHeight : 0; // double for complement + 2px margin
       }
+      if (primerFwRows[i].length) {
+        blockHeight += lineHeight;
+      }
+      if (primerRvRows[i].length) {
+        blockHeight += lineHeight;
+      }
       if (showIndex) {
         blockHeight += lineHeight; // another for index row
       }
@@ -164,6 +190,8 @@ export default class Linear extends React.Component<LinearProps> {
       seqBlocks.push(
         <SeqBlock
           key={ids[i]}
+          primerFwRows={primerFwRows[i]}
+          primerRvRows={primerRvRows[i]}
           annotationRows={annotationRows[i]}
           blockHeight={blockHeights[i]}
           bpColors={this.props.bpColors}