From 8f186a5f106a30737386e830dbd726f3b7eb1dca Mon Sep 17 00:00:00 2001 From: David Huynh Date: Sun, 7 Feb 2010 09:02:22 +0000 Subject: [PATCH] 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 --- .../metaweb/gridworks/GridworksServlet.java | 2 + .../GetExpressionLanguageInfoCommand.java | 54 ++++++++++ .../project/expression-preview-dialog.js | 100 ++++++++++++++---- .../styles/expression-preview-dialog.css | 12 +++ 4 files changed, 146 insertions(+), 22 deletions(-) create mode 100644 src/main/java/com/metaweb/gridworks/commands/util/GetExpressionLanguageInfoCommand.java diff --git a/src/main/java/com/metaweb/gridworks/GridworksServlet.java b/src/main/java/com/metaweb/gridworks/GridworksServlet.java index d7a071e10..8ec61b5c1 100644 --- a/src/main/java/com/metaweb/gridworks/GridworksServlet.java +++ b/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 diff --git a/src/main/java/com/metaweb/gridworks/commands/util/GetExpressionLanguageInfoCommand.java b/src/main/java/com/metaweb/gridworks/commands/util/GetExpressionLanguageInfoCommand.java new file mode 100644 index 000000000..e1dc753ae --- /dev/null +++ b/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 entry : Parser.functionTable.entrySet()) { + writer.key(entry.getKey()); + writer.object(); + writer.endObject(); + } + } + writer.endObject(); + + writer.key("controls"); + writer.object(); + { + for (Entry entry : Parser.controlTable.entrySet()) { + writer.key(entry.getKey()); + writer.object(); + writer.endObject(); + } + } + writer.endObject(); + + writer.endObject(); + } catch (Exception e) { + respondException(response, e); + } + } +} diff --git a/src/main/webapp/scripts/project/expression-preview-dialog.js b/src/main/webapp/scripts/project/expression-preview-dialog.js index 14f235b53..89423118b 100644 --- a/src/main/webapp/scripts/project/expression-preview-dialog.js +++ b/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 = $('
').addClass("dialog-header").text(title).appendTo(frame); var body = $('
').addClass("dialog-body").appendTo(frame); var footer = $('
').addClass("dialog-footer").appendTo(frame); - var p = $('

').text("Expression: ").appendTo(body); + var layoutTable = $('
').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; + + $('').html("  OK  ").click(function() { + DialogSystem.dismissUntil(self._level - 1); + self._onDone(self._expression); + }).appendTo(footer); + + $('').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 = $('
').addClass("expression-preview-help-outer").appendTo(helpColumn); + var inner = $('
').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(); + + $('

').text("Functions").appendTo(elmt); + + var ul = $('
    ').appendTo(elmt); + for (var n in data.functions) { + $('
  • ').text(n).appendTo(ul); + } + + $('

    ').text("Controls").appendTo(elmt); + + ul = $('
      ').appendTo(elmt); + for (var n in data.controls) { + $('
    • ').text(n).appendTo(ul); + } +}; + +ExpressionPreviewDialog.prototype._renderMainColumn = function(mainColumn) { + var self = this; + var p = $('

      ').text("Expression: ").appendTo(mainColumn); this._input = $('').width("400px").keypress(function(){ self._scheduleUpdate(); }).appendTo(p); - this._preview = $('
      ').addClass("expression-preview-container").appendTo(body); - - $('').html("  OK  ").click(function() { - DialogSystem.dismissUntil(level - 1); - self._onDone(self._expression); - }).appendTo(footer); - - $('').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(); + this._preview = $('
      ').addClass("expression-preview-container").appendTo(mainColumn); }; 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) { - td.html($.isArray(v) ? JSON.stringify(v) : v); + if (v !== null && v !== undefined) { + if ($.isArray(v)) { + td.html(JSON.stringify(v)); + } else if (typeof v === "string" && v.length == 0) { + $('empty string').addClass("expression-preview-empty").appendTo(td); + } else { + td.html(v.toString()); + } } else { - $('(null)').addClass("expression-preview-empty").appendTo(td); + $('null').addClass("expression-preview-empty").appendTo(td); } }; @@ -103,7 +159,7 @@ ExpressionPreviewDialog.prototype._renderPreview = function(expression) { var v = this._results[i]; renderValue(tdValue, v); } else { - $('(error)').addClass("expression-preview-empty").appendTo(tdValue); + $('error').addClass("expression-preview-empty").appendTo(tdValue); } } }; \ No newline at end of file diff --git a/src/main/webapp/styles/expression-preview-dialog.css b/src/main/webapp/styles/expression-preview-dialog.css index 17261a45b..62a432243 100644 --- a/src/main/webapp/styles/expression-preview-dialog.css +++ b/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;