add mocked net vizs

1 files changed, 44 insertions, 30 deletions

diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index ad33092..c1586d1 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -26,6 +26,7 @@ var WeightVisWrapper = (function() {
             .style("top", "50%");
         componentHandler.upgradeElement(this.spinner.node());
 
+        // TODO move controlContainer out of weightVisWrapper
         this.controlContainer
             .style("margin-left", "auto")
             .style("margin-right", "auto")
@@ -56,10 +57,22 @@ var WeightVisWrapper = (function() {
 
     WeightVisWrapper.prototype.load = function(url, callback) {
         var self = this;
-        this.netVisualizer.load(url, function(){
-            var inputNodes = self.svg.selectAll(".layer-1")[0];
+        this.netVisualizer.load(url, function() { self.loaded(callback); });
+    };
+
+    WeightVisWrapper.prototype.mock = function(shape, callback) {
+        var self = this;
+        this.controlContainer.style("display", "none");
+        this.netVisualizer.mock(shape, function() { self.loaded(callback); });
+    };
+
+    WeightVisWrapper.prototype.loaded = function(callback) {
+        var self = this;
+        var inputNodes = this.svg.selectAll(".layer-1")[0];
+        if (inputNodes.length == attributeNames.length) {
+            // TODO too specialized to be abstract
             for (node=0; node<inputNodes.length; node++) {
-                self.svg
+                this.svg
                     .append("text")
                     .attr("class", "attribute")
                     .attr("text-anchor", "middle")
@@ -69,37 +82,37 @@ var WeightVisWrapper = (function() {
                     .attr("cursor", "default")
                     .text(attributeNames[node]);
             }
-            self.resizeHooks.push(function() { self.netVisualizer.reposition(); });
-            self.resizeHooks.push(function() { self.placeAttributes(); });
-            self.netVisualizer.hookStepper(function(step) { self.slider.node().MaterialSlider.change(step); });
-            self.netVisualizer.hookStop(function() {
+        }
+        this.resizeHooks.push(function() { self.netVisualizer.reposition(); });
+        this.resizeHooks.push(function() { self.placeAttributes(); });
+        this.netVisualizer.hookStepper(function(step) { self.slider.node().MaterialSlider.change(step); });
+        this.netVisualizer.hookStop(function() {
+            self.button.attr("data-pressed", "false");
+            self.button.select(".play").style("display", "");
+            self.button.select(".pause").style("display", "none");
+            if (self.slider.node().value >= self.slider.node().max * 0.95) {
+                self.slider.node().MaterialSlider.change(0); // wrap at right end
+            }
+        });
+        this.slider.attr("max", this.netVisualizer.getSteps() - 1);
+        this.slider.node().addEventListener("input", function() { self.netVisualizer.showStep(self.value); });
+        this.button.node().addEventListener("click", function toggle() {
+            if (self.button.attr("data-pressed") != "true") {
+                var step = self.slider.node().value;
+                self.netVisualizer.animate(15, 10, step);
+                self.button.attr("data-pressed", "true");
+                self.button.select(".play").style("display", "none");
+                self.button.select(".pause").style("display", "");
+            } else {
+                self.netVisualizer.stopAnimation();
                 self.button.attr("data-pressed", "false");
                 self.button.select(".play").style("display", "");
                 self.button.select(".pause").style("display", "none");
-                if (self.slider.node().value >= self.slider.node().max * 0.95) {
-                    self.slider.node().MaterialSlider.change(0); // wrap at right end
-                }
-            });
-            self.slider.attr("max", self.netVisualizer.getSteps() - 1);
-            self.slider.node().addEventListener("input", function() { self.netVisualizer.showStep(this.value); });
-            self.button.node().addEventListener("click", function toggle() {
-                if (self.button.attr("data-pressed") != "true") {
-                    var step = self.slider.node().value;
-                    self.netVisualizer.animate(15, 10, step);
-                    self.button.attr("data-pressed", "true");
-                    self.button.select(".play").style("display", "none");
-                    self.button.select(".pause").style("display", "");
-                } else {
-                    self.netVisualizer.stopAnimation();
-                    self.button.attr("data-pressed", "false");
-                    self.button.select(".play").style("display", "");
-                    self.button.select(".pause").style("display", "none");
-                }
-            });
-            self.ready = true;
-            callback();
-            self.readyHooks.forEach(function(hook) { hook(); });
+            }
         });
+        this.ready = true;
+        callback();
+        this.readyHooks.forEach(function(hook) { hook(); });
     };
 
     WeightVisWrapper.prototype.afterLoad = function(cb) {
@@ -160,6 +173,7 @@ var WeightVisWrapper = (function() {
 })();
 
 /* helps with impress.js' stepenter/stepleave events */
+// TODO move into its own file
 var VisIntegrater = (function() {
     function VisIntegrater(enterCb, leaveCb, selector) {
         var self = this;