Improve text display (#28)

This fixes the following problems
- < and so on are not unescaped
- No text is displayed when the script is disabled
- The path separator depends on the local OS
- Saving both the full and short info in an SVG file is wasteful

Project.toml

@@ -1,6 +1,6 @@
 name = "ProfileSVG"
 uuid = "132c30aa-f267-4189-9183-c8a63c7e05e6"
-version = "0.1.1"
+version = "0.1.2"
 
 [deps]
 Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"

src/ProfileSVG.jl

@@ -87,11 +87,22 @@ function Base.show(io::IO, ::MIME"image/svg+xml", fg::FGConfig)
 
     function flamerects(fcolor, io::IO, g, j, nextidx)
         ndata = g.data
+        sf = ndata.sf
         thiscolor = fcolor(nextidx, j, ndata)
         x = (first(ndata.span)-1) * xstep + leftmargin
         y = height - j*ystep - botmargin
         w = length(ndata.span) * xstep
-        write_svgflamerect(io, x, y, w, ystep, ndata.sf, thiscolor)
+        file = string(sf.file)
+        m = match(r"[^\\/]+$", file)
+        if m !== nothing
+            dirinfo = SubString(file, firstindex(file), m.offset - 1)
+            basename = m.match
+        else
+            dirinfo = ""
+            basename = file
+        end
+        shortinfo = "$(sf.func) in $basename:$(sf.line)"
+        write_svgflamerect(io, x, y, w, ystep, shortinfo, dirinfo, thiscolor)
 
         for c in g
             flamerects(fcolor, io, c, j+1, nextidx)

src/svgwriter.jl

@@ -78,16 +78,17 @@ function write_svgheader(io::IO, fig_id, width, height, font, fontsize)
         """)
 end
 
-function write_svgflamerect(io::IO, xstart, ystart, w, h, sf::StackFrame, color)
+function write_svgflamerect(io::IO, xstart, ystart, w, h, shortinfo, dirinfo, color)
     x = simplify(xstart)
     y = simplify(ystart)
     yt = simplify(y + 11.5) # FIXME
     width = simplify(w)
     height = simplify(h)
-    info = escape_html("$(sf.func) in $(sf.file):$(sf.line)")
-    shortinfo = escape_html("$(sf.func) in $(basename(string(sf.file))):$(sf.line)")
-    println(io, """<rect x="$x" y="$y" width="$width" height="$height" fill="#$(hex(color))" rx="2" ry="2" data-shortinfo="$shortinfo" data-info="$info"/>""")
-    println(io, """<text x="$x" dx="4" y="$yt"></text>""")
+    sinfo = escape_html(shortinfo)
+    dinfo = escape_html(dirinfo)
+    println(io, """<rect x="$x" y="$y" width="$width" height="$height" fill="#$(hex(color))" """,
+                """rx="2" ry="2" data-dinfo="$dinfo"/>""")
+    println(io, """<text x="$x" dx="4" y="$yt">$sinfo</text>""")
 end
 
 function write_svgfooter(io::IO, fig_id)

src/viewer.js

@@ -55,6 +55,13 @@
         return text;
     };
 
+    var unescapeHtml = function (str) {
+        return str
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&amp;/g, '&');
+    };
+
     // Shift the view port to center on xc, then scale in the x direction
     ProfileSVG.moveAndZoom = function (xc, xs, xScale, fig, deltaT) {
         if (typeof deltaT === 'undefined') {
@@ -176,7 +183,12 @@
             var text = rect.nextElementSibling;
             var details = document.getElementById(fig.id + '-details');
             text.style.strokeWidth = '1';
-            details.textContent = rect.getAttribute("data-info");
+            var sinfo = rect.getAttribute('data-shortinfo');
+            var dir = rect.getAttribute('data-dinfo');
+            var i = sinfo.indexOf(' in ');
+            var func = sinfo.slice(0, i + 4);
+            var file = sinfo.slice(i + 4);
+            details.textContent = func + dir + file;
             details.style.display = 'inherit';
         };
         var rectMouseOutHandler = function (e) {
@@ -187,10 +199,15 @@
             details.style.display = 'none';
         };
 
-        fig.viewport.selectAll('rect').forEach(function (rect) {
-            rect.node.addEventListener('dblclick', rectDblClickHandler, false);
-            rect.node.addEventListener('mouseover', rectMouseOverHandler, false);
-            rect.node.addEventListener('mouseout', rectMouseOutHandler, false);
+        fig.viewport.selectAll('rect').forEach(function (r) {
+            var rect = r.node;
+            var text = rect.nextElementSibling;
+            rect.setAttribute('data-shortinfo', unescapeHtml(text.textContent));
+            var dir = unescapeHtml(rect.getAttribute('data-dinfo'));
+            rect.setAttribute('data-dinfo', dir);
+            rect.addEventListener('dblclick', rectDblClickHandler, false);
+            rect.addEventListener('mouseover', rectMouseOverHandler, false);
+            rect.addEventListener('mouseout', rectMouseOutHandler, false);
         });
 
         svg.selectAll('.pvbackground').forEach(function (bg) {