Add URL token to session file when loading

[r78v10a07]

Hi, Our server uses oauthToken for serving the URL and indexes. We need to insert the current token into the session file before loading the data.

This is the session file we save but when trying to load it, I don't know how to put the oauthToken before loading the data.

{
    "version": "3.0.2",
    "showSampleNames": false,
    "reference": {
        "id": "Human_GRCh38.p14",
        "name": "Human (GRCh38.p14_primary_assembly)",
        "fastaURL": "https://server.org/api/data/Human_GRCh38.p14/component/decompressed_fasta",
        "indexURL": "https://server.org/api/data/Human_GRCh38.p14/component/decompressed_fasta_index",
        "oauthToken": ""
    },
    "locus": "chr11:59,993,153-63,564,173",
    "roi": [],
    "tracks": [
        {
            "type": "sequence",
            "order": -9007199254740991
        },
        {
            "name": "Genes",
            "type": "annotation",
            "format": "gff3",
            "sourceType": "file",
            "url": "https://server.org/api/data/Human_GRCh38.p14/component/bgzipped_gff",
            "indexURL": "https://server.org/api/data/Human_GRCh38.p14/component/bgzipped_gff_index",
            "oauthToken": "",
            "visibilityWindow": 100000000,
            "removable": false,
            "order": 1000000,
            "height": 70
        }
    ]
}

My current code to load the session file is:

async loadPaths(paths) {
        let config;
        const path = paths.url;
        const extension = paths.type;

        if (path instanceof File){
            config = {file: path}
        }else{
            config = {url: path, filename: "." + extension}
        }

        try {
            this.loadHandler(config)

        } catch (e) {
            throw new Error('Session file did not load' + e.message)
        }
    };

I need to load the json and insert the active token before loading the data.

We just to do that with the old version using igv.xhr.loadJson(path) but this is not available in the latest version. So the question is how can I use the internal loadJson method in the igv-webapp code

[jrobinso]

Have you tried setting a "global" token as described here? https://igv.org/doc/igvjs/#OAuth/#setting-the-token-globally

[jrobinso]

Actually I'm not sure that will work as you have no access to "igv" if using igv-webapp. There might not be a solution at the moment.

I actually don't understand your previous solution, its not obvious how that works with the webapp.

[r78v10a07]

The "global" token worked fine. Thanks!

[jrobinso]

@r78v10a07 How did you access "igv" to make the function call? I don't see that its exposed from igv-webapp.

[jrobinso]

@r78v10a07 This is an important question as it looks like I need to add a method to access the "igv" API, but you somehow managed to to it. I assume you are using igv-webapp as that is where this issue is posted, and not igv.js directly. Could you elaborate?

[r78v10a07]

You're correct. I was trying to access the igv API as there are a lot of methods already implemented like json load that could be used while adding custom code to igv-webapp. In this specific case the global token worked well but I agree that you should expose the IGV methods so they can be used in igv-webapp.

[jrobinso]

But you were able to access it ("igv"), how?

[r78v10a07]

I was using igv-webapp version 1.3.0 and this variable was available igv.xhr

That variable allow me to use methods like this

let json = await igv.xhr.loadJson(path);

[jrobinso]

@r78v10a07 That is not part of the API and will not be in the future, you are simply using a global in the earlier version. There are no globals, or should not be, in recent versions. If you want to load json there are plenty of javascript ways to do it outside of IGV. I would recommend using "fetch". But this is not really an IGV question.

My immediate concern is how you were able to set the global access token since "igv" is not exposed. Could you show me the code you used to do that?

[jrobinso]

Sorry to pile on questions, but I have a more fundamental one. As opposed to igv.js, igv-webapp is a complete self-contained application. I don't even understand from where you would call an API. You must be modifying the html (index.html) in some custom way. That is not something the webapp supports, so its difficult to give straightforward answers to your questions.

[r78v10a07]

This is the code in the igv-webapp app.js file

import igv from '../node_modules/igv/dist/igv.esm.min.js'

...

async function main(container, config) {

    AlertSingleton.init(container)

    const host_url = new URL(host)
    igv.setOauthToken(token, "*" + host_url.host + "*");
    console.log("setOauthToken for host", "*" + host_url.host + "*");
...
}

[jrobinso]

Ok that will work, but where is that code? Are you modifying index.html?

If you are modifying index.html you do not need an api to get to "igv", you are doing it directly. In that case the complete igv.js. API is already available to you. Again it is documented here: https://igv.org/doc/igvjs/#

[jrobinso]

Or you are modifying app.js?

[r78v10a07]

I'm modifying the igv-webapp app.js file

[jrobinso]

Got it, messages crossed. Exposing "igv" would not do any good unless you are using custom html. What is needed for this particular case is simply a means to set the oauth token in the igvwebConfig.js file, which is designed to be customizable. Modifying app.js is of course not a recommended long term solution.

[r78v10a07]

Ok. Thanks.

[jrobinso]

Lets leave this open until a configuration parameter is available.

[jrobinso]

Actually I can't think of a secure way to set the oAuth token in the configuration file. So your solution is as good as any.