Skip to content

Commit d7ecc0a

Browse files
benjaminbeer256benjaminbeer256
committed
Added shift occupancy feature
1 parent 6a99f29 commit d7ecc0a

3 files changed

Lines changed: 97 additions & 59 deletions

File tree

‎js/widgets/main_plot.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ $(function() {
295295
this.update_legend()
296296
},
297297

298-
plot_composite: function(xmin, xmax, sense, anti, scale, color, secondary_color, i, opacity, smoothing, bp_shift, hide, hide_sense, hide_anti) {
298+
plot_composite: function(xmin, xmax, sense, anti, scale, color, secondary_color, i, opacity, smoothing, bp_shift, hide, hide_sense=false , hide_anti=false, baseline=0) {
299299
// Set composite visibility
300300
let composite = this._elements.composites[i]
301301
.classed("plotted", !hide)
@@ -323,9 +323,9 @@ $(function() {
323323
{new_xdomain, new_occupancy: smoothed_occupancy} = sliding_window(shifted_xdomain, combined_occupancy, smoothing),
324324
// Truncate x domain to x axis limits
325325
truncated_xdomain = new_xdomain.filter(x => x >= this.xmin && x <= this.xmax),
326-
// Truncate occupancy and scale by scale factor
326+
// Truncate occupancy and scale by scale factor, adding baseline
327327
scaled_occupancy = smoothed_occupancy.filter((_, j) => new_xdomain[j] >= this.xmin && new_xdomain[j] <= this.xmax)
328-
.map(d => d * scale);
328+
.map(d => ((value = d * scale + baseline) > 0)? value: 0);
329329

330330
// Set fill color
331331
composite.select(".composite-gradient-top")
@@ -403,9 +403,9 @@ $(function() {
403403
truncated_anti_domain = new_xdomain.map(x => x - bp_shift).filter(x => x >= this.xmin && x <= this.xmax),
404404
// Truncate sense and anti occupancy and scale by scale factor
405405
scaled_sense = smoothed_sense.filter((_, j) => new_xdomain[j] + bp_shift >= this.xmin
406-
&& new_xdomain[j] + bp_shift <= this.xmax).map(d => d * scale),
406+
&& new_xdomain[j] + bp_shift <= this.xmax).map(d => (value = d * scale + baseline) > 0? value: 0),
407407
scaled_anti = smoothed_anti.filter((_, j) => new_xdomain[j] - bp_shift >= this.xmin
408-
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => d * scale);
408+
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => (value = d * scale + baseline) > 0? value: 0);
409409

410410
let sense_path = "";
411411
if (!hide_sense){
@@ -458,8 +458,6 @@ $(function() {
458458
.attr("stop-color", secondary_color)
459459
.attr("stop-opacity", d => (1 - d) * 0);
460460
}
461-
console.log(!hide_sense);
462-
console.log(!hide_anti);
463461

464462
// Redraw composite trace
465463
if (this.color_trace) {
@@ -665,14 +663,6 @@ $(function() {
665663
this.update_legend()
666664
},
667665

668-
toggle_forward: function(i, hide){
669-
console.log(this._elements.composites[i]);
670-
},
671-
672-
toggle_reverse: function(i, hide){
673-
console.log(this._elements.composites[i]);
674-
},
675-
676666
change_order: function(drag_idx, drop_idx, insert_after) {
677667
if (drag_idx !== drop_idx) {
678668
let drag_comp = this._elements.composites[drag_idx],

‎js/widgets/settings_table.js‎

Lines changed: 82 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ $(function() {
178178
anti: null,
179179
composites: null,
180180
scale: 1,
181+
baseline: 0,
181182
opacity: false,
182183
smoothing: false,
183184
bp_shift: false,
@@ -231,7 +232,8 @@ $(function() {
231232
color_col = primary_row.append("td")
232233
.classed("color-col", true),
233234
scale_col = primary_row.append("td")
234-
.classed("scale-col", true),
235+
.classed("scale-col", true)
236+
.classed("slider-col", true),
235237
opacity_col = primary_row.append("td")
236238
.classed("opacity-col", true),
237239
smoothing_col = primary_row.append("td")
@@ -273,7 +275,7 @@ $(function() {
273275
name_col.append("div")
274276
.attr("contenteditable", true)
275277
.text(this.options.name)
276-
.style("width", "auto")
278+
.style("min-width", "5px")
277279
.on("input", function() {$(row.node()).settings_row("change_name", this.textContent)})
278280
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
279281
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
@@ -294,21 +296,9 @@ $(function() {
294296
.on("change", function() {$(row.node()).settings_row("change_secondary_color", this.value)});
295297
};
296298

297-
// Add scale input
298-
scale_col.append("label")
299-
.text("Scale:");
300-
scale_col.append("input")
301-
.attr("type", "text")
302-
.classed("setting-text", true)
303-
.attr("value", 1)
304-
.on("change", function() {$(row.node()).settings_row("change_scale", this.value)})
305-
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
306-
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
307-
.on("mouseleave", function() {$(row.node()).settings_row("toggle_draggable", true)});
308-
299+
309300
//creates a new slider for the scale input
310301
scale_col.append("input")
311-
.style("margin-left","10px")
312302
.attr("type", "range")
313303
.classed("scale-slider", true)
314304
.attr("value", 50)
@@ -318,6 +308,20 @@ $(function() {
318308
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
319309
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
320310

311+
scale_col.append("input")
312+
.attr("type", "text")
313+
.classed("setting-text", true)
314+
.attr("value", 1)
315+
.on("change", function() {$(row.node()).settings_row("change_scale", this.value)})
316+
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
317+
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
318+
.on("mouseleave", function() {$(row.node()).settings_row("toggle_draggable", true)});
319+
320+
// Add scale input
321+
scale_col.append("label")
322+
.text("Scale:");
323+
324+
321325
// Add opacity input
322326
opacity_col.append("label")
323327
.text("Opacity:");
@@ -450,10 +454,10 @@ $(function() {
450454
.style("display", "none");
451455

452456
col_one = more_options.append("td"),
453-
col_two = more_options.append("td"),
454457
baseline_col = more_options.append("td")
455458
.classed("baseline-col", true)
456-
.attr("colspan", "2"),
459+
.classed("slider-col", true)
460+
.attr("colspan", "3"),
457461
col_four = more_options.append("td"),
458462
col_five = more_options.append("td"),
459463
hide_strand_col = more_options.append("td")
@@ -466,28 +470,30 @@ $(function() {
466470
reset_col = more_options.append("td")
467471
.classed("reset-col", true);
468472

469-
baseline_col.append("label")
470-
.text("Shift occupancy:");
471-
baseline_col.append("input")
472-
.attr("type", "text")
473-
.classed("setting-text", true)
474-
.attr("value", 1)
475-
.on("change", function() {$(row.node()).settings_row("change_scale", this.value)})
476-
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
477-
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
478-
.on("mouseleave", function() {$(row.node()).settings_row("toggle_draggable", true)});
479-
480473
//creates a new slider for the scale input
481474
baseline_col.append("input")
482-
.style("margin-left","10px")
475+
.style("float", "right")
483476
.attr("type", "range")
484-
.classed("scale-slider", true)
477+
.classed("shift-slider", true)
485478
.attr("value", 50)
486479
.attr("min", 1)
487480
.attr("max", 100)
488-
.on("input", function() {$(row.node()).settings_row("change_scale", 10 ** ((this.value - 50)/50))})
481+
.on("input", function() {$(row.node()).settings_row("change_baseline", (this.value - 50) * (1 / $("#main-plot").main_plot("export").ymax))})
489482
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
490483
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
484+
baseline_col.append("input")
485+
.attr("type", "text")
486+
.classed("setting-text", true)
487+
.attr("value", 0)
488+
.style("float", "right")
489+
.style("width", "50px")
490+
.on("change", function() {$(row.node()).settings_row("change_baseline", this.value)})
491+
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
492+
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
493+
.on("mouseleave", function() {$(row.node()).settings_row("toggle_draggable", true)});
494+
baseline_col.append("label")
495+
.text("Shift occupancy:")
496+
.style("float", "right");
491497

492498
forward = hide_strand_col.append("div")
493499
.attr("title", "forward")
@@ -498,6 +504,7 @@ $(function() {
498504
forward.append("input")
499505
.attr("type", "checkbox")
500506
.classed("direction_checkbox", true)
507+
.classed("forward_checkbox", true)
501508
.style("transform", "scale(1.2)")
502509
.on("input", function() {
503510
self.toggle_forward(!d3.select(this).property("checked"));
@@ -513,13 +520,12 @@ $(function() {
513520
reverse.append("input")
514521
.attr("type", "checkbox")
515522
.classed("direction_checkbox", true)
523+
.classed("reverse_checkbox", true)
516524
.style("transform", "scale(1.2)")
517525
.on("input", function() {
518526
self.toggle_reverse(!d3.select(this).property("checked"));
519527
})
520528

521-
self.toggle_direction_checkboxes(false);
522-
523529
reset_col.append("input")
524530
.attr("type", "button")
525531
.attr("value", "Reset")
@@ -528,10 +534,10 @@ $(function() {
528534
.on("click", function() {$(row.node()).settings_row("reset")});
529535
},
530536

531-
toggle_direction_checkboxes: function(hide){
532-
this.hide_forward = hide;
533-
this.hide_reverse = hide;
534-
if (hide){
537+
disable_direction_checkboxes: function(disable, plot=true){
538+
this.hide_forward = disable;
539+
this.hide_reverse = disable;
540+
if (disable){
535541
d3.select(this.element.context).selectAll("input.direction_checkbox")
536542
.attr("disabled", true)
537543
.property('checked', false);
@@ -544,19 +550,39 @@ $(function() {
544550
d3.select(this.element.context).selectAll("td.hide-strand-col")
545551
.style("opacity", "1");
546552
}
547-
this.plot_composite();
553+
if (plot){
554+
this.plot_composite();
555+
}
548556
},
549557

550558
toggle_forward: function(hide){
551559
this.hide_forward = hide;
560+
d3.select(this.element.context).select("input.forward_checkbox").property("checked", !hide);
552561
this.plot_composite();
553562
},
554563

555564
toggle_reverse: function(hide){
556565
this.hide_reverse = hide;
566+
d3.select(this.element.context).select("div.forward input").property("checked", !hide);
557567
this.plot_composite()
558568
},
559569

570+
change_baseline: function(new_baseline, plot=true){
571+
if (isNaN(new_baseline)) {
572+
d3.select(this.element.context).select("td.baseline-col input.setting-text").node().value = this.baseline;
573+
d3.select(this.element.context).select("td.baseline-col input.shift-slider").node().value = (this.baseline) * $("#main-plot").main_plot("export").ymax + 50;
574+
575+
} else {
576+
new_baseline = new_baseline !== "" ? parseFloat(new_baseline) : 0;
577+
this.baseline = new_baseline;
578+
d3.select(this.element.context).select("td.baseline-col input.setting-text").node().value = (new_baseline > 0? "+": "") + Math.round(new_baseline * 100) / 100;
579+
d3.select(this.element.context).select("td.baseline-col input.shift-slider").node().value = (new_baseline) * $("#main-plot").main_plot("export").ymax + 50;
580+
if (plot) {
581+
this.plot_composite()
582+
}
583+
}
584+
},
585+
560586
// Remove the row
561587
_destroy: function() {
562588
d3.select(this.element.context).remove()
@@ -698,7 +724,7 @@ $(function() {
698724
// Plot composite data
699725
plot_composite: function() {
700726
if (this.files_loaded) {
701-
$("#main-plot").main_plot("plot_composite", this.xmin, this.xmax, this.sense, this.anti, this.scale, this.options.color, this.options.separate_color && this.secondary_color, this.options.idx, this.opacity, this.smoothing, this.bp_shift, this.hide, this.hide_forward, this.hide_reverse)
727+
$("#main-plot").main_plot("plot_composite", this.xmin, this.xmax, this.sense, this.anti, this.scale, this.options.color, this.options.separate_color && this.secondary_color, this.options.idx, this.opacity, this.smoothing, this.bp_shift, this.hide, this.hide_forward, this.hide_reverse, this.baseline)
702728
}
703729
},
704730

@@ -727,7 +753,6 @@ $(function() {
727753
largestWidth = Math.max(largestWidth, width);
728754
});
729755

730-
console.log(largestWidth);
731756
d3.selectAll(".name-col")
732757
.style("min-width", largestWidth + "px");
733758

@@ -757,7 +782,7 @@ $(function() {
757782
change_scale: function(new_scale, plot=true) {
758783
if (isNaN(new_scale)) {
759784
d3.select(this.element.context).select("td.scale-col input").node().value = this.scale;
760-
d3.select(this.element.context).select("td.scale-col input.scale-slider").node().value = Math.log10(this.scale) * 50 + 50
785+
d3.select(this.element.context).select("td.scale-slider-col input.scale-slider").node().value = Math.log10(this.scale) * 50 + 50
761786
} else {
762787
new_scale = new_scale !== "" ? parseFloat(new_scale) : 1;
763788
this.scale = new_scale;
@@ -833,7 +858,7 @@ $(function() {
833858
.style("display", hide ? "none" : null);
834859
hide_col.select(".eye-closed")
835860
.style("display", hide ? null : "none");
836-
this.toggle_direction_checkboxes(hide)
861+
this.disable_direction_checkboxes(hide)
837862

838863
if (plot && this.files_loaded) {
839864
$("#main-plot").main_plot("toggle_hide", this.options.idx, hide)
@@ -895,10 +920,13 @@ $(function() {
895920
this.anti = null;
896921
this.options.name = "Composite " + this.options.idx;
897922
this.scale = 1;
923+
this.baseline = 0;
898924
this.opacity = false;
899925
this.smoothing = false;
900926
this.bp_shift = false;
901927
this.hide = false;
928+
this.hide_forward = false;
929+
this.hide_reverse = false;
902930
this.options.ids = [];
903931
d3.select(this.element.context).select("td.name-col div").text(this.options.name);
904932
d3.select(this.element.context).select("td.scale-col input").node().value = 1;
@@ -921,10 +949,13 @@ $(function() {
921949
color: this.options.color,
922950
secondary_color: this.secondary_color,
923951
scale: this.scale,
952+
baseline: this.baseline,
924953
opacity: this.opacity,
925954
smoothing: this.smoothing,
926955
bp_shift: this.bp_shift,
927956
hide: this.hide,
957+
hide_forward: this.hide_forward,
958+
hide_reverse: this.hide_reverse,
928959
files_loaded: this.files_loaded,
929960
ids: this.options.ids
930961
}
@@ -975,6 +1006,15 @@ $(function() {
9751006
if ("anti" in data) {
9761007
this.anti = data.anti
9771008
};
1009+
if ("baseline" in data) {
1010+
this.baseline = data.baseline
1011+
};
1012+
if ("hide_forward" in data) {
1013+
this.toggle_forward(data.hide_forward);
1014+
};
1015+
if ("hide_reverse" in data) {
1016+
this.toggle_forward(data.hide_reverse);
1017+
};
9781018

9791019
d3.select(this.element.context).select("td.upload-col label")
9801020
.text(this.files_loaded === 1 ? this.files_loaded + " file loaded" : this.files_loaded + " files loaded");

‎style.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,23 @@ td.remove-row {
127127
cursor: grab;
128128
}
129129

130+
#settings-table .added-table td{
131+
min-height: 60px;
132+
}
133+
134+
#settings-table .slider-col > *{
135+
float: right;
136+
margin: 5px;
137+
}
138+
130139
#settings-table .settings-row {
131140
width: 100%;
132-
height: 50px;
133141
border: 1px solid;
134142
white-space: nowrap;
135143
}
136144

137145
#settings-table .added-table label {
138-
cursor: grab
146+
cursor: grab;
139147
}
140148

141149
.mouse-highlight {

0 commit comments

Comments
 (0)