Skip to content

Commit 6a99f29

Browse files
benjaminbeer256benjaminbeer256
committed
Added hiding forward/reverse strands feature
1 parent 64e645f commit 6a99f29

3 files changed

Lines changed: 120 additions & 121 deletions

File tree

‎js/events/combined_checkbox.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $(function() {
33
$("#main-plot").main_plot("toggle_combined", this.checked);
44
$("#axes-input").axes_input("toggle_combined", this.checked);
55
d3.select("#separate-color-checkbox").property("disabled", this.checked);
6-
$("#settings-dropdown").settings_dropdown("set_value", "none")
6+
$("#settings-dropdown").settings_dropdown("set_value", "none");
7+
d3.selectAll("input.direction_checkbox").attr("disabled", this.checked? true: null);
78
})
89
})

‎js/widgets/main_plot.js‎

Lines changed: 59 additions & 28 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) {
298+
plot_composite: function(xmin, xmax, sense, anti, scale, color, secondary_color, i, opacity, smoothing, bp_shift, hide, hide_sense, hide_anti) {
299299
// Set composite visibility
300300
let composite = this._elements.composites[i]
301301
.classed("plotted", !hide)
@@ -406,76 +406,99 @@ $(function() {
406406
&& new_xdomain[j] + bp_shift <= this.xmax).map(d => d * scale),
407407
scaled_anti = smoothed_anti.filter((_, j) => new_xdomain[j] - bp_shift >= this.xmin
408408
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => d * scale);
409+
410+
let sense_path = "";
411+
if (!hide_sense){
412+
sense_path = "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L");
409413

410-
// Set fill color
411-
secondary_color = secondary_color || color;
412-
composite.select(".composite-gradient-top")
414+
composite.select(".composite-gradient-top")
413415
.selectAll("stop")
414416
.data([0, 1])
415417
.join("stop")
416418
.attr("offset", d => d)
417419
.attr("stop-color", color)
418420
.attr("stop-opacity", d => (1 - d) * opacity);
419-
composite.select(".composite-gradient-bottom")
421+
// Redraw composite fill
422+
composite.select(".composite-fill-top")
423+
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
424+
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
425+
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
426+
} else {
427+
composite.select(".composite-gradient-top")
428+
.selectAll("stop")
429+
.data([0, 1])
430+
.join("stop")
431+
.attr("offset", d => d)
432+
.attr("stop-color", color)
433+
.attr("stop-opacity", d => 0);
434+
}
435+
436+
let anti_path = "";
437+
if (!hide_anti){
438+
anti_path = "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L");
439+
// Set fill color
440+
secondary_color = secondary_color || color;
441+
composite.select(".composite-gradient-bottom")
442+
.selectAll("stop")
443+
.data([0, 1])
444+
.join("stop")
445+
.attr("offset", d => d)
446+
.attr("stop-color", secondary_color)
447+
.attr("stop-opacity", d => (1 - d) * opacity);
448+
composite.select(".composite-fill-bottom")
449+
.attr("points", truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).join(" ")
450+
+ " " + this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0)
451+
+ " " + this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
452+
} else {
453+
composite.select(".composite-gradient-bottom")
420454
.selectAll("stop")
421455
.data([0, 1])
422456
.join("stop")
423457
.attr("offset", d => d)
424458
.attr("stop-color", secondary_color)
425-
.attr("stop-opacity", d => (1 - d) * opacity);
459+
.attr("stop-opacity", d => (1 - d) * 0);
460+
}
461+
console.log(!hide_sense);
462+
console.log(!hide_anti);
426463

427464
// Redraw composite trace
428465
if (this.color_trace) {
429466
composite.select(".white-line")
430467
.style("display", "none")
431-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
432-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
468+
.attr("d", sense_path + anti_path);
433469

434470
composite.select(".black-line")
435471
.style("display", "none")
436-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
437-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
472+
.attr("d", sense_path + anti_path);
438473

439474
composite.select(".color-line-top")
440475
.attr("stroke", color)
441476
.style("display", null)
442-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
477+
.attr("d", sense_path);
443478

444479
composite.select(".color-line-bottom")
445480
.attr("stroke", secondary_color)
446481
.style("display", null)
447-
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
482+
.attr("d", anti_path)
448483
} else {
449484
composite.select(".color-line-top")
450485
.attr("stroke", color)
451486
.style("display", "none")
452-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
487+
.attr("d", sense_path);
453488

454489
composite.select(".color-line-bottom")
455490
.attr("stroke", secondary_color)
456491
.style("display", "none")
457-
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
492+
.attr("d", anti_path);
458493

459494
composite.select(".white-line")
460495
.style("display", null)
461-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
462-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
496+
.attr("d", sense_path + anti_path);
463497

464498
composite.select(".black-line")
465499
.style("display", null)
466-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
467-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
500+
.attr("d", sense_path + anti_path)
468501
};
469-
470-
// Redraw composite fill
471-
composite.select(".composite-fill-top")
472-
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
473-
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
474-
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
475-
composite.select(".composite-fill-bottom")
476-
.attr("points", truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).join(" ")
477-
+ " " + this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0)
478-
+ " " + this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
479502
}
480503
},
481504

