From 1b61fccf846d055eacb0f84ede7f6d182c4f12b7 Mon Sep 17 00:00:00 2001
From: Jake VanderPlas <jakevdp@google.com>
Date: Mon, 24 Feb 2020 20:15:55 -0800
Subject: [PATCH] BUG: html renderer: support multiple views in JupyterLab

---
 altair/utils/html.py | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/altair/utils/html.py b/altair/utils/html.py
index 39699c13f3..d480cd6f72 100644
--- a/altair/utils/html.py
+++ b/altair/utils/html.py
@@ -82,17 +82,22 @@
 
 
 HTML_TEMPLATE_UNIVERSAL = jinja2.Template("""
-<div id="{{ output_div }}"></div>
-<script type="text/javascript">
+<div id="{{ output_div }}">
+ <script type="text/javascript">
   (function(spec, embedOpt){
-    const outputDiv = document.getElementById("{{ output_div }}");
+    // In JupyterLab, we need to get the output div directly.
+    let outputDiv = document.currentScript.parentNode;
+    // In Jupyter notebook, script parent is <head>, so get div by id.
+    if (outputDiv.id !== "{{ output_div }}") {
+      outputDiv = document.getElementById("{{ output_div }}");
+    }
     const paths = {
       "vega": "{{ base_url }}/vega@{{ vega_version }}?noext",
       "vega-lib": "{{ base_url }}/vega-lib?noext",
       "vega-lite": "{{ base_url }}/vega-lite@{{ vegalite_version }}?noext",
       "vega-embed": "{{ base_url }}/vega-embed@{{ vegaembed_version }}?noext",
     };
-
+  
     function loadScript(lib) {
       return new Promise(function(resolve, reject) {
         var s = document.createElement('script');
@@ -103,17 +108,17 @@
         document.getElementsByTagName("head")[0].appendChild(s);
       });
     }
-
+  
     function showError(err) {
       outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
       throw err;
     }
-
+  
     function displayChart(vegaEmbed) {
       vegaEmbed(outputDiv, spec, embedOpt)
         .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
     }
-
+  
     if(typeof define === "function" && define.amd) {
       requirejs.config({paths});
       require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
@@ -127,7 +132,8 @@
         .then(() => displayChart(vegaEmbed));
     }
   })({{ spec }}, {{ embed_options }});
-</script>
+ </script>
+</div>
 """)
 
 
