LocusZoom.js - Unable to use custom adapter for LocusZoom data source

[vb-tony]

Note: I am opening this issue because I did not have permissions to post a new conversation to the locuszoom Google group after joining the group.

Hello, I am requesting help around using custom adapters as a data source.

I am trying to extend the AssociationLZ adapter in order to provide a custom getUrl() function when using it in a standard association plot. Code is as follows:

const AssociationLZ = LocusZoom.Adapters.get('AssociationLZ');`

class CustomAssociation extends AssociationLZ {
    getURL(state, chain, fields) {
        const {chr, start, end, code} = state;

        return `${this.url}/code=${encodeURIComponent(code)}&chr=${encodeURIComponent(chr)}&start=${encodeURIComponent(start)}&end${encodeURIComponent(end)}`
    }
}

LocusZoom.Adapters.add('CustomAssociation', CustomAssociation);

// Define the data
const apiBase = 'https://portaldev.sph.umich.edu/api/v1/';

const data_sources = new LocusZoom.DataSources()
        .add('ld', ['LDServer', { url: 'https://portaldev.sph.umich.edu/ld/', params: { source: '1000G', method: 'r' }}])
        .add('recomb', ['RecombLZ', { url: apiBase + 'annotation/recomb/results/', build: 'GRCh38' }])
        .add('gene', ['GeneLZ', { url: apiBase + 'annotation/genes/', build: 'GRCh38' }])
        .add('constraint', ['GeneConstraintLZ', { url: 'https://gnomad.broadinstitute.org/api/', build: 'GRCh38' }])
    .add('assoc', ['AssociationLZ', {url: apiBase + 'statistic/single/', params: { source: 45, id_field: 'variant' }}]);

data_sources.add('mystudy', ['CustomAssociation', {url: 'https://data.example/gwas', params: { code: 42 }}]);

This compiles file. However, when I am trying to load up the LocusZoom plot. An error is thrown on the line for adding my custom adapter that says "class constructors must be invoked with 'new'". This seems to be tied to the create() function in the locuszoom/esm/registry/base.js file.

Any help with understanding why this issue is happening is greatly appreciated. I am trying to follow the documentation highlighted here: https://statgen.github.io/locuszoom/docs/guides/data_retrieval.html#creating-your-own-custom-adapter.

Some other callouts is that I am putting this code within a React component for a React app using Javascript.

Thank you!

[abought]

What an odd error!

First, you're very much on the right track. This is very close to how we create the adapter in our LocalZoom tool, which is based on Vue + Webpack + Babel. (we absolutely do support modern build tooling- I pushed a new release )

(forgive any minor differences in the names of methods: LocalZoom is using a "pre-release", to help us test some internal refactoring before we inflict it on others) https://github.com/statgen/localzoom/blob/develop/src/util/lz-helpers.js#L16-L26

Two questions:

1. Are you using anything special in terms of web browser (old pre-ES6 syntax) or babel configuration (customized polyfills)? It's odd that a class constructor isn't being recognized correctly. (the create method is indeed invoking constructor with new internally)
2. What version of LocusZoom.js are you using? The tutorial is based on 0.13.0, more or less; some change landed if you have an old site.

I'm around a bit this evening and happy to help debug/pair- I'll be out of office the next few days and would rest easier if I cleared such a weird bug off my plate first. :)

[abought]

Also, is the error in Adapters.add or datasources.add? (I strongly assume the latter, but when someone files a bug report that seems to bypass the laws of javascript... well, we ask)

[abought]

I'd be interested to see a full stack trace in exact detail, if that's ok? For example, are you sure that the error occurs with your new custom datasource? Or is it the error being fired when you create something else?

LZ exports sourcemaps to facilitate debugging (assuming you aren't just using the esm modules via import LocusZoom from 'locuszoom'- either way you're covered); the first time you see the error, it can be helpful to click the line of code in the stacktrace--> open devtools-->, set a breakpoint, and introspect what's going on. That's a more advanced usage that requires knowledge of the internals, but I've found it helpful in the past when verifying that a bug is happening in the place I think it is.

[vb-tony]

Hi Andy, thanks for helping me with this.

To answer some of your questions:

• Not using any weird pre-ES6 things
• I am using LocusZoom v0.13.4
• It looks like the error is add the 'datasources.add...' part

I've attached a stacktrace of when the error occurs: stacktrace.txt

When setting up breakpoints, everything seems like it should be okay. But when looking at the registered items in the browser debugger, I noticed that the CustomAssociation looks like a function whereas the other items are labeled classes. Maybe I'm not setting up my custom adapter class right...

Also, no worries about being out for a few days. I'll be out as well so we can certainly resume this at a later time. Thanks so much!

[vb-tony]

Hey Andy,

Another update -- I have resolved the issue!

Upon taking a deeper look at the code, you were right in that it had something to do with Babel configuration. My React app was using an older version of Babel that targeted ES2015.

After running 'npx babel-upgrade --write' and then updating files using old Babel packages to the new versions, this resolved the issue. I am now able to use the custom adapter as a data source in my layout.

Thanks so much for your inputs! I'll go ahead and close this issue. Cheers!

[abought]

As mentioned on the mailing list- glad you got this working!

Incidentally, I'd be interested in seeing the site you build if it becomes public some day- drop me a note! In addition to simple curiosity, we have some breaking syntax changes planned for release 0.14; I try to consider "big" LZ users when deciding which features merit extra backwards compatibility efforts.

[vb-tony]

Thanks for the heads up, Andy! For sure, will keep you posted if I have any updates worth sharing.