Add Snapsvg (from Compose.jl) to svgwriter

src/ProfileView.jl

@@ -252,10 +252,10 @@ function writemime(f::IO, ::MIME"image/svg+xml", pd::ProfileData)
         red = iround(255*rgb.r)
         green = iround(255*rgb.g)
         blue = iround(255*rgb.b)
-        print(f, """<rect x="$xstart" y="$y" width="$width" height="$ystep" fill="rgb($red,$green,$blue)" rx="2" ry="2" onmouseover="s('$info')" onmouseout="c()"/>""")
-        if shortinfo != ""
-            println(f, """\n<text text-anchor="" x="$(xstart+4)" y="$(y+11.5)" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" onmouseover="s('$info')" onmouseout="c()">\n$shortinfo\n</text>""")
-        end
+        print(f, """<rect x="$xstart" y="$y" width="$width" height="$ystep" fill="rgb($red,$green,$blue)" rx="2" ry="2" data-info="$info"/>\n""")
+        #if shortinfo != ""
+        println(f, """\n<text text-anchor="" x="$(xstart+4)" y="$(y+11.5)" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" data-shortinfo="$shortinfo" onmouseover="s('$info')" onmouseout="c()"></text>""")
+        # end
     end
 
     svgheader(f, width=width, height=height)
@@ -295,7 +295,10 @@ function writemime(f::IO, ::MIME"image/svg+xml", pd::ProfileData)
             prevtag = tag
         end
     end
-    println(f, "\n</svg>")
+    print(f, """
+        </g></g>
+    </svg>
+    """)
 end
 
 function buildtags!(rowtags, parent, level)

src/svgwriter.jl

@@ -1,4 +1,11 @@
+const snapsvgjs = Pkg.dir("ProfileView", "templates", "snap.svg-min.js")
+
+function escape_script(js::String)
+    return replace(js, "]]", "] ]")
+end
+
 function svgheader(f::IO; width=1200, height=706, font="Verdana")
+
     y_msg = height - 17
     print(f, """<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -8,11 +15,14 @@ function svgheader(f::IO; width=1200, height=706, font="Verdana")
         <stop stop-color="#eeeeee" offset="5%" />
         <stop stop-color="#eeeeb0" offset="95%" />
     </linearGradient>
+    <rect id="clip-rect" x="0" y="0" width="250mm" height="80mm" />
 </defs>
 <style type="text/css">
     rect[rx]:hover { stroke:black; stroke-width:1; }
     text:hover { stroke:black; stroke-width:1; stroke-opacity:0.35; }
 </style>
+<script> <![CDATA[$(escape_script(readall(snapsvgjs)))
+]]> </script>
 <script type="text/ecmascript">
 <![CDATA[
     var details;
@@ -21,7 +31,9 @@ function svgheader(f::IO; width=1200, height=706, font="Verdana")
     function c() { details.nodeValue = ' '; }
 ]]>
 </script>
+<g id="frame" clip-path="url(#image-frame)">
 <rect x="0.0" y="0" width="$(width).0" height="$(height).0" fill="url(#background)"  />
+<g id="viewport" transform="scale(1)">
 <text text-anchor="middle" x="600" y="24" font-size="17" font-family="$(font)" fill="rgb(0,0,0)"  >Profile results</text>
 <text text-anchor="left" x="10" y="$y_msg" font-size="12" font-family="$(font)" fill="rgb(0,0,0)"  >Function:</text>
 <text text-anchor="" x="70" y="$y_msg" font-size="12" font-family="$(font)" fill="rgb(0,0,0)" id="details" > </text>