### Install and Run SeqViz Demo

Source: https://github.com/lattice-automation/seqviz/blob/develop/demo/README.md

Clone the repository, install dependencies, and start the SeqViz demo. Ensure you are in the correct directories for installation.

```bash
git clone https://github.com/Lattice-Automation/seqviz
cd seqviz/demo
npm install
cd ..
npm install
npm start
```

--------------------------------

### Arc Component Example Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Demonstrates how to use the Arc component to render a visual arc element. This example shows setting start and end points, direction, radius, and styling.

```jsx
<Arc
  start={100}
  end={250}
  direction={1}
  radius={200}
  lineHeight={14}
  genArc={genArc}
  getRotation={getRotation}
  inputRef={inputRef}
  className="la-vz-annotation"
  style={{ fill: "#FF0000" }}
/>
```

--------------------------------

### Install SeqViz with npm

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Install the SeqViz package using npm for use in your project.

```bash
npm install seqviz
```

--------------------------------

### Start SeqViz Demo Application

Source: https://github.com/lattice-automation/seqviz/blob/develop/CONTRIBUTING.md

Start the local demo application for SeqViz to test changes. Visit http://localhost:3010 to access the application.

```bash
npm run start
```

--------------------------------

### Example User-Provided Primer

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

An example of a `PrimerProp` object for a 'Fwd Primer' spanning indices 10 to 35 with a blue color and forward direction.

```typescript
{
  name: "Fwd Primer",
  start: 10,
  end: 35,
  direction: 1,
  color: "#0000FF"
}
```

--------------------------------

### Install SeqViz Packages

Source: https://github.com/lattice-automation/seqviz/blob/develop/CONTRIBUTING.md

Install the necessary npm packages for SeqViz and its demo application. Ensure you are in the root directory for the first command and the demo directory for the second.

```bash
seqviz
npm i
cd ./demo
npm i
```

--------------------------------

### Define Annotations for SeqViz

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Example of how to define an array of annotations for SeqViz, specifying start, end, name, direction, and color.

```javascript
annotations = [
  { start: 0, end: 22, name: "Strong promoter", direction: 1 }, // [0, 22)
  { start: 23, end: 273, name: "GFP" },
  { start: 300, end: 325, name: "Weak promoter", direction: -1, color: "#FAA887" },
];
```

--------------------------------

### React Component Instantiation

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Example of how to use the SeqViz React component with basic props.

```jsx
import { SeqViz } from "seqviz";

export default () => (
  <SeqViz
    name="J23100"
    seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
    annotations={[{ name: "promoter", start: 0, end: 34, direction: 1, color: "blue" }]} 
  />
);
```

--------------------------------

### Example User-Provided Annotation

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

An example of how to structure an `AnnotationProp` object, specifying a 'Promoter' region from index 0 to 150 with a red color.

```typescript
{
  name: "Promoter",
  start: 0,
  end: 150,
  direction: 1,
  color: "#FF0000"
}
```

--------------------------------

### Search Result Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Example of search results conforming to NameRange. Includes start, end, direction, and an ID.

```typescript
[
  {
    start: 100,
    end: 110,
    direction: 1,
    id: "100-fwd",
    name: "",
    color?: undefined
  },
  {
    start: 250,
    end: 260,
    direction: -1,
    id: "250-rev",
    name: "",
    color?: undefined
  }
]
```

--------------------------------

### Deprecated File Prop Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Example demonstrating the deprecated 'file' prop. It is recommended to use the 'seqparse' package to parse file content instead.

```typescript
import seqparse from "seqparse";

const parsed = await seqparse.parseFile(fileContent);
<SeqViz {...parsed} />
```

--------------------------------

### Deprecated EnzymesCustom Prop Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Example demonstrating the deprecated 'enzymesCustom' prop. Custom enzymes should now be passed directly within the 'enzymes' array.

```typescript
<SeqViz enzymes={[customEnzymeObj, "EcoRI", ...]} />
```

--------------------------------

### Example: Get Rotation Calculation

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Demonstrates the calculation of the SVG rotation transform for specific sequence indices. Shows how base position translates to degrees of rotation.

```typescript
// Sequence length: 1000, centralIndex: 0
getRotation(250)  // (250/1000)*360 = 90° → "rotate(90, cx, cy)"
getRotation(500)  // (500/1000)*360 = 180° → "rotate(180, cx, cy)"
```

--------------------------------

### Optional Color Examples

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Provides examples of hexadecimal color codes and standard CSS color names for highlighting enzyme recognition sites.

```typescript
"#FF0000"      // Red
```

```typescript
"#0000FF"      // Blue
```

```typescript
"#CCCCCC"      // Gray
```

--------------------------------

### SeqViz React Component

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

How to install and use the SeqViz React component.

```APIDOC
## Installation

### npm

```bash
npm install seqviz
```

### CDN

```html
<script src="https://unpkg.com/seqviz"></script>
```

## Usage

### React Instantiation

```jsx
import { SeqViz } from "seqviz";

