ADD: embed trajectory (or write_html) (#687)

devtools/nglview-jupyterlab.sh

@@ -18,6 +18,7 @@ conda install setuptools -c conda-forge --force -y
 conda install notebook==${notebook_version} -c conda-forge -y
 pip install ipywidgets==${ipywidgets_version}
 pip install widgetsnbextension==${widgetsnbextension_version} --upgrade
+pip install pytraj # comment if using windows
 jupyter nbextension install --py --sys-prefix widgetsnbextension
 jupyter nbextension enable --py --sys-prefix widgetsnbextension
 

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nglview-js-widgets",
-  "version": "0.5.4-dev.13",
+  "version": "0.5.4-dev.15",
   "description": "nglview-js-widgets",
   "author": "Hai Nguyen <hainm.comp@gmail.com>, Alexander Rose <alexander.rose@weirdbyte.de>",
   "license": "MIT",
@@ -30,22 +30,23 @@
     "test": "mocha"
   },
   "devDependencies": {
-    "@jupyterlab/extension-builder": "^0.10.0",
     "babel-eslint": "^7.0.0",
     "babel-register": "^6.11.6",
     "eslint": "^3.2.2",
     "eslint-config-google": "^0.7.1",
     "json-loader": "^0.5.4",
-    "ngl": "0.10.5-17",
+    "css-loader": "^0.23.1",
+    "style-loader": "^0.13.1",
+    "ngl": "0.10.5-19",
     "webpack": "^1.12.14"
   },
   "dependencies": {
-    "jquery": "^2.1.4",
+    "jquery": "^3.2.1",
     "jquery-ui": "^1.12.1",
     "underscore": "^1.8.3",
     "@jupyter-widgets/base": "^0.5.2",
     "@jupyterlab/nbwidgets": "^0.6.15",
-    "ngl": "0.10.5-17"
+    "ngl": "0.10.5-19"
   },
   "homepage": "https://github.com/arose/nglview#readme",
   "directories": {

js/src/widget_ngl.js

@@ -5,6 +5,7 @@ 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/slider.css');
 
 var Jupyter;
 if (typeof window !== 'undefined') {
@@ -91,26 +92,7 @@ var NGLView = widgets.DOMWidgetView.extend({
             );
             this.requestUpdateStageParameters();
             if (this.model.get("_ngl_serialize")){
-                console.log('test Promise 2');
-                var ngl_msg_archive = that.model.get("_ngl_msg_archive");
-                var loadfile_list = [];
-                _.each(ngl_msg_archive, function(msg){
-                    if (msg.methodName == 'loadFile'){
-                        loadfile_list.push(that._get_loadFile_promise(msg));
-                    }
-                });
-                Promise.all(loadfile_list).then(function(compList){
-                    var ngl_repr_dict = that.model.get('_ngl_repr_dict')
-                    for (var index in ngl_repr_dict){
-                        var comp = compList[index];
-                        comp.removeAllRepresentations();
-                        var reprlist = ngl_repr_dict[index]; 
-                        for (var j in reprlist){
-                            var repr = reprlist[j];
-                            comp.addRepresentation(repr.type, repr.params);
-                        }
-                    }
-                });
+                that.handle_embed();
             }
         }.bind(this));
 
@@ -230,6 +212,84 @@ var NGLView = widgets.DOMWidgetView.extend({
         this.touch();
     },
 
+    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 loadfile_list = [];
+        _.each(ngl_msg_archive, function(msg){
+            if (msg.methodName == 'loadFile'){
+                loadfile_list.push(that._get_loadFile_promise(msg));
+            }
+        });
+        Promise.all(loadfile_list).then(function(compList){
+            var ngl_repr_dict = that.model.get('_ngl_repr_dict')
+            for (var index in ngl_repr_dict){
+                var comp = compList[index];
+                comp.removeAllRepresentations();
+                var reprlist = ngl_repr_dict[index]; 
+                for (var j in reprlist){
+                    var repr = reprlist[j];
+                    comp.addRepresentation(repr.type, repr.params);
+                }
+            }
+
+            var frame = 0;
+            var count = that.model.get("count");
+            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)
+            }
+
+            var pause = function() {
+                that.$playerButton.text("play");
+                if (that.playerInterval !== undefined) {
+                    clearInterval(that.playerInterval);
+                }
+            }.bind(that);
+
+            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({
+                slide: function(event, ui) {
+                    pause();
+                    that.updateCoordinatesFromDict(ngl_coordinate_resource, ui.value);
+                    frame = ui.value;
+                }.bind(that)
+            })
+        });
+    },
+
+    updateCoordinatesFromDict: function(cdict, frame_index){
+        // update coordinates for given "index"
+        // cdict = Dict[int, List[base64]]
+        var keys = Object.keys(cdict);
+
+        for (var i = 0; i < keys.length; i++) {
+            var traj_index = keys[i];
+            var coordinates = this.decode_base64(cdict[traj_index][frame_index]);
+            if (coordinates && coordinates.byteLength > 0) {
+                this.updateCoordinates(coordinates, traj_index);
+            }
+        }
+    },
+
     setSelector: function(selector_id) {
         // id is uuid that will be set from Python
         var selector = "<div class='" + selector_id + "'></div>";
@@ -447,7 +507,6 @@ var NGLView = widgets.DOMWidgetView.extend({
 
     representationsChanged: function() {
         var representations = this.model.get("_init_representations");
-        console.log('_init_representations', representations);
         var component;
 
         for (var i = 0; i < this.stage.compList.length; i++) {
@@ -928,7 +987,7 @@ var NGLView = widgets.DOMWidgetView.extend({
             for (var i = 0; i < keys.length; i++) {
                 var traj_index = keys[i];
                 var coordinates = this.decode_base64(coordinatesDict[traj_index]);
-                if (coordinates.byteLength > 0) {
+                if (coordinates && coordinates.byteLength > 0) {
                     this.updateCoordinates(coordinates, traj_index);
                 }
             }

js/webpack.config.js

@@ -4,6 +4,8 @@ var version = require('./package.json').version;
 // stored in a separate local variable.
 var loaders = [
     { test: /\.json$/, loader: 'json-loader' },
+    { test: /\.css$/, loader: "style-loader!css-loader" },
+    { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
 ];
 
 
@@ -66,6 +68,6 @@ module.exports = [
         module: {
             loaders: loaders
         },
-        externals: ['@jupyter-widgets/base']
+        externals: ['@jupyter-widgets/base', "jquery-ui"]
     }
 ];

jslab/package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@jupyter-widgets/jupyterlab-manager": "^0.25.11",
-    "nglview-js-widgets": "0.5.4-dev.13"
+    "nglview-js-widgets": "0.5.4-dev.15"
   },
   "jupyterlab": {
     "extension": true

nglview/__init__.py

@@ -21,7 +21,7 @@ def _jupyter_nbextension_paths():
 # TODO: do not use import *
 # interface
 from .config import BACKENDS
-from .widget import NGLWidget
+from .widget import NGLWidget, write_html
 from .base_adaptor import *
 from .adaptor import *
 from .show import *