Overscan sequence

OVERSCANUI KIT

A gap is never filled from the reference. The read sits under its reference, position by position, with mismatches marked. An unsequenced run stays a run of gaps, an uncalled base stays N, and a base whose quality is below threshold is called N, the way a sequencer does, rather than shown as if it had been read. The reference symbol above a hole is never copied down into it: that is the frog DNA, and the strip counts what it could not read instead. A read that is not the same length as its reference is refused, because choosing where the insertions go is an alignment, and an alignment the display invented is a reading nobody took.

demo/sequence.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-sequence src="models/sequence-read.json"></ov-sequence>

import { OvSequence } from 'overscan/react'

<OvSequence src="models/sequence-read.json" />

import { OvSequence } from 'overscan/vue'

<OvSequence src="models/sequence-read.json" />

import OvSequence from 'overscan/svelte/OvSequence.svelte'

<OvSequence src="models/sequence-read.json" />

gaps, N, mismatches and a low-quality tail

a clean read

a read not aligned to its reference

variation: src="models/sequence-clean.json"

import 'overscan'
import 'overscan/overscan.css'

<ov-sequence src="models/sequence-clean.json"></ov-sequence>

import { OvSequence } from 'overscan/react'

<OvSequence src="models/sequence-clean.json" />

import { OvSequence } from 'overscan/vue'

<OvSequence src="models/sequence-clean.json" />

import OvSequence from 'overscan/svelte/OvSequence.svelte'

<OvSequence src="models/sequence-clean.json" />

terminal

variation: src="models/sequence-short.json"

import 'overscan'
import 'overscan/overscan.css'

<ov-sequence src="models/sequence-short.json"></ov-sequence>

import { OvSequence } from 'overscan/react'

<OvSequence src="models/sequence-short.json" />

import { OvSequence } from 'overscan/vue'

<OvSequence src="models/sequence-short.json" />

import OvSequence from 'overscan/svelte/OvSequence.svelte'

<OvSequence src="models/sequence-short.json" />

industrial

variation: width="40"

import 'overscan'
import 'overscan/overscan.css'

<ov-sequence
  src="models/sequence-read.json"
  width="40"
></ov-sequence>

import { OvSequence } from 'overscan/react'

<OvSequence
  src="models/sequence-read.json"
  width="40"
/>

import { OvSequence } from 'overscan/vue'

<OvSequence
  src="models/sequence-read.json"
  width="40"
/>

import OvSequence from 'overscan/svelte/OvSequence.svelte'

<OvSequence
  src="models/sequence-read.json"
  width="40"
/>

cyber

antiseptic

esper

neo

machina

holo

aegis

vector