nglview-js-widgets - npm Package Compare versions

Comparing version 2.2.0 to 2.5.0

package.json

 {
   "name": "nglview-js-widgets",
-  "version": "2.2.0",
+  "version": "2.5.0",
   "description": "nglview-js-widgets",
@@ -5,0 +5,0 @@ "author": "Hai Nguyen <[e-mail]>, Alexander Rose <[e-mail]>",

src/widget_ngl.js

 var Jupyter
-var widgets = require("@jupyter-widgets/base");
-var NGL = require('ngl');
-var $ = require('jquery');
-var _ = require('underscore');
-require('jquery-ui/ui/widgets/draggable');
-require('jquery-ui/ui/widgets/slider');
-require('jquery-ui/ui/widgets/dialog');
-require('jquery-ui/themes/base/all.css');
+var widgets = require("@jupyter-widgets/base")
+var NGL = require('ngl')
+var $ = require('jquery')
+var _ = require('underscore')
+require("./lib/signals.min.js")
+require("./lib/tether.min.js")
+require("./lib/colorpicker.min.js")
+require("./ui/ui.js")
+require("./ui/ui.extra.js")
+require("./ui/ui.ngl.js")
+var StageWidget = require("./gui").StageWidget
+// require('jquery-ui/ui/widgets/draggable');
+// require('jquery-ui/ui/widgets/slider');
+require('jquery-ui/ui/widgets/dialog')
+require('jquery-ui/themes/base/all.css')
+// require('./css/dark.css');  // How to switch theme?
+require('./css/light.css');
+require('./css/main.css')
 
@@ -27,57 +37,25 @@
     render: function() {
-        // init setting of frame
-        this.model.on("change:frame", this.frameChanged, this);
-
-        // init setting of frame
-        this.model.on("change:count", this.countChanged, this);
-
-        // init _parameters handling
+        // maximum number of frames.
+        // this.model.on("change:max_frame", this.maxFrameChanged, this);
         this.model.on("change:_parameters", this.parametersChanged, this);
-
+        this.model.on("change:gui_style", this.GUIStyleChanged, this);
         this.model.set('_ngl_version', NGL.Version);
-
-        // for player
-        this.delay = 100;
-        this.sync_frame = false;
-        this.sync_camera = false;
         this._synced_model_ids = this.model.get("_synced_model_ids");
-        // get message from Python
-        this.model.on("msg:custom", function(msg){ 
-            if ('ngl_view_id' in msg){
-                var key = msg.ngl_view_id;
-                console.log(key);
-                this.model.views[key].then(function(v){
-                    v.on_msg(msg);
-                })
-            }
-            else{this.on_msg(msg);}
-        }, this);
+        this.stage_widget = undefined
+        this.handleMessage()
 
-        if (this.model.comm) {
-            // for embeding in website
-            this.model.comm.on_msg(function(msg) {
-                var buffers = msg.buffers;
-                var content = msg.content.data.content;
-                if (buffers.length && content) {
-                    content.buffers = buffers;
-                }
-                this.model._handle_comm_msg.call(this.model, msg);
-            }.bind(this));
+        var stage_params = this.model.get("_ngl_full_stage_parameters");
+        if (!("backgroundColor" in stage_params)){
+            stage_params["backgroundColor"] = "white"
         }
-
         // init NGL stage
         NGL.useWorker = false;
-        this.stage = new NGL.Stage(undefined, {
-            backgroundColor: "white"
-        });
-        this.structureComponent = undefined;
+        this.stage = new NGL.Stage(undefined);
+        this.stage.setParameters(stage_params);
         this.$container = $(this.stage.viewer.container);
         this.$el.append(this.$container);
-        this.$container.resizable({
-            resize: function(event, ui) {
-                this.setSize(ui.size.width + "px", ui.size.height + "px");
-            }.bind(this)
-        });
+        this.handleResizable()
         this.displayed.then(function() {
-            this.ngl_view_id = this.get_last_child_id();
+            this.ngl_view_id = this.get_last_child_id(); // will be wrong if displaying
+            // more than two views at the same time (e.g: in a Box)
             this.model.set("_ngl_view_id", Object.keys(this.model.views).sort());
@@ -88,4 +66,7 @@ this.touch();
             var height = "300px";
+            this.setSize(width, height);
+            this.createFullscreenBtn(); // FIXME: move up?
+            this.createIPlayer(); // FIXME: move up?
+            this.GUIStyleChanged(); // must be called after displaying to get correct width and height
 
-            this.setSize(width, height);
             this.$container.resizable(
@@ -106,159 +87,171 @@ "option", "maxWidth", this.$el.parent().width()
 
-        this.stage.viewerControls.signals.changed.add(function() {
-            var that = this;
-            this.serialize_camera_orientation();
-            var m = this.stage.viewerControls.getOrientation();
-            if (that._synced_model_ids.length > 0 && that._ngl_focused == 1){
-                that._synced_model_ids.forEach(function(mid){
-                    that.model.widget_manager.get_model(mid).then(function(model){
-                        for (var k in model.views){
-                            var pview = model.views[k];
-                            pview.then(function(view){
-                                // not sync with itself
-                                if (view != that){ 
-                                    view.stage.viewerControls.orient(m);
-                                }
-                            })
-                        }
-                    })
+        // init picking handling
+        this.handlePicking()
+        this.handleSignals()
+        this.finalizeDisplay()
+    },
+
+    handleMessage(){
+        this.model.on("msg:custom", function(msg){
+            if ('ngl_view_id' in msg){
+                var key = msg.ngl_view_id;
+                console.log(key);
+                this.model.views[key].then(function(v){
+                    v.on_msg(msg);
                 })
             }
-        }.bind(this));
+            else{this.on_msg(msg);}
+        }, this);
 
-        // init toggle fullscreen
-        $(this.stage.viewer.container).dblclick(function(e) {
-            if (!e.ctrlKey){
-                this.stage.toggleFullscreen();
-            }
-        }.bind(this));
+        if (this.model.comm) {
+            // for embeding in website
+            this.model.comm.on_msg(function(msg) {
+                var buffers = msg.buffers;
+                var content = msg.content.data.content;
+                if (buffers.length && content) {
+                    content.buffers = buffers;
+                }
+                this.model._handle_comm_msg.call(this.model, msg);
+            }.bind(this));
+        }
+    },
 
-        // init picking handling
-        this.$pickingInfo = $("<div></div>")
-            .css("position", "absolute")
-            .css("top", "5%")
-            .css("left", "3%")
-            .css("background-color", "white")
-            .css("padding", "2px 5px 2px 5px")
-            .css("opacity", "0.7")
-            .appendTo(this.$container);
 
-        var $inputNotebookCommand = $('<input id="input_notebook_command" type="text" style="border:1px solid skyblue" size="50"></input>');
-        var that = this;
+    finalizeDisplay: function(){
+      // for callbacks from Python
+      // must be after initializing NGL.Stage
+      this.send({
+          'type': 'request_loaded',
+          'data': true
+      })
+      var state_params = this.stage.getParameters();
+      this.model.set('_ngl_original_stage_parameters', state_params);
+      this.touch();
+    },
 
-        $inputNotebookCommand.keypress(function(e) {
-            var command = $("#input_notebook_command").val();
-            if (e.which == 13) {
-                $("#input_notebook_command").val("")
-                Jupyter.notebook.kernel.execute(command);
-            }
-        });
+    handleSignals: function(){
+      var container = this.stage.viewer.container;
+      that = this;
+      container.addEventListener('mouseover', function(e) {
+          that._ngl_focused = 1;
+          e; // linter
+          that.mouseover_display('block')
+      }, false);
 
-        this.$notebook_text = $("<div></div>")
-            .css("position", "absolute")
-            .css("bottom", "5%")
-            .css("left", "3%")
-            .css("padding", "2px 5px 2px 5px")
-            .css("opacity", "0.7")
-            .append($inputNotebookCommand)
-            .appendTo(this.$container);
-        this.$notebook_text.hide();
+      container.addEventListener('mouseout', function(e) {
+          that._ngl_focused = 0;
+          e; // linter
+          that.mouseover_display('none')
+      }, false);
 
-        this.stage.signals.clicked.add(function (pd) {
-            if (pd) {
-                this.model.set('picked', {}); //refresh signal
-                this.touch();
+      this.stage.signals.componentAdded.add(function() {
+          var len = this.stage.compList.length;
+          this.model.set("n_components", len);
+          this.touch();
+          var comp = this.stage.compList[len - 1];
+          comp.signals.representationRemoved.add(function() {
+              that.request_repr_dict();
+          });
+          comp.signals.representationAdded.add(function() {
+              that.request_repr_dict();
+          });
+      }, this);
 
-                var pd2 = {};
-                var pickingText = "";
-                if (pd.atom) {
-                    pd2.atom1 = pd.atom.toObject();
-                    pd2.atom1.name = pd.atom.qualifiedName();
-                    pickingText = "Atom: " + pd2.atom1.name;
-                } else if (pd.bond) {
-                    pd2.bond = pd.bond.toObject();
-                    pd2.atom1 = pd.bond.atom1.toObject();
-                    pd2.atom1.name = pd.bond.atom1.qualifiedName();
-                    pd2.atom2 = pd.bond.atom2.toObject();
-                    pd2.atom2.name = pd.bond.atom2.qualifiedName();
-                    pickingText = "Bond: " + pd2.atom1.name + " - " + pd2.atom2.name;
-                }
-                if (pd.instance) pd2.instance = pd.instance;
-                
-                var n_components = this.stage.compList.length;
-                for (var i = 0; i < n_components; i++) {
-                    var comp = this.stage.compList[i];
-                    if (comp.uuid == pd.component.uuid) {
-                        pd2.component = i;
-                    }
-                }
+      this.stage.signals.componentRemoved.add(function() {
+          this.model.set("n_components", this.stage.compList.length);
+          this.touch();
+      }, this);
 
-                this.model.set('picked', pd2);
-                this.touch();
-                
-                this.$pickingInfo.text(pickingText);
-            }
-        }, this);
+      this.stage.viewerControls.signals.changed.add(function() {
+          var that = this;
+          this.serialize_camera_orientation();
+          var m = this.stage.viewerControls.getOrientation();
+          if (that._synced_model_ids.length > 0 && that._ngl_focused == 1){
+              that._synced_model_ids.forEach(function(mid){
+                  that.model.widget_manager.get_model(mid).then(function(model){
+                      for (var k in model.views){
+                          var pview = model.views[k];
+                          pview.then(function(view){
+                              // not sync with itself
+                              if (view != that){
+                                  view.stage.viewerControls.orient(m);
+                              }
+                          })
+                      }
+                  })
+              })
+          }
+      }.bind(this));
 
-        this.initPlayer();
+    },
 
-        var container = this.stage.viewer.container;
-        that = this;
-        container.addEventListener('dragover', function(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'copy';
-        }, false);
+    handlePicking: function(){
+      this.$pickingInfo = $("<div></div>")
+          .css("position", "absolute")
+          .css("top", "5%")
+          .css("left", "3%")
+          .css("background-color", "white")
+          .css("padding", "2px 5px 2px 5px")
+          .css("opacity", "0.7")
+          .appendTo(this.$container);
 
-        container.addEventListener('drop', function(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            var file = e.dataTransfer.files[0];
+      var that = this;
+      this.stage.signals.clicked.add(function (pd) {
+          if (pd) {
+              this.model.set('picked', {}); //refresh signal
+              this.touch();
 
-            that.stage.loadFile(file).then(function(o){
-                that._handle_loading_file_finished();
-                o;
-            });
-            var numDroppedFiles = that.model.get("_n_dragged_files");
-            that.model.set("_n_dragged_files", numDroppedFiles + 1);
-            that.touch();
-        }, false);
+              var pd2 = {};
+              var pickingText = "";
+              if (pd.atom) {
+                  pd2.atom1 = pd.atom.toObject();
+                  pd2.atom1.name = pd.atom.qualifiedName();
+                  pickingText = "Atom: " + pd2.atom1.name;
+              } else if (pd.bond) {
+                  pd2.bond = pd.bond.toObject();
+                  pd2.atom1 = pd.bond.atom1.toObject();
+                  pd2.atom1.name = pd.bond.atom1.qualifiedName();
+                  pd2.atom2 = pd.bond.atom2.toObject();
+                  pd2.atom2.name = pd.bond.atom2.qualifiedName();
+                  pickingText = "Bond: " + pd2.atom1.name + " - " + pd2.atom2.name;
+              }
+              if (pd.instance) pd2.instance = pd.instance;
 
-        container.addEventListener('mouseover', function(e) {
-            that._ngl_focused = 1;
-            e; // linter
-        }, false);
+              var n_components = this.stage.compList.length;
+              for (var i = 0; i < n_components; i++) {
+                  var comp = this.stage.compList[i];
+                  if (comp.uuid == pd.component.uuid) {
+                      pd2.component = i;
+                  }
+              }
 
-        container.addEventListener('mouseout', function(e) {
-            that._ngl_focused = 0;
-            e; // linter
-        }, false);
+              this.model.set('picked', pd2);
+              this.touch();
 
-        that = this;
-        this.stage.signals.componentAdded.add(function() {
-            var len = this.stage.compList.length;
-            this.model.set("n_components", len);
-            this.touch();
-            var comp = this.stage.compList[len - 1];
-            comp.signals.representationRemoved.add(function() {
-                that.request_repr_dict();
-            });
-            comp.signals.representationAdded.add(function() {
-                that.request_repr_dict();
-            });
-        }, this);
+              this.$pickingInfo.text(pickingText);
+          }
+      }, this);
+    },
 
-        this.stage.signals.componentRemoved.add(function() {
-            this.model.set("n_components", this.stage.compList.length);
-            this.touch();
-        }, this);
+    mouseover_display: function(type){
+        var that = this;
+        if (this.fullscreen_btn_pview){
+            this.fullscreen_btn_pview.then(function(v){
+                v.el.style.display = type
+                if (that.stage_widget){
+                    // If NGL's GUI exists, use its fullscreen button.
+                    v.el.style.display = 'none'
+                }
+            })
+        }
 
-        // for callbacks from Python
-        // must be after initializing NGL.Stage
-        this.send({
-            'type': 'request_loaded',
-            'data': true
-        })
-        var state_params = this.stage.getParameters();
-        this.model.set('_ngl_original_stage_parameters', state_params);
-        this.touch();
+        var that = this;
+        if (this.player_pview){
+            this.player_pview.then(function(v){
+                v.el.style.display = type
+                if (that.model.get("max_frame") <= 1){
+                    v.el.style.display = 'none' // always hide if there's no trajectory.
+                }
+            })
+        }
     },
@@ -294,3 +287,3 @@
         for (label in ngl_color_dict){
-            that._make_color_scheme(ngl_color_dict[label], label);
+            that.addColorScheme(ngl_color_dict[label], label);
         }
@@ -311,50 +304,40 @@
         Promise.all(loadfile_list).then(function(compList){
+            n_frames = ngl_coordinate_resource['n_frames'];
             that._set_representation_from_backend(compList);
             that.stage.setParameters(ngl_stage_params);
             that.set_camera_orientation(that.model.get("_camera_orientation"));
-
-            var frame = 0;
-            var count = ngl_coordinate_resource['n_frames'];
+            that.model.set("max_frame", n_frames-1);  // trigger updating slider and player's max
+            that.touch();
             delete ngl_coordinate_resource['n_frames'];
 
-            var play = function(){
-                that.$playerButton.text("pause");
-                that.playerInterval = setInterval(function(){
-                    frame = frame + 1;
-                    if (frame > count - 1){
-                        frame = 0;
-                    }
-                    that.$playerSlider.slider("option", "value", frame);
-                    that.updateCoordinatesFromDict(ngl_coordinate_resource, frame);
-                }, that.delay)
+            // sync frame again since we don't do that in notebook (to avoid lagging);
+            that.getPlayerModel().then(function(model){
+                var pmodel = model.get("children")[0];
+                that.listenTo(pmodel,
+                    "change:value", function(){that.updateCoordinatesFromDict(ngl_coordinate_resource,
+                        pmodel.get("value"))})
+            })
+
+
+            var pd = that.model.get("_player_dict");
+            var manager = that.model.widget_manager;
+            if (pd){
+                var rd = pd['widget_quick_repr'];
+                for (let model_id in rd){
+                    manager.get_model(model_id).then(function(model){
+                        that.listenTo(model, "change:value", function(){
+                            var msg = rd[model_id][model.get("value")];
+                            that.on_msg(msg);
+                        })
+                    })
+                }
             }
 
-            var pause = function() {
-                that.$playerButton.text("play");
-                if (that.playerInterval !== undefined) {
-                    clearInterval(that.playerInterval);
+            // fire any msg with "fire_embed"
+            that.model.get("_ngl_msg_archive").forEach(function(msg){
+                if (msg.fire_embed){
+                    that.on_msg(msg);
                 }
-            }.bind(that);
-
-            if (that.$playerButton){
-                that.$playerButton
-                    .off('click')
-                    .click(function(event) {
-                        if (that.$playerButton.text() === "play") {
-                            play();
-                        } else if (that.$playerButton.text() === "pause") {
-                            pause();
-                        }
-                        event; // to pass eslint
-                    }.bind(that));
-                that.$playerSlider.slider({
-                    max : count-1,
-                    slide: function(event, ui) {
-                        pause();
-                        that.updateCoordinatesFromDict(ngl_coordinate_resource, ui.value);
-                        frame = ui.value;
-                    }.bind(that)
-                })
-           }
-        });
+            })
+        }); // Promise.all
     },
@@ -376,44 +359,2 @@
 
-    setSelector: function(selector_id) {
-        // id is uuid that will be set from Python
-        var selector = "<div class='" + selector_id + "'></div>";
-        this.$ngl_selector = $(selector)
-            .css("position", "absolute")
-            .css("bottom", "5%")
-            .css("left", "3%")
-            .css("padding", "2px 5px 2px 5px")
-            .css("opacity", "0.7")
-            .appendTo(this.$container);
-    },
-
-    setIPythonLikeCell: function() {
-        var cell = Jupyter.notebook.insert_cell_at_bottom();
-
-        var handler = function(event) {
-            var selected_cell = Jupyter.notebook.get_selected_cell();
-            if (selected_cell.cell_id === cell.cell_id) {
-                selected_cell.execute();
-                selected_cell.set_text('');
-            }
-            event; // to pass eslint
-            return false;
-        };
-
-        var action = {
-            help: 'run cell',
-            help_index: 'zz',
-            handler: handler
-        };
-
-        Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('enter', action);
-    },
-
-    hideNotebookCommandBox: function() {
-        this.$notebook_text.hide();
-    },
-
-    showNotebookCommandBox: function() {
-        this.$notebook_text.show();
-    },
-
     requestFrame: function() {
@@ -469,21 +410,2 @@ this.send({
 
-    // setDraggable: function(params) {
-    //     if (params) {
-    //         this.$container.draggable(params);
-    //     } else {
-    //         this.$container.draggable();
-    //     }
-    // },
-    setDelay: function(delay) {
-        this.delay = delay;
-    },
-
-    setSyncFrame: function() {
-        this.sync_frame = true;
-    },
-
-    setUnSyncFrame: function() {
-        this.sync_frame = false;
-    },
-
     setSyncCamera: function(model_ids){
@@ -520,82 +442,107 @@ this._synced_model_ids = model_ids;
 
-    initPlayer: function() {
-        // init player
-        if (this.model.get("count")) {
-            var frame = this.model.get("frame");
-            var play = function() {
-                this.$playerButton.text("pause");
-                this.playerInterval = setInterval(function() {
-                    var frame = this.model.get("frame") + 1;
-                    var count = this.model.get("count");
-                    if (frame >= count) frame = 0;
+    // maxFrameChanged: function() {
+    //     var max_frame = this.model.get("max_frame");
+    //     this.player_pview.then(function(v){
+    //         if (max_frame > 0){
+    //             v.el.style.display = 'block'
+    //         }else{
+    //             v.el.style.display = 'none'
+    //         }
+    //     })
+    // },
 
-                    if (this.sync_frame) {
-                        this.model.set("frame", frame);
-                        this.touch();
-                    } else {
-                        this.requestFrame();
-                    }
-                }.bind(this), this.delay);
-            }.bind(this);
-            var pause = function() {
-                this.$playerButton.text("play");
-                if (this.playerInterval !== undefined) {
-                    clearInterval(this.playerInterval);
-                }
-            }.bind(this);
-            this.$playerButton = $("<button>play</button>")
-                .css("float", "left")
-                .css("width", "55px")
-                .css("opacity", "0.7")
-                .click(function(event) {
-                    if (this.$playerButton.text() === "play") {
-                        play();
-                    } else if (this.$playerButton.text() === "pause") {
-                        pause();
-                    }
-                    event; // to pass eslint
-                }.bind(this));
-            this.$playerSlider = $("<div></div>")
-                .css("margin-left", "70px")
-                .css("position", "relative")
-                .css("bottom", "-7px")
-                .slider({
-                    min: 0,
-                    max: this.model.get("count") - 1,
-                    value: frame,
-                    slide: function(event, ui) {
-                        pause();
-                        this.model.set("frame", ui.value);
-                        this.touch();
-                    }.bind(this)
-                });
-            this.$player = $("<div></div>")
-                .css("position", "absolute")
-                .css("bottom", "5%")
-                .css("width", "94%")
-                .css("margin-left", "3%")
-                .css("opacity", "0.7")
-                .append(this.$playerButton)
-                .append(this.$playerSlider)
-                .appendTo(this.$container);
-            this.model.on("change:frame", function() {
-                this.$playerSlider.slider("value", this.model.get("frame"));
-            }, this);
+    createView: function(trait_name){
+        // Create a view for the model with given `trait_name`
+        // e.g: in backend, 'view.<trait_name>`
+        console.log("Creating view for model " + trait_name);
+        var manager = this.model.widget_manager;
+        var model_id = this.model.get(trait_name).replace("IPY_MODEL_", "");
+        return this.model.widget_manager.get_model(model_id).then(function(model){
+            return manager.create_view(model)
+        })
+    },
 
-            if (this.model.get("count") < 2) {
-                this.$player.hide()
-            }
-        }
+    getPlayerModel: function(){
+        // return a Promise
+        var model_id = this.model.get("_iplayer").replace("IPY_MODEL_", "");
+        return this.model.widget_manager.get_model(model_id)
     },
 
-    countChanged: function() {
-        var count = this.model.get("count");
-        this.$playerSlider.slider({
-            max: count - 1
-        });
-        if (this.model.get("count") > 1) {
-            this.$player.show()
-        }
+    createIPlayer: function(){
+        this.player_pview = this.createView("_iplayer");
+        var that = this;
+        this.player_pview.then(function(view){
+                var pe = view.el
+                pe.style.position = 'absolute'
+                pe.style.zIndex = 100
+                pe.style.bottom = '5%'
+                pe.style.left = '10%'
+                pe.style.opacity = '0.7'
+                that.stage.viewer.container.append(view.el);
+                pe.style.display = 'none'
+            })
     },
 
+    createImageBtn: function(){
+        this.image_btn_pview = this.createView("_ibtn_image");
+        var that = this;
+        this.image_btn_pview.then(function(view){
+           var pe = view.el
+           pe.style.position = 'absolute'
+           pe.style.zIndex = 100
+           pe.style.top = '5%'
+           pe.style.right = '10%'
+           pe.style.opacity = '0.7'
+           pe.style.width = '35px'
+           that.stage.viewer.container.append(view.el);
+        })
+    },
+
+    createFullscreenBtn: function(){
+        this.fullscreen_btn_pview = this.createView("_ibtn_fullscreen");
+        var that = this;
+        var stage = that.stage;
+        this.fullscreen_btn_pview.then(function(view){
+           var pe = view.el
+           pe.style.position = 'absolute'
+           pe.style.zIndex = 100
+           pe.style.top = '5%'
+           pe.style.right = '5%'
+           pe.style.opacity = '0.7'
+           pe.style.width = '35px'
+           pe.style.display = 'none'
+           stage.viewer.container.append(view.el);
+           stage.signals.fullscreenChanged.add(function (isFullscreen) {
+             if (isFullscreen) {
+               view.model.set("icon", "compress")
+             } else {
+               view.model.set("icon", "expand")
+             }
+           })
+        })
+    },
+
+
+    createGUI: function(){
+        this.pgui_view = this.createView("_igui");
+        var that = this;
+        this.pgui_view.then(function(view){
+                var pe = view.el
+                pe.style.position = 'absolute'
+                pe.style.zIndex = 100
+                pe.style.top = '5%'
+                pe.style.right = '10%'
+                pe.style.width = '300px'
+                that.stage.viewer.container.append(view.el);
+            })
+    },
+
+
+    createNglGUI: function(){
+      console.log("Creating NGL GUI")
+      this.stage_widget = new StageWidget(this.el, this.stage);
+      // this.$container.resizable("disable");
+    },
+
+
     setVisibilityForRepr: function(component_index, repr_index, value) {
@@ -827,3 +774,3 @@ // value = True/False
 
-    handleResize: function() {
+    handleResizable: function() {
         this.$container.resizable({
@@ -842,77 +789,18 @@ resize: function(event, ui) {
 
-    openNotebookCommandDialog: function() {
-        var that = this;
-        var dialog = this.$notebook_text.dialog({
-            draggable: true,
-            resizable: true,
-            modal: false,
-            show: {
-                effect: "blind",
-                duration: 150
-            },
-            close: function(event, ui) {
-                that.$container.append(that.$notebook_text);
-                that.$notebook_text.dialog('destroy');
-                event; ui; // to pass eslint; ack;
-            },
-        });
-        dialog.css({
-            overflow: 'hidden'
-        });
-        dialog.prev('.ui-dialog-titlebar')
-            .css({
-                'background': 'transparent',
-                'border': 'none'
-            });
-        Jupyter.keyboard_manager.register_events(dialog);
-    },
-
-    setDialog: function() {
-        var $nb_container = Jupyter.notebook.container;
-        var that = this;
-        var dialog = this.$container.dialog({
-            title: "NGLView",
-            draggable: true,
-            resizable: true,
-            modal: false,
-            width: window.innerWidth - $nb_container.width() - $nb_container.offset().left - 50,
-            height: 'auto',
-            position: {
-                my: 'right',
-                at: 'right',
-                of: window
-            },
-            show: {
-                effect: "blind",
-                duration: 150
-            },
-            close: function(event, ui) {
-                that.$el.append(that.$container);
-                that.$container.dialog('destroy');
-                that.handleResize();
-                event; ui; // to pass eslint; ack;
-            },
-            resize: function(event, ui) {
-                that.stage.handleResize();
-                that.setSize(ui.size.width + "px", ui.size.height + "px");
-            }.bind(that),
-        });
-        dialog.css({
-            overflow: 'hidden'
-        });
-        dialog.prev('.ui-dialog-titlebar')
-            .css({
-                'background': 'transparent',
-                'border': 'none'
-            });
-    },
-
-    resizeNotebook: function(width) {
-        var $nb_container = Jupyter.notebook.container;
-        $nb_container.width(width);
-
-        if (this.$container.dialog) {
-            this.$container.dialog({
-                width: $nb_container.offset().left
-            });
+    GUIStyleChanged: function(){
+        var style = this.model.get("gui_style");
+        console.log('style ' + style);
+        if (style === 'ngl'){
+            console.log("Creating NGL GUI");
+            this.createNglGUI();
+            this.$pickingText.hide();
+        }else{
+            if (this.stage_widget){
+                this.stage_widget.dispose()
+                this.stage_widget = undefined
+                this.$container.resizable("enable")
+                var width = this.$el.parent().width() + "px";
+                var height = this.$el.parent().height() + "px";
+                this.setSize(width, height);
+            }
         }
@@ -969,17 +857,2 @@ },
 
-    cleanOutput: function() {
-
-        var cells = Jupyter.notebook.get_cells();
-
-        for (var i = 0; i < cells.length; i++) {
-            var cell = cells[i];
-            if (cell.output_area.outputs.length > 0) {
-                var out = cell.output_area.outputs[0];
-                if (out.output_type == 'display_data') {
-                    cell.clear_output();
-                }
-            }
-        }
-    },
-
     _handle_loading_file_finished: function() {
@@ -1038,3 +911,3 @@ this.send({'type': 'async_message', 'data': 'ok'});
 
-	_make_color_scheme: function(args, label){
+	addColorScheme: function(args, label){
         var id = NGL.ColormakerRegistry.addSelectionScheme(args, label);
@@ -1056,5 +929,5 @@ var scheme = NGL.ColormakerRegistry.userSchemes[id];
             // handle color
-            if (msg.methodName == 'addRepresentation' && 
+            if (msg.methodName == 'addRepresentation' &&
                 msg.reconstruc_color_scheme){
-                msg.kwargs.color = this._make_color_scheme(msg.kwargs.color, msg.kwargs.color_label);
+                msg.kwargs.color = this.addColorScheme(msg.kwargs.color, msg.kwargs.color_label);
             }
@@ -1106,7 +979,2 @@ if ("colorVolume" in msg.kwargs){
                     break;
-                case 'StructureComponent':
-                    component = this.structureComponent;
-                    func = component[msg.methodName];
-                    func.apply(component, new_args);
-                    break;
                 case 'Widget':
@@ -1121,11 +989,2 @@ func = this[msg.methodName];
                     break;
-                case 'player':
-                    func = this.$player[msg.methodName];
-                    if (func) {
-                        func.apply(this.$player, new_args);
-                    } else {
-                        // send error message to Python?
-                        console.log('can not create func for ' + msg.methodName);
-                    }
-                    break;
                 case 'Representation':
@@ -1132,0 +991,0 @@ var component_index = msg['component_index'];

No alert changes

Improved metrics

Total package byte prevSize

4890319

increased by10.85%

Number of package files

28

increased by64.71%

Lines of code

32028

increased by31.36%

No dependency changes