Adding volume visualization

[kjelljorner]

I actually found that there is a function exposed in app.ts for displaying surfaces. I used the following code and was able to get something. The loadVolumeFromUrl could probably be adapted in the same way as you do for the other ones.

test = html`<div id="test"></div>`
molstar.Viewer.create(test, {layoutIsExpanded: false, layoutShowControls: false}).then(viewer => {
viewer.loadStructureFromUrl("./traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
    {url: './density.cube',
    format: 'cube',
    isBinary: false},
    [{type: "absolute",
     alpha: 1,
     value: 0.001, 
        }
        ]
    )
});

Resolution is not great, but it seems to work, and the visualization can be adjusted later in the viewer

Archive.zip

[jmbuhr]

It was quite straightforward indeed, so I just added it. Let me know if you have further suggestions or PRs :)

[kjelljorner]

That's really cool. I can confirm it works on my end as well. However, I think there are some things which are not ideal at the moment.

• The type, alpha and value parameters are hardcoded, but they should be possible to set by the user as different types of surfaces have different requirements. https://github.com/jmbuhr/quarto-molstar/blob/7192d5d1725bf84ec807dd13e1280d87854e7982/_extensions/molstar/molstar.lua#L170-L172

• isBinary is hardcoded to be false but will likely have to be true for some file formats.

https://github.com/jmbuhr/quarto-molstar/blob/7192d5d1725bf84ec807dd13e1280d87854e7982/_extensions/molstar/molstar.lua#L169

I'm no expert on different volume formats, but it seems to be part of the examples so allowing it to be set would be very desirable.

• In the original app you can give a list of isosurfaces.

https://github.com/jmbuhr/quarto-molstar/blob/7192d5d1725bf84ec807dd13e1280d87854e7982/_extensions/molstar/molstar.lua#L170-L174

The purpose of this is to give the possibility for example for positive and negative values. You can use this to display orbitals like this. I'm not sure how that could be done in your current input format, but it would be great to have it.

molstar.Viewer.create(app, {layoutIsExpanded: false, layoutShowControls: false}).then(viewer => {
viewer.loadStructureFromUrl("./traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
    {url: './mo_15.cube',
    format: 'cube',
    isBinary: false},
    [{type: "absolute",
     alpha: 0.75,
     value: 0.04,
     color: 0xFF0000,
        },
    {type: "absolute",
     alpha: 0.75,
     value: -0.04,
     color: 0x0000FF,
        }        
        ]
    )
});

mo_15.cube.zip

[jmbuhr]

I suppose have to think about passing additional arguments to the shortcode in general. At the moment the different shortcodes take either one or two positional arguments and the keyword arguments are assumed to be molstar options for the viewer creation. But we need some way of passing arguments to the respective loading functions as well. Maybe as a keyword followed by a json string? Do you have some thoughts on a sensible interface?

[jmbuhr]

Ideally we keep it simple for a basic use case, but extensible enough for this. Though at some point you would be better off just writing the html div and a js script tag yourself, so we don't want to be more convoluted than that.

[kjelljorner]

Json string sounds reasonable and I think it's quite similar as to how Google's Fire implements dictionary parsing from the command line. Another option would be to have a delimiter token, for example |.

As you say, in the end you can also use Observable JS to create your own visualization like I did in the blog post, but supporting most functionality in app.ts seems like a reasonable goal.