Home  >  Q&A  >  body text

The correct way to implement IGV.js in React

<p>I'm trying to use IGV.js in React and discovered that the following code creates two container divs instead of one: </p> <pre class="brush:php;toolbar:false;">var igvDiv = document.getElementById("igv-div"); var options = { genome: "hg38", locus: "chr8:127,736,588-127,739,371", tracks: [ { "name": "HG00103", "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram", "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai", "format": "cram" } ] }; igv.createBrowser(igvDiv, options) .then(function (browser) { console.log("Created IGV browser"); })</pre> <p>My React code is better using useRef: </p> <pre class="brush:php;toolbar:false;">import React, { useRef, useEffect, Component } from 'react'; import igv from 'igv'; var igvStyle = { fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif', paddingTop: '60px', margin: '5px' } class IGViewerSection extends Component { componentDidMount() { var igvContainer = document.getElementById('igv-div'); var igvOptions = { genome: "hg38", locus: "chr8:127,736,588-127,739,371", tracks: [ { "name": "HG00103", "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram", "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai", "format": "cram" } ] }; return igv.createBrowser(igvContainer, igvOptions); } render() { return ( <div id="igv-div" style={igvStyle}></div> ); } } export default IGViewerSection;</pre> <p>I want to implement IGV.js in React using the correct approach. Could you please guide me how to properly implement IGV.js in React and how to fix it</p>
P粉748218846P粉748218846435 days ago483

reply all(1)I'll reply

  • P粉410239819

    P粉4102398192023-09-02 10:50:35

    Here is the correct version, you can use the ref attribute to attach your ref object to the component and it will be available when the component is mounted.

    import React, { createRef, Component } from 'react';
    import igv from 'igv';
    
    const igvStyle = {
      fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
      paddingTop: '60px',
      margin: '5px'
    }
    
    class IGViewerSection extends Component {
      constructor(props) {
        super(props)
        this.container = createRef(null)
      }
    
      componentDidMount() {
        const igvOptions = {
          genome: "hg38",
          locus: "chr8:127,736,588-127,739,371",
          tracks: [
            {
              "name": "HG00103",
              "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
              "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
              "format": "cram"
            }
          ]
        };
        return igv.createBrowser(this.container.current, igvOptions);
      }
    
      render() {
        return (
          <div id="igv-div" ref={this.container} style={igvStyle}></div>
        );
      }
    }
      
    
    export default IGViewerSection;

    reply
    0
  • Cancelreply