Added a help panel to the expression preview dialog. It gets populated by function and control names for now; more info will come later.

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

src/main/java/com/metaweb/gridworks/GridworksServlet.java

@@ -34,6 +34,7 @@ import com.metaweb.gridworks.commands.recon.ApproveNewReconcileCommand;
 import com.metaweb.gridworks.commands.recon.ApproveReconcileCommand;
 import com.metaweb.gridworks.commands.recon.DiscardReconcileCommand;
 import com.metaweb.gridworks.commands.recon.ReconcileCommand;
+import com.metaweb.gridworks.commands.util.GetExpressionLanguageInfoCommand;
 import com.metaweb.gridworks.commands.util.PreviewExpressionCommand;
 
 public class GridworksServlet extends HttpServlet {
@@ -68,6 +69,7 @@ public class GridworksServlet extends HttpServlet {
 		_commands.put("discard-reconcile", new DiscardReconcileCommand());
 		
 		_commands.put("preview-expression", new PreviewExpressionCommand());
+        _commands.put("get-expression-language-info", new GetExpressionLanguageInfoCommand());
 	}
 
 	@Override

src/main/java/com/metaweb/gridworks/commands/util/GetExpressionLanguageInfoCommand.java

@@ -0,0 +1,54 @@
+package com.metaweb.gridworks.commands.util;
+
+import java.io.IOException;
+import java.util.Map.Entry;
+
+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+import org.json.JSONWriter;
+
+import com.metaweb.gridworks.commands.Command;
+import com.metaweb.gridworks.expr.Control;
+import com.metaweb.gridworks.expr.Function;
+import com.metaweb.gridworks.expr.Parser;
+
+public class GetExpressionLanguageInfoCommand extends Command {
+	
+	@Override
+	public void doGet(HttpServletRequest request, HttpServletResponse response)
+			throws ServletException, IOException {
+		
+		try {
+			JSONWriter writer = new JSONWriter(response.getWriter());
+			writer.object();
+			
+			writer.key("functions");
+			writer.object();
+			{
+			    for (Entry<String, Function> entry : Parser.functionTable.entrySet()) {
+			        writer.key(entry.getKey());
+			        writer.object();
+			        writer.endObject();
+			    }
+			}
+			writer.endObject();
+			
+            writer.key("controls");
+            writer.object();
+            {
+                for (Entry<String, Control> entry : Parser.controlTable.entrySet()) {
+                    writer.key(entry.getKey());
+                    writer.object();
+                    writer.endObject();
+                }
+            }
+            writer.endObject();
+            
+			writer.endObject();
+		} catch (Exception e) {
+			respondException(response, e);
+		}
+	}
+}

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

@@ -14,34 +14,84 @@ function ExpressionPreviewDialog(title, cellIndex, rowIndices, values, expressio
 ExpressionPreviewDialog.prototype._createDialog = function(title) {
     var self = this;
     var frame = DialogSystem.createDialog();
-    frame.width("600px");
+    frame.width("700px");
     
     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 p = $('<p></p>').text("Expression: ").appendTo(body);
+    var layoutTable = $('<table cellspacing="0" cellpadding="0" width="100%"><tr><td></td><td></td></tr></table>').appendTo(body);
+    var mainColumn = layoutTable[0].rows[0].cells[0];
+    var helpColumn = layoutTable[0].rows[0].cells[1];
+    
+    this._renderFooter($(footer));
+    this._renderMainColumn($(mainColumn));
+    this._renderHelpColumn($(helpColumn));
+    
+    this._level = DialogSystem.showDialog(frame);
+    
+    this._input[0].value = this._expression;
+    this._input[0].focus();
+    this._update();
+};
+
+ExpressionPreviewDialog.prototype._renderFooter = function(footer) {
+    var self = this;
+    
+    $('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() {
+        DialogSystem.dismissUntil(self._level - 1);
+        self._onDone(self._expression);
+    }).appendTo(footer);
+    
+    $('<button></button>').text("Cancel").click(function() {
+        DialogSystem.dismissUntil(self._level - 1);
+    }).appendTo(footer);
+};
+
+ExpressionPreviewDialog.prototype._renderHelpColumn = function(helpColumn) {
+    helpColumn.addClass("expression-preview-help-column").attr("width", "250").attr("height", "100%");
+    
+    var outer = $('<div></div>').addClass("expression-preview-help-outer").appendTo(helpColumn);
+    var inner = $('<div></div>').addClass("expression-preview-help-inner").text("Loading expression language help info ...").appendTo(outer);
+    var self = this;
+    
+    $.getJSON(
+        "/command/get-expression-language-info",
+        null,
+        function(data) {
+            self._renderHelp(inner, data);
+        },
+        "json"
+    );
+};
+
+ExpressionPreviewDialog.prototype._renderHelp = function(elmt, data) {
+    elmt.empty();
+    
+    $('<h3></h3>').text("Functions").appendTo(elmt);
+    
+    var ul = $('<ul></ul>').appendTo(elmt);
+    for (var n in data.functions) {
+        $('<li></li>').text(n).appendTo(ul);
+    }
+    
+    $('<h3></h3>').text("Controls").appendTo(elmt);
+    
+    ul = $('<ul></ul>').appendTo(elmt);
+    for (var n in data.controls) {
+        $('<li></li>').text(n).appendTo(ul);
+    }
+};
+
+ExpressionPreviewDialog.prototype._renderMainColumn = function(mainColumn) {
+    var self = this;
+    var p = $('<p></p>').text("Expression: ").appendTo(mainColumn);
     
     this._input = $('<input />').width("400px").keypress(function(){
         self._scheduleUpdate();
     }).appendTo(p);
     
-    this._preview = $('<div></div>').addClass("expression-preview-container").appendTo(body);
+    this._preview = $('<div></div>').addClass("expression-preview-container").appendTo(mainColumn);
-    
-    $('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() {
-        DialogSystem.dismissUntil(level - 1);
-        self._onDone(self._expression);
-    }).appendTo(footer);
-    
-    $('<button></button>').text("Cancel").click(function() {
-        DialogSystem.dismissUntil(level - 1);
-    }).appendTo(footer);
-    
-    var level = DialogSystem.showDialog(frame);
-    
-    this._input[0].value = this._expression;
-    this._input[0].focus();
-    this._update();
 };
 
 ExpressionPreviewDialog.prototype._scheduleUpdate = function() {
@@ -84,10 +134,16 @@ ExpressionPreviewDialog.prototype._renderPreview = function(expression) {
     $(tr.insertCell(2)).addClass("expression-preview-heading").text(expression);
     
     var renderValue = function(td, v) {
-        if (v != null) {
+        if (v !== null && v !== undefined) {
-            td.html($.isArray(v) ? JSON.stringify(v) : v);
+            if ($.isArray(v)) {
+                td.html(JSON.stringify(v));
+            } else if (typeof v === "string" && v.length == 0) {
+                $('<span>empty string</span>').addClass("expression-preview-empty").appendTo(td);
+            } else {
+                td.html(v.toString());
+            }
         } else {
-            $('<span>(null)</span>').addClass("expression-preview-empty").appendTo(td);
+            $('<span>null</span>').addClass("expression-preview-empty").appendTo(td);
         }
     };
     
@@ -103,7 +159,7 @@ ExpressionPreviewDialog.prototype._renderPreview = function(expression) {
             var v = this._results[i];
             renderValue(tdValue, v);
         } else {
-            $('<span>(error)</span>').addClass("expression-preview-empty").appendTo(tdValue);
+            $('<span>error</span>').addClass("expression-preview-empty").appendTo(tdValue);
         }
     }
 };

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

@@ -1,3 +1,15 @@
+td.expression-preview-help-column {
+    padding-left: 10px;
+}
+.expression-preview-help-outer {
+    border: 1px solid #ccc;
+    height: 300px;
+    overflow: auto;
+}
+.expression-preview-help-inner {
+    padding: 10px;
+}
+
 .expression-preview-container {
     border: 1px solid #ccc;
     height: 300px;