d3viz: fix escaping of dot graph. Fixes GH-4510.

theano/d3viz/d3viz.py

@@ -5,8 +5,8 @@ Author: Christof Angermueller <cangermueller@gmail.com>
 from __future__ import absolute_import, print_function, division
 
 import os
+import json
 import shutil
-import re
 import six
 from six import iteritems
 
@@ -31,16 +31,15 @@ def replace_patterns(x, replace):
     return x
 
 
-def escape_quotes(s):
-    """Escape quotes in string.
+def safe_json(obj):
+    """Encode `obj` to JSON so that it can be embedded safely inside HTML.
 
     Parameters
     ----------
-    s : str
-        String on which function is applied
+    obj : object
+        object to serialize
     """
-    s = re.sub(r'''(['"])''', r'\\\1', s)
-    return s
+    return json.dumps(obj).replace('<', '\\u003c')
 
 
 def d3viz(fct, outfile, copy_deps=True, *args, **kwargs):
@@ -79,10 +78,9 @@ def d3viz(fct, outfile, copy_deps=True, *args, **kwargs):
     # Create DOT graph
     formatter = PyDotFormatter(*args, **kwargs)
     graph = formatter(fct)
-    dot_graph_raw = graph.create_dot()
+    dot_graph = graph.create_dot()
     if not six.PY2:
-        dot_graph_raw = dot_graph_raw.decode('utf8')
-    dot_graph = escape_quotes(dot_graph_raw).replace('\n', '').replace('\r', '')
+        dot_graph = dot_graph.decode('utf8')
 
     # Create output directory if not existing
     outdir = os.path.dirname(outfile)
@@ -109,7 +107,7 @@ def d3viz(fct, outfile, copy_deps=True, *args, **kwargs):
     replace = {
         '%% JS_DIR %%': os.path.join(dst_deps, 'js'),
         '%% CSS_DIR %%': os.path.join(dst_deps, 'css'),
-        '%% DOT_GRAPH %%': dot_graph,
+        '%% DOT_GRAPH %%': safe_json(dot_graph),
     }
     html = replace_patterns(template, replace)
 

theano/d3viz/html/template.html

@@ -23,7 +23,7 @@
 
 	<script type="text/javascript">
 		// Backend graph in DOT format
-		var dotGraph = graphlibDot.read("%% DOT_GRAPH %%");
+		var dotGraph = graphlibDot.read(%% DOT_GRAPH %%);
 		// Frontend graph for visualization
 		var graph = {};