Linear Viewer

Example

example

Pos: 0

| 0

| 1

| 2

| 3

| 4

| 5

Code

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

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

  return (
    <LinearViewer
      containerClassName="text-emerald-400 "
      sequences={["ATGC".repeat(100), "ATGC".repeat(20)]}
      annotations={annotations}
      selection={selection}
      setSelection={setSelection}
      selectionClassName={() => "bg-blue-500 fill-blue-500 text-blue-500"}
      sequenceClassName={classNameBySequenceIdx}
    />
  );
};

Installation

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

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

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);
}

Alternatively, import the CSS file directly:

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