Skip to content

Subtract baseline & hide one strand addressing #45 and #44 #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcha40 merged 5 commits into from
Mar 14, 2024
Merged

Subtract baseline & hide one strand addressing #45 and #44 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64e645f
Added second row for more options
benjaminbeer256 Dec 9, 2023
6a99f29
Added hiding forward/reverse strands feature
benjaminbeer256 Dec 11, 2023
d7ecc0a
Added shift occupancy feature
benjaminbeer256 Dec 12, 2023
e312c2e
added comments and organized code
benjaminbeer256 Dec 12, 2023
bc02361
Fixed id-col not resizing properly
benjaminbeer256 Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion js/events/combined_checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ $(function() {
$("#main-plot").main_plot("toggle_combined", this.checked);
$("#axes-input").axes_input("toggle_combined", this.checked);
d3.select("#separate-color-checkbox").property("disabled", this.checked);
$("#settings-dropdown").settings_dropdown("set_value", "none")
$("#settings-dropdown").settings_dropdown("set_value", "none");
d3.selectAll("input.direction_checkbox").attr("disabled", this.checked? true: null);
})
})
89 changes: 55 additions & 34 deletions js/widgets/main_plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ $(function() {
this.update_legend()
},

plot_composite: function(xmin, xmax, sense, anti, scale, color, secondary_color, i, opacity, smoothing, bp_shift, hide) {
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) {
// Set composite visibility
let composite = this._elements.composites[i]
.classed("plotted", !hide)
Expand Down Expand Up @@ -323,9 +323,9 @@ $(function() {
{new_xdomain, new_occupancy: smoothed_occupancy} = sliding_window(shifted_xdomain, combined_occupancy, smoothing),
// Truncate x domain to x axis limits
truncated_xdomain = new_xdomain.filter(x => x >= this.xmin && x <= this.xmax),
// Truncate occupancy and scale by scale factor
// Truncate occupancy and scale by scale factor, adding baseline value
scaled_occupancy = smoothed_occupancy.filter((_, j) => new_xdomain[j] >= this.xmin && new_xdomain[j] <= this.xmax)
.map(d => d * scale);
.map(d => ((value = d * scale + baseline) > 0)? value: 0);

// Set fill color
composite.select(".composite-gradient-top")
Expand Down Expand Up @@ -403,79 +403,100 @@ $(function() {
truncated_anti_domain = new_xdomain.map(x => x - bp_shift).filter(x => x >= this.xmin && x <= this.xmax),
// Truncate sense and anti occupancy and scale by scale factor
scaled_sense = smoothed_sense.filter((_, j) => new_xdomain[j] + bp_shift >= this.xmin
&& new_xdomain[j] + bp_shift <= this.xmax).map(d => d * scale),
&& new_xdomain[j] + bp_shift <= this.xmax).map(d => (value = d * scale + baseline) > 0? value: 0),
scaled_anti = smoothed_anti.filter((_, j) => new_xdomain[j] - bp_shift >= this.xmin
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => d * scale);

// Set fill color
secondary_color = secondary_color || color;
composite.select(".composite-gradient-top")
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => (value = d * scale + baseline) > 0? value: 0);

//Create sense path and gradient if not hidden
let sense_path = "";
if (!hide_sense){
sense_path = "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L");
composite.select(".composite-gradient-top")
.selectAll("stop")
.data([0, 1])
.join("stop")
.attr("offset", d => d)
.attr("stop-color", color)
.attr("stop-opacity", d => (1 - d) * opacity);
composite.select(".composite-gradient-bottom")
composite.select(".composite-fill-top")
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
} else {
composite.select(".composite-gradient-top")
.selectAll("stop")
.data([0, 1])
.join("stop")
.attr("offset", d => d)
.attr("stop-color", color)
.attr("stop-opacity", d => 0);
}

//Create anti path and gradient if not hidden
let anti_path = "";
if (!hide_anti){
anti_path = "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L");
// Set fill color
secondary_color = secondary_color || color;
composite.select(".composite-gradient-bottom")
.selectAll("stop")
.data([0, 1])
.join("stop")
.attr("offset", d => d)
.attr("stop-color", secondary_color)
.attr("stop-opacity", d => (1 - d) * opacity);
composite.select(".composite-fill-bottom")
.attr("points", truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).join(" ")
+ " " + this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0)
+ " " + this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
} else {
composite.select(".composite-gradient-bottom")
.selectAll("stop")
.data([0, 1])
.join("stop")
.attr("offset", d => d)
.attr("stop-color", secondary_color)
.attr("stop-opacity", d => (1 - d) * opacity);
.attr("stop-opacity", d => (1 - d) * 0);
}

// Redraw composite trace
// Redraw composite trace for visible strands
if (this.color_trace) {
composite.select(".white-line")
.style("display", "none")
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
.attr("d", sense_path + anti_path);

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

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

composite.select(".color-line-bottom")
.attr("stroke", secondary_color)
.style("display", null)
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
.attr("d", anti_path)
} else {
composite.select(".color-line-top")
.attr("stroke", color)
.style("display", "none")
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
.attr("d", sense_path);

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

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

composite.select(".black-line")
.style("display", null)
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
.attr("d", sense_path + anti_path)
};

// Redraw composite fill
composite.select(".composite-fill-top")
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
composite.select(".composite-fill-bottom")
.attr("points", truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).join(" ")
+ " " + this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0)
+ " " + this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
}
},

Expand Down
Loading