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.

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

Display ideogramTrackLabel in the geometry/collinear live example #276

Open
Mickind opened this issue Jul 16, 2021 · 6 comments
Open

Display ideogramTrackLabel in the geometry/collinear live example #276

Mickind opened this issue Jul 16, 2021 · 6 comments

Comments

@Mickind
Copy link

Mickind commented Jul 16, 2021

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".

ScreenError
ScreenOk

@eweitz
Copy link
Owner

eweitz commented Jul 20, 2021

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

@Mickind
Copy link
Author

Mickind commented Jul 20, 2021

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
Copy link
Author

Mickind commented Sep 1, 2021

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

@eweitz
Copy link
Owner

eweitz commented Sep 1, 2021

@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
Copy link
Author

Mickind commented Sep 1, 2021

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants