Integrating react-linear-genome-view in a vue app ( based on Nuxt.js )

[BobLamarley]

Hello the JBrowse team :)
I'm Thomas from a french instute that is working on a platform ( written in Vuejs ) that aim for antibiotics resistance research and i want to add a genome viewer inside our platform, for better experience and you're library seems very great
However my 2 solutions was :

• Running a jbrowse instance and add an iframe to my website
• Using directly https://www.npmjs.com/package/@jbrowse/react-linear-genome-view

And the second option seems to be the best one because i would need for example that my vue states can refresh the genome viewer states and this would be impossible with a jbrowse instance

So in order to do that i've setup my project and added react-linear-genome-viewand veaury (https://github.com/gloriasoft/veaury) in order to be able to use react component in vue
But i'm facing errors and i don't know if it's my veaury setup that is failling or my usage of react-linear-genome-view

Here is the error i'm facing :

You're genome viewer is using mobx-react under the hood ?

Here is my jsx component :

import React from 'react';
import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
const JBrowseComponent = ({ config }) => {
  const state = createViewState(config);

  return <JBrowseLinearGenomeView viewState={state} />;
};

export default JBrowseComponent;

And here is my vue wrapper component around the react one :

<template>
    <div>
      <JBrowseReactInVueComponent :config="jbrowseConfig" />
    </div>
</template>
  
 <script setup>
    import { ref } from 'vue'
    import { applyReactInVue } from 'veaury'
    import JBrowseComponent from '~/components/JBrowseComponent.jsx'
    
    const JBrowseReactInVueComponent = applyReactInVue(JBrowseComponent)
    
    const jbrowseConfig = ref({
        assembly: {
            name: 'GRCh38',
            sequence: {
                type: 'ReferenceSequenceTrack',
                trackId: 'GRCh38-ReferenceSequenceTrack',
                adapter: {
                type: 'BgzipFastaAdapter',
                fastaLocation: {
                    uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
                    locationType: 'UriLocation',
                },
                faiLocation: {
                    uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz.fai',
                    locationType: 'UriLocation',
                },
                gziLocation: {
                    uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz.gzi',
                    locationType: 'UriLocation',
                },
                },
            },
            aliases: ['hg38'],
            refNameAliases: {
                adapter: {
                type: 'RefNameAliasAdapter',
                location: {
                    uri: 'http://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/GRCh38.aliases.txt',
                    locationType: 'UriLocation',
                },
                },
            },
        },
        tracks: [
        {
            type: 'FeatureTrack',
            trackId:
            'GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff',
            name: 'NCBI RefSeq Genes',
            category: ['Genes'],
            assemblyNames: ['GRCh38'],
            adapter: {
            type: 'Gff3TabixAdapter',
            gffGzLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz',
                locationType: 'UriLocation',
            },
            index: {
                location: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.tbi',
                locationType: 'UriLocation',
                },
                indexType: 'TBI',
            },
            },
            renderer: {
            type: 'SvgFeatureRenderer',
            },
        },
        {
            type: 'AlignmentsTrack',
            trackId: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome',
            name: 'NA12878 Exome',
            category: ['1000 Genomes', 'Alignments'],
            assemblyNames: ['GRCh38'],
            adapter: {
            type: 'CramAdapter',
            cramLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram',
                locationType: 'UriLocation',
            },
            craiLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram.crai',
                locationType: 'UriLocation',
            },
            sequenceAdapter: {
                type: 'BgzipFastaAdapter',
                fastaLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
                locationType: 'UriLocation',
                },
                faiLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz.fai',
                locationType: 'UriLocation',
                },
                gziLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz.gzi',
                locationType: 'UriLocation',
                },
            },
            },
        },
        {
            type: 'VariantTrack',
            trackId:
            'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf',
            name: '1000 Genomes Variant Calls',
            category: ['1000 Genomes', 'Variants'],
            assemblyNames: ['GRCh38'],
            adapter: {
            type: 'VcfTabixAdapter',
            vcfGzLocation: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/variants/ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf.gz',
                locationType: 'UriLocation',
            },
            index: {
                location: {
                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/variants/ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf.gz.tbi',
                locationType: 'UriLocation',
                },
                indexType: 'TBI',
            },
            },
        },
        ]
    })
  </script>

