How to Add a Specific Track (previously updated) in a Current JBrowse 2 Session.

[marcarreaza]

Hello who's reading this,
I am currently using and developing a website based on JBrowse 2. I know that a way to add a new or another track is: "Add" > (for example) "Linear Genome View" > Select the assembly and chromosome > Add our updated tracks.
Then, I was wondering if, through a button or hyperlinked image, it is possible to add a specific track previously updated. I think that it can be possible with a javascript suitable with the website html, but, I do not know how to. I would like to know which function or method of JBrowse2 I should use to add this specific track and how I can provide the proper configuration to ensure it displays correctly in the visualization.

Thank you for your time and attention! And I apologize in advance for my knowledge as I'm just starting.

The track I want to add is:

  "type": "QuantitativeTrack",
  "trackId": "pi_ACB_10k",
  "name": "pi_ACB_10k",
  "adapter": {
    "type": "BigWigAdapter",
    "bigWigLocation": {
      "uri": "/tracks/Pi/pi_ACB_10k.bw",
      "locationType": "UriLocation"
    }
  },
  "category": [
    "Pi statistic"
  ],
  "assemblyNames": [
    "Homo_sapiens"
  ]
}

[garrettjstevens]

How are you using JBrowse 2? I'll give you an example based on using the @jbrowse/react-linear-genome-view React component. If that doesn't apply to you, then if you describe your setup I can try to give a different example. Here is the command you would use:

viewState.session.addTrackConf(/* track config that you want to add here */)

Where viewState is the object you get from createViewState.

[garrettjstevens]

The example I just gave adds a new track, and you would still have to open it from the track selector. Do you perhaps mean that you already have a track in your config and you want to open that track from a button in your app?

[marcarreaza]

Yes, that's what I meant. I want to open an existing track (which will be interesting) from a button in my app (in my case, my website).

I am gonna try to explain. For example, I want to be able to open the track 'pi_ACB_10k' of Homo Sapiens from an specific chromosome, let's say the first one, with just a single click on a button (or image but does not matter) in my current session, instead of going to 'Add' > "Linear Genome View" > Search for the assembly and the chromosome > Open the tracks and select it. I want this because I think this way it provides a faster route for users to access favourite species like Homo Sapiens.

[garrettjstevens]

How have you installed JBrowse 2? e.g. did you use the jbrowse create command in the Jbrowse CLI? Or are you maybe using the @jbrowse/react-app component inside an existing React app?

[marcarreaza]

Yes, as I installed JBrowse web setup using the CLI. All the CLI's instructions for adding tracks, assemblies... are working. Besides I have this files:

• asset-manifest.json
• favicon.ico
• index.html
• manifest.json
• robots.txt
• static/
• test_data/
• version.txt

So, yes, I used the "jbrowse create" command.

[garrettjstevens]

How are you planning on integrating JBrowse 2 into your website? Do you want to click on a link and open JBrowse 2 in a new tab? Or do you want JBrowse to be on the same page as other parts of your website? If you want JBrowse 2 to be on the same page, you may want to use one of our embedded components.

[marcarreaza]

I have already JBrowse in my website, specifically in the principal html. I would like to want this but I did not found neither in our embedded components.
That's what I am talking about:

[garrettjstevens]

The full JBrowse 2 Web app is not meant to be controlled externally like that. You may want to see if one of the embedded components could work for you, since they are meant for this sort of thing.

One possibility as a workaround is that you could use the URL Params API to navigate the page to a new URL that has that track open.