search

jupyter-widgets / ipywidgets

Interactive Widgets for the Jupyter Notebook
https://ipywidgets.readthedocs.io
BSD 3-Clause "New" or "Revised" License
3.14k stars 949 forks source link

widget lifecycle methods / accessing the div after it has been mounted #2098

Closed chriddyp closed 6 years ago

chriddyp commented 6 years ago

👋 hello from plotly! we're working on the next version of the Plotly Jupyter widget in https://github.com/plotly/plotly.py/pull/942

There are some methods in our JS library that require a mounted/attached div (e.g. to know the size of the mounted div). However, in the widgets render method, we only have access to the unmounted/unattached div.

Are there any component lifecycle methods or events that we can utilize to customize the behaviour of the widget after it has been mounted on the DOM? To start, we would use this behaviour to either resize our plot to fill the container or defer making the plot until the div has been attached.

Many thanks!

(cc @jmmease)

SylvainCorlay commented 6 years ago

👋 hello from QuantStack! I love that you guys are embracing the widgets framework for plotly.

One way to do what (I understand) you want is to hook up to the phosphorjs widgets events. We have one example here: https://github.com/jupyter-widgets/ipyleaflet/blob/master/js/src/jupyter-leaflet.js#L917

ipyleaflet maps need to measure their containers to know how many tiles to display.

jonmmease commented 6 years ago

Thanks @SylvainCorlay! We'll give it a try. Are these phosphorjs events available in both the classic notebook and JupyterLab?

The widgets framework has been great to work with. It's really exciting to have the tools to build rich Python APIs to existing JavaScript libraries!

SylvainCorlay commented 6 years ago

Are these phosphorjs events available in both the classic notebook and JupyterLab?

The ones around the creation and destruction of the widgets are.

What you get in JLab which is not in the classic notebook is that the resizing of any tab of the dock area triggers a phosphor resize events to children that were resized.

jonmmease commented 6 years ago

For some reason the after-show event, referenced by ipyleaflet in the code snippet above, wasn't being triggered for me. But when I dumped out all of the events I got a before-attach event followed by an after-attach event. And the after-attach event is exactly what we needed.

Thanks!

jasongrout commented 6 years ago

IIRC you also get resize events in the classic notebook, but only when the window is resized.

SylvainCorlay commented 6 years ago

IIRC you also get resize events in the classic notebook, but only when the window is resized.

Is that right? (I think that we do not get anything.)

jasongrout commented 6 years ago

IIRC, but I may be wrong. We could do it by adding a window resize handler if we needed to (probably just once from the widget manager, then loop over all top-level widgets and send them resize messages)

chriddyp commented 6 years ago

Many thanks everyone 🙇