Skip to content

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 · Read as Markdown

Installation

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.

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.

Coding region
Coding regionCDS

The overview and residue viewer share the same selection and sequence coordinates.

Pos: 0
| 0
A
| 0
A
| 1
T
| 1
T
| 2
G
| 2
G
| 3
C
| 3
C
| 4
A
| 4
A
| 5
T
| 5
T
| 6
G
| 6
G
| 7
C
| 7
C
| 8
A
| 8
A
| 9
T
| 9
T
| 10
G
| 10
G
| 11
C
| 11
C
| 12
A
| 12
A
| 13
T
| 13
T
| 14
G
| 14
G
| 15
C
| 15
C
| 16
A
| 16
A
| 17
T
| 17
T
| 18
G
| 18
G
| 19
C
| 19
C
| 20
A
| 20
A
| 21
T
| 21
T
| 22
G
| 22
G
| 23
C
| 23
C
| 24
A
| 24
A
| 25
T
| 25
T
| 26
G
| 26
G
| 27
C
| 27
C
| 28
A
| 28
A
| 29
T
| 29
T
| 30
G
| 30
G
| 31
C
| 31
C
| 32
A
| 32
A
| 33
T
| 33
T
| 34
G
| 34
G
| 35
C
| 35
C
| 36
A
| 36
A
| 37
T
| 37
T
| 38
G
| 38
G
| 39
C
| 39
C
| 40
A
| 40
A
| 41
T
| 41
T
| 42
G
| 42
G
| 43
C
| 43
C
| 44
A
| 44
A
| 45
T
| 45
T
| 46
G
| 46
G
| 47
C
| 47
C
| 48
A
| 48
T
| 49
T
| 49
T
| 50
G
| 50
A
| 51
C
| 51
A
| 52
A
| 52
A
| 53
T
| 53
T
| 54
G
| 54
G
| 55
C
| 55
C
| 56
A
| 56
A
| 57
T
| 57
T
| 58
G
| 58
G
| 59
C
| 59
C
| 60
A
| 60
A
| 61
T
| 61
T
| 62
G
| 62
G
| 63
C
| 63
C
| 64
A
| 64
A
| 65
T
| 65
T
| 66
G
| 66
G
| 67
C
| 67
C
| 68
A
| 68
A
| 69
T
| 69
T
| 70
G
| 70
G
| 71
C
| 71
C
| 72
A
| 72
A
| 73
T
| 73
T
| 74
G
| 74
G
| 75
C
| 75
C
| 76
A
| 76
A
| 77
T
| 77
T
| 78
G
| 78
G
| 79
C
| 79
C
| 80
A
| 80
A
| 81
T
| 81
T
| 82
G
| 82
G
| 83
C
| 83
C
| 84
A
| 84
A
| 85
T
| 85
T
| 86
G
| 86
G
| 87
C
| 87
C
| 88
A
| 88
A
| 89
T
| 89
T
| 90
G
| 90
G
| 91
C
| 91
C
| 92
A
| 92
A
| 93
T
| 93
T
| 94
G
| 94
G
| 95
C
| 95
C
| 96
A
| 96
A
| 97
T
| 97
T
| 98
G
| 98
G
| 99
C
| 99
C
| 100
A
| 100
A
| 101
T
| 101
T
| 102
G
| 102
G
| 103
C
| 103
C
| 104
A
| 104
A
| 105
T
| 105
T
| 106
G
| 106
G
| 107
C
| 107
C
| 108
A
| 108
A
| 109
T
| 109
T
| 110
G
| 110
G
| 111
C
| 111
C
| 112
A
| 112
A
| 113
T
| 113
T
| 114
G
| 114
G
| 115
C
| 115
C
| 116
A
| 116
A
| 117
T
| 117
T
| 118
G
| 118
G
| 119
C
| 119
C

Code

"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

PropPurpose
sequences: string[]Complete sequence rows in a shared coordinate system.
selection, setSelectionControlled 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 for styling and validation changes.

Was this page helpful?