Renamed HistoryWidget to HistoryPanel, ProcessWidget to ProcessPanel, SummaryWidget to SummaryBar, and renamed and moved their files accordingly.

Added quick filter support to history panel.


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

main/webapp/modules/core/MOD-INF/controller.js

@@ -180,15 +180,15 @@ function init() {
             "scripts/util/dom.js",
             "scripts/util/custom-suggest.js",
 
-            "scripts/widgets/history-widget.js",
-            "scripts/widgets/process-widget.js",
             "scripts/widgets/histogram-widget.js",
             "scripts/widgets/slider-widget.js",
 
-            "scripts/project/extension-bar.js",
-            "scripts/project/summary-widget.js",
-            "scripts/project/exporters.js",
             "scripts/project/browsing-engine.js",
+            "scripts/project/history-panel.js",
+            "scripts/project/process-panel.js",
+            "scripts/project/extension-bar.js",
+            "scripts/project/summary-bar.js",
+            "scripts/project/exporters.js",
             "scripts/project/scripting.js",
 
             "scripts/facets/list-facet.js",

main/webapp/modules/core/scripts/project.js

@@ -61,8 +61,8 @@ function resizeAll() {
     resizeTabs();
     ui.extensionBar.resize();
     ui.browsingEngine.resize();
-    ui.processWidget.resize();
+    ui.processPanel.resize();
-    ui.historyWidget.resize();
+    ui.historyPanel.resize();
     ui.dataTableView.resize();
 }
 
@@ -88,17 +88,17 @@ function initializeUI(uiState) {
     resize();
     resizeTabs();
     
-    ui.summaryWidget = new SummaryWidget(ui.summaryBar);
+    ui.summaryBar = new SummaryBar(ui.summaryBar);
     ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
-    ui.processWidget = new ProcessWidget(ui.processPanel);
+    ui.processPanel = new ProcessPanel(ui.processPanel);
-    ui.historyWidget = new HistoryWidget(ui.historyPanel, ui.historyTabHeader);
+    ui.historyPanel = new HistoryPanel(ui.historyPanel, ui.historyTabHeader);
     ui.dataTableView = new DataTableView(ui.viewPanel);
     
     ui.leftPanelTabs.bind('tabsshow', function(event, tabs) {
         if (tabs.index === 0) {
             ui.browsingEngine.resize();
         } else if (tabs.index === 1) {
-            ui.historyWidget.resize();
+            ui.historyPanel.resize();
         }
     });
     
@@ -178,7 +178,7 @@ Refine.createUpdateFunction = function(options, onFinallyDone) {
     };
     
     pushFunction(function(onDone) {
-        ui.historyWidget.update(onDone);
+        ui.historyPanel.update(onDone);
     });
     if (options.everythingChanged || options.modelsChanged || options.columnStatsChanged) {
         pushFunction(Refine.reinitializeProjectData);
@@ -276,7 +276,7 @@ Refine.postProcess = function(moduleName, command, params, body, updateOptions,
                 Refine.update(updateOptions, callbacks.onFinallyDone);
                 
                 if ("historyEntry" in o) {
-                    ui.processWidget.showUndo(o.historyEntry);
+                    ui.processPanel.showUndo(o.historyEntry);
                 }
             } else if (o.code == "pending") {
                 if ("onPending" in callbacks) {
@@ -286,7 +286,7 @@ Refine.postProcess = function(moduleName, command, params, body, updateOptions,
                         Refine.reportException(e);
                     }
                 }
-                ui.processWidget.update(updateOptions, callbacks.onFinallyDone);
+                ui.processPanel.update(updateOptions, callbacks.onFinallyDone);
             }
         }
     }

main/webapp/modules/core/scripts/project/history-panel.js

@@ -1,23 +1,24 @@
-function HistoryWidget(div, tabHeader) {
+function HistoryPanel(div, tabHeader) {
     this._div = div;
     this._tabHeader = tabHeader;
     this.update();
 }
 
-HistoryWidget.prototype.resize = function() {
+HistoryPanel.prototype.resize = function() {
     var body = this._div.find(".history-panel-body");
     var controls = this._div.find(".history-panel-controls");
+    var bodyControls = this._div.find(".history-panel-body-controls");
     var nowDiv = this._div.find(".history-now");
     
     var bodyPaddings = body.outerHeight(true) - body.height();
-    body.height((this._div.height() - controls.outerHeight(true) - bodyPaddings) + "px");
+    body.height((this._div.height() - controls.outerHeight(true) - bodyControls.outerHeight(true) - bodyPaddings) + "px");
     body[0].scrollTop = 
         nowDiv[0].offsetTop + 
         nowDiv[0].offsetHeight - 
         body[0].offsetHeight;
 };
 
-HistoryWidget.prototype.update = function(onDone) {
+HistoryPanel.prototype.update = function(onDone) {
     var self = this;
     Ajax.chainGetJSON(
         "/command/core/get-history?" + $.param({ project: theProject.id }), null,
@@ -32,7 +33,7 @@ HistoryWidget.prototype.update = function(onDone) {
     );
 };
 
-HistoryWidget.prototype._render = function() {
+HistoryPanel.prototype._render = function() {
     var self = this;
     
     this._tabHeader.html('Undo / Redo <span class="count">' + this._data.past.length + '</span>');
@@ -50,6 +51,9 @@ HistoryWidget.prototype._render = function() {
                 '<p>Don\'t worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>' +
                 '<p><a href="http://code.google.com/p/google-refine/wiki/GettingStarted?tm=6" target="_blank"><b>Learn more &raquo;</b></a></p>' +
             '</div>' +
+            '<div class="history-panel-body-controls" bind="bodyControlsDiv">Quick filter: ' +
+                '<input bind="filterInput" />' +
+            '</div>' +
             '<div class="history-panel-body" bind="bodyDiv">' +
                 '<div class="history-past" bind="pastDiv"><div class="history-highlight" bind="pastHighlightDiv"></div></div>' +
                 '<div class="history-now" bind="nowDiv">done upto here</div>' +
@@ -110,8 +114,20 @@ HistoryWidget.prototype._render = function() {
         }
         
         elmts.helpDiv.hide();
+        elmts.filterInput.keyup(function() {
+            var filter = $.trim(this.value.toLowerCase());
+            if (filter.length == 0) {
+                elmts.bodyDiv.find(".history-entry").show();
+            } else {
+                elmts.bodyDiv.find(".history-entry").each(function() {
+                    var text = this.childNodes[1].nodeValue;
+                    this.style.display = (text.toLowerCase().indexOf(filter) >= 0) ? "block" : "none";
+                });
+            }
+        });
     } else {
         elmts.bodyDiv.hide();
+        elmts.bodyControlsDiv.hide();
     }
     
     elmts.extractLink.click(function() { self._extractOperations(); });
@@ -120,7 +136,7 @@ HistoryWidget.prototype._render = function() {
     this.resize();
 };
 
-HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
+HistoryPanel.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
     var self = this;
     
     Refine.postCoreProcess(
@@ -131,7 +147,7 @@ HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID)
     );
 };
 
-HistoryWidget.prototype._extractOperations = function() {
+HistoryPanel.prototype._extractOperations = function() {
     var self = this;
     $.getJSON(
         "/command/core/get-operations?" + $.param({ project: theProject.id }), 
@@ -145,7 +161,7 @@ HistoryWidget.prototype._extractOperations = function() {
     );
 };
 
-HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
+HistoryPanel.prototype._showExtractOperationsDialog = function(json) {
     var self = this;
     var frame = $(DOM.loadHTML("core", "scripts/widgets/history-extract-dialog.html"));
     var elmts = DOM.bind(frame);
@@ -209,7 +225,7 @@ HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
     elmts.textarea[0].select();
 };
 
-HistoryWidget.prototype._showApplyOperationsDialog = function() {
+HistoryPanel.prototype._showApplyOperationsDialog = function() {
     var self = this;
     var frame = DialogSystem.createDialog();
     frame.width("800px");

main/webapp/modules/core/scripts/project/process-panel.js

@@ -1,4 +1,4 @@
-function ProcessWidget(div) {
+function ProcessPanel(div) {
     this._div = div;
     this._timerID = null;
     this._processCount = 0;
@@ -24,10 +24,10 @@ function ProcessWidget(div) {
     this.update({});
 }
 
-ProcessWidget.prototype.resize = function() {
+ProcessPanel.prototype.resize = function() {
 };
 
-ProcessWidget.prototype.update = function(updateOptions, onDone) {
+ProcessPanel.prototype.update = function(updateOptions, onDone) {
     this._latestHistoryEntry = null;
     
     for (var n in updateOptions) {
@@ -53,7 +53,7 @@ ProcessWidget.prototype.update = function(updateOptions, onDone) {
     );
 };
 
-ProcessWidget.prototype.showUndo = function(historyEntry) {
+ProcessPanel.prototype.showUndo = function(historyEntry) {
     var self = this;
     
     this._latestHistoryEntry = historyEntry;
@@ -70,7 +70,7 @@ ProcessWidget.prototype.showUndo = function(historyEntry) {
     elmts.close.click(function() { $(".process-panel-inner").stop(true,false).slideUp(150); });
 };
 
-ProcessWidget.prototype.undo = function() {
+ProcessPanel.prototype.undo = function() {
     if (this._latestHistoryEntry !== null) {
         Refine.postCoreProcess(
             "undo-redo",
@@ -81,7 +81,7 @@ ProcessWidget.prototype.undo = function() {
     }
 };
 
-ProcessWidget.prototype._cancelAll = function() {
+ProcessPanel.prototype._cancelAll = function() {
     var self = this;
     $.post(
         "/command/core/cancel-processes?" + $.param({ project: theProject.id }), 
@@ -94,7 +94,7 @@ ProcessWidget.prototype._cancelAll = function() {
     );
 };
 
-ProcessWidget.prototype._render = function(newData) {
+ProcessPanel.prototype._render = function(newData) {
     var self = this;
     var newProcessMap = {};
     
@@ -166,7 +166,7 @@ ProcessWidget.prototype._render = function(newData) {
     }
 };
 
-ProcessWidget.prototype._perform = function(jobs) {
+ProcessPanel.prototype._perform = function(jobs) {
     for (var i = 0; i < jobs.length; i++) {
         var job = jobs[i];
         if (job.action == "createFacet") {
@@ -183,7 +183,7 @@ ProcessWidget.prototype._perform = function(jobs) {
     }
 };
 
-ProcessWidget.prototype._runOnDones = function() {
+ProcessPanel.prototype._runOnDones = function() {
     var updateOptions = this._updateOptions;
     var onDones = this._onDones;
     

main/webapp/modules/core/scripts/project/summary-bar.js

@@ -1,13 +1,13 @@
-function SummaryWidget(div) {
+function SummaryBar(div) {
     this._div = div;
     this._initializeUI();
 }
 
-SummaryWidget.prototype._initializeUI = function() {
+SummaryBar.prototype._initializeUI = function() {
     
 };
 
-SummaryWidget.prototype.updateResultCount = function() {
+SummaryBar.prototype.updateResultCount = function() {
     var summaryText;
     var units = theProject.rowModel.mode == "row-based" ? "rows" : "records";
     if (theProject.rowModel.filtered == theProject.rowModel.total) {

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

@@ -46,7 +46,7 @@ DataTableView.prototype.render = function() {
     );
     var elmts = DOM.bind(html);
     
-    ui.summaryWidget.updateResultCount();
+    ui.summaryBar.updateResultCount();
     
     var renderBrowsingModeLink = function(label, value) {
         var a = $('<a href="javascript:{}"></a>')

main/webapp/modules/core/styles/project/sidebar.less

@@ -67,10 +67,14 @@
 @history_entry_hpadding: 5px;
 @history_entry_index_width: 30px;
 
-.history-panel-body {
+.history-panel-controls {
-    background: @history_undone_background;
+    padding: @padding_normal;
-    overflow: auto;
+    text-align: right;
-    border-top: 1px solid @chrome_primary;
+    font-weight: bold;
+    
+    a {
+      text-decoration: none;
+    }
 }
 
 .history-panel-message {
@@ -79,6 +83,20 @@
     padding: @padding_loose;
 }
 
+.history-panel-body-controls {
+    padding: @padding_tighter @padding_normal;
+    
+    input {
+      vertical-align: baseline;
+    }
+}
+
+.history-panel-body {
+    background: @history_undone_background;
+    overflow: auto;
+    border-top: 1px solid @chrome_primary;
+}
+
 .history-past {
     position: relative;
     background: @history_done_background;
@@ -144,16 +162,6 @@ a.history-entry {
     border-bottom: 2px solid @history_now_background;
 }
 
-.history-panel-controls {
-    padding: 6px;
-    text-align: right;
-    font-weight: bold;
-    
-    a {
-      text-decoration: none;
-    }
-}
-
 .extract-operation-dialog-entries {
     height: 400px;
     padding: 2px;