Skip to content

Commit bd7df12

Browse files
jcha40jcha40
authored
Merge pull request #50 from CEGRcode/reference-lines
Added Reference Lines and Nucleosome Slider
2 parents 2845eb7 + a626862 commit bd7df12

12 files changed

Lines changed: 1063 additions & 46 deletions

‎index.html‎

Lines changed: 93 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -111,51 +111,109 @@ <h4>Composite metadata</h4>
111111
</div>
112112
<div class="col-8">
113113
<div class="row" style="display:flex; align-items:center;">
114-
<div style="max-width:calc(100% - 270px);">
114+
<div style="max-width:calc(100% - 270px);" id="main-plot-div">
115115
<svg id="main-plot" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica" style="height: 50vh; max-width: 100%; overflow: hide;"></svg>
116116
<script src="js/sliding_window.js"></script>
117117
<script src="js/widgets/main_plot.js"></script>
118118
</div>
119119
<div class="text-right" style="width:270px; padding-right:20px;">
120-
<div id="settings-dropdown"></div>
121-
<script src="js/widgets/preset_dropdown.js"></script>
122-
<div id="opacity-input"></div>
123-
<script src="js/widgets/opacity_input.js"></script>
124-
<div id="smoothing-input"></div>
125-
<script src="js/widgets/smoothing_input.js"></script>
126-
<div id="shift-input"></div>
127-
<script src="js/widgets/shift_input.js"></script>
128-
<div>
129-
<label for="combined-checkbox" id="combined-label">Combined</label>
130-
<input id="combined-checkbox" type="checkbox">
131-
<script src="js/events/combined_checkbox.js"></script>
120+
<div id="plot-tabs">
121+
<input type="button" id="plot-options-tab" value="Plot Options" style="grid-column:1; height: auto;" class="plot-tab selected-tab">
122+
<input type="button" id="reference-axes-tab" value="Reference Axes" style="grid-column:2; height: auto;" class="plot-tab">
123+
<input type="button" id="nucleosome-slider-tab" value="Nucleosome Slider" style="grid-column:3; height: auto;" class="plot-tab">
124+
<script src="js/events/plot_tabs.js"></script>
132125
</div>
133-
<div>
134-
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
135-
<input id="separate-color-checkbox" type="checkbox">
136-
<script src="js/events/separate_color_checkbox.js"></script>
137-
</div>
138-
<div>
139-
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
140-
<input id="color-trace-checkbox" type="checkbox">
141-
<script src="js/events/color_trace_checkbox.js"></script>
142-
</div>
143-
<div>
144-
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
145-
<input id="tooltip-checkbox" type="checkbox" checked>
146-
<script src="js/events/tooltip_checkbox.js"></script>
126+
<div style="display: block;" id="plot-options" class="plot-pane">
127+
<div id="settings-dropdown"></div>
128+
<script src="js/widgets/preset_dropdown.js"></script>
129+
<div id="opacity-input"></div>
130+
<script src="js/widgets/opacity_input.js"></script>
131+
<div id="smoothing-input"></div>
132+
<script src="js/widgets/smoothing_input.js"></script>
133+
<div id="shift-input"></div>
134+
<script src="js/widgets/shift_input.js"></script>
135+
<div>
136+
<label for="combined-checkbox" id="combined-label">Combined</label>
137+
<input id="combined-checkbox" type="checkbox">
138+
<script src="js/events/combined_checkbox.js"></script>
139+
</div>
140+
<div>
141+
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
142+
<input id="separate-color-checkbox" type="checkbox">
143+
<script src="js/events/separate_color_checkbox.js"></script>
144+
</div>
145+
<div>
146+
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
147+
<input id="color-trace-checkbox" type="checkbox">
148+
<script src="js/events/color_trace_checkbox.js"></script>
149+
</div>
150+
<div>
151+
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
152+
<input id="tooltip-checkbox" type="checkbox" checked>
153+
<script src="js/events/tooltip_checkbox.js"></script>
154+
</div>
155+
<div>
156+
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
157+
<input id="show-legend-checkbox" type="checkbox" checked>
158+
<script src="js/events/show_legend_checkbox.js"></script>
159+
</div>
160+
<div>
161+
<input type="button" id="download-svg-button" value="Download as SVG">
162+
<script src="js/events/download_svg_button.js"></script>
163+
</div>
147164
</div>
148-
<div>
149-
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
150-
<input id="show-legend-checkbox" type="checkbox" checked>
151-
<script src="js/events/show_legend_checkbox.js"></script>
165+
<div style="display: none;" id="nucleosome-slider-options" class="plot-pane">
166+
<div id="nucleosome-slider">
167+
<svg id="nucleosome-svg" class="nucleosome-svg" style="display: inline; width:146px; height:50px; position:relative;" xmlns="http://www.w3.org/2000/svg">
168+
<rect width="100%" height="100%" style="fill:rgb(46, 139, 185);stroke-width:5;stroke:rgb(3, 100, 122)" />
169+
</svg>
170+
</div>
171+
<div>
172+
<label for="nucleosome-start-text" style="display: inline-block; margin-top: 10px;">Starting coord</label>
173+
<input type="text" id="nucleosome-start-text" value="0" style="display: inline;">
174+
</div>
175+
<div>
176+
<label for="nucleosome-projection-text" style="display: inline-block;">Project to nucleosome</label>
177+
<input type="text" id="nucleosome-projection-text" value="" style="display: inline;border-style:solid; border-color:yellow; border-width:3px">
178+
</div>
179+
<div>
180+
<label for="mark-nucleosome-text" style="display: inline-block; margin-top: 10px">Mark nucleosome</label>
181+
<input type="text" id="mark-nucleosome-text" value="" style="display: inline;border-style:solid; border-color:rgb(205, 233, 255); border-width:3px">
182+
</div>
183+
<div>
184+
<input type="button" id="generate-3D-button" value="Generate 3D Visual" style="margin-top: 10px;">
185+
</div>
186+
<div>
187+
<label for="keep-nucleosome" id="keep-nucleosome-lable">Keep nucleosome on plot</label>
188+
<input type="checkbox" id="keep-nucleosome" label="Plot Nucleosome" style="margin-top: 15px;">
189+
</div>
190+
<script src="js/widgets/nucleosome_slider.js"></script>
191+
<script src="js/events/generate_3D_Button.js"></script>
152192
</div>
153-
<div>
154-
<input type="button" id="download-svg-button" value="Download as SVG">
155-
<script src="js/events/download_svg_button.js"></script>
193+
<div style="display: none;" id="reference-axes-pane" class="plot-pane">
194+
<label for="y-axis-lines" style="float: left;">Y-Axis Lines</label>
195+
<div class="reference-table-div">
196+
<table id="y-axis-lines" class="reference-lines-table"></table>
197+
</div>
198+
<svg id="y-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
199+
<circle r="15" cx="15" cy="15" fill="grey" />
200+
<path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
201+
</svg>
202+
<label for="x-axis-lines" style="float: left;">X-Axis Lines</label>
203+
<div class="reference-table-div">
204+
<table id="x-axis-lines" class="reference-lines-table"></table> </table>
205+
</div>
206+
<svg id="x-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
207+
<circle r="15" cx="15" cy="15" fill="grey" />
208+
<path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
209+
</svg>
210+
<div>
211+
<label for="keep-reference-lines" id="keep-reference-lable">Keep reference lines on plot</label>
212+
<input type="checkbox" id="keep-reference-lines" style="margin-top: 15px;">
213+
</div>
214+
<script src="js/widgets/reference_axes.js"></script>
156215
</div>
157216
</div>
158-
</div>
159217
</div>
160218
</div>
161219
<div class="row">

