--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/webapp/metaphor/compute/index.html Mon Jan 16 09:15:42 2012 -0800
@@ -0,0 +1,98 @@
+<html>
+<head>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+</head>
+<body>
+
+<hr>
+First, you'll need to load a dataset.
+<br/>
+
+<input id="dataset" value="TerminalBigraph"/>
+<button type="button" onclick="loadDataset()">Load dataset</button>
+<br/>
+
+<textarea id="dataset-display" rows="12" cols="60"></textarea>
+
+<hr>
+Next, specify a translation with the same source.
+<br/>
+
+<input id="translation" value="ReverseGraph"/>
+<button type="button" onclick="loadTranslation()">Load translation</button>
+<br/>
+
+<textarea id="translation-display" rows="12" cols="60"></textarea>
+
+<hr>
+Finally, you can ask the server to compute any of the following data migration functors:<br/>
+<button type="button" onclick="compute('pullback')">the pullback</button>
+<button type="button" onclick="compute('leftPushforward')">the left pushforward</button>
+<button type="button" onclick="compute('rightPushforward')">the right pushforward</button>
+<br/>
+
+<textarea id="result" rows="30" cols="120"></textarea>
+
+<script>
+function prettyPrint(json) {
+ return JSON.stringify(json, undefined, 2);
+}
+</script>
+
+<script>
+var translation;
+var dataset;
+</script>
+
+<script>
+function loadDataset() {
+$.ajax({
+ beforeSend: function(req) {
+ req.setRequestHeader("Accept", "application/json");
+ },
+ type:"GET",
+ url: "/metaphor/examples/datasets/" + $("#dataset").val(),
+ success: function(data){
+ dataset = data;
+ $("#dataset-display").val(prettyPrint(data));
+ }
+ });
+}
+</script>
+
+<script>
+function loadTranslation() {
+$.ajax({
+ beforeSend: function(req) {
+ req.setRequestHeader("Accept", "application/json");
+ },
+ type:"GET",
+ url: "/metaphor/examples/translations/" + $("#translation").val(),
+ success: function(data){
+ translation = data
+ $("#translation-display").val(prettyPrint(data));
+ }
+ });
+}
+</script>
+
+<script>
+function compute(datafunctor) {
+$.ajax({
+ type: "GET",
+ url: "/metaphor/compute/" + datafunctor,
+ data: { "translation": $("#translation-display").val(), "dataset": $("#dataset-display").val() },
+ success: function(data){
+ $("#result").val(prettyPrint(data));
+ },
+ error:function (xhr, ajaxOptions, thrownError){
+ alert("An error occurred on the server. Response code " + xhr.status + ". " + thrownError);
+ }
+ });
+}
+</script>
+
+
+</body>
+</html>
+
--- a/src/main/webapp/stylesheet.css Mon Jan 16 09:12:33 2012 -0800
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,14 +0,0 @@
-.ontology .box {
- border: 1px solid #666666;
- background: #ffffff;
- color: #222222;
- width: 150px;
- height: 50px;
- padding: 0.5em;
- position: absolute;
-}
-
-.ontology .canvas {
- border: 1px solid #666666;
- position: relative;
-}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/website/css/stylesheet.css Mon Jan 16 09:15:42 2012 -0800
@@ -0,0 +1,14 @@
+.ontology .box {
+ border: 1px solid #666666;
+ background: #ffffff;
+ color: #222222;
+ width: 150px;
+ height: 50px;
+ padding: 0.5em;
+ position: absolute;
+}
+
+.ontology .canvas {
+ border: 1px solid #666666;
+ position: relative;
+}
--- a/src/main/website/index.html Mon Jan 16 09:12:33 2012 -0800
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,98 +0,0 @@
-<html>
-<head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-</head>
-<body>
-
-<hr>
-First, you'll need to load a dataset.
-<br/>
-
-<input id="dataset" value="TerminalBigraph"/>
-<button type="button" onclick="loadDataset()">Load dataset</button>
-<br/>
-
-<textarea id="dataset-display" rows="12" cols="60"></textarea>
-
-<hr>
-Next, specify a translation with the same source.
-<br/>
-
-<input id="translation" value="ReverseGraph"/>
-<button type="button" onclick="loadTranslation()">Load translation</button>
-<br/>
-
-<textarea id="translation-display" rows="12" cols="60"></textarea>
-
-<hr>
-Finally, you can ask the server to compute any of the following data migration functors:<br/>
-<button type="button" onclick="compute('pullback')">the pullback</button>
-<button type="button" onclick="compute('leftPushforward')">the left pushforward</button>
-<button type="button" onclick="compute('rightPushforward')">the right pushforward</button>
-<br/>
-
-<textarea id="result" rows="30" cols="120"></textarea>
-
-<script>
-function prettyPrint(json) {
- return JSON.stringify(json, undefined, 2);
-}
-</script>
-
-<script>
-var translation;
-var dataset;
-</script>
-
-<script>
-function loadDataset() {
-$.ajax({
- beforeSend: function(req) {
- req.setRequestHeader("Accept", "application/json");
- },
- type:"GET",
- url: "/metaphor/examples/datasets/" + $("#dataset").val(),
- success: function(data){
- dataset = data;
- $("#dataset-display").val(prettyPrint(data));
- }
- });
-}
-</script>
-
-<script>
-function loadTranslation() {
-$.ajax({
- beforeSend: function(req) {
- req.setRequestHeader("Accept", "application/json");
- },
- type:"GET",
- url: "/metaphor/examples/translations/" + $("#translation").val(),
- success: function(data){
- translation = data
- $("#translation-display").val(prettyPrint(data));
- }
- });
-}
-</script>
-
-<script>
-function compute(datafunctor) {
-$.ajax({
- type: "GET",
- url: "/metaphor/compute/" + datafunctor,
- data: { "translation": $("#translation-display").val(), "dataset": $("#dataset-display").val() },
- success: function(data){
- $("#result").val(prettyPrint(data));
- },
- error:function (xhr, ajaxOptions, thrownError){
- alert("An error occurred on the server. Response code " + xhr.status + ". " + thrownError);
- }
- });
-}
-</script>
-
-
-</body>
-</html>
-
--- a/src/main/website/jquery.html Mon Jan 16 09:12:33 2012 -0800
+++ b/src/main/website/jquery.html Mon Jan 16 09:15:42 2012 -0800
@@ -4,7 +4,7 @@
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-<link rel="stylesheet" href="stylesheet.css">
+<link rel="stylesheet" href="/css/stylesheet.css">
</head>
<body>
<script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/website/js/ontology-editor.js Mon Jan 16 09:15:42 2012 -0800
@@ -0,0 +1,148 @@
+// boxes stores all the current ontology boxes
+var boxes = [];
+
+// arrows stores all the current ontology arrows
+var arrows = [];
+
+// relations stores all the current ontology relations
+var relations = [];
+
+var ontology = {
+ 'boxes': [],
+ 'arrows': [],
+ 'relations': [],
+ 'display': { }
+}
+
+function generateJSON() {
+ // TODO
+ // just take ontology and strip out display
+}
+
+function generateDSL() {
+ // TODO
+}
+
+function loadJSON(json) {
+ // first, check if json contains 'editor-state'
+ // if note, rebuild it
+ // now, reinitialize the canvas from the editor-state
+}
+
+function updateTextareas() {
+ $('ontology-JSON').val(JSON.stringify(generateJSON()));
+ $('ontology-DSL').val(generateDSL());
+}
+
+function createBoxRectangle(x, y) {
+ var WIDTH = 100, HEIGHT = 50, ROUNDING = 5;
+ var box = r.rect(x, y, WIDTH, HEIGHT, ROUNDING);
+ var color = Raphael.getColor();
+ box.attr({fill: color, stroke: color, "fill-opacity": 0.5, "stroke-width": 2, cursor: "move"});
+ return box;
+}
+function addLabel(c, label) {
+ label = typeof(label) != 'undefined' ? label : ''
+ var OFFSET_x = c.getBBox().width / 2, OFFSET_y = c.getBBox().height / 2;
+ return r.text(c.attr('x') + OFFSET_x, c.attr('y') + OFFSET_y, label);
+}
+
+function createBox(x, y, label) {
+ var box = createBoxRectangle(x, y);
+
+ box.label = addLabel(box, label);
+
+ box.addArrow = r.circle(0,0,3)
+ .transform(translationString(box.right()) + "t-10,0") // position just inside the right edge
+ .attr({ fill: '#ffffff', stroke: '#0000cc', 'stroke-width': 2 }) // blue, and filled (transparently)
+ .hover(function() { this.glowing = this.glow(); }, function() { this.glowing.remove(); }); // glow on hover
+
+ dragToCreateArrow(box.addArrow);
+
+ box.receiveArrow = r.circle(0,0,3)
+ .transform(translationString(box.left()) + "t10,0") // position just inside the left
+ .attr({ fill: '#ffffff', stroke: '#0000cc', 'stroke-width': 2 }) // blue, and filled (transparently)
+ .hover(function() { this.glowing = this.glow(); }, function() { this.glowing.remove(); }); // glow on hover
+ // TODO make invisible (activate only while drawing an arrow
+
+
+ var set = r.set()
+ set.push(box, box.label, box.addArrow, box.receiveArrow);
+ box.draggable(set);
+
+ boxes.push(box);
+ return box;
+}
+
+
+// Basic dragging functionality, e.g. for boxes.
+// x.draggable(set) makes x draggable, moving everything in set (optional) along too.
+
+Raphael.el.draggable = function(set) {
+ set = typeof(set) != 'undefined' ? set : r.set();
+ this.dragWith = set;
+ this.drag(dragUpdate, dragStart, dragStop);
+}
+Raphael.st.draggable = function(set) {
+ this.forEach(function (el) {
+ el.draggable(set);
+ });
+};
+
+var dragging = {};
+function dragStart() {
+ dragging.ox = this.attr('x');
+ dragging.oy = this.attr('y');
+ dragging.x = 0;
+ dragging.y = 0;
+ dragging.active = true;
+};
+function dragUpdate(dx, dy) {
+ // TODO prevent dragging off the canvas.
+ this.dragWith.translate( dx - dragging.x, dy - dragging.y );
+ dragging.x = dx;
+ dragging.y = dy;
+};
+function dragStop() {
+ dragging.active = false;
+};
+
+// Creating arrows via drag and drop
+function dragToCreateArrow(source) {
+ var path;
+ var ox;
+ var oy;
+
+ function drawPath(dx, dy) {
+ // TODO, make the path prettier: nicer curvatuare, color, thickness
+ path = r.path("M" + ox + "," + oy + "c20,0 -20,0 " + dx + "," + dy);
+ }
+
+ function dragStart() {
+ // record the initial coordinates of the component
+ var c = source.center();
+ ox = c.x;
+ oy = c.y;
+
+ // activate the drop targets
+ // TODO
+
+ drawPath(0, 0);
+ }
+ function dragUpdate(dx, dy) {
+ path.remove();
+ drawPath(dx, dy);
+ }
+ function dragStop() {
+ // check if we're over a drop target, and if so, build a new arrow
+ // TODO
+
+ // deactivate the drop targets
+ // TODO
+
+ path.remove();
+ }
+
+ source.drag(dragUpdate, dragStart, dragStop);
+ return source;
+ }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/website/js/raphael-toolkit.js Mon Jan 16 09:15:42 2012 -0800
@@ -0,0 +1,20 @@
+Raphael.el.bottomRight = function() {
+ var bb = this.getBBox();
+ return { x: bb.x + bb.width, y: bb.y + bb.height };
+}
+Raphael.el.right = function() {
+ var bb = this.getBBox();
+ return { x: bb.x + bb.width, y: bb.y + bb.height / 2 };
+}
+Raphael.el.center = function() {
+ var bb = this.getBBox();
+ return { x: bb.x + bb.width / 2, y: bb.y + bb.height / 2 };
+}
+
+
+function moveToString(coords) {
+ return "T" + coords.x + "," + coords.y;
+}
+function translationString(coords) {
+ return "T" + coords.x + "," + coords.y;
+}
--- a/src/main/website/ontology-editor.js Mon Jan 16 09:12:33 2012 -0800
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,148 +0,0 @@
-// boxes stores all the current ontology boxes
-var boxes = [];
-
-// arrows stores all the current ontology arrows
-var arrows = [];
-
-// relations stores all the current ontology relations
-var relations = [];
-
-var ontology = {
- 'boxes': [],
- 'arrows': [],
- 'relations': [],
- 'display': { }
-}
-
-function generateJSON() {
- // TODO
- // just take ontology and strip out display
-}
-
-function generateDSL() {
- // TODO
-}
-
-function loadJSON(json) {
- // first, check if json contains 'editor-state'
- // if note, rebuild it
- // now, reinitialize the canvas from the editor-state
-}
-
-function updateTextareas() {
- $('ontology-JSON').val(JSON.stringify(generateJSON()));
- $('ontology-DSL').val(generateDSL());
-}
-
-function createBoxRectangle(x, y) {
- var WIDTH = 100, HEIGHT = 50, ROUNDING = 5;
- var box = r.rect(x, y, WIDTH, HEIGHT, ROUNDING);
- var color = Raphael.getColor();
- box.attr({fill: color, stroke: color, "fill-opacity": 0.5, "stroke-width": 2, cursor: "move"});
- return box;
-}
-function addLabel(c, label) {
- label = typeof(label) != 'undefined' ? label : ''
- var OFFSET_x = c.getBBox().width / 2, OFFSET_y = c.getBBox().height / 2;
- return r.text(c.attr('x') + OFFSET_x, c.attr('y') + OFFSET_y, label);
-}
-
-function createBox(x, y, label) {
- var box = createBoxRectangle(x, y);
-
- box.label = addLabel(box, label);
-
- box.addArrow = r.circle(0,0,3)
- .transform(translationString(box.right()) + "t-10,0") // position just inside the right edge
- .attr({ fill: '#ffffff', stroke: '#0000cc', 'stroke-width': 2 }) // blue, and filled (transparently)
- .hover(function() { this.glowing = this.glow(); }, function() { this.glowing.remove(); }); // glow on hover
-
- dragToCreateArrow(box.addArrow);
-
- box.receiveArrow = r.circle(0,0,3)
- .transform(translationString(box.left()) + "t10,0") // position just inside the left
- .attr({ fill: '#ffffff', stroke: '#0000cc', 'stroke-width': 2 }) // blue, and filled (transparently)
- .hover(function() { this.glowing = this.glow(); }, function() { this.glowing.remove(); }); // glow on hover
- // TODO make invisible (activate only while drawing an arrow
-
-
- var set = r.set()
- set.push(box, box.label, box.addArrow, box.receiveArrow);
- box.draggable(set);
-
- boxes.push(box);
- return box;
-}
-
-
-// Basic dragging functionality, e.g. for boxes.
-// x.draggable(set) makes x draggable, moving everything in set (optional) along too.
-
-Raphael.el.draggable = function(set) {
- set = typeof(set) != 'undefined' ? set : r.set();
- this.dragWith = set;
- this.drag(dragUpdate, dragStart, dragStop);
-}
-Raphael.st.draggable = function(set) {
- this.forEach(function (el) {
- el.draggable(set);
- });
-};
-
-var dragging = {};
-function dragStart() {
- dragging.ox = this.attr('x');
- dragging.oy = this.attr('y');
- dragging.x = 0;
- dragging.y = 0;
- dragging.active = true;
-};
-function dragUpdate(dx, dy) {
- // TODO prevent dragging off the canvas.
- this.dragWith.translate( dx - dragging.x, dy - dragging.y );
- dragging.x = dx;
- dragging.y = dy;
-};
-function dragStop() {
- dragging.active = false;
-};
-
-// Creating arrows via drag and drop
-function dragToCreateArrow(source) {
- var path;
- var ox;
- var oy;
-
- function drawPath(dx, dy) {
- // TODO, make the path prettier: nicer curvatuare, color, thickness
- path = r.path("M" + ox + "," + oy + "c20,0 -20,0 " + dx + "," + dy);
- }
-
- function dragStart() {
- // record the initial coordinates of the component
- var c = source.center();
- ox = c.x;
- oy = c.y;
-
- // activate the drop targets
- // TODO
-
- drawPath(0, 0);
- }
- function dragUpdate(dx, dy) {
- path.remove();
- drawPath(dx, dy);
- }
- function dragStop() {
- // check if we're over a drop target, and if so, build a new arrow
- // TODO
-
- // deactivate the drop targets
- // TODO
-
- path.remove();
- }
-
- source.drag(dragUpdate, dragStart, dragStop);
- return source;
- }
--- a/src/main/website/raphael-toolkit.js Mon Jan 16 09:12:33 2012 -0800
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-Raphael.el.bottomRight = function() {
- var bb = this.getBBox();
- return { x: bb.x + bb.width, y: bb.y + bb.height };
-}
-Raphael.el.right = function() {
- var bb = this.getBBox();
- return { x: bb.x + bb.width, y: bb.y + bb.height / 2 };
-}
-Raphael.el.center = function() {
- var bb = this.getBBox();
- return { x: bb.x + bb.width / 2, y: bb.y + bb.height / 2 };
-}
-
-
-function moveToString(coords) {
- return "T" + coords.x + "," + coords.y;
-}
-function translationString(coords) {
- return "T" + coords.x + "," + coords.y;
-}
--- a/src/main/website/raphael.html Mon Jan 16 09:12:33 2012 -0800
+++ b/src/main/website/raphael.html Mon Jan 16 09:15:42 2012 -0800
@@ -1,11 +1,10 @@
<html>
<head>
-<script
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://yandex.st/raphael/2.0.1/raphael.min.js"></script>
-<script src="raphael-toolkit.js"></script>
-<script src="ontology-editor.js"></script>
-<link rel="stylesheet" href="stylesheet.css">
+<script src="/js/raphael-toolkit.js"></script>
+<script src="/js/ontology-editor.js"></script>
+<link rel="stylesheet" href="/css/stylesheet.css">
</head>
<body>
<div id="ontology-editor">