Skip to content

Circular Viewer

Render circular sequences and annotated features, including regions that cross the origin. This page 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.

Compact example

ATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCA;50 bp
"use client";

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

export function CircularExample() {
  const [selection, setSelection] = useState<AriadneSelection | null>(null);
  return (
    <CircularViewer
      sequence={"ATGCA".repeat(10)}
      selection={selection}
      setSelection={setSelection}
      svgSizePX={320}
    />
  );
}

Origin-spanning regions

A selection or annotation with start > end crosses the origin. Coordinates are zero-based, and selection highlighting includes both endpoints. This example selects from index 240 through the origin to index 30 in a 300-base sequence.

075150225;Origin-spanning featureAnnotation300 bp

The selected region crosses the origin. Both viewers use the same complete sequence.

Pos: 0
| 0
A
| 1
T
| 2
G
| 3
C
| 4
A
| 5
A
| 6
T
| 7
G
| 8
C
| 9
A
| 10
A
| 11
T
| 12
G
| 13
C
| 14
A
| 15
A
| 16
T
| 17
G
| 18
C
| 19
A
| 20
A
| 21
T
| 22
G
| 23
C
| 24
A
| 25
A
| 26
T
| 27
G
| 28
C
| 29
A
| 30
A
| 31
T
| 32
G
| 33
C
| 34
A
| 35
A
| 36
T
| 37
G
| 38
C
| 39
A
| 40
A
| 41
T
| 42
G
| 43
C
| 44
A
| 45
A
| 46
T
| 47
G
| 48
C
| 49
A
| 50
A
| 51
T
| 52
G
| 53
C
| 54
A
| 55
A
| 56
T
| 57
G
| 58
C
| 59
A
| 60
A
| 61
T
| 62
G
| 63
C
| 64
A
| 65
A
| 66
T
| 67
G
| 68
C
| 69
A
| 70
A
| 71
T
| 72
G
| 73
C
| 74
A
| 75
A
| 76
T
| 77
G
| 78
C
| 79
A
| 80
A
| 81
T
| 82
G
| 83
C
| 84
A
| 85
A
| 86
T
| 87
G
| 88
C
| 89
A
| 90
A
| 91
T
| 92
G
| 93
C
| 94
A
| 95
A
| 96
T
| 97
G
| 98
C
| 99
A
| 100
A
| 101
T
| 102
G
| 103
C
| 104
A
| 105
A
| 106
T
| 107
G
| 108
C
| 109
A
| 110
A
| 111
T
| 112
G
| 113
C
| 114
A
| 115
A
| 116
T
| 117
G
| 118
C
| 119
A
| 120
A
| 121
T
| 122
G
| 123
C
| 124
A
| 125
A
| 126
T
| 127
G
| 128
C
| 129
A
| 130
A
| 131
T
| 132
G
| 133
C
| 134
A
| 135
A
| 136
T
| 137
G
| 138
C
| 139
A
| 140
A
| 141
T
| 142
G
| 143
C
| 144
A
| 145
A
| 146
T
| 147
G
| 148
C
| 149
A
| 150
A
| 151
T
| 152
G
| 153
C
| 154
A
| 155
A
| 156
T
| 157
G
| 158
C
| 159
A
| 160
A
| 161
T
| 162
G
| 163
C
| 164
A
| 165
A
| 166
T
| 167
G
| 168
C
| 169
A
| 170
A
| 171
T
| 172
G
| 173
C
| 174
A
| 175
A
| 176
T
| 177
G
| 178
C
| 179
A
| 180
A
| 181
T
| 182
G
| 183
C
| 184
A
| 185
A
| 186
T
| 187
G
| 188
C
| 189
A
| 190
A
| 191
T
| 192
G
| 193
C
| 194
A
| 195
A
| 196
T
| 197
G
| 198
C
| 199
A
| 200
A
| 201
T
| 202
G
| 203
C
| 204
A
| 205
A
| 206
T
| 207
G
| 208
C
| 209
A
| 210
A
| 211
T
| 212
G
| 213
C
| 214
A
| 215
A
| 216
T
| 217
G
| 218
C
| 219
A
| 220
A
| 221
T
| 222
G
| 223
C
| 224
A
| 225
A
| 226
T
| 227
G
| 228
C
| 229
A
| 230
A
| 231
T
| 232
G
| 233
C
| 234
A
| 235
A
| 236
T
| 237
G
| 238
C
| 239
A
| 240
A
| 241
T
| 242
G
| 243
C
| 244
A
| 245
A
| 246
T
| 247
G
| 248
C
| 249
A
| 250
A
| 251
T
| 252
G
| 253
C
| 254
A
| 255
A
| 256
T
| 257
G
| 258
C
| 259
A
| 260
A
| 261
T
| 262
G
| 263
C
| 264
A
| 265
A
| 266
T
| 267
G
| 268
C
| 269
A
| 270
A
| 271
T
| 272
G
| 273
C
| 274
A
| 275
A
| 276
T
| 277
G
| 278
C
| 279
A
| 280
A
| 281
T
| 282
G
| 283
C
| 284
A
| 285
A
| 286
T
| 287
G
| 288
C
| 289
A
| 290
A
| 291
T
| 292
G
| 293
C
| 294
A
| 295
A
| 296
T
| 297
G
| 298
C
| 299
A

Pass the same sequence into a residue-level viewer as sequences={[sequence]} and share selection state. Keep the complete sequence in both components so circular ranges retain their coordinates.

Annotations

import type { Annotation } from "@nitro-bio/sequence-viewers";

const annotations: Annotation[] = [
  {
    text: "Origin-spanning feature",
    type: "CDS",
    direction: "forward",
    start: 240,
    end: 30,
    className: "circular-feature",
  },
];

Pass annotations={annotations} and define the class in your application:

.circular-feature {
  fill: #047857;
  color: #047857;
}

Use the shared theme tokens through containerClassName to match your application.

API reference

PropPurpose
sequence: stringA complete circular sequence.
selection: AriadneSelection or nullControlled selected region.
setSelectionReceives a selected range.
annotations?Optional annotated regions, including origin-spanning features.
containerClassName?Viewer class for layout and theme tokens.
svgSizePX?, svgPadding?Set the diagram size and padding.
validationMode?"recover" (default) or "strict".

Use recovery mode to display local diagnostics for malformed input, or strict mode with an error boundary. See the version 2 migration notes for the deprecated noValidate mapping and updated stylesheet setup.

Was this page helpful?