plotly / react-sequence-viewer

A React wrapper of the BioJS sequence-viewer component

react-sequence-viewer

Description

A React wrapper around the BioJS sequence-viewer component.

Installation

npm install --save react-sequence-viewer

Dependencies

The following are dependencies required by the sequence-viewer module that is wrapped by this React component.

• jQuery
• Bootstrap CSS

You can either include these into your HTML page or add them to your own application build (see usage below).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>

Usage

The following code renders a sequence-viewer component in the HTML element with an ID of 'sequence-viewer1'.

ES6

import React from 'react';
import ReactDOM from 'react-dom';

// Either uncomment these lines or pull
// in jQuery and Bootstrap into the HTML page of your application.
// The below requires that jQuery/Bootstrap be installed as a dependency
// in your package.json file.
//import jquery from 'jquery';
//window.jQuery = jquery;

//import 'bootstrap/dist/css/bootstrap.min.css';

import ReactSequenceViewer from 'react-sequence-viewer';

const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';

ReactDOM.render(
  <ReactSequenceViewer sequence={mySeq} />,
  document.getElementById('#sequence-viewer1')
);

import React from 'react';
import ReactDOM from 'react-dom';

// Either uncomment these lines or pull
// in jQuery and Bootstrap into the HTML page of your application.
// The below requires that jQuery/Bootstrap be installed as a dependency
// in your package.json file.
//import jquery from 'jquery';
//window.jQuery = jquery;

//import 'bootstrap/dist/css/bootstrap.min.css';

import ReactSequenceViewer from 'react-sequence-viewer';

const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
const options = {
  badge: true,
  search: false,
  showLineNumbers: true,
  title: "my sequence",
  toolbar: false,
};

ReactDOM.render(
  <ReactSequenceViewer sequence={mySeq} {...options} />,
  document.getElementById('#sequence-viewer1')
);

Properties / Options

Please see the Sequence Viewer documentation for more details on the options below.

Name	Description	Type	Required	Comment
className	HTML class name to apply to the Sequence Viewer div container	String	No
coverage	Advanced sequence hightlighting	Array[Objects]	No	Not compatible with selection
id	The ID to use for the Sequence Viewer container element	String	No
legend	Adds a legend to the sequence	Array[Objects]	No
onMouseSelection	Event handler for sequence selection with the mouse	function	No
onSubpartSelected	Event handler for sequence selected via the search box	function	No
selection	A region to highlight	Array	No	Not compatible with coverage
sequence	The sequence to render.	String	Yes