fix

js/src/gui.js

@@ -2,10 +2,11 @@
  * @file  Gui
  * @author Alexander Rose <[email protected]>
  */
-var NGL = require('ngl');
-var UI = require('./ui/ui.js').UI;
-var signals = require("./lib/signals.min.js");
 
+// NOTE: This file is a modified version of the original file
+import * as  NGL from 'ngl';
+import { UI } from './ui/ui.js';
+import signals from './lib/signals.min.js';
 
 HTMLElement.prototype.getBoundingClientRect = (function () {
   // workaround for ie11 behavior with disconnected dom nodes
@@ -139,7 +140,7 @@ NGL.Preferences.prototype = {
 
 // Stage
 
-class StageWidget{
+export class StageWidget{
   constructor(view){
       // view: NGLView of NGLModel
       var el
@@ -268,7 +269,7 @@ class StageWidget{
 
           var w = ew - sw + 'px'
 
-          stage.viewer.container.style.width = w 
+          stage.viewer.container.style.width = w
           stage.handleResize()
       }
 

js/src/stage_manager.ts

@@ -1,6 +1,7 @@
 import * as NGL from "ngl";
 import { NGLView } from "./widget_ngl";
 import * as $ from "jquery";
+import { WidgetView } from "@jupyter-widgets/base";
 
 export class StageManager {
     stage: NGL.Stage;
@@ -10,7 +11,7 @@ export class StageManager {
         this.view = view;
     }
 
-    createStage() {
+    async createStage() {
         var stage_params = {
             ...this.view.model.get("_ngl_full_stage_parameters")
         };
@@ -37,10 +38,12 @@ export class StageManager {
         );
         if (this.view.embedHandler.isEmbeded()) {
             console.log("Embed mode for NGLView");
-            this.view.handleEmbed();
+            this.view.embedHandler.handleEmbed();
         } else {
             this.view.requestUpdateStageParameters();
-            if (this.view.model.views.length == 1) {
+            const viewsDict = await this.view.model.views;
+            const views = await Promise.all(Object.values(viewsDict));
+            if (views.length === 1) {
                 this.view.serialize_camera_orientation();
             } else {
                 this.view.set_camera_orientation(this.view.model.get("_camera_orientation"));

js/src/ui_manager.ts

@@ -1,3 +1,4 @@
+import { StageWidget } from "./gui";
 import { StageManager } from "./stage_manager";
 import { NGLView } from "./widget_ngl";
 import * as NGL from 'ngl';
@@ -76,6 +77,6 @@ export class UIManager {
     }
 
     createNglGUI() {
-        this.view.stage_widget = new StageManager(this.view);
+        this.view.stage_widget = new StageWidget(this.view);
     }
 }

js/src/widget_ngl.ts

@@ -78,7 +78,7 @@ export class NGLView extends widgets.DOMWidgetView {
     $container: any;
     ngl_view_id: string;
     uuid: string;
-    stage_widget: typeof StageWidget;
+    stage_widget: StageWidget;
     _ngl_focused: number;
     comp_uuids: string[];
     _synced_model_ids: string[];