plotter/index.html at master · CEGRcode/plotter · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Genoplotter - Genomic Composite Visualization</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/d3.v7.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- Miscellaneous useful icons: -->
<!-- fa-file-waveform -->
<!-- fa-dna -->
<!-- fa-repeat -->
<!-- fa-chart-line -->
<!-- fa-palette -->
<!-- fa-map-pin -->
<body>
    <main>
        <div class="padded-container">
            <div id="top-panel">
                <div id="top-left-panel">
                    <button id="json-button" class="stretch-button"><i class="fas fa-lg fa-file-arrow-up"></i> Import session (JSON)</button>
                    <input type="file" id="json-loader">
                    <button id="json-download" class="stretch-button"><i class="fas fa-lg fa-file-arrow-down"></i> Export session (JSON)</button>
                    <input type="file" id="multi-composite-loader">
                    <button id="multi-composite-button" class="stretch-button"><i class="fas fa-lg fa-layer-group"></i> Upload multi-composite</button>
                    <br/>
                    <div id="axes-input" class="text-left">
                        <!-- Zoom In/Out -->
                        <!-- fa-square-minus -->
                        <!-- fa-magnifying-glass-minus -->
                        <div id="x-axis-input"></div>
                        <div id="y-axis-input"></div>
                        <!-- symmetric y -->
                        <!-- <i class="fas fa-lg fa-arrows-up-down"></i> -->
                    </div>
                    <button id="autoscale-axes-button"><i class="fas fa-lg fa-maximize"></i> Autoscale axes</button>
                    <!-- <i class="fas fa-lg fa-maximize"></i> -->
                    <!-- <i class="fas fa-lg fa-minimize"></i> -->
                    <div id="lock-axes"></div>
                    <!-- <i class="fas fa-lg fa-lock"></i> -->
                    <!-- <i class="fas fa-lg fa-unlock"></i> -->
                </div>
                <svg id="main-plot" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica"></svg>
                <div id="top-right-panel">
                    <div id="settings-tabs"></div>
                    <div id="global-settings" class="settings-section">
                        <select id="preset-dropdown"></select>
                        <table>
                            <tr id="opacity-input"></tr>
                            <!-- <i class="fas fa-lg fa-arrow-up"></i> -->
                            <tr id="smoothing-input"></tr>
                            <!-- <i class="fas fa-lg fa-icicles fa-rotate-180"></i> -->
                            <!-- <i class="fas fa-lg fa-mound"></i> -->
                            <tr id="bp-shift-input"></tr>
                            <!-- <i class="fas fa-lg fa-right-from-bracket"></i> -->
                        </table>

                        <div id="combine-strands"></div>
                        <!-- <i class="fas fa-xl fa-code-merge fa-rotate-90"></i> -->
                        <!-- <i class="fas fa-xl fa-arrows-split-up-and-left fa-rotate-90"></i> -->
                        <div id="separate-colors"></div>
                        <!-- <i class="far fa-xl fa-circle"></i> -->
                        <!-- <i class="fas fa-xl fa-circle"></i> -->
                        <!-- <i class="fas fa-xl fa-circle-half-stroke"></i> -->
                        <div id="color-trace"></div>
                        <!-- <i class="fas fa-xl fa-chart-area"></i> -->
                        <div id="enable-plot-tooltip"></div>
                        <!-- <i class="far fa-xl fa-message"></i> -->
                        <div id="show-legend"></div>
                        <!-- <i class="far fa-xl fa-rectangle-list"></i> -->
                        <br/>
                        <button id="download-as-svg"><i class="fa fas fa-lg fa-image"></i> Download as SVG</button>
                        <button id="download-minimal-svg">Download minimal SVG</button>
                    </div>
                    <div id="reference-lines-input" class="settings-section hidden"></div>
                    <div id="nucleosome-slider-input" class="settings-section hidden"></div>
                </div>
            </div>
            <div id="composite-table"></div>
        </div>
    </main>

    <!-- Javascript classes -->
    <script src="js/data_object.js"></script>
    <script src="js/composite_object.js"></script>
    <script src="js/x_axis_input.js"></script>
    <script src="js/y_axis_input.js"></script>
    <script src="js/lock_axes.js"></script>
    <script src="js/composite_loader.js"></script>
    <script src="js/composite_plot.js"></script>
    <script src="js/composite_legend.js"></script>
    <script src="js/preset_dropdown.js"></script>
    <script src="js/opacity_input.js"></script>
    <script src="js/smoothing_input.js"></script>
    <script src="js/bp_shift_input.js"></script>
    <script src="js/combined_checkbox.js"></script>
    <script src="js/separate_colors_checkbox.js"></script>
    <script src="js/color_trace_checkbox.js"></script>
    <script src="js/enable_plot_tooltip_checkbox.js"></script>
    <script src="js/show_legend_checkbox.js"></script>
    <script src="js/nucleosome_slider.js"></script>
    <script src="js/nucleosome_slider_input.js"></script>
    <script src="js/reference_lines.js"></script>
    <script src="js/reference_lines_input.js"></script>
    <script src="js/plot_tooltip.js"></script>
    <script src="js/composite_row.js"></script>
    <script src="js/composite_table.js"></script>

    <!-- JSONs -->
    <script src="js/default_colors.js"></script>
    <script src="js/preset_settings.js"></script>

    <!-- Functions and UI elements too small to justify a class -->
    <script src="js/export_json.js"></script>
    <script src="js/import_json.js"></script>
    <script src="js/upload_multi_composite.js"></script>
    <script src="js/round_with_precision.js"></script>
    <script src="js/autoscale_axes.js"></script>
    <script src="js/editable_svg_text.js"></script>
    <script src="js/settings_tabs.js"></script>
    <script src="js/download_as_svg_button.js"></script>
    <script src="js/update_all.js"></script>

    <!-- Initialize large objects and UI elements -->
    <script src="js/initialize_objects.js"></script>
</body>