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.