Mercurial > repos > iuc > assembly_stats

<html>
<head>
    <title>assembly stats</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="css/circle-plot.css?v1">
    <link rel="stylesheet" type="text/css" href="css/square-plot.css?v1">
    <link rel="stylesheet" type="text/css" href="css/table.css?v1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="js/d3-tip.js"></script>
    <script type="text/javascript" src="js/circle-plot.js?v1"></script>
    <script type="text/javascript" src="js/square-plot.js?v1"></script>
    <script type="text/javascript" src="js/table.js?v1"></script>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        #assembly {
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 14pt;
            overflow: hidden;
        }

        #assembly_stats {
            height: 100%;
            width: 100%;
        }

        .asm-tab-container {
            position: relative;
            width: 100%;
            height: 34px;
            text-align: center;
            color: #555555;
            background-color: #cccccc;
        }

        .asm-tab {
            position: relative;
            width: 33.33%;
            height: 30px;
            display: inline-block;
            font-size: 12pt;
            line-height: 30px;
            margin-left: -2px;
            margin-top: 2px;
            border: solid 2px #555555;
            border-top: none;
            border-bottom: none;
            cursor: pointer;
            border-radius: 17px;
        }

        .asm-tab.active {
            color: black;
            margin-top: 0;
            border: solid 2px #555555;
            background-color: #bbbbbb;
        }

        .asm-tab:hover {
            margin-top: 0;
            border: solid 2px #555555;
        }

        .asm-plot-container {
            position: relative;
            width: 100%;
            height: 90%;
            text-align: center;
        }

        #assembly_stats_left {
            position: relative;
            width: 50%;
            height: 90%;
            float: left;
            text-align: center;
        }

        #assembly_stats_right {
            position: relative;
            width: 50%;
            height: 90%;
            float: right;
            text-align: center;
        }
    </style>

    <div id="assembly_stats"></div>

    <script>
        var queries = window.location.href.replace(/^.+\?/, '').split('&');
        var params = [];
        queries.forEach(function (q) {
            var parts = q.split('=');
            if (!params[parts[0]]) params[parts[0]] = [];
            params[parts[0]].push(parts[1]);
        });

        var assemblies = params['assembly'] || ['output'];
        var path = params['path'] || 'json/';
        if (params['altAssembly']) assemblies = assemblies.concat(params['altAssembly']);

        var views = ['circle', 'cumulative', 'table']; // Les trois onglets à afficher
        var defaultTab = 'circle'; // Onglet par défaut à afficher

        var div = d3.select('div#assembly_stats');
        var tab_container = div.append('div').attr('class', 'asm-tab-container');
        var tabcount = 3; // Nombre d'onglets (circle, cumulative, table)
        var tabwidth = 25; // Largeur de chaque onglet en pourcentage

        for (var i = 0; i < tabcount; i++) {
            var tab_div = tab_container.append('div')
                .attr('class', function () {
                    if (views[i] === defaultTab) return 'asm-tab active';
                    return 'asm-tab';
                })
                .style('width', tabwidth + '%')
                .text(views[i]);

            tab_div.on('click', function () {
                d3.selectAll('.asm-tab').classed('active', false);
                d3.select(this).classed('active', true);

                var view = d3.select(this).text();
                var plot_container = d3.select('#asm-plot-container');

                if (view === 'circle') {
                    plot_container.html('');
                    arr[0].drawPlot('asm-plot-container');
                } else if (view === 'cumulative') {
                    plot_container.html('');
                    arr[0].squarePlot('asm-plot-container');
                    arr[0].addKey(assemblies);

                    setTimeout(function () {
                        arr.forEach(function (asm, index) {
                            if (index > 0) {
                                var data = asm.prepareLine();
                                arr[0].addLine(data, asm.name, asm);
                            }
                        });
                    }, 250);
                } else if (view === 'table') {
                    plot_container.html('');
                    arr[0].drawTable('asm-plot-container');

                    setTimeout(function () {
                        arr.forEach(function (asm, index) {
                            if (index > 0) {
                                setTimeout(function () {
                                    arr[0].addColumn(asm);
                                }, 250);
                            }
                        });
                    }, 250);
                }
            });
        }

        var plot_container = div.append('div').attr('class', 'asm-plot-container').attr('id', 'asm-plot-container');
        document.title = assemblies[0] + ' assembly stats';
        var arr = [];

        assemblies.forEach(function (assembly, index) {
            d3.json(path + assembly + '.assembly-stats.json', function (error, json) {
                if (error) return console.warn(error);
                arr[index] = new Assembly(json);
                arr[index].name = assembly.replace('.', '_');

                if (views[0] === 'cumulative') {
                    if (index === 0) {
                        arr[0].squarePlot('asm-plot-container');
                        arr[0].addKey(assemblies);
                    } else {
                        var data = arr[index].prepareLine();
                        setTimeout(function () {
                            arr[0].addLine(data, assembly, arr[index]);
                        }, 250);
                    }
                } else if (views[0] === 'table') {
                    if (index === 0) {
                        arr[0].drawTable('asm-plot-container');
                    } else {
                        setTimeout(function () {
                            arr[0].addColumn(arr[index]);
                        }, 250);
                    }
                } else {
                    arr[0].drawPlot('asm-plot-container');
                }
            });
        });

        function compare(asm1, asm2) {
            if (!asm1) return;
            if (!asm2) return;

            plot_container
                .append('div')
                .attr('id', 'assembly_stats_left')
                .append('p')
                .text(assemblies[0]);

            plot_container
                .append('div')
                .attr('id', 'assembly_stats_right')
                .append('p')
                .text(assemblies[1]);

            var span = Math.max(asm1.assembly, asm2.assembly);
            var longest = Math.max(asm1.scaffolds[0], asm2.scaffolds[0]);

            asm1.drawPlot('assembly_stats_left', longest, span);
            asm2.drawPlot('assembly_stats_right', longest, span);
        }
    </script>
</body>
</html>