How can i load my local genome feature file and perform it in the web?

[allen-zhan340]

I have my own genomes features in a json file, (shows below): I put the file in the path -- '/src/js/genomes' of Genoverse and named it 'mvp.js', and i use the follwing code, but it didn't work.

Need your help! sir!

or can someone just tell me how i can use only my own genome feature in the web?

the genoverse script code:

<script> 
new Genoverse({ 
container: '#genoverse', 
genome: 'mvp', 
plugins: ['controlPanel', ['karyotype', { showAssembly: true }], 'trackControls', 'resizer', 'focusRegion', 'fullscreen', 'tooltips', 'fileDrop'], tracks: [ 
['Scaleline', { strand: false }], 
'Scalebar', { name: 'Sequence', controller: 'Sequence', model: 'Sequence.Ensembl', view: 'Sequence', 100000: false, resizable: 'auto', }, 'Gene', { 
name: 'my_gene Features', 
data: '../public/Genoverse_files/mvp.js',    //also copied one here
resizable: 'auto',
 model: { dataRequestLimit: 5000000 }, 
setFeatureColor: function (f) { f.color = '#AAA'; } }, ] });
 </script>

the content of 'mvp.js' just like this:
[{
"logic_name": "gene",
"feature_type": "gene",
"end": 67859,
"biotype": "protein_coding",
"gene_acc": "SG0050.p01",
"protein_acc": "BAE73325.1",
"strand": 0,
"id": "flagellum-specific ATP synthase FliI (SG0050)",
"start": 66483
}, {
"logic_name": "gene",
"feature_type": "gene",
"end": 68615,
"biotype": "protein_coding",
"gene_acc": "SGP1_0042.p01",
"protein_acc": "BAE75749.1",
"strand": 0,
"id": "achromobactin biosynthetic and transport gene yhcA (SGP1_0042)",
"start": 67227
}
...........
]

[pdl]

I can see you've supplied data as a string, but it's documented to expect an array of objects.

If you want to load it from a separate file you'll need to either create a web server to serve that file in response to the query structure and follow the documentation to specify the URL structure, or write the loader yourself, and inject the result into the Genoverse call.

[allen-zhan340]

I can see you've supplied data as a string, but it's documented to expect an array of objects.

If you want to load it from a separate file you'll need to either create a web server to serve that file in response to the query structure and follow the documentation to specify the URL structure, or write the loader yourself, and inject the result into the Genoverse call.

Thanks！
The documentation says belows:

actually, it works. The param tracks is alright.
I just don't konw how to the configure the param genome, cause I can't load a local genome feature file.
it really scratch my head

maybe I should try your suggestion!
thanks anyway!

[netbofia]

Can we change the loadGenome method to load the genome from the web instead of from the file system. My main issue is that I have this bundled with webpack and to add genomes I would have to rebuild the project. Or hack the runtime to get external files.

I have several approaches, 1) fetch can allow both file system and GET/POST.

or simply get everything over get/post:

loadGenome: function () {
    if (typeof this.genome === 'string') {
      const genomeName = this.genome.toLowerCase();

      //return import(`./genomes/${genomeName}`).then((imported) => {
      return jQuery.get(`/javascripts/genomes/${genomeName}`).then((imported)=>
        this.genomeName = this.genome.replace(/\..*$/,"")); //added the replace
        this.genome     = imported;

        if (!this.genome) {
          this.die(`Unable to load genome ${genomeName}`);
        }
      });
    }
  },

The genome.js also becomes a JSON

[pdl]

to add genomes I would have to rebuild the project

Have you tried loading the genome (e.g. by making an HTTP request to your server's endpoint) prior to instantiating Genoverse, and passing the object in as part of the constructor as documented here?