DECIPHER-genomics / Genoverse

HTML5 scrollable genome browser
https://genoverse.org/
Other
106 stars 44 forks source link

Vue2 templates #99

Open thedam opened 2 weeks ago

thedam commented 2 weeks ago

Hey, I'd like to run Genoverese with Vue2 (Django backend) I have such base code:

<template>
    <div class="container">
        <br> <br>
        <div ref="genoverseContainer" style="width: 800px; height: 400px;">
        </div>
    </div>
</template>

<script>
import Genoverse from 'genoverse';

export default {
    name: 'GenoverseComponent',
    mounted() {

        this.genoverse = new Genoverse({
            container: this.$refs.genoverseContainer,
            genome: 'grch37',
            chr: 1,
            start: 1,
            end: 1000000,
            // url=https://rest.ensembl.org/sequence/region/human/1:1-2000000?content-type=application/json
            plugins: ['controlPanel', 'trackControls'],
            tracks: [
                Genoverse.Track.Scalebar,
                Genoverse.Track.Gene
            ]

        });
    },
    beforeDestroy() {
        if (this.genoverse) {
            this.genoverse.destroy();
        }
    }
};
</script>

If I hit "http://localhost:8080/dam37/#/genoverse" in the browser, nothing appears. But when I modify somtething in .js source code (for example if I add space button somewhere and save it, then tracks appears in the browser. Looks like the displaying finishes, before Genoverse is fully loaded. How to overcome it? I've tried withthis.$nextTick( etc, but nothing works.

However, when I run code with such Tracks:

            tracks: [
                // Genoverse.Track.Scalebar,
                // Genoverse.Track.Gene,
                Genoverse.Track.extend({
                    name: 'test',
                    height: 100,
                    featureHeight: 10,
                    url: "http://localhost:8080/api/sequence/region/human/1:1-2000000?content-type=application/json",
                    featureColor: '#1f77b4',
                    bump: true
                }),
            ],

Then in the browser after hitting url, immediately apperas the Genoverse track (with GET http://localhost:8080/api/sequence/region/human/1:1-2000000?content-type=application/json 404 (Not Found), but this is another problem)

How to properly configure it in Vue?

thedam commented 2 weeks ago

ok, I had to add: Genoverse.configure({}); beforenew Genoverse