Source: https://docs.nitro.bio/LinearViewer

# Linear Viewer

Display sequence rows as a compact overview with annotations and controlled selection. This example uses `@nitro-bio/sequence-viewers` **2.2.0**.

[View source](https://github.com/nitro-bio/sequence-viewers/blob/v2.2.0/src/components/Ariadne/LinearViewer/LinearViewer.tsx) · [Read as Markdown](https://docs.nitro.bio/LinearViewer.md)

## Installation

```sh
pnpm add @nitro-bio/sequence-viewers@^2.2.0
```

Import `@nitro-bio/sequence-viewers/styles.css` once in your application entry point. React 18.2+ and React 19 are supported; Tailwind is optional. See the [shared styling guide](https://docs.nitro.bio/SequenceViewer#styling).

## Linked example

Select a region in either viewer. The overview and residue-level view share the same complete sequences, annotations, and selection; slicing the sequence separately would change the coordinate system.

## Code

```tsx
"use client";

import { useState } from "react";
import {
  LinearViewer,
  SequenceViewer,
  type AriadneSelection,
} from "@nitro-bio/sequence-viewers";

const sequences = [
  "ATGC".repeat(30),
  "ATGC".repeat(12) + "TTAA" + "ATGC".repeat(17),
];

export function LinkedViewers() {
  const [selection, setSelection] = useState<AriadneSelection | null>(null);
  const shared = { sequences, selection, setSelection };
  return (
    <>
      <LinearViewer {...shared} />
      <SequenceViewer
        {...shared}
        charClassName={() => ""}
        highlightMisalignments
      />
    </>
  );
}
```

## Annotations and selection

Pass an optional `Annotation[]` through `annotations`. Use the same array in both viewers when you want annotations and selections to stay in sync. Ranges use zero-based coordinates, and selection highlighting includes both endpoints.

The `sequenceClassName` callback receives an object: `({ sequenceIdx }) => "my-sequence"`. Use `selectionClassName(selection)` and `mismatchClassName(base)` for custom selection and mismatch styles. Define returned classes in your application stylesheet.

## API reference

| Prop                                        | Purpose                                               |
| ------------------------------------------- | ----------------------------------------------------- |
| `sequences: string[]`                       | Complete sequence rows in a shared coordinate system. |
| `selection`, `setSelection`                 | Controlled `AriadneSelection` or `null`.              |
| `annotations?`                              | Optional annotated regions.                           |
| `containerClassName?`, `sequenceClassName?` | Viewer and row styling.                               |
| `selectionClassName?`, `mismatchClassName?` | Callbacks returning selection and mismatch classes.   |
| `stackingFn?`                               | Custom annotation stacking function.                  |
| `onDoubleClick?`                            | Handle a double-click on the viewer.                  |
| `validationMode?`                           | `"recover"` (default) or `"strict"`.                  |

Malformed annotations produce a local diagnostic in recovery mode. Prefer `validationMode` over the deprecated `noValidate` prop. Read the [version 2 migration notes](https://docs.nitro.bio/SequenceViewer#upgrading-from-version-1) for styling and validation changes.