Molecule3dViewer dynamic height and width

[dtingey]

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