iModulon.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics - Personal -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176192306-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-176192306-1');
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics - SBRG -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176090948-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-176090948-2');
    </script>
    
    <title> iModulonDB </title>
    <!-- Metadata -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- FontAwesome Icons -->
    <script src="https://kit.fontawesome.com/a27dabf34d.js" crossorigin="anonymous"></script>

    <!-- Font -->
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">

    <!-- CSS -->
    <style>
        * {
            font-family: 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
        }

        .header {
            background-color: #5D5C61;
            color: white;
            margin-bottom: 0rem;
            padding: 0.4rem;
            padding-left: 0.7rem;
        }

        .header a {
            color: white;
        }

        .header a:hover {
            color: #A8D0E6;
        }

        .dropdown-menu {
            background-color: #5D5C61;
        }

        .dropdown-item {
            color: white;
        }
        
        #left_col {
            background-color: #A8D0E6;
            padding: 1rem;
            height: unset;
            min-height: 100vh;
        }
        
        #left_col_content {
            position: sticky;
            top: 4.5rem;
        }
        
        .card {
            background-color: #5D5C61;
        }
        
        .im_head_meta_cat {
            margin-bottom: 0rem;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }
        
        .im_head_meta_val {
            color: white;
        }
        
        .im_head_meta_val a{
            color: #A8D0E6;
        }

        .bd-lead {
            overflow-wrap: break-word;
            word-wrap: break-word;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
        }

    </style>
</head>

<body>

<!-- Page Content -->
<div class="container-fluid" style="min-width: 650px; max-width: 1600px">

    <!-- Navbar -->
    <div class="header row navbar-dark sticky-top">

        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
                <img src="images/modulytics_logo.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
                iModulonDB
            </a>
        </div>

        <ul class="nav navbar-dark">
            <li class="nav-item">
                <a id="im_list" class="nav-link navbar-dark">Dataset Page</a>
            </li>
            <li class="nav-item">
                <a id="gene_search_link" class="nav-link" href="search.html">Search</a>
            </li>
            <li class="nav-item">
                <a id="next_iM" class="nav-link navbar-dark" href="index.html">Next</a>
            </li>
            <li class="nav-item">
                <a id="prev_iM" class="nav-link navbar-dark" href="index.html">Previous</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                   aria-expanded="false">Download</a>
                <div class="dropdown-menu">
                    <a id="gene_weights_download" class="dropdown-item" href="#">Gene Weights</a>
                    <a id="gene_table_download" class="dropdown-item" href="#">Gene Table</a>
                    <a id="activity_download" class="dropdown-item" href="#">iModulon Activity</a>
                    <div class="dropdown-divider"></div>
                    <a id="data_download" class="dropdown-item">Full Dataset</a>
                    <a id="gene_download" class="dropdown-item">Gene Annotations & TRN</a>
                    <a id="meta_download" class="dropdown-item">Experimental Conditions</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
            </li>
        </ul>
    </div>
    <div class="row">
        <!-- Left column: Header -->
        <div id="left_col" class="col-md-3">
            <div id="left_col_content">
                
                <h1 id="im_name" class="bd-title bd-lead"></h1>
                <div class="card p-2" id="im_head_text"></div>
            </div>
        </div>

        <!-- Main body -->
        <div class="col-md-9 p-3">

            <!-- iModulon header & gene table -->
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-auto justify-content-center">
                        <h5>Gene Table</h5>
                    </div>
                    <div id="gene_table" style="width: 100%;height:275px;"></div>
                </div>
            </div>

            <hr/>

            <!-- Gene-related plots -->
            <div class="row mx-auto justify-content-center">
                <h5>Genes</h5>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div id="hist" style="width: 100%;height: 300px;"></div> <!-- width = 400px -->
                </div>
                <div class="col-md-6">
                    <div id="g_scatter" style="width: 100%;height: 300px;" class="justify-content-center"></div>
                    <!-- width = 400px -->
                </div>
            </div>

            <hr/>

            <!-- Activity-related plots -->
            <div class="row mx-auto justify-content-center">
                <!-- Header with cog for changing appearance -->
                <h5>Activity <a data-toggle="modal" data-target="#activityModal"><i class="fas fa-wrench"></i></a></h5>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="bar" style="width: 100%;height: 250px;"></div> <!-- width = 900px -->
                </div>
            </div>

            <hr/>

            <!-- Regulator-related plots -->
            <div id="reg_header" class="row mx-auto justify-content-center d-none">
                <h5 class="text-center">Regulation</h5>
            </div>
            <div id="reg_row1" class="row d-none">
                <div class="col-md-4">
                    <div id="reg_div1" style="width: 100%;height: 300px;"></div>
                </div>
                <div class="col-md-4">
                    <div id="reg_div2" style="width:100%;height: 300px;"></div>
                </div>
                <div class="col-md-4">
                    <div id="reg_div3" style="width:100%;height: 300px;"></div>
                </div>
            </div>
            <div id="reg_row2" class="row d-none">
                <div class="col-md-4">
                    <div id="reg_div4" style="width: 100%;height: 300px;"></div>
                </div>
                <div class="col-md-4">
                    <div id="reg_div5" style="width:100%;height: 300px;"></div>
                </div>
                <div class="col-md-6">
                    <div id="reg_div2" style="width:100%;height: 300px;"></div>
                </div>
            </div>

            <hr id="reg_hr" class="d-none"/>

            <!-- Footer -->
            <footer>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-3">
                            <a href="http://systemsbiology.ucsd.edu/">
                                <img class="img-fluid" src="images/sbrg-logo.png">
                            </a>
                        </div>
                        <div class="col-sm-9 m-auto">
                            <p class="copyright text-muted small">
                                iModulonDB is maintained by the Systems Biology Research Group at the University of
                                California, San Diego. <br/>
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="activityModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="container-fluid p-1">
            <h5 class="modal-title">Activity Bar Plot Settings</h5>
            <p>Checked metadata categories will be displayed when hovering over bars.</p>
            <p>Click the inkdrop to color the bars by metadata values.</p>
        </div>
      </div>
      <div class="modal-body"id="activityModalBody"></div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="makeChangesButton">Make Changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Scripts for Bootstrap: jQuery, Popper.js, Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