‎js/events/export_json_button.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ $(function() {
44
metadata: $("#metadata-table").metadata_table("export"),
55
settings: $("#settings-table").settings_table("export"),
66
plot: $("#main-plot").main_plot("export"),
7+
reference_axes: $("#reference-axes-pane").reference_axes("export"),
8+
nucleosome_slider: $("#nucleosome-slider").nucleosome_slider("export"),
79
preset: $("#settings-dropdown").settings_dropdown("get_value"),
810
separate_color: d3.select("#separate-color-checkbox").property("checked")
911
},

‎js/events/generate_3d_Button.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
$(function() {
2+
d3.select("#generate-3D-button").on("click", function() {
3+
//Parse projection coords
4+
start = parseInt($("#nucleosome-slider").nucleosome_slider("get_starting_coord"));
5+
length = $("#nucleosome-slider").nucleosome_slider("get_length")
6+
projection_coords = $("#nucleosome-slider").nucleosome_slider("get_projection_coords");
7+
projection_coords_i = "";
8+
projection_coords_j = "";
9+
for (coord of projection_coords){
10+
if (coord != ""){
11+
projection_coords_i += (parseInt(coord) - start) + ",";
12+
projection_coords_j += (length - (parseInt(coord) - start)) + ",";
13+
}
14+
}
15+
projection_coords_i = projection_coords_i.substring(0, projection_coords_i.length - 1);
16+
projection_coords_j = projection_coords_j.substring(0, projection_coords_j.length - 1);
17+
//Parse mark coords
18+
mark_coords = $("#nucleosome-slider").nucleosome_slider("get_mark_coords");
19+
mark_coords_i = "";
20+
mark_coords_j = "";
21+
for (coord of mark_coords){
22+
if (coord != ""){
23+
mark_coords_i += (parseInt(coord)) + ",";
24+
mark_coords_j += (length - parseInt(coord)) + ",";
25+
}
26+
}
27+
mark_coords_i = mark_coords_i.substring(0, mark_coords_i.length - 1);
28+
mark_coords_j = mark_coords_j.substring(0, mark_coords_j.length - 1);
29+
//Create and open url
30+
let url = "https://3dmol.org/viewer.html?pdb=2cv5&select=all&style=cartoon:color~gray&select=resi:" +
31+
projection_coords_i +
32+
";chain:I&style=cartoon:color~yellow;stick&select=resi:" +
33+
projection_coords_j +
34+
";chain:J&style=cartoon:color~yellow;stick&select=resi:"+
35+
mark_coords_i +
36+
";chain:I&style=cartoon:color~lightblue;stick&select=resi:" +
37+
mark_coords_j +
38+
";chain:J&style=cartoon:color~lightblue;&select=resi:"+
39+
projection_coords_i + "," + mark_coords_i +
40+
";chain:I&labelres=backgroundOpacity:0.8;fontSize:14&select=resi:" +
41+
projection_coords_j + "," + mark_coords_j +
42+
";chain:J&labelres=backgroundOpacity:0.8;fontSize:14";
43+
window.open(url);
44+
})
45+
})

‎js/events/import_json_button.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ $(function() {
4747
};
4848
$("#settings-table").settings_table("import", data.settings);
4949
$("#metadata-table").metadata_table("import", data.metadata);
50+
if ("reference_axes" in data){
51+
$("#reference-axes-pane").reference_axes("import", data.reference_axes);
52+
}
53+
if ("nucleosome_slider" in data){
54+
$("#nucleosome-slider").nucleosome_slider("import", data.nucleosome_slider);
55+
}
5056
$("#main-plot").main_plot("update_legend");
5157
if (data.preset) {
5258
$("#settings-dropdown").settings_dropdown("set_value", data.preset)

‎js/events/load_composite_button.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ $(function() {
2222

2323
$("#settings-table").settings_table("plot_all_composites", {xmin: xmin, xmax: xmax, ymax: ymax}, allow_shrink=true);
2424
$("#main-plot").main_plot("update_legend")
25+
$("#enable-nucleosome-button").prop("disabled", false);
2526
};
2627

2728
reader.readAsText(file);

‎js/events/plot_tabs.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
$(function() {
2+
d3.select("#plot-options-tab").on("click", function() {
3+
showPane("plot-options", this);
4+
$("#main-plot").main_plot("toggle_tooltip", true);
5+
})
6+
d3.select("#reference-axes-tab").on("click", function() {
7+
showPane("reference-axes-pane", this);
8+
$("#main-plot").main_plot("toggle_tooltip", false);
9+
$("#reference-axes-pane").reference_axes("plot_lines");
10+
})
11+
d3.select("#nucleosome-slider-tab").on("click", function() {
12+
showPane("nucleosome-slider-options", this);
13+
$("#main-plot").main_plot("toggle_tooltip", false);
14+
$("#nucleosome-slider").nucleosome_slider("update_all");
15+
})
16+
17+
function showPane(id, tab){
18+
var panes = d3.selectAll(".plot-pane");
19+
panes.each(function() {
20+
pane = d3.select(this);
21+
console.log(pane.attr("id"));
22+
if (pane.attr("id") != id){
23+
pane.style("display", "none");
24+
} else {
25+
pane.style("display", "block");
26+
}
27+
});
28+
var tabs = d3.selectAll(".plot-tab");
29+
tabs.each(function() {
30+
d3.select(this).classed("selected-tab", false);
31+
})
32+
d3.select(tab).classed("selected-tab", true);
33+
34+
if (d3.select("#keep-nucleosome").property("checked") == false){
35+
d3.select("#nucleosome-svg-layer")
36+
.selectAll("*")
37+
.remove();
38+
d3.select("#coord-svg-layer")
39+
.selectAll("*")
40+
.remove();
41+
}
42+
if (d3.select("#keep-reference-lines").property("checked") == false){
43+
d3.select("#reference-axes-layer")
44+
.selectAll("*")
45+
.remove();
46+
}
47+
}
48+
})

‎js/widgets/axes_input.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ $(function() {
2727
let container = d3.select(this.element.context),
2828
xaxis = container.append("div")
2929
.style("user-select","none")
30+
.style("padding-left","30px")
3031
.attr("class", "row")
3132
.append("div")
3233
.attr("class", "col"),
3334
yaxis = container.append("div")
3435
.style("user-select","none")
36+
.style("padding-left","30px")
3537
.attr("class", "row")
3638
.append("div")
3739
.attr("class", "col");

0 commit comments

Comments
 (0)