Callback for rubber band selection

[guzmanvig]

Currently, on React's linear genome view component, onChange callback doesn't get called when something is selected. It would be nice to have a callback that gets called when a selection is made.

Alternatively, is there another way to get the start, end, and sequence of the rubber band selection programmatically?

Thanks!

[cmdcolin]

This code in our new bookmark plugin shows how it is possible to write a plugin to add a new menu item to the menu that pops up when you select a region

It is a bit of a learning curve to make a plugin though and we could consider making a callback called when a selection is made if it cuts down on the work

[cmdcolin]

Just for reference, here is how it looks like to make a plugin

https://github.com/GMOD/jbrowse-components/blob/main/plugins/grid-bookmark/src/index.ts#L107-L137

A minimal stripped down example of this plugin would look like this

import BookmarkIcon from '@material-ui/icons/Bookmark'
import Plugin from '@jbrowse/core/Plugin'
import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'

export default class extends Plugin {
  name = 'GridBookmarkPlugin'

  install(pluginManager) {
    pluginManager.addToExtensionPoint(
      'Core-extendPluggableElement',
      pluggableElement => {
        if (pluggableElement.name === 'LinearGenomeView') {
          const { stateModel } = pluggableElement as ViewType
          const newStateModel = stateModel.extend(self => {
            const superRubberBandMenuItems = self.rubberBandMenuItems
            return {
              views: {
                rubberBandMenuItems() {
                  return [
                    ...superRubberBandMenuItems(),
                    {
                      label: 'Bookmark region',
                      icon: BookmarkIcon,
                      onClick: () => {
                        const { leftOffset, rightOffset } = self
                        const selectedRegions = self.getSelectedRegions(
                          leftOffset,
                          rightOffset,
                        )
                        // console log the list of potentially multiple regions that were selected
                        console.log(selectedRegions)
                      },
                    },
                  ]
                },
              },
            }
          })

          pluggableElement.stateModel = newStateModel
        }
        return pluggableElement
      },
    )
  }

  configure() {}
}

Here is an example from our @jbrowse/react-linear-genome-view storybook about using plugins with the lgv https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx#L137-L161

And our plugin template https://github.com/GMOD/jbrowse-plugin-template/issues

[guzmanvig]

Thanks for your response, it does seem kind of an overkill to create a plugin just to read the selection, and it would make sense to me that it generates an event in the onChange callback.

Anyway, I am not being able to make your code above work as pluginManager doesn't have an addToExtensionPoint function. The way I'm adding the plugin is:

import MyPlugin from "./plugin";
...
const viewState = createViewState({
      assembly,
      tracks,
      defaultSession,
      plugins: [MyPlugin],
    });

  return <JBrowseLinearGenomeView viewState={viewState} />

Where MyPlugin is your example code.

[cmdcolin]

Hmm...The addToExtension point function was added in the latest release of @jbrowse/react-linear-genome-view (v1.3.5), are you using that version?

[guzmanvig]

That was it! Thanks!

[cmdcolin]

I think probably we will recommend users to use the addToExtensionPoint feature instead of onPatch for this, the state for the highlight never goes through onpatch

[cmdcolin]

thanks for testing this out for us though! glad it worked