VQI_GenomeBrowser.js

function VQI_GenomeBrowser(id) {
    var divId = id;

    var width = 1000;

    var height = 100;

    var margin = 50;

    var panExtent = [0,width];

    var trackList = [];
    var trackSelections = []; 

    var genomeData = [];

    var chromosomes = [];
    var thisObj = this;
    var chrom_curr = "chr1";
    var indexArray = {chr: 0, start: 1, end: 2, name: 3, type: 3, score: 4, strand: 5, options: 6, exonStarts: 9, exonEnds: 10};

//    $("#" + id).append("<div style='border : 1px solid; display : inline-block'>CPG:<input type='file' id='cpg'/>Shore:<input type='file' id='shore'/>Shelve:<input type='file' id='shelve'/><input id='submit' type='submit' /></div>");

//    d3.select("#" + id).append("div").text("Chromosome: ")
//    var select = d3.select("#" + id)
//            .append("div")
//            .append("select")
//            .on("change", function (d) {
//                graph(select.property("value"));
//            });
//
//    d3.select("#" + id).append("div").text("Start: ")
//    var minNumber = d3.select("#" + id)
//            .append("input")
//            .attr("type", "number")
//            .property("value", 0);
//
//    d3.select("#" + id).append("div").text("End: ")
//    var maxNumber = d3.select("#" + id)
//            .append("input")
//            .attr("type", "number")
//            .property("value", 0);
//    var graphButton = d3.select("#" + id)
//            .append("input")
//            .attr("type", "button")
//            .attr("value", "Graph")
//            .on("click", function () {
//                graph(select.property("value"), minNumber.property("value"), maxNumber.property("value"))
//            });

    var navigateToRegion = function () {
        /*var chrom = $("#" + divId + " #chrom").val();
        var chrom_start = $("#" + divId + " #chrom_start").val();
        var chrom_end = $("#" + divId + " #chrom_end").val();*/
        var navigate = $("#" + divId + " #navigate").val();
        navigate = navigate.split(/[:-]/);
        var chrom = navigate[0].trim();
        var chrom_start = Number(navigate[1].trim());
        var chrom_end = Number(navigate[2].trim());
        graph(chrom, chrom_start, chrom_end);
    };
    this.makeNavigationForm = function () {
        /*var chromSelectBox = "<select name='chrom' id='chrom'></select>";
        var chromStartBox = "<input type='text' name='chrom_start' id='chrom_start'>";
        var chromEndBox = "<input type='text' name='chrom_end' id='chrom_end'>";*/
        var navigateBox = "<input type='text' name='navigate' id='navigate'>";
        var navigateButton = "<input type='button' id='navigatebutton' value='Go To'>";
        var form = "<form id='navigation_form'>" + navigateBox + navigateButton + "</form>";
        $("#" + divId).append(form);
        $("#" + divId + " #navigatebutton").on("click", navigateToRegion.bind(this));
    };
    this.makeNavigationForm();

    var browseToGene = function () {
        var geneName = $("#" + divId + " #geneName").val();

        var genes = [geneName];
        dataToPost = JSON.stringify(genes);

        $.ajax({
            url: vqi_url + 'serverside/web/VQService.php?service=gene-info-for-gene-symbol',
            type: 'POST',
            dataType: "json",
            data: {
                "genes": dataToPost
            },
            async: false
        }).success(function (data) {
            var thisGene = data.slice(1)[0];
            var gene_chrom = thisGene[2];
            var gene_start = thisGene[3];
            var gene_end = thisGene[4];
            thisObj.navigate(gene_chrom, gene_start, gene_end);
//            objVQIResult.parseSNPAndSNP(data, true);
        }).error(function (req, status, error) {
            $("body").append(status + ": " + error);
        });

    };

    this.makeFormForGeneSearch = function () {
        var geneText = "Gene: <input type='text' name='geneName' id='geneName'>";
        var geneSearchButton = "<input type='button' id='genesearchbutton' value='Search'>";
        var form = "<form id='colocalization_form'>" + geneText + geneSearchButton + "</form>";
        $("#" + divId).append(form);
        $("#" + divId + " #genesearchbutton").on("click", browseToGene.bind(this));
    };
    this.makeFormForGeneSearch();

    var colocalize = function () {
        var track1Name = $("#" + divId + " #track1").val();
        var track2Name = $("#" + divId + " #track2").val();
        var coloc_dist = $("#" + divId + " #coloc_dist").val();

        var data1 = this.getTrackByName(track1Name);
        var data2 = this.getTrackByName(track2Name);


        var dataToPost1 = [], dataToPost2 = [];
        dataToPost1 = JSON.stringify(data1);
        dataToPost2 = JSON.stringify(data2);

        $.ajax({
            url: vqi_url + 'serverside/web/VQService.php?service=coloc-bed-and-bed',
            type: 'POST',
            dataType: "json",
            data: {
                "bed1": dataToPost1,
                "bed2": dataToPost2,
                "coloc_dist": coloc_dist
            },
            async: false
        }).success(function (data) {
            var data1 = [];
            var data2 = []
            data = data.slice(1);
            for (var i in data) {
                data1.push(data[i].slice(0, 6));
                data2.push(data[i].slice(6));
            }
            thisObj.addTrack(data1);
            thisObj.addTrack(data2);

//            objVQIResult.parseSNPAndSNP(data, true);
        }).error(function (req, status, error) {
            $("body").append(status + ": " + error);
        });

    };


    this.makeFormForColocalization = function () {
        var track1Select = "Track1: <select name='track1' id='track1'>";
        for (var i in trackList) {
            var thisTrack = trackList[i];
            var text = thisTrack['name'];
            var value = thisTrack['name'];
            track1Select += "<option value='" + value + "'>" + text + "</option>";
        }
        track1Select += "</select>";

        var track2Select = " Track2: <select name='track2' id='track2'>";
        for (var i in trackList) {
            var thisTrack = trackList[i];
            var text = thisTrack['name'];
            var value = thisTrack['name'];
            track2Select += "<option value='" + value + "'>" + text + "</option>";
        }
        track2Select += "</select>";

        var distanceTextBox = "<input type=text name='coloc_dist' id='coloc_dist' value='0'>";

        var colocalizeButton = "<input type='button' id='colocalize' value='colocalize'>";
        var form = "<form id='colocalization_form'>" + track1Select + track2Select + distanceTextBox + colocalizeButton + "</form>";
        $("#" + divId).append(form);
        $("#" + divId + " #colocalize").on("click", colocalize.bind(this));
    };
    this.makeFormForColocalization();

    var self = this;



    this.svg = d3.select("#" + id)
            .append("svg")
            .attr("width", width + 2 * margin)
            .attr("height", height + 2 * margin)
            .style("border", "1px solid black");

    var svg = this.svg;

    //set up scales and axis

    var xScale = d3.scale.linear();

    var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(10);

    //x-axis
    var xAxisSelection = svg.append("g")
            .call(xAxis)
            .attr("class", "axis")
            .attr("transform", "translate(0," + (0 + margin) + ")");
//            .attr("transform", "translate(0," + (height + margin) + ")");

    //Just a line
    svg.append("line")
            .attr("x1", margin)
            .attr("y1", height / 2 + margin + 20)
            .attr("x2", width + margin)
            .attr("y2", height / 2 + margin + 20)
            .style("stroke", "blue");

    var zoom = d3.behavior.zoom();

    //set up tool tips

    /*var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-20, 0])
            .html(function (d) {
//                if(/)
//                if
                var strand = "";
                if (d.length > indexArray.strand) {
                    strand = " (" + d[indexArray.strand] + ")";
                }
                return "<span style='color:white; font-size:10pt; display:block; text-align:center'>" + d[indexArray.name] + strand + "</span>"
                        + "<span style='color:white; font-size:10pt; display:block'>(" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")" + "</span>";
            });

    svg.call(tip);

    d3.selectAll(".d3-tip").style({
        "line-height": "1",
        "font-weight": "bold",
        "padding": "12px",
        "background": "rgba(0, 0, 0, 0.8)",
        "color": "#fff",
        "border-radius": "2px"
    });*/

    var zoomed = function () {


        var t = zoom.translate();
        //console.log(t[0]);
        zoom.translate([panLimit(), 0]);

        svg.selectAll("rect")
                .attr("width", function (d) {
                    return xScale(d[indexArray.end]) - xScale(d[indexArray.start])
                })
                .attr("x", function (d) {
                    return xScale(d[indexArray.start])
                })

        for (var i in trackSelections) {
            trackSelections[i]
                .attr("x1", function (d) {
                    return xScale(d[indexArray.start]);
                })
                .attr("x2", function (d) {
                    return xScale(d[indexArray.end]);
                })
        }

       // minNumber.property("value", xScale.domain()[0]);
        //maxNumber.property("value", xScale.domain()[1]);
        xAxisSelection.call(xAxis);

        d3.selectAll(".axis path, .axis line").style({
            "fill": "none",
            "stroke": "black",
            "shape-rendering": "crispEdges"});

        d3.selectAll(".axis text").style({
            "font-family": "sans-serif",
            "font-size": "11px"});
    };

    var panLimit = function() {

        var divisor = (width) / ((xScale.domain()[1]-xScale.domain()[0])*zoom.scale());
        var diff = margin - zoom.scale()* margin;
         minX = -(((xScale.domain()[0]-xScale.domain()[1])*zoom.scale())+(panExtent[1]-(panExtent[1]-(width/divisor)))) + diff,
         maxX = -(((xScale.domain()[0]-xScale.domain()[1]))+(panExtent[1]-panExtent[0]))*divisor*zoom.scale() + diff;

        tx = xScale.domain()[0] < panExtent[0] ? 
                minX : 
                xScale.domain()[1] > panExtent[1] ? 
                    maxX : 
                    zoom.translate()[0];

        console.log(tx);
        return tx;

    }

    this.navigate = function (chrom, chrom_start, chrom_end) {
        graph(chrom, chrom_start, chrom_end);
    };

    var setBounds = function(min, max){
        var xMin = Number(min) > panExtent[0] ? Number(min) : panExtent[0];
        var xMax = Number(max) < panExtent[1] ? Number(max) : panExtent[1];

        xScale.domain([panExtent[0], panExtent[1]])
                .range([margin, width + margin]);

        zoom.scaleExtent([1,(panExtent[1]-panExtent[0])/50]);

        zoom.x(xScale).on("zoom", zoomed);

        svg.call(zoom);

        var scale = (panExtent[1]-panExtent[0])/(xMax - xMin);

        zoom.scale(scale);

        var divisor = (width) / ((xScale.domain()[1]-xScale.domain()[0])*scale);
        var diff = margin - scale* margin;
        var minX = -(((xScale.domain()[0]-xScale.domain()[1])*scale)+(panExtent[1]-(panExtent[1]-(width/divisor)))) + diff;
        var maxX = -(((xScale.domain()[0]-xScale.domain()[1]))+(panExtent[1]-panExtent[0]))*divisor*scale + diff;

        var midScale = d3.scale.linear()
                        .domain([panExtent[0], panExtent[1]])
                        .range([minX,maxX]);

        //TODO: Need to figure out actual translation
        var zoomWidth = midScale(xMin);

        /*console.log(diff);
        console.log(zoomWidth);*/

        zoom.translate([zoomWidth,0])
            .scale(scale);

        zoomed();

       // minNumber.property("value", xMin);
       // maxNumber.property("value", xMax);
    }

    var graph = function (chromosome, min, max) {
        var indexList = indexArray;
        //Graphs the current chromosome. If min and max are specified, graph only in that range.
        //Otherwise, graphs the whole chromosome
        var self = this;

        var currentData;

        //Populates drop down list with different chromosomes
//        select.selectAll("option")
//                .data(chromosomes)
//                .enter()
//                .append("option")
//                .attr("value", function (d) {
//                    return d;
//                })
//                .text(function (d) {
//                    return d;
//                });

        d3.select("#chrom").selectAll("option")
                .data(chromosomes)
                .enter()
                .append("option")
                .attr("value", function (d) {
                    return d;
                })
                .text(function (d) {
                    return d;
                });
        chrom_curr = chromosome;

        currentData = genomeData.filter(function (d) {
            return d[indexList.chr] == chromosome
        });

        panExtent[0] = d3.min(currentData, function (d) {
            return d[indexList.start]
        });
        panExtent[1] = d3.max(currentData, function (d) {
            return d[indexList.end]
        });

        //Gets relevant data and calculates min/max if needed
       if (min == null || max == null) {
            
            
            d3.select("#chrom_start").property("value", panExtent[0]);
            d3.select("#chrom_end").property("value", panExtent[1]);
            setBounds(panExtent[0],panExtent[1]);
        }
        else {
           /* currentData = genomeData.filter(function (d) {
                return d[indexList.chr] == chromosome;// && d[indexList.start] >= min && d[indexList.end] <= max
            });*/
            setBounds(Number(min),Number(max));
        }

        svg.selectAll("rect")
                .data(currentData)
                .exit()
                .remove();

        svg.selectAll("rect")
                .data(currentData)
                .enter()
                .append("rect");

        svg.selectAll("rect")
                .style("fill-opacity", ".4")
                .style("stroke", function (d) {
                    var type = d[indexList.type];
                    return type == "cpg" ? "red" : type == "shore" ? "green" : "yellow"
                })
                .style("fill", function (d) {
                    var type = d[indexList.type];
                    return type == "cpg" ? "red" : type == "shore" ? "green" : "yellow"
                })
                .attr("height", function (d) {
                    var type = d[indexList.type];
                    return type == "cpg" ? 40 : type == "shore" ? 20 : 15
                })
                .attr("width", function (d) {
                    return xScale(d[indexList.end]) - xScale(d[indexList.start])
                })
                .attr("x", function (d) {
                    return xScale(d[indexList.start])
                })
                .attr("y", function (d) {
                    var type = d[indexList.type];
                    var offset = type == "cpg" ? 0 : type == "shore" ? 10 : 12.5;
                    return height / 2 + margin + offset
                })
                //.on('mouseover', tip.show)
                //.on('mouseout', tip.hide);

        for (var i in trackList) {
            addOneTrack(trackList[i], trackList[i]['name'], i);
        }
    }

    var addOneTrack = function (data, name, i) {

        i = Number(i);
        var trackIndex;
        if (!isNaN(i)) {
            trackIndex = i;
        } else {
            trackIndex = trackList.length;
        }


        var index = indexArray;
        var thisData = data.filter(function (d) {
            return (d[index.chr] === chrom_curr);
        });

        var trackCount = trackIndex + 1;
        //name of track
        name = name || "track-" + (trackIndex + 1);

        var ySpace = 50 * trackCount;
        var fHeight = 10;
        svg.attr("height", height + 2 * margin + ySpace);
        var thisY = height / 2 + margin + 20 + ySpace;

        if (!i) {
            /*svg.append("line")
                    .attr("x1", margin)
                    .attr("y1", height / 2 + margin + 20 + ySpace)
                    .attr("x2", width + margin)
                    .attr("y2", height / 2 + margin + 20 + ySpace)
                    .style("stroke-width", 1)
                    .style("stroke", "black");*/
            svg.selectAll("text")
                    .data([name], function (d) {return d;})
                    .enter()
                    .append("text")
                    .attr("x", 0)
                    .attr("y", thisY - 10)
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "12px")
                    .attr("fill", "red")
                    .text(name);
        }
//        test.addTrack({start:20000000, end:20000100})
        var tracks = svg.selectAll("line")
                .data(thisData)
                .enter()
                .append("line");
        var lineAttributes = tracks
                .attr("x1", function (d) {
                    return xScale(d[index.start]);
                })
                .attr("y1", function (d) {

                    return height / 2 + margin + 20 + ySpace;
                })
                .attr("x2", function (d) {
                    return xScale(d[index.end]);
                })
                .attr("y2", function (d) {
//                    return 50;
                    return height / 2 + margin + 20 + ySpace;
                })
                .style("stroke", "black")
                .style("stroke-width", "2px")

        trackSelections.push(tracks); 

        var exons = [];
        $.each(thisData, function (index, value) {

            var exonStarts = value[indexArray.exonStarts].slice(1,value[indexArray.exonStarts].length - 2).split(",");
            var exonEnds = value[indexArray.exonEnds].slice(1,value[indexArray.exonEnds].length - 2).split(",");

            for(var i = 0; i < exonStarts.length; i++)
            {
                var exon = exonStarts.slice(0);
                exon[indexArray.name] = value[indexArray.name] + " Exon " + (i+1) + "/" + exonStarts.length;
                exon[indexArray.start] = parseInt(exonStarts[i]);
                exon[indexArray.end] = parseInt(exonEnds[i]);
                exons.push(exon);      
            }
        });

        var exonRect = svg.selectAll("tracks")
                .data(exons, function (d) {return d;})
                .enter()
                .append("rect");
        var exonRectAttributes = exonRect
                .attr("x", function (d) {
                    return xScale(d[index.start]);
                })
                .attr("y", function (d) {

                    return thisY - fHeight / 2;
                })
                .attr("height", function (d) {
                    return fHeight;
                })
                .attr("width", function (d) {
//                    return 50;
                    return xScale(d[index.end]) - xScale(d[index.start]);
                })
                .style("fill-opacity", ".8")
                .style("stroke", "gray")
                .style("fill", "gray");

                //.style("fill", "green")
                //.on('mouseover', tip.show)
                //.on('mouseout', tip.hide);

        $('svg rect').tipsy({
            gravity: 'n',
            html: true,
            title: function () {
                var d = this.__data__;
                var name = (d.length > indexArray.name) ? d[indexArray.name] : '';
                return name + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
            }
        });
        $('svg line').tipsy({
            gravity: 'n',
            html: true,
            title: function () {
                var d = this.__data__;
                var name = (d.length > indexArray.name) ? d[indexArray.name] : '';
                return name + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
            }
        });

        data['name'] = name;

        return data;


    }
    this.addTrack = function (data, name) {
//        data['name'] = name;
        data = addOneTrack(data, name);

        trackList.push(data);
        updateAllTracksSelectBoxes();
    }

    this.addTrackFile = function (dataFile, name, header) {
        $.get(dataFile, function (data) {
            var dataRows = thisObj.parseTrackFile(data, header);
            thisObj.addTrack(dataRows, name);
        });
    }

    this.setData = function (data) {
        genomeData = data;
        graph(chromosomes[0]);
    }

    this.getData = function () {
        return genomeData;
    }

    var submitFile = function () {
        genomeData = [];
        chromosomes = [];
        var file_dir = "./saved-data/";
        file_dir = "../../../saved-data/";
        var cpg = file_dir + "./CpG_site_hg19.txt";
        var shoer = file_dir + "./shoer_hg19.txt";
        var shelve = file_dir + "./shelve_hg19.txt";

        //Will read the 3 files and place all data into genomeData
        //as objects with attributes 'chromosome', 'start', 'end', 'type'

        $.get(cpg, function (data) {
            var cpgData = data.trim().split("\n");
            $.each(cpgData, function (index, value) {
                cpgData[index] = cpgData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });

            //get all unique chromosomes
            var currentChromosome = "";
            $.each(cpgData, function (index, value) {
                if (value[0] != currentChromosome)
                {
                    chromosomes.push(value[0]);
                    currentChromosome = value[0];
                }
            });


            cpgData = cpgData.map(function (data) {
//                return {"chromosome": data[0], "start": data[1], "end": data[2], "type": "cpg"}
                return [data[0], data[1], data[2], "cpg"];

            });
            genomeData = genomeData.concat(cpgData);
        });

        $.get(shoer, function (data) {
            var tempShoreData = data.trim().split("\n");
            $.each(tempShoreData, function (index, value) {
                tempShoreData[index] = tempShoreData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });
            var shoreData = [];
            $.each(tempShoreData, function (index, value) {
//                shoreData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shore"});
                shoreData.push([value[0], value[1], value[2], "shore"]);
                shoreData.push([value[0], value[3], value[4], "shore"]);
//                shoreData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shore"});
            });
            genomeData = genomeData.concat(shoreData);
        });

        $.get(shelve, function (data) {
            var tempShelveData = data.trim().split("\n");
            $.each(tempShelveData, function (index, value) {
                tempShelveData[index] = tempShelveData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });
            var shelveData = [];
            $.each(tempShelveData, function (index, value) {
                shelveData.push([value[0], value[1], value[2], "shelve"]);
//                shelveData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shelve"});
                shelveData.push([value[0], value[3], value[4], "shelve"]);
//                shelveData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shelve"});
            });
            genomeData = genomeData.concat(shelveData);
            graph(chromosomes[0]);
        });
    }

    d3.select("#" + id + " #submit").on("click", submitFile.bind(this));
