Integration of JBrowse2 web application into my react application

[kmdurga67]

I'm facing difficulty while integrating the JBrowse2 into my react web application. Not able to integrate it properly

JBrowseViewer.js:105 Error creating view state: TypeError: Cannot read properties of undefined (reading 'defaultSession') at JBrowseViewer.js:99:1

  | (anonymous) | @ | JBrowseViewer.js:105 -- | -- | -- | --   | |   |     | App | @ | App.js:8   | |   |     | ./src/index.js | @ | index.js:9   | options.factory | @ | react refresh:37   | __webpack_require__ | @ | bootstrap:28   | (anonymous) | @ | startup:7   | (anonymous) | @ | startup:7

[cmdcolin]

Hello
The best resources for this are our embedded components example pages here https://jbrowse.org/jb2/docs/embedded_components/

and our storybook documentation here https://jbrowse.org/storybook/lgv/main/

note that it is best to use e.g. @jbrowse/react-linear-genome-view2 all packages were renamed with the '2' suffix in the past year

[kmdurga67]

Now I'm able to integrate but not be able to utilise it's functionality like I wanted to view my alignments, synteny etc. always showing the hg19 of human in the reference. Wanted to utilise it for my data visualization.

[cmdcolin]

The @jbrowse/react-app2 is a full featured application with the synteny view and things like that. Here is a synteny view example i made in our @jbrowse/react-app2 storybook https://jbrowse.org/storybook/app/main/?path=/story/source-code-for-examples--synteny-example

The @jbrowse/react-linear-genome-view2 is "just a linear genome view" so does not have the synteny view features, but the "app" has all the app level features including dotplot,circular,synteny, etc.

Hope that helps

[kmdurga67]

Could you help me out code level. I have integrated it into my react application of @jbrowse/react-app2 but not be able to load my data. It is always showing the hg19 in the reference drop-down. How I can customise it completely as per my need.

[cmdcolin]

you can see here the source code for the example that i posted https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-app/stories/examples/SyntenyExample.tsx (source code for https://jbrowse.org/storybook/app/main/?path=/story/source-code-for-examples--synteny-example)

[cmdcolin]

I can try to add more examples also as i know there aren't a ton of them. if there is anything in particular you want to see let me know.