Skip to content

Commit a1b1a8d

Browse files
benjaminbeer256benjaminbeer256
committed
added import/export for nucleosome slider and references axes
also changed the nucleosome slider to store data in arrays instead of the html text boxes
1 parent f22fdcb commit a1b1a8d

4 files changed

Lines changed: 114 additions & 91 deletions

File tree

‎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/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/widgets/nucleosome_slider.js‎

Lines changed: 89 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,16 @@ $(function() {
2222
attach_event_handlers: function() {
2323
let self = this;
2424
this.projection_text.on("input", function() {
25+
self.projection_coords = d3.select(this).property("value").split(",");
2526
self.svg_projection_coords();
2627
self.plot_projection_coords();
2728
});
2829
this.mark_text.on("input", function() {
30+
self.mark_coords = d3.select(this).property("value").split(",");
2931
self.svg_mark_coords();
3032
});
3133
this.start_text.on("input", function() {
34+
self.start_coord = d3.select(this).property("value");
3235
self.plot_nucleosome();
3336
});
3437
d3.select("#main-plot")
@@ -66,7 +69,7 @@ $(function() {
6669

6770
start_dragging: function(e, element) {
6871
//Update plot stats and assign selected element
69-
this.update_plot_stats();
72+
this.get_plot_points();
7073
this.selected_element = element;
7174
this.offset = this.get_mouse_pos(e);
7275
},
@@ -79,9 +82,14 @@ $(function() {
7982
this.selected_element.setAttribute("x", newX + "%");
8083
//Update plot and text box
8184
if (this.selected_element.getAttribute("class").includes("mark-coord")){
85+
let svg_coords = this.svg.selectAll(".mark-coord");
86+
this.mark_coords = svg_coords.nodes().map((element) => parseInt(parseFloat(element.getAttribute("x")) * this.nucleosome_length * .01));
8287
this.plot_nucleosome();
88+
} else if (this.selected_element.getAttribute("class").includes("projection-coord")){
89+
let svg_coords = this.svg.selectAll(".projection-coord");
90+
this.projection_coords = svg_coords.nodes().map((element) => parseInt(parseFloat(element.getAttribute("x")) * this.nucleosome_length * .01 + parseInt(this.start_coord)));
8391
}
84-
this.update_text_box();
92+
this.update_text_boxes();
8593
this.plot_projection_coords();
8694
this.offset = this.get_mouse_pos(e);
8795
}
@@ -100,9 +108,11 @@ $(function() {
100108
this.start_coord = this.main_plot.xscale.invert(newX);
101109
this.start_text.property("value", this.start_coord.toFixed(0));
102110
} else if (this.selected_element.getAttribute("class").includes("plotted-coord")) {
103-
//Otherwise use generic method
104-
this.update_text_box();
111+
//Update arrays accordingly based on if the coord is on svg or plot
112+
let plottedCoords = d3.select("#coord-svg-layer").selectAll(".plotted-coord");
113+
this.projection_coords = plottedCoords.nodes().map((element) => this.main_plot.xscale.invert(parseInt(element.getAttribute("x"))).toFixed(0));
105114
}
115+
this.update_text_boxes();
106116
this.plot_pointers();
107117
this.svg_projection_coords();
108118
this.offset = this.get_mouse_pos(e);
@@ -119,26 +129,11 @@ $(function() {
119129
this.update_all();
120130
},
121131

122-
update_text_box: function() {
132+
update_text_boxes: function() {
123133
//Update text values based on selected element
124-
if (this.selected_element){
125-
let start = this.start_coord;
126-
if (this.selected_element.getAttribute("class").includes("svg-coord")){
127-
if (this.selected_element.getAttribute("class").includes("mark-coord")){
128-
let svg_coords = this.svg.selectAll(".mark-coord");
129-
this.mark_coords = svg_coords.nodes().map((element) => parseInt(parseFloat(element.getAttribute("x")) * this.nucleosome_length * .01));
130-
this.mark_text.property("value", this.mark_coords.join(","));
131-
} else if (this.selected_element.getAttribute("class").includes("projection-coord")){
132-
let svg_coords = this.svg.selectAll(".projection-coord");
133-
this.projection_coords = svg_coords.nodes().map((element) => parseInt(parseFloat(element.getAttribute("x")) * this.nucleosome_length * .01 + parseInt(start)));
134-
this.projection_text.property("value", this.projection_coords.join(","));
135-
}
136-
} else if (this.selected_element.getAttribute("class").includes("plotted-coord")) {
137-
let plottedCoords = d3.select("#coord-svg-layer").selectAll(".plotted-coord");
138-
this.projection_coords = plottedCoords.nodes().map((element) => this.main_plot.xscale.invert(parseInt(element.getAttribute("x"))).toFixed(0));
139-
this.projection_text.property("value", this.projection_coords.join(","));
140-
}
141-
}
134+
this.mark_text.property("value", this.mark_coords.join(","));
135+
this.projection_text.property("value", this.projection_coords.join(","));
136+
this.start_text.property("value", parseInt(this.start_coord));
142137
},
143138

144139
plot_nucleosome: function() {
@@ -151,7 +146,6 @@ $(function() {
151146
let nucleosome_svg = this.svg.node();
152147
let new_nucleosome = d3.select(nucleosome_svg.cloneNode(true));
153148
//Calculate dimensions
154-
this.start_coord = d3.select("#nucleosome-start-text").property("value");
155149
let new_width = this.nucleosome_length * (this.main_plot.xscale(1) - this.main_plot.xscale(0));
156150
let starting_pos = this.main_plot.xscale(this.start_coord);
157151
new_nucleosome.attr("height", self.plot_svg_height + "px")
@@ -185,26 +179,23 @@ $(function() {
185179
plot_projection_coords(){
186180
//Get new values and remove old coords
187181
let self = this;
188-
this.projection_coords = this.projection_text.property("value").split(",");
189182
d3.select("#coord-svg-layer").selectAll(".plotted-coord").remove();
190-
if (this.projection_text.property("value") !== "") {
191-
let i = 0;
192-
for (var coord of this.projection_coords) {
193-
let coordElement = d3.select("#coord-svg-layer").append("rect")
194-
.attr("id", "projection-coord-" + i)
195-
.attr("class", "projection-coord plotted-coord")
196-
.attr("width", "2px")
197-
.attr("stroke-width", "1px")
198-
.attr("stroke", "black")
199-
.attr("x", self.main_plot.xscale(coord))
200-
.attr("y", self.main_plot.yscale(0) - self.plot_svg_height / 2) // 2px subtracted to account for outline
201-
.attr("height", self.plot_svg_height + "px")
202-
.style("fill", "rgb(255, 252, 97)")
203-
.on("mousedown", function(e) {
204-
self.start_dragging(e, d3.select(this).node());
205-
})
206-
i += 1;
207-
}
183+
let i = 0;
184+
for (var coord of this.projection_coords) {
185+
let coordElement = d3.select("#coord-svg-layer").append("rect")
186+
.attr("id", "projection-coord-" + i)
187+
.attr("class", "projection-coord plotted-coord")
188+
.attr("width", "2px")
189+
.attr("stroke-width", "1px")
190+
.attr("stroke", "black")
191+
.attr("x", self.main_plot.xscale(coord))
192+
.attr("y", self.main_plot.yscale(0) - self.plot_svg_height / 2) // 2px subtracted to account for outline
193+
.attr("height", self.plot_svg_height + "px")
194+
.style("fill", "rgb(255, 252, 97)")
195+
.on("mousedown", function(e) {
196+
self.start_dragging(e, d3.select(this).node());
197+
})
198+
i += 1;
208199
}
209200
self.plot_nucleosome();
210201
},
@@ -253,61 +244,47 @@ $(function() {
253244
//Update projection coords on large nucleosome svg
254245
let self = this;
255246
self.svg.selectAll(".projection-coord").remove();
256-
if (self.projection_text.property("value") !== "") {
257-
let projections = self.projection_text.property("value").split(",");
258-
let i = 0;
259-
for (var coord of projections) {
247+
let i = 0;
248+
for (var coord of self.projection_coords) {
249+
self.svg.append("rect")
250+
.attr("id", "mark-coord-" + i)
251+
.attr("class", "projection-coord svg-coord")
252+
.attr("width", "5px")
253+
.attr("stroke-width", "2px")
254+
.attr("stroke", "black")
255+
.attr("x", (coord - self.start_coord) / self.nucleosome_length * 100 - 2 + "%")
256+
.attr("height", "100%")
257+
.style("fill", "rgb(255, 252, 97)")
258+
.on("mousedown", function(e) {
259+
self.start_dragging(e, this);
260+
});
261+
i += 1;
262+
}
263+
},
264+
265+
svg_mark_coords() {
266+
//Update mark coords large on large nucleosome svg
267+
let self = this;
268+
self.svg.selectAll(".mark-coord").remove();
269+
let i = 0;
270+
for (var coord of self.mark_coords) {
271+
if (coord > -1) {
260272
self.svg.append("rect")
261273
.attr("id", "mark-coord-" + i)
262-
.attr("class", "projection-coord svg-coord")
274+
.attr("class", "mark-coord svg-coord")
263275
.attr("width", "5px")
264276
.attr("stroke-width", "2px")
265277
.attr("stroke", "black")
266-
.attr("x", (coord - self.start_coord) / self.nucleosome_length * 100 - 2 + "%")
278+
.attr("x", coord / self.nucleosome_length * 100 - 2.5 + "%")
267279
.attr("height", "100%")
268-
.style("fill", "rgb(255, 252, 97)")
280+
.style("fill", "rgb(205, 233, 255)")
269281
.on("mousedown", function(e) {
270282
self.start_dragging(e, this);
271283
});
272-
i += 1;
273284
}
274-
285+
i += 1;
275286
}
276-
},
277-
278-
svg_mark_coords() {
279-
//Update mark coords large on large nucleosome svg
280-
let self = this;
281-
this.mark_text.on("input", function() {
282-
self.svg.selectAll(".mark-coord").remove();
283-
if (self.mark_text.property("value") !== "") {
284-
self.mark_coords = self.mark_text.property("value").split(",");
285-
let i = 0;
286-
for (var coord of self.mark_coords) {
287-
if (coord > -1) {
288-
self.svg.append("rect")
289-
.attr("id", "mark-coord-" + i)
290-
.attr("class", "mark-coord svg-coord")
291-
.attr("width", "5px")
292-
.attr("stroke-width", "2px")
293-
.attr("stroke", "black")
294-
.attr("x", coord / self.nucleosome_length * 100 - 2.5 + "%")
295-
.attr("height", "100%")
296-
.style("fill", "rgb(205, 233, 255)")
297-
.on("mousedown", function(e) {
298-
self.start_dragging(e, this);
299-
});
300-
}
301-
i += 1;
302-
}
303-
}
304-
self.plot_nucleosome();
305-
});
306-
},
307-
308-
update_plot_stats(){
309-
//Points on the composite plot
310-
this.get_plot_points();
287+
self.plot_nucleosome();
311288
},
312289

313290
get_plot_points() {
@@ -324,19 +301,19 @@ $(function() {
324301
this.plot_points = map;
325302
}
326303
},
327-
328304

329305
update_all(){
330306
//Update all plots and figures if a valid composite is loaded
331-
this.update_plot_stats();
307+
this.get_plot_points();
332308
if (this.plot_points && (d3.select("#keep-nucleosome").property("checked") == true || d3.select("#nucleosome-slider-tab").classed("selected-tab"))){
333-
this.svg_mark_coords();
309+
this.svg_projection_coords();
334310
this.svg_mark_coords();
335311
this.plot_projection_coords();
336312
this.plot_nucleosome();
337313
this.plot_pointers();
338-
this.update_text_box();
314+
this.update_text_boxes();
339315
}
316+
console.log(this.projection_coords);
340317
},
341318

342319
get_projection_coords(){
@@ -353,6 +330,27 @@ $(function() {
353330

354331
get_length(){
355332
return this.nucleosome_length;
333+
},
334+
335+
export: function(){
336+
return{
337+
projection_coords: this.projection_coords,
338+
mark_coords: this.mark_coords,
339+
start_coord: this.start_coord
340+
}
341+
},
342+
343+
import: function(data){
344+
if ("projection_coords" in data){
345+
this.projection_coords = data.projection_coords;
346+
}
347+
if ("mark_coords" in data){
348+
this.mark_coords = data.mark_coords;
349+
}
350+
if ("start_coord" in data){
351+
this.start_coord = data.start_coord;
352+
}
353+
this.update_all();
356354
}
357355
});
358356
$("#nucleosome-slider").nucleosome_slider();

‎js/widgets/reference_axes.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,23 @@ $(function() {
362362
this.update_tables();
363363
this.add_plot_numbers();
364364
}
365+
},
366+
367+
export: function(){
368+
return{
369+
y_lines: this._elements.y_lines,
370+
x_lines: this._elements.x_lines,
371+
}
372+
},
373+
374+
import: function(data){
375+
if ("y_lines" in data){
376+
this._elements.y_lines = data.y_lines;
377+
}
378+
if ("x_lines" in data){
379+
this._elements.x_lines = data.x_lines;
380+
}
381+
this.update_all();
365382
}
366383
});
367384
$("#reference-axes-pane").reference_axes();

0 commit comments

Comments
 (0)