quodatum/graphxq
1
0
Fork 0
mirror of https://github.com/Quodatum/graphxq.git synced 2025-11-03 22:21:55 +00:00
Code Issues Projects Releases Wiki Activity

css woes

Browse source
This commit is contained in:
Andy Bunce 2013-01-23 23:36:52 +00:00
parent 1ceb15b446
commit 51738f4631
11 changed files with 211 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/graphxq/app.css
View file

@ -7,6 +7,9 @@ body {
padding-top: 0; padding-top: 0;
} }
} }
.h100{
height:100%;
}
/* search bar icon */ /* search bar icon */
.navbar-search .search-query { .navbar-search .search-query {
padding-left: 29px; padding-left: 29px;
@ -26,26 +29,6 @@ body {
.navbar-fixed-top { .navbar-fixed-top {
margin-bottom: 4px; margin-bottom: 4px;
} }
.quick-links {
list-style: none outside none;
margin: 0;
min-height: 30px;
overflow: hidden;
padding: 5px 20px;
text-align: center;
}
.quick-links:first-child {
min-height: 0;
}
.quick-links li {
color: #999999;
display: inline;
margin: 0 8px;
}
.quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn {
position: relative;
top: 5px;
}
#editor { #editor {

8
src/graphxq/app.js
View file

@ -63,9 +63,11 @@ $('a[data-action="rDom"]').click(function (){
$(document).ready(function(){ $(document).ready(function(){
$("#bnup").on("click",getsvg); $("#bnup").on("click",getsvg);
$("#bnsvg").on("click",function(){ $("#dotForm").submit()}); $("#bnsvg").on("click",function(){ $("#editForm").submit()});
$("#bndn").on("click",function(){getsvg(true)}); $("#bndn").on("click",function(){getsvg(true)});
$("#dot").on("keyup",getsvg); $("#dot").on("keyup",getsvg);
$("#bnxml").on("click",function(){$("#svgdiv,#svgsrc").toggle()});
var resize=function(){ var resize=function(){
var h=$(window).height(); var h=$(window).height();
$('.extend').each(function(){ $('.extend').each(function(){
@ -79,13 +81,13 @@ $(document).ready(function(){
}); });
function getsvg(dl){ function getsvg(dl){
var f=$("#dotForm").serializeArray() var f=$("#editForm").serializeArray()
//var d=$("#frm-defaults").serializeArray() //var d=$("#frm-defaults").serializeArray()
//console.log("#frm-default",d) //console.log("#frm-default",d)
// if(dl)f.push({"name":"dl","value":1}) // if(dl)f.push({"name":"dl","value":1})
$.ajax({ $.ajax({
type:"POST", type:"POST",
url:"svg", url:$("#editForm").attr("action"),
data:f, data:f,
dataType: "text", dataType: "text",
success: function(str){ success: function(str){

23
src/graphxq/data/library.xml Normal file
View file

@ -0,0 +1,23 @@
<items>
<item>
<title>Process</title>
<url type="dot">samples/dot/process.gv</url>
(dot)
</item>
<item>
<title>Unix</title>
<url type="dot">samples/dot/unix.gv</url>
</item>
<item>
<title>Root</title>
<url type="dot">samples/dot/root.gv</url>
</item>
<item>
<title>Sample</title>
<url type="dotml">samples/dotml/sample1.xml</url>
</item>
<item>
<title>Cluster</title>
<url type="dotml">samples/dotml/cluster.xml</url>
</item>
</items>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

23
src/graphxq/graphxq.xqm
View file

@ -87,6 +87,7 @@ function dotmlform($src){
let $v:=map{ "svgwidget":=$svgwidget, let $v:=map{ "svgwidget":=$svgwidget,
"toolbar":=$toolbar, "toolbar":=$toolbar,
"title":="DOTML editor", "title":="DOTML editor",
"bodyclass":="h100",
"dotml":=$dotml} "dotml":=$dotml}
return render("views/dotmlform.xml",$v) return render("views/dotmlform.xml",$v)
}; };
@ -104,8 +105,10 @@ function api(){
declare declare
%rest:GET %rest:path("graphxq/library") %rest:GET %rest:path("graphxq/library")
%output:method("html") %output:version("5.0") %output:method("html") %output:version("5.0")
function library( ) { function library(){
let $map:=map{"title":="Samples"} let $lib:=fn:doc("data/library.xml")
let $map:=map{"title":="Samples",
"count":=fn:count($lib//item)}
return render("views/library.xml",$map) return render("views/library.xml",$map)
}; };
@ -115,8 +118,7 @@ function library( ) {
declare declare
%rest:POST %rest:path("graphxq/api/dotml") %rest:POST %rest:path("graphxq/api/dotml")
%rest:form-param("dotml","{$dotml}") %rest:form-param("dotml","{$dotml}")
function api-dotml($dotml ) as node() function api-dotml($dotml ) as node(){
{
let $dotml:=fn:parse-xml($dotml) let $dotml:=fn:parse-xml($dotml)
let $y:=fn:trace($dotml,"ff") let $y:=fn:trace($dotml,"ff")
let $x:=dotml:generate($dotml) let $x:=dotml:generate($dotml)
@ -134,8 +136,7 @@ declare %private function getdot($dot as xs:string,$url) as xs:string{
}; };
(:~ if url is defined then treat as url and fetch else use dotml :) (:~ if url is defined then treat as url and fetch else use dotml :)
declare %private function getdotml($dotml as node(),$url) as node() declare %private function getdotml($dotml as node(),$url) as node(){
{
if($url) then if($url) then
try{ try{
fn:doc(fn:resolve-uri($url)) fn:doc(fn:resolve-uri($url))
@ -153,16 +154,22 @@ declare %private function dot2svg($dot as xs:string) as node(){
return gr:autosize($svgx) return gr:autosize($svgx)
}; };
(:~ css class to hightlight current page :)
declare function active-link($path as xs:string,$page as xs:string) as xs:string{
if(fn:ends-with($path,$page)) then "active" else ""
};
(:~ (:~
: Render html page : Render html page
: @param template path to page template : @param template path to page template
: @params locals map of page variables : @params locals map of page variables
:) :)
declare function render($template as xs:string,$locals){ declare function render($template as xs:string,$locals){
let $path:=request:path()
let $default:=map{"usermenu":=<div>users</div>, let $default:=map{"usermenu":=<div>users</div>,
"title":=request:path(), "title":=request:path(),
"messages":=()} "active-link":=active-link($path,?), (: *** FAILS IF request:path() :)
"bodyclass":=""}
let $locals:=map:new(($default,$locals)) let $locals:=map:new(($default,$locals))
return txq:render(fn:resolve-uri($template),$locals,$grxq:layout) return txq:render(fn:resolve-uri($template),$locals,$grxq:layout)
}; };

33
src/graphxq/views/about.xml
View file

@ -9,19 +9,6 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span4">
<h2>Server</h2>
<p>The server side is written entirely in XQuery. It uses the
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
is used to map XQuery annotations to web server behavior.
</p>
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
The SVG may also be viewed standalone or downloaded.</p>
<p>This application includes DOTML developed by Martin Loetzsch.
DOTML is a XML based syntax for the input language of the 'Dot'.</p>
</div>
<div class="span4"> <div class="span4">
<h2>Client</h2> <h2>Client</h2>
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21. <p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
@ -35,12 +22,28 @@
<p>The resultant SVG is viewed in an interface that provides pan and zoom functionality. <p>The resultant SVG is viewed in an interface that provides pan and zoom functionality.
The SVG may also be viewed standalone or downloaded.</p> The SVG may also be viewed standalone or downloaded.</p>
</div> </div>
<div class="span4">
<h2>Server</h2>
<p>The server side is written entirely in XQuery. It uses the
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
is used to map XQuery annotations to web server behavior.
</p>
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
The SVG may also be viewed standalone or downloaded.</p>
<p>This application includes an XSLT transform to convert <code>DOTML</code> to
<code>dot</code> developed by Martin Loetzsch.
<a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DOTML</a>
is a XML based syntax for the input language of the 'Dot'.</p>
</div>
<div class="span4"> <div class="span4">
<h2>Bugs</h2> <h2>Todo</h2>
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due <p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
to firefox bugs</p> to firefox bugs</p>
<p>For reference this shows how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a> <p>For reference this shows how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a>
works.</p> works. See also <a href="http://alzt.tau.ac.il/~dagan/tools/#zoom">here</a>.
</p>
</div> </div>
</div> </div>

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

@ -1,96 +1,69 @@
<div> <div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<form id="frm-defaults" class="form-table">
<label>
Title:
<input type="text" value="" name="dotTitle" size="15" />
</label>
<label>
RankDir:
<select name="rankdir">
<option value="rankdir=TB;" selected="selected">TB (top
-> bottom)
</option>
<option value="rankdir=LR;">LR (left -> right)</option>
</select>
</label>
<label>
Default Shape:
<select name="shape">{$list-shapes}</select>
</label>
<label>
Color:
<select id="lstColors" width="10">{$list-colors}</select>
</label>
<label>
Background:
<select name="bgcolor">{$list-colors}</select>
</label>
<label>
Filter:
<select name="filter">
<option value="Bumpy">Bumpy</option>
<option value="" selected="selected">(None)</option>
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
<option value="Bevel">Bevel</option>
<option value="MyFilter">MyFilter</option>
<option value="MyShadow">MyShadow</option>
</select>
</label>
</form>
</div>
<div class="row-fluid" style="height:24px"> <div class="row-fluid" style="height:24px">
{$toolbar} {$toolbar}
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span6 extend" id="leftPane"> <div class="span6 extend" id="leftPane">
<form id="editForm" action="svg" method="post" target="_new"
class="well ">
<textarea id="dot" name="dot" rows="100"
style="width:90%;overflow:scroll">{$dot}</textarea>
<ul class="nav nav-tabs"> <label class="checkbox">
<li class="active"> <input name="dl" type="checkbox" />
<a href="#tab-dot" data-toggle="tab">Dot</a> Download
</li> </label>
<li> </form>
<a href="#tab-defaults" data-toggle="tab">Defaults</a>
</li>
<li>
<a href="#tab-xml" data-toggle="tab">Raw XML</a>
</li>
</ul>
<div class="tab-content" style="overflow:hidden;">
<div class="tab-pane active " id="tab-dot">
<form id="dotForm" action="svg" method="post" target="_new"
class="well ">
<label>
digraph "
<input type="text" name="title" placeholder="title" class="input-small" />
"
</label>
<span style="margin-right:-5px;padding-right:2px;">{{</span>
<textarea id="dot" name="dot" rows="100"
style="width:90%;overflow:scroll">{$dot}</textarea>
<span style="margin-right:-5px;">}}</span>
<label class="checkbox">
<input name="dl" type="checkbox" />
Download
</label>
</form>
</div>
<div class="tab-pane well" id="tab-defaults">
<form id="frm-defaults" class="form-table">
<label>
Title:
<input type="text" value="" name="dotTitle" size="15" />
</label>
<label>
RankDir:
<select name="rankdir">
<option value="rankdir=TB;" selected="selected">TB (top
-> bottom)
</option>
<option value="rankdir=LR;">LR (left -> right)</option>
</select>
</label>
<label>
Default Shape:
<select name="shape">{$list-shapes}</select>
</label>
<label>
Color:
<select id="lstColors" width="10">{$list-colors}</select>
</label>
<label>
Background:
<select name="bgcolor">{$list-colors}</select>
</label>
<label>
Filter:
<select name="filter">
<option value="Bumpy">Bumpy</option>
<option value="" selected="selected">(None)</option>
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
<option value="Bevel">Bevel</option>
<option value="MyFilter">MyFilter</option>
<option value="MyShadow">MyShadow</option>
</select>
</label>
</form>
</div>
<div class="tab-pane well" id="tab-xml">
<pre id="svgsrc">source</pre>
</div>
</div>
</div> </div>
<div class="span6" id="rightPane"> <div class="span6" id="rightPane">
<div id="svgdiv" class="extend" <div id="svgdiv" class="extend"
style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div> 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> </div>
<script type="text/javascript"> <script type="text/javascript">

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

@ -2,16 +2,15 @@
<div class="row-fluid" style="height:24px"> <div class="row-fluid" style="height:24px">
{$toolbar} {$toolbar}
</div> </div>
<div class="row-fluid" style="height:20em" > <div class="row-fluid" >
<div class="span6" id="leftPane"> <div class="span6" id="leftPane" style="position:relative;height:100%">
<form method="post" action="api/dotml" style="background-color:#EEEEEE;"> <form id="editForm" method="post" action="api/dotml" style="background-color:#EEEEEE;" class="extend">
<div> <button type="submit">Redraw</button></div> <textarea name="dotml" rows="20" style="width:100%;overflow:scroll;height:100%">{$dotml}</textarea>
<textarea name="dotml" rows="100" style="width:90%;overflow:scroll">{$dotml}</textarea>
</form > </form >
</div> </div>
<div class="span6" id="rightPane"> <div class="span6" id="rightPane">
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div> <div id="svgdiv" class="extend" style="width:100%;border: 1px solid #E3E3E3;">{$svgwidget}</div>
<pre style="display: none" id="svgsrc">(no svg loaded)</pre>
</div> </div>
</div> </div>
</div> </div>

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

@ -34,7 +34,7 @@
})(); })();
]]></script> ]]></script>
</head> </head>
<body> <body class="{$bodyclass}">
<div class="navbar navbar-fixed-top " data-dropdown="dropdown"> <div class="navbar navbar-fixed-top " data-dropdown="dropdown">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
@ -43,23 +43,23 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a href="." class="brand" title="Version 0.1.0"> <a href="." class="brand" title="Version 0.3.0">
<img src="/graphxq/graphxq2.png" /> <img src="/graphxq/graphxq2.png" />
graphXQ graphXQ
</a> </a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li> <li class="{$active-link('dot')}">
<a href="dot"><i class="icon-edit"></i> Dot</a> <a href="dot" rel="tooltip" title="Define a graph in Dot notation" ><i class="icon-edit"></i> Dot</a>
</li> </li>
<li> <li class="{$active-link('dotml')}">
<a href="dotml"><i class="icon-align-center"></i> DotML</a> <a href="dotml"><i class="icon-align-center"></i> DotML</a>
</li> </li>
<li > <li class="{$active-link('library')}">
<a href="library"><i class="icon-book"></i> Library</a> <a href="library"><i class="icon-book"></i> Library</a>
</li> </li>
<li> <li class="{$active-link('api')}">
<a href="api"><i class="icon-wrench"></i> API</a> <a href="api"><i class="icon-wrench"></i> API</a>
</li> </li>
</ul> </ul>

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

@ -1,26 +1,45 @@
<div> <div>
<!-- q,collection, hits --> <!-- q,collection, hits -->
<h2>Samples</h2> <h2>Samples {$count}</h2>
<ul> <ul>
<li> <li>
<a href="dot?src=samples/dot/process.gv">process</a> <a href="dot?src=samples/dot/process.gv">process</a>
(dot) (dot)
</li> </li>
<li> <li>
<a href="dot?src=samples/dot/unix.gv">unix</a> <a href="dot?src=samples/dot/unix.gv">unix</a>
(dot) (dot)
</li> </li>
<li> <li>
<a href="dot?src=samples/dot/root.gv">root (slow)</a> <a href="dot?src=samples/dot/root.gv">root (slow)</a>
(dot) (dot)
</li> </li>
<li> <li>
<a href="dotml?src=samples/dotml/sample1.xml">dotml </a> <a href="dotml?src=samples/dotml/sample1.xml">dotml </a>
(dotml) (dotml)
</li> </li>
<li> <li>
<a href="dotml?src=samples/dotml/cluster.xml"> cluster</a> <a href="dotml?src=samples/dotml/cluster.xml"> cluster</a>
(dotml) (dotml)
</li> </li>
</ul> </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>
</div> </div>

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

@ -1,15 +1,41 @@
<div> <div>
<div class="btn-group"> <div class="btn-group">
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button> <button id="bnup" class="btn btn-mini">
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button> <i class="icon-refresh"></i>
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button> Redraw
</div> </button>
<!-- <button id="bnsvg" class="btn btn-mini">
http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap <i class="icon-fullscreen"></i>
--> SVG
<div class="btn-group pull-right"> </button>
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini" data-action="lDom" data-placement="left"><i class="icon icon-indent-left"></i></a> <button id="bndn" class="btn btn-mini">
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a> <i class="icon-download-alt"></i>
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini" data-placement="left" data-action="rDom"><i class="icon icon-indent-right"></i></a> download
</div> </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">
<i class="icon-gift"></i>
Options
</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"
data-action="lDom" data-placement="left">
<i class="icon icon-indent-left"></i>
</a>
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini"
data-placement="left" data-action="equality">
<i class="icon icon-resize-horizontal"></i>
</a>
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini"
data-placement="left" data-action="rDom">
<i class="icon icon-indent-right"></i>
</a>
</div>
</div> </div>