introduction-website/index.html at main · jmcbroome/introduction-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<title>Cluster-Tracker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="lib/slickgrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="lib/jquery-ui/jquery-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/slickgrid/controls/slick.pager.css" type="text/css"/>
<link rel="stylesheet" href="lib/leafletjs/leaflet.css" type="text/css"/>
<link rel="stylesheet" href="css/gridstyles.css" type="text/css"/>
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
.dropdown {position: relative; display: inline-block; width: 150px}
.dropdown-content {display: none; position: absolute; z-index: 2000; width: 100%; background-color:#f1f1f1; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)}
.timel {display: block; width: 100%; text-align: center;}
.show {display:block;}
</style>
    <body>
        <h1> Cluster-Tracker </h1>
        <script>
            host = "clustertracker.gi.ucsc.edu/data/";
            cDataFile = 'cluster_data.json.gz';
            cSampleFile = 'sample_data.json.gz';

            function showList() {
                document.getElementById("myDropdown").classList.toggle("show");
            }
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {
                    var dropdowns = document.getElementsByClassName("dropdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
        </script>
        <div class="dropdown" id="droploc">
            <button onclick="showList()" class="dropbtn">Choose Map Display Time Period</button>
            <div id="myDropdown" class="dropdown-content">
                <button id="btn_time_0" class="timel btn_selected" onclick="changeMap(0)">Whole Pandemic</p>
                <button id="btn_time_12" class="timel" onclick="changeMap(12)">Last 12 Months</p>
                <button id="btn_time_6" class="timel" onclick="changeMap(6)">Last 6 Months</p>
                <button id="btn_time_3" class="timel" onclick="changeMap(3)">Last 3 Months</p>
            </div>
        </div>
        <div class="dropdown" id="dropcolor">
            <button onclick="changeScale()" class="dropbtn" id="colorbtn" disabled>Show Raw Cluster Count</button>
        </div>
        <div id="display" title="This map displays the count of inferred unique families of the virus in each state by default. When a state is selected, it instead displays a scaled estimate of the count of viral introductions to the selected state from each other state.">
            <div id="mapid"></div>
            <style>
                #mapid {
                    height: 400px;
                }
            </style>
        </div>
        <div id="maintext">
            <p>We apply a <a title="Wiki page describing the heuristic calculation." target="_blank" href="https://usher-wiki.readthedocs.io/en/latest/matUtils.html#introduce">heuristic</a>
                 to the <a title="Repository containing daily-updated comprehensive global phylogenetic trees for SARS-CoV-2" target="_blank" href="http://hgdownload.soe.ucsc.edu/goldenPath/wuhCor1/UShER_SARS-CoV-2/">global public SARS-CoV-2 phylogenetic tree</a>
                to identify groups of sequences from an area that may have recently migrated from outside the region. These may reflect cases of an infected traveler
                entering a region, followed by local spread.  Many biases might affect these results including relative local sequencing effort, timeliness of data deposition into public sequence repositories, and accuracy of phylogenetic reconstruction.
                You can view each cluster in <a title="Github repository for the Taxonium browser tree viewer" href="https://github.com/theosanderson/taxonium" target="_blank">Theo Sanderson's taxonium</a> and perform your own analysis with <a title="Github repository for our underlying tools" href="https://github.com/yatisht/usher" target="_blank">our toolkit and database.</a>
            </p>
        </div>
        <div id="searchbox">
            Search:
            <input type=text id="txtSearch" style="width:150px;">
        </div>
        <div id="myGrid" style="width:100%;height:600px;"></div>
        <div id="pager" style="width:100%;height:20px;"></div>


        <script src="lib/leafletjs/leaflet.js"></script>
        <script src="data/regions.js"></script>
        <script src="src/main.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>!window.jQuery && document.write('<script src="lib/jquery/jquery.min.js"><\/script>')</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
        <!-- SlickGrid: core jquery libs -->
        <script src="lib/jquery-ui/jquery-ui.min.js"></script>
        <script src="lib/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
        <!-- SlickGrid: core js-->
        <script src="lib/slickgrid/slick.core.js"></script>
        <script src="lib/slickgrid/slick.grid.js"></script>
        <script src="lib/slickgrid/slick.dataview.js"></script>
        <script src="lib/slickgrid/controls/slick.pager.js"></script>
        <!-- SlickGrid: copy cells -->
        <script src="lib/slickgrid/plugins/slick.cellexternalcopymanager.js"></script>
        <script src="lib/slickgrid/plugins/slick.cellselectionmodel.js"></script>
        <script src="lib/slickgrid/plugins/slick.cellrangedecorator.js"></script>
        <script src="lib/slickgrid/plugins/slick.cellrangeselector.js"></script>
        <!-- Slick Grid: tool tip -->
        <script src="lib/slickgrid/plugins/slick.customtooltip.js"></script>
        <!-- Gets data and loads into Slick Grid table -->
        <script src="src/datagrid.js"></script>
        <script>
            initCTGrid(host, cDataFile, cSampleFile);
        </script>

        <a href = "data/hardcoded_clusters.tsv", download = "sarscov2_clusters.tsv">Download full output file.</a>
        <a href = "data/cview.pb.gz", download = "cluster_taxodium.pb">Download the taxonium protobuf for viewing.</a>
        <p>Please post an issue at <a title="The github repository for this site." href="https://github.com/jmcbroome/introduction-website" target="_blank">the github</a> or email me at jmcbroom@ucsc.edu if you have questions or feedback.</p>
    </body>
</html>