quodatum/graphxq
1
0
Fork 0
mirror of https://github.com/Quodatum/graphxq.git synced 2025-04-11 11:42:24 +01:00
Code Issues Projects Releases Wiki Activity

ace start

Browse source
This commit is contained in:
Andy Bunce 2013-01-24 23:38:45 +00:00
parent 51738f4631
commit 5c27003889
15 changed files with 192 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/graphxq/app.js
View file

@ -1,73 +1,47 @@
// common app js
// sidebar
// http://stackoverflow.com/questions/4583703/jquery-post-request-not-ajax
jQuery(function($) { $.extend({
form: function(url, data, method) {
if (method == null) method = 'POST';
if (data == null) data = {};
var form = $('<form>').attr({
method: method,
action: url
}).css({
display: 'none'
});
var addData = function(name, data) {
if ($.isArray(data)) {
for (var i = 0; i < data.length; i++) {
var value = data[i];
addData(name + '[]', value);
}
} else if (typeof data === 'object') {
for (var key in data) {
if (data.hasOwnProperty(key)) {
addData(name + '[' + key + ']', data[key]);
}
}
} else if (data != null) {
form.append($('<input>').attr({
type: 'hidden',
name: String(name),
value: String(data)
}));
}
};
for (var key in data) {
if (data.hasOwnProperty(key)) {
addData(key, data[key]);
}
}
return form.appendTo('body');
}
}); });
$(function(){
$('a[data-action="lDom"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
$("#rightPane").removeAttr('class').css("display","none");
});
$('a[data-action="equality"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span6");
$("#rightPane").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="rDom"]').click(function (){
$("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
$("#leftPane").removeAttr('class').css("display","none");
});
});
function throttle(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
$(document).ready(function(){
if($("#editForm").length)setupEdit()
});
function setupEdit(){
// toolbar buttons
$('a[data-action="lDom"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
$("#rightPane").removeAttr('class').css("display","none");
});
$('a[data-action="equality"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span6");
$("#rightPane").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="rDom"]').click(function (){
$("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
$("#leftPane").removeAttr('class').css("display","none");
});
var sub=function(download){
$('input[name=dl]').attr('checked', download);
$("#editForm").submit();
};
$("#bnup").on("click",getsvg);
$("#bnsvg").on("click",function(){ $("#editForm").submit()});
$("#bndn").on("click",function(){getsvg(true)});
$("#dot").on("keyup",getsvg);
$("#bnxml").on("click",function(){$("#svgdiv,#svgsrc").toggle()});
$("#bnsvg").on("click",function(){sub(false)});
$("#bndn").on("click",function(){sub(true)});
$("#dot").on("keyup",throttle(getsvg,300));
$("#bnxml").on("click",function(){
$("#svgdiv,#svgsrc").toggle()
});
$("#bnclear").on("click",function(){
$("#dot").val("digraph title {\n\n}")
});
var resize=function(){
var h=$(window).height();
$('.extend').each(function(){
@ -77,14 +51,13 @@ $(document).ready(function(){
});
};
$(window).resize(resize);
resize();
});
resize();
getsvg()
};
function getsvg(dl){
function getsvg(){
var f=$("#editForm").serializeArray()
//var d=$("#frm-defaults").serializeArray()
//console.log("#frm-default",d)
// if(dl)f.push({"name":"dl","value":1})
var d0=+new Date()
$.ajax({
type:"POST",
url:$("#editForm").attr("action"),
@ -92,6 +65,8 @@ function getsvg(dl){
dataType: "text",
success: function(str){
// console.log(data)
var d=(new Date())-d0;
console.log("svg time:",d);
var oParser = new DOMParser();
var data = oParser.parseFromString(str, "text/xml");
// http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file

6
src/graphxq/data/library.xml
View file

@ -2,22 +2,26 @@
<item>
<title>Process</title>
<url type="dot">samples/dot/process.gv</url>
(dot)
<description>parallel process sequence</description>
</item>
<item>
<title>Unix</title>
<url type="dot">samples/dot/unix.gv</url>
<description>Evolution of UNIX.</description>
</item>
<item>
<title>Root</title>
<url type="dot">samples/dot/root.gv</url>
<description>Very large and slow.</description>
</item>
<item>
<title>Sample</title>
<url type="dotml">samples/dotml/sample1.xml</url>
<description>State machine.</description>
</item>
<item>
<title>Cluster</title>
<url type="dotml">samples/dotml/cluster.xml</url>
<description>Simple cluster.</description>
</item>
</items>

BIN
src/graphxq/data/state.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/graphxq/data/state.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

12
src/graphxq/diag-xqdoc.xq Normal file
View file

@ -0,0 +1,12 @@
declare namespace doc="http://www.xqdoc.org/1.0";
declare namespace dotml="http://www.martin-loetzsch.de/DOTML";
<dotml:graph file-name="graphs/bgcolor" rankdir="LR" bgcolor="#80FF80">
<dotml:cluster>
{for $f in //doc:function
return <dotml:node id="{generate-id($f)}" label="{$f/doc:name}" fillcolor="red" style="filled"/>,
for $v in //doc:variable
return <dotml:node id="{generate-id($v)}" label="{$v/doc:name}" fillcolor="green" style="filled"/>
}
</dotml:cluster>
</dotml:graph>

BIN
src/graphxq/dot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 880 B

64
src/graphxq/graphxq.xqm
View file

@ -41,16 +41,8 @@ declare
function graphxq-svg($dot,$url,$dl) {
let $dot2:=getdot($dot,$url)
let $svg:=dot2svg($dot2)
let $resp:=<rest:response>
<http:response>
<http:header name="Access-Control-Allow-Origin" value="*"/>
{if($dl)
then <http:header name="Content-Disposition" value='attachment;filename="graphxq.svg"'/>
else ()}
</http:response>
</rest:response>
return ($resp,$svg)
let $fname:=if($dl)then "dot.svg" else ()
return (headers($fname),$svg)
};
(:~
@ -102,13 +94,41 @@ function api(){
render("views/api.xml",map{"title":="API information"})
};
(:~ static ace page :)
declare
%rest:GET %rest:path("graphxq/ace")
%output:method("html") %output:version("5.0")
function ace(){
let $svgwidget:=fn:doc("views/widget.svg")
let $toolbar:=fn:doc("views/toolbar.xml")
let $v:=map{ "svgwidget":=$svgwidget,
"toolbar":=$toolbar,
"title":="DOTML editor",
"bodyclass":="h100",
"dotml":="gg"}
return render("views/ace.xml",$v)
};
(:~ js worker same origin : https://github.com/ajaxorg/ace/issues/1161 :)
declare
%rest:GET %rest:path("graphxq/ace/worker")
%rest:form-param("w","{$w}")
%output:media-type("application/javascript")
%output:method("text")
function ace-worker($w){
let $a:="https://raw.github.com/ajaxorg/ace-builds/master/src-min-noconflict" || $w
return http:send-request(<http:send-request method="GET"/>,$a)[2]
};
declare
%rest:GET %rest:path("graphxq/library")
%output:method("html") %output:version("5.0")
function library(){
let $lib:=fn:doc("data/library.xml")
let $map:=map{"title":="Samples",
"count":=fn:count($lib//item)}
"items":=$lib//items,
"url":=function($item){fn:concat($item/url/@type,'?src=',$item/url)}
}
return render("views/library.xml",$map)
};
@ -118,13 +138,13 @@ function library(){
declare
%rest:POST %rest:path("graphxq/api/dotml")
%rest:form-param("dotml","{$dotml}")
function api-dotml($dotml ) as node(){
%rest:form-param("dl","{$dl}")
function api-dotml($dotml,$dl ) {
let $dotml:=fn:parse-xml($dotml)
let $y:=fn:trace($dotml,"ff")
let $x:=dotml:generate($dotml)
let $svg:=dot2svg($x)
return $svg
let $svg:=dot2svg($x)
let $fname:=if($dl)then "dotml.svg" else ()
return (headers($fname),$svg)
};
(:~ if url is defined then treat as url and fetch else use dot :)
@ -147,7 +167,17 @@ declare %private function getdotml($dotml as node(),$url) as node(){
else
$dotml
};
(:~ CORS header with download option :)
declare function headers($attachment){
<rest:response>
<http:response>
<http:header name="Access-Control-Allow-Origin" value="*"/>
{if($attachment)
then <http:header name="Content-Disposition" value='attachment;filename="{$attachment}"'/>
else ()}
</http:response>
</rest:response>
};
(:~ Generate svg from dot :)
declare %private function dot2svg($dot as xs:string) as node(){
let $svgx:=gr:dot($dot,())

2
src/graphxq/lib/txq.xqm
View file

@ -42,6 +42,6 @@ declare function render($template as xs:string,$map as map(*),$layout as xs:stri
declare function partial($part as xs:string,$name,$seq,$map,$base){
for $s in $seq
let $map:=map:new(($map,map{$name:=$s}))
return render($map,fn:resolve-uri($part,$base))
return render(fn:resolve-uri($part,$base),$map)
};

31
src/graphxq/views/ace.xml Normal file
View file

@ -0,0 +1,31 @@
<div>
<div class="row-fluid" style="height:24px">
{$toolbar}
</div>
<div class="row-fluid">
<div class="span6 extend" id="leftPane">
<form id="editForm" action="svg" method="post" target="_new"
class="well ">
<div id="editor">function foo(items) {{
var x = "All this is syntax highlighted";
return x;
}}</div>
</form>
</div>
<div class="span6" id="rightPane">
<div id="svgdiv" class="extend"
style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
<pre style="display: none" id="svgsrc">(no svg loaded)</pre>
</div>
<script>
// https://github.com/ajaxorg/ace/issues/1161
ace.config.set("workerPath", "ace/worker?w=");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</div>
</div>

11
src/graphxq/views/dotform.xml
View file

@ -52,11 +52,7 @@ aria-labelledby="myModalLabel" aria-hidden="true">
class="well ">
<textarea id="dot" name="dot" rows="100"
style="width:90%;overflow:scroll">{$dot}</textarea>
<label class="checkbox">
<input name="dl" type="checkbox" />
Download
</label>
<input name="dl" type="checkbox" style="display:hidden"/>
</form>
</div>
@ -66,10 +62,5 @@ aria-labelledby="myModalLabel" aria-hidden="true">
<pre style="display: none" id="svgsrc">(no svg loaded)</pre>
</div>
<script type="text/javascript">
$(document).ready(function(){{
getsvg(false)
}})
</script>
</div>
</div>

5
src/graphxq/views/dotmlform.xml
View file

@ -4,9 +4,10 @@
</div>
<div class="row-fluid" >
<div class="span6" id="leftPane" style="position:relative;height:100%">
<form id="editForm" method="post" action="api/dotml" style="background-color:#EEEEEE;" class="extend">
<form id="editForm" method="post" action="api/dotml" target="_new" style="background-color:#EEEEEE;" class="extend">
<textarea name="dotml" rows="20" style="width:100%;overflow:scroll;height:100%">{$dotml}</textarea>
</form >
<input name="dl" type="checkbox" style="display:hidden"/>
</form >
</div>
<div class="span6" id="rightPane">
<div id="svgdiv" class="extend" style="width:100%;border: 1px solid #E3E3E3;">{$svgwidget}</div>

10
src/graphxq/views/item1.xml Normal file
View file

@ -0,0 +1,10 @@
<li class="span4" style="height:180px;">
<a class="pull-left" href="{$url($item)}">
<img class="media-object" src="/graphxq/{$item/url/@type}.png" style="width:100px;height:100px"/>
</a>
<div class="media-body">
<h4 class="media-heading"><a href="{$url($item)}">{$item/title/fn:string()}</a></h4>
{$item/description/node()}
</div>
</li>

7
src/graphxq/views/layout.xml
View file

@ -19,7 +19,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js" type="text/javascript"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://raw.github.com/ajaxorg/ace-builds/master/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/graphxq/app.js" type="text/javascript"></script>
<script type="text/javascript"><![CDATA[
var _gaq = _gaq || [];
@ -61,7 +61,10 @@
</li>
<li class="{$active-link('api')}">
<a href="api"><i class="icon-wrench"></i> API</a>
</li>
</li>
<li class="{$active-link('api')}">
<a href="ace"><i class="icon-wrench"></i> Ace</a>
</li>
</ul>
<div class="btn-group pull-right" style="margin-top:0px">
{$usermenu}

47
src/graphxq/views/library.xml
View file

@ -1,45 +1,6 @@
<div>
<!-- q,collection, hits -->
<h2>Samples {$count}</h2>
<ul>
<li>
<a href="dot?src=samples/dot/process.gv">process</a>
(dot)
</li>
<li>
<a href="dot?src=samples/dot/unix.gv">unix</a>
(dot)
</li>
<li>
<a href="dot?src=samples/dot/root.gv">root (slow)</a>
(dot)
</li>
<li>
<a href="dotml?src=samples/dotml/sample1.xml">dotml </a>
(dotml)
</li>
<li>
<a href="dotml?src=samples/dotml/cluster.xml"> cluster</a>
(dotml)
</li>
</ul>
<h2>Samples</h2>
<div class="media well">
<a class="pull-left" href="#">
<img class="media-object" src="/graphxq/graphxq.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Title</h4>
Description....
</div>
</div>
<div class="media well">
<a class="pull-left" href="#">
<img class="media-object" src="/graphxq/dotml.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Title2</h4>
Description....
</div>
</div>
<h2>Samples ({fn:count($items/item )})</h2>
<ul class=" thumbnails ">
{$partial("item1.xml","item",$items/item)}
</ul>
</div>

37
src/graphxq/views/toolbar.xml
View file

@ -4,18 +4,8 @@
<i class="icon-refresh"></i>
Redraw
</button>
<button id="bnsvg" class="btn btn-mini">
<i class="icon-fullscreen"></i>
SVG
</button>
<button id="bndn" class="btn btn-mini">
<i class="icon-download-alt"></i>
download
</button>
<button id="bnxml" class="btn btn-mini" data-toggle="button">
<i class="icon-text-width"></i>
SVG text
</button>
</div>
<div class="btn-group">
<button id="bnxx" class="btn btn-mini">
@ -23,6 +13,12 @@
Options
</button>
</div>
<div class="btn-group">
<button id="bnclear" class="btn btn-mini">
<i class="icon-remove"></i>
Clear
</button>
</div>
<!-- http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap -->
<div class="btn-group " data-toggle="buttons-radio">
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini"
@ -38,4 +34,21 @@
<i class="icon icon-indent-right"></i>
</a>
</div>
<div class="btn-group pull-right">
<button id="bnsvg" class="btn btn-mini" title="Show SVG standalone.">
<i class="icon-fullscreen"></i>
SVG
</button>
<button id="bndn" class="btn btn-mini" title="Download SVG file">
<i class="icon-download-alt"></i>
download
</button>
</div>
<div class="btn-group pull-right">
<button id="bnxml" class="btn btn-mini" data-toggle="button" title="Toggle SVG graphic and text">
<i class="icon-text-width"></i>
SVG text
</button>
</div>
</div>