Custom image viewer directive (via custom plugin?)

[PaulHax]

Humbly requesting guidance on how to insert our scientific file format image viewer into a scipy paper MyST document: scipy-conference/scipy_proceedings#927

I'd like to build a reusable recipe/plugin for other MyST efforts. The image viewer is implimented as an HTML custom element. I'd need to replace the markdown directive with the custom tag, ie <itk-viewer-3d></itk-viewer-3d>, get a ref to that element, and run some JavaScript, ie viewer.setImage(new ZarrMultiscaleSpatialImage(documentRelativeImageUrl)). <- seems like the job of a markdown-it plugin to insert client side JS, not a Myst plugin?

Or should I do something with the iframe directive?

Any advice or links to a project I can use as a template would be great.

[stevejpurves]

Hi @PaulHax - the myst plugin is the way to go for the directive as you suggest.

For the frontend, the best way would be to also use a myst plugin to add a renderer. The issue there though is that we don't yet have renderer plugin loading fully fleshed out so it's not currently possible to load them, custom renderers can be added to the theme though. In either case that would be preference over markdown-it.

Do you have an example of your image viewer in a page, to better understand what's needed?

[PaulHax]

OK! Can I configure a custom renderer for the theme in myst.yml here?
https://github.com/scipy-conference/scipy_proceedings/pull/927/files#diff-743771cb448a6cafa5d91469a2b5f3e2cc8024444affb81b23b7bc20b1baec00

An vanilla HTML/JS example of the image viewer.
HTML tag:
https://github.com/InsightSoftwareConsortium/itk-viewer/blob/main/packages/element/examples/view-2d.html#L24
JS to setup some runtime asset paths and load an image:
https://github.com/InsightSoftwareConsortium/itk-viewer/blob/main/packages/element/examples/view-2d.ts

[choldgraf]

To build on @stevejpurves point - I'd check out the MyST plugins documentation as it has many examples that show off how to build things like this. Maybe that is a starting point to meet your use case.

[PaulHax]

Plugins doc is an good resource. I played around with the examples there but did not see how to create an AST node that runs some Javascript client side. Or did I miss something?

[stevejpurves]

@PaulHax I am afraid you are right, current plugins can only create AST that existing renderers can then deal with. We need a new/specific renderer and there is no way to load that via the plugin mechanism.

It would be great to get the renderer plugin loading into mystmd with this as a use case though, although that probably won't fit your timeline for scipy.

However, I can potentially get a plugin sideloaded into the proceedings theme as curvenote is hosting that. Let me try and get a starting point together based on your links above!

[stevejpurves]

@PaulHax, a starting point 👉🏼 https://github.com/curvenote/itk-plugins

[PaulHax]

I wrote a Remix component for our image viewer. curvenote/itk-plugins#2

To see it in a MyST site still need to plug in the MyST renderer plugin and ask the server to dish out a Web Assembly asset...