[jira] [Created] (ZEPPELIN-3495) CSS In Notebooks Causes Other Notebooks To Lose Their Output Graphics

[Albert Chan (JIRA)]

Albert Chan created ZEPPELIN-3495:
-------------------------------------

             Summary: CSS In Notebooks Causes Other Notebooks To Lose Their 
Output Graphics
                 Key: ZEPPELIN-3495
                 URL: https://issues.apache.org/jira/browse/ZEPPELIN-3495
             Project: Zeppelin
          Issue Type: Bug
          Components: GUI
    Affects Versions: 0.7.3
            Reporter: Albert Chan
         Attachments: Empty-Outputs.png

When I run an %angular paragraph with a style section, it causes other notebook 
books to lose their Output Graphics.  For example the Zeppelin Tutorial/Basic 
Features (Spark) notebooks now has an empty bar chart.  See the attached print 
screen.  The code is for a d3 scroll bar and is below.  I run it and it messes 
up all other notebooks:

%angular
<meta charset="utf-8">
<style>

.ticks {
 font: 10px sans-serif;
 }

.track,
 .track-inset,
 .track-overlay {
 stroke-linecap: round;
 }

.track {
 stroke: #000;
 stroke-opacity: 0.3;
 stroke-width: 10px;
 }

.track-inset {
 stroke: #ddd;
 stroke-width: 8px;
 }

.track-overlay {
 pointer-events: stroke;
 stroke-width: 50px;
 cursor: crosshair;
 }

.handle {
 fill: #fff;
 stroke: #000;
 stroke-opacity: 0.5;
 stroke-width: 1.25px;
 }

</style>
<div>
 <svg width="960" height="500"></svg>
<div/>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
 function useD3() {

var svg = d3.select("svg"),
 margin = \{right: 50, left: 50},
 width = +svg.attr("width") - margin.left - margin.right,
 height = +svg.attr("height");

var hueActual = 0,
 hueTarget = 70,
 hueAlpha = 0.2,
 hueTimer = d3.timer(hueTween);

var xSlider = d3.scaleLinear()
 .domain([0, 180])
 .range([0, width])
 .clamp(true);

var slider = svg.append("g")
 .attr("class", "slider")
 .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");

slider.append("line")
 .attr("class", "track")
 .attr("x1", xSlider.range()[0])
 .attr("x2", xSlider.range()[1])
 .select(function() \{ return 
this.parentNode.appendChild(this.cloneNode(true)); })
 .attr("class", "track-inset")
 .select(function() \{ return 
this.parentNode.appendChild(this.cloneNode(true)); })
 .attr("class", "track-overlay")
 .call(d3.drag()
 .on("start.interrupt", function() \{ slider.interrupt(); })
 .on("start drag", function() \{ hue(xSlider.invert(d3.event.x)); }));

slider.insert("g", ".track-overlay")
 .attr("class", "ticks")
 .attr("transform", "translate(0," + 18 + ")")
 .selectAll("text")
 .data(xSlider.ticks(10))
 .enter().append("text")
 .attr("x", xSlider)
 .attr("text-anchor", "middle")
 .text(function(d) \{ return d + "°"; });

var handle = slider.insert("circle", ".track-overlay")
 .attr("class", "handle")
 .attr("r", 9);

function hue(h) {
 hueTarget = h;
 hueTimer.restart(hueTween);
 }

function hueTween() {
 var hueError = hueTarget - hueActual;
 if (Math.abs(hueError) < 1e-3) hueActual = hueTarget, hueTimer.stop();
 else hueActual += hueError * hueAlpha;
 handle.attr("cx", xSlider(hueActual));
 svg.style("background-color", d3.hsl(hueActual, 0.8, 0.8));
 }
 }

if (window.d3) {
 useD3();
 } else {
 var sc = document.createElement('script');
 sc.type = 'text/javascript';
 sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js';
 sc.onload = useD3;
 sc.onerror = function(err) \{ alert(err); }
 document.getElementsByTagName('head')[0].appendChild(sc);
 }
</script>



--
This message was sent by Atlassian JIRA
(v7.6.3#76005)