<html>
<head>
    <link href="style.css" media="all" rel="stylesheet" data-target="desktop"/>
    <script src="plotly-latest.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>

<div class = "six columns">
        X:
    <select id="plotax_select">
        <option value="shared_hets">shared hets</option>
        <option value="shared_hom_alts">shared hom-alts</option>
        <option value="concordance">homozygous concordance</option>
        <option value="relatedness">relatedness</option>
        <option value="ibs0" selected>IBS0</option>
        <option value="ibs2">IBS2</option>
    </select>
        Y:
    <select id="plotay_select">
        <option value="shared_hets">shared hets</option>
        <option value="shared_hom_alts">shared hom-alts</option>
        <option value="concordance" selected >homozygous concordance</option>
        <option value="relatedness">relatedness</option>
        <option value="ibs0">IBS0</option>
        <option value="ibs2" selected>IBS2</option>
    </select>

    <div id="plota" style="width: 100%; height: 90%"></div>
</div>

<div class = "six columns">
    <select id="plotb_select">
        <option value="shared_hets">shared hets</option>
        <option value="shared_hom_alts">shared hom-alts</option>
        <option value="concordance" selected >homozygous concordance</option>
        <option value="relatedness">relatedness</option>
        <option value="ibs0">IBS0</option>
        <option value="ibs2">IBS2</option>
    </select>

    <div id="plotb" style="width: 100%; height: 90%"></div>
</div>

    <script>


