Started to redesign expression preview dialog.

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

src/main/webapp/scripts/dialogs/expression-preview-dialog.js

@@ -1,17 +1,6 @@
 function ExpressionPreviewDialog(title, cellIndex, rowIndices, values, expression, onDone) {
-    this._cellIndex = cellIndex;
-    this._rowIndices = rowIndices;
-    this._values = values;
-    this._results = null;
-    
-    this._expression = expression;
     this._onDone = onDone;
 
-    this._timerID = null;
-    this._createDialog(title);
-}
-
-ExpressionPreviewDialog.prototype._createDialog = function(title) {
     var self = this;
     var frame = DialogSystem.createDialog();
     frame.width("700px");
@@ -19,54 +8,105 @@ ExpressionPreviewDialog.prototype._createDialog = function(title) {
     var header = $('<div></div>').addClass("dialog-header").text(title).appendTo(frame);
     var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
     var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
-    
+    var html = $(ExpressionPreviewDialog.generateWidgetHtml()).appendTo(body);
-    var html = $(
-        '<div class="dialog-body">' +
-            '<p>Expression: <input bind="expressionInput" /></p>' +
-            '<div id="expression-preview-tabs">' +
-                '<ul>' +
-                    '<li><a href="#expression-preview-tabs-preview">Preview</a></li>' +
-                    '<li><a href="#expression-preview-tabs-help">Help</a></li>' +
-                '</ul>' +
-                '<div id="expression-preview-tabs-preview">' +
-                    '<div class="expression-preview-container" bind="previewContainer"></div>' +
-                '</div>' +
-                '<div id="expression-preview-tabs-help" style="display: none;">' +
-                    '<div class="expression-preview-help-container" bind="helpTabBody"></div>' +
-                '</div>' +
-            '</div>' +
-        '</div>'
-    ).appendTo(body);
     
     this._elmts = DOM.bind(html);
     
     $('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() {
         DialogSystem.dismissUntil(self._level - 1);
-        self._onDone(self._expression);
+        self._onDone(self._previewWidget.expression);
     }).appendTo(footer);
     
     $('<button></button>').text("Cancel").click(function() {
         DialogSystem.dismissUntil(self._level - 1);
     }).appendTo(footer);
     
-    this._elmts.expressionInput
-        .width("400px")
-        .attr("value", this._expression)
-        .keyup(function(){
-            self._scheduleUpdate();
-        })
-        .focus();
-    
     this._level = DialogSystem.showDialog(frame);
+    this._previewWidget = new ExpressionPreviewDialog.Widget(
+        this._elmts, 
+        cellIndex,
+        rowIndices,
+        values,
+        expression
+    );
+};
+
+ExpressionPreviewDialog.generateWidgetHtml = function() {
+    return '<table class="expression-preview-layout">' +
+            '<tr>' +
+                '<td>Expression</td>' +
+                '<td>Language</td>' +
+            '</tr>' +
+            '<tr>' +
+                '<td rowspan="2"><textarea class="expression-preview-code" bind="expressionPreviewTextarea" /></td>' +
+                '<td width="150">' +
+                    '<select bind="expressionPreviewLanguageSelect">' +
+                        '<option value="gel">Native expression language</option>' +
+                        '<option value="jython">Jython</option>' +
+                        '<option value="clojure">Clojure</option>' +
+                    '</select>' +
+                '</td>' +
+            '</tr>' +
+            '<tr>' +
+                '<td class="expression-preview-error-container" bind="expressionPreviewErrorContainer" width="150"></td>' +
+            '</tr>' +
+            '<tr>' +
+                '<td colspan="2">' +
+                    '<div id="expression-preview-tabs">' +
+                        '<ul>' +
+                            '<li><a href="#expression-preview-tabs-preview">Preview</a></li>' +
+                            '<li><a href="#expression-preview-tabs-history">History</a></li>' +
+                            '<li><a href="#expression-preview-tabs-help">Help</a></li>' +
+                        '</ul>' +
+                        '<div id="expression-preview-tabs-preview">' +
+                            '<div class="expression-preview-container" bind="expressionPreviewPreviewContainer"></div>' +
+                        '</div>' +
+                        '<div id="expression-preview-tabs-history">' +
+                            '<div class="expression-preview-container" bind="expressionPreviewHistoryContainer"></div>' +
+                        '</div>' +
+                        '<div id="expression-preview-tabs-help" style="display: none;">' +
+                            '<div class="expression-preview-help-container" bind="expressionPreviewHelpTabBody"></div>' +
+                        '</div>' +
+                    '</div>' +
+                '</td>' +
+            '</tr>' +
+        '</table>';
+};
+
+ExpressionPreviewDialog.Widget = function(
+    elmts, 
+    cellIndex,
+    rowIndices,
+    values,
+    expression
+) {
+    this._elmts = elmts;
+    this._cellIndex = cellIndex;
+    this._rowIndices = rowIndices;
+    this._values = values;
+    this.expression = expression;
+    
+    this._results = null;
+    this._timerID = null;
+    
     $("#expression-preview-tabs").tabs();
     $("#expression-preview-tabs-preview").css("display", "");
     $("#expression-preview-tabs-help").css("display", "");
         
+    var self = this;
+    this._elmts.expressionPreviewTextarea
+        .attr("value", this.expression)
+        .keyup(function(){
+            self._scheduleUpdate();
+        })
+        .select()
+        .focus();
+    
     this._update();
     this._renderHelpTab();
 };
 
