Molecule3dViewer dynamic height and width #738
Description
Hi is there is a way to dynamically size the Molecule3dViewer component? In the docs it says that the height and width attribute should be a number (in px) but is it possible to dynamically resize it to the size of the container. For example, I tried something like this:
app.layout = html.Div([
html.Div([
dbc.InputGroup([
dbc.Input(id="pdb-search-bar", type="text", placeholder="Enter PDB ID"),
dbc.Button("Load", color="primary", id="load-button"),
]),
]),
dashbio.Molecule3dViewer(
id='pdb-viewer',
modelData={'atoms': [], 'bonds': []},
selectionType='residue',
width='100%',
style = {'display': 'flex'}
)
])
This works when I initially load the app and when I update the modelData with a first pdb file using something like this:
@callback(
Output(component_id='pdb-viewer', component_property='modelData'),
Output(component_id='pdb-viewer', component_property='styles'),
Output('pdb-viewer', 'selectedAtomIds'),
Input(component_id='load-button', component_property='n_clicks'),
State(component_id='pdb-search-bar', component_property='value'),
prevent_initial_call=True
)
def update_pdb(n_clicks, pdb_id):
data_update = Patch()
styles_update = Patch()
if not pdb_id:
data_update.update({'atoms': [], 'bonds': []})
styles_update.clear()
selected_update = []
return data_update, styles_update, selected_update
else:
try:
parser = PdbParser(pdb_id)
pdb_data = parser.mol3d_data()
except:
data_update.update({'atoms': [], 'bonds': []})
styles_update.clear()
selected_update = []
return data_update, styles_update, selected_update
color_element = 'chain'
styles = create_mol3d_style(
pdb_data['atoms'], visualization_type='cartoon', color_element=color_element
)
data_update.update(pdb_data)
styles_update = styles
selected_update = []
return data_update, styles_update, selected_update
However, when I try to update it again using the same method. It gives a blank screen and I can't load any more pdbs. Loading a new pdb works great when I don't include the width parameter or if I set it to an integer.
It's not a super big bug, but I think it would be nice to be able to dynamically resize the viewer for different screen sizes.
python version 3.10.0
dash version 2.9.3
dash-bio version 1.0.2
dash-bootstrap-components version 1.4.1