From 4ebfabd791dab16f0f6d5deaaa6247fb91570ce6 Mon Sep 17 00:00:00 2001
From: Eric Wieser <wieser.eric@gmail.com>
Date: Thu, 31 Oct 2019 15:06:19 +0000
Subject: [PATCH] Fix incorrect placements of plots

The `element` variable is reassigned on every cell - so any asynchronous code will claim the wrong value.

Fixes gh-34
---
 pyganja/script_api.py | 71 ++++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/pyganja/script_api.py b/pyganja/script_api.py
index 7014e7c..f07d9eb 100644
--- a/pyganja/script_api.py
+++ b/pyganja/script_api.py
@@ -67,40 +67,43 @@ def generate_notebook_js(script_json, sig=None, grid=True, scale=1.0, gl=True):
         )
         js = read_ganja()
         js += """
-        requirejs(['Algebra'], function(Algebra) {
-            var opts = """ + json.dumps(opts) + """;  // injected from python
-            var output = Algebra({p: opts.p, q: opts.q, r: opts.r, baseType: Float64Array}).inline((opts)=>{
-                var data = """ + script_json + """;  // injected from python
-
-                // When we get a file, we load and display.
-                var canvas;
-                var h=0, p=0;
-                // convert arrays of floats back to CGA elements.
-                data = data.map(x=>x.length==opts.mv_length?new Element(x):x);
-                // add the graph to the page.
-                canvas = this.graph(data, {gl: opts.gl, conformal: opts.conformal, grid: opts.grid, scale: opts.scale, useUnnaturalLineDisplayForPointPairs: true});
-                canvas.options.h = h; canvas.options.p = p;
-                // make it big.
-                canvas.style.width = '100%';
-                canvas.style.height = '50vh';
-                return canvas;
-            })(opts);
-            element.append(output);
-
-            var a = document.createElement("button");
-            var t = document.createTextNode("\N{FLOPPY DISK} Save");
-            a.appendChild(t);
-            function screenshot(){
-                //output.width = 1920;  output.height = 1080;
-                output.update(output.value);
-                output.toBlob(function(blob) {
-                    var url = URL.createObjectURL(blob);
-                    window.open(url, '_blank');
-                });
-            }
-            a.onclick = screenshot
-            var butnelem = element.append(a);
-        });
+        // take a closure on element before the next cell replaces it
+        (function(element) {
+            requirejs(['Algebra'], function(Algebra) {
+                var opts = """ + json.dumps(opts) + """;  // injected from python
+                var output = Algebra({p: opts.p, q: opts.q, r: opts.r, baseType: Float64Array}).inline((opts)=>{
+                    var data = """ + script_json + """;  // injected from python
+
+                    // When we get a file, we load and display.
+                    var canvas;
+                    var h=0, p=0;
+                    // convert arrays of floats back to CGA elements.
+                    data = data.map(x=>x.length==opts.mv_length?new Element(x):x);
+                    // add the graph to the page.
+                    canvas = this.graph(data, {gl: opts.gl, conformal: opts.conformal, grid: opts.grid, scale: opts.scale, useUnnaturalLineDisplayForPointPairs: true});
+                    canvas.options.h = h; canvas.options.p = p;
+                    // make it big.
+                    canvas.style.width = '100%';
+                    canvas.style.height = '50vh';
+                    return canvas;
+                })(opts);
+                element.append(output);
+
+                var a = document.createElement("button");
+                var t = document.createTextNode("\N{FLOPPY DISK} Save");
+                a.appendChild(t);
+                function screenshot(){
+                    //output.width = 1920;  output.height = 1080;
+                    output.update(output.value);
+                    output.toBlob(function(blob) {
+                        var url = URL.createObjectURL(blob);
+                        window.open(url, '_blank');
+                    });
+                }
+                a.onclick = screenshot
+                var butnelem = element.append(a);
+            });
+        })(element);
         """
     else:
         raise ValueError('Algebra not yet supported')