//    submitFile();

    this.loadCPGFiles = function (cpg, shoer, shelf) {
        genomeData = [];
        chromosomes = [];
        //Will read the 3 files and place all data into genomeData
        //as objects with attributes 'chromosome', 'start', 'end', 'type'

        $.get(cpg, function (data) {
            var cpgData = data.trim().split("\n");
            $.each(cpgData, function (index, value) {
                cpgData[index] = cpgData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });

            //get all unique chromosomes
            var currentChromosome = "";
            $.each(cpgData, function (index, value) {
                if (value[0] != currentChromosome)
                {
                    chromosomes.push(value[0]);
                    currentChromosome = value[0];
                }
            });


            cpgData = cpgData.map(function (data) {
                return [data[0], data[1], data[2], "cpg"];

            });
            genomeData = genomeData.concat(cpgData);
        });

        $.get(shoer, function (data) {
            var tempShoreData = data.trim().split("\n");
            $.each(tempShoreData, function (index, value) {
                tempShoreData[index] = tempShoreData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });
            var shoreData = [];
            $.each(tempShoreData, function (index, value) {
//                shoreData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shore"});
                shoreData.push([value[0], value[1], value[2], "shore"]);
                shoreData.push([value[0], value[3], value[4], "shore"]);
//                shoreData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shore"});
            });
            genomeData = genomeData.concat(shoreData);
        });

        $.get(shelf, function (data) {
            var tempShelveData = data.trim().split("\n");
            $.each(tempShelveData, function (index, value) {
                tempShelveData[index] = tempShelveData[index].trim().split("\t").map(function (item) {
                    return isNaN(Number(item)) ? item : Number(item);
                });
            });
            var shelveData = [];
            $.each(tempShelveData, function (index, value) {
                shelveData.push([value[0], value[1], value[2], "shelve"]);
//                shelveData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shelve"});
                shelveData.push([value[0], value[3], value[4], "shelve"]);
//                shelveData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shelve"});
            });
            genomeData = genomeData.concat(shelveData);
            graph(chromosomes[0]);
        });
    }

    this.parseTrackFile = function (data, header) {
        var delimeter = "\t";
        var thisData = new Array();
        var txtContent = data.split(/\r\n|\r|\n/g);
        var startRow = 0;
        if (header) {
            startRow = 1;
        }
        for (var i = startRow; i < txtContent.length; i++) {
            var thisRow = txtContent[i].split(delimeter);
            var thisObject = {};
            thisObject = thisRow;
            if (thisRow[0].indexOf("##") === 0) {
                continue;
            }
            thisData.push(thisObject);
        }
        return thisData;
    };