-ExpressionPreviewDialog.prototype._renderHelpTab = function() {
+ExpressionPreviewDialog.Widget.prototype._renderHelpTab = function() {
     var self = this;
     $.getJSON(
         "/command/get-expression-language-info",
@@ -78,8 +118,8 @@ ExpressionPreviewDialog.prototype._renderHelpTab = function() {
     );
 };
 
-ExpressionPreviewDialog.prototype._renderHelp = function(data) {
+ExpressionPreviewDialog.Widget.prototype._renderHelp = function(data) {
-    var elmt = this._elmts.helpTabBody.empty();
+    var elmt = this._elmts.expressionPreviewHelpTabBody.empty();
     
     $('<h3></h3>').text("Variables").appendTo(elmt);
     var varTable = $('<table width="100%" cellspacing="5"></table>').appendTo(elmt)[0];
@@ -147,7 +187,7 @@ ExpressionPreviewDialog.prototype._renderHelp = function(data) {
     renderEntries(controlTable, data.controls);
 };
 
-ExpressionPreviewDialog.prototype._scheduleUpdate = function() {
+ExpressionPreviewDialog.Widget.prototype._scheduleUpdate = function() {
     if (this._timerID != null) {
         window.clearTimeout(this._timerID);
     }
@@ -155,9 +195,9 @@ ExpressionPreviewDialog.prototype._scheduleUpdate = function() {
     this._timerID = window.setTimeout(function() { self._update(); }, 300);
 };
 
-ExpressionPreviewDialog.prototype._update = function() {
+ExpressionPreviewDialog.Widget.prototype._update = function() {
     var self = this;
-    var expression = this._expression = $.trim(this._elmts.expressionInput[0].value);
+    var expression = this.expression = $.trim(this._elmts.expressionPreviewTextarea[0].value);
     
     $.post(
         "/command/preview-expression?" + $.param({ project: theProject.id, expression: expression, cellIndex: this._cellIndex }), 
@@ -176,8 +216,8 @@ ExpressionPreviewDialog.prototype._update = function() {
     );
 };
 
-ExpressionPreviewDialog.prototype._renderPreview = function(expression, data) {
+ExpressionPreviewDialog.Widget.prototype._renderPreview = function(expression, data) {
-    var container = this._elmts.previewContainer.empty();
+    var container = this._elmts.expressionPreviewPreviewContainer.empty();
     var table = $('<table width="100%"></table>').appendTo(container)[0];
     
     var tr = table.insertRow(0);
@@ -201,6 +241,13 @@ ExpressionPreviewDialog.prototype._renderPreview = function(expression, data) {
         }
     };
     
+    if (this._results != null) {
+        this._elmts.expressionPreviewErrorContainer.empty();
+    } else {
+        var message = (data.type == "parser") ? data.message : "Internal error";
+        this._elmts.expressionPreviewErrorContainer.empty().text(message);
+    }
+    
     for (var i = 0; i < this._values.length; i++) {
         var tr = table.insertRow(table.rows.length);
         
@@ -212,11 +259,6 @@ ExpressionPreviewDialog.prototype._renderPreview = function(expression, data) {
         if (this._results != null) {
             var v = this._results[i];
             renderValue(tdValue, v);
-        } else {
-            // error
-            
-            var message = (data.type == "parser") ? data.message : "internal error";
-            $('<span></span>').text(message).addClass("expression-preview-special-value").appendTo(tdValue);
         }
     }
 };

src/main/webapp/scripts/views/data-table-view.js

@@ -324,7 +324,7 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
     ], elmt);
 };
 
-DataTableView.promptExpressionOnVisibleRows = function(column, title, expression, onDone) {
+DataTableView.sampleVisibleRows = function(column) {
     var rowIndices = [];
     var values = [];
     
@@ -344,12 +344,21 @@ DataTableView.promptExpressionOnVisibleRows = function(column, title, expression
         values.push(v);
     }
     
+    return {
+        rowIndices: rowIndices,
+        values: values
+    };
+};
+
+DataTableView.promptExpressionOnVisibleRows = function(column, title, expression, onDone) {
+    var o = DataTableView.sampleVisibleRows(column);
+    
     var self = this;
     new ExpressionPreviewDialog(
         title,
         column.cellIndex, 
-        rowIndices, 
+        o.rowIndices, 
-        values,
+        o.values,
         expression,
         onDone
     );

src/main/webapp/styles/expression-preview-dialog.css

@@ -1,9 +1,38 @@
+table.expression-preview-layout {
+    border-collapse: collapse;
+    width: 100%;
+}
+table.expression-preview-layout > tbody > tr > td {
+    padding-right: 5px;
+    padding-bottom: 5px;
+}
+table.expression-preview-layout > tbody > tr > td:last-child {
+    padding-right: 0px;
+}
+table.expression-preview-layout > tbody > tr:last-child > td {
+    padding-bottom: 0px;
+}
+
+.expression-preview-layout .ui-tabs .ui-tabs-nav li a {
+    padding: 0.15em 1em;
+}
+
+textarea.expression-preview-code {
+    font-family: monospace;
+    height: 5em;
+    width: 100%;
+}
+
+.expression-preview-error-container {
+    color: red;
+}
+
 #expression-preview-tabs-preview, #expression-preview-tabs-help {
     padding: 7px;
 }
 
 .expression-preview-container {
-    height: 300px;
+    height: 200px;
     padding: 5px;
     overflow: auto;
 }
@@ -24,7 +53,7 @@ td.expression-preview-heading {
 }
 
 .expression-preview-help-container {
-    height: 300px;
+    height: 200px;
     padding: 5px;
     overflow: auto;
 }