This tutorial will show you how to use the GIVE Data Hub page of Public GIVE Server (or installed code base and data source) to implement a customized genome browser.
If you use the Public GIVE Server at https://www.givengine.org/, there is no prerequisite to follow this tutorial. Just start by visiting https://www.givengine.org/data-hub.html to launch GIVE Data Hub page.
NOTE: If you want to use your own GIVE instance (or any instance other than the Public GIVE Server), please substitute the host name with the host name of your GIVE instance and launch the GIVE Data Hub page on that specific instance.
GIVE Data Hub page shows all the supported reference(s) on the instance and tracks within each reference. It also has an HTML Generator Mode for generation of the embed codes necessary for a customized genome browser with selected track groups and/or tracks.
When you see the GIVE Data Hub page, use the reference selector on top right of the page to select the reference you would like to show. For example, "hg19 (human)".
After selection GIVE Data Hub page will refresh with all available tracks within the reference, grouped by their track groups.
GIVE Data Hub can be switched into an "HTML Generator Mode", in which track groups and individual tracks can be selected for the embedded browser. Click on "HTML GENERATOR MODE" to enable this mode. When the HTML Generator Mode is active, a button named "GENERATE" will appear to the right of the "HTML GENERATOR MODE" button, the borders of all track groups and tracks will become darker, and icons will appear on the left end of all track groups and tracks. Clicking or tapping on the track groups and tracks will select/deselect them for the customized browser.
Select a few track groups and/or tracks, then click "GENERATE" to generate HTML code with GIVE-HUG (HTML Universal Generator).
In GIVE-HUG, the current selected references, track groups and individual tracks will be shown (if many groups or tracks are selected, only the number of groups/tracks will be shown).
Select <chart-controller> in "Web Component to be used", then put "My customized genome browser" in "Title for the Chart Controller".
Select "Dual window" in "Display mode". Then click "UPDATE CODE". The embed code will be refreshed to reflect your changes.
The default coordinates can be specified by putting coordinate values (chrX:XXXXX-XXXXX or chrX XXXXX XXXXX) in "Default coordinates".
Or by entering the (partial) gene name and select the corresponding gene in the drop-list.
If "Dual window" display mode is chosen and one coordinate/gene has been specified, the other coordinate has to be specified as well. After specifying the default coordinates, click "UPDATE CODE" to update the embed code.
Click "COPY CODE TO CLIPBOARD" to copy the code the clipboard. You may then paste the code to your own HTML file, or to online sandboxing tools such as CodePen or JSFiddle. Click "SAVE" to save the code as a standalone HTML file. You may host this file on any http(s) server, or directly open it in your browser.