Adding additional tracks to an embedded browser?

[joreynajr]

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-run renderBrowserInElement().

Is there a better way to do this?

Thanks in advance for your help!

Joaquin

[lidaof]

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...

[joreynajr]

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.

[lidaof]

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 :) )

[joreynajr]

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...

[lidaof]

Hi @joreynajr do you mean you want to find the renderBrowserInElement in the codebase? if yes, it's located in frontend/src/index.tsx

[joreynajr]

Hi @joreynajr do you mean you want to find the renderBrowserInElement in the codebase? if yes, it's located in frontend/src/index.tsx

That's perfect! Thanks!

[joreynajr]

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?

[lidaof]

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.

[joreynajr]

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!

[joreynajr]

One other thing, do I need to use the react framework directly in order to do all of this?

[lidaof]

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.

[joreynajr]

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.

[lidaof]

wow, @joreynajr simulating button clicks is a great idea actually...