Closed joreynajr closed 4 months ago
Hi @joreynajr I think the way you did is probably the best or what I will do...or you might be able to hack into frontend/src/components/trackContainers/TrackContainer.js
which controls the tracks, it's a React component, every time the passed in tracks
prop updates, it will re-render. renderBrowserInElement
actually renders a trackContainer component as well. not sure if this helps...
Hi @lidaof, thanks a lot for your quick reply, and thanks for the confirmation on the approach I'm using. I might track to hack as you say later on so your suggestion definitely helps in that direction. Ideally, I would like the user of my site to select 10's of tracks and I'm not sure if recreating the whole browser over and over again might slow down the response time (I think it would). For now I'll close this issue! Thanks again.
Great! Thank you @joreynajr ! So either way, when users choose a new set of tracks, it will re-render, it may not a big issue though...but it's always good to monitor the performance, one of our members is exploring exposing more functions out from the code base, some like renderBigwig
, renderHic
, but we are sort of struggling with web workers right now...but will update if those are available for developers like you to use. (If you found ways to solve this, welcome to send a PR :) )
Hi @lidaof, I'm finally digging into this more! I was wondering, where can I find the renderBrowserInElement function? I've been looking for it within Github but so far no purchase. I want to try what you said earlier:
Hi @joreynajr I think the way you did is probably the best or what I will do...or you might be able to hack into frontend/src/components/trackContainers/TrackContainer.js which controls the tracks, it's a React component, every time the passed in tracks prop updates, it will re-render. renderBrowserInElement actually renders a trackContainer component as well. not sure if this helps...
Hi @joreynajr do you mean you want to find the renderBrowserInElement
in the codebase? if yes, it's located in frontend/src/index.tsx
Hi @joreynajr do you mean you want to find the
renderBrowserInElement
in the codebase? if yes, it's located infrontend/src/index.tsx
That's perfect! Thanks!
I don't have much experience with React so pardon my misunderstandings. I tried the following:
// get the output which appears to be the elements of the washu embedding
epiBrowser = renderBrowserInElement(contents, container);
// add the track by pushing to the tracks array
epiBrowser.props.children.props.contents.tracks.push(new_track);
It doesn't change the visualization at all but maybe this was a little naive. Do I somehow have to get the TrackContainer
instance and update the tracks through this direction? Eventually, using a setState()
at some point?
Hi @joreynajr i think you are definitely in the right direction, i think you need render the trackContainer instead, and update the props (which is tracks
variable contains a list of trackModel object) passed to it. you can ref frontend/src/components/EmbeddedContainer.tsx
which did what I described.
Hi @lidaof, I'm sorry for the delayed messages. There have been a lot of other updates I had to handle. When you talk about rendering trackContainer instead, what does this mean? Is trackContainer a class or function and I have to call it? I tried looking at frontend/src/components/EmbeddedContainer.tsx
but I'm still unsure of how to update the tracks or even just update the region that is being displayed (I want to make buttons that allow some level of navigation). Thanks in advanced!
One other thing, do I need to use the react framework directly in order to do all of this?
Hi @joreynajr yes, you would need to use React library. When I say render, i mean the render method in ReactDOM: ReactDOM.render
, it takes a React component, in this case could be the EmbeddedContainer
, and a html element, could be a div
element to host the component/content. for navigation, you would need to dynamic update the displayRegion: "chr5:51997494-52853744",
variable in your container. you can also check the file frontend/src/components/trackContainers/TrackContainer.js
see how region controls/zooms in/out.
Hope this helps.
Thanks, I'll have to familiarize myself with React! For now I managed to change the coordinates by simulating button clicks but I do want to get to the point when I can use React directly.
wow, @joreynajr simulating button clicks is a great idea actually...
Hi there,
I was wondering if it's possible to add or modify tracks in the browser embedding after
renderBrowserInElement()
has already been run. I'm trying to build a webpage where users can select tracks and then click a "visualize" button to update the tracks in the browser. Right now, I have a webpage that loads the browser embedding and when the "visualize" button is clicked, I remove the div with the embedding (id = "embed"), replace it with a clone, and then re-runrenderBrowserInElement()
.Is there a better way to do this?
Thanks in advance for your help!
Joaquin