export default () => (
  <SeqViz
    name="J23100"
    seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
    annotations={[{ name: "promoter", start: 0, end: 34, direction: 1, color: "blue" }]} 
  />
);
```

## Props

All the following are usable as props for the React component (`seqviz.SeqViz`) or as options for the plain JS implementation (`seqviz.Viewer()`).

### Required

#### `seq (='')`

A sequence to render. Can be a DNA, RNA, or amino acid sequence.

### Optional

#### `viewer (='both')`

The type and orientation of the sequence viewers. One of `"linear" | "circular" | "both" | "both_flip"`. `both` means the circular viewer fills the left side of SeqViz, and the linear viewer fills the right. `both_flip` is the opposite: the linear viewer is on the left, and the circular viewer is on the right.

#### `name (='')`

The name of the sequence/plasmid. Shown at the center of the circular viewer.

#### `annotations (=[])`

An array of `Annotation`s to render. Each `Annotation` requires 0-based start (inclusive) and end (exclusive) indexes. `name`s are rendered on top of the annotations. Set the annotation's direction to `1` for forward arrows and `-1` for reverse arrows.

```js
annotations = [
  { start: 0, end: 22, name: "Strong promoter", direction: 1 }, // [0, 22)
  { start: 23, end: 273, name: "GFP" },
  { start: 300, end: 325, name: "Weak promoter", direction: -1, color: "#FAA887" },
];
```

In the example above, the "Strong promoter" would span the first to twenty-second base pair.

### File or Accession (Deprecated)

These props are `@deprecated` and may be removed in a future major release. We recommend parsing sequence files outside of `SeqViz` with the [`seqparse` package](https://github.com/Lattice-Automation/seqparse).

- `file` is a FASTA, GenBank, SnapGene, JBEI, or SBOL file (`string` | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File))
- `accession` is an NCBI accession-ID (`string`)

For example:

```jsx
import seqparse from "seqparse";

export default () => {
  const [seq, setSeq] = useState({ name: "", seq: "", annotations: [] });

  // fetch and parse a sequence from NCBI: https://www.ncbi.nlm.nih.gov/nuccore/MN623123.1
  useEffect(async () => setSeq(await seqparse("MN623123.1")));

  return <SeqViz name={seq.name} seq={seq.seq} annotations={seq.annotations} />;
};
```
```

--------------------------------

### Space Complexity Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Illustrates the space complexity of the Linear Viewer, showing the calculation for a typical scenario with a large sequence and numerous annotations.

```typescript
O(n/bpsPerBlock + m)  // Arrays of blocks + elements per block
// Example: 100k bp, 50bp/block, 500 annotations
// = 2000 blocks + (2000 * avg 2.5 annot/block)
// = ~7000 array entries
```

--------------------------------

### Deprecated Backbone Prop Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Example demonstrating the deprecated 'backbone' prop. It is recommended to append backbone sequences directly to the 'seq' prop.

```typescript
<SeqViz seq={backboneSeq + mySeq} />
```

--------------------------------

### Complete SeqViz Configuration

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

A comprehensive example showcasing various SeqViz configuration options, including sequence data, viewer settings, annotations, primers, enzymes, search parameters, styling, and event handlers.

```typescript
<SeqViz
  name="pJ23100"
  seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
  seqType="dna"
  viewer="both"
  zoom={{ linear: 50, circular: 0 }}
  showComplement={true}
  showIndex={true}
  rotateOnScroll={true}
  
  annotations={[
    {
      name: "Promoter",
      start: 0,
      end: 35,
      direction: 1,
      color: "#FF0000"
    }
  ]}
  
  primers={[
    {
      name: "Fwd",
      start: 5,
      end: 25,
      direction: 1
    }
  ]}
  
  translations={[
    {
      name: "ORF",
      start: 36,
      end: 150,
      direction: 1
    }
  ]}
  
  enzymes={["EcoRI", "BamHI"]}
  
  search={{ query: "GGTA", mismatch: 0 }}
  
  colors={["#FF0000", "#00FF00", "#0000FF"]}
  
  style={{ height: "100vh", width: "100vw" }}
  
  onSelection={(sel) => console.log(sel)}
  onSearch={(results) => console.log(results)}
/>
```

--------------------------------

### Example Selection Object

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

An example of a Selection object representing an annotation.

```typescript
{
  type: "ANNOTATION",
  name: "lacZ fragment",
  start: 133,
  end: 457,
  length: 324,
  viewer: "LINEAR"
}
```

--------------------------------

### SeqViz onSearch Callback Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Shows how to use the onSearch callback to receive and process search results within SeqViz. This is helpful for displaying found matches, their locations, and directions.

