FIX: make sure player displayed correctly in embed mode

nglviewer · Aug 3, 2019 · d8a6f42 · d8a6f42
1 parent 751a776
commit d8a6f42
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 93 deletions.
diff --git a/js/package.json b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nglview-js-widgets",
-  "version": "2.6.8",
+  "version": "2.6.9",
   "description": "nglview-js-widgets",
   "author": "Hai Nguyen <hainm.comp@gmail.com>, Alexander Rose <alexander.rose@weirdbyte.de>",
   "license": "MIT",

diff --git a/js/src/widget_ngl.js b/js/src/widget_ngl.js
@@ -306,7 +306,8 @@ var NGLView = widgets.DOMWidgetView.extend({
                 v.el.style.display = type
                 // Need to check if max_frame is available (otherwise NaN)
                 // https://github.com/jupyter-widgets/ipywidgets/issues/2485
-                if (!that.model.get("max_frame") || (that.model.get("max_frame") <= 1)){
+                console.log('max_frame', that.model.get('max_frame'))
+                if (!that.model.get("max_frame") || (that.model.get("max_frame") == 0)){
                     // always hide if there's no trajectory.
                     v.el.style.display = 'none'
                 }
@@ -348,14 +349,13 @@ var NGLView = widgets.DOMWidgetView.extend({
 
     handle_embed: function(){
         var that = this;
-        var ngl_coordinate_resource = that.model.get("_ngl_coordinate_resource");
         var ngl_msg_archive = that.model.get("_ngl_msg_archive");
         var ngl_stage_params = that.model.get('_ngl_full_stage_parameters');
         var ngl_color_dict = that.model.get("_ngl_color_dict");
         var loadfile_list = [];
         var label
 
-        // reconstruct colors
+        // Only need to reconstruct colors in embeding mode (outside notebook)
         if (this.model.comm === undefined){
             var model_dict = this.model.widget_manager._models
             var models = []
@@ -366,6 +366,7 @@ var NGLView = widgets.DOMWidgetView.extend({
                 for (var i in models){
                     var model = models[i]
                     if (model instanceof ColormakerRegistryModel){
+                        console.log(model.views)
                         var k = Object.keys(model.views)[0] // singleton
                         model.views[k].then(view =>{
                             view.model.get("_msg_ar").forEach(msg =>{
@@ -376,7 +377,6 @@ var NGLView = widgets.DOMWidgetView.extend({
                 }
             })
 
-            // Outside the notebook
             // Old API (_ColorScheme)
             for (label in ngl_color_dict){
                 if (!NGL.ColormakerRegistry.hasScheme(label)){
@@ -398,37 +398,27 @@ var NGLView = widgets.DOMWidgetView.extend({
 
 
         Promise.all(loadfile_list).then(function(compList){
-            n_frames = ngl_coordinate_resource['n_frames'] || 1;
             that._set_representation_from_repr_dict(that.model.get("_ngl_repr_dict"))
             that.stage.setParameters(ngl_stage_params);
             that.set_camera_orientation(that.model.get("_camera_orientation"));
-            that.model.set("max_frame", n_frames-1);  // trigger updating slider and player's max
             that.touch();
-            delete ngl_coordinate_resource['n_frames'];
-
-            // 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);
-                        })
-                    })
-                }
+            // Outside notebook
+            if (that.model.comm === undefined){
+                var ngl_coordinate_resource = that.model.get("_ngl_coordinate_resource");
+                n_frames = ngl_coordinate_resource['n_frames']
+                that.model.set("max_frame", n_frames-1);  // trigger updating slider and player's max
+                that.touch()
+                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"))})
+                })
             }
 
+
             // fire any msg with "fire_embed"
             that.model.get("_ngl_msg_archive").forEach(function(msg){
                 if (msg.fire_embed){
@@ -441,7 +431,7 @@ var NGLView = widgets.DOMWidgetView.extend({
     updateCoordinatesFromDict: function(cdict, frame_index){
         // update coordinates for given "index"
         // cdict = Dict[int, List[base64]]
-        var keys = Object.keys(cdict);
+        var keys = Object.keys(cdict).filter(k => (k !== 'n_frames'));
 
         for (var i = 0; i < keys.length; i++) {
             var traj_index = keys[i];
@@ -886,13 +876,11 @@ var NGLView = widgets.DOMWidgetView.extend({
 
     handleResize: function(){
         var width = this.$el.width()
-        console.log('el width ' + width)
         var height = this.$el.height() + "px"
         if (this.stage_widget){
             width = width - $(this.stage_widget.sidebar.dom).width()
         }
         width = width + "px"
-        console.log('new width (px)' + width)
         this.setSize(width, height)
     },
 

diff --git a/nglview/_frontend.py b/nglview/_frontend.py
@@ -1 +1 @@
-__frontend_version__ = '2.6.8'
+__frontend_version__ = '2.6.9'
diff --git a/nglview/static/index.js b/nglview/static/index.js
diff --git a/nglview/static/index.js.map b/nglview/static/index.js.map
diff --git a/nglview/tests/notebooks/api/test_add_shape.ipynb b/nglview/tests/notebooks/api/test_add_shape.ipynb
@@ -10,7 +10,21 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "d146880326a84bfea403085dbd6e12c8",
+       "model_id": "c89882fb09a94a6084f04a619662f7e4",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "_ColormakerRegistry()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "e4b8670d54994f399b79f02b011d72b0",
        "version_major": 2,
        "version_minor": 0
       },
@@ -52,7 +66,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "d146880326a84bfea403085dbd6e12c8",
+       "model_id": "e4b8670d54994f399b79f02b011d72b0",
        "version_major": 2,
        "version_minor": 0
       },
@@ -89,13 +103,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 6,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ea855b30b4104300a365f377967812ec",
+       "model_id": "27a15d349a9242aebed4a99dc815dcb3",
        "version_major": 2,
        "version_minor": 0
       },
@@ -147,6 +161,13 @@
     " 1])\n",
     "view2"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {

diff --git a/nglview/tests/notebooks/api/test_app_layout.ipynb b/nglview/tests/notebooks/api/test_app_layout.ipynb
@@ -4,7 +4,22 @@
    "cell_type": "code",
    "execution_count": 1,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "33d5ab58d9c24bef950c828a0209ebc1",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "_ColormakerRegistry()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "from ipywidgets import *\n",
     "import nglview as nv\n",
@@ -43,7 +58,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7f4691ef890c4edcb43722c6ba40f08c",
+       "model_id": "a2712c7cb44f451daf624ace28619ba4",
        "version_major": 2,
        "version_minor": 0
       },
@@ -83,7 +98,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a19b25d2fcde4de188e6ac5545f44efc",
+       "model_id": "c3997c63208a49b591b65853a790d0b3",
        "version_major": 2,
        "version_minor": 0
       },
@@ -104,7 +119,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [],
    "source": [
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		__frontend_version__ = '2.6.8'
		__frontend_version__ = '2.6.9'