Repository navigation
Fails to Update Dynamically with tracks Changes in local React program #367
Description
I am using the WashU Epigenome Browser's renderBrowserInElement method to embed a genome browser component. The component renders correctly when tracks is static (hardcoded), but it fails to update when tracks changes dynamically.
Here's my component.
import React, { useEffect, useRef, useState } from 'react';
const EpigenomeBrowser = ({tracks}) => {
const containerRef = useRef(null);
const [currentTracks, setCurrentTracks] = useState(tracks);
useEffect(() => {
setCurrentTracks(tracks);
}, [tracks]);
useEffect(() => {
if (containerRef.current) {
const contents = {
genomeName: "hg38",
displayRegion: "chr5:51997494-52853744",
trackLegendWidth: 120,
isShowingNavigator: true,
tracks: currentTracks,
metadataTerms: ["Sample"],
regionSets: [],
regionSetViewIndex: -1,
};
if (window.renderBrowserInElement) {
window.renderBrowserInElement(contents, containerRef.current);
}
}
}, [currentTracks]);
return (
<div
className={'flex-c-n-c-c w-10/12'}
>
<div
ref={containerRef}
className={'w-full'}
></div>
</div>
);
};
export default EpigenomeBrowser;
I reviewed the code for the renderBrowserInElement part and noticed that it uses ReactDOM.render. To address this, I used container.innerHTML = ''; to clear the container. However, this directly caused the WashU Genome Browser to disappear, and the container content remains empty (just a div block).
Please tell me how to solve this problem.
Activity
lidaof commentedon Mar 20, 2025
Hi @ZenMuseHarmony sorry for late reply. We also found the the way we using renderBrowserInElement is not convenient to use, for that we were working on developing a new version, I suggest you to try https://github.com/twlab/eg3?tab=readme-ov-file#use-the-browser-as-a-module-in-your-web-application and it would be much easier to embed the Browser to your application, with the ability to update tracks as well.
ZenMuseHarmony commentedon Mar 26, 2025
Thank you for your follow-up and for sharing the updated version. I've tried the new implementation from the GitHub link you provided, and it has indeed resolved my issues. The new version works perfectly and demonstrates good stability in my application.
I really appreciate your support and the improvements made to make the embedding process more convenient. The added ability to update tracks is particularly helpful for my use case.
lidaof commentedon Mar 26, 2025
Hi @ZenMuseHarmony, thanks for your feedback! We are really glad to hear that works for you. Feel free to let us know any issues you may encounter.