```typescript
import React from 'react';
import SeqViz from 'seqviz';

// Assuming Range type is defined elsewhere
// interface Range {
//   start: number;
//   end: number;
//   direction: -1 | 0 | 1;
//   id: string;
//   name: string;
//   color?: string;
// }

const MyComponent = () => {
  return (
    <SeqViz
      seq="..."
      search={{ query: "ATG", mismatch: 0 }}
      onSearch={(results) => {
        console.log(`Found ${results.length} matches:`);
        results.forEach((r, i) => {
          console.log(`${i}: ${r.start}-${r.end} (${r.direction > 0 ? 'fwd' : 'rev'})`);
        });
      }}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Enzyme Digestion Return Type Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Example of the CutSite array returned after enzyme digestion. Includes site details and enzyme information.

```typescript
[
  {
    start: 15,
    end: 21,
    name: "EcoRI",
    id: "EcoRI-GAATTC-16-fwd",
    enzyme: { name: "EcoRI", rseq: "GAATTC", fcut: 1, rcut: 5 },
    direction: 1,
    fcut: 16,
    rcut: 20,
    color?: "#CCCCCC"
  }
]
```

--------------------------------

### Example Restriction Enzyme Specification

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

An example of an `Enzyme` object for EcoRI, specifying its recognition sequence, cut sites, and an optional color.

```typescript
{
  name: "EcoRI",
  rseq: "GAATTC",
  fcut: 1,
  rcut: 5,
  color: "#CCCCCC"
}
```

--------------------------------

### Programmatic Selection Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Demonstrates how to control SeqViz selection programmatically using the `selection` prop. The parent component manages the selection state via `useState`.

```jsx
const [selection, setSelection] = useState<ExternalSelection>({
  start: 100,
  end: 250,
  clockwise: true
});

<SeqViz seq="..." selection={selection} />
```

--------------------------------

### Linear Component Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/seqviz-api-reference.md

Example of how to use the Linear component with common props. Requires 'seqviz' import.

```typescript
import { Linear } from "seqviz";

<Linear
  seq="ATGCTAGCTAGCTAGC..."
  compSeq="TACGATCGATCGATCG..."
  seqType="dna"
  annotations={[]}
  bpsPerBlock={50}
  charWidth={7.2}
  lineHeight={14}
  size={{ height: 400, width: 800 }}
  zoom={{ linear: 50 }}
  handleMouseEvent={handleMouseEvent}
  inputRef={inputRef}
  onUnmount={handleUnmount}
/>
```

--------------------------------

### SeqViz onSelection Callback Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Demonstrates how to implement the onSelection callback to handle different selection types and extract relevant data. This is useful for reacting to user clicks on annotations, enzymes, sequence regions, or search results.

```typescript
import React from 'react';
import SeqViz from 'seqviz';

// Assuming Selection type is defined elsewhere
// interface Selection {
//   start: number;
//   end: number;
//   type: string;
//   name?: string;
//   length?: number;
// }

