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

Jump to bottom

Reference track formatting #540

Open
jodyphelan opened this issue Jun 16, 2020 · 1 comment
Open

Reference track formatting #540

jodyphelan opened this issue Jun 16, 2020 · 1 comment

Comments

@jodyphelan
Copy link

This is a great library, really useful! I have a couple of questions. Apologies in advance if they have already been answered somewhere on the repo.

  1. Is there any documentation? For example there are some really useful functions such as the ability to click on variants to trigger something (https://github.com/hammerlab/pileup.js/blob/master/examples/data.js#L38), however I only found these by looking at the few example. Are all the possible options and configurations covered in the examples or are the potentially other useful ones that are not documented?

  2. I read on some of the github issues that it is possible to limit the region which the viewer can load. Is there any documentation on how to do this?

  3. I am having some issues with the formatting of the reference. At some zoom levels the reference nucleotides and the pileup track seem slightly out of sync, however this is not the case in your online example.

image

I have served the files and included them in my html page like this:

<html>
<head>
<script src="/static/pileup.js"></script>
<link rel="stylesheet" href="/static/pileup.css" >
</head>
<body>
<div class="" id="your-id">
    hello
</div>

<script type="text/javascript">
    var bamSource = pileup.formats.bam({
        url: "/static/synth3.normal.17.7500000-7515000.bam",
        indexUrl: "/static/synth3.normal.17.7500000-7515000.bam.bai",
    });
    var div = document.getElementById('your-id');
    var p = pileup.create(div, {
      range: {contig: 'chr17', start: 7512384, stop: 7512544},
      tracks: [
        {
          viz: pileup.viz.genome(),
          isReference: true,
          data: pileup.formats.twoBit({
            url: 'http://www.biodalliance.org/datasets/hg19.2bit'
          }),
          name: 'Reference'
        },
        {
          viz: pileup.viz.coverage(),
          data: bamSource,
          cssClass: 'normal',
          name: 'Coverage'
        },
        {
            viz: pileup.viz.pileup(),
            data: bamSource,
            cssClass: 'normal',
            name: 'Alignments'
        },
        // ...
      ]
    });
</script>

</body>
@akmorrow13
Copy link
Collaborator

Hi @jodyphelan, to answer your questions:

  1. There is unfortunately no documentation, although that is very needed.
  2. Can you link to the issue that discussed how to change these values? We currently hard code values in which a track cannot load data for (see https://github.com/hammerlab/pileup.js/blob/master/src/main/sources/TwoBitDataSource.js#L35), but I don't think this value is modifiable currently.
  3. Positioning the reference has been an issue for sometime (Fix mobile display cutting off reference genome letters #510), and mostly involves the CSS. You can always add your own CSS to your project, or submit a PR if you can identify this bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@akmorrow13 @jodyphelan