cmdcolin/jbrowse-gwas.html

## jbrowse-gwas.html
<html>
<head>
<title>JBrowse render GWAS</title>

<link rel="stylesheet" type="text/css" href="css/genome.css">
<script type="text/javascript" src="src/dojo/dojo.js" data-dojo-config="async: 1, baseUrl: './src'"></script>
<script type="text/javascript" src="src/JBrowse/init.js"></script>
<script>

require({
            "packages": [
                {
                    "name": "GWASViewer",
                    "location": "../plugins/GWASViewer/js"
                }
            ]
        }, [
            'dojo/_base/array',
            'dojo/dom',
            'dojo/dom-construct',
            'dojo/io-query',
            'dojo/request',
            'dijit/Destroyable',
            'JBrowse/Browser',
            'JBrowse/Store/SeqFeature/BEDTabix',
            'GWASViewer/View/Track/VariantPlotter',
            'JBrowse/View/GranularRectLayout'
        ],
        function (
            array,
            dom,
            domConstruct,
            ioQuery,
            request,
            Destroyable,
            Browser,
            BEDTabix,
            VariantPlotter,
            Layout
        ) {

    var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
    var dataRoot = queryParams.data || "data";
    var width = queryParams.width || 1800;

    var file = queryParams.urlTemplate || "GIANT_WHRadjBMI_Heid2010.bed.gz";
    var trackConfig = {
        baseUrl: dataRoot,
        urlTemplate: dataRoot+"/"+file,
        storeClass: "JBrowse/Store/SeqFeatre/BEDTabix",
        type: "JBrowse/View/Track/CanvasFeatures",
        useYAxis: false,
        chunkSizeLimit: 10000000,
        label: "BMI",
        heightScaler: 5,
        maxHeight: 400,
        style: {
            height: 2
        },
        maxFeatureScreenDensity: 6000,
        displayMode: "collapsed",
        scoreType: "maxScore"
    };

    var browser = new Browser({ unitTestMode: true, dataRoot: dataRoot });
    browser.view = {
        minVisible: function() { return 0; },
        maxVisible: function() { return 100000000; }
    };

    var store = new BEDTabix({
        browser: browser,
        urlTemplate: trackConfig.urlTemplate,
        config: trackConfig,
        chunkSizeLimit: trackConfig.chunkSizeLimit
    });
    dom.byId('label').innerHTML = file;

    var renderBlock = function(chrom, len, left, container, finishCallback) {
        store.refSeq = chrom;
        var node = domConstruct.create('div', {
            id: 'display-'+chrom.name,
            style: {
                position: "absolute",
                width: len+'px',
                left: left+'px',
                height: trackConfig.maxHeight+'px',
                border: "1px solid black"
            }
        }, container);
        var label = domConstruct.create('div', {
            id: 'display-'+chrom.name+'-label',
            style: {
                position: "absolute",
                width: len+'px',
                left: left+'px',
                margin: '2px'
            },
            innerHTML: '<a href="/jbrowse/?data='+dataRoot+'&loc='+chrom.name+'">'+chrom.name+'</a>'
        }, container);
        var block = new Destroyable();
        block.featureLayout= new Layout(0, chrom.length);
        block.featureNodes= [];
        block.startBase = 0;
        block.endBase = chrom.length;
        block.scale = len/chrom.length;
        block.domNode = node;
        block.bpToX = function(x) { return len*x/chrom.length; }

        var track = new VariantPlotter({
            config: trackConfig,
            browser: browser,
            store: store
        });
        track.blocks = [block];
        track.blockHeights = [100];
        track.refSeq = { name: name };
        track.label = dom.byId('label') || {};
        track.heightUpdateCallback = function() { "update height" };
        track.filterFeature = function() { return true; };
        track.fillBlock({
            blockIndex: 0,
            block: block,
            scale: block.scale,
            leftBase: 0,
            rightBase: length,
            finishCallback: finishCallback
        });
    }

    request( browser.config.dataRoot+'/seq/refSeqs.json',{ handleAs: 'json' }).then(function(chroms) {
        chroms.sort(function(a, b) { return b.length - a.length });
        var totalbase = 0;
        var leftpos = 0;
        chroms = chroms.slice(0,24);
        array.forEach(chroms, function(chrom) { totalbase += chrom.length; });

        var renderNextBlock = function(index) {
            if(index>=chroms.length) return;
            var len = width/totalbase * chroms[index].length;
            renderBlock(chroms[index], len, leftpos, dom.byId('container'), function() { leftpos+=len;renderNextBlock(index+1); });
        };
        renderNextBlock(0);
    });
});


</script>

</head>
<body style="margin: 30px">
  <div id="label"></div>
  <div id="container"></div>
