igvteam / juicebox.js Goto Github PK

I didn't realize these were hardcoded in. If they are going to be hardcoded, there should also be some tags added to improve organization

Alignment between the locus box and other elements looks a bit ragged. I tend to think the goto box should align with the other non-label control elements, and be the same height. The other 3 controls could be taller if needed.

inter chromosomal regions are not rendering correctly, or rather are half correct and half-reflected across diagonal (which should not be done; they are not symmetric)

Erez wants a control to change chromosomes, other than just typing their name. I have to admit how to do that (syntax) is not obvious. Perhaps a pair of pulldowns + refresh button .

We also need a pulldown for normalization. Its going to get a bit crowded. Here's a pic of the desktop toolbar. We can save some precious space by jettisoning the icon.

Better alignment. Button vertical alignment is sketchy.

Implement balanced normalization for the default view

Convert css to sass. Variables are your friend.

units for the resolution pulldown should be “kb” (divide numbers by 1,000 for presentation), and the label should be "Resolution (kb)

http://www.aidenlab.org/juicebox/

Load a map, nothing happens. Chrome dev tools says:

analytics.js Failed to load resource: the server responded with a status of 404 (Not Found)
theme.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://hicfiles.s3.amazonaws.com/hiseq/assembly/aedes/combined.hic?someRandomSeed=0.ttvsgoo2ohp8gj92lhe8w7b9 Failed to load resource: the server responded with a status of 403 (Forbidden)
hic.js:980 Error: 403
at handleError (igv-beta.js:17650)
at XMLHttpRequest.xhr.onload (igv-beta.js:17609)

Map loads in Desktop Juicebox (no 403 error)

