Fixed an update bug when the sequence changes.

Author: jogoodma

demo/src/index.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { Component } from 'react'
 import {render} from 'react-dom'
 
-import Component from '../../src'
+import MyComponent from '../../src'
 import jquery from 'jquery';
 window.jQuery = jquery;
 
@@ -43,13 +43,27 @@ const exampleLegend = [
     {name: "Synthetic peptide",color: "#fff",underscore: true}
 ];
 
-let Demo = React.createClass({
-    render() {
-        return <div>
-            <h1>react-sequence-viewer Demo</h1>
-            <Component onSubpartSelected={subPart} onMouseSelection={mouseClick} legend={exampleLegend} coverage={exampleSequenceCoverage} sequence={seq} showLineNumbers={true} toolbar={true} search={true} badge={true} title="My Protein" />
-        </div>
+class Demo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      seq: this.props.seq,
+    };
+    this.handleOnClick = this.handleOnClick.bind(this);
   }
-})
 
-render(<Demo/>, document.querySelector('#demo'))
+  handleOnClick(e) {
+    console.debug('onclick fired');
+    this.setState({seq:'CAGTCGTAGTAC'});
+  }
+
+  render() {
+    return <div>
+      <h1>react-sequence-viewer Demo</h1>
+      <button onClick={this.handleOnClick}>Click me</button>
+      <MyComponent onSubpartSelected={subPart} onMouseSelection={mouseClick} legend={exampleLegend} coverage={exampleSequenceCoverage} sequence={this.state.seq} showLineNumbers={true} toolbar={true} search={true} badge={true} title="My Protein" />
+    </div>
+  }
+}
+
+render(<Demo seq={seq}/>, document.querySelector('#demo'))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sequence-viewer",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A React wrapper around the BioJS sequence-viewer component",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",

src/index.js

@@ -51,6 +51,18 @@ export default class ReactSequenceViewer extends Component {
     this._seqObj.onMouseSelection(this.props.onMouseSelection);
   }
 
+  // Update the sequence-viewer object if we get a new DNA sequence.
+  componentWillReceiveProps(nextProps) { 
+    if (this.props.sequence !== nextProps.sequence) {
+      this._seqObj = new Sequence(nextProps.sequence);
+    }
+  }
+
+  // Re-render if the component has updated.
+  componentDidUpdate() {
+    this.callRender();
+  }
+
   // Remove the event listener when the component is unmounted.
   componentWillUnmount() {
     document.removeEventListener('change', this.handleChange);