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
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <title>Composite plot template</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <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="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>
    <script src="js/data_object.js"></script>
    <script src="js/composite_object.js"></script>
    <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/x_axis_input.js"></script>
    <script src="js/y_axis_input.js"></script>
    <script src="js/autoscale_axes.js"></script>
    <script src="js/lock_axes.js"></script>
    <script src="js/default_colors.js"></script>
    <script src="js/composite_loader.js"></script>
    <script src="js/editable_svg_text.js"></script>
    <script src="js/composite_plot.js"></script>
    <script src="js/composite_legend.js"></script>
    <script src="js/settings_tabs.js"></script>
    <script src="js/preset_settings.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/download_as_svg_button.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>
    <script src="js/update_all.js"></script>
</body>