igv_component/igvcomponent.js

import React from "react";
import { Streamlit, withStreamlitConnection } from "streamlit-component-lib";
import * as igv from 'igv';

class IGVComponent extends React.Component {
  constructor(props) {
    super(props);
    this.browser = null;
  }

  componentDidMount() {
    // Initialize the IGV viewer with default options
    this.initializeIGV(this.props.genomeReference || "hg19");
  }

  componentDidUpdate(prevProps) {
    // Update the genome if it changes
    if (this.props.genomeReference !== prevProps.genomeReference) {
      this.initializeIGV(this.props.genomeReference);
    }

    // Update tracks when new CRISPR results are received
    if (this.props.crisprResults !== prevProps.crisprResults) {
      this.updateTracks(this.props.crisprResults);
    }
  }

  initializeIGV(genomeReference) {
    const igvDiv = document.getElementById("igvDiv");
    const options = {
      genome: genomeReference,
      // Add other IGV options here based on your requirements
    };

    igv.createBrowser(igvDiv, options).then((browser) => {
      this.browser = browser;
      // Load initial tracks if any
      this.updateTracks(this.props.crisprResults);
    });
  }

  updateTracks(crisprResults) {
    if (this.browser && crisprResults && crisprResults.length > 0) {
        // Clear existing tracks
        this.browser.removeAllTracks();

        // Create a BED string from CRISPR results
        let bedData = "track name='CRISPR Targets' description='CRISPR Cas9 Predictions'\n";
        bedData += crisprResults.map(result => {
            const chr = result[0]; // "Gene ID"
            const start = result[1]; // "Start Pos"
            const end = result[2]; // "End Pos"
            const strand = result[3] === 1 ? "+" : "-"; // "Strand"
            const name = `gRNA: ${result[4]} Score: ${result[5]}`; // "gRNA" and "Prediction"
            return `${chr}\t${start}\t${end}\t${name}\t0\t${strand}`;
        }).join("\n");

        // Create a blob from the BED string
        const blob = new Blob([bedData], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);

        // Define a track configuration for IGV
        const trackConfig = {
            name: "CRISPR Targets",
            url: url,
            format: "bed",
            type: "annotation",
            indexed: false
        };

        // Load the track into the IGV browser
        this.browser.loadTrack(trackConfig);
    }
}

  render() {
    return <div id="igvDiv" style={{ height: "500px" }}></div>;
  }
}

export default withStreamlitConnection(IGVComponent);