$el missing when inheriting from BoxView

The BeakerX team is separating out table display as a standalone widget and in the process is upgrading it to work with the latest versions of the Jupyter ecosystem libraries. We have run into issues. @piorek writes:

I’ve changed to @jupyter-widgets/base ^1 || ^2 and that part is working fine while using ipywidgets<7.5 but as soon as I try to use it with ipywidgets 7.5 I have a problem. In many our views like EasyFormView we are using Bootstrap.View stuff like having this.$el but after switching to ipywidgets#7.5 it’s not there at runtime at least not here: https://github.com/twosigma/beakerx/blob/lukasz/8056_separate_table_display/js/notebook/src/EasyForm.ts#L66 maybe it’s because of

• where we are using it,
• some changes in ipywidgets#7.5,
• some changes in jupyterlab#1.0 itself

cc: @LeeTZ @lukasz @SylvainCorlay @jasongrout cf. https://github.com/twosigma/beakerx/pull/8076

[piorek]

@jasongrout i’ve tested code with

this.$el = $(this.pWidget.node);

added and can confirm that it fixes the problem

[jasongrout]

Can you override BoxView’s _setElement in your widget to be this?

    _setElement(el: HTMLElement) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
        this.$el = $(this.pWidget.node);
    }

That last line was missing in BoxView, and I think that was what was causing the issue.