//    this.makeFormForColocalization = function () {
//        var track1Select = "<br>track1 <select name='track1' id='track1'>";
//        for (var i in trackList) {
//            var thisTrack = trackList[i];
//            var text = thisTrack['name'];
//            var value = thisTrack['name'];
//            track1Select += "<option value='" + value + "'>" + text + "</option>";
//        }
//        track1Select += "</select>";
//
//        var track2Select = "<br>track2 <select name='track2' id='track2'>";
//        for (var i in trackList) {
//            var thisTrack = trackList[i];
//            var text = thisTrack['name'];
//            var value = thisTrack['name'];
//            track2Select += "<option value='" + value + "'>" + text + "</option>";
//        }
//        track2Select += "</select>";
//
//
//        var colocalizeButton = "<br><input type='button' id='colocalize' value='colocalize'>";
//        var form = "<form id='colocalization_form'>" + track1Select + track2Select + colocalizeButton + "</form>";
//        $("#" + divId).append(form);
//        $("#" + divId + " #colocalize").on("click", colocalize.bind(this));
//    };
//
//    var colocalize = function () {
//        var track1Name = $("#" + divId + " #track1").val();
//        var track2Name = $("#" + divId + " #track2").val();
//
//        var data1 = this.getTrackByName(track1Name);
//        var data2 = this.getTrackByName(track2Name);
//
//        var dataToPost1 = [], dataToPost2 = [];
//        dataToPost1 = JSON.stringify(data1);
//        dataToPost2 = JSON.stringify(data2);
//
//        $.ajax({
//            url: vqi_url + 'serverside/web/VQService.php?service=coloc-bed-and-bed',
//            type: 'POST',
//            dataType: "json",
//            data: {
//                "bed1": dataToPost1,
//                "bed2": dataToPost2
//            },
//            async: false
//        }).success(function (data) {
//            var data1 = [];
//            var data2 = []
//            data = data.slice(1);
//            for (var i in data) {
//                data1.push(data[i].slice(0, 3));
//                data2.push(data[i].slice(3));
//            }
//            thisObj.addTrack(data1);
//            thisObj.addTrack(data2);
//
////            objVQIResult.parseSNPAndSNP(data, true);
//        }).error(function (req, status, error) {
//            $("body").append(status + ": " + error);
//        });
//
//    };

    this.getTrackByName = function (name) {
        for (var i in trackList) {
            var thisTrack = trackList[i];
            if (thisTrack['name'] === name) {
                return thisTrack;
            }
        }
    };

    var updateAllTracksSelectBoxes = function () {
        var track1Select = $("#" + divId + " #track1");
        updateSelectBoxWithTracks(track1Select.get(0));
        var track2Select = $("#" + divId + " #track2");
        updateSelectBoxWithTracks(track2Select.get(0));
    }
    var updateSelectBoxWithTracks = function (selectBox) {
        selectBox = selectBox;
        selectBox.options.length = 0;
        var optionIndex = 0;
        for (var i in trackList) {
            var text = trackList[i]['name'];
            var value = text;
            selectBox.options[optionIndex++] = new Option(text, value);
        }

    };

//    this.makeFormForColocalization();

}

VQI_GenomeBrowser.prototype = new VQI_Publisher();