var input = {"sites_tested":38399,"ibs":[0,0,0,14,12,14,8,7,7,3,5,4,12,13,14,11,11,10,13,12,13,10,8,11,14,13,9,23,0,0,19,15,18,9,8,8,3,6,5,16,17,18,13,13,12,16,15,15,10,8,11,17,16,12,22,22,0,10,7,9,4,3,4,1,2,2,8,9,10,8,8,8,10,9,9,5,3,6,8,8,8,8,8,8,0,0,0,4,2,4,9,8,12,4,6,7,1,1,0,6,6,6,8,6,9,7,5,6,8,8,8,32,0,0,3,2,4,7,5,10,4,6,7,1,1,0,6,6,6,7,5,8,5,4,5,8,8,8,32,32,0,4,2,4,9,8,12,4,6,7,1,1,0,6,6,6,8,6,9,7,5,6,8,8,9,15,15,15,0,0,0,5,5,7,4,4,4,3,3,3,5,5,6,4,4,5,6,6,8,8,8,9,15,15,15,42,0,0,3,3,5,3,3,3,1,1,1,3,3,4,2,2,3,3,3,5,8,8,9,14,14,14,39,40,0,5,5,7,4,4,4,2,2,2,5,5,6,5,5,6,5,5,7,9,9,10,11,11,11,19,20,17,0,0,0,7,8,11,5,5,4,7,6,7,3,2,5,6,6,5,9,9,10,11,11,12,18,19,16,39,0,0,5,6,9,5,5,4,7,6,7,3,2,5,5,5,4,9,9,10,10,10,11,17,18,17,38,38,0,9,10,13,5,5,4,9,8,9,4,3,6,10,10,8,9,9,10,12,12,12,17,17,17,12,11,12,0,0,0,5,5,4,6,6,6,5,5,6,5,3,6,9,9,10,12,12,12,17,18,18,13,12,13,28,0,0,6,6,5,7,7,7,6,6,7,9,7,10,9,9,10,12,12,12,16,17,17,12,12,12,27,28,0,8,8,7,8,8,8,6,6,7,9,7,10,12,12,11,13,13,13,17,17,15,13,13,11,9,9,9,0,0,0,4,3,4,8,6,10,7,6,9,12,12,11,13,13,13,18,18,16,14,13,12,10,10,9,38,0,0,4,3,4,8,6,10,7,6,9,11,11,11,13,13,13,17,17,15,13,13,11,9,9,9,37,37,0,4,3,4,8,6,10,6,5,8,8,8,8,15,15,16,16,16,15,12,12,13,8,8,7,15,16,15,0,0,0,8,6,9,10,9,10,8,8,8,15,15,16,15,15,14,11,12,12,7,7,7,15,15,15,32,0,0,8,6,9,9,8,9,8,8,8,15,15,16,16,16,15,12,12,13,8,8,7,15,16,15,33,32,0,8,6,9,12,11,11,8,8,8,11,11,11,20,21,20,13,13,13,12,13,13,21,21,20,17,17,17,0,0,0,6,6,6,7,7,8,11,11,11,20,21,20,13,13,13,12,13,13,20,20,20,17,17,17,36,0,0,4,4,4,8,8,8,11,11,11,20,21,20,13,13,13,12,13,13,21,21,20,17,17,17,37,36,0,6,6,6,10,10,9,11,11,11,17,17,16,13,13,13,10,10,10,15,15,14,15,15,15,16,15,16,0,0,0,10,10,9,11,11,11,18,18,17,14,13,14,11,11,10,15,16,14,16,15,16,16,15,16,31,0,0,8,8,8,10,10,10,17,17,17,12,11,12,11,11,10,12,13,12,15,14,15,13,13,13,27,28,0],"n":[0,85,63,83,74,84,82,71,78,76,71,81,70,81,83,84,85,76,83,72,83,80,68,84,81,72,75,85,0,65,90,77,91,89,77,85,81,76,89,74,87,91,92,93,83,91,79,90,88,75,92,89,79,83,63,65,0,66,59,64,64,58,64,62,59,65,56,62,66,66,66,64,65,60,65,61,55,66,62,57,63,31,33,25,0,78,90,89,76,85,80,74,87,74,87,90,91,92,83,90,78,89,87,74,91,87,77,84,27,27,24,78,0,79,77,70,72,69,66,75,70,76,78,79,79,74,77,72,77,74,66,78,75,69,71,31,34,24,90,79,0,90,78,86,81,76,89,74,87,91,92,93,83,91,79,91,88,75,92,88,78,83,32,34,28,43,35,42,0,78,85,82,74,86,72,85,89,90,91,83,89,77,89,86,74,90,86,76,83,26,26,26,35,33,34,77,0,74,70,67,75,68,73,77,78,79,75,77,73,78,75,69,79,74,70,70,31,32,26,40,32,39,84,74,0,77,69,85,68,81,86,86,87,78,85,73,87,82,71,87,82,72,81,37,38,31,28,24,27,37,33,33,0,73,78,65,77,80,81,82,75,82,71,80,77,65,81,79,70,76,31,31,29,27,26,27,32,32,27,72,0,74,64,72,75,76,77,70,77,70,74,73,62,76,74,69,68,38,41,30,29,24,29,35,31,34,78,73,0,71,84,89,89,90,80,88,76,89,85,73,90,86,76,80,32,32,28,39,37,38,43,43,41,27,28,28,0,76,74,75,76,71,74,70,73,74,67,75,73,67,66,40,41,30,46,38,45,51,44,50,33,30,35,76,0,87,88,89,79,87,75,86,86,73,88,86,76,79,39,42,30,47,37,47,50,43,49,32,30,35,74,87,0,93,93,84,91,80,91,88,75,92,88,78,83,42,43,32,47,40,46,44,37,41,34,31,33,31,38,38,0,94,85,92,81,91,89,76,93,89,79,84,42,43,32,47,40,46,45,38,42,35,31,34,32,39,38,94,0,85,93,81,92,90,77,94,90,80,85,36,36,32,43,40,42,38,35,34,32,31,30,29,31,31,84,84,0,83,76,82,81,72,84,80,73,77,36,37,29,54,44,53,43,34,39,31,28,34,32,41,39,50,51,45,0,81,90,88,75,92,88,78,84,29,29,27,47,43,46,34,33,30,26,28,28,31,32,31,43,43,42,81,0,78,77,71,80,76,72,72,34,35,28,50,42,51,41,33,38,29,26,35,28,37,36,47,48,42,89,77,0,87,75,92,87,77,82,38,39,29,38,31,37,48,43,47,34,32,33,36,45,44,50,50,43,49,41,46,0,76,89,88,78,80,29,29,26,31,29,30,42,43,42,30,30,30,35,38,37,42,42,39,40,39,38,76,0,77,75,70,68,37,38,29,37,30,36,48,43,48,34,31,34,35,45,46,50,50,42,49,40,47,89,77,0,89,79,84,40,41,31,45,37,43,46,39,44,33,30,34,38,43,42,46,46,39,48,41,44,48,41,48,0,80,80,34,34,29,40,36,38,41,40,39,29,28,29,39,40,38,42,43,38,43,41,39,42,40,42,79,0,70,37,38,30,42,34,40,43,35,42,31,25,32,34,39,39,39,40,35,45,37,41,40,34,43,79,70,0],"hets":[23,23,23,32,32,33,42,43,40,40,40,39,28,29,28,38,39,38,33,32,34,37,36,37,31,32,28],"homs":[19,20,16,25,24,25,19,20,19,14,15,14,20,20,20,21,21,20,29,29,29,20,20,20,23,22,19],"shared_hom_alts":[0,19,15,4,4,4,7,8,7,7,7,7,5,5,5,7,7,6,9,9,9,7,7,7,7,7,6,0,0,16,4,4,4,7,8,7,7,7,7,5,5,5,7,7,6,9,9,9,7,7,7,7,7,6,0,0,0,4,4,4,7,7,6,6,6,6,4,4,4,6,6,6,9,9,9,6,6,6,6,6,6,0,0,0,0,24,25,10,10,10,6,6,6,10,10,10,13,13,13,17,17,17,9,9,9,12,12,12,0,0,0,0,0,24,10,10,10,6,6,6,10,10,10,12,12,12,16,16,16,9,9,9,11,11,11,0,0,0,0,0,0,10,10,10,6,6,6,10,10,10,13,13,13,17,17,17,9,9,9,12,12,12,0,0,0,0,0,0,0,19,18,7,7,7,13,13,13,5,5,5,9,9,9,10,10,10,8,8,8,0,0,0,0,0,0,0,0,19,7,7,7,14,14,14,6,6,5,9,9,9,11,11,11,9,9,8,0,0,0,0,0,0,0,0,0,6,6,6,13,13,13,6,6,5,8,8,8,11,11,11,9,9,8,0,0,0,0,0,0,0,0,0,0,14,14,6,6,6,7,7,7,7,7,7,7,7,7,5,5,5,0,0,0,0,0,0,0,0,0,0,0,14,6,6,6,7,7,7,7,7,7,8,8,8,6,5,5,0,0,0,0,0,0,0,0,0,0,0,0,6,6,6,7,7,7,7,7,7,7,7,7,5,5,5,0,0,0,0,0,0,0,0,0,0,0,0,0,20,20,5,5,4,10,10,10,9,9,9,9,9,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,5,5,4,10,10,10,9,9,9,9,9,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,10,10,10,9,9,9,9,9,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,21,20,15,15,15,7,7,7,10,10,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,15,15,15,7,7,7,10,10,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,15,15,15,6,6,6,9,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,29,11,11,11,12,12,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,11,11,11,12,12,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,11,11,11,12,12,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,20,10,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,10,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,10,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,19,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,19,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"samples":["15079X1","15079X16","15079X4","15079X10","15079X6","15079X7","15079X11","15079X14","15079X8","15079X12","15079X15","15079X9","15079X13","15079X2","15079X17","15079X18","15079X3","15079X5","15079X19","15079X22","15079X25","15079X20","15079X23","15079X26","15079X21","15079X24","15079X27"],"clusters":[["15079X1","15079X16","15079X4"],["15079X10","15079X6","15079X7"],["15079X11","15079X14","15079X8"],["15079X12","15079X15","15079X9"],["15079X13","15079X2","15079X17"],["15079X18","15079X3","15079X5"],["15079X19","15079X22","15079X25"],["15079X20","15079X23","15079X26"],["15079X21","15079X24","15079X27"]],"expected-relatedness":[{"value":1,"pairs":[["15079X1","15079X16"],["15079X1","15079X4"],["15079X16","15079X4"],["15079X2","15079X17"],["15079X2","15079X6"],["15079X17","15079X6"],["15079X3","15079X18"],["15079X3","15079X13"],["15079X18","15079X13"],["15079X10","15079X7"],["15079X10","15079X5"],["15079X7","15079X5"],["15079X11","15079X8"],["15079X11","15079X14"],["15079X8","15079X14"],["15079X12","15079X9"],["15079X12","15079X15"],["15079X9","15079X15"],["15079X19","15079X25"],["15079X19","15079X22"],["15079X25","15079X22"],["15079X20","15079X26"],["15079X20","15079X23"],["15079X26","15079X23"],["15079X21","15079X27"],["15079X21","15079X24"],["15079X27","15079X24"]]}]}

input.n_samples = input.samples.length;

var accessors = {
    "ibs0": function (input, i, j) {
        return input.ibs[i * input.n_samples + j]
    },
    "shared_hets": function (input, i, j) {
        return input.ibs[j * input.n_samples + i]
    },
    "ibs2": function (input, i, j) {
        return input.n[j * input.n_samples + i]
    },
    "n": function (input, i, j) {
        return input.n[i * input.n_samples + j]
    },
    "shared_hom_alts": function (input, i, j) {
        return input.shared_hom_alts[i * input.n_samples + j]
    },
    "relatedness": function(input, i, j) {
        return (accessors.shared_hets(input, i, j) - 2 * accessors.ibs0(input, i, j)) / Math.min(input.hets[i], input.hets[j])
    },
    "concordance": function(input, i, j) {
        return (accessors.shared_hom_alts(input, i, j) - 2 * accessors.ibs0(input, i, j)) / Math.min(input.homs[i], input.homs[j])
    },
}

function get_heat_data(input, metric) {
    var result = new Array(input.n_samples)
    for (i = 0; i < input.n_samples; i++) {
        result[i] = new Array(input.n_samples)
    }
    var m = accessors[metric]
    for (i = 0; i < input.n_samples; i++) {
        for (j = i + 1; j < input.n_samples; j++) {
            result[i][j] = m(input, i, j)
        }
    }
    return result
}

function getc(rel_pairs, sample_a, sample_b) {
    var c = rel_pairs.get(sample_a + "--" + sample_b)
    //if (c != undefined){ return c}
    //c = rel_pairs.get(sample_b + "--" + sample_a)
    if (c == undefined) {
        c = 0
    } 
    return c
}

function get_xy_data_by_group(input, metric, rel_pairs) {
    var result = []
    var m = accessors[metric]
    for(i = 0; i < input.n_samples - 1; i++) {
        for(j=i+1; j < input.n_samples; j++){
            var c = getc(rel_pairs, input.samples[i], input.samples[j])
            if (result[c] == undefined) {
                result[c] = []
            }
            var v = m(input, i, j)
            if (v < 15) {
                v += (Math.random() - 0.5) / (7.0 * (v + 1))
            }
            result[c].push(v)
        }
    }
    return result
}

function get_xy_samples(input) {
    var result = []
    for(i = 0; i < input.n_samples - 1; i++) {
        for(j=i+1; j < input.n_samples; j++){
            // TODO: might need to flip these.
            result.push(input.samples[i] + " <> " + input.samples[j])
        }
    }
    return result
}

var colors = ['#377eb8bb', '#e41a1cbb', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999', '#e41a1c', '#377eb8', '#4daf4a']

function get_colors(input, colormap) {
    var result = []
    for(i = 0; i < input.n_samples - 1; i++) {
        for(j=i+1; j < input.n_samples; j++){
            var c = getc(colormap, input.samples[i], input.samples[j])
            result.push(colors[c])
        }
    }
    return result
}

var colorscaleValue = [
  [0,   '#3D9970'],
  [0.4,   '#2D8960'],
  [0.8, '#011e3e'],
  [1,   '#001f3f']
];

var metric_b = jQuery("#plotb_select").val()

var sample_pairs = get_xy_samples(input)

var heat_data = {
    z: get_heat_data(input, metric_b),
    type: 'heatmap',
    x: input.samples,
    colorscale: colorscaleValue,
    y: input.samples,
    zsmooth: false,
}

var layout_b = {
    title: jQuery("#plotb_select option:selected").text(),
    autosize: true,
    xaxis: {
        tickangle: 90,
    },
    hovermode: 'closest',
    shapes: [],
}

// add the rectangles around each cluster.
var coff = 0
input.clusters.forEach(function(cluster) {
    if(cluster.length == 1) { 
        coff += 1
        return 
    }
    layout_b.shapes.push({
        type: "rect",
        xref: "x",
        yref: "y",
        x0: coff - 0.5,
        y0: coff - 0.5,
        x1: coff + cluster.length - 0.5,
        y1: coff + cluster.length - 0.5,
        //fillcolor: '#d3d3d3',
        //opacity: 0.5,
        line: {width: 1.8, color: '#a41414'},
    })
    coff += cluster.length

});

var traces_b = []
var traces_a = []


var rel_pairs = new Map()
var rel_pairs_value_2_rel = new Map()
rel_pairs_value_2_rel.set(0, 0)
if ("expected-relatedness" in input) {
    var er = input["expected-relatedness"]
    var found = new Map()
    for(i in er){
        var v = er[i] // v.value and v.pairs
        rel_pairs_value_2_rel.set(parseInt(i) + 1, v.value)
        for(j in v.pairs){
            rel_pairs.set(v.pairs[j][0] + "--" + v.pairs[j][1], parseInt(i)+1)
        }
    }
}


var layout_a = {
    autosize: true,
    xaxis: {
        title: jQuery("#plotax_select option:selected").text(),
    },
    yaxis: {
        title: jQuery("#plotay_select option:selected").text(),
    },
    hovermode: 'closest',
    showlegend: true,
}

x_data = get_xy_data_by_group(input, jQuery('#plotax_select').val(), rel_pairs)
y_data = get_xy_data_by_group(input, jQuery('#plotay_select').val(), rel_pairs)
var size = 12
if(input.n_samples > 20) {
    size = 10
}
if(input.n_samples > 50) {
    size = 8
}


var traces_a = []
for (i in x_data) {

    traces_a.push({
        name: rel_pairs_value_2_rel.get(parseInt(i)) == 0 ? "unrelated" : "identical",
        x: x_data[i],
        y: y_data[i],
        text: sample_pairs,
        type: 'scatter',
        mode: 'markers',
        marker: {size: size, color:colors[i]},
        showlegend:true,
    })
}

traces_b.push(heat_data)

Plotly.newPlot('plotb', traces_b, layout_b)
Plotly.newPlot('plota', traces_a, layout_a)

jQuery('#plotb_select').on('change', function() {
    var metric = this.value
    layout_b.title = jQuery("#plotb_select option:selected").text();
    heat_data.z = get_heat_data(input, metric)
    Plotly.redraw('plotb')
})
jQuery('#plotax_select').on('change', function() {
    var metric = this.value
    layout_a.xaxis.title = jQuery("#plotax_select option:selected").text();
    x_data = get_xy_data_by_group(input, jQuery('#plotax_select').val(), rel_pairs)
    for (i in x_data) {
        traces_a[i].x = x_data[i]
    }

    Plotly.redraw('plota')
})

jQuery('#plotay_select').on('change', function() {
    var metric = this.value
    layout_a.yaxis.title = jQuery("#plotay_select option:selected").text();
    y_data = get_xy_data_by_group(input, jQuery('#plotay_select').val(), rel_pairs)
    for (i in y_data) {
        traces_a[i].y = y_data[i]
    }
    Plotly.redraw('plota')
})

window.onresize = function() {
    Plotly.Plots.resize('plota');
    Plotly.Plots.resize('plotb');
};
</script>
</body>
</html>
