plugging error

[yonglbl]

trying to add a plugging by following the instructions on https://jbrowse.org/jb2/docs/config_guides/jexl/ and got an error like this:

createModel.js:16 Uncaught TypeError: P is not a constructor
at createModel.js:16:1
at Array.map ()
at createModel (createModel.js:16:1)
at createViewState (createViewState.js:6:1)
at Species.js:773:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)

any suggestions? thanks

[cmdcolin]

Hi there,
There was actually a typo in that document.

Old code:

// myplugin.js
;(function () {
  class MyPlugin {
    install() {}
    configure(pluginManager) {
      pluginManager.jexl.addFunction('colorFeature', feature => {
        let type = feature.get('type')
        if (type === 'CDS') {
          return 'red'
        } else if (type === 'exon') {
          return 'green'
        } else {
          return 'purple'
        }
      })
    }
  }

  // the plugin will be included in both the main thread and web worker, so
  // install plugin to either window or self (webworker global scope)
  ;(typeof self !== 'undefined' ? self : window).JBrowsePluginMyPlugin = {
    default: Plugin, // <-- This line of code was a problem, Plugin was not a variable we defined!
  }
})()

New code

// myplugin.js
;(function () {
  class MyPlugin {
    install() {}
    configure(pluginManager) {
      pluginManager.jexl.addFunction('colorFeature', feature => {
        let type = feature.get('type')
        if (type === 'CDS') {
          return 'red'
        } else if (type === 'exon') {
          return 'green'
        } else {
          return 'purple'
        }
      })
    }
  }

  // the plugin will be included in both the main thread and web worker, so
  // install plugin to either window or self (webworker global scope)
  ;(typeof self !== 'undefined' ? self : window).JBrowsePluginMyPlugin = {
    default: MyPlugin, // <-- This line of code fixed!
  }
})()

I just updated the doc online

[yonglbl]

it still return the same error. Where should I put the myplugin.js? I put it in the same directory as the component called.
const state = createViewState({
"plugins":[
{
"name": "MyPlugin",
"umdLOC": { "uri": "myplugin.js" }
}
],
assembly,
tracks,
defaultSession,
});
setViewState(state);

[cmdcolin]

if you are using the embedded components then loading plugins is a bit different. You can actually specify the plugin using normal code and don't have to import an external file.

See "Plugins defined in your code" example in our storybook here https://jbrowse.org/storybook/lgv/main/?path=/docs/using-plugins--docs (and the full source code listing here https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithInlinePlugins.tsx)