{"action":"opened","issue":{"url":"https://api.github.com/repos/igvteam/igv.js/issues/891","repository_url":"https://api.github.com/repos/igvteam/igv.js","labels_url":"https://api.github.com/repos/igvteam/igv.js/issues/891/labels{/name}","comments_url":"https://api.github.com/repos/igvteam/igv.js/issues/891/comments","events_url":"https://api.github.com/repos/igvteam/igv.js/issues/891/events","html_url":"https://github.com/igvteam/igv.js/issues/891","id":427433632,"node_id":"MDU6SXNzdWU0Mjc0MzM2MzI=","number":891,"title":"Change igv locus in react","user":{"login":"zd1","id":814295,"node_id":"MDQ6VXNlcjgxNDI5NQ==","avatar_url":"https://avatars3.githubusercontent.com/u/814295?v=4","gravatar_id":"","url":"https://api.github.com/users/zd1","html_url":"https://github.com/zd1","followers_url":"https://api.github.com/users/zd1/followers","following_url":"https://api.github.com/users/zd1/following{/other_user}","gists_url":"https://api.github.com/users/zd1/gists{/gist_id}","starred_url":"https://api.github.com/users/zd1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zd1/subscriptions","organizations_url":"https://api.github.com/users/zd1/orgs","repos_url":"https://api.github.com/users/zd1/repos","events_url":"https://api.github.com/users/zd1/events{/privacy}","received_events_url":"https://api.github.com/users/zd1/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-03-31T19:24:19Z","updated_at":"2019-03-31T19:24:19Z","closed_at":null,"author_association":"NONE","body":"Dear IGV developers, \r\n\r\nThanks for developing the igv js. I appreciate your effort and have been trying to integrate the browser into my app. \r\n\r\nI have a naive question: how do I change the locus without creating a new instance of the browser? I am using react as below \r\n\r\n`class IgvFrame extends Component {\r\n    constructor(props){\r\n        super(props);\r\n        this.state = {\r\n            \"locus_string\": this.props.locus.chrom + \":\" + this.props.locus.start + \"-\" + this.props.locus.end,\r\n        }\r\n    }\r\n\r\n    componentDidMount() {\r\n        igv.createBrowser(this.element, {\"locus\": this.state.locus_string, ...igvoptions});\r\n    }\r\n\r\n    componentWillReceiveProps(props) {\r\n        if (this.props.locus !== props.locus) {\r\n            igv.createBrowser(this.element, {\"locus\": this.state.locus_string, ...igvoptions});\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div id=\"igv-div\" ref={e => e && (this.element = e)} />\r\n        );\r\n    }\r\n}\r\n`\r\n\r\nThank you,\r\n\r\nZhihao\r\n"}}
{"actor":{"display_login":"zd1"}}