Skip to content

Commit 21217a2

Browse files
benjaminbeer256benjaminbeer256
committed
fixed lots of bugs with reference lines and nucleosome slider
still need to fix tooltip
1 parent 69061c1 commit 21217a2

5 files changed

Lines changed: 75 additions & 71 deletions

File tree

‎js/events/plot_tabs.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
$(function() {
22
d3.select("#plot-options-tab").on("click", function() {
3-
showPane("plot-options", this)
3+
showPane("plot-options", this);
4+
$("#main-plot").main_plot("toggle_tooltip", true);
45
})
56
d3.select("#reference-axes-tab").on("click", function() {
67
showPane("reference-axes-pane", this);
78
$("#main-plot").main_plot("toggle_tooltip", false);
9+
d3.select("#reference-axes-layer").attr("display", "block")
10+
$("#reference-axes-pane").reference_axes("plot_lines");
811
})
912
d3.select("#nucleosome-slider-tab").on("click", function() {
1013
showPane("nucleosome-slider-options", this);

‎js/widgets/main_plot.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,6 @@ $(function() {
4444
legend_items: []
4545
},
4646

47-
get_xscale: function(){
48-
return this.xscale;
49-
},
50-
51-
get_yscale: function(){
52-
return this.yscale;
53-
},
54-
55-
get_dimensions: function(){
56-
return [this.height, this.width, this.margins.right, this.margins.bottom, this.margins.left, this.margins.top];
57-
},
58-
5947
get_combined: function(){
6048
return this.combined;
6149
},
@@ -595,6 +583,7 @@ $(function() {
595583
$("#axes-input").axes_input("change_axis_limits", this.xmin, this.xmax, this.ymin, this.ymax, false)
596584
}
597585
$("#nucleosome-slider").nucleosome_slider("update_all");
586+
$("#reference-axes-pane").reference_axes("update_all");
598587
},
599588

600589
update_legend: function() {

‎js/widgets/nucleosome_slider.js‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,10 @@ $(function() {
88
this.start_coord = 0;
99
this.nucleosome_length = 146;
1010
this.plot_svg_height = 18;
11-
this.main_plot_scale = $("#main-plot").main_plot("get_xscale");
12-
this.plot_dimensions = $("#main-plot").main_plot("get_dimensions");
11+
this.main_plot = $("#main-plot").main_plot("instance");
1312
this.plot_points = null;
1413
this.projection_coords = [];
1514
this.mark_coords = [];
16-
this.bp_to_px = (this.plot_dimensions[1] - this.plot_dimensions[2] - this.plot_dimensions[4]) / (this.main_plot_scale.domain()[1] - this.main_plot_scale.domain()[0]);
1715

1816
this.attach_event_handlers();
1917

@@ -99,8 +97,8 @@ $(function() {
9997
this.selected_element.setAttribute("x", newX + "px");
10098
if (this.selected_element.getAttribute("class").includes("nucleosome-svg")) {
10199
//Update start text if selected element is nucleosome
102-
this.start_coord = parseInt((newX - this.main_plot_scale(0)) * (1 / this.bp_to_px));
103-
this.start_text.property("value", this.start_coord);
100+
this.start_coord = this.main_plot.xscale.invert(newX);
101+
this.start_text.property("value", this.start_coord.toFixed(0));
104102
} else if (this.selected_element.getAttribute("class").includes("plotted-coord")) {
105103
//Otherwise use generic method
106104
this.update_text_box();
@@ -137,7 +135,7 @@ $(function() {
137135
}
138136
} else if (this.selected_element.getAttribute("class").includes("plotted-coord")) {
139137
let plottedCoords = d3.select("#coord-svg-layer").selectAll(".plotted-coord");
140-
this.projection_coords = plottedCoords.nodes().map((element) => parseInt(parseInt(parseFloat(element.getAttribute("x")) - this.main_plot_scale(0)) * (1 / this.bp_to_px)));
138+
this.projection_coords = plottedCoords.nodes().map((element) => this.main_plot.xscale.invert(parseInt(element.getAttribute("x"))).toFixed(0));
141139
this.projection_text.property("value", this.projection_coords.join(","));
142140
}
143141
}
@@ -154,23 +152,18 @@ $(function() {
154152
let new_nucleosome = d3.select(nucleosome_svg.cloneNode(true));
155153
//Calculate dimensions
156154
this.start_coord = d3.select("#nucleosome-start-text").property("value");
157-
let new_width = this.nucleosome_length * this.bp_to_px;
158-
let starting_pos = this.main_plot_scale(0) + this.start_coord * this.bp_to_px;
155+
let new_width = this.nucleosome_length * (this.main_plot.xscale(1) - this.main_plot.xscale(0));
156+
let starting_pos = this.main_plot.xscale(this.start_coord);
159157
new_nucleosome.attr("height", self.plot_svg_height + "px")
160158
.attr("width", new_width + "px")
161159
.attr("x", starting_pos + "px")
162160
.attr("id", "nucleosome-svg-plot")
161+
.attr("y", this.main_plot.yscale(0) - self.plot_svg_height / 2)
163162
.selectAll(".mark-coord")
164163
.attr("width", "2px")
165164
.attr("stroke-width", "1px")
166165
new_nucleosome.selectAll(".projection-coord")
167166
.remove();
168-
//Place on x-axis if plot is combined
169-
if ($("#main-plot").main_plot("get_combined")){
170-
new_nucleosome.attr("y", self.plot_dimensions[0] - self.plot_dimensions[3] - self.plot_svg_height / 2 - 2 + "px");
171-
} else {
172-
new_nucleosome.attr("y", (self.plot_dimensions[0] - self.plot_svg_height) / 2 - 2 + "px");
173-
}
174167
//Add dragging listeners
175168
new_nucleosome.on("mousedown", function(e) {
176169
self.start_dragging(e, d3.select("#nucleosome-svg-plot").node());
@@ -203,18 +196,13 @@ $(function() {
203196
.attr("width", "2px")
204197
.attr("stroke-width", "1px")
205198
.attr("stroke", "black")
206-
.attr("x", self.main_plot_scale(0) + coord * self.bp_to_px + "px")
207-
.attr("y", (self.plot_dimensions[0] - self.plot_svg_height) / 2 - 2 + "px") // 2px subtracted to account for outline
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
208201
.attr("height", self.plot_svg_height + "px")
209202
.style("fill", "rgb(255, 252, 97)")
210203
.on("mousedown", function(e) {
211204
self.start_dragging(e, d3.select(this).node());
212205
})
213-
if ($("#main-plot").main_plot("get_combined")){
214-
coordElement.attr("y", self.plot_dimensions[0] - self.plot_dimensions[3] - self.plot_svg_height / 2 - 2 + "px");
215-
} else {
216-
coordElement.attr("y", (self.plot_dimensions[0] - self.plot_svg_height) / 2 - 2 + "px");
217-
}
218206
i += 1;
219207
}
220208
}
@@ -225,12 +213,11 @@ $(function() {
225213
//Remove old pointers and add new ones to plot based on widget arrays
226214
let self = this;
227215
d3.select("#coord-svg-layer").selectAll(".pointer").remove();
228-
let y_axis = self.main_plot_scale(0);
229216
if (this.plot_points) {
230217
let i = 0;
231218
for (var coord of this.projection_coords) {
232219
if (coord != "" && !isNaN(coord)){
233-
let x = y_axis + coord * self.bp_to_px;
220+
let x = this.main_plot.xscale(parseInt(coord));
234221
let y = this.plot_points.get(parseInt(x));
235222
d3.select("#coord-svg-layer").append("circle")
236223
.attr("id", "projection-" + i)
@@ -242,8 +229,8 @@ $(function() {
242229
}
243230
i = 0;
244231
for (var coord of this.mark_coords) {
245-
if (coord != ""){
246-
let x = y_axis + ((parseInt(coord) + parseInt(self.start_coord)) * self.bp_to_px);
232+
if (coord != "" && !isNaN(coord)) {
233+
let x = this.main_plot.xscale(parseInt(coord));
247234
let y = this.plot_points.get(parseInt(x));
248235
d3.select("#coord-svg-layer").append("circle")
249236
.attr("id", "mark-" + i)
@@ -319,10 +306,7 @@ $(function() {
319306
},
320307

321308
update_plot_stats(){
322-
//Update plot dimensions and points on the composite plot
323-
this.main_plot_scale = $("#main-plot").main_plot("get_xscale");
324-
this.plot_dimensions = $("#main-plot").main_plot("get_dimensions");
325-
this.bp_to_px = (this.plot_dimensions[1] - this.plot_dimensions[2] - this.plot_dimensions[4]) / (this.main_plot_scale.domain()[1] - this.main_plot_scale.domain()[0]);
309+
//Points on the composite plot
326310
this.get_plot_points();
327311
},
328312

‎js/widgets/reference_axes.js‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ $(function() {
3535
console.log(this._elements.styles.dashed);
3636
this.add_row(0, "#FF0000", this._elements.styles.dashed, this.y_table);
3737
this.add_row(0, "#FF0000", this._elements.styles.dashed, this.x_table);
38+
d3.select("#reference-axes-layer").attr("display", "none");
3839

3940
this.attach_event_handlers();
4041
},
@@ -58,36 +59,38 @@ $(function() {
5859
self = this;
5960
if (self.selected_element){
6061
var mousePos = this.get_mouse_pos(e);
61-
if (mousePos.y >= 0){
62-
valid_y = (mousePos.y < this.main_plot.margins.bottom);
63-
} else {
64-
valid_y = (mousePos.y * -1 < this.main_plot.height - (this.main_plot.margins.top + this.main_plot.margins.bottom * 2));
65-
}
66-
valid_x = this.main_plot.margins.left < mousePos.x && mousePos.x < this.main_plot.width - this.main_plot.margins.right
67-
if (valid_x && valid_y){
68-
if (this.selected_element.getAttribute("class").includes("x-reference")){
62+
if (this.selected_element.getAttribute("class").includes("x-reference")){
6963
var currentX = parseFloat(this.selected_element.getAttribute("x1"));
64+
if (this.main_plot.margins.left < currentX && currentX < this.main_plot.width - this.main_plot.margins.right){
7065
var newX = currentX + (mousePos.x - this.offset.x);
7166
this.selected_element.setAttribute("x1", newX + "px");
7267
this.selected_element.setAttribute("x2", newX + "px");
73-
var array = this._elements.x_lines.find(x => x.number === parseInt(self.selected_element.getAttribute("number")));
68+
var array = this._elements.x_lines.find(x => {
69+
if (x !== undefined) {
70+
return x.number === parseInt(self.selected_element.getAttribute("number"));
71+
}
72+
});
7473
array.coordinate = parseInt(this.main_plot.xscale.invert(newX));
75-
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
76-
var currentY = parseFloat(this.selected_element.getAttribute("y2"));
74+
}
75+
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
76+
console.log(this._elements.y_lines);
77+
78+
var currentY = parseFloat(this.selected_element.getAttribute("y2"));
79+
if(currentY > this.main_plot.margins.top && currentY < this.main_plot.height - this.main_plot.margins.bottom){
7780
var newY = currentY + (mousePos.y - this.offset.y);
7881
this.selected_element.setAttribute("y1", newY + "px");
7982
this.selected_element.setAttribute("y2", newY + "px");
80-
var array = this._elements.y_lines.find(y => y.number === parseInt(self.selected_element.getAttribute("number")));
83+
var array = this._elements.y_lines.find(y => {
84+
if (y !== undefined) {
85+
return y.number === parseInt(self.selected_element.getAttribute("number"));
86+
}
87+
});
8188
array.coordinate = this.main_plot.yscale.invert(Math.abs(newY)).toFixed(2);
8289
}
83-
this.offset = this.get_mouse_pos(e);
84-
this.update_tables();
85-
this.add_plot_numbers();
86-
}
87-
else {
88-
//End dragging if not on composite
89-
this.end_dragging();
9090
}
91+
this.offset = this.get_mouse_pos(e);
92+
this.update_tables();
93+
this.add_plot_numbers();
9194
}
9295
},
9396

@@ -309,34 +312,48 @@ $(function() {
309312
add_plot_numbers: function(){
310313
d3.select("#reference-axes-layer").selectAll("text").remove();
311314
for (var line of self._elements.x_lines) {
312-
d3.select("#reference-axes-layer").append("text")
313-
.attr("x", self.main_plot.xscale(line.coordinate) - 4)
314-
.attr("y", self.main_plot.yscale(self.main_plot.ymin) + 8)
315-
.style("text-align", "middle")
316-
.style("fill", line.color)
317-
.attr("font-size", "8px")
318-
.text(line.coordinate);
315+
if (line !== undefined){
316+
d3.select("#reference-axes-layer").append("text")
317+
.attr("x", self.main_plot.xscale(line.coordinate) - 4)
318+
.attr("y", self.main_plot.yscale(self.main_plot.ymin) + 8)
319+
.style("text-align", "middle")
320+
.style("fill", line.color)
321+
.attr("font-size", "8px")
322+
.text(line.coordinate);
323+
}
319324
}
320325
for (var line of self._elements.y_lines) {
326+
if (line !== undefined){
321327
d3.select("#reference-axes-layer").append("text")
322328
.attr("x", self.main_plot.xscale(self.main_plot.xmax) + 5)
323329
.attr("y", self.main_plot.yscale(line.coordinate) + 4)
324330
.style("text-align", "middle")
325331
.style("fill", line.color)
326332
.attr("font-size", "8px")
327333
.text(line.coordinate);
334+
}
328335
}
329336
},
330337

331338
update_tables:function(){
332339
for (var line of this._elements.x_lines) {
340+
if (line !== undefined){
333341
row =this.x_table.selectAll("tr").filter(function() {return parseInt(d3.select(this).attr("number")) == parseInt(line.number);});
334342
row.select(".coord_input").attr("value", line.coordinate);
343+
}
335344
}
336345
for (var line of this._elements.y_lines) {
346+
if (line !== undefined){
337347
row =this.y_table.selectAll("tr").filter(function() {return parseInt(d3.select(this).attr("number")) == parseInt(line.number);});
338348
row.select(".coord_input").attr("value", line.coordinate);
349+
}
339350
}
351+
},
352+
353+
update_all:function(){
354+
this.plot_lines();
355+
this.update_tables();
356+
this.add_plot_numbers();
340357
}
341358
});
342359

‎style.css‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,13 @@ td.remove-row {
125125
#settings-table .added-table {
126126
width: 100%;
127127
cursor: grab;
128+
border-collapse: separate;
129+
border: 1px solid black;
128130
}
129131

130132
#settings-table .added-table td{
131-
min-height: 60px;
133+
min-height: 55px;
134+
border-top: 0px;
132135
}
133136

134137
#settings-table .slider-div {
@@ -144,11 +147,10 @@ td.remove-row {
144147

145148
#settings-table .settings-row {
146149
width: 100%;
147-
border: 1px solid;
148150
}
149151

150152
.mouse-highlight {
151-
border: 3px solid #8888FF;
153+
border: 3px solid #8888FF !important;
152154
}
153155

154156
.drag-highlight {
@@ -226,4 +228,13 @@ td.remove-row {
226228
background-color: white;
227229
border: 2px solid;
228230
display: none;
231+
}
232+
233+
#main-plot text::selection{
234+
background: none;
235+
}
236+
237+
#axes-input::selection, #axes-input *> :not(input)::selection {
238+
background: none;
239+
229240
}

0 commit comments

Comments
 (0)