Adding the possibility to put data in an external file when embeding

ipyvolume/embed.py

@@ -88,7 +88,7 @@ def add_referring_widgets(states, drop_defaults=False):
 
                                 #get_state(value, store, drop_defaults=drop_defaults)
     return found_new
-def embed_html(filename, widgets, drop_defaults=False, all=False, title="ipyvolume embed example", template=template, **kwargs):
+def embed_html(filename, widgets, drop_defaults=False, all=False, title="ipyvolume embed example", template=template, inside=False, **kwargs):
     try:
         widgets[0]
     except (IndexError, TypeError):
@@ -110,6 +110,31 @@ def embed_html(filename, widgets, drop_defaults=False, all=False, title="ipyvolu
         finally:
             ipyvolume.serialize.performance = previous
 
+        # get the module that we will store in other file:
+        for k in state.keys():
+            if "IPY_MODEL" in state[k]["state"].get("layout", "") and  \
+               "ScatterView" in state[k]["state"].get("_view_name", ""):
+                if state[k]["state"]["embed"] is None or inside:
+                    # Do nothing
+                    continue
+
+                if state[k]["state"]["embed"] == "":
+                    # Generate automaticaly a "unique" name for the json
+                    filename = "data_" + state[k]["state"]["layout"].split("_")[-1] + ".json"
+                    state[k]["state"]["embed"] = filename
+                else:
+                    # or give it the name defined by user
+                    filename = state[k]["state"]["embed"]
+
+                # Get the data
+                data = ["x","y","z","vx","vy","vz","color","sequence_index"]
+                json_data = {"data": {}}
+                for key in data:
+                    json_data["data"][key] = state[k]["state"].pop(key)
+
+                with open(filename, "w") as json_f:
+                    json_f.write(json.dumps(json_data))
+
         values = dict(extra_script_head="", body_pre="", body_post="")
         values.update(kwargs)
         widget_views = ""

ipyvolume/volume.py

@@ -22,6 +22,7 @@ class Scatter(widgets.DOMWidget):
     _view_module = Unicode('ipyvolume').tag(sync=True)
     _model_name = Unicode('ScatterModel').tag(sync=True)
     _model_module = Unicode('ipyvolume').tag(sync=True)
+    embed = Unicode('', allow_none=True).tag(sync=True)
     x = Array(default_value=None).tag(sync=True, **create_array_binary_serialization('x'))
     y = Array(default_value=None).tag(sync=True, **create_array_binary_serialization('y'))
     z = Array(default_value=None).tag(sync=True, **create_array_binary_serialization('z'))

js/src/scatter.js

@@ -100,7 +100,6 @@ var ScatterView = widgets.WidgetView.extend( {
     on_change: function(attribute) {
         _.mapObject(this.model.changedAttributes(), function(val, key){
             console.log("changed " +key)
-            console.log(this.model.get("x"),this.model.get("xx"))
             this.previous_values[key] = this.model.previous(key)
             // attributes_changed keys will say what needs to be animated, it's values are the properties in
             // this.previous_values that need to be removed when the animation is done
@@ -259,13 +258,13 @@ var ScatterView = widgets.WidgetView.extend( {
 });
 
 var Data = Backbone.Model.extend();
-   var ValueCollection = Backbone.Collection.extend({
-       model: Data,
-       url: "data.json",
-       parse: function (response) {
-           return response.data
-       }
-   });
+ var ValueCollection = Backbone.Collection.extend({
+     model: Data,
+     url: "data.json",
+     parse: function (response) {
+         return response.data
+     }
+ });
 
 
 var ScatterModel = widgets.WidgetModel.extend({
@@ -286,23 +285,42 @@ var ScatterModel = widgets.WidgetModel.extend({
         })
     },
     initialize : function(options) {
-          console.log("Initialize")
-          ScatterModel.__super__.initialize.apply(this, arguments);
+           console.log("Initialize")
+           ScatterModel.__super__.initialize.apply(this, arguments);
 
-          var loading = new ValueCollection ()
-          //debugger;
-          loading.fetch()
+           var loading = new ValueCollection ()
+           //loading.fetch()
+           if ( !( _.isEmpty(this.get("embed")) || typeof this.get("embed") == "undefined")){
+              loading.url = this.get("embed")
+              //Provide default value to start the rendering meanwhile
+              this.set("x",serialize.deserialize_array_or_json([[0,0,1],[0,0,1]]))
+              this.set("y",serialize.deserialize_array_or_json([[1,0,0],[0,0,1]]))
+              this.set("z",serialize.deserialize_array_or_json([[0,0,0],[0,0,0]]))
+
+              loading.fetch( )
+            }
            this.listenToOnce(loading, "sync", function(){
-               var data = loading.toJSON()[0]
-               console.log(this.get("x"))
-               var new_x = Array()
-               for(var i=0; i < data.x.length; i++) {
-                  new_x[i] = Float32Array.from(data.x[i])
-               }
-               this.set({x:  new_x})
-               console.log(this.get("x"))
+              var data = loading.toJSON()[0]
+              //console.log(data, data["x"])
+              to_load = ["x","y","z","vx","vy","vz","color","sequence_index"]
+
+              _.each(to_load , function(attribute){
+                    console.log(attribute)
+                     if (typeof data[attribute] != "undefined"){
+                         //Get the different types
+                        var loadedValue
+                        if (attribute == "color")
+                            loadedValue = serialize.deserialize_color_or_json(data[attribute])
+                        else
+                            loadedValue = serialize.deserialize_array_or_json(data[attribute])
+
+                         console.log(loadedValue)
+                         this.set({[attribute]: loadedValue})
+                    }
+               },this)
+               //console.log(this.get("x"))
 
-               console.log("syinc")
+               //console.log("syinc")
            })
            this.set({loading:loading})
       }