formatDetails with async API call

[Bjoernsen]

Hi,
First: I am new to Javascript and jexl.

I would like to modify the details when I click on e.g. a gene. The data that should be added comes from an external API. Unfortunately, the jexl command does not work with async for me.

The track setup

...
"formatDetails": {
  "feature": "jexl:modifyFeatureDetails(feature)"
},
...

One simple plugin that can modify the details

// myplugin.js
; (function () {
  class MyPlugin {
    install() { }
    configure(pluginManager) {
      pluginManager.jexl.addFunction('modifyFeatureDetails', feature => {
        return { something: 'else' }
      })
    }
  }

  // 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,
  }
})()

but when I change pluginManager.jexl.addFunction('modifyFeatureDetails', feature => { to pluginManager.jexl.addFunction('modifyFeatureDetails', async feature => {, it does not work anymore. something does not get added, but I cannot see any error message.

My complete code looks like

// myplugin.js
;(function () {
  class MyPlugin {
    install() {}

    configure(pluginManager) {
      pluginManager.jexl.addFunction('modifyFeatureDetails', async feature => {
        let url = 'https://some.url/feature_name=' + feature.name

        // Make the API call to get the new content
        try {
          let response = await fetch(url)
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          let data = await response.json()
          let new_content = data.result || 'fallback-content'

          // Return the modified feature details
          return { something: new_content }
        } catch (error) {
          console.error('Error fetching new data:', error)
          return { something: 'error' } // handle error case
        }
      })
    }
  }

  // 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,
  }
})()

Retrieving the data works, but it is not added to the details view. When I remove async, JBrowse does not load anymore.

What can I do?

[cmdcolin]

i can try to brainstorm this a bit but one idea to handle this is to use the "extraFeaturePanel" extension point, and then this can be a custom react component, which can have async behaviors (via useState+fetch in useEffect, or some other thing) https://jbrowse.org/jb2/docs/developer_guides/extension_points/#core-extrafeaturepanel

[cmdcolin]

random note: i have considered that some archechitecture that allows replacing any react component with a custom one could be interesting. i have heard this called swizzeling before https://docusaurus.io/docs/swizzling

[cmdcolin]

I created an example for another user that adds a custom "extra panel" that incorporates async API calls here https://github.com/cmdcolin/jbrowse-plugin-extra-panel-demo