Update menu bar

93fd1955 · Christof Angermueller · e7750bc4 · 93fd1955 · 93fd1955 · 93fd1955
--- a/theano/d3viz/css/d3viz.css
+++ b/theano/d3viz/css/d3viz.css
@@ -4,7 +4,15 @@ svg {
 	display:block;
 	position: fixed;
 	border: 0px solid black;
-	top:5%; left:0%; right:0% bottom=10%
+	top: 32px; left:0%; right:0% bottom=0%
+}
+
+.menuBar {
+	border-bottom: 1px solid black;
+	height: 22px;
+}
+
+input.menuBar {
 }

 .nodeRect {

--- a/theano/d3viz/formatting.py
+++ b/theano/d3viz/formatting.py
@@ -34,6 +34,11 @@ class PyDotFormatter(object):
        :param compact: if True, will remove intermediate variables without
                        name.
        """
+
+        if not pydot_imported:
+            raise RuntimeError("Failed to import pydot. You must install pydot"
+                               " for `pydotprint` to work.")
+
        self.compact = compact
        self.node_colors = {'input': 'limegreen',
                            'constant_input': 'SpringGreen',
@@ -106,9 +111,6 @@ class PyDotFormatter(object):
                                    outputs=fct)
            outputs = fct.outputs
            topo = fct.toposort()
-        if not pydot_imported:
-            raise RuntimeError("Failed to import pydot. You must install pydot"
-                               " for `pydotprint` to work.")
        outputs = list(outputs)

        # Loop over apply nodes

--- a/theano/d3viz/html/template.html
+++ b/theano/d3viz/html/template.html
@@ -10,20 +10,20 @@
 	<script type='text/javascript' src="%% JS_DIR %%/d3-context-menu.js"></script>
 </head>
 <body>
-	<div id='menu'>
+	<div id='menu' class='menuBar'>
 	    <input name="resetNodes" 
 	           type="button" 
-	           value="Reset nodes" 
+	           value="Reset nodes"
 	           onclick="resetNodes()"/>
 	    <input name="releaseNodes" 
 	           type="button" 
-	           value="Release nodes" 
+	           value="Release nodes"
 	           onclick="releaseNodes()"/>
 	</div>

 	<script type="text/javascript">
 		// Path to DOT file
-		var path = '%% DOT_FILE %%';
+		var path = '%% DOT_FILE %%'; // '%% DOT_FILE %%';
 		// Backend graph in DOT format
 		var dotGraph;
 		// Frontend graph for visualization

--- a/theano/d3viz/js/d3viz.js
+++ b/theano/d3viz/js/d3viz.js
@@ -424,13 +424,13 @@ function drawConvexHull(d) {
 * Positions will be updated by updateGraph().
 */
 function drawGraph() {
+	d3.select('body').select('#menu').select('#toggleColors').remove();
 	if (isProfiled) {
 		d3.select('body').select('#menu').append('input')
-			.attr('name', 'tColors')
+			.attr('id', 'toggleColors')
 			.attr('type', 'button')
 			.attr('value', 'Toggle profile colors')
 			.attr('onclick', "toggleNodeColors()");
-			
 		maxProfilePer = 0;
 		for (i in graph.nodes) {
 			var p = graph.nodes[i].value.profile;
@@ -601,11 +601,9 @@ function drawGraph() {
 		.nodes(graph.nodes)
 		.links(graph.edges)
 		.size(graph.size)
-		.linkDistance(function(d) {
-			return 300;
-		})
-		.charge(-600)
-		.linkStrength(1)
+		.linkDistance(200)
+		.charge(-1000)
+		.linkStrength(0.2)
 		.gravity(0.05)
 		.friction(0.5)
 		.on('tick', updateGraph)