Regarding the initial content displayed when opening http://localhost:3000/. #4529

hj-99 · 2024-08-26T14:23:33Z

hj-99
Aug 26, 2024

Dear author, I would like to provide my index.html code for you to take a look at. When I open http://localhost:3000/, I get the content shown in Image 1, but what I actually want is the content in Image 2. Could you please help me figure out what needs to be changed?

My index.html code is as follows:

<html>
  <head>
    <script src="//unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="//unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="//unpkg.com/@jbrowse/react-linear-genome-view/dist/react-linear-genome-view.umd.development.js" crossorigin></script>
  </head>
  <body>
    <div id="jbrowse_linear_genome_view"></div>
    <script type="module">
      import assembly from './assembly.js'
      import tracks from './tracks.js'
      import session from "./session.js"
      const { createViewState, JBrowseLinearGenomeView } = JBrowseReactLinearGenomeView
      const { createElement } = React
      const { render } = ReactDOM
      const state = new createViewState({
        assembly, 
        tracks, 
        location: '1:119,958,164..123,766,358', 
        defaultSession: session,
        offsetPx: 14500,
        bpPerPx:1.7
      })
      render(
        createElement(JBrowseLinearGenomeView, { viewState: state }),
        document.getElementById('jbrowse_linear_genome_view'),
      )
    </script>
  </body>
</html>

cmdcolin · 2024-08-26T17:12:00Z

cmdcolin
Aug 26, 2024
Maintainer

hi there
you should

a) remove the defaultSession argument, unless your defaultSession is coded specifically, it is hard to automate
b) remove offsetPx,bpPerPx, those are not valid and would do nothing
c) manually call state.session.view.showTrack('trackyouwanttoshow') for each track you want to show. see this example https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithShowTrack.tsx (from our storybook docs https://jbrowse.org/storybook/lgv/main/)

0 replies

hj-99 · 2024-08-27T01:34:29Z

hj-99
Aug 27, 2024
Author

Yes, the session corresponding to my defaultSession is one that I manually edited. It contains the track that I want to display. Based on this, could you help me figure out how to modify my index.html so that the homepage shows Image 2 as soon as it is opened?

The code for session.js is as follows:

export default {
    name: "my session", 
    view: {
        id: "linearGenomeView",
        type: "LinearGenomeView", 
        tracks: [
            {
                type: "ReferenceSequenceTrack", 
                configuration: "haoV1-ReferenceSequenceTrack",
                displays: [{type: "LinearReferenceSequenceDisplay"}]
            },
            {
                type: "FeatureTrack", 
                configuration: "haoV1.sorted.gff",
                displays: [{type: "LinearBasicDisplay"}] 
            },
            {
                type: "VariantTrack",
                configuration: "vcf track", 
                displays: [{type: "LinearBasicDisplay"}] 
            },
        ],
    },
}

1 reply

cmdcolin Aug 27, 2024
Maintainer

I would still follow the steps from my above post and remove the session. you can replace your code with

<html>
  <head>
    <script src="//unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="//unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="//unpkg.com/@jbrowse/react-linear-genome-view/dist/react-linear-genome-view.umd.development.js" crossorigin></script>
  </head>
  <body>
    <div id="jbrowse_linear_genome_view"></div>
    <script type="module">
      import assembly from './assembly.js'
      import tracks from './tracks.js'
      import session from "./session.js"
      const { createViewState, JBrowseLinearGenomeView } = JBrowseReactLinearGenomeView
      const { createElement } = React
      const { render } = ReactDOM
      const state = new createViewState({
        assembly, 
        tracks, 
        location: '1:119,958,164..123,766,358', 
      })
      state.session.view.showTrack('haoV1-ReferenceSequenceTrack') // corresponds with the trackId in your assembly.js in this reference sequence case
      state.session.view.showTrack('haoV1.sorted.gff') // corresponds with a trackId in your tracks.js
      state.session.view.showTrack('vcf track') // corresponds with a trackId in your tracks.js
      render(
        createElement(JBrowseLinearGenomeView, { viewState: state }),
        document.getElementById('jbrowse_linear_genome_view'),
      )
    </script>
  </body>
</html>

the reason i suggest doing it this way is that the session interface is not easy to hand-code, and e.g. the location object does cannot override just the location and otherwise incorporate the tracks. therefore, it tends to be easier to imperatively call the "API" functions for the linear genome view such as the showTrack function.

there is an ongoing effort to try to simplify this and make the session objects easier and more intuitive to hand code so it might be easier in the future :)

hj-99 · 2024-08-27T02:33:51Z

hj-99
Aug 27, 2024
Author

Thank you for your help. The method you suggested results in the same outcome as my original custom session, and it doesn’t change my initial requirement. I previously had a project where setting the location could achieve this, but using the same approach in this project hasn’t produced the same effect. Nonetheless, I appreciate your patience in helping me.

1 reply

cmdcolin Aug 27, 2024
Maintainer

you can also use the 'navToLocString' API sort of similar to showTrack. manually calling this API will let you handle any errors returned also.

here is an example of that, i tested it and it works with this human example
https://github.com/GMOD/jbrowse-react-linear-genome-view-vanillajs-demo/blob/test_branch/index.html

this is an example with the human locstring passed to createViewState, also should work
https://github.com/GMOD/jbrowse-react-linear-genome-view-vanillajs-demo/blob/test_branch2/index.html

if you still see any trouble, please upload the complete code.

note also: your genome appears to use the name "chr1" but your location string is "1". i'd just replace the location string to use e.g. location: '1:119,958,164..123,766,358' with location: 'chr1:119,958,164..123,766,358'. the 1: naming scheme will work too if refNameRenaming is enabled properly, but i don't have the code for your example to confirm that

hj-99 · 2024-08-27T06:37:22Z

hj-99
Aug 27, 2024
Author

Yes, I checked my .aliases.txt, and changing 1 to chr1 achieved the effect I wanted. I’m really grateful for your patient response. Best wishes.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Regarding the initial content displayed when opening http://localhost:3000/. #4529

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Regarding the initial content displayed when opening http://localhost:3000/. #4529

hj-99 Aug 26, 2024

Replies: 4 comments · 2 replies

cmdcolin Aug 26, 2024 Maintainer

hj-99 Aug 27, 2024 Author

cmdcolin Aug 27, 2024 Maintainer

hj-99 Aug 27, 2024 Author

cmdcolin Aug 27, 2024 Maintainer

hj-99 Aug 27, 2024 Author

hj-99
Aug 26, 2024

Replies: 4 comments 2 replies

cmdcolin
Aug 26, 2024
Maintainer

hj-99
Aug 27, 2024
Author

cmdcolin Aug 27, 2024
Maintainer

hj-99
Aug 27, 2024
Author

cmdcolin Aug 27, 2024
Maintainer

hj-99
Aug 27, 2024
Author