BoxRendererType re-exports

[tchannagiri]

Hi JBrowse team,

Would it be possible to re-export in the plugin manager all the exports in files like BoxRendererType.ts in a future release? Currently, only the BoxRendererType class itself is exported. The reason I ask is because I am trying to insert my own layout into the class, and it seems that to do this correctly I must subclass BoxRendererType, LayoutSession, and BaseLayout, and override certain methods. Right now I can subclass BoxRendererType and BaseLayout because these are re-exported, but I must copy and paste LayoutSession in order to subclass it.

Maybe this is a fairly minor point, but I can't see any downside to exposing all the exports, and it may make it easier to extend the capabilites of JBrowse for plugin authors.

Edit: Also, if you think there is a simpler way to solve my issue, please do let me know!

Thanks,
TJ

[garrettjstevens]

Hi @tchannagiri,

Thanks for letting us know what you're using, we're trying to figure out the best ways to make our plugins easier for others to use. How are you accessing the BoxRendererType? If you're importing it from @jbrowse/core, then you can do the same thing to get the LayoutSession. It would look something like this:

import BoxRendererType, { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'

You mentioned the plugin manager, though, so if you're accessing BoxRendererType differently, let me know and I can try to provide more guidance.

[tchannagiri]

Hey Garret,

Thanks for the reply. So here's the deal: I'm using the plugin template (https://github.com/GMOD/jbrowse-plugin-template) which has tsdx setup to auto-magically convert a static import of BoxRendererType.ts (and other core files) to a runtime import (verified by looking at the UMD output, the import becomes: global.JBrowseExports['@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType']). When I import BoxRendererType and LayoutSession as you have above, I get runtime errors because tsdx forces all the imports from BoxRendererType.ts to refer to the runtime import (which doesn't contain the class LayoutSession, and so gives a null reference exception). I have tried to bypass the dynamic import from the tsdx config and statically import BoxRendererType.ts from the node_modules package, but I get compilation errors. Details below.

Compile error when I statically import BoxRendererType.ts:
Error: 'ForwardRef' is not exported by node_modules/@material-ui/utils/node_modules/react-is/index.js, imported by node_modules/@material-ui/utils/esm/getDisplayName.js

Steps to reproduce this error:

1. Clone https://github.com/tchannagiri/jbrowse-plugin-template.git.
2. Run ‘yarn’ and ‘yarn upgrade’ in the directory
3. Run ‘yarn build’

The tsdx.config.js is modified in this template to not classify BoxRendererType.ts as an external import (ie. it undoes what createJBrowsePluginTsdxConfig from '@jbrowse/development-tools' does to calssify BoxRendererType.ts as an external, runtime import).

Steps to show LayoutSession is ‘null’ in the plugin template build using default settings:

1. Clone https://github.com/GMOD/jbrowse-plugin-template.
2. Near the top of index.ts (in the src directory) add:
   import BoxRendererType, { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
3. Somewhere in index.ts:MyProjectPlugin.install() put in the line:
   console.log("LayoutSession == null: " + (LayoutSession == null));
4. Build and load this plugin in an instance of JBrowse. In the chrome dev console you should see ‘"LayoutSession == null: true”.

Hope this helps. Let me know if anything was not clear. Right now I have gotten things to work with some copy and paste but of course it would be best to avoid that as much as possible.

Thanks,
TJ

[garrettjstevens]

Thanks @tchannagiri, I understand what's happening now. See #2047 where I've proposed a potential fix.

[garrettjstevens]

Hi @tchannagiri, I thought I understood what was happening, but I guess I didn't. With some further testing I've found that I can't reproduce your problems. Using the second set of steps with the default template, LayoutSession is not 'null' for me. This is what I see in my console (I added a console.log(LayoutSession), too): See below comment, I was able to reproduce it.

I was also able to get your fork of the template running by deleting the customizations in tsdx.config.js. These are the steps I followed to get your fork going:

• clone https://github.com/tchannagiri/jbrowse-plugin-template
• yarn setup
• edit tsdx.config.js back to the default, i.e. the rollup function is

rollup(config, options) {
  return createJBrowsePluginTsdxConfig(config, options, globals)
},

• yarn build
• yarn serve --cors --listen 9000 .
• Make sure jbrowse web is running
  • Go to jbrowse-components/products/jbrowse-web
  • run yarn start
  • JBrowse Web is now running on localhost:3000
• Go to http://localhost:3000/?config=http://localhost:9000/jbrowse_config.json
• Check console:
  

[garrettjstevens]

Hi @tchannagiri, sorry, it's been a rough Monday. I was able to reproduce what you said, and I have a (better than the previous one, I think) fix proposed here: #2051.

[tchannagiri]

Hey @garrettjstevens, no worries, I'm kind of poking around in obscure corners of the JBrowse code base, and honestly these kinds of build system problems are a huge PITA in my experience. Thanks, I'll try and test out the fix as soon as I can.