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.