Use tabs in the schema alignment dialog to get more space.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@96 7d457c2a-affb-35e4-300a-418c747d4874

src/main/java/com/metaweb/gridworks/protograph/transpose/MqlreadLikeTransposedNodeFactory.java

@@ -119,7 +119,8 @@ public class MqlreadLikeTransposedNodeFactory implements TransposedNodeFactory {
 				obj = new JSONObject();
 				try {
 					obj.put("value", cell.value.toString());
-					if (node.lang != null) {
+					obj.put("type", node.valueType);
+					if ("/type/text".equals(node.lang)) {
 						obj.put("lang", node.lang);
 					}
 					
@@ -195,7 +196,8 @@ public class MqlreadLikeTransposedNodeFactory implements TransposedNodeFactory {
 				obj = new JSONObject();
 				try {
 					obj.put("value", node.value);
-					if (node.lang != null) {
+					obj.put("type", node.valueType);
+					if ("/type/text".equals(node.lang)) {
 						obj.put("lang", node.lang);
 					}
 					

src/main/webapp/scripts/project/schema-alignment.js

@@ -118,13 +118,15 @@ SchemaAlignmentDialog.prototype._createDialog = function() {
     var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
     var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
     
-    this._renderFooter(footer);
+    this._constructFooter(footer);
-    this._renderBody(body);
+    this._constructBody(body);
     
     this._level = DialogSystem.showDialog(frame);
+    
+    this._renderBody(body);
 };
 
-SchemaAlignmentDialog.prototype._renderFooter = function(footer) {
+SchemaAlignmentDialog.prototype._constructFooter = function(footer) {
     var self = this;
     
     $('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() {
@@ -158,9 +160,7 @@ SchemaAlignmentDialog.prototype._renderFooter = function(footer) {
     }).appendTo(footer);
 };
 
-SchemaAlignmentDialog.prototype._renderBody = function(body) {
+SchemaAlignmentDialog.prototype._constructBody = function(body) {
-    var self = this;
-    
     $('<p>' +
         'The protograph serves as a skeleton for the graph-shaped data that will get generated ' +
         'from your grid-shaped data and written into Freebase. The cells in each record of your data will ' +
@@ -168,8 +168,30 @@ SchemaAlignmentDialog.prototype._renderBody = function(body) {
         'column to substitute into which node. A node can also be an automatically generated ' +
         'anonymous node, or it can be an explicit value or topic that is the same for all records.' +
     '</p>').appendTo(body);
+    
+    $(
+        '<div id="schema-alignment-tabs">' +
+            '<ul>' +
+                '<li><a href="#schema-alignment-tabs-protograph">Protograph</a></li>' +
+                '<li><a href="#schema-alignment-tabs-preview">Preview</a></li>' +
+            '</ul>' +
+            '<div id="schema-alignment-tabs-protograph">' +
+                '<div class="schema-alignment-dialog-canvas"></div>' +
+            '</div>' +
+            '<div id="schema-alignment-tabs-preview" style="display: none;">' +
+                '<div class="schema-alignment-dialog-preview"></div>' +
+            '</div>' +
+        '</div>'
+    ).appendTo(body);
+};
 
-    this._canvas = $('<div></div>').addClass("schema-alignment-dialog-canvas").appendTo(body);
+SchemaAlignmentDialog.prototype._renderBody = function(body) {
+    var self = this;
+    
+    $("#schema-alignment-tabs").tabs();
+    $("#schema-alignment-tabs-preview").css("display", "");
+
+    this._canvas = $(".schema-alignment-dialog-canvas");
     this._nodeTable = $('<table></table>').addClass("schema-alignment-table-layout").appendTo(this._canvas)[0];
     
     for (var i = 0; i < this._protograph.rootNodes.length; i++) {
@@ -184,7 +206,7 @@ SchemaAlignmentDialog.prototype._renderBody = function(body) {
         ));
     }
     
-    this._previewPane = $('<div></div>').addClass("schema-alignment-dialog-preview").appendTo(body);
+    this._previewPane = $(".schema-alignment-dialog-preview");
 };
 
 SchemaAlignmentDialog.prototype.getJSON = function() {

src/main/webapp/styles/schema-alignment-dialog.css

@@ -1,8 +1,9 @@
 .schema-alignment-dialog-canvas {
-    height: 325px;
+    height: 500px;
     overflow: auto;
     border: 1px solid #aaa;
     padding: 10px;
+    background: white;
 }
 
 table.schema-alignment-table-layout {
@@ -65,14 +66,14 @@ a.schema-alignment-link-tag:hover {
 }
 
 div.schema-alignment-dialog-preview {
-    height: 200px;
+    height: 500px;
     overflow: auto;
     border: 1px solid #aaa;
+    background: white;
     padding: 10px;
-    margin-top: 10px;
     white-space: pre;
     font-family: monospace;
-    font-size: 11pt;
+    font-size: 9pt;
 }
 
 /*--------------------------------------------------