React widget not visible in Dock Panel

JupyterLab
,
1

I am trying to add a custom widget that extends ReactWidget in a DockPanel. However, when I add the widget using addWidget() method of DockPanel, the widget is not rendered on the screen. Upon inspecting the DOM, I found out that the widget is actually present in the DockPanel div but the height of this div is 0px. Adding a widget that extends Widget works just fine. Can someone explain why this might be happening? Also, how do I add a ReactWidget to DockPanel and show it correctly in the UI?

Thanks,
Rakesh.

2

You can get a lot of value from wrapping your outer widget in a MainAreaWidget, which is used by almost all of the core JupyterLab panels.

For the “why”, you can have a look at its style to find some of the right things you need.

3

Thank you @bollwyvl for the response. I didn’t quite understand which outer widget you meant when you suggested to wrap in MainAreaWidget. Is it the ReactWidget derived widget or the DockPanel itself? I tried different permutations of wrapping them in the MainAreaWidget as suggested but it didn’t work out. Could you please elaborate a bit more on your earlier suggestion?

Thanks,
Rakesh.

4

Have a look for MainAreaWidget usage patterns in the jupyterlab source .

An untested example:

const content = new MyReactWidget();
content.addClass('xyz-my-widget');
const wrapper = new MainAreaWidget({content})
wrapper.title.label = "My Widget";
wrapper.addClass('xyz-my-wrapper');
app.shell.add(wrapper, 'main');

This will give you a well-styled outer widget that will size up properly in the DockPanel, and then you can style things further. A starting point to fill the panel might be:

.xyz-my-wrapper {
  display: flex;
  flex-direction: column;
}
.xyz-my-wrapper .xyz-my-widget {
  flex: 1;
}