Display ideogramTrackLabel in the geometry/collinear live example

[Mickind]

Hello everybody,

I'm having problems in displaying the labels associated with the _ideogramTrackLabel divs of the Geometry / Collinear live example.
I need to reproduce the Geometry / Collinear live example within my WebApp and I have to load the json of the gene expression using the "Annotations" attribute of the config object.

The problem I encounter is the following: using the "Annotations" attribute of the config object, the labels associated with the div._ideogramTrackLabel are not displayed. Instead, putting the json path in the "annotationsPath" attribute of the config object, everything seems to work fine.

Could you kindly tell me how to solve this problem? Does json have to be formatted in a different way if you want to use it with the "Annotations" attribute?

Thanks so much!

P.S. I am attaching a couple of screenshots to make you better understand the problem. In the first screen, the json is loaded through the "Annotations" attribute, while in the second screen, it is loaded through "AnnotationsPath".

[eweitz]

Hi @Mickind, could you attach your annotations data, and post your Ideogram configuration object? That would help diagnose the issue.

[Mickind]

Hi @eweitz, Thanks for the reply.

I am using the following Ideogram Configuration Object:

config() {
   return {
           organism: 'human',
           orientation: 'horizontal',
           geometry: 'collinear',
           container: '#ideogram',
           sex: this.sex,
           assembly: "GRCh37",
           chrHeight: 100,
           chrMargin: 10,
           legend: this.legend,
           annotationHeight: 60,
           rotatable: false,
           annotationsLayout: 'heatmap',
           annotations:  this.dataIdeogram
         }
}

The this.dataIdeogram variable contains exactly the json that I am attaching to you.

annotationsData.txt

Thanks so much @eweitz !

[Mickind]

Hi @eweitz, could you kindly tell me if you have updates on the issue?
Thank you very much!

[eweitz]

@Mickind, no updates yet, unfortunately. My time on Ideogram for the past several months has been filled by improving the related genes kit, e.g. via Homology.js and Gene Hints.

Thanks for your diagnostic information -- it will help anyone who works to resolve this, and I welcome help on this issue.

Would you mind if I asked where you are using Ideogram?

[Mickind]

Would you mind if I asked where you are using Ideogram?

We are working, with my work team, on a personalised healthcare research project involving the use of genomic and expression data. In order to allow the doctor to view this type of data in the medical record we are creating, ideogram is the best viewer we have found. The data we have sent to you are test (fake) data and do not correspond to real patient data.

Anyway, I hope that the issue will be resolved and I thank anyone who wants to help us. Thanks @eweitz !

[fabionardelli]

Hi, I'm a colleague of @Mickind. After struggling with this for a while, I found a workaround. It consists of assigning the annotations object to the annotationsPath property instead of annotations, pretending it's a file by using:

annotationsPath: URL.createObjectURL(new Blob([JSON.stringify(this.ideogramData)], {type: "application/json;charset=utf-8"})); (VueJS code here)

Doing so the labels are displayed, anyway the browser shows an annoying alert claiming that the file extension (there isn't any in the generated URL) is not one of the allowed ones.
To avoid it I commented out var extension = validateAnnotsUrl(annotsUrl); in annotations.js (line 213).
I know this is not the best solution (pretty abrupt actually), but it allowed us to solve the problem.