<!-- Required CDNs: URLSearchParams, Highcharts, Papa Parse, Tabulator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.src.js"></script>
<script src="https://code.highcharts.com/modules/venn.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.6.3/dist/css/tabulator_simple.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js"></script>

<!-- Custom scripts -->
<script src="js/gene_histogram.js"></script>
<script src="js/gene_table.js"></script>
<script src="js/gene_scatter.js"></script>
<script src="js/activity_bar.js"></script>
<script src="js/regulon_venn.js"></script>
<script src="js/regulon_scatter.js"></script>


<!-- Populate the HTML page -->
<script>

    // Determine which i-modulon this is
    var params = new URLSearchParams(window.location.search);
    var org_folder = 'organisms/' + params.get('organism') + '/' + params.get('dataset') + '/';
    var data_prefix = org_folder + 'iModulon_files/' + params.get('k') + '/' + params.get('k') + '_';
    var link_suffix = "?organism=" + params.get('organism') + "&dataset=" + params.get('dataset')

    // add links specific to this dataset
    document.getElementById("im_list").setAttribute('href', "dataset.html" + link_suffix);
    document.getElementById("gene_search_link").setAttribute('href', "search.html"+link_suffix);

    console.log(params.get('dataset'))

    if (params.get('dataset') == 'precise1k') {
        document.getElementById('data_download').setAttribute('href', 'https://www.dropbox.com/s/p9wfadei4heup1v/p1k_data_files.zip?dl=0');
    } else {
        document.getElementById('data_download').setAttribute('href', org_folder + 'data_files.zip');
    }
    document.getElementById('gene_download').setAttribute('href', 'organisms/' + params.get('organism') + '/annotation/gene_files.zip');
    document.getElementById('meta_download').setAttribute('href', org_folder + 'data_files/sample_table.csv');

    // read in the iModulon metadata
    $.get(data_prefix + "meta.csv", function (im_metaCSV) {
        var im_meta = Papa.parse(im_metaCSV, {dynamicTyping: true}).data;
        
        // populate the dataset info
        $.get(org_folder + 'dataset_meta.csv', function (meta) {
            var metadata = Papa.parse(meta).data;
            
            // iModulon name
            var im_name = im_meta[1][1];
            if (typeof(im_name) == 'number') {
                im_name = 'iModulon ' + im_name.toString()
            } else {
                if ((im_name.slice(0, 8) != 'iModulon') & (im_name.slice(-8) != 'iModulon')) {
                    im_name = im_name + ' iModulon';
                }
            }
            $('#im_name').append(im_name);
            
            // iModulon details
            $('#im_head_text').append('<p class="im_head_meta_cat">DATASET</p>');
            $('#im_head_text').append('<p class="im_head_meta_val">'+metadata[1][1]+'</p>');
            
            if (im_meta[4][1] != null) {
                $('#im_head_text').append('<p class="im_head_meta_cat">FUNCTION</p>');
                $('#im_head_text').append('<p class="im_head_meta_val">'+im_meta[4][1]+'</p>');
            }
            $('#im_head_text').append('<p class="im_head_meta_cat">CATEGORY</p>');
            if (im_meta[5][1] == null) {
                $('#im_head_text').append('<p class="im_head_meta_val">Uncharacterized</p>');
            } else {
                $('#im_head_text').append('<p class="im_head_meta_val">'+im_meta[5][1]+'</p>');
            }
            var regulator_name = im_meta[3][1]
            if (regulator_name != null) {
                $('#im_head_text').append('<p class="im_head_meta_cat">REGULATOR</p>');
                $('#im_head_text').append('<p class="im_head_meta_val">'+regulator_name+'</p>');
                
                // precision and recall
                if (!(im_meta[9][1] == null)) {
	                $('#im_head_text').append('<p class="im_head_meta_cat">PRECISION</p>');
	                $('#im_head_text').append('<p class="im_head_meta_val">'+im_meta[9][1].toFixed(2)+'</p>');
	                $('#im_head_text').append('<p class="im_head_meta_cat">RECALL</p>');
	                $('#im_head_text').append('<p class="im_head_meta_val">'+im_meta[10][1].toFixed(2)+'</p>');
            	}
            }
            if (im_meta[8][1] != null) {
                $('#im_head_text').append('<p class="im_head_meta_cat">EXPLAINED VARIANCE</p>');
                $('#im_head_text').append('<p class="im_head_meta_val">'+(im_meta[8][1]*100).toFixed(4)+'%</p>')
            }
            
            
            // change page title
            document.title = 'iModulonDB: ' + im_meta[1][1] + ' iModulon';
        });
        // add download links specific to this imodulon
        document.getElementById("gene_table_download").setAttribute('href', data_prefix + 'gene_table.csv');
        document.getElementById("gene_weights_download").setAttribute('href', data_prefix + 'gene_weights.csv');
        document.getElementById("activity_download").setAttribute('href', data_prefix + 'activity.csv');

        // handle regulation
        var venn_bool = (im_meta[6][1] == 'True')
        var num_r_scatter = im_meta[7][1];

        var total_r_plots = venn_bool + num_r_scatter;
        var where_to_plot = {};
        if (total_r_plots > 0) {
            // unhide divs
            $('#reg_header').removeClass('d-none');
            $('#reg_hr').removeClass('d-none');
            $('#reg_row1').removeClass('d-none');

            if (total_r_plots > 3) {
                $('#reg_row2').removeClass('d-none');
            }

            // assign plots
            var curr_plot = 1;
            if (venn_bool) {
                where_to_plot['venn'] = curr_plot;
                curr_plot = curr_plot + 1;
            }
            if (num_r_scatter > 0) {
                where_to_plot['scatter'] = curr_plot;
                curr_plot = curr_plot + num_r_scatter;
            }

            // show plots
            if (venn_bool) {
                $.get(data_prefix + 'reg_venn.csv', function (venn_data) {
                    generateVenn(venn_data, "reg_div" + where_to_plot['venn']);
                });
            }
            if (num_r_scatter > 0) {
                $.get(data_prefix + 'reg_scatter.csv', function (r_scatter_data) {
                    for (reg_it = 0; reg_it < num_r_scatter; reg_it++) {
                        generateRegulonScatter(r_scatter_data, "reg_div" + (where_to_plot['scatter'] + reg_it), reg_it);
                    }
                });
            }
        }
    });

    // generate gene plots
    $.get(data_prefix + 'gene_table.csv', function (gene_table_data) {
        generateGeneTable(gene_table_data, "gene_table", params.get('organism'));
    });
    $.get(data_prefix + 'gene_hist.csv', function (gene_hist_data) {
        generateHist(gene_hist_data, "hist");
    });
    $.get(data_prefix + 'gene_scatter.csv', function (gene_scatter_data) {
        generateGeneScatter(gene_scatter_data, "g_scatter");
    });
    // generate activity plot
    $.get(org_folder + 'data_files/sample_table.csv', function (metadata) {
        $.get(data_prefix + 'activity_bar.csv', function (activity_bar_data) {
            generateActivityBar(metadata, activity_bar_data, 'bar');
            generateModal(metadata, activity_bar_data, "activityModal", "activityModalBody", "makeChangesButton");
        });
    });

    // add navbar links
    var k = params.get('k');
    $.get(org_folder + 'num_ims.txt', function (num_ims) {
        if (k == num_ims-1) {
            document.getElementById('next_iM').setAttribute('href', 'iModulon.html' + link_suffix + '&k=0')
        } else {
            document.getElementById('next_iM').setAttribute('href', 'iModulon.html' + link_suffix + '&k=' + (parseInt(k) + 1))
        }

        if (k == 0) {
            document.getElementById('prev_iM').setAttribute('href', 'iModulon.html' + link_suffix + '&k=' + num_ims)
        } else {
            document.getElementById('prev_iM').setAttribute('href', 'iModulon.html' + link_suffix + '&k=' + (parseInt(k) - 1))
        }
    });

</script>
</body>
</html>