ENH: export plot to vega editor

emperor/support_files/js/controller.js

@@ -661,7 +661,24 @@ define([
                 disabled: isLargeDataset
               }
             }
-        }
+        },
+        'openInVegaEditor': {
+          name: 'Open in Vega Editor',
+          icon: 'file-picture-o',
+          callback: function(key, opts) {
+            scope.exportToVega();
+          },
+          disabled: function(key, opt) {
+            // Only enable if this is a "vanilla" plot
+            if (scope.decViews.scatter.lines.left === null &&
+                scope.decViews.scatter.lines.right === null &&
+                scope.decViews.biplot === undefined) {
+              return false;
+            }
+            return true;
+          },
+        },
+
       }
     });
 
@@ -931,5 +948,55 @@ define([
     return obj;
   };
 
+  /**
+   *
+   * Helper that posts messages between browser tabs
+   *
+   * @private
+   *
+   */
+  _postMessage = function(url, payload) {
+    // Shamelessly pulled from https://github.com/vega/vega-embed/
+    var editor = window.open(url);
+    var wait = 10000;
+    var step = 250;
+    var count = ~~(wait / step);
+
+    function listen(e) {
+      if (e.source === editor) {
+        count = 0;
+        window.removeEventListener('message', listen, false);
+      }
+    }
+
+    window.addEventListener('message', listen, false);
+
+    function send() {
+      if (count <= 0) {
+        return;
+      }
+      editor.postMessage(payload, '*');
+      setTimeout(send, step);
+      count -= 1;
+    }
+    setTimeout(send, step);
+  }
+
+  /**
+   *
+   * Open in Vega editor
+   *
+   */
+  EmperorController.prototype.exportToVega = function() {
+    var url = 'https://vega.github.io/editor/';
+    var spec = this.decViews.scatter._buildVegaSpec();
+    var payload = {
+      mode: 'vega',
+      renderer: 'canvas',
+      spec: JSON.stringify(spec),
+    };
+    _postMessage(url, payload);
+  };
+
   return EmperorController;
 });

emperor/support_files/js/model.js

@@ -514,6 +514,34 @@ function($, _, util) {
         this.axesNames = names.nonNumeric.concat(replacement);
       }
     }