</body>
</html>
	<html>
	<head>
	<title>JBrowse render GWAS</title>

	<link rel="stylesheet" type="text/css" href="css/genome.css">
	<script type="text/javascript" src="src/dojo/dojo.js" data-dojo-config="async: 1, baseUrl: './src'"></script>
	<script type="text/javascript" src="src/JBrowse/init.js"></script>
	<script>

	require({
	"packages": [
	{
	"name": "GWASViewer",
	"location": "../plugins/GWASViewer/js"
	}
	]
	}, [
	'dojo/_base/array',
	'dojo/dom',
	'dojo/dom-construct',
	'dojo/io-query',
	'dojo/request',
	'dijit/Destroyable',
	'JBrowse/Browser',
	'JBrowse/Store/SeqFeature/BEDTabix',
	'GWASViewer/View/Track/VariantPlotter',
	'JBrowse/View/GranularRectLayout'
	],
	function (
	array,
	dom,
	domConstruct,
	ioQuery,
	request,
	Destroyable,
	Browser,
	BEDTabix,
	VariantPlotter,
	Layout
	) {

	var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
	var dataRoot = queryParams.data \|\| "data";
	var width = queryParams.width \|\| 1800;

	var file = queryParams.urlTemplate \|\| "GIANT_WHRadjBMI_Heid2010.bed.gz";
	var trackConfig = {
	baseUrl: dataRoot,
	urlTemplate: dataRoot+"/"+file,
	storeClass: "JBrowse/Store/SeqFeatre/BEDTabix",
	type: "JBrowse/View/Track/CanvasFeatures",
	useYAxis: false,
	chunkSizeLimit: 10000000,
	label: "BMI",
	heightScaler: 5,
	maxHeight: 400,
	style: {
	height: 2
	},
	maxFeatureScreenDensity: 6000,
	displayMode: "collapsed",
	scoreType: "maxScore"
	};

	var browser = new Browser({ unitTestMode: true, dataRoot: dataRoot });
	browser.view = {
	minVisible: function() { return 0; },
	maxVisible: function() { return 100000000; }
	};

	var store = new BEDTabix({
	browser: browser,
	urlTemplate: trackConfig.urlTemplate,
	config: trackConfig,
	chunkSizeLimit: trackConfig.chunkSizeLimit
	});
	dom.byId('label').innerHTML = file;

	var renderBlock = function(chrom, len, left, container, finishCallback) {
	store.refSeq = chrom;
	var node = domConstruct.create('div', {
	id: 'display-'+chrom.name,
	style: {
	position: "absolute",
	width: len+'px',
	left: left+'px',
	height: trackConfig.maxHeight+'px',
	border: "1px solid black"
	}
	}, container);
	var label = domConstruct.create('div', {
	id: 'display-'+chrom.name+'-label',
	style: {
	position: "absolute",
	width: len+'px',
	left: left+'px',
	margin: '2px'
	},
	innerHTML: '<a href="/jbrowse/?data='+dataRoot+'&loc='+chrom.name+'">'+chrom.name+'</a>'
	}, container);
	var block = new Destroyable();
	block.featureLayout= new Layout(0, chrom.length);
	block.featureNodes= [];
	block.startBase = 0;
	block.endBase = chrom.length;
	block.scale = len/chrom.length;
	block.domNode = node;
	block.bpToX = function(x) { return len*x/chrom.length; }

	var track = new VariantPlotter({
	config: trackConfig,
	browser: browser,
	store: store
	});
	track.blocks = [block];
	track.blockHeights = [100];
	track.refSeq = { name: name };
	track.label = dom.byId('label') \|\| {};
	track.heightUpdateCallback = function() { "update height" };
	track.filterFeature = function() { return true; };
	track.fillBlock({
	blockIndex: 0,
	block: block,
	scale: block.scale,
	leftBase: 0,
	rightBase: length,
	finishCallback: finishCallback
	});
	}

	request( browser.config.dataRoot+'/seq/refSeqs.json',{ handleAs: 'json' }).then(function(chroms) {
	chroms.sort(function(a, b) { return b.length - a.length });
	var totalbase = 0;
	var leftpos = 0;
	chroms = chroms.slice(0,24);
	array.forEach(chroms, function(chrom) { totalbase += chrom.length; });

	var renderNextBlock = function(index) {
	if(index>=chroms.length) return;
	var len = width/totalbase * chroms[index].length;
	renderBlock(chroms[index], len, leftpos, dom.byId('container'), function() { leftpos+=len;renderNextBlock(index+1); });
	};
	renderNextBlock(0);
	});
	});



	</script>

	</head>
	<body style="margin: 30px">
	<div id="label"></div>
	<div id="container"></div>
	</body>
	</html>