Skip to content

Commit

Permalink
Merge pull request #18 from brentp/adds-help
Browse files Browse the repository at this point in the history 
adds user help
  • Loading branch information
@brentp
brentp authored Oct 6, 2020
2 parents fcd4d50 + c489b46 commit 513e68d
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 16 deletions.
39 changes: 25 additions & 14 deletions src/seqcoverpkg/seqcover.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,14 @@
font-weight: 700;
}

.popover{
max-width: 40%;
}

.fa-question-circle {
padding-left: .30em;
}

</style>
</head>

Expand All @@ -80,21 +88,21 @@
<main role="main" class="container-fluid">

<div class="row pt-2 bg-light">
<div class="col-md-5 col-lg-7">
<h5>Coverage summary</h5>
<div class="col-md-6 col-lg-6">
<h5>Coverage summary <span id="navigation-popover" data-toggle="popover"><i class="far fa-question-circle fa-sm"></i></span></h5>
</div>
<div class="col-sm-12 col-md-7 col-lg-5 d-flex align-items-center">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Sample Scaling</span>
</div>
<input class="form-control z_scale" type="checkbox"
id="z_scale_samples" title="scale values within each sample">
<div class="input-group-prepend">
<span class="input-group-text">Gene Scaling</span>
<div class="col-sm-12 col-lg-6 d-flex align-items-center">
<div class="col-auto my-1">
<div class="form-check form-check-inline">
<input class="form-check-input z_scale" type="checkbox" value="" id="z_scale_samples">
<label class="form-check-label pr-3" for="z_scale_samples" title="Scale values within each sample" data-toggle="tooltip">
Sample Scaling
</label>
<input class="form-check-input z_scale" type="checkbox" value="" id="z_scale_genes">
<label class="form-check-label" for="z_scale_genes" title="Scale values within each gene" data-toggle="tooltip">
Gene Scaling
</label>
</div>
<input class="form-control z_scale" type="checkbox"
id="z_scale_genes" title="scale values within each gene">
</div>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
Expand All @@ -115,7 +123,10 @@ <h5>Coverage summary</h5>

<div class="row pt-2 mb-4">
<div class="col-md-5 col-lg-7">
<h5>Depth per base: <span id="header-selected-gene"></span></h5>
<h5>Depth per base:
<span id="header-selected-gene"></span>
<span id="depth-plot-popover" data-toggle="popover"><i class="far fa-question-circle fa-sm"></i></span>
</h5>
</div>
<div class="col-12"><div id="gene_plot"></div></div>
</div>
Expand Down
36 changes: 34 additions & 2 deletions src/seqcoverpkg/seqcover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,7 @@ function tie_heatmap_to_line_plot() {
// https://issue.life/questions/44297012
var xticks = jQuery("#heatmap_plot .xaxislayer-above > .xtick > text")
xticks.css({ "cursor": "pointer" })
xticks.attr('class', 'unselected_label')
var d = document.getElementById("gene_plot")

xticks.each(function (i) {
Expand Down Expand Up @@ -451,7 +452,6 @@ function draw_heatmap() {
// responsive: true,
}
let trace = [{ x: x, y: y, z: z, type: 'heatmap', hoverongaps: false, colorscale: "Cividis" }]
// let trace = [{ x: x, y: y, z: z, type: 'heatmap', xgap: 1, ygap: 1, hoverongaps: false, colorscale: "Cividis" }]

//https://plotly.com/javascript/reference/heatmap/
let p = document.getElementById('heatmap_plot')
Expand Down Expand Up @@ -504,6 +504,7 @@ function draw_heatmap() {
p.on('plotly_afterplot', function () {
// initialize first gene as selected; or re-use selected (when changing metric)
let yticks = jQuery("#heatmap_plot .yaxislayer-above > .ytick > text")
yticks.attr('class', 'unselected_label')
if (!selected) {
jQuery(yticks[plot_data.length - 1]).attr("class", "selected_label")
} else {
Expand All @@ -524,8 +525,40 @@ function draw_heatmap() {
})
}

function update_popovers() {
$('[data-toggle="tooltip"]').tooltip()

$("#navigation-popover").popover({
container: "body",
html: true,
title: "Navigating the report",
content: `
<ul class="m-0 ml-1 p-2">
<li>X and Y axes labels are clickable</li>
<li>Clicking gene names (y-axis labels) updates 'Depth per base' plot</li>
<li>Clicking sample names (x-axis labels) highlights the sample trace</li>
<li>Clicking heatmap values updates the selected gene and highlights the sample</li>
</ul>
`,
})
$("#depth-plot-popover").popover({
container: "body",
html: true,
title: "Depths by position across gene",
content: `
<ul class="m-0 ml-1 p-2">
<li>Depths per base per sample are displayed over gene length</li>
<li>Individual transcripts are merged into the Merged transcript</li>
<li>CDS segments are colored light red</li>
<li>UTR segments are light gray</li>
</ul>
`,
})
}

jQuery(document).ready(function () {
update_header_metadata(Object.keys(plot_data[0].plot_coords.depths).length, plot_data.length)
update_popovers()

if (Object.keys(plot_data[0].plot_coords.background_depths).length == 0) {
jQuery('#cds_lt_bg').remove()
Expand Down Expand Up @@ -581,7 +614,6 @@ jQuery(document).ready(function () {
})
})


function z_transform_columns(z) {
var ztr = new Array(z.length);
for(var rowi=0; rowi < z.length; rowi++){
Expand Down

0 comments on commit 513e68d

Please sign in to comment.