s3u · June 8, 2012 20:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://ql.io/scripts/jquery-min.js"></script>
    <script type="text/javascript" src="http://ql.io/scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ql.io/scripts/compiler.js"></script>
    <script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
    <script type="text/javascript" src="http://ql.io/scripts/qlio-editor.js"></script>

    <link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
    <style type="text/css">

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
            color: #333333;
        }

        .util-links {
            padding: 10px 10px;
            text-align: right;
        }

        a.button, div.button {
            color: #6e6e6e;
            font: bold 12px Helvetica, Arial, sans-serif;
            text-decoration: none;
            padding: 7px 12px;
            position: relative;
            display: inline-block;
            text-shadow: 0 1px 0 #fff;
            -webkit-transition: border-color .218s;
            -moz-transition: border .218s;
            -o-transition: border-color .218s;
            transition: border-color .218s;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
            background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
            border: solid 1px #dcdcdc;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

        a.button:hover {
            color: #333;
            border-color: #999;
            -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        a.button:active {
            color: #000;
            border-color: #444;
        }

        textarea#script {
            margin: 1em;
            width: 80%;
            background-color: #f8f8ff;
            padding: 10px 10px;
            height: 2em;
            white-space: pre;
        }
        .CodeMirror-scroll {
          width: 100%
        }

        .CodeMirror {
            border: 2px solid #dcdcdc;
        }

        div#dot {
            margin: 2em;
            padding: 1em;
            border: 1px;
        }
    </style>
 </head>
 <body>

 <div id="top">
    <h2>Execution Plan</h2>
    <textarea id="script">
    </textarea>
    <div class="util-links" id="util-links">
        <a href="#" class="button" onclick="generate()">generate</a>
    </div>
 </div>

 <div id="dot">

 </div>

 <script type="text/javascript">

    editor = CodeMirror.fromTextArea(document.getElementById('script'), {
        lineNumbers: true,
        matchBrackets: true,
        indentUnit: 4,
        mode: "text/x-qlio",
        lineWrapping: true
    });

    var compiler = require('ql.io-compiler');

    function generate() {
        var script = editor.getValue();
        var dot = 'digraph G {';
        var plan = compiler.compile(script);

        function walk(node) {
            if(node.dependsOn) {
                node.dependsOn.forEach(function(child) {
                    dot = dot + '"' + stringify(node) + '" -> "' + stringify(child) + '"';
                    walk(child);
                });
            }
            if(node.rhs) {
                dot = dot + '"' + stringify(node) + '" -> "' + stringify(node.rhs) + '"';
                walk(node.rhs);
            }
            if(node.fallback) {
                dot = dot + '"' + stringify(node) + '" -> "' + stringify(node.fallback) + '"';
                walk(node.fallback);
            }
        }

        walk(plan);
        dot = dot + '}';
        document.getElementById('dot').innerHTML = dot;
    }

    function stringify(node) {
        var str = '[' + node.line + ']';
        if(node.assign) {
            str = str + ' ' + node.assign + ' = ';
        }
        switch(node.type) {
            case 'create' :
                str = str + ' create ' + node.name;
                break;
            case 'select' :
                str = str + ' select from';
                node.fromClause.forEach(function(from) {
                    str = str + ' ' + from.name;
                });
                if(node.joiner) {
                    node.joiner.fromClause.forEach(function(from) {
                        str = str + ' ' + from.name;
                    });
                }
                break;
            case 'define' :
                str = str + ' [Object]';
                break;
            case 'return' :
                str = str + ' return';
                break;
        }
        return str;
    }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="http://ql.io/scripts/jquery-min.js"></script>
	<script type="text/javascript" src="http://ql.io/scripts/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://ql.io/scripts/compiler.js"></script>
	<script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
	<script type="text/javascript" src="http://ql.io/scripts/qlio-editor.js"></script>

	<link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
	<style type="text/css">

	html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
	color: #333333;
	}

	.util-links {
	padding: 10px 10px;
	text-align: right;
	}

	a.button, div.button {
	color: #6e6e6e;
	font: bold 12px Helvetica, Arial, sans-serif;
	text-decoration: none;
	padding: 7px 12px;
	position: relative;
	display: inline-block;
	text-shadow: 0 1px 0 #fff;
	-webkit-transition: border-color .218s;
	-moz-transition: border .218s;
	-o-transition: border-color .218s;
	transition: border-color .218s;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
	background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
	border: solid 1px #dcdcdc;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

	a.button:hover {
	color: #333;
	border-color: #999;
	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	}

	a.button:active {
	color: #000;
	border-color: #444;
	}

	textarea#script {
	margin: 1em;
	width: 80%;
	background-color: #f8f8ff;
	padding: 10px 10px;
	height: 2em;
	white-space: pre;
	}
	.CodeMirror-scroll {
	width: 100%
	}

	.CodeMirror {
	border: 2px solid #dcdcdc;
	}

	div#dot {
	margin: 2em;
	padding: 1em;
	border: 1px;
	}
	</style>
	</head>
	<body>

	<div id="top">
	<h2>Execution Plan</h2>
	<textarea id="script">
	</textarea>
	<div class="util-links" id="util-links">
	<a href="#" class="button" onclick="generate()">generate</a>
	</div>
	</div>

	<div id="dot">

	</div>

	<script type="text/javascript">

	editor = CodeMirror.fromTextArea(document.getElementById('script'), {
	lineNumbers: true,
	matchBrackets: true,
	indentUnit: 4,
	mode: "text/x-qlio",
	lineWrapping: true
	});

	var compiler = require('ql.io-compiler');

	function generate() {
	var script = editor.getValue();
	var dot = 'digraph G {';
	var plan = compiler.compile(script);

	function walk(node) {
	if(node.dependsOn) {
	node.dependsOn.forEach(function(child) {
	dot = dot + '"' + stringify(node) + '" -> "' + stringify(child) + '"';
	walk(child);
	});
	}
	if(node.rhs) {
	dot = dot + '"' + stringify(node) + '" -> "' + stringify(node.rhs) + '"';
	walk(node.rhs);
	}
	if(node.fallback) {
	dot = dot + '"' + stringify(node) + '" -> "' + stringify(node.fallback) + '"';
	walk(node.fallback);
	}
	}

	walk(plan);
	dot = dot + '}';
	document.getElementById('dot').innerHTML = dot;
	}

	function stringify(node) {
	var str = '[' + node.line + ']';
	if(node.assign) {
	str = str + ' ' + node.assign + ' = ';
	}
	switch(node.type) {
	case 'create' :
	str = str + ' create ' + node.name;
	break;
	case 'select' :
	str = str + ' select from';
	node.fromClause.forEach(function(from) {
	str = str + ' ' + from.name;
	});
	if(node.joiner) {
	node.joiner.fromClause.forEach(function(from) {
	str = str + ' ' + from.name;
	});
	}
	break;
	case 'define' :
	str = str + ' [Object]';
	break;
	case 'return' :
	str = str + ' return';
	break;
	}
	return str;
	}

	</script>
	</body>
	</html>