Spaces:
Sleeping
Sleeping
File size: 2,582 Bytes
78c921d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import React from "react";
import { Streamlit, withStreamlitConnection } from "streamlit-component-lib";
import 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);
|