There's a problem with the "production" dataset load menu (in hic.html). When loading from a bookmark the pulldown is not updated to reflect the loaded dataset. I've debugged the relevant code in site.js (below). The query IS returning the correct $option object, however the selection ("$option.prop('selected', true)) is not having any effect. Perhaps this is because the pulldown is created using the "chosen" jQuery plugin. Its not a requirement that we use that plugin, I suggest we dump it and just use a standard "select" as in hic-dev.html.

function updateDatasetPulldown(dataset) {

    var selector = '#dataset_selector option[value="' + dataset.url + '"]',
        $option = $(selector);

    if ($option) $option.prop('selected', true);

}

Widget for selecting the public datasets available in Juicebox desktop. JB desktop uses a tree-folder metaphor. Note: we don't have to use this metaphor, it could possibly be flattened as we did the Encode load widget for Cursor. The tree is defined in the following properties file

http://hicfiles.tc4ga.com/juicebox.properties

File description from casual inspection, verify this might not be completely correct.

The property keys are used as node ids. The first 13 lines define a folder structure. Remaining lines define hic file nodes. Keys are ids but its not clear how they are used. Values are comma delimited lists of 3 fields, which appear to be

Implement x-axis and y-axis scrollbars:

The little icon that appears on web tabs and bookmarks is the IGV one. We need to change it to Juicebox.

The ruler should not draw ticks beyond the chromosome length. Space to the right (or below on y axis) of chromosome end should just be blank. A final tick on the exact end of the chromosome should be drawn to mark it.

This is especially important with inter-chr maps as one chromosome will be shorter than the other one.

When viewing inter-chr maps (e.g. 1 vs 2) its hard to tell which axis is which. JB desktop handles this by labeling the scroll-bar widgets with the chromosome name (see screenshot). We don't have to do this exactly but need some indication.

pixelSize settings > 1 are buggy when you start to pan. Fix this.

http://igv.org/web/jb/hic.html?colorScale=153.95679258062705&hicUrl=https%3A%2F%2Fhicfiles.s3.amazonaws.com%2Fhiseq%2Fgm12878%2Fin-situ%2FHIC047.hic

1 vs 2 seems to work; 2 vs 3 does not - shows just 1 thin line.

Create a "normalization" pulldown in the core toolbar. A prototype exists in the hic-dev.html page (id normalization_selector). Move this prototype to the core code, it will appear just to the left of the resolution selector. Note that it listens for DataLoad events (see updateNormalizationPulldown function in site/js/site.js.

Currently this pulldown has no action, that will come later

See screenshot. The "clamping logic" in shiftPixels probably needs to be applied.

When zooming in, paint immediately with low res data on hand until high res data has loaded.

No spinner as data loads after resolution change.

Maybe a hic file format version issue.

http://igv.org/web/jb/hic.html?state=1%2C1%2C0%2C0%2C0%2C8.024052224929061%2C2000&hicUrl=http%3A%2F%2Fhicfiles.s3.amazonaws.com%2Fexternal%2Fli%2Fmcf7-rnapii-saturated.hic

A scrollbar sometimes appears on the horizontal ruler div

See photo

The resolution pulldown looks different in hic.html, compared to the look in hic-dev.html. See the picture below. hic.html is the deployed app and will need kept up to date with changes affecting style.

Support zooming with the scroll wheel, as google maps does. For now increment in whole "zoom" levels (bpResolutions index). This might be too high speed for zooming. Next step would be partial resolution levels, using the pixelSize parameter between zoom levels. This will require some thought.

Multiple problems with intra-chr maps (e.g. 1 22). See pic, there are some built-in assumptions that chr X length == chr Y length somewhere, among other issues. Assigning this to Doug and myself as its not clear where all the issues are, not thoroughly tested obviously.

Related issues: #45 #56

Support the following syntax to jump to a chromosome at the default resolution

chr1 space chr2

Default resolution is not defined in this issue, for now use resolution "0". Ultimately it will be the highest resolution supporting whole chromosome view at the default pixel size.

NOTE: chr is the chromosome name, not the index, the index must be looked up from the name. For many files chr name == index so this would be an easy bug to introduce and not notice.

Increment resolution (zoom) level by 1 and maintain current center.

Implement color scale control as in desktop Juicebox. This will control the property contactMatrixView.colorScale.

    this.colorScale = new igv.GradientColorScale(
        {
            low: 0,
            lowR: 255,
            lowG: 255,
            lowB: 255,
            high: 2000,
            highR: 255,
            highG: 0,
            highB: 0
        }
    );

Couple of minor tweaks to the "go" box

(1) coordinates should be integer, use "Math.round()"
(2) coordinates are "1" based. This means add 1 to the start position for display. The end position is un-affected.

There are some bugs in locus parsing. (1) The tests are too strict

if (.first(validLoci).chr !== .last(validLoci).chr) {
console.log('ERROR. Chromosome indices do not match.');
} else if (locusExtent(.first(validLoci)) !== locusExtent(.last(validLoci))) {
console.log('ERROR. Chromosome extents do not match.');
}

Mixed chromosomes are allowed (e.g. chr1 vs chr4)

If the ranges differ (end - start) the largest range applies. The smaller one is centered, i.e. start and end extended so the range for each extent is equal. This rule applies if view dimensions are equal, for a non-square view adjustments are made proportionally. In the end we need each cell to be square, i.e. pixels per in equal in each dimension.

Pulldown to select dataset (file). This is outside the embeddable object, as in the igv.js examples. For now it will have only 2 selections. Labels and URLs below

Test file - intra nofrag
https://s3.amazonaws.com/igv.broadinstitute.org/data/hic/intra_nofrag_30.hic

GM12878 in-situ combined
https://hicfiles.s3.amazonaws.com/hiseq/gm12878/in-situ/combined.hic

If possible it would be good to speed load. Obviously redoing the hic file format would be sort of a disaster; but if there's something clever we could do with indices, that would be good. Or maybe delayed loading / loading in the background

Implement Juicebox-desktop click-drag zoom, enabled by holding alt key down while clicking. This is a very useful mode for zooming. See slack video for demonstration.

Could we have a transparent canvas overlay on top of the canvas used to draw the heatmap? Or some other element on top? Probably similar to the "ruler" in igv.js, but this one would be a rectangle with an anchor point (the initial alt-clock location).

Again see Slack for video.

Pulldown control to select a resolution (zoom level). Resolutions are available in the property hicReader.bpResolutions. Selecting a new resolution should post an event which the various UI elements respond to (generally by repainting).

Autoscale color range when loading and changing resolution as in desktop Juicebox

Implement the "scrollbar" widgets as in Juicebox Desktop (see screenshot). We might be able to crib scrollbar code from igv.js to do this.

When view dataset GM12878 in-situ combined
https://hicfiles.s3.amazonaws.com/hiseq/gm12878/in-situ/combined.hic

During pan, the rendering flickers on and off:

Erez wants a huge spinner wheel
for now, I'm using

From Erez

Also, if there's space it would be great to "translate" the way the norms are encoded into text that will be more transparent to the uninitiated:
VC = Coverage
VC_SQRT = Coverage (Sqrt)
KR = Balanced
Inter = Interchromosomal
GW = Genome-wide

(Hence Inter_VC = Interchromosomal Coverage)

Using Safari browser. When panning the canvas accelerates away from the cursor making proper panning impossible.

E.g. https://www.dropbox.com/s/xgyze51ahv500ko/Screenshot%202017-03-24%2013.44.21.png?dl=0

versus when you follow link: http://aidenlab.org/juicebox/?colorScale=2376.409321807417&hicUrl=http%3A%2F%2Fhicfiles.s3.amazonaws.com%2Fhiseq%2Fassembly%2Faedes%2Fcombined.hic

See screenshot. This is from the dataset "Dudchenko et al. | Science 2017 Aedes aegypti AaegL4". We're probably going to need a 2-row toolbar to accommodate everything.

Continuously update the URL with state to support bookmarking and emailing links.

Subset of #46 -- just a chromosome control. Exact mechanism undefined but can't involve typing. Perhaps JB desktop for now? That would certainly do. Let's make this a "page" level control for now, in markup, under the load menu. This has some logic to it, you are specifying a specific matrix to view, both dataset and a particular chromosome combination.

It should look good with the pulldown, aligned in some way.

The control(s) needs to listen and update chromosome options when the dataset changes. Listener logic goes in site/site.js

If you load "GM12878" and select resolution "50", then select resoution "500" you'll see something like this. This is repeatable, zooming out from a lower resolution does this.

Per Erez's request, we've also set up on the main site:
http://aidenlab.org/juicebox-on-the-web/

Lmk if the wording needs to be updated.

Also, does someone have an idea why the top x-axis covers some of the panels? Is it because of some bootstrap conflict?