Hub missing cytoband - Githubissues

Kahl84 commented 2 weeks ago

I am trying to create a react component that integrates IGV for ROS_Cfam_1.0 but I get a console error Error loading IGV: TypeError: Cannot read properties of undefined (reading 'cytobandURL') below the code. What I am missing?

const chromosome = geneData?.chromosomes?.[0] || "1"; // Ensure we get chromosome from geneData const start = geneData?.annotations?.[0]?.genomic_locations?.[0]?.genomic_range ?.begin || 100000; const end = geneData?.annotations?.[0]?.genomic_locations?.[0]?.genomic_range ?.end || 200000;

  // IGV options using the UCSC hub URL for ROS_Cfam_1.0
  const igvOptions = {
    locus: `${chromosome}:${start}-${end}`, // Set locus dynamically from geneData
    genome: "GCF_014441545.1", // genome ID, but will be fetched from the hub
    tracks: [
      {
        name: "Gene Annotations",
        type: "annotation",
        url: "https://genark.s3.amazonaws.com/dog_genome.gff3", // Update with real track URL
      },
    ],
    // Add the UCSC Genome Browser Hub URL
    hubUrl:
      "https://hgdownload.soe.ucsc.edu/hubs/GCF/014/441/545/GCF_014441545.1/hub.txt",
  };

jrobinso commented 2 weeks ago

Have you checked the igv.js documentation?

Kahl84 commented 2 weeks ago

I did but I couldn't find how that could help me? maybe if you have more specific pointers I would appreciated it. Thank you!

Kahl84 commented 2 weeks ago

I tried a super simple implementation using the documentation here: here: https://igv.org/doc/igvjs/#Reference-Genome/ and test UCSC GenArk assembly GCA_000002305.1 with the following code (tracks removed to avoid complexity)


import React, { createRef, Component } from "react";

const igvStyle = {
  fontFamily:
    "open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif",
  paddingTop: "60px",
  margin: "5px",
};

class IGVViewer extends Component {
  constructor(props) {
    super(props);
    this.container = createRef(null);
  }

  componentDidMount() {
    // Load igv.js dynamically from a CDN
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/igv@2.9.4/dist/igv.min.js";
    script.async = true;
    script.onload = () => {
      const { geneData } = this.props;

      // Extract chromosome, start, and end from geneData
      let chromosome = geneData?.chromosomes?.[0] || "NC_051843.1"; // Default chromosome for testing
      const start =
        geneData?.annotations?.[0]?.genomic_locations?.[0]?.genomic_range
          ?.begin || 100000;
      const end =
        geneData?.annotations?.[0]?.genomic_locations?.[0]?.genomic_range
          ?.end || 200000;

      // IGV Options, using GenArk genome reference
      const igvOptions = {
        genome: "GCA_000002305.1", // Replace with any valid GenArk genome ID
        locus: `${chromosome}:${start}-${end}`, // Set locus dynamically from geneData
        tracks: [], // No tracks for now, can add later
      };

      // Log the full IGV options object to verify URLs and locus
      console.log("IGV Options:", igvOptions);

      // Initialize IGV browser
      window.igv
        .createBrowser(this.container.current, igvOptions)
        .then((browser) => {
          console.log("IGV Viewer successfully loaded.");
          // Log the initialized IGV browser to verify further
          console.log(browser);
        })
        .catch((error) => {
          console.error("Error loading IGV:", error);
        });
    };
    document.body.appendChild(script);
  }

  render() {
    return <div id="igv-div" ref={this.container} style={igvStyle}></div>;
  }
}

export default IGVViewer;

but I get Unknown genome id: GCA_000002305.1 and I am not sure why.

jrobinso commented 1 week ago

What version of igv.js are you using? This is important.

jrobinso commented 1 week ago

Here's a complete working example

<html>

<body>

<div id="igvDiv"></div>

<script type="module">

    import igv from "https://cdn.jsdelivr.net/npm/igv@3.0.7/dist/igv.esm.min.js"

   igv.createBrowser(document.getElementById('igvDiv'), {genome: "GCA_000002305.1"})

</script>

</body>

</html>

Kahl84 commented 1 week ago

I am using the latest version of IGV.js. Your solution actually made it work, thank you! Any pointers on how to disable certain tracks (i.e. Augustus) and how to create a VCF with my own variants info? `

jrobinso commented 1 week ago

@Kahl84 As I pointed out to you earlier you can use igv.org/app and export a session, and then customized it as you wish (for example removing tracks). WRT VCF see its documentation, you might find some online tutorials on VCFs.

igvteam / igv.js

Hub missing cytoband #1900