+    this._buildAxesLabels();
+  };
+
+  /**
+   *
+   * Helper method to build labels for all axes
+   *
+   */
+  DecompositionModel.prototype._buildAxesLabels = function() {
+    var axesLabels = [], index, text;
+    for (index = 0; index < this.axesNames.length; index++) {
+      // when the labels get too long, it's a bit hard to look at
+      if (this.axesNames[index].length > 25) {
+        text = this.axesNames[index].slice(0, 20) + '...';
+      }
+      else {
+        text = this.axesNames[index];
+      }
+
+      // account for custom axes (their percentage explained will be -1 to
+      // indicate that this attribute is not meaningful).
+      if (this.percExpl[index] >= 0) {
+        text += ' (' + this.percExpl[index].toPrecision(4) + ' %)';
+      }
+
+      axesLabels.push(text);
+    }
+    this.axesLabels = axesLabels;
   };
 
   /**

emperor/support_files/js/sceneplotview3d.js

@@ -525,19 +525,7 @@ define([
     decomp = this.decViews[firstKey].decomp;
 
     this._dimensionsIterator(function(start, end, index) {
-      // when the labels get too long, it's a bit hard to look at
-      if (decomp.axesNames[index].length > 25) {
-        text = decomp.axesNames[index].slice(0, 20) + '...';
-      }
-      else {
-        text = decomp.axesNames[index];
-      }
-
-      // account for custom axes (their percentage explained will be -1 to
-      // indicate that this attribute is not meaningful).
-      if (decomp.percExpl[index] >= 0) {
-        text += ' (' + decomp.percExpl[index].toPrecision(4) + ' %)';
-      }
+      text = decomp.axesLabels[index];
 
       axisLabel = makeLabel(end, text, color);
       axisLabel.scale.set(axisLabel.scale.x * scaling,

emperor/support_files/js/shape-controller.js

@@ -127,6 +127,7 @@ define([
     _.each(group, function(element) {
       idx = element.idx;
       scope.markers[idx].geometry = geometry;
+      scope.markers[idx].userData.shape = shape;
     });
     scope.needsUpdate = true;
   };

emperor/support_files/js/view.js

@@ -151,6 +151,8 @@ DecompositionView.prototype._initBaseView = function() {
       mesh.position.set(plottable.coordinates[x], plottable.coordinates[y],
                         plottable.coordinates[z] || 0);
 
+      mesh.userData.shape = 'Sphere'
+
       scope.markers.push(mesh);
 
       if (hasConfidenceIntervals) {
@@ -828,6 +830,136 @@ DecompositionView.prototype.toggleLabelVisibility = function() {
   this.needsUpdate = true;
 };
 
+/**
+ *
+ * Helper that builds a vega specification off of the current view state
+ *
+ * @private
+ */
+DecompositionView.prototype._buildVegaSpec = function() {
+  function rgbColor(colorObj) {
+    var r = colorObj.r * 255;
+    var g = colorObj.g * 255;
+    var b = colorObj.b * 255;
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
+  }
+
+  // Maps THREE.js geometries to vega shapes
+  var getShape = {
+    Sphere: 'circle',
+    Diamond: 'diamond',
+    Cone: 'triangle-down',
+    Cylinder: 'square',
+    Ring: 'circle',
+    Square: 'square',
+    Icosahedron: 'cross',
+    Star: 'cross',
+  };
+
+  function viewMarkersAsVegaDataset(markers) {
+    var points = [], marker, i;
+    for (i = 0; i < markers.length; i++) {
+      marker = markers[i];
+      if (marker.visible) {
+        points.push({
+          id: marker.name,
+          x: marker.position.x,
+          y: marker.position.y,
+          color: rgbColor(marker.material.color),
+          originalShape: marker.userData.shape,
+          shape: getShape[marker.userData.shape],
+          scale: { x: marker.scale.x, y: marker.scale.y, },
+          opacity: marker.material.opacity,
+        });
+      }
+    }
+    return points;
+  };
+
+  // This is probably horribly slow on QIITA-scale MD files, probably needs some attention
+  function plottablesAsMetadata(points, header) {
+    var md = [], point, row, i, j;
+    for (i = 0; i < points.length; i++) {
+      point = points[i];
+      row = {};
+      for (j = 0; j < header.length; j++) {
+        row[header[j]] = point.metadata[j];
+      }
+      md.push(row);
+    }
+    return md;
+  }
+
+  var scope = this;
+  var model = scope.decomp;
+
+  var axisX = scope.visibleDimensions[0];
+  var axisY = scope.visibleDimensions[1];
+
+  var dimRanges = model.dimensionRanges;
+  var rangeX = [dimRanges.min[axisX], dimRanges.max[axisX]];
+  var rangeY = [dimRanges.min[axisY], dimRanges.max[axisY]];
+
+  var baseWidth = 800;
+
+  return {
+    '$schema': 'https://vega.github.io/schema/vega/v5.json',
+    padding: 5,
+    background: scope.backgroundColor,
+    config: {
+      axis: { labelColor: scope.axesColor, titleColor: scope.axesColor, },
+      title: { color: scope.axesColor, },
+    },
+    title: 'Emperor PCoA',
+    data: [
+      { name: 'metadata', values: plottablesAsMetadata(model.plottable, model.md_headers), },
+      {
+        name: 'points', values: viewMarkersAsVegaDataset(scope.markers),
+        transform: [
+          {
+            type: 'lookup',
+            from: 'metadata',
+            key: model.md_headers[0],
+            fields: ['id'],
+            as: ['metadata'],
+          }
+        ],
+      },
+    ],
+    signals: [
+      {name: 'width', update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))'},
+      {name: 'height', update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))'}
+    ],
+    scales: [
+      { name: 'xScale', range: 'width', domain: [rangeX[0], rangeX[1]] },
+      { name: 'yScale', range: 'height', domain: [rangeY[0], rangeY[1]] }
+    ],
+    axes: [
+      { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX], },
+      { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY], }
+    ],
+    marks: [
+      {
+        type: 'symbol',
+        from: {data: 'points'},
+        encode: {
+          enter: {
+            fill: { field: 'color', },
+            x: { scale: 'xScale', field: 'x', },
+            y: { scale: 'yScale', field: 'y', },
+            shape: { field: 'shape', },
+            size: { signal: 'datum.scale.x * datum.scale.y * 100', },
+            opacity: { field: 'opacity', },
+          },
+          update: {
+            tooltip: { signal: 'datum.metadata' },
+          },
+        },
+      },
+    ],
+  };
+}
+
 /**
  * Helper function to change the opacity of an arrow object.
  *