How to detect click on feature in linear genome view

[svengato]

I am writing a plugin and would like it to do something when the user clicks on a feature (gene) in a linear genome view. It already handles mouseover() of the feature, as well as onChordClick() when they click on an arc in a circular view (as in the plugin tutorial). But none of onClick(), onFeatureClick(), selectFeature() have any effect in the linear genome view. Are these not yet implemented?

[garrettjstevens]

You could extend the model of the display to do this. For example, you'd use the "Core-extendPluggableElement" extension point similar to how it's described here: https://jbrowse.org/jb2/docs/developer_guides/modifying_menus/#adding-track-context-menu-items

Instead of "LinearPileupDisplay", though, you'd probably want "LinearBasicDisplay". And then instead of returning a views attribute, you'd return an actions attribute with a method called "selectFeature", which would override the default "selectFeature" action. ("selectFeature" is what gets called when a feature is clicked)

For reference, the default action can be found here:

jbrowse-components/plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

Lines 218 to 236 in ce05256

	selectFeature(feature: Feature) {
	const session = getSession(self)
	if (isSessionModelWithWidgets(session)) {
	const featureWidget = session.addWidget(
	'BaseFeatureWidget',
	'baseFeature',
	{
	view: getContainingView(self),
	track: getContainingTrack(self),
	featureData: feature.toJSON(),
	},
	)
	session.showWidget(featureWidget)
	}
	if (isSelectionContainer(session)) {
	session.setSelection(feature)
	}
	},

[svengato]

In my model, I have

const stateModel = types
  .model({
    id: ElementId,
    type: types.literal('MyView'),
  })
  .actions(() => ({
    // unused but required by your view
    setWidth() {},

    // attempt to add selectFeature() method
    selectFeature(feature: Feature) {
      console.log('selectFeature(): ' + feature)
    },
  }))

but clicking the feature does not override the default behavior of popping up a Feature Detail panel about the feature.

The methods that work, onChordClick() and mouseover(), are defined in src/index.ts like this:

    pluginManager.jexl.addFunction(
      'mouseover',
      (feature: any) => {
        console.log('mouseover: ' + JSON.stringify(feature.toJSON()))
      },
    )

but a similar definition for selectFeature() does not work there either.