@@ -642,6 +665,14 @@ $(function() {
642665
this.update_legend()
643666
},
644667

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+
645676
change_order: function(drag_idx, drop_idx, insert_after) {
646677
if (drag_idx !== drop_idx) {
647678
let drag_comp = this._elements.composites[drag_idx],

‎js/widgets/settings_table.js‎

Lines changed: 59 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,8 @@ $(function() {
182182
smoothing: false,
183183
bp_shift: false,
184184
hide: false,
185+
hide_forward: false,
186+
hide_reverse: false,
185187
files_loaded: 0,
186188
secondary_color: null,
187189

@@ -487,101 +489,36 @@ $(function() {
487489
.on("mouseup", function() {$(row.node()).settings_row("toggle_draggable", true)})
488490
.on("mousedown", function() {$(row.node()).settings_row("toggle_draggable", false)})
489491

490-
positive = hide_strand_col.append("div")
491-
.attr("title", "positive")
492+
forward = hide_strand_col.append("div")
493+
.attr("title", "forward")
492494
.style("float", "left")
493495
.style("margin-right", "15px")
494-
positive.append("label")
495-
.text("Positive:")
496-
let positive_open = positive.append("div")
497-
.attr("title", "Hide")
498-
.style("display", "inline")
499-
.append("svg")
500-
.classed("hide-icon", true)
501-
.classed("eye-open", true)
502-
.attr("baseProfile", "full")
503-
.attr("viewBox", "-100 -100 200 200")
504-
.attr("version", "1.1")
505-
.attr("xmlns", "http://www.w3.org/2000/svg")
506-
.on("click", function() {$(row.node()).settings_row("toggle_positive", true)})
507-
.append("g");
508-
positive_open.append("path")
509-
.attr("d", "M-100 0C-50 60 50 60 100 0C50 -60 -50 -60 -100 0")
510-
.attr("fill", "none")
511-
.attr("stroke", "black")
512-
.attr("stroke-width", 3);
513-
positive_open.append("circle")
514-
.attr("cx", 0)
515-
.attr("cy", 0)
516-
.attr("r", 30)
517-
.attr("fill", "black")
518-
.attr("stroke", "none");
519-
let positive_closed = positive.append("div")
520-
.attr("title", "Show")
521-
.append("svg")
522-
.classed("hide-icon", true)
523-
.classed("eye-closed", true)
524-
.attr("title", "Show")
525-
.attr("baseProfile", "full")
526-
.attr("viewBox", "-100 -100 200 200")
527-
.attr("version", "1.1")
528-
.attr("xmlns", "http://www.w3.org/2000/svg")
529-
.style("display", "none")
530-
.on("click", function() {$(row.node()).settings_row("toggle_positive", false)})
531-
.append("g");
532-
positive_closed.append("path")
533-
.attr("d", "M-100 0C-50 60 50 60 100 0M-66.77 27.7L-74.21 40.78M-24.62 42.82L-27.26 57.58M24.62 42.82L27.26 57.58M66.77 27.7L74.21 40.78")
534-
.attr("fill", "none")
535-
.attr("stroke", "black")
536-
.attr("stroke-width", 3);
496+
forward.append("label")
497+
.text("Show forward:")
498+
forward.append("input")
499+
.attr("type", "checkbox")
500+
.classed("direction_checkbox", true)
501+
.style("transform", "scale(1.2)")
502+
.on("input", function() {
503+
self.toggle_forward(!d3.select(this).property("checked"));
504+
})
505+
506+
537507

538-
negative = hide_strand_col.append("div")
539-
.attr("title", "negative")
540-
negative.append("label")
541-
.text("Negative:")
508+
reverse = hide_strand_col.append("div")
509+
.attr("title", "reverse")
510+
reverse.append("label")
511+
.text("Show reverse:")
542512
.style("display", "inline")
543-
544-
let negative_open = negative.append("div")
545-
.attr("title", "Hide Negative")
546-
.style("display", "inline")
547-
.append("svg")
548-
.classed("hide-icon", true)
549-
.classed("eye-open", true)
550-
.attr("baseProfile", "full")
551-
.attr("viewBox", "-100 -100 200 200")
552-
.attr("version", "1.1")
553-
.attr("xmlns", "http://www.w3.org/2000/svg")
554-
.on("click", function() {$(row.node()).settings_row("toggle_positive", true)})
555-
.append("g");
556-
negative_open.append("path")
557-
.attr("d", "M-100 0C-50 60 50 60 100 0C50 -60 -50 -60 -100 0")
558-
.attr("fill", "none")
559-
.attr("stroke", "black")
560-
.attr("stroke-width", 3);
561-
negative_open.append("circle")
562-
.attr("cx", 0)
563-
.attr("cy", 0)
564-
.attr("r", 30)
565-
.attr("fill", "black")
566-
.attr("stroke", "none");
567-
let negative_closed = negative.append("div")
568-
.attr("title", "Show")
569-
.append("svg")
570-
.classed("hide-icon", true)
571-
.classed("eye-closed", true)
572-
.attr("title", "Show")
573-
.attr("baseProfile", "full")
574-
.attr("viewBox", "-100 -100 200 200")
575-
.attr("version", "1.1")
576-
.attr("xmlns", "http://www.w3.org/2000/svg")
577-
.style("display", "none")
578-
.on("click", function() {$(row.node()).settings_row("toggle_positive", false)})
579-
.append("g");
580-
negative_closed.append("path")
581-
.attr("d", "M-100 0C-50 60 50 60 100 0M-66.77 27.7L-74.21 40.78M-24.62 42.82L-27.26 57.58M24.62 42.82L27.26 57.58M66.77 27.7L74.21 40.78")
582-
.attr("fill", "none")
583-
.attr("stroke", "black")
584-
.attr("stroke-width", 3);
513+
reverse.append("input")
514+
.attr("type", "checkbox")
515+
.classed("direction_checkbox", true)
516+
.style("transform", "scale(1.2)")
517+
.on("input", function() {
518+
self.toggle_reverse(!d3.select(this).property("checked"));
519+
})
520+
521+
self.toggle_direction_checkboxes(false);
585522

586523
reset_col.append("input")
587524
.attr("type", "button")
@@ -591,6 +528,35 @@ $(function() {
591528
.on("click", function() {$(row.node()).settings_row("reset")});
592529
},
593530

531+
toggle_direction_checkboxes: function(hide){
532+
this.hide_forward = hide;
533+
this.hide_reverse = hide;
534+
if (hide){
535+
d3.select(this.element.context).selectAll("input.direction_checkbox")
536+
.attr("disabled", true)
537+
.property('checked', false);
538+
d3.select(this.element.context).selectAll("td.hide-strand-col")
539+
.style("opacity", ".5");
540+
} else {
541+
d3.select(this.element.context).selectAll("input.direction_checkbox")
542+
.attr("disabled", null)
543+
.property('checked', true);
544+
d3.select(this.element.context).selectAll("td.hide-strand-col")
545+
.style("opacity", "1");
546+
}
547+
this.plot_composite();
548+
},
549+
550+
toggle_forward: function(hide){
551+
this.hide_forward = hide;
552+
this.plot_composite();
553+
},
554+
555+
toggle_reverse: function(hide){
556+
this.hide_reverse = hide;
557+
this.plot_composite()
558+
},
559+
594560
// Remove the row
595561
_destroy: function() {
596562
d3.select(this.element.context).remove()
@@ -732,7 +698,7 @@ $(function() {
732698
// Plot composite data
733699
plot_composite: function() {
734700
if (this.files_loaded) {
735-
$("#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)
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)
736702
}
737703
},
738704

@@ -867,6 +833,7 @@ $(function() {
867833
.style("display", hide ? "none" : null);
868834
hide_col.select(".eye-closed")
869835
.style("display", hide ? null : "none");
836+
this.toggle_direction_checkboxes(hide)
870837

871838
if (plot && this.files_loaded) {
872839
$("#main-plot").main_plot("toggle_hide", this.options.idx, hide)

0 commit comments

Comments
 (0)