To get Jsorolla you can add to your package.json dependency:
Using JavaScript version
Using Polymer web component
To facilitate the use of the Genome Browser component, a WebComponent has been created that you can import into your html page. In this tutorial you will learn how use this component for visualizate differents tracks.
In first time, you must import the component in your page.
In the javascript part we will give value to the variables:
CELLBASE_HOST = "bioinfo.hpc.cam.ac.uk/cellbase";
CELLBASE_VERSION = "v4";
let cellBaseClientConfig = new CellBaseClientConfig(CELLBASE_HOST, CELLBASE_VERSION);
this.cellbaseClient = new CellBaseClient(cellBaseClientConfig);
this.region = new Region({chromosome: "11", start: 68177378, end: 68177510});
this.tracks ={sequence: {type: "sequence"}, gene: {type: "gene"}};
We have created a cellbase client that will connect to the Host, "bioinfo.hpc.cam.ac.uk/cellbase".
If we do not want to change the installation of cellbase, it is not necessary that we define the host and the version, but we initialize a client.
With the parameter "region", we ask that the display is at 11: 68177378-68177510. It's possible to not see these positions in the display where the painted region is shown,
but you wil see a window frame containing the region. This is because the genome browser adjusts the display to optimize the cache.
Finally, the last param is "tracks", in this case we want see the track "sequence" and "gene". We can define other types of tracks as follows:
Individual Variant Track (for example SNP): {trackname:{type:"variant", config:{}}}.
Family Variant Track: {trackname:{type:"variant", config:{samples:"sample1","sample2"}}}.