How to I get ReactiveHTML to resize pdbe molstar viewer?

Hi All

I’m trying to implement the pdbe molstar viewer. I have a problem getting the implementation resizing when I toggle the controls. How do I solve that problem.

Does not work

In the below video you can see that something happens when I toggle the controls. What should happen is that additional ~300px of height should be added to show the controls.

import param
from panel.reactive import ReactiveHTML
from panel.pane import HTML
import panel as pn


# See https://embed.plnkr.co/plunk/m3GxFYx9cBjIanBp for an example JS implementation
class PdbeMolStar(ReactiveHTML):
    """PDBe MolStar structure viewer.

    For more information:

    - https://github.com/PDBeurope/pdbe-molstar/wiki
    - https://molstar.org/

    The implementation is based on the js Plugin. See

    - https://github.com/PDBeurope/pdbe-molstar/wiki/1.-PDBe-Molstar-as-JS-plugin
    """

    molecule_id = param.String(
        default=None,
        doc="PDB id to load. Example: '1qyn' or '1cbs'"
    )
    hide_controls = param.Boolean(
        default=True,
        doc="Hide the control menu"
    )

    _template = """
<link id="molstarTheme" rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.0.css"/>
<div id="container" style="width:100%; height: 100%;"><div id="pdbeViewer"></div></div>
"""
    __javascript__=[
        "https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.0.js",
    ]

    _scripts = {
        "render": """
state.viewerInstance = new PDBeMolstarPlugin();
var options = {
    moleculeId: data.molecule_id,
    hideControls: data.hide_controls,
}
state.viewerInstance.render(pdbeViewer, options);    
""",
    "molecule_id": "state.viewerInstance.visual.update({moleculeId:data.molecule_id})",
    "hide_controls": "state.viewerInstance.canvas.toggleControls(!data.hide_controls);window.el=view""",
    }

    def __init__(self, **params):
        super().__init__(**params)

pn.extension(sizing_mode="stretch_width")

pdbe = PdbeMolStar(
    molecule_id='1qyn',
    height=500,
)
pn.template.FastListTemplate(
    site="Panel Chemistry", title="Pdbe Molstar Viewer",
    sidebar=[pn.Param(pdbe, parameters=["hide_controls"])],
    main=[pdbe],
).servable()

Does not work satisfactorily

If I wrap it in a column with extra 310px of height it sort of works.

....
pdbe_column = pn.Column(pdbe, min_height=810)
pn.template.FastListTemplate(
    site="Panel Chemistry", title="Pdbe Molstar Viewer",
    sidebar=[pn.Param(pdbe, parameters=["hide_controls"])],
    main=[pdbe_column],
).servable()

But I would like it to work dynamically. I.e. I can toggle the controls dynamically and the component will automatically expand if needed.

FYI. @Jhsmit

Thanks. I was also wondering what to do about this. My solution was hide_controls=True :slight_smile:

1 Like