Static rendering is working!

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ipyvega",
+  "name": "jupyter-vega",
   "version": "0.2.0",
   "description": "iPython/Jupyter notebook module for [Vega](/vega/vega-lite), and [Vega-Lite](/vega/vega-lite), [Polestar](/vega/polestar), and [Voyager](/vega/voyager).",
   "repository": {

src/index.js

@@ -1,28 +1,92 @@
-// require('./embed.css');
-
 var embed = require('vega-embed');
 var $ = require('jquery');
 var events = require('base/js/events');
 
+// Polyfill findIndex if needed
+if (!Array.prototype.findIndex) {
+  Array.prototype.findIndex = function(predicate) {
+    if (this === null) {
+      throw new TypeError('Array.prototype.findIndex called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    var list = Object(this);
+    var length = list.length >>> 0;
+    var thisArg = arguments[1];
+    var value;
+
+    for (var i = 0; i < length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return i;
+      }
+    }
+    return -1;
+  };
+}
+
+function javascriptIndex(selector, outputs) {
+  // Return the index in the output array of the JS repr of this viz
+  var index = outputs.findIndex(function(item, index, array) {
+    if (item['metadata']['jupyter-vega']===selector &&
+        item['data']['application/javascript']!==undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+  return index;
+}
+
+function imageIndex(selector, outputs) {
+  // Return the index in the output array of the PNG repr of this viz
+  var index = outputs.findIndex(function(item, index, array) {
+    if (item['metadata']['jupyter-vega']===selector &&
+        item['data']['image/png']!==undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+  return index;
+}
+
 function render(selector, spec, type, output_area) {
-  var el = $.find(selector);
   if (type) {
     var embedSpec = {
       mode: type,
       spec: spec
     }
 
+    // Find the indices of this visualizations JS and PNG
+    // representation.
+    var imgIndex = imageIndex(selector, output_area.outputs);
+    var jsIndex = javascriptIndex(selector, output_area.outputs);
+
+    // If we have already rendered a static image, don't render
+    // the JS version or append a new PNG version
+    if (imgIndex>-1 && jsIndex>-1 && imgIndex===(jsIndex+1)) {
+      return;
+    }
+
+    // Never been rendered, so render JS and append the PNG to the 
+    // outputs for the cell
+    var el = $.find(selector);
     embed(el[0], embedSpec, function(error, result) {
-      console.log(error, result);
       var imageData = result.view.toImageURL();
-      var output = {
-          data: {
-            "image/png": imageData.split(",")[1]
-          },
-          metadata: {},
-          output_type: "display_data"
-      };
-      output_area.append_output(output);
+      if (output_area!==undefined) {
+        var output = {
+            data: {
+              "image/png": imageData.split(",")[1]
+            },
+            metadata: {'jupyter-vega': selector},
+            output_type: "display_data"
+        };
+        // This appends the PNG output, but doesn't render it this time
+        // as the JS version will be rendered already.
+        output_area.outputs.push(output);
+      }
     });
   }
 }

vega/__init__.py

@@ -3,22 +3,16 @@
 from warnings import warn
 
 
-def _jupyter_server_extension_paths():
-    return [{
-        "module": "vega"
-    }]
-
-
-# Jupyter Extension points
 def _jupyter_nbextension_paths():
+    """Return metadata for the jupyter-vega nbextension."""
     return [dict(
         section="notebook",
         # the path is relative to the `vega` directory
         src="static",
         # directory in the `nbextension/` namespace
-        dest="vega",
+        dest="jupyter-vega",
         # _also_ in the `nbextension/` namespace
-        require="vega/index")]
+        require="jupyter-vega/index")]
 
 
 def find_static_assets():

vega/static/vega-lite.js

@@ -4,6 +4,6 @@ var type = "{type}";
 
 var output_area = this;
 
-require(['nbextensions/vega/index'], function(vega) {{
+require(['nbextensions/jupyter-vega/index'], function(vega) {{
   vega.render(selector, spec, type, output_area);
 }});

vega/vegalite.py

@@ -72,5 +72,12 @@ def _generate_js(self, id):
     def _ipython_display_(self):
         """Display the visualization in the Jupyter notebook."""
         id = uuid.uuid4()
-        publish_display_data({'text/html':self._generate_html(id)})
-        publish_display_data({'application/javascript': self._generate_js(id)})
+        publish_display_data(
+            {'text/html':self._generate_html(id)},
+            metadata={'jupyter-vega': '#{0}'.format(id)}
+        )
+        publish_display_data(
+            {'application/javascript': self._generate_js(id)},
+            metadata={'jupyter-vega': '#{0}'.format(id)}
+        )
+