Sequence Viewer

Example

Pos: 0
| 0
A
| 0
.
| 0
.
| 1
T
| 1
.
| 1
.
| 2
G
| 2
.
| 2
.
| 3
C
| 3
.
| 3
.
| 4
A
| 4
.
| 4
.
| 5
T
| 5
.
| 5
.
| 6
G
| 6
.
| 6
.
| 7
C
| 7
.
| 7
.
| 8
A
| 8
.
| 8
.
| 9
T
| 9
.
| 9
.
| 10
G
| 10
.
| 10
.
| 11
C
| 11
.
| 11
.
| 12
A
| 12
.
| 12
.
| 13
T
| 13
.
| 13
.
| 14
G
| 14
.
| 14
.
| 15
C
| 15
.
| 15
.
| 16
A
| 16
.
| 16
.
| 17
T
| 17
.
| 17
.
| 18
G
| 18
.
| 18
.
| 19
C
| 19
.
| 19
.
| 20
A
| 20
.
| 20
.
| 21
T
| 21
.
| 21
.
| 22
G
| 22
.
| 22
.
| 23
C
| 23
.
| 23
.
| 24
A
| 24
.
| 24
.
| 25
T
| 25
.
| 25
.
| 26
G
| 26
.
| 26
.
| 27
C
| 27
.
| 27
.
| 28
A
| 28
.
| 28
.
| 29
T
| 29
.
| 29
.
| 30
G
| 30
A
| 30
.
| 31
C
| 31
T
| 31
.
| 32
A
| 32
G
| 32
.
| 33
T
| 33
A
| 33
.
| 34
G
| 34
C
| 34
.
| 35
C
| 35
C
| 35
.
| 36
A
| 36
C
| 36
.
| 37
T
| 37
C
| 37
.
| 38
G
| 38
A
| 38
.
| 39
C
| 39
T
| 39
.
| 40
A
| 40
G
| 40
.
| 41
T
| 41
A
| 41
.
| 42
G
| 42
C
| 42
.
| 43
C
| 43
C
| 43
.
| 44
A
| 44
C
| 44
.
| 45
T
| 45
C
| 45
.
| 46
G
| 46
A
| 46
.
| 47
C
| 47
T
| 47
.
| 48
A
| 48
G
| 48
.
| 49
T
| 49
A
| 49
.
| 50
G
| 50
C
| 50
.
| 51
C
| 51
C
| 51
.
| 52
A
| 52
C
| 52
.
| 53
T
| 53
C
| 53
.
| 54
G
| 54
A
| 54
.
| 55
C
| 55
T
| 55
.
| 56
A
| 56
G
| 56
.
| 57
T
| 57
A
| 57
.
| 58
G
| 58
C
| 58
.
| 59
C
| 59
C
| 59
.
| 60
A
| 60
C
| 60
.
| 61
T
| 61
C
| 61
.
| 62
G
| 62
A
| 62
.
| 63
C
| 63
T
| 63
.
| 64
A
| 64
G
| 64
.
| 65
T
| 65
A
| 65
.
| 66
G
| 66
C
| 66
.
| 67
C
| 67
C
| 67
.
| 68
A
| 68
C
| 68
.
| 69
T
| 69
C
| 69
.
| 70
G
| 70
A
| 70
.
| 71
C
| 71
T
| 71
.
| 72
A
| 72
G
| 72
.
| 73
T
| 73
A
| 73
.
| 74
G
| 74
C
| 74
.
| 75
C
| 75
C
| 75
.
| 76
A
| 76
C
| 76
.
| 77
T
| 77
C
| 77
.
| 78
G
| 78
A
| 78
.
| 79
C
| 79
T
| 79
.
| 80
A
| 80
G
| 80
T
| 81
T
| 81
A
| 81
G
| 82
G
| 82
C
| 82
T
| 83
C
| 83
C
| 83
G
| 84
A
| 84
C
| 84
T
| 85
T
| 85
C
| 85
G
| 86
G
| 86
A
| 86
T
| 87
C
| 87
T
| 87
G
| 88
A
| 88
G
| 88
T
| 89
T
| 89
A
| 89
G
| 90
G
| 90
C
| 90
T
| 91
C
| 91
C
| 91
G
| 92
A
| 92
C
| 92
T
| 93
T
| 93
C
| 93
G
| 94
G
| 94
A
| 94
T
| 95
C
| 95
T
| 95
G
| 96
A
| 96
G
| 96
T
| 97
T
| 97
A
| 97
G
| 98
G
| 98
C
| 98
T
| 99
C
| 99
C
| 99
G
| 100
A
| 100
C
| 100
T
| 101
T
| 101
C
| 101
G
| 102
G
| 102
A
| 102
T
| 103
C
| 103
T
| 103
G
| 104
A
| 104
G
| 104
T
| 105
T
| 105
A
| 105
G
| 106
G
| 106
C
| 106
T
| 107
C
| 107
C
| 107
G
| 108
A
| 108
C
| 108
T
| 109
T
| 109
C
| 109
G
| 110
G
| 110
A
| 110
T
| 111
C
| 111
T
| 111
G
| 112
A
| 112
G
| 112
T
| 113
T
| 113
A
| 113
G
| 114
G
| 114
C
| 114
T
| 115
C
| 115
C
| 115
G
| 116
A
| 116
C
| 116
T
| 117
T
| 117
C
| 117
G
| 118
G
| 118
A
| 118
T
| 119
C
| 119
T
| 119
G
| 120
A
| 120
G
| 120
T
| 121
T
| 121
A
| 121
G
| 122
G
| 122
C
| 122
T
| 123
C
| 123
C
| 123
G
| 124
A
| 124
C
| 124
T
| 125
T
| 125
C
| 125
G
| 126
G
| 126
A
| 126
T
| 127
C
| 127
T
| 127
G
| 128
A
| 128
G
| 128
T
| 129
T
| 129
A
| 129
G
| 130
G
| 130
C
| 130
T
| 131
C
| 131
C
| 131
G
| 132
A
| 132
C
| 132
T
| 133
T
| 133
C
| 133
G
| 134
G
| 134
A
| 134
T
| 135
C
| 135
T
| 135
G
| 136
A
| 136
G
| 136
T
| 137
T
| 137
A
| 137
G
| 138
G
| 138
C
| 138
T
| 139
C
| 139
C
| 139
G
| 140
A
| 140
C
| 140
T
| 141
T
| 141
C
| 141
G
| 142
G
| 142
A
| 142
T
| 143
C
| 143
T
| 143
G
| 144
A
| 144
G
| 144
T
| 145
T
| 145
A
| 145
G
| 146
G
| 146
C
| 146
T
| 147
C
| 147
C
| 147
G
| 148
A
| 148
C
| 148
T
| 149
T
| 149
C
| 149
G
| 150
G
| 150
A
| 150
T
| 151
C
| 151
T
| 151
G
| 152
A
| 152
G
| 152
T
| 153
T
| 153
A
| 153
G
| 154
G
| 154
C
| 154
T
| 155
C
| 155
C
| 155
G
| 156
A
| 156
C
| 156
T
| 157
T
| 157
C
| 157
G
| 158
G
| 158
A
| 158
T
| 159
C
| 159
T
| 159
G
| 160
A
| 160
G
| 160
T
| 161
T
| 161
A
| 161
G
| 162
G
| 162
C
| 162
T
| 163
C
| 163
C
| 163
G
| 164
A
| 164
C
| 164
T
| 165
T
| 165
C
| 165
G
| 166
G
| 166
A
| 166
T
| 167
C
| 167
T
| 167
G
| 168
A
| 168
G
| 168
T
| 169
T
| 169
A
| 169
G
| 170
G
| 170
C
| 170
T
| 171
C
| 171
C
| 171
G
| 172
A
| 172
C
| 172
T
| 173
T
| 173
C
| 173
G
| 174
G
| 174
A
| 174
T
| 175
C
| 175
T
| 175
G
| 176
A
| 176
G
| 176
T
| 177
T
| 177
A
| 177
G
| 178
G
| 178
C
| 178
T
| 179
C
| 179
C
| 179
G
| 180
A
| 180
C
| 180
T
| 181
T
| 181
C
| 181
G
| 182
G
| 182
A
| 182
T
| 183
C
| 183
T
| 183
G
| 184
A
| 184
G
| 184
T
| 185
T
| 185
A
| 185
G
| 186
G
| 186
C
| 186
T
| 187
C
| 187
C
| 187
G
| 188
A
| 188
C
| 188
T
| 189
T
| 189
C
| 189
G
| 190
G
| 190
.
| 190
T
| 191
C
| 191
.
| 191
G
| 192
A
| 192
.
| 192
T
| 193
T
| 193
.
| 193
G
| 194
G
| 194
.
| 194
T
| 195
C
| 195
.
| 195
G
| 196
A
| 196
.
| 196
T
| 197
T
| 197
.
| 197
G
| 198
G
| 198
.
| 198
T
| 199
C
| 199
.
| 199
G
| 200
A
| 200
.
| 200
T
| 201
T
| 201
.
| 201
G
| 202
G
| 202
.
| 202
T
| 203
C
| 203
.
| 203
G
| 204
A
| 204
.
| 204
T
| 205
T
| 205
.
| 205
G
| 206
G
| 206
.
| 206
T
| 207
C
| 207
.
| 207
G
| 208
A
| 208
.
| 208
T
| 209
T
| 209
.
| 209
G
| 210
G
| 210
.
| 210
T
| 211
C
| 211
.
| 211
G
| 212
A
| 212
.
| 212
T
| 213
T
| 213
.
| 213
G
| 214
G
| 214
.
| 214
T
| 215
C
| 215
.
| 215
G
| 216
A
| 216
.
| 216
T
| 217
T
| 217
.
| 217
G
| 218
G
| 218
.
| 218
T
| 219
C
| 219
.
| 219
G
| 220
A
| 220
.
| 220
.
| 221
T
| 221
.
| 221
.
| 222
G
| 222
.
| 222
.
| 223
C
| 223
.
| 223
.
| 224
A
| 224
.
| 224
.
| 225
T
| 225
.
| 225
.
| 226
G
| 226
.
| 226
.
| 227
C
| 227
.
| 227
.
| 228
A
| 228
.
| 228
.
| 229
T
| 229
.
| 229
.
| 230
G
| 230
.
| 230
.
| 231
C
| 231
.
| 231
.
| 232
A
| 232
.
| 232
.
| 233
T
| 233
.
| 233
.
| 234
G
| 234
.
| 234
.
| 235
C
| 235
.
| 235
.
| 236
A
| 236
.
| 236
.
| 237
T
| 237
.
| 237
.
| 238
G
| 238
.
| 238
.
| 239
C
| 239
.
| 239
.
| 240
A
| 240
.
| 240
.
| 241
T
| 241
.
| 241
.
| 242
G
| 242
.
| 242
.
| 243
C
| 243
.
| 243
.
| 244
A
| 244
.
| 244
.
| 245
T
| 245
.
| 245
.
| 246
G
| 246
.
| 246
.
| 247
C
| 247
.
| 247
.
| 248
A
| 248
.
| 248
.
| 249
T
| 249
.
| 249
.
| 250
G
| 250
.
| 250
.
| 251
C
| 251
.
| 251
.
| 252
A
| 252
.
| 252
.
| 253
T
| 253
.
| 253
.
| 254
G
| 254
.
| 254
.
| 255
C
| 255
.
| 255
.
| 256
A
| 256
.
| 256
.
| 257
T
| 257
.
| 257
.
| 258
G
| 258
.
| 258
.
| 259
C
| 259
.
| 259
.
| 260
A
| 260
.
| 260
.
| 261
T
| 261
.
| 261
.
| 262
G
| 262
.
| 262
.
| 263
C
| 263
.
| 263
.
| 264
A
| 264
.
| 264
.
| 265
T
| 265
.
| 265
.
| 266
G
| 266
.
| 266
.
| 267
C
| 267
.
| 267
.
| 268
A
| 268
.
| 268
.
| 269
T
| 269
.
| 269
.
| 270
G
| 270
.
| 270
.
| 271
C
| 271
.
| 271
.
| 272
A
| 272
.
| 272
.
| 273
T
| 273
.
| 273
.
| 274
G
| 274
.
| 274
.
| 275
C
| 275
.
| 275
.
| 276
A
| 276
.
| 276
.
| 277
T
| 277
.
| 277
.
| 278
G
| 278
.
| 278
.
| 279
C
| 279
.
| 279
.
| 280
A
| 280
.
| 280
.
| 281
T
| 281
.
| 281
.
| 282
G
| 282
.
| 282
.
| 283
C
| 283
.
| 283
.
| 284
A
| 284
.
| 284
.
| 285
T
| 285
.
| 285
.
| 286
G
| 286
.
| 286
.
| 287
C
| 287
.
| 287
.
| 288
A
| 288
.
| 288
.
| 289
T
| 289
.
| 289
.
| 290
G
| 290
.
| 290
.
| 291
C
| 291
.
| 291
.
| 292
A
| 292
.
| 292
.
| 293
T
| 293
.
| 293
.
| 294
G
| 294
.
| 294
.
| 295
C
| 295
.
| 295
.
| 296
A
| 296
.
| 296
.
| 297
T
| 297
.
| 297
.
| 298
G
| 298
.
| 298
.
| 299
C
| 299
.
| 299
.
| 300
A
| 300
.
| 300
.
| 301
T
| 301
.
| 301
.
| 302
G
| 302
.
| 302
.
| 303
C
| 303
.
| 303
.
| 304
A
| 304
.
| 304
.
| 305
T
| 305
.
| 305
.
| 306
G
| 306
.
| 306
.
| 307
C
| 307
.
| 307
.
| 308
A
| 308
.
| 308
.
| 309
T
| 309
.
| 309
.
| 310
G
| 310
.
| 310
.
| 311
C
| 311
.
| 311
.
| 312
A
| 312
.
| 312
.
| 313
T
| 313
.
| 313
.
| 314
G
| 314
.
| 314
.
| 315
C
| 315
.
| 315
.
| 316
A
| 316
.
| 316
.
| 317
T
| 317
.
| 317
.
| 318
G
| 318
.
| 318
.
| 319
C
| 319
.
| 319
.
| 320
A
| 320
.
| 320
.
| 321
T
| 321
.
| 321
.
| 322
G
| 322
.
| 322
.
| 323
C
| 323
.
| 323
.
| 324
A
| 324
.
| 324
.
| 325
T
| 325
.
| 325
.
| 326
G
| 326
.
| 326
.
| 327
C
| 327
.
| 327
.
| 328
A
| 328
.
| 328
.
| 329
T
| 329
.
| 329
.
| 330
G
| 330
.
| 330
.
| 331
C
| 331
.
| 331
.
| 332
A
| 332
.
| 332
.
| 333
T
| 333
.
| 333
.
| 334
G
| 334
.
| 334
.
| 335
C
| 335
.
| 335
.
| 336
A
| 336
.
| 336
.
| 337
T
| 337
.
| 337
.
| 338
G
| 338
.
| 338
.
| 339
C
| 339
.
| 339
.
| 340
A
| 340
.
| 340
.
| 341
T
| 341
.
| 341
.
| 342
G
| 342
.
| 342
.
| 343
C
| 343
.
| 343
.
| 344
A
| 344
.
| 344
.
| 345
T
| 345
.
| 345
.
| 346
G
| 346
.
| 346
.
| 347
C
| 347
.
| 347
.
| 348
A
| 348
.
| 348
.
| 349
T
| 349
.
| 349
.
| 350
G
| 350
.
| 350
.
| 351
C
| 351
.
| 351
.
| 352
A
| 352
.
| 352
.
| 353
T
| 353
.
| 353
.
| 354
G
| 354
.
| 354
.
| 355
C
| 355
.
| 355
.
| 356
A
| 356
.
| 356
.
| 357
T
| 357
.
| 357
.
| 358
G
| 358
.
| 358
.
| 359
C
| 359
.
| 359
.
| 360
A
| 360
.
| 360
.
| 361
T
| 361
.
| 361
.
| 362
G
| 362
.
| 362
.
| 363
C
| 363
.
| 363
.
| 364
A
| 364
.
| 364
.
| 365
T
| 365
.
| 365
.
| 366
G
| 366
.
| 366
.
| 367
C
| 367
.
| 367
.
| 368
A
| 368
.
| 368
.
| 369
T
| 369
.
| 369
.
| 370
G
| 370
.
| 370
.
| 371
C
| 371
.
| 371
.
| 372
A
| 372
.
| 372
.
| 373
T
| 373
.
| 373
.
| 374
G
| 374
.
| 374
.
| 375
C
| 375
.
| 375
.
| 376
A
| 376
.
| 376
.
| 377
T
| 377
.
| 377
.
| 378
G
| 378
.
| 378
.
| 379
C
| 379
.
| 379
.
| 380
A
| 380
.
| 380
.
| 381
T
| 381
.
| 381
.
| 382
G
| 382
.
| 382
.
| 383
C
| 383
.
| 383
.
| 384
A
| 384
.
| 384
.
| 385
T
| 385
.
| 385
.
| 386
G
| 386
.
| 386
.
| 387
C
| 387
.
| 387
.
| 388
A
| 388
.
| 388
.
| 389
T
| 389
.
| 389
.
| 390
G
| 390
.
| 390
.
| 391
C
| 391
.
| 391
.
| 392
A
| 392
.
| 392
.
| 393
T
| 393
.
| 393
.
| 394
G
| 394
.
| 394
.
| 395
C
| 395
.
| 395
.
| 396
A
| 396
.
| 396
.
| 397
T
| 397
.
| 397
.
| 398
G
| 398
.
| 398
.
| 399
C
| 399
.
| 399
.

