Added docs, removed outer div container, adjusted selection to accept a single sequence region, added warning when using selection and coverage.

Author: jogoodma

README.md

@@ -4,10 +4,80 @@
 [![npm package][npm-badge]][npm]
 [![Coveralls][coveralls-badge]][coveralls]
 
+##Description
 
 A [React](https://facebook.github.io/react/) wrapper around the [BioJS](https://biojs.net/) [sequence-viewer](https://github.com/calipho-sib/sequence-viewer)
 component.
 
+## Installation
+
+```
+npm install --save react-sequence-viewer
+```
+
+## Usage
+
+The following code renders a sequence-viewer component in the HTML
+element with an ID of 'sequence-viewer1'.
+
+**ES6**
+
+```jsx
+import React from 'react';
+import {render} from 'react-dom';
+import ReactSequenceViewer from 'react-sequence-viewer';
+
+const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
+
+render(React.createClass({
+    render() {
+        return (
+            <ReactSequenceViewer sequence={mySeq} />
+        );
+    }
+}),document.getElementsById('#sequence-viewer1'));
+```
+
+```jsx
+import React from 'react';
+import {render} from 'react-dom';
+import ReactSequenceViewer from 'react-sequence-viewer';
+
+const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
+const options = {
+    showLineNumbers: true,
+    toolbar: false,
+    search: false,
+    title: "my sequence",
+    badge: true,
+};
+
+render(React.createClass({
+    render() {
+        return (
+            <ReactSequenceViewer sequence={mySeq} {...options} />
+        );
+    }
+}),document.getElementsById('#sequence-viewer1'));
+```
+
+## Properties / Options
+
+Please see the [Sequence Viewer documentation](https://cdn.rawgit.com/calipho-sib/sequence-viewer/master/examples/index.html)
+for more details on the options below.
+
+
+| Name | Description | Default Value | Type | Required | Comment |
+|:-----|:------------|---------------|------|----------|:--------|
+| id | The ID to use for the Sequence Viewer container element | A random unique ID | String | No |  |
+| className | HTML class name to apply to the Sequence Viewer div container |  | String | No |  |
+| sequence | The sequence to render. |  | String | Yes |  |
+| selection | A region to highlight |  | Array | No | Not compatible with `coverage` |
+| coverage | Advanced sequence hightlighting |  | Array[Objects] | No | Not compatible with `selection` |
+| 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 |  |
+
 [build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
 [build]: https://travis-ci.org/FlyBase/react-sequence-viewer
 

demo/src/index.js

@@ -18,9 +18,11 @@ const subPart = (e) => {
     console.log("Subpart");
     console.log(e.detail);
 }
+
+const selection = [0,30,'red']
+
 //Coverage list
 const exampleSequenceCoverage = [
-    {start: 0, end: 25, color: "black", underscore: false, bgcolor: "#ffd891"},
     {start: 25, end: 47, color: "#ff0000", underscore: false, tooltip: "this is a tooltip"},
     {start: 47, end: 54, color: "#ff0000", underscore: true},
     {start: 54, end: 55, color: "#ff0000", underscore: false},
@@ -41,7 +43,7 @@ let Demo = React.createClass({
     render() {
         return <div>
             <h1>react-sequence-viewer Demo</h1>
-            <Component onSubpartSelected={subPart} onMouseSelection={mouseClick} legend={exampleLegend} coverage={exampleSequenceCoverage} id="blah" sequence={seq} showLineNumbers={true} toolbar={true} search={true} badge={false} title="" />
+            <Component onSubpartSelected={subPart} onMouseSelection={mouseClick} legend={exampleLegend} coverage={exampleSequenceCoverage} sequence={seq} showLineNumbers={true} toolbar={true} search={true} badge={false} title="" />
         </div>
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sequence-viewer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A React wrapper around the BioJS sequence-viewer component",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",
@@ -23,6 +23,7 @@
     "bootstrap": "^3.3.7",
     "handlebars": "3.0.2",
     "jquery": "^3.1.0",
+    "node-uuid": "^1.4.7",
     "sequence-viewer": "^0.2.18"
   },
   "peerDependencies": {

src/index.js

@@ -1,4 +1,5 @@
 import React, {PropTypes, Component} from 'react';
+import { v4 } from 'node-uuid';
 
 import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css';
 // See nwb.config.js for some webpack magic that allows this to work.
@@ -9,6 +10,9 @@ export default class ReactSequenceViewer extends Component {
         super(props);
         this.handleChange = this.handleChange.bind(this);
 
+        if (props.selection && props.selection.length > 0 && props.coverage && props.coverage.length > 0) {
+            console.warn("The selection and coverage options are not compatible with each other.");
+        }
         // Initialize the sequence-viewer object.
         this._seqObj = new Sequence(this.props.sequence);
         this._div = null;
@@ -21,13 +25,17 @@ export default class ReactSequenceViewer extends Component {
     // callRender({toolbar: false})
     // would override the existing toolbar setting.
     callRender(newProps = {}) {
+        const { selection, ...props} = this.props;
+
         // Read in div from private variable.
         const div = this._div;
+
         //Render div if it is not null.
-        if (div != null) {
-            this._seqObj.render('#' + div.id,{...this.props,...newProps});
+        if (div !== null) {
+            this._seqObj.render('#' + div.id,{...props,...newProps});
             this._seqObj.coverage(this.props.coverage);
             this._seqObj.addLegend(this.props.legend);
+            if (selection.length > 0) this._seqObj.selection(...selection);
         }
     }
 
@@ -67,16 +75,22 @@ export default class ReactSequenceViewer extends Component {
         // in the DOM.  The componentDidMount function above will then get called
         // and render the widget.
         return (
-            <div className={className}>
-                <div id={this.props.id} ref={(div) => this._div = div}></div>
-            </div>
+            <div className={className} id={this.props.id} ref={(div) => this._div = div}></div>
         );
     }
 }
 
 ReactSequenceViewer.propTypes = {
-    id: PropTypes.string.isRequired,
+    id: PropTypes.string,
     sequence: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    selection: PropTypes.arrayOf((arr, key, compName, location, propFullName) => {
+        if (arr.length !== 3) {
+            return new Error(
+                'Invalid prop `selection` supplied to `' + compName + '`. Validation failed.'
+            );
+        }
+    }),
     coverage: PropTypes.arrayOf(
         PropTypes.shape({
         start: PropTypes.number.isRequired,
@@ -99,8 +113,10 @@ ReactSequenceViewer.propTypes = {
 };
 
 ReactSequenceViewer.defaultProps = {
+    id: v4(),
     coverage: [],
     legend: [],
+    selection: [], 
     seqLenClass: "CPLChoice",
     onMouseSelection: (elem) => {},
     onSubpartSelected: (elem) => {},