<commit_before><div id="gene_plot">
    <span style="float: right;">
        <label for="display_coverage_metric_group">
            Display:
        </label>
        <span class="btn-group" data-toggle="buttons" id="display_coverage_metric_group">
            <button class="btn btn-primary active display_coverage_metric_buttons" id="display_coverage_overview_button">
                <input type="radio">Overview
            </button>
            <button class="btn btn-primary display_coverage_metric_buttons" id="display_coverage_detail_button">
                <input type="radio">Detail
            </button>
        </span>
    </span>
    <br/>
    <br/>
    {% include 'coverage_selectors.html' %}
    <br/>
    <div id="gene_plot_container_container" style="overflow-x:scroll; width:1100px;">
        <div id="gene_plot_container"></div>
    </div>
</div>
<div id="not_covered" style="display: none;">
    No coverage for this transcript.
</div>
<script>
function gene_chart(data, variant_data, _transcript) {

    var coding_coordinate_params = get_coding_coordinate_params(_transcript);
    var chart_width = gene_chart_width;
    var coverage_bar_width = chart_width / coding_coordinate_params.size;
    precalc_coding_coordinates(_transcript, data, 'pos');
    precalc_coding_coordinates(_transcript, variant_data, 'pos');
    //var coverage_bar_width = 2;

    // only show variants that have a coding coordinate 
    variant_data = _.filter(variant_data, function(variant) {
        return variant.pos_coding != undefined;
    });

    // only show coding rects that have a coding coordinate 
    data = _.filter(data, function(d) {
        return d.pos_coding != undefined;
    });

    var metric = 'mean';

    var exon_x_scale = d3.scale.linear()
        .domain([0, coding_coordinate_params.size])
        .range([0, chart_width]);

    var max_cov;
    if (metric == 'mean' || metric == 'median') {
        max_cov = d3.max(data, function(d) { return d[metric]; });
    } else {
        max_cov = 1;
    }
    var y = d3.scale.linear()
        .domain([0, max_cov])
        .range([gene_chart_height, 0]);

{#    var xAxis = d3.svg.axis()#}
{#        .scale(exon_x_scale)#}
{#        .orient("bottom");#}

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select('#gene_plot_container').append("svg")
        .attr("width", chart_width + gene_chart_margin.left + gene_chart_margin.right)
        .attr("height", gene_chart_height + gene_chart_margin.top + gene_chart_margin.bottom)
        .attr('id', 'inner_svg')
        .append("g")
        .attr('id', 'inner_graph')
        .attr("transform", "translate(" + gene_chart_margin.left + "," + gene_chart_margin.top + ")");

    svg.selectAll("bar")
        .data(data)
        .enter()
        .append("rect")
        .attr('class', 'main_plot_bars')
        .style("fill", "steelblue")
        .attr('x', function(d) { return exon_x_scale(d.pos_coding)})
        .attr("width", coverage_bar_width)
        .attr("y", function(d) { return y(d[metric]); })
        .attr("height", function(d) { return gene_chart_height - y(d[metric]); })
        .attr('position', function(d) { return d.pos });

{#    svg.append("g")#}
{#        .attr("class", "x axis")#}
{#        .attr("transform", "translate(0," + gene_chart_height + ")")#}
{#        .call(xAxis);#}

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
{#            console.log(d);#}
            return exon_x_scale(get_coding_coordinate(_transcript, d.pos));
        })
        .attr("cy", gene_chart_height + 3)
        .attr('r', 2);

    // plot exons
    var svg_outer = d3.select('#gene_plot_container').append("svg")
        .attr("width", chart_width + gene_chart_margin_lower.left + gene_chart_margin_lower.right)
        .attr("height", lower_gene_chart_height)
        .attr('id', 'track_svg')
        .append("g")
        .attr('id', 'track')
        .attr("transform", "translate(" + gene_chart_margin_lower.left + "," + 0 + ")");

    var exon_color = "lightsteelblue";
    svg_outer.append("line")
        .attr("y1", lower_gene_chart_height/2)
        .attr("y2", lower_gene_chart_height/2)
        .attr("x1", 0)
        .attr("x2", exon_x_scale(coding_coordinate_params.size))
        .attr('id', 'boundary_line')
        .attr("stroke-width", 10)
        .attr("stroke", exon_color);

    console.log(_transcript);
    // plot exon rounded rects
    svg_outer.selectAll("bar")
        .data(_transcript.exons)
        .enter()
        .append("rect")
        .attr('class', 'track_bar')
        .style("fill", exon_color)
        .attr("x", function(d, i) { return exon_x_scale(get_coding_coordinate(_transcript, d.start)); })
        .attr("y", function(d, i) {
            if (d.feature_type == 'CDS') {
                return 0;
            } else {
                return lower_gene_chart_height/4;
            }
        })
{#        .attr("rx", 6)#}
{#        .attr("ry", 6)#}
        .attr("width", function(d, i) { return exon_x_scale(d.stop-d.start+1); })
        .attr("height", function(d, i) {
            if (d.feature_type == 'CDS') {
                return lower_gene_chart_height;
            } else {
                return lower_gene_chart_height/2;
            }
        });

    var bounds = get_af_bounds(variant_data);
    var min_af = bounds[0];
    var max_af = bounds[1];
    var variant_size_scale = d3.scale.log()
        .domain([min_af, max_af])
        //Circle/Ellipse
        .range([2, lower_gene_chart_height/3]);
        //Rectangle
//        .range([lower_gene_chart_height, 2]);

    // show variant category on hover
    var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
        if (d.category) {
            var csq = d.major_consequence.replace('_variant', '')
                    .replace('_', ' ')
                    .replace('utr', 'UTR')
                    .replace('3 prime', "3'")
                    .replace('5 prime', "5'")
                    .replace('nc ', "non-coding ");
            var output = csq + '<br/>' + d.chrom + ':' + d.pos + '<br/>Frequency: ' + d.allele_freq.toExponential(3);
            if (d.major_consequence == 'missense_variant') {
                output += '<br/>' + d.vep_annotations[0].HGVSp.split(':')[1];
            }
            return output;
        } else {
            return 'None';
        }
    });
    svg.call(tip);

    // plot variants<commit_msg>More stuff in tooltip<commit_after><div id="gene_plot">
    <span style="float: right;">
        <label for="display_coverage_metric_group">
            Display:
        </label>
        <span class="btn-group" data-toggle="buttons" id="display_coverage_metric_group">
            <button class="btn btn-primary active display_coverage_metric_buttons" id="display_coverage_overview_button">
                <input type="radio">Overview
            </button>
            <button class="btn btn-primary display_coverage_metric_buttons" id="display_coverage_detail_button">
                <input type="radio">Detail
            </button>
        </span>
    </span>
    <br/>
    <br/>
    {% include 'coverage_selectors.html' %}
    <br/>
    <div id="gene_plot_container_container" style="overflow-x:scroll; width:1100px;">
        <div id="gene_plot_container"></div>
    </div>
</div>
<div id="not_covered" style="display: none;">
    No coverage for this transcript.
</div>
<script>
function gene_chart(data, variant_data, _transcript) {

    var coding_coordinate_params = get_coding_coordinate_params(_transcript);
    var chart_width = gene_chart_width;
    var coverage_bar_width = chart_width / coding_coordinate_params.size;
    precalc_coding_coordinates(_transcript, data, 'pos');
    precalc_coding_coordinates(_transcript, variant_data, 'pos');
    //var coverage_bar_width = 2;

    // only show variants that have a coding coordinate 
    variant_data = _.filter(variant_data, function(variant) {
        return variant.pos_coding != undefined;
    });

    // only show coding rects that have a coding coordinate 
    data = _.filter(data, function(d) {
        return d.pos_coding != undefined;
    });

    var metric = 'mean';

    var exon_x_scale = d3.scale.linear()
        .domain([0, coding_coordinate_params.size])
        .range([0, chart_width]);

    var max_cov;
    if (metric == 'mean' || metric == 'median') {
        max_cov = d3.max(data, function(d) { return d[metric]; });
    } else {
        max_cov = 1;
    }
    var y = d3.scale.linear()
        .domain([0, max_cov])
        .range([gene_chart_height, 0]);

{#    var xAxis = d3.svg.axis()#}
{#        .scale(exon_x_scale)#}
{#        .orient("bottom");#}

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select('#gene_plot_container').append("svg")
        .attr("width", chart_width + gene_chart_margin.left + gene_chart_margin.right)
        .attr("height", gene_chart_height + gene_chart_margin.top + gene_chart_margin.bottom)
        .attr('id', 'inner_svg')
        .append("g")
        .attr('id', 'inner_graph')
        .attr("transform", "translate(" + gene_chart_margin.left + "," + gene_chart_margin.top + ")");

    svg.selectAll("bar")
        .data(data)
        .enter()
        .append("rect")
        .attr('class', 'main_plot_bars')
        .style("fill", "steelblue")
        .attr('x', function(d) { return exon_x_scale(d.pos_coding)})
        .attr("width", coverage_bar_width)
        .attr("y", function(d) { return y(d[metric]); })
        .attr("height", function(d) { return gene_chart_height - y(d[metric]); })
        .attr('position', function(d) { return d.pos });

{#    svg.append("g")#}
{#        .attr("class", "x axis")#}
{#        .attr("transform", "translate(0," + gene_chart_height + ")")#}
{#        .call(xAxis);#}

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
{#            console.log(d);#}
            return exon_x_scale(get_coding_coordinate(_transcript, d.pos));
        })
        .attr("cy", gene_chart_height + 3)
        .attr('r', 2);

    // plot exons
    var svg_outer = d3.select('#gene_plot_container').append("svg")
        .attr("width", chart_width + gene_chart_margin_lower.left + gene_chart_margin_lower.right)
        .attr("height", lower_gene_chart_height)
        .attr('id', 'track_svg')
        .append("g")
        .attr('id', 'track')
        .attr("transform", "translate(" + gene_chart_margin_lower.left + "," + 0 + ")");

    var exon_color = "lightsteelblue";
    svg_outer.append("line")
        .attr("y1", lower_gene_chart_height/2)
        .attr("y2", lower_gene_chart_height/2)
        .attr("x1", 0)
        .attr("x2", exon_x_scale(coding_coordinate_params.size))
        .attr('id', 'boundary_line')
        .attr("stroke-width", 10)
        .attr("stroke", exon_color);

    console.log(_transcript);
    // plot exon rounded rects
    svg_outer.selectAll("bar")
        .data(_transcript.exons)
        .enter()
        .append("rect")
        .attr('class', 'track_bar')
        .style("fill", exon_color)
        .attr("x", function(d, i) { return exon_x_scale(get_coding_coordinate(_transcript, d.start)); })
        .attr("y", function(d, i) {
            if (d.feature_type == 'CDS') {
                return 0;
            } else {
                return lower_gene_chart_height/4;
            }
        })
{#        .attr("rx", 6)#}
{#        .attr("ry", 6)#}
        .attr("width", function(d, i) { return exon_x_scale(d.stop-d.start+1); })
        .attr("height", function(d, i) {
            if (d.feature_type == 'CDS') {
                return lower_gene_chart_height;
            } else {
                return lower_gene_chart_height/2;
            }
        });

    var bounds = get_af_bounds(variant_data);
    var min_af = bounds[0];
    var max_af = bounds[1];
    var variant_size_scale = d3.scale.log()
        .domain([min_af, max_af])
        //Circle/Ellipse
        .range([2, lower_gene_chart_height/3]);
        //Rectangle
//        .range([lower_gene_chart_height, 2]);

    // show variant category on hover
    var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
        if (d.category) {
            var csq = d.major_consequence.replace('_variant', '')
                    .replace('_', ' ')
                    .replace('utr', 'UTR')
                    .replace('3 prime', "3'")
                    .replace('5 prime', "5'")
                    .replace('nc ', "non-coding ");
            var output = csq + '<br/>' + d.chrom + ':' + d.pos + ' ' + d.ref + '&#8594;' + d.alt;
            output += '<br/>Frequency: ' + d.allele_freq.toExponential(3);
            output += '<br/>' + d.vep_annotations[0].HGVSc.split(':')[1];
            if (d.major_consequence == 'missense_variant') {
                output += '<br/>' + d.vep_annotations[0].HGVSp.split(':')[1];
            }
            return output;
        } else {
            return 'None';
        }
    });
    svg.call(tip);

    // plot variants
{'fraction_non_alphanumeric': 0.1643012690545919, 'fraction_numerical': 0.008109934669970714, 'mean_word_length': 2.3187141789185146, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 58, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '227037', 'n_tokens_mistral': 4493, 'n_tokens_neox': 4245, 'n_words': 769}