Configuring the LinearGenomeView embedded component

[Redmar-van-den-Berg]

I'm trying to use the LinearGenomeView to visualize some data for a tool I am developing, but I'm having a hard time figuring out how to configure it.

For example, reading the docs I've found I can toggle Gridlines and ColorByCDS as shown below, but I've not been able to flip the view horizontally. Even though in the docs, the function to flip is described in the same section.

      state.session.view.setShowGridlines(false)
      state.session.view.setColorByCDS(true)
      state.session.view.horizontallyFlip()

Is there a example configuration available somewhere which contains all configuration values, even the defaults set explicitly? I'm trying to piece together the configuration from the docs and by exporting sessions from the online demo, but I'm having a hard time with some of the more detailed configurations.

[cmdcolin]

Hi there
There are probably a couple layers to this answer

The simple answer about horizontally flipping

I made a couple demos that show how you can potentially fix horizontally flipping here. You can use a locstring with [rev] appended to it, and this might work well for most cases

https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--horizontally-flipped-via-locstring
Can also make a button to call action
https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--horizontally-flipped-via-button
Or set 'reversed:true' on the displayedRegions object
https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--horizontally-flipped-via-displayed-regions

Just as some more examples, to help demonstrate other settings:

We created a special 'property' called 'init' that allows basic initialization of some properties on the lgv, it is specially configured to simplify the configuration of the 'tracks', 'displayedRegions', and other things. Instead of these, you can just specify a simple object with array of trackIds, locstring, and it is easier than the raw snapshot format. The 'init' property is actually relatively new (e.g. in the past year)

live storybook, shows how you can use the 'init' field to simply set list of tracks, locstring, and also set the gridlines:false, colorByCDS:true to connect to your question:
https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--with-init

source code for this demo:

jbrowse-components/products/jbrowse-react-linear-genome-view/stories/examples/WithInit.tsx

Lines 90 to 102 in bb17a20

	view: {
	type: 'LinearGenomeView',
	showCytobandsSetting: true,
	colorByCDS: true,
	init: {
	loc: 'chr1:11,106,077-11,261,675',
	assembly: 'hg38',
	tracks: [
	'GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff',
	],
	},
	},
	},

Note that with this approach, we are manipulating the defaultSession, which means we are choosing what to initialize the value of the 'properties' as (which listed in this section https://jbrowse.org/jb2/docs/models/lineargenomeview/#lineargenomeview---properties) rather than calling actions like setGridlines, etc. one-by-one (calling actions changes the property values, and is certainly allowed too, but is more 'procedural' and less 'declarative')

Not sure exactly what you are seeing with the horizontally flip issue (my hypothesis: in dev mode in reaat, the useEffect are called twice in strictmode for dev environments, which could flip it twice back to normal :))

Definitely recommend flipping through the various storybooks! and happy to answer further questions

Future ambitious idea...

It is a little bit of a future 'ambition' but i want to try to perhaps in the future make a more simply react style interface. We of course use react, but we sort of 'require' users of our component to interface directly with our state manager object, which could be considered a bit awkward. This is my future idea #5481

[Redmar-van-den-Berg]

@cmdcolin Thank you for the examples on the different ways to configure the linear genome view. I'm still running into issues, but I suspect they might be related to combining the horizontal flip with multiple displayedRegions. (I'm interested in transcripts, so I'm slicing out the introns). The following config does not render properly (with three regions), but it does render properly flipped with only a single region in displayedRegions.

defaultSession: {
  name: 'My session',
  view: {
    id: 'linearGenomeView',
    type: 'LinearGenomeView',
    displayedRegions: [
      {
        refName: 'X',
        start:31119221,
        end:31121930,
        reversed:true,
        assemblyName: 'hg38',
      },{
        refName: 'X',
        start:31126641,
        end:31126673,
        reversed:true,
        assemblyName: 'hg38',
      },{
        refName: 'X',
        start:31134101,
        end:31134194,
        reversed:true,
        assemblyName: 'hg38',
      }
    ]
  }