Skip to content

Commit 2845eb7

Browse files
jcha40jcha40
authored
Merge pull request #47 from CEGRcode/subtract-baseline-&-hide-one-strand
Subtract baseline & hide one strand addressing #45 and #44
2 parents 536518f + bc02361 commit 2845eb7

4 files changed

Lines changed: 326 additions & 73 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: 55 additions & 34 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=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 value
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,79 +403,100 @@ $(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);
409-
410-
// Set fill color
411-
secondary_color = secondary_color || color;
412-
composite.select(".composite-gradient-top")
408+
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => (value = d * scale + baseline) > 0? value: 0);
409+
410+
//Create sense path and gradient if not hidden
411+
let sense_path = "";
412+
if (!hide_sense){
413+
sense_path = "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L");
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+
composite.select(".composite-fill-top")
422+
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
423+
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
424+
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
425+
} else {
426+
composite.select(".composite-gradient-top")
427+
.selectAll("stop")
428+
.data([0, 1])
429+
.join("stop")
430+
.attr("offset", d => d)
431+
.attr("stop-color", color)
432+
.attr("stop-opacity", d => 0);
433+
}
434+
435+
//Create anti path and gradient if not hidden
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+
}
426461

427-
// Redraw composite trace
462+
// Redraw composite trace for visible strands
428463
if (this.color_trace) {
429464
composite.select(".white-line")
430465
.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"));
466+
.attr("d", sense_path + anti_path);
433467

434468
composite.select(".black-line")
435469
.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"));
470+
.attr("d", sense_path + anti_path);
438471

439472
composite.select(".color-line-top")
440473
.attr("stroke", color)
441474
.style("display", null)
442-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
475+
.attr("d", sense_path);
443476

444477
composite.select(".color-line-bottom")
445478
.attr("stroke", secondary_color)
446479
.style("display", null)
447-
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
480+
.attr("d", anti_path)
448481
} else {
449482
composite.select(".color-line-top")
450483
.attr("stroke", color)
451484
.style("display", "none")
452-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
485+
.attr("d", sense_path);
453486

454487
composite.select(".color-line-bottom")
455488
.attr("stroke", secondary_color)
456489
.style("display", "none")
457-
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
490+
.attr("d", anti_path);
458491

459492
composite.select(".white-line")
460493
.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"));
494+
.attr("d", sense_path + anti_path);
463495

464496
composite.select(".black-line")
465497
.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"))
498+
.attr("d", sense_path + anti_path)
468499
};
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))
479500
}
480501
},
481502

0 commit comments

Comments
 (0)