Display Live Tool UI during development

[davelopez]

It would be nice to have the ability to see the tool UI rendered beside the code as you made some tweaks with the parameters, the help, etc. as @hexylena proposed way back in 2015. Maybe not as the core part of the development but as a refining final step to make sure the UI is consistent and all your parameters are well documented and render correctly in the UI.

The initial prototype could be something like this (Disclaimer: the following image is fake 😝):

Feature planning

Use case

1. The tool developer has a tool that passes planemo lint and can be loaded into Galaxy without structural errors.
2. The tool developer executes a vscode command (or press a button in the planemo explorer to run the tool).
3. The extension runs planemo serve under the hood and opens a Webview panel beside the current tool document in the editor.
4. After the tool is served by planemo, the tool UI is displayed in the panel.
5. Whenever the developer makes changes in the tool document and saves them, the tool UI is updated.

Possible difficulties

Using an iframe in the Webview to contain the Galaxy tool UI seems like a reasonable solution, however, after exploring a bit this path I found some obstacles, probably more because of my lack of knowledge in the matter than the problem itself:

• The Galaxy used by planemo serve must deactivate x_frame_options or allow something different than SAMEORIGIN in the config to be able to display the Galaxy UI inside the vscode panel.
• Even if the Galaxy x_frame_options is disabled... when trying to display the inner iframe containing the tool UI still similar problems occur this time in the vscode end:

  [Embedded Page] Uncaught SecurityError: Blocked a frame with origin "http://127.0.0.1:9090" from accessing a frame with origin "vscode-webview://cc4610ec-582e-44f9-98d5-c5c97cdcf6cd".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "vscode-webview". Protocols must match.
  

• Is there a way to display only the Galaxy central panel containing the tool UI instead of the whole Galaxy interface with the tools and history panels? Looks like there is some kind of redirection to the main Galaxy frame every time you try to show a tool.

Maybe just opening the Galaxy web served by planemo in the default browser will be just enough, but I think this way we lose the option to auto-refresh the tool when it changes since we are now not in control. Maybe there is another solution for this?

[bgruening]

Have a look at: https://github.com/galaxyproject/galaxy/blob/dev/lib/galaxy/config/sample/galaxy.yml.sample#L1080

All those options can be overwritten by setting an ENV variable starting with GALAXY_CONFIG_, in this case GALAXY_CONFIG_X_FRAME_OPTIONS=''

Your second issue looks like a CORS issue, maybe that helps? https://github.com/galaxyproject/galaxy/blob/dev/lib/galaxy/config/sample/galaxy.yml.sample#L1250

You see the same problem when you mix https and http sites. https://stackoverflow.com/questions/21525511/the-frame-requesting-access-has-a-protocol-of-https-the-frame-being-accessed

[davelopez]

Thanks @bgruening! using GALAXY_CONFIG_X_FRAME_OPTIONS='' is great to set the Galaxy configuration, but the CORS issue seems to be on the vscode webview side not in Galaxy. So I will have to find a way to allow this CORS operation in vscode. I'll keep investigating :)

[hexylena]

Hi @davelopez I'm so freaking excited! I've wanted this forever and this is basically the only thing that could lower the barrier of entry to working on tools like the circos and jbrowse tools for folks. They're difficult even for me to understand the entire render process of nested macros.

You might find something here regarding bridging vscode-webview to http, https://blog.mattbierner.com/vscode-webview-web-learnings/

In the past I considered using the /build API (running in a separate process) and some re-created portion of the galaxy tool interface. This might be even easier with the Vue adoption, if we could re-use those components, but not sure how much work that is. Probably easier to hide the panels somehow. In my browser history I see a ?use_panels=true on the login page, but, that doesn't seem to have much effect on the main page.

opening the Galaxy web served by planemo in the default browser

nah let's find a way to get it integrated into vscode, that's what makes this super cool.