eweitz / ideogram Goto Github PK

Support labeling for features like genes or small variants. For example, in an ideogram with a basic annotation showing the location of gene BRCA1, add an option to display the label "BRCA1" next to the annotation.

(I found your project yesterday, and it's quite cool!)

The parsing code in processAnnotData looks like it's stashing the reported chromosome contained in the input rawAnnots, however whatever is making use of the resulting data seems to ignore the chromosome name and just assume the annots entries are present for every chromosome in order.

For example, with the following my-test.json annotation data:

{"keys":["chr","start","length","color"],
 "annots":[
     {"chr":"20","annots":[["20",30954171,5816,"rgba(255, 0, 0, 0.65)"]]},
     {"chr":"foo", "annots": []},
     {"chr":"X","annots":[["X",47422351,6720,"rgba(0, 0, 255, 0.65)"]]}
 ]
}

And with the following configuration:

 var config = {
      organism: "human",
      assembly: "GRCh37",
      orientation: "vertical",
      chrMargin: 5,
      chrHeight: 200,
      annotationTracks: undefined,
      annotationsPath: "my-test.json",
      annotationsLayout: "overlay",
      dataDir: "ideogram/data/bands/native/",
  };

  var ideogram = new Ideogram(config);

The annotation for chromosome 20 is displayed on chromosome 1, and the annotation for chromosome X is displayed on chromosome 3. I would expect that these annotations should be displayed on the correct chromosomes. I'm not sure exactly where the problem lies.

(BTW, is there a way to display multiple ideograms in a single page? E.g. I have a set of chromosome data for several different individuals, and want to display them as separate ideograms on one page. Is it possible to add a small example to the existing examples?)

Would it be difficult to adapt the code to propose a display for homologous chromosomes for polyploid genomes ?

For instance, by adding a ploidy parameter in the conf file, having all chromosomes displayed. In the case of allopolyploids, it would be nice to be able to distinguish between genome groups (e.g. A, B).

Hi,

Excellent plugin. Thanks for developing and sharing it over the github.

I am wondering if I can annotate based on chromosome coordinate so the arrow is placed exactly at that point on the ideogram.

thanks,

Aparna

Add support for perpendicular band labels, e.g. in horizontally-oriented chromosomes.

Improve handling of chromosomes in mitochondrion (chrMT) and chloroplast (chrCP). Currently chrMT is never shown, and chrCP is shown but unlabeled.

These molecules pose visual design challenges:

1. chrMT and chrCP are often a few orders of magnitude shorter than nuclear chromosomes
2. chrMT and chrCP are circular

Challenge 2 will be handled later. For this issue, address challenge 1, provide an option to show or hide these special molecules, and always label them if they are shown.

I know you are using Ubuntu 14.04 with PhantomJS 1.9.7 and Node 0.12.7, but I'm using Windows 10 with the same PhantomJS version, and Node 2.15.5.

I have already installed the necessary packages, and followed the steps written in server.js, but after running the curl command-line in a different command prompt, I get an error.

command prompt window 1

C:\ideogram-js\examples\server> ..\node_modules\phantomjs\lib\phantom\phantomjs.exe server.js
Web server running on port 9494

ReferenceError: Can't find variable: Ideogram

 phantomjs://webpage.evaluate():107
 phantomjs://webpage.evaluate():151
 phantomjs://webpage.evaluate():151
TypeError: 'null' is not an object (evaluating 'tmp[0]')

 server.js:226
 :/modules/webpage.js:281
_

command prompt window 2

C:\ideogram-js\examples\server> curl -X POST -d @ideo_config.json -H "Content-Type: application/json" localhost:9494
_

Did I miss any important step(s), or is it possibly incompatible with Windows 10? Hoping for your response soon, thank you!

Hello! Thanks so much for this d3-based visualization software. Our group loves it. I downloaded the karyotype (Ensemble) and centromere (UCSC) information for Maize and process the karyotype file in the same way implemented in convert_band_data.py.

But I continue to get the following error message:
core.js:991 Uncaught Error: Base pair out of range. bp: 11588371304284; length of chr1: 301433382
at Ideogram.value (core.js:991)
at Ideogram.value (core.js:1316)
at n (core.js:2657)
at core.js:2671

Chromosome length is correctly calculated based the file I provided. Since core.js seems to be loaded from somewhere outside of my server, it is a little difficult to print messages to console to find how it comes up with this huge amount of base pair.

In most ideograms that are vertically oriented and have multiple rows of chromosomes, the rows are misaligned. Each row gets horizontally shifted, such that its chromosomes are not vertically flush with chromosomes in the row above.

This affects small layouts for all organisms. It also affects organisms with many chromosomes in larger layouts, as in this example with dog (Canis lupus familiaris):

• http://eweitz.github.io/ideogram/eukaryotes.html?org=canis-lupus-familiaris

The issue is that the Ideogram doesn't redraw the organism, when the organism parameter is changed in both React and vanilla java script. For example if the organism is 'human' and is changed to 'mouse', it will still show the Ideogram graph of 'human' still. I've been messing around with the Ideogram a lot trying to get this feature to work within react. It seems that other parameters changes can render a redraw of the graph such as showBandLabels and orientation.

I have provided a test case for you to use to better understand the problem, which can be found here: https://github.com/matthewchan15/ideo-test-case

I've been trying to integrate all the props listed in the API here, into react. In order to test the props I've been using the example code found here. I've noticed a discrepancy where many of the props used in the example docs, are not listed in the API docs.

For example in homology, the prop perspective is not listed in the API docs. This is just one case. I find this to be very confusing, are these props no longer being used, or have they simply just been forgotten to be put in the API docs?

   var config = {
   organism: 'human',
   chromosomes: ['X', 'Y'],
   chrHeight: 400,
   chrMargin: 200,
   showBandLabels: true,
   perspective: 'comparative',
   rotatable: false,
   onLoad: onIdeogramLoad
   };

Hello, I am grateful to this library!

I would appreciate it if you would add a support for brush on multiple chromosomes since I would like to provide an interface to select the position from multiple chromosomes. My request is below.

• Switch a brush to each chromosome on drawing multiple chromosomes.
• Option to draw multiple chromosomes not only in ascending order but also in the specified order such as chromosome: ['chr8', 'chr6', 'chr7'].
• Option to draw brush with the initial position such as brush: "chr:start-stop".

And following functions is not a so high priority but convenient for me.

• onClickChromosomeCallback and onClickAnnotationCallback functions
• Synteny line among multiple(3<=) chromosomes.
• Drag and drop to change the order of multiple chromosomes.
• Zoom, scroll, and reverse chromosomes.

An image is as follows:

Thank you,

A question from @wangtulao revealed the need to load natively-formatted annotations via remote URL in annotationsPath. Currently, Ideogram.js assumes any such remote paths are for BED files. Revise that assumption.

I noticed an issue on rotation where the chromosome labels of the Ideogram over lap -> https://eweitz.github.io/ideogram/ploidy-basic

When rotating multiple Ploidy ideograms, there seems to be a glitch with displaying it. -> https://eweitz.github.io/ideogram/ploidy-rearrangements

Hi again,
So, everything is going swimmingly, and I think I've got this all sorted out so a user can upload and display their 23andMe data.

Question: the reference data. How is it being generated? I'm currently taking an Intro to Genomics class, and we've been covering .sam, .bam, .vcf, .bed, and .fastq files. But I'm having a bit of trouble following what's going on in the /data directory.

/data/annotations/10000_virtual_snvs.json... that's from the 10,000 Genomes Project, right? Is that basically a JSON version of a .vcf file?

Hi Eric,

I have initialized an R htmlwidget package for ideogram. [https://github.com/wangtulao/ideogRam], and so far I'm able to reproduce some simple examples.

But the main issue in the current R package is that, the R generated html file or js lib, cannot automatically find/load the "data/" folder, e.g. importing band, then, as a temp fix, I have to manually copy "data/" to the corresponding dataDir location (such as the ones in my example folder). For the same reason, the current R package cannot work in Shiny (since I cannot cp data/ folder to the shiny's runtime environment).

Another issue is due to my lack of JS knowledge, currently the onLoad or call back feature is not available yet. Maybe you can have some quick ideas or suggestions for the above issues.

Thanks!
Freeman

The issue is that when using multiple ideograms, the band labels do not render properly. I suspect this is because the band label SVG are all sharing the same CSS class: class="bandLabel bsbsl-<number>". You can see this in action, when the ideograms on the same row, take turns rendering improperly. I created a test case here for you to try: https://github.com/matthewchan15/ideo-test-case/tree/issue-labels-multi

Below is a GIF showing the issue:

Enhance Ideogram so that it displays centromeres for eukaryotic chromosomes.

Pericentromeric bands are already available for human and mouse. This feature requires retrieving data for centromere gaps in genome assemblies for all eukaryotes that have such data, and rendering those centromeres.

How do we cite this work?

Document the format of JSON for annotations, so developers do not need to dive into Chrome DevTools to learn how to output annotations data for display.

Implement support for circular annotation shapes.

Is there an option in the code to color arms of the chromosome?

It would be nice to have a property that allows the user to set the font-size and font (bonus points) of the chromosome and band labels (without manually modifying the source code -> https://github.com/eweitz/ideogram/blob/master/src/js/bands/styles.js). The font is quite small, and would add value for those who have issues reading it.

The ideogram rotates and renders in a weird way on the rotation animation. This is evident in the sample examples as well, just click on a chromosome-> https://eweitz.github.io/ideogram/mouse

Hi,
Would you take a PR with some documentation to the readme if I submit one? I'm up and running and would be happy to take some notes as I fine tune things, and contribute them back.

Eric! Awesome work! Thank you so much for publishing this.

Have you given any thought to exporting the Ideogram object as an es2015 module? I just managed to get it loaded up into a Meteor/React app, and it works wonderfully. Kudos! The one caveat is that I needed to glob all the contents of ideogram.js into a custom .jsx file with an es2015 export statement. That's going to cause my implementation to drift out of sync with yours.

Thank you for this great tool, I'm using histograms to get overviews of data.

I want to have histo-bars on both sides of a chromosome with different colors.
Is it possible to do? If not, can you add this option?

Greetings,

I want to ask about the possibility of using the exact position for annotation? because when I try to use it as it is without scaling as in [1], some positions are not presented and the whole annotation disappears.
Any idea how I can do that?

Example of positions that not fit with the chrs positions:
In chr9
{
"chr": "9",
"annots": [
[
"",
79318384,
0,
0,
50.0
],
[
"",
139911697,
0,
0,
38.0
],
[
"",
139911697,
0,
0,
62.0
],
[
"",
86474241,
0,
0,
56.0
],
[
"",
27359226,
0,
0,
42.0
],
[
"",
79318384,
0,
0,
50.0
],
[
"",
27359226,
0,
0,
58.0
]
]
},

[1] https://github.com/eweitz/ideogram/blob/master/scripts/python/create_annots.py#L131

Is it possible to use this library with a custom generated genome?

wonderful tools.

whether it can display multiple track(heatmap, histogram, overlay etc.) meanwhile.

In some cases we might want to compare ideograms for multiple samples at once, and currently it does not seem possible. At the moment our use case is for quick comparisons of gross structural variant differences at the outer level rather than needing any zoom capability.

Hi I am trying to do a compartive mapping between Rat and Human. However, following the examples only Human chromosomes appear. If I restrict the code to displaying only a single species, I can get either Human or Rat to appear.

Here is the snippet from the script:
`
let config = {
organism: ["human","rattus-norvegicus"],
chromosomes: {"human" :["1", "6"], "rattus-norvegicus":["13","20"]}
};

let ideogram = new Ideogram(config);
`

Thanks!

I am trying to have plots in hg18, and I tried a couple of values for parameter assembly:
hg18, NCBI36, GCF_000001405.12,
none of them worked.

What's the proper way of doing it?

Relatively small chromosomes get distorted upon rotation. Fix the distortion while preserving the animated transition between rotated states (e.g. between whole-genome and single-chromosome views).

For example, click chr21 in http://eweitz.github.io/ideogram/human.html and notice horizontal stretching. This affects at least the border stroke at telomeres and centromere, and the space between parallel lines in the hatching pattern in variable regions on the p arm. Compare that to the rotated view of chr1. The distortion in chr21 is caused by its much smaller size.

The distortion upon rotation gets acute in some cases:

• Microchromosomes, e.g. in chicken (Gallus gallus) here
• Some non-nuclear chromosomes, e.g. in rice (Oryza sativa) here

Develop support for basic depictions for the chromosome complement of all eukaryotes. Integrate a third-party web API to retrieve chromosome count and length data for arbitrary taxa.

Hi, I noticed when I call multiple time on one page, the previous calling will limit the plotting for the next calling.

<div id="example1"></div>

<script>

 var config1 = {
     container: "#example1",
     organism: 'human',
     orientation: 'horizontal',
     annotations: [
         {
             "chr": "2",
             "start": 34294,
             "stop": 125482
         },
         {
             "chr": "17",
             "start": 43125400,
             "stop": 43125482
         }
     ]
 };

 var ideogram1 = new Ideogram(config1);

</script>

<div id="example2"></div>

<script>
 var config2 = {
     container: "#example2",
     organism: "human",
     chromosome: "7",
     orientation: "horizontal",
     annotations: [
         {
             "chr": "7",
             "start": 199999,
             "stop": 3000000
         },
         {
             "chr": "7",
             "start": 6000000,
             "stop": 9000000
         }
     ],
     "annotationsLayout": "overlay"
 };

 var ideogram2 = new Ideogram(config2);

</script>

On the second plotting, the chromosome length seemed to be restricted by the previous setting.

Hello @eweitz and community,

I've been working on wrapping Ideogram, to be used with the Python framework Dash. The application you are seeing is written fully in Python, and supports the entire Ideogram API. I'd love to know what you guys think so far! As well, if you see any bugs please let me know!

Dash Ideogram: https://dash-gallery.plotly.host/dash-ideogram-test

Implement support for multiple facets in Ideogram.js's filtering module. Selections across different facets should apply a Boolean AND (intersection), in contrast to selections within a facet, which apply a Boolean OR (union).

Support dynamically adding annotations through a JavaScript API, to complement the current file-based approach.

Hi @eweitz ,

First of all, thanks for the magnificent work you 've done with ideogram.js. Something like this was really missing.

An issue that I've just spotted (may not a real issue) is that in ideogram.css stylesheet you assign the line-height property as line-height: 19.6px; in the whole body element. This may override other styling themes (it happened in my case and created a mess with the whole application which took me some time to find out).

Is it possible that you somehow restructure the styling in upcoming versions so as to avoid this? Or if you do it for demo purposes, maybe remove it from the ideogram css stylesheet?

Thanks again for all the work.

Add a parameter for "assembly" to the Ideogram constructor.

The intent is to enable users to specify a non-default (i.e., previous or non-reference) assembly for the given organism. For example in human, where GRCh38 would be the default, this would enable users to specify the previous major version of human reference genome, GRCh37.

Allow NCBI name, GenBank accession or RefSeq accession.

Hi, I am using the latest master, and have noticed an issue with the annotations. It seems that when the user hovers over an annotation on other Ideogram's besides the first one, the annotation shows up behind the ideogram. I created an test case you can try here: https://github.com/matthewchan15/ideo-test-case/tree/issue-annotations-multi

Below is a GIF displaying the issue more clearly. I found that if you add a z-index: 100 to the style of _ideogramToolTip with the developer tools, this becomes fixed. I have not tried modifying the source code, but I'm assuming you just need to add a z-index to _ideogramToolTip. I could make a PR if you like!

Hi

Your ideogram visualization looks very neat. I am looking into visualizations for genetic genealogy purposes. For that reason it would be very useful to color segments from multiple persons, for instance for similar regions:

https://famresearch.files.wordpress.com/2016/02/familytreedna-3-close-relatives-cf-to-kf.jpg?w=455

If multiple people match each other and share a segment of DNA on the same location (after checking that it is on the same side) they could have a common ancestor.

Best

EJ Blom

Increase the number of genomes that can display cytogenetic bands.

Currently, Ideogram.js has cytogenetic bands for human, mouse, and rat. That data comes from NCBI's Ideogram Service FTP site, ftp://ftp.ncbi.nlm.nih.gov/pub/gdp/. It is converted into a format used by Ideogram.js in convert_band_data.py.

@cshukai informed me in #82 that cytogenetic band data is available from Ensembl Genomes, e.g. ftp://ftp.ensemblgenomes.org/pub/plants/release-25/mysql/zea_mays_core_25_78_6/karyotype.txt.gz. They also noted the availability of centromere coordinates in the GenoMaize's UCSC Genome Browser, e.g. here. Incorporate these sources of karyotype data into Ideogram.js's cytoband data pipeline.

Hi, I am using the latest master, and have noticed an issue with the annotations. It seems that when the user scrolls down, and hovers over an annotation, the annotation becomes displaced upwards. I created an test case you can try here: https://github.com/matthewchan15/ideo-test-case/tree/issue-annotations-multi (Render Issue Single).

Below is a GIF displaying the issue more clearly. I found that if you change the style of _ideogramToolTip to position : fixed with the developer tools, this becomes fixed. I have not tried modifying the source code, but I'm assuming it is as simple as changing the position of _ideogramToolTip. I could make a PR if you like!

Fetching remote band data fails in Ideogram.js 1.1.0 using the default CDN, unpkg.com, because the CDN strips query string parameters. This bug does not manifest locally or in unit tests, but breaks the examples hosted externally on GitHub Pages.

The cause was an updated approach of getting cytogenetic band data in version 1.1.0. That version used query string parameters to associate a taxid (NCBI Taxonomy ID) between a request object and its corresponding response. The association had previously been made by adding a simple property to the d3 request object. That was no longer possible when Ideogram shifted from using the deprecated d3 request module to the standard fetch API, making query strings an appealing (but evidently brittle) solution.

This bug warrants a patch release, v1.1.1.

I'm looking to load data locally into the Ideogram, for example if I wanted to load one of these files without using dataDir: https://github.com/eweitz/ideogram/tree/master/data/bands/ncbi

Hi, I'm trying to show gene mark on chrom with brush function, but I find it shows a wrong region.
I set a anno region 17:43044294-43125482 and get the result in follonig picture:

The mark is selected but the region doesn't overlap 17:43044294-43125482

Here is my html code

<head>
  <script src="https://unpkg.com/[email protected]/dist/js/ideogram.min.js"></script>
</head>
<body>

  <div>
    Selected region on human chromosome 19:
    <div><span id="from"></span>-<span id="to"></span>
      (extent: <span id="extent"></span> base pairs)
    </div>
  </div>

  <div class="ideograms-here">
    <!-- The ideogram goes here. -->
  </div>

  <script>
      function writeSelectedRange() {
        var r = ideogram.selectedRegion,
            from = r.from.toLocaleString(), // Adds thousands-separator
            to = r.to.toLocaleString(),
            extent = r.extent.toLocaleString();

        document.getElementById("from").innerHTML = from;
        document.getElementById("to").innerHTML = to;
        document.getElementById("extent").innerHTML = extent
      }
  
      var ideogram = new Ideogram({
        container: ".ideograms-here",
        organism: 'human',
        assembly: 'GRCh37',
        
        annotationsLayout: 'histogram',
        chromosomes: ['17'],
        rotatable: false,
        
        brush: true,
        onBrushMove: writeSelectedRange,
        onLoad: writeSelectedRange,
        
        orientation: "horizontal",
        showBandLabels: true, // only work in horizontal mode
        
        annotations: [{
          name: 'BRCA1',
          chr: '17',
          start: 43044294,
          stop: 43125482
        }]
      });
  </script>
</body>

Thanks!

I'm trying to add mouseover to ideogram, and build it minimized.

After:
npm install ideogram
and
npm install webpack

I tried to run webpack --optimize-minimize
and get this error:

ERROR in ideogram.min.js from UglifyJs
Unexpected token: name (Ploidy) [./src/js/ploidy.js:1,0][ideogram.min.js:6516,6]

So how should this be built minimized?

Cheers,

Jim