Possible to add clickable elements to the Feature Details panel?

[john-portwood]

Hello!

I'm working with about 60 genomes, and many of these have pangenome datasets across each other. For example, we have a set of pangenome markers across 23 of these genomes, and I would like to implement a feature where the Feature Details of these markers has a field where a new Linear/Syntenic Genome View panel can open by selecting an alternative genome to view the marker in. We have similar functionality built into JB1 in the below screenshot, but it would be really cool to be able to do it in the same JB2 window by opening different panels:

However, attempting to add select menus or buttons gets escaped. Adding anchor tags work which is really nice for linking to external sites, but it seems the onclick attribute is being removed for security purposes. Is there a way to add clickable elements, and also ones that call a function?

I wrote the below code to open a new LinearGenomeView as a proof-of-concept (with a genome & location hard-coded for now):

pluginManager.jexl.addFunction('openGenome', async feature => {
        const session = pluginManager.rootModel?.session
        const assemblyManager = pluginManager.rootModel?.assemblyManager
      
        if (!session || !assemblyManager) {
          console.error('Missing session or assemblyManager')
          return
        }
      
        const assemblyName = 'Zm-B97-REFERENCE-NAM-1.0'
        const refName = 'chr2'
        const start = 200000
        const end = 210000
      
        try {
          const asm = await assemblyManager.waitForAssembly(assemblyName)
          const canonicalRef = asm.getCanonicalRefName(refName)
          const region = asm.regions.find(r => r.refName === canonicalRef)
      
          if (!region) {
            console.error('Region not found in assembly:', refName)
            return
          }
      
          const displayedRegion = {
            ...region,
            start,
            end,
          }
      
          // Add view without tracks first
          const view = session.addView('LinearGenomeView', {
            type: 'LinearGenomeView',
            displayedRegions: [displayedRegion],
          })
      
          // Now add tracks to the view
          view.showTrack('B97_gene_models_official')
      
          console.log('Launched new Linear Genome View at', displayedRegion)
        } catch (e) {
          console.error('Error launching genome view:', e)
        }
      })

The code works beautifully when attached to the formatDetails.feature field in the track definition, but this causes the function to execute every time a feature is clicked when instead I would like it to only execute when a link/button is clicked in the Feature Details page.

Any help would be much appreciated!

[cmdcolin]

I am imagining there is the code for the select box in the GFF3 file encoded as HTML in column 9 :)

Unforunately jbrowse doesn't allow this anymore! It is somewhat insecure to allow such things (creates opportunity for cross site scripting)

However, we try to allow plugins to do these operations

I tried making a similar thing with a plugin here. This is a no-build plugin, so it doesn't require compiling or anything, it can just be dropped into your folder and then adding to config.

It specifically adds this extra feature panel to the track with trackId 'Genes' in this case

Screenshot

// esm_plugin.js
export default class Plugin {
  name = 'MyLittlePlugin'
  version = '1.0'

  install(pluginManager) {
    const React = pluginManager.jbrequire('react')

    function ExtraFeaturePanel({ feature }) {
      // if you wanted to get data off the feature, use the feature object param
      const options = ['ctgA:1-5,000', 'ctgA:2,000-20,000', 'ctgB'] // hardcoded options
      const [value, setValue] = React.useState('EDEN')
      return React.createElement('div', null, [
        React.createElement(
          'label',
          { htmlFor: 'selectbox' },
          'Select location: ',
        ),
        React.createElement(
          'select',
          {
            value,
            id: 'selectbox',
            onChange: async event => {
              setValue(event.target.value)
              pluginManager.rootModel.session.addView('LinearGenomeView', {
                type: 'LinearGenomeView',
                init: {
                 // note: this "init" field is a new feature of jbrowse since last couple releases. It let's you provide a simple JSON object with location and tracks  array and assembly. possibly has less error checking than the approach you had, but it is a simple syntax 
                  loc: event.target.value,
                  tracks: ['Genes'],
                  assembly: 'volvox',
                },
              })
            },
          },
          options.map(option => React.createElement('option', { key: option }, option)),
        ),
      ])
    }

    pluginManager.addToExtensionPoint(
      'Core-extraFeaturePanel',
      (DefaultFeatureExtra, { model }) => {
        return model.trackId === 'Genes'
          ? { name: 'Pangenome navigator', Component: ExtraFeaturePanel }
          : DefaultFeatureExtra
      },
    )
  }
  configure() {}
}

config

{
  "tracks": [],
  "assemblies": [],
  "plugins": [
    {
      "name": "UMDLocPlugin",
      "esmLoc": {
        "uri": "esm_plugin.js"
      }
    }
  ]
}

extra note: the same thing written with e.g. the jbrowse-plugin-template, which allows JSX, would look like this

import React from 'react'
function ExtraFeaturePanel({ feature }) {
  // if you wanted to get data off the feature, use the feature object param
  const options = ["ctgA:1-5,000", "ctgA:2,000-20,000", "ctgB"]; // hardcoded options
  const [value, setValue] = React.useState("EDEN");
  return (
    <div>
      <label htmlFor="selectbox">Select location</label>
      <select
        id="selectbox"
        value={value}
        onChange={async (event) => {
          setValue(event.target.value);
          pluginManager.rootModel.session.addView("LinearGenomeView", {
            type: "LinearGenomeView",
            init: { 
              // note: this "init" field is a new feature of jbrowse since last couple releases. It let's you provide a simple JSON object with location and tracks  array and assembly. possibly has less error checking than the approach you had, but it is a simple syntax 
              loc: event.target.value,
              tracks: ["Genes"],
              assembly: "volvox",
            },
          });
        }}
      >
        {options.map((option) =>
          React.createElement("option", { key: option }, option),
        )}
      </select>
    </div>
  );
}


export default class Plugin {
  name = 'MyLittlePlugin'
  version = '1.0'

  install(pluginManager) {
    const React = pluginManager.jbrequire('react')


    pluginManager.addToExtensionPoint(
      'Core-extraFeaturePanel',
      (DefaultFeatureExtra, { model }) => {
        return model.trackId === 'Genes'
          ? { name: 'Pangenome navigator', Component: ExtraFeaturePanel }
          : DefaultFeatureExtra
      },
    )
  }
  configure() {}
}

[cmdcolin]

Also note: this type of feature I believe is very desirable for multiple types of groups, so I am very open to trying to make this type of feature built-into jbrowse 2 core codebase

I am trying to think more about "multi-way synteny" and pangenome type setups lately, so this is very relevant

[cmdcolin]

random update: I updated my plugin config above, it is just

{
  "tracks": [],
  "assemblies": [],
  "plugins": [
    {
      "name": "UMDLocPlugin",
      "esmLoc": {
        "uri": "esm_plugin.js"
      }
    }
  ]
}

where esm_plugin is alongside the config.json file

[john-portwood]

This worked, thank you so much Colin!!! Something like this is exactly what I was aiming for! The maize community is becoming a lot more pangenome-centric, and so I'm sure our users will greatly appreciate this feature :). Looking forward to implement similar features across our other pangenome tracks!

I also really appreciate the example included with the jbrowse-plugin-template format. I had been trying to get this to work in a no-build plugin just to keep things simple, but as I learn more about making plugins and the JB2 API I'll definitely be interested in experimenting with regular plugins. I actually wasn't sure if what I wanted to implement was possible in a no-build plugin, but I'm glad you confirmed that it is!