const MyComponent = () => {
  return (
    <SeqViz
      seq="ATGC..."
      onSelection={(selection) => {
        console.log(`Selected: ${selection.start}-${selection.end}`);
        
        switch (selection.type) {
          case "ANNOTATION":
            console.log(`Annotation: ${selection.name}`);
            break;
          case "ENZYME":
            console.log(`Enzyme: ${selection.name}`);
            break;
          case "SEQ":
            console.log(`Sequence: ${selection.length}bp`);
            break;
          case "FIND":
            console.log(`Search result at ${selection.start}`);
            break;
          case "TRANSLATION":
            console.log(`Translation at ${selection.start}`);
            break;
          case "AMINOACID":
            console.log(`Amino acid at ${selection.start}`);
            break;
          default:
            console.log('Unknown selection type');
        }
      }}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Recognition Sequence Examples

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Illustrates different formats for enzyme recognition sequences, including exact sequences, large sites with ambiguity codes, and sites with ambiguity codes.

```typescript
"GAATTC"      // EcoRI: exact 6bp sequence
```

```typescript
"GCCNNNNNNNNNNNNNNNNGC"  // Large recognition site
```

```typescript
"CTGCAG"      // PstI: exact 6bp sequence
```

```typescript
"NGG"         // Cas9: N matches any nucleotide
```

--------------------------------

### Deprecated Accession Prop Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Example demonstrating the deprecated 'accession' prop. It is recommended to use the 'seqparse' package for fetching and parsing sequence data instead.

```typescript
import seqparse from "seqparse";

const parsed = await seqparse("NC_000001.11");
<SeqViz {...parsed} />
```

--------------------------------

### Handle Sequence Selection in SeqViz

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/README.md

Implement a callback to handle user selections within the viewer, logging the type, start, and end of the selection.

```typescript
<SeqViz
  seq="..."
  onSelection={(selection) => {
    console.log(selection.type, selection.start, selection.end);
  }}
/>
```

--------------------------------

### Digestion Result Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

An example of the `CutSite` object structure returned by the `digest()` function, showing details of forward and reverse strand cut sites.

```typescript
[
  {
    start: 150,
    end: 156,
    fcut: 151,
    rcut: 155,
    direction: 1,  // Forward strand
    name: "EcoRI",
    id: "EcoRI-GAATTC-151-fwd",
    enzyme: { name: "EcoRI", rseq: "GAATTC", fcut: 1, rcut: 5 },
    color?: "#CCCCCC"
  },
  {
    start: 800,
    end: 806,
    fcut: 801,
    rcut: 805,
    direction: -1,  // Reverse strand
    name: "EcoRI",
    id: "EcoRI-GAATTC-801-rev",
    enzyme: { ... },
    color?: "#CCCCCC"
  }
]
```

--------------------------------

### SeqViz React Component Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/seqviz-api-reference.md

Example of how to use the SeqViz React component with sequence data and annotations.

```typescript
import React from "react";
import { SeqViz } from "seqviz";

export default function App() {
  return (
    <SeqViz
      name="pJ23100"
      seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
      annotations={[
        {
          name: "promoter",
          start: 0,
          end: 34,
          direction: 1,
          color: "blue"
        }
      ]}
      zoom={{ linear: 50, circular: 0 }}
      onSelection={(selection) => {
        console.log("Selected:", selection);
      }}
    />
  );
}
```

--------------------------------

### Circular Component Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/seqviz-api-reference.md

Example of how to use the Circular component with various props. Requires 'seqviz' import.

```typescript
import { Circular } from "seqviz";

<Circular
  seq="ATGCTAGC..."
  compSeq="TACGATCG..."
  name="Plasmid"
  annotations={[]}
  radius={200}
  center={{ x: 300, y: 300 }}
  size={{ height: 600, width: 600 }}
  rotateOnScroll={true}
  showComplement={true}
  showIndex={true}
  handleMouseEvent={handleMouseEvent}
  inputRef={inputRef}
  onUnmount={handleUnmount}
/>
```

--------------------------------

### Configure Sequence Annotations

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Add features or regions to annotate on the sequence. Each annotation requires 'name', 'start', and 'end'.

```typescript
annotations=[
  {
    name: "Promoter",
    start: 0,
    end: 150,
    direction: 1,
    color: "#FF0000"
  },
  {
    name: "RBS",
    start: 160,
    end: 166
  }
]
```

--------------------------------

### Example User-Provided Translation Region

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

An example of a `TranslationProp` object, defining an 'ORF 1' region from index 0 to 300 with a green color and forward direction.

```typescript
{
  name: "ORF 1",
  start: 0,
  end: 300,
  direction: 1,
  color: "#00FF00"
}
```

--------------------------------

### Circular Viewer with Enzyme Cut Sites

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Illustrates how to display enzyme cut sites on the circular viewer by providing an array of cut site objects. Each object specifies the start, end, name, and cutting details of the enzyme.

```typescript
<Circular
  seq="..."
  cutSites={[
    {
      start: 150,
      end: 156,
      name: "EcoRI",
      fcut: 151,
      rcut: 155,
      direction: 1,
      enzyme: { name: "EcoRI", rseq: "GAATTC", fcut: 1, rcut: 5 }
    }
  ]}
  // ... other props
/>
```

--------------------------------

### Define Primers for Seqviz

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

An array of Primer objects to render. Each primer requires start (inclusive) and end (exclusive) indexes. Names are rendered on top of primers. Direction is 1 for forward and -1 for reverse. Color is optional.

```javascript
primers = [
  { start: 33, end: 53, name: "LacZ Foward Primer", direction: 1 },
  { start: 3098, end: 3128, name: "LacZ Reverse Primer", direction: -1, color: "#FAA887" },
];
```

--------------------------------

### SeqViz Custom Select All Event

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Customize the selectAllEvent callback to define a unique keyboard shortcut for selecting the entire sequence. This example uses Ctrl+Shift+A.

```typescript
import React from 'react';
import SeqViz from 'seqviz';

const MyComponent = () => {
  return (
    <SeqViz
      seq="..."
      selectAllEvent={(e) => {
        // Custom: Ctrl+Shift+A
        return e.key === "a" && e.ctrlKey && e.shiftKey;
      }}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Cut Pattern Notation Examples

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Illustrates standard notation for restriction enzyme cut patterns, including blunt and sticky ends with different overhang types.

```text
AAGCTT     (recognition sequence)
A↓AGCTT    (blunt end on top, fcut=1)
↓AAGCTT    (blunt end on top, fcut=0)
```

```text
GAATTC
G↓AATTC  (fcut=1)
G↓AATTC  (rcut=1 on reverse)
Result: Blunt ends
```

```text
GAATTC
G↓AATTC    (fcut=1)
GAATT↓C    (rcut=5)
Result: 5' sticky overhang (AATT)
```

```text
GAATTC
↓GAATTC    (fcut=0)
GAATT↓C    (rcut=5)
Result: 3' sticky overhang
```

--------------------------------

### Example: Inline vs Outer Label Calculation

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Illustrates the logic for determining whether an annotation label should be displayed inline within the circle or as an outer label, based on available space and label width.

```typescript
// 20bp annotation on 1000bp plasmid with name "Promoter (15 chars)":
// Arc space: 2π * radius * (20/1000) ≈ circumference * 0.02
// Name width: 15 chars * 7.2px ≈ 108px
// If 108px > available space → outer label
```

--------------------------------

### Log SeqViz Selections to Console

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Implement the `onSelection` callback to log details about the selected region, including its type, start and end positions, and name. This is helpful for debugging and understanding user interactions.

```typescript
<SeqViz
  seq="ATGCTAGC..."
  onSelection={(sel) => {
    console.log(`${sel.type}: ${sel.start}-${sel.end} (${sel.name || 'unnamed'})`);
  }}
/>
```

--------------------------------

### Circular Viewer with Search Results

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Shows how to highlight search results on the circular viewer. The 'search' prop accepts an array of objects, each defining the start, end, direction, and an ID for the search match.

```typescript
<Circular
  seq="..."
  search={[
    { start: 100, end: 110, direction: 1, id: "100-fwd", name: "" }
  ]}
  // ... other props
/>
```

--------------------------------

### Initialize SeqViz with Vanilla JavaScript

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/README.md

Use the Viewer constructor for vanilla JavaScript integration, providing a root element ID and configuration options.

```javascript
const viewer = window.seqviz.Viewer("root", {
  name: "pGreen",
  seq: "ATGC...",
  annotations: [...]
});
viewer.render();
```

--------------------------------

### Plain JavaScript Viewer Instantiation

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Instantiate and render the SeqViz viewer using plain JavaScript. This method requires a root element ID and configuration options.

```javascript
window.seqviz
  .Viewer("root", {
    name: "L09136",
    seq: "tcgcgcgtttcggtgatgacggtgaaaacctctgacacatgca",
    style: { height: "100vh", width: "100vw" },
  })
  .render();
```

--------------------------------

### Initialize SeqViz with Default Props

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/README.md

Use this snippet to quickly initialize the SeqViz component with a sequence and default settings.

```typescript
<SeqViz seq="ATGC..." />
```

--------------------------------

### SeqVizProps Constructor Options - Required Input

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

You must provide one of 'seq', 'file', or 'accession' to display a sequence. Precedence is 'accession' > 'file' > 'seq'.

```typescript
seq?: string
```

```typescript
file?: string | File
```

```typescript
accession?: string
```

--------------------------------

### Define Sequence Range Type

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Represents a contiguous region within a sequence, including start and end indices, and an optional direction. The start is 0-based inclusive, and the end is 0-based exclusive. Direction can be forward (1), reverse (-1), or none (0).

```typescript
interface Range {
  direction: -1 | 0 | 1;
  end: number;
  start: number;
}
```

--------------------------------

### Basic Circular Viewer Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/circular-viewer.md

Demonstrates the fundamental usage of the Circular component with essential props like sequence, complementary sequence, name, and basic display options.

```typescript
import { Circular } from "seqviz";

<Circular
  seq="ATGCTAGC..."
  compSeq="TACGATCG..."
  name="pGreen"
  annotations={[
    { start: 0, end: 100, name: "promoter", color: "#FF0000" }
  ]}
  primers={[]}
  cutSites={[]}
  highlights={[]}
  search={[]}
  showComplement={true}
  showIndex={true}
  rotateOnScroll={true}
  radius={200}
  center={{ x: 300, y: 300 }}
  size={{ height: 600, width: 600 }}
  handleMouseEvent={handleMouseEvent}
  inputRef={inputRef}
  onUnmount={handleUnmount}
/>
```

--------------------------------

### Viewer Constructor API

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/INDEX.md

Documentation for the Vanilla JS Viewer constructor, allowing SeqViz to be used without React.

```APIDOC
## Vanilla JS Viewer Constructor

### Description
Provides a Vanilla JavaScript interface to create SeqViz viewers without React.

### Usage
`window.seqviz.Viewer()

### Configuration
Refer to [Viewer Constructor Options](configuration-reference.md#vanilla-js-viewer-constructor) for available configuration parameters.
```

--------------------------------

### Cloning with Compatible Overhangs

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Demonstrates using multiple enzymes, EcoRI and BamHI, with compatible overhangs for cloning purposes.

```typescript
const plasmid = {
  seq: "GAATTCGGATCCGAATTC",
  enzymes: ["EcoRI", "BamHI"]
};

<SeqViz {...plasmid} />
```

--------------------------------

### Accessing and Inspecting Preset Enzymes

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Demonstrates how to import the 'Enzymes' object from seqviz and access individual enzyme definitions by their lowercase name.

```typescript
import { Enzymes } from "seqviz";

console.log(Object.keys(Enzymes));
// ["aatii", "abasi", "acc65i", "acci", ...]

console.log(Enzymes["ecori"]);
// { name: "EcoRI", rseq: "GAATTC", fcut: 1, rcut: 5 }
```

--------------------------------

### Detailed View Configuration

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Sets up the Linear Viewer for a detailed, zoomed-in view by increasing `bpsPerBlock`, `zoom`, `charWidth`, and `elementHeight`.

```typescript
<Linear
  bpsPerBlock={20}           // More blocks, less content per block
  zoom={{ linear: 80 }}      // Large text
  charWidth={10}             // Larger characters
  elementHeight={30}         // Taller elements
  size={{ height: 800 }}     // Larger viewport
/>
```

--------------------------------

### Add Annotations to SeqViz

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/README.md

Add custom annotations to the sequence, specifying name, start, end, direction, and color.

```typescript
<SeqViz
  seq="..."
  annotations={[
    { name: "Gene1", start: 0, end: 100, direction: 1, color: "#FF0000" }
  ]}
/>
```

--------------------------------

### Optional Range Example

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Demonstrates how to use the 'range' field to restrict enzyme digestion to a specific region of the DNA sequence.

```typescript
{
  name: "EcoRI",
  rseq: "GAATTC",
  fcut: 1,
  rcut: 5,
  range: { start: 100, end: 500 }  // Only cut between 100-500
}
```

--------------------------------

### Include SeqViz via CDN

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Include SeqViz in your HTML file using a CDN link.

```html
<script src="https://unpkg.com/seqviz"></script>
```

--------------------------------

### Configure Viewer Layout

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Choose the viewer layout: 'linear', 'circular', 'both' (default), or 'both_flip'.

```typescript
viewer="circular"
```

--------------------------------

### Get Sequence Alphabet Mapping

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/utility-functions.md

Retrieves the character-to-matches mapping for a given sequence type. Used to understand ambiguity codes in sequence data.

```typescript
export const getAlphabet = (seqType: SeqType): AlphabetMap
```

```typescript
getAlphabet("dna")
// { n: { a, c, g, t }, r: { a, g }, ... }

getAlphabet("aa")
// { b: { d, n }, j: { i, l }, x: { all AAs }, z: { e, q } }
```

--------------------------------

### Custom Layout with Refs

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/seqviz-api-reference.md

Demonstrates how to use refs with SeqViz to create a custom layout of Circular and Linear components. Requires 'react' and 'seqviz' imports.

```typescript
import { useRef } from "react";
import { SeqViz, Circular, Linear } from "seqviz";

export default function CustomLayout() {
  const circularRef = useRef();
  const linearRef = useRef();

  return (
    <SeqViz
      seq="ATGC..."
      refs={{ circular: circularRef, linear: linearRef }}
    >
      {({ circularProps, linearProps, ...props }) => (
        <div style={{ display: "flex" }}>
          <div ref={circularRef} style={{ flex: 1 }}>
            <Circular {...circularProps} {...props} />
          </div>
          <div ref={linearRef} style={{ flex: 1 }}>
            <Linear {...linearProps} {...props} />
          </div>
        </div>
      )}
    </SeqViz>
  );
}
```

--------------------------------

### Key Utility Functions

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/INDEX.md

Documentation for essential utility functions exported by the SeqViz library.

```APIDOC
## Utility Functions

### Sequence Functions
- `guessType()`, `directionality()`, `complement()`: For sequence type detection and conversion. See [Sequence Functions](utility-functions.md#sequence-type-detection-and-conversion).

### Search Functions
- `search()`: For sequence searching. See [Search Functions](utility-functions.md#sequence-search).

### Enzyme Functions
- `digest()`, `translate()`: For enzyme digestion and translation. See [Enzyme Functions](utility-functions.md#enzyme-digestion).

### Layout Functions
- `stackElements()`, `colorByIndex()`: For element layout and coloring. See [Layout Functions](utility-functions.md#element-layout).

### Color Functions
- Utilities for color manipulation. See [Color Functions](utility-functions.md#color-utilities).
```

--------------------------------

### Search Result Type

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Defines the structure of search results, which conform to `NameRange[]`. Each result includes start and end positions, direction, and a unique ID.

```APIDOC
## Search Result Type

Search results conform to `NameRange[]`:

```json
[
  {
    "start": 100,
    "end": 110,
    "direction": 1,
    "id": "100-fwd",
    "name": "",
    "color": undefined
  },
  {
    "start": 250,
    "end": 260,
    "direction": -1,
    "id": "250-rev",
    "name": "",
    "color": undefined
  }
]
```

Each result includes:
- `start`, `end` — Match location
- `direction` — Forward (1) or reverse (-1)
- `id` — Unique identifier
```

--------------------------------

### Handle Search Results in Seqviz

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

A callback function executed after a search event, returning an array of found ranges with start, end, direction, and index.

```javascript
[
  {
    start: 728,
    end: 733,
    direction: 1,
    index: 0,
  },
  {
    start: 1788,
    end: 1793,
    direction: -1,
    index: 1,
  },
];
```

--------------------------------

### Set External Selection State in Seqviz

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

An optional prop to externally manage and set the selection state, including start, end, and clockwise direction.

```javascript
selection = {
  start: 133,
  end: 457,
  clockwise: true,
};
```

--------------------------------

### Usage of inputRef in Components

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Example of how to use the `inputRef` callback within a component to attach a ref to an SVG path element. This registers the element with the selection system.

```jsx
<path
  ref={inputRef("ann-1", {
    type: "ANNOTATION",
    start: 0,
    end: 100,
    name: "promoter"
  })}
/>
```

--------------------------------

### Basic Linear Viewer Usage

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Demonstrates the basic usage of the Linear component with essential props for displaying a DNA sequence and a single annotation.

```typescript
import { Linear } from "seqviz";

<Linear
  seq="ATGCTAGC..."
  compSeq="TACGATCG..."
  seqType="dna"
  annotations={[
    { start: 0, end: 100, name: "gene1" }
  ]}
  primers={[]}
  cutSites={[]}
  highlights={[]}
  search={[]}
  translations={[]}
  bpsPerBlock={50}
  charWidth={7.2}
  lineHeight={14}
  elementHeight={20}
  seqFontSize={12}
  showComplement={true}
  showIndex={true}
  size={{ height: 600, width: 800 }}
  zoom={{ linear: 50 }}
  handleMouseEvent={handleMouseEvent}
  inputRef={inputRef}
  onUnmount={handleUnmount}
/>
```

--------------------------------

### Fetch and Render Sequence with React and Seqparse

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Demonstrates fetching and parsing a sequence from NCBI using the `seqparse` package within a React component, then rendering it with SeqViz.

```jsx
import seqparse from "seqparse";

export default () => {
  const [seq, setSeq] = useState({ name: "", seq: "", annotations: [] });

  // fetch and parse a sequence from NCBI: https://www.ncbi.nlm.nih.gov/nuccore/MN623123.1
  useEffect(async () => setSeq(await seqparse("MN623123.1")));

  return <SeqViz name={seq.name} seq={seq.seq} annotations={seq.annotations} />;
};
```

--------------------------------

### Get Border Color by Index

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/utility-functions.md

Retrieves a darker border color that corresponds to a palette color for visual contrast. Uses the default SeqViz color palette.

```typescript
export const borderColorByIndex = (i: number): string
```

```typescript
borderColorByIndex(0)           // "#5EB5B8" (darker cyan)
borderColorByIndex(5)           // "#BD872B" (darker orange)
```

--------------------------------

### Primer Configuration

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Define primers to be displayed above or below the linear sequence. Currently only rendered in the linear viewer.

```typescript
primers?: PrimerProp[]
```

```typescript
primers=[
  {
    name: "Fwd Primer",
    start: 100,
    end: 125,
    direction: 1,
    color: "#0000FF"
  },
  {
    name: "Rev Primer",
    start: 500,
    end: 525,
    direction: -1
  }
]
```

--------------------------------

### Selection

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Provides metadata about an element selection within the viewer. This includes properties like start and end positions, color, direction, and type, and is passed to the `onSelection` callback.

```APIDOC
## Selection

### Description
Metadata about an element selection. Passed to `onSelection` callback.

### Type Definition
```typescript
interface Selection {
  clockwise?: boolean;
  color?: string;
  direction?: number;
  end?: number;
  id?: string;
  length?: number;
  name?: string;
  parent?: Selection;
  ref?: null | string;
  start?: number;
  type: SelectionTypeEnum;
  viewer?: "LINEAR" | "CIRCULAR";
}

type SelectionTypeEnum = "ANNOTATION" | "FIND" | "TRANSLATION" | "TRANSLATION_HANDLE" | "ENZYME" | "SEQ" | "AMINOACID" | "HIGHLIGHT" | "PRIMER" | "";
```

### Example
```json
{
  "type": "ANNOTATION",
  "name": "lacZ fragment",
  "start": 133,
  "end": 457,
  "length": 324,
  "viewer": "LINEAR"
}
```
```

--------------------------------

### Minimal Linear Viewer Configuration

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Provides a basic configuration for the Linear component, setting essential properties like sequence data, dimensions, and display options.

```typescript
<Linear
  seq="ATGC..."
  compSeq="TACG..."
  seqType="dna"
  annotations={[]}
  primers={[]}
  cutSites={[]}
  highlights={[]}
  search={[]}
  translations={[]}
  bpsPerBlock={50}
  charWidth={7.2}
  lineHeight={14}
  elementHeight={20}
  seqFontSize={12}
  showComplement={true}
  showIndex={true}
  size={{ height: 600, width: 800 }}
  zoom={{ linear: 50 }}
  bpColors={{}}
  handleMouseEvent={()=>{}}
  inputRef={()=>{}}
  onUnmount={()=>{}}
/>
```

--------------------------------

### Define User-Provided Highlight Type

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Specifies a region to be highlighted, including start and end indices. An optional custom color can be provided; otherwise, default colors are used.

```typescript
interface HighlightProp {
  color?: string;
  end: number;
  start: number;
}
```

--------------------------------

### Define User-Provided Primer Type

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Specifies a PCR primer with its name, start and end positions, and direction (forward or reverse). An optional color and ID can also be provided.

```typescript
interface PrimerProp {
  color?: string;
  direction: 1 | -1;
  end: number;
  id?: string;
  name: string;
  start: number;
}
```

--------------------------------

### Using Preset Enzymes by Name

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/enzymes-reference.md

Shows how to pass enzyme names as strings in the 'enzymes' array prop of the SeqViz component for common restriction enzymes.

```typescript
<SeqViz
  seq="..."
  enzymes={[
    "EcoRI",
    "BamHI",
    "NotI",
    "PstI"
  ]}
/>
```

--------------------------------

### Configure SeqViz Viewers

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/README.md

Configure the viewer type, zoom level, and scroll behavior for SeqViz.

```typescript
<SeqViz
  seq="..."
  viewer="both"
  zoom={{ linear: 50 }}
  rotateOnScroll={true}
/>
```

--------------------------------

### ExternalSelection

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Represents an externally-managed selection state, typically used when the parent component is responsible for managing the selection state. It includes start and end points, and optional clockwise direction.

```APIDOC
## ExternalSelection

### Description
Externally-managed selection state passed via the `selection` prop. Used when the parent component manages selection state.

### Type Definition
```typescript
interface ExternalSelection {
  clockwise?: boolean;
  end: number;
  start: number;
}
```
```

--------------------------------

### Virtualization with InfiniteScroll

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Wraps the generated SeqBlock components within an InfiniteScroll component to enable virtualization. This ensures that only the blocks currently visible in the viewport are rendered, optimizing performance for large sequences.

```typescript
<InfiniteScroll
  blockHeights={blockHeights}
  seqBlocks={seqBlocks}
  totalHeight={blockHeights.reduce((a, h) => a + h, 0)}
/>
```

--------------------------------

### SeqViz Viewer (Vanilla JS)

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/seqviz-api-reference.md

A factory function that provides a SeqViz viewer instance for use in non-React applications, allowing mounting, state updates, and HTML string rendering.

```APIDOC
## Viewer Constructor

### Description
Creates a SeqViz viewer instance that can be used in vanilla JavaScript applications. It mounts the viewer to a specified DOM element and provides methods to control its state and render its content.

### Import
```typescript
import { Viewer } from "seqviz"
```

### Signature
`Viewer(element: string | HTMLElement = "root", options: SeqVizProps): { render: () => React.ReactElement; setState: (state: SeqVizProps) => React.ReactElement; renderToString: () => string; }`

### Parameters
- **element** (string | HTMLElement) - The DOM element ID or HTMLElement where the viewer will be mounted. Defaults to "root".
- **options** (SeqVizProps) - An object containing the properties for the SeqViz viewer, similar to the React component props.

### Returned Object Methods
- **render** - Mounts the viewer to the specified DOM element.
- **setState** - Updates the viewer's props and re-renders the component.
- **renderToString** - Returns an HTML string representation of the viewer (useful for SSR).
```

--------------------------------

### Search Event Callback

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/configuration-reference.md

Callback function invoked when search parameters change, the sequence changes, or the component initially renders. Returns an array of matches with start, end, and direction.

```typescript
onSearch?: (results: Range[]) => void
```

```typescript
onSearch={(results) => {
  console.log(`Found ${results.length} matches`);
  results.forEach(r => {
    console.log(`${r.start}-${r.end} (${r.direction > 0 ? 'fwd' : 'rev'})`);
  });
}}
```

--------------------------------

### Linear Viewer with All Elements

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/linear-viewer.md

Shows a comprehensive configuration of the Linear component, including various element types (annotations, primers, cut sites, etc.) and custom base pair colors.

```typescript
<Linear
  seq="..."
  compSeq="..."
  seqType="dna"
  annotations={annotations}
  primers={primers}
  cutSites={cutSites}
  highlights={highlights}
  search={searchResults}
  translations={translations}
  bpColors={{ A: "#FF0000", T: "#0000FF" }}
  bpsPerBlock={50}
  charWidth={7.2}
  lineHeight={14}
  elementHeight={20}
  seqFontSize={12}
  showComplement={true}
  showIndex={true}
  size={{ height: 600, width: 800 }}
  zoom={{ linear: 50 }}
  handleMouseEvent={handleMouseEvent}
  inputRef={inputRef}
  onUnmount={handleUnmount}
/>
```

--------------------------------

### SeqViz Custom Copy Event

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/selection-and-events.md

Implement a custom copyEvent callback to control when the selected sequence is copied to the clipboard. This example restricts copying to Ctrl+C on Windows/Linux, excluding Cmd+C on Mac.

```typescript
import React from 'react';
import SeqViz from 'seqviz';

const MyComponent = () => {
  return (
    <SeqViz
      seq="..."
      copyEvent={(e) => {
        // Only copy on Ctrl+C, not Cmd+C on Mac
        return e.key === "c" && e.ctrlKey && !e.metaKey;
      }}
    />
  );
};

export default MyComponent;
```

--------------------------------

### SeqViz Viewer in Non-React Applications

Source: https://github.com/lattice-automation/seqviz/blob/develop/README.md

Integrate SeqViz into non-React environments using the `seqviz.Viewer` constructor. Pass an element ID or HTMLElement and configuration props. Use `render()`, `setState()`, and `renderToString()` for DOM manipulation and server-side rendering.

```js
const element = document.getElementById("root");
const viewer = seqviz.Viewer(element, props);
// Render the viewer to the DOM at the node passed in $element`.
viewer.render();
// To later update the viewer's configuration and re-renders.
viewer.setState(props);
// To render the viewer, eg for server-side rendering, and returns it as an HTML string.
viewer.renderToString();
```

--------------------------------

### Define User-Provided Annotation Type

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/types-reference.md

Represents an annotation region as provided by the user, before internal processing. It includes start, end, name, and optional color and direction. Direction can be specified as a number or a string.

```typescript
interface AnnotationProp {
  color?: string;
  direction?: number | string;
  end: number;
  name: string;
  start: number;
}
```

--------------------------------

### SeqViz Component API

Source: https://github.com/lattice-automation/seqviz/blob/develop/_autodocs/INDEX.md

Documentation for the main SeqViz React component, including its props and usage.

```APIDOC
## React Component: SeqViz

### Description
The main SeqViz React component for embedding sequence visualizations in web applications.

### Import
`import { SeqViz } from "seqviz"

### Props
Refer to `SeqVizProps` for complete configuration interface. See [All Props](configuration-reference.md#seqvizprops-constructor-options) for details.
```