Integration of NoBuildPlugin with JBrowse Plugin Store Plugins: Configuration Guidance Needed

[evanVerinomics]

Hello JBrowse Community,

I am currently working on a project where I'm aiming to leverage the powerful capabilities of JBrowse 2 by integrating both a NoBuildPlugin and various plugins available from the JBrowse Plugin Store within the same session. My goal is to enhance our JBrowse instance with custom functionality provided by the NoBuildPlugin while also taking advantage of the rich set of features available through the Plugin Store.

So far, I've been successful in configuring my JBrowse instance to utilize either a NoBuildPlugin or Plugin Store plugins independently. However, the challenge arises when attempting to merge these configurations. I am seeking guidance on how to properly configure my JBrowse setup to support this integration. Specifically, I am looking for insights into the following questions:

Is it technically feasible to combine NoBuildPlugin's with JBrowse Plugin Store plugins within the same JBrowse session?
If so, could you provide an example of what the configuration might look like, or point me towards any documentation or resources that could guide me in achieving this integration?
I believe that achieving this integration could not only benefit my project but also serve as a valuable reference for others in the community looking to explore the full potential of JBrowse 2's extensibility.

Thank you in advance for your time and assistance. I am eager to learn from your expertise and contribute back to this vibrant community.

class HighlightRegionPlugin extends Plugin {
    name = "HighlightRegionPlugin"

    install(pluginManager) {

        pluginManager.addToExtensionPoint(
            "Core-extendPluggableElement",
            pluggableElement => {
                if (pluggableElement.name === "LinearGenomeView") {
                    const { stateModel } = pluggableElement
                    const newStateModel = stateModel.extend(self => {
                        const superRubberBandMenuItems = self.rubberBandMenuItems
                        return {
                            views: {
                                rubberBandMenuItems() {
                                    return [
                                        ...superRubberBandMenuItems(),
                                        { ... }
                                    ]
                                }
                            }
                        }
                    })

                    pluggableElement.stateModel = newStateModel
                }
                return pluggableElement
            }
        )
    }

    configure() { }
}

const pluginManager = await loadPlugins([
     //     HighlightRegionPlugin,  // Your custom plugin, this doesn't work
    {
        name: 'MultilevelLinearView',
        url: 'https://unpkg.com/jbrowse-plugin-multilevel-linear-view/dist/jbrowse-plugin-multilevel-linear-view.umd.production.min.js'
    },
    {
        name: "Quantseq",
        url: "https://unpkg.com/jbrowse-plugin-quantseq/dist/jbrowse-plugin-seq.umd.production.min.js"
    }
    // You can include more plugins here
])

const s = createViewState({
    assembly: currentAssembly,
    tracks: currentTracks,
    // plugins: pluginManager,
    plugins: [ HighlightRegionPlugin ],
    location: location,
    defaultSession: currentSession
})

console.log("state: ", s);

[cmdcolin]

I haven't tested it but I believe something like this would work

class HighlightRegionPlugin extends Plugin {
    name = "HighlightRegionPlugin"

    install(pluginManager) {

        pluginManager.addToExtensionPoint(
            "Core-extendPluggableElement",
            pluggableElement => {
                if (pluggableElement.name === "LinearGenomeView") {
                    const { stateModel } = pluggableElement
                    const newStateModel = stateModel.extend(self => {
                        const superRubberBandMenuItems = self.rubberBandMenuItems
                        return {
                            views: {
                                rubberBandMenuItems() {
                                    return [
                                        ...superRubberBandMenuItems(),
                                        { ... }
                                    ]
                                }
                            }
                        }
                    })

                    pluggableElement.stateModel = newStateModel
                }
                return pluggableElement
            }
        )
    }

    configure() { }
}

// this just returns array of loaded plugins, not a pluginManager
const plugins = await loadPlugins([
    {
        name: 'MultilevelLinearView',
        url: 'https://unpkg.com/jbrowse-plugin-multilevel-linear-view/dist/jbrowse-plugin-multilevel-linear-view.umd.production.min.js'
    },
    {
        name: "Quantseq",
        url: "https://unpkg.com/jbrowse-plugin-quantseq/dist/jbrowse-plugin-seq.umd.production.min.js"
    }
    // You can include more plugins here
])

const s = createViewState({
    assembly: currentAssembly,
    tracks: currentTracks,
    plugins: [ HighlightRegionPlugin,...plugins ], // combine the locally defined and externally loaded plugins here
    location: location,
    defaultSession: currentSession
})

console.log("state: ", s);