Skip to content
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

Added Reference Lines and Nucleosome Slider #50

Merged
merged 14 commits into from
Apr 10, 2024
Merged

Added Reference Lines and Nucleosome Slider #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
896e1dd
Made nucleosome options
benjaminbeer256 Oct 16, 2023
bf1c092
Changed nucleosome slider to widget
benjaminbeer256 Oct 17, 2023
7e8771e
Made projection coords absolute
benjaminbeer256 Oct 19, 2023
e435f28
Added pointers to mark coords and updated pointers
benjaminbeer256 Nov 13, 2023
a2aecf2
updated url button
benjaminbeer256 Nov 14, 2023
0ff56bd
disabled tool tip when in slider mode
benjaminbeer256 Nov 17, 2023
fb0f839
added nucleosme add on
benjaminbeer256 Mar 16, 2024
7bc92ea
added tabs to right options area and shifted axes inputs
benjaminbeer256 Mar 17, 2024
69061c1
Added reference lines
benjaminbeer256 Mar 30, 2024
21217a2
fixed lots of bugs with reference lines and nucleosome slider
benjaminbeer256 Apr 1, 2024
5d72bba
fixed tooltip positioning
benjaminbeer256 Apr 2, 2024
f22fdcb
increased scale of tool tip
benjaminbeer256 Apr 2, 2024
a1b1a8d
added import/export for nucleosome slider and references axes
benjaminbeer256 Apr 5, 2024
a626862
Fixed table width
benjaminbeer256 Apr 10, 2024
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
128 changes: 93 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,51 +111,109 @@ <h4>Composite metadata</h4>
</div>
<div class="col-8">
<div class="row" style="display:flex; align-items:center;">
<div style="max-width:calc(100% - 270px);">
<div style="max-width:calc(100% - 270px);" id="main-plot-div">
<svg id="main-plot" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica" style="height: 50vh; max-width: 100%; overflow: hide;"></svg>
<script src="js/sliding_window.js"></script>
<script src="js/widgets/main_plot.js"></script>
</div>
<div class="text-right" style="width:270px; padding-right:20px;">
<div id="settings-dropdown"></div>
<script src="js/widgets/preset_dropdown.js"></script>
<div id="opacity-input"></div>
<script src="js/widgets/opacity_input.js"></script>
<div id="smoothing-input"></div>
<script src="js/widgets/smoothing_input.js"></script>
<div id="shift-input"></div>
<script src="js/widgets/shift_input.js"></script>
<div>
<label for="combined-checkbox" id="combined-label">Combined</label>
<input id="combined-checkbox" type="checkbox">
<script src="js/events/combined_checkbox.js"></script>
<div id="plot-tabs">
<input type="button" id="plot-options-tab" value="Plot Options" style="grid-column:1; height: auto;" class="plot-tab selected-tab">
<input type="button" id="reference-axes-tab" value="Reference Axes" style="grid-column:2; height: auto;" class="plot-tab">
<input type="button" id="nucleosome-slider-tab" value="Nucleosome Slider" style="grid-column:3; height: auto;" class="plot-tab">
<script src="js/events/plot_tabs.js"></script>
</div>
<div>
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
<input id="separate-color-checkbox" type="checkbox">
<script src="js/events/separate_color_checkbox.js"></script>
</div>
<div>
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
<input id="color-trace-checkbox" type="checkbox">
<script src="js/events/color_trace_checkbox.js"></script>
</div>
<div>
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
<input id="tooltip-checkbox" type="checkbox" checked>
<script src="js/events/tooltip_checkbox.js"></script>
<div style="display: block;" id="plot-options" class="plot-pane">
<div id="settings-dropdown"></div>
<script src="js/widgets/preset_dropdown.js"></script>
<div id="opacity-input"></div>
<script src="js/widgets/opacity_input.js"></script>
<div id="smoothing-input"></div>
<script src="js/widgets/smoothing_input.js"></script>
<div id="shift-input"></div>
<script src="js/widgets/shift_input.js"></script>
<div>
<label for="combined-checkbox" id="combined-label">Combined</label>
<input id="combined-checkbox" type="checkbox">
<script src="js/events/combined_checkbox.js"></script>
</div>
<div>
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
<input id="separate-color-checkbox" type="checkbox">
<script src="js/events/separate_color_checkbox.js"></script>
</div>
<div>
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
<input id="color-trace-checkbox" type="checkbox">
<script src="js/events/color_trace_checkbox.js"></script>
</div>
<div>
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
<input id="tooltip-checkbox" type="checkbox" checked>
<script src="js/events/tooltip_checkbox.js"></script>
</div>
<div>
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
<input id="show-legend-checkbox" type="checkbox" checked>
<script src="js/events/show_legend_checkbox.js"></script>
</div>
<div>
<input type="button" id="download-svg-button" value="Download as SVG">
<script src="js/events/download_svg_button.js"></script>
</div>
</div>
<div>
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
<input id="show-legend-checkbox" type="checkbox" checked>
<script src="js/events/show_legend_checkbox.js"></script>
<div style="display: none;" id="nucleosome-slider-options" class="plot-pane">
<div id="nucleosome-slider">
<svg id="nucleosome-svg" class="nucleosome-svg" style="display: inline; width:146px; height:50px; position:relative;" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" style="fill:rgb(46, 139, 185);stroke-width:5;stroke:rgb(3, 100, 122)" />
</svg>
</div>
<div>
<label for="nucleosome-start-text" style="display: inline-block; margin-top: 10px;">Starting coord</label>
<input type="text" id="nucleosome-start-text" value="0" style="display: inline;">
</div>
<div>
<label for="nucleosome-projection-text" style="display: inline-block;">Project to nucleosome</label>
<input type="text" id="nucleosome-projection-text" value="" style="display: inline;border-style:solid; border-color:yellow; border-width:3px">
</div>
<div>
<label for="mark-nucleosome-text" style="display: inline-block; margin-top: 10px">Mark nucleosome</label>
<input type="text" id="mark-nucleosome-text" value="" style="display: inline;border-style:solid; border-color:rgb(205, 233, 255); border-width:3px">
</div>
<div>
<input type="button" id="generate-3D-button" value="Generate 3D Visual" style="margin-top: 10px;">
</div>
<div>
<label for="keep-nucleosome" id="keep-nucleosome-lable">Keep nucleosome on plot</label>
<input type="checkbox" id="keep-nucleosome" label="Plot Nucleosome" style="margin-top: 15px;">
</div>
<script src="js/widgets/nucleosome_slider.js"></script>
<script src="js/events/generate_3D_Button.js"></script>
</div>
<div>
<input type="button" id="download-svg-button" value="Download as SVG">
<script src="js/events/download_svg_button.js"></script>
<div style="display: none;" id="reference-axes-pane" class="plot-pane">
<label for="y-axis-lines" style="float: left;">Y-Axis Lines</label>
<div class="reference-table-div">
<table id="y-axis-lines" class="reference-lines-table"></table>
</div>
<svg id="y-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
<circle r="15" cx="15" cy="15" fill="grey" />
<path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
</svg>
<label for="x-axis-lines" style="float: left;">X-Axis Lines</label>
<div class="reference-table-div">
<table id="x-axis-lines" class="reference-lines-table"></table> </table>
</div>
<svg id="x-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
<circle r="15" cx="15" cy="15" fill="grey" />
<path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
</svg>
<div>
<label for="keep-reference-lines" id="keep-reference-lable">Keep reference lines on plot</label>
<input type="checkbox" id="keep-reference-lines" style="margin-top: 15px;">
</div>
<script src="js/widgets/reference_axes.js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="row">
Expand Down
2 changes: 2 additions & 0 deletions js/events/export_json_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ $(function() {
metadata: $("#metadata-table").metadata_table("export"),
settings: $("#settings-table").settings_table("export"),
plot: $("#main-plot").main_plot("export"),
reference_axes: $("#reference-axes-pane").reference_axes("export"),
nucleosome_slider: $("#nucleosome-slider").nucleosome_slider("export"),
preset: $("#settings-dropdown").settings_dropdown("get_value"),
separate_color: d3.select("#separate-color-checkbox").property("checked")
},
Expand Down
45 changes: 45 additions & 0 deletions js/events/generate_3d_Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
$(function() {
d3.select("#generate-3D-button").on("click", function() {
//Parse projection coords
start = parseInt($("#nucleosome-slider").nucleosome_slider("get_starting_coord"));
length = $("#nucleosome-slider").nucleosome_slider("get_length")
projection_coords = $("#nucleosome-slider").nucleosome_slider("get_projection_coords");
projection_coords_i = "";
projection_coords_j = "";
for (coord of projection_coords){
if (coord != ""){
projection_coords_i += (parseInt(coord) - start) + ",";
projection_coords_j += (length - (parseInt(coord) - start)) + ",";
}
}
projection_coords_i = projection_coords_i.substring(0, projection_coords_i.length - 1);
projection_coords_j = projection_coords_j.substring(0, projection_coords_j.length - 1);
//Parse mark coords
mark_coords = $("#nucleosome-slider").nucleosome_slider("get_mark_coords");
mark_coords_i = "";
mark_coords_j = "";
for (coord of mark_coords){
if (coord != ""){
mark_coords_i += (parseInt(coord)) + ",";
mark_coords_j += (length - parseInt(coord)) + ",";
}
}
mark_coords_i = mark_coords_i.substring(0, mark_coords_i.length - 1);
mark_coords_j = mark_coords_j.substring(0, mark_coords_j.length - 1);
//Create and open url
let url = "https://3dmol.org/viewer.html?pdb=2cv5&select=all&style=cartoon:color~gray&select=resi:" +
projection_coords_i +
";chain:I&style=cartoon:color~yellow;stick&select=resi:" +
projection_coords_j +
";chain:J&style=cartoon:color~yellow;stick&select=resi:"+
mark_coords_i +
";chain:I&style=cartoon:color~lightblue;stick&select=resi:" +
mark_coords_j +
";chain:J&style=cartoon:color~lightblue;&select=resi:"+
projection_coords_i + "," + mark_coords_i +
";chain:I&labelres=backgroundOpacity:0.8;fontSize:14&select=resi:" +
projection_coords_j + "," + mark_coords_j +
";chain:J&labelres=backgroundOpacity:0.8;fontSize:14";
window.open(url);
})
})
6 changes: 6 additions & 0 deletions js/events/import_json_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ $(function() {
};
$("#settings-table").settings_table("import", data.settings);
$("#metadata-table").metadata_table("import", data.metadata);
if ("reference_axes" in data){
$("#reference-axes-pane").reference_axes("import", data.reference_axes);
}
if ("nucleosome_slider" in data){
$("#nucleosome-slider").nucleosome_slider("import", data.nucleosome_slider);
}
$("#main-plot").main_plot("update_legend");
if (data.preset) {
$("#settings-dropdown").settings_dropdown("set_value", data.preset)
Expand Down
1 change: 1 addition & 0 deletions js/events/load_composite_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ $(function() {

$("#settings-table").settings_table("plot_all_composites", {xmin: xmin, xmax: xmax, ymax: ymax}, allow_shrink=true);
$("#main-plot").main_plot("update_legend")
$("#enable-nucleosome-button").prop("disabled", false);
};

reader.readAsText(file);
Expand Down
48 changes: 48 additions & 0 deletions js/events/plot_tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
$(function() {
d3.select("#plot-options-tab").on("click", function() {
showPane("plot-options", this);
$("#main-plot").main_plot("toggle_tooltip", true);
})
d3.select("#reference-axes-tab").on("click", function() {
showPane("reference-axes-pane", this);
$("#main-plot").main_plot("toggle_tooltip", false);
$("#reference-axes-pane").reference_axes("plot_lines");
})
d3.select("#nucleosome-slider-tab").on("click", function() {
showPane("nucleosome-slider-options", this);
$("#main-plot").main_plot("toggle_tooltip", false);
$("#nucleosome-slider").nucleosome_slider("update_all");
})

function showPane(id, tab){
var panes = d3.selectAll(".plot-pane");
panes.each(function() {
pane = d3.select(this);
console.log(pane.attr("id"));
if (pane.attr("id") != id){
pane.style("display", "none");
} else {
pane.style("display", "block");
}
});
var tabs = d3.selectAll(".plot-tab");
tabs.each(function() {
d3.select(this).classed("selected-tab", false);
})
d3.select(tab).classed("selected-tab", true);

if (d3.select("#keep-nucleosome").property("checked") == false){
d3.select("#nucleosome-svg-layer")
.selectAll("*")
.remove();
d3.select("#coord-svg-layer")
.selectAll("*")
.remove();
}
if (d3.select("#keep-reference-lines").property("checked") == false){
d3.select("#reference-axes-layer")
.selectAll("*")
.remove();
}
}
})
2 changes: 2 additions & 0 deletions js/widgets/axes_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ $(function() {
let container = d3.select(this.element.context),
xaxis = container.append("div")
.style("user-select","none")
.style("padding-left","30px")
.attr("class", "row")
.append("div")
.attr("class", "col"),
yaxis = container.append("div")
.style("user-select","none")
.style("padding-left","30px")
.attr("class", "row")
.append("div")
.attr("class", "col");
Expand Down
Loading