Forward port #1523 Fix pWidget accessor in the case of ipywidgets 7

js/src/Figure.ts

@@ -28,7 +28,7 @@ import { Scale, ScaleModel } from 'bqscales';
 
 import * as popperreference from './PopperReference';
 import popper from 'popper.js';
-import { applyAttrs, applyStyles } from './utils';
+import { applyAttrs, applyStyles, getLuminoWidget } from './utils';
 import { AxisModel } from './AxisModel';
 import { Mark } from './Mark';
 import { MarkModel } from './MarkModel';
@@ -735,6 +735,7 @@ export class Figure extends DOMWidgetView {
     this.trigger('margin_updated');
   }
 
+  // Phosphor shims
   update_plotarea_dimensions() {
     this.plotarea_width = this.width - this.margin.left - this.margin.right;
     this.plotarea_height = this.height - this.margin.top - this.margin.bottom;
@@ -756,7 +757,7 @@ export class Figure extends DOMWidgetView {
       case 'resize':
       case 'after-show':
       case 'after-attach':
-        if (this.luminoWidget.isVisible) {
+        if (getLuminoWidget(this).isVisible) {
           this.debouncedRelayout();
         }
         break;

js/src/Mark.ts

@@ -22,7 +22,7 @@ import { MessageLoop } from '@lumino/messaging';
 
 import { Widget } from '@lumino/widgets';
 
-import { d3GetEvent } from './utils';
+import { d3GetEvent, getLuminoWidget } from './utils';
 import * as _ from 'underscore';
 import { MarkModel } from './MarkModel';
 import { Figure } from './Figure';
@@ -342,7 +342,7 @@ export abstract class Mark extends widgets.WidgetView {
         null
       );
       MessageLoop.sendMessage(
-        this.tooltip_view.luminoWidget,
+        getLuminoWidget(this.tooltip_view),
         Widget.Msg.AfterShow
       );
       this.parent.popper.enableEventListeners();
@@ -392,9 +392,9 @@ export abstract class Mark extends widgets.WidgetView {
       this.create_child_view(tooltip_model).then((view) => {
         this.tooltip_view = view;
 
-        MessageLoop.sendMessage(view.luminoWidget, Widget.Msg.BeforeAttach);
+        MessageLoop.sendMessage(getLuminoWidget(view), Widget.Msg.BeforeAttach);
         this.tooltip_div.node().appendChild(view.el);
-        MessageLoop.sendMessage(view.luminoWidget, Widget.Msg.AfterAttach);
+        MessageLoop.sendMessage(getLuminoWidget(view), Widget.Msg.AfterAttach);
       });
     }
   }

js/src/MarketMap.ts

@@ -35,7 +35,7 @@ import { MarketMapModel } from './MarketMapModel';
 import { Tooltip } from './Tooltip';
 import * as popperreference from './PopperReference';
 import popper from 'popper.js';
-import { applyAttrs, applyStyles } from './utils';
+import { applyAttrs, applyStyles, getLuminoWidget } from './utils';
 
 export class MarketMap extends Figure {
   protected renderImpl() {
@@ -841,9 +841,9 @@ export class MarketMap extends Figure {
       tooltip_widget_creation_promise.then((view) => {
         that.tooltip_view = view as Tooltip;
 
-        MessageLoop.sendMessage(view.luminoWidget, Widget.Msg.BeforeAttach);
+        MessageLoop.sendMessage(getLuminoWidget(view), Widget.Msg.BeforeAttach);
         that.tooltip_div.node().appendChild(view.el);
-        MessageLoop.sendMessage(view.luminoWidget, Widget.Msg.AfterAttach);
+        MessageLoop.sendMessage(getLuminoWidget(view), Widget.Msg.AfterAttach);
       });
     }
   }

js/src/utils.ts

@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+import { DOMWidgetView } from '@jupyter-widgets/base';
 import * as d3 from 'd3';
 // var d3 =Object.assign({}, require("d3-array"), require("d3-scale"));
 import isTypedArray from 'is-typedarray';
@@ -118,3 +119,8 @@ export function d3GetEvent() {
   // leading to a null event, for now we can use window.event as fallback.
   return require('d3-selection').event || window.event;
 }
+
+// Phosphor shim for ipywidgets 7 support
+export function getLuminoWidget(ipywidget: DOMWidgetView) {
+  return ipywidget.pWidget ? ipywidget.pWidget : ipywidget.luminoWidget;
+}