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