BUG: html renderer: support multiple views in JupyterLab

vega · Feb 25, 2020 · 1b61fcc · 1b61fcc
1 parent 880837d
commit 1b61fcc
Showing 1 changed file with 14 additions and 8 deletions.
diff --git 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>
 """)