|
| 1 | +import React, {PropTypes, Component} from 'react'; |
| 2 | + |
| 3 | +import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css'; |
| 4 | +// See nwb.config.js for some webpack magic that allows this to work. |
| 5 | +import Sequence from 'sequence-viewer'; |
| 6 | + |
| 7 | +export default class ReactSequenceViewer extends Component { |
| 8 | + constructor(props) { |
| 9 | + super(props); |
| 10 | + this.handleChange = this.handleChange.bind(this); |
| 11 | + |
| 12 | + // Initialize the sequence-viewer object. |
| 13 | + this._seqObj = new Sequence(this.props.sequence); |
| 14 | + this._div = null; |
| 15 | + } |
| 16 | + |
| 17 | + // Function to call the render function of sequence-viewer. |
| 18 | + // You can override existing props by passing an object with key value |
| 19 | + // pairs to override existing props. |
| 20 | + // e.g. |
| 21 | + // callRender({toolbar: false}) |
| 22 | + // would override the existing toolbar setting. |
| 23 | + callRender(newProps = {}) { |
| 24 | + // Read in div from private variable. |
| 25 | + const div = this._div; |
| 26 | + //Render div if it is not null. |
| 27 | + if (div != null) { |
| 28 | + this._seqObj.render('#' + div.id,{...this.props,...newProps}); |
| 29 | + this._seqObj.coverage(this.props.coverage); |
| 30 | + this._seqObj.addLegend(this.props.legend); |
| 31 | + } |
| 32 | + } |
| 33 | + |
| 34 | + // When the component mounts, add a change listenver to the document |
| 35 | + // and call render. We attach the change listener here becuase |
| 36 | + // jQuery events don't see to bubble up through React properly. |
| 37 | + // Thus, when a user toggles the charsPerLine drop down menu. |
| 38 | + // the event is handled by jQuery, but not seen by React when the |
| 39 | + // listener is attached at the component div level. |
| 40 | + // Attaching it to the document seems to work. |
| 41 | + componentDidMount() { |
| 42 | + document.addEventListener('change', this.handleChange); |
| 43 | + this.callRender(); |
| 44 | + this._seqObj.onSubpartSelected(this.props.onSubpartSelected); |
| 45 | + this._seqObj.onMouseSelection(this.props.onMouseSelection); |
| 46 | + } |
| 47 | + |
| 48 | + // Remove the event listener when the component is unmounted. |
| 49 | + componentWillUnmount() { |
| 50 | + document.removeEventListener('change', this.handleChange); |
| 51 | + } |
| 52 | + |
| 53 | + // Function called when the user changes the charsPerLine setting via the toolbar. |
| 54 | + handleChange(e) { |
| 55 | + const elem = e.target; |
| 56 | + // Check that the event was triggered by the right <select> button. |
| 57 | + if ((" " + elem.className + " " ).indexOf( " " + this.props.seqLenClass + " " ) > -1) { |
| 58 | + // Call render and override the charsPerLine setting with whatever the user specified. |
| 59 | + this.callRender({charsPerLine: elem.value}); |
| 60 | + } |
| 61 | + } |
| 62 | + |
| 63 | + // Render a div with the sequence-viwer widget in it. |
| 64 | + render() { |
| 65 | + const { id, sequence, className } = this.props; |
| 66 | + // Create the container div and store a reference to it once it is mounted |
| 67 | + // in the DOM. The componentDidMount function above will then get called |
| 68 | + // and render the widget. |
| 69 | + return ( |
| 70 | + <div className={className}> |
| 71 | + <div id={this.props.id} ref={(div) => this._div = div}></div> |
| 72 | + </div> |
| 73 | + ); |
| 74 | + } |
| 75 | +} |
| 76 | + |
| 77 | +ReactSequenceViewer.propTypes = { |
| 78 | + coverage: PropTypes.arrayOf( |
| 79 | + PropTypes.shape({ |
| 80 | + start: PropTypes.number.isRequired, |
| 81 | + end: PropTypes.number.isRequired, |
| 82 | + color : PropTypes.string, |
| 83 | + bgcolor : PropTypes.string, |
| 84 | + underscore : PropTypes.bool, |
| 85 | + tooltip : PropTypes.string, |
| 86 | + onclick : PropTypes.func, |
| 87 | + })), |
| 88 | + legend: PropTypes.arrayOf( |
| 89 | + PropTypes.shape({ |
| 90 | + name: PropTypes.string, |
| 91 | + color: PropTypes.string, |
| 92 | + underscore: PropTypes.bool, |
| 93 | + })), |
| 94 | + seqLenClass: PropTypes.string, |
| 95 | + onMouseSelection: PropTypes.func, |
| 96 | + onSubpartSelected: PropTypes.func, |
| 97 | +}; |
| 98 | + |
| 99 | +ReactSequenceViewer.defaultProps = { |
| 100 | + coverage: [], |
| 101 | + legend: [], |
| 102 | + seqLenClass: "CPLChoice", |
| 103 | + onMouseSelection: (elem) => {}, |
| 104 | + onSubpartSelected: (elem) => {}, |
| 105 | +} |
0 commit comments