The config come from this tutorial (https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/)
If you know this error and how to resolve it, i would love to hear about it :)
Thanks for your time
Thomas

[cmdcolin]

hi there,
One of our users demonstrated a Vue.js integration of @jbrowse/react-linear-genome-view here https://github.com/emiliorighi/jbrows2vue-demo

i tried to see if i could figure out veaury and nuxt myself but ran into the same error ( i removed the ref wrapper and it went away, but then gave a different error)

if we do have a good example of using veaury we could try to add it to our docs

[BobLamarley]

Thanks a lot four your reply,
I also tried the version of emiliorighi with veauryand the same error occurs :

i think the problem is coming from Nuxt, i've also tried to disable SSR that Nuxt is doing but error stay's, i don't know what's going on under the hood, maybe i have to change something in my nuxt.config.js file but since the error's coming from mobx it's perturbant :)

I could go with the Jbrowse instance and the iframe integration but i don't see how it will react to my vue state's, for example we have a filter menu and having genome browser reacting to this will be complicated by doing like that i think :)

[cmdcolin]

i saw an email earlier but maybe comment was deleted. did you find a working solution?

[BobLamarley]

Hey @cmdcolin
Yes i found a working solution by using ClientOnly around my JBrowse vue component in order to not be served via SSR and removed reactive variables ref for tracks and assembly when passing it as props to the components :)
Here is the working version : https://github.com/BobLamarley/minimal-nuxt-genome-browser/

I found out you're awesome page for listing all the genomes browsers ( there's a ton of ) : https://cmdcolin.github.io/awesome-genome-visualization/
I have a little question, what is the advantage the represent a genome in the circular view like this :

And is there a plugin in JBrowse that i can add to have the linear representation and also the circular one ? :)

[cmdcolin]

excellent. the avoidance of ssr is indeed probably needed, in our nextjs examples we have "use client"; statements for example.

I have a little question, what is the advantage the represent a genome in the circular view like this :

it is probably subjective but circular has some interesting visual advantages like letting your eyes wander more freely around the plot versus linear which is very "left vs right" oriented. it's a bit hard to say.

we have @jbrowse/react-circular-genome-view but it is very basic and only draws arcs in the circle and can't draw tracks along the circumference of the circle https://jbrowse.org/storybook/cgv/main/?path=/docs/getting-started--docs

[BobLamarley]

Ok thanks a lot for all the informations, i will stay on the linear one for now, who is very complete :)
Since i'm using the embedded version and not having an instance of Jbrowse that can directly read files on the server, i will need to serve static files .bai, .fai, and .gff for my Jbrowse component, so i'm coming up with one last question:
In the doc example, the fasta file (who is more than 1gb ) is served via amazonS3 for example:

Is this file entirely downloaded on client side ? Or which mechanism behind allow to read such big file in the browser without really downloading it ?
I'm thinking about that because i'm on a very good computer but bioinformatician that will use our app maybe will not be on beast machine ^^

[cmdcolin]

Is this file entirely downloaded on client side ? Or which mechanism behind allow to read such big file in the browser without really downloading it ?

jbrowse only requests data from the "region that is currently being viewed" using HTTP range requests. the same method is used by web browser video players to only get the segment of video that you are watching. you don't need a fast server at all because actually all the computation for viewing the genome is done in the client side web browser (hence...no ssr, server side rendering). all the server does is return chunks of the files over the network for jbrowse to display

[BobLamarley]

Oh i see,
Thanks a lot for the explanation and for your time and help