Skip to main content

Get started

Intro​

At anocca we have developed a suite of npm packages used in our internal tooling to display DNA and protein sequences. These packages are published under the @anocca/sequence-viewer-* namespace. Have a look at our list of packages.

Quick start​

To get started quickly you can add @anocca/sequence-viewer-app which exports the SequenceViewerApp.

SequenceViewerApp is a react component with the linear and circular viewer. It includes:

Installation​

# peer dependencies
npm i react-icons @mui/material @emotion/react @emotion/styled formik
# app
npm i @anocca/sequence-viewer-app @anocca/sequence-viewer-backend-react-state
note

@anocca/sequence-viewer-app also requires react-icons, @mui/material, @emotion/react, @emotion/styled and formik.

Unless you already use these packages in your project the sequence-viewer-app should only be used to get started quickly or to prototype.

See Usage without material UI and formik to use the @anocca/sequence-viewer-* suite of libraries without third party libraries (except react).

See Usage without react to use the @anocca/sequence-viewer-* suite of libraries without any third party library, only vanilla js.

Usage​

import {SequenceViewerApp} from '@anocca/sequence-viewer-app';
import {useBackend} from '@anocca/sequence-viewer-backend-react-state';
import {AnnotationForm} from '@anocca/sequence-viewer-react-mui-formik-form';

function MyAmazingSequenceViewers() {

  // The annotation backend allows us to store, edit and delete annotations.
  // The `useBackend` simply stores all annotations in the component state.
  // Scroll down in the tutorial to read about creating your own backend.
  const annotationBackend = useBackend();

  return (
    <>
      <SequenceViewerApp
        {...annotationBackend}
        // Sequence must be an uppercase string of nucleotides or amino acids.
        sequence='ATGCTGATATCA'
        // A component which will render the form used to create and edit annotations
        AnnotationForm={AnnotationForm}
        // A fixed width and height is required
        width={800}
        height={640}
      />
      <SequenceViewerApp
        {...annotationBackend}
        // If using an amino acid sequence set the `isProtein` prop to true.
        isProtein
        // protein sequence
        sequence='DYKDHDGDYKDH'
        AnnotationForm={AnnotationForm}
        width={800}
        height={640}
      />
    </>
  )
}

Creating your own annotation backend​

An annotaion backend should implement the following interface:

interface AnnotationBackend {
  annotations: Annotation[];
  getAnnotationLabelById: (id: string) => string;
  getAnnotationById: (id: string) => Annotation;
  addAnnotation: (annotation: Annotation) => void;
  deleteAnnotations: (ids: string[]) => void;
  showAnnotations: (ids: string[]) => void;
  hideAnnotations: (ids: string[]) => void;
  updateAnnotation: (annotation: Annotation) => void;
}
const annotationBackend: AnnotationBackend = {
  /* create your backend here */
}