Code

"use client";
import {
  Annotation,
  AriadneSelection,
  SequenceViewer,
} from "@nitro-bio/sequence-viewers";
import { useState } from "react";

export const _SequenceViewer = () => {
  const [selection, setSelection] = useState<AriadneSelection | null>(null);
  const annotations: Annotation[] = [
    {
      text: "example",
      type: "CDS",
      direction: "forward",
      start: 10,
      end: 200,
      className: "dark:text-black dark:bg-amber-400 bg-amber-600 text-white",
    },
    {
      text: "example",
      type: "foo",
      direction: "reverse",
      start: 300,
      end: 20,
      className: "dark:text-black dark:bg-rose-400 bg-rose-600 text-white",
    },
  ];
  const charClassName = ({ sequenceIdx }: { sequenceIdx: number }) => {
    if (sequenceIdx === 0) {
      return "dark:text-emerald-300 text-emerald-600";
    } else if (sequenceIdx === 1) {
      return "dark:text-indigo-300 text-indigo-600";
    } else {
      return "dark:text-amber-300 text-amber-600";
    }
  };

  return (
    <div className="flex max-h-[600px] overflow-y-auto">
      <SequenceViewer
        sequences={[
          "ATGC".repeat(100),
          " ".repeat(30) + "ATGC".repeat(20),
          " ".repeat(80) + "ATGC".repeat(70),
        ]}
        annotations={annotations}
        selection={selection}
        setSelection={setSelection}
        charClassName={charClassName}
        selectionClassName="relative after:bg-emerald-400/20 after:absolute after:-left-px after:right-0 after:inset-y-0 after:z-[-1]"
        highlightMisalignments
		noValidate
      />
    </div>
  );
};

Installation

This component requires the @nitro-bio/sequence-viewers package. Install it via:

npm i @nitro-bio/sequence-viewers@latest

Then customize the sequence viewer colors using CSS variables in your global CSS:

@source 'path/to/node_modules/@nitro-bio/sequence-viewers/dist/nitro-sequence-viewers.es.js';
@theme {
  --color-sequences-primary: var(--color-emerald-700);
  --color-sequences-secondary: var(--color-fuchsia-600);
  --color-sequences-selection: var(--color-emerald-600);
  --color-sequences-foreground: var(--color-zinc-950);
  --color-sequences-background: var(--color-zinc-50);
  --color-sequences-mismatch: var(--color-red-500);
  --color-sequences-gap: var(--color-gray-400);
}

Alternatively, import the CSS file directly:

import "path/to/node_modules/@nitro-bio/sequnce-viewers/dist/nitro-sequence-viewers.css";

Was this page helpful?