From aa1a362bb2e54fa40273de592dafc107c6a2c6f1 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Thu, 28 Jun 2012 23:52:58 +0100 Subject: [PATCH] [#94,transform][m]: rework transform functionality and integration extensively (+ its working again!). * view.transform.js: major refactor * general record transform rather than column transform * Normal dataset view rather than modal * Reworked UI * split out css from grid.css and simplify * model.js + backend.memory.js: transform implemented on Dataset and Memory (Dataset passes off to _store). * multiview: use new transform view * _includes/recline-deps - rework to use source files rather than built ones --- _includes/recline-deps.html | 29 ++++++- css/grid.css | 88 -------------------- css/transform.css | 31 ++++++++ demos/multiview/app.js | 34 +------- src/backend.memory.js | 9 +++ src/costco.js | 8 +- src/model.js | 14 ++++ src/view.multiview.js | 10 ++- src/view.transform.js | 155 +++++++++++++----------------------- test/index.html | 1 - 10 files changed, 153 insertions(+), 226 deletions(-) create mode 100644 css/transform.css diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 7ffe11d8..b46ee403 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -5,7 +5,12 @@ - + + + + + + @@ -22,5 +27,27 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/css/grid.css b/css/grid.css index efe1dd37..4622b69f 100644 --- a/css/grid.css +++ b/css/grid.css @@ -185,94 +185,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { color: #999; } - -/********************************************************** - * Transform Dialog - *********************************************************/ - -textarea.expression-preview-code { - font-family: monospace; - height: 5em; - vertical-align: top; -} - -.expression-preview-parsing-status { - color: #999; -} - -.expression-preview-parsing-status.error { - color: red; -} - -#expression-preview-tabs-preview, -#expression-preview-tabs-help, -#expression-preview-tabs-history, -#expression-preview-tabs-starred { - padding: 5px; - overflow: hidden; -} - -#expression-preview-tabs-preview > div, -#expression-preview-tabs-help > div, -#expression-preview-tabs-history > div, -#expression-preview-tabs-starred { - height: 200px; - overflow: auto; -} - -#expression-preview-tabs-preview td, #expression-preview-tabs-preview th, -#expression-preview-tabs-help td, #expression-preview-tabs-help th, -#expression-preview-tabs-history td, #expression-preview-tabs-history th, -#expression-preview-tabs-starred td, #expression-preview-tabs-starred th { - padding: 5px; -} - -.expression-preview-table-wrapper { - padding: 7px; -} - -.expression-preview-container td { - padding: 2px 5px; - border-top: 1px solid #ccc; -} - -td.expression-preview-heading { - border-top: none; - background: #ddd; - font-weight: bold; -} - -td.expression-preview-value { - max-width: 250px !important; - overflow-x: hidden; -} - -.expression-preview-special-value { - color: #aaa; -} - -.expression-preview-help-container h3 { - margin-top: 15px; - margin-bottom: 7px; - border-bottom: 1px solid #999; -} - -.expression-preview-doc-item-title { - font-weight: bold; - text-align: right; -} - -.expression-preview-doc-item-params { -} - -.expression-preview-doc-item-returns { -} - -.expression-preview-doc-item-desc { - color: #666; -} - - /********************************************************** * Read-only mode *********************************************************/ diff --git a/css/transform.css b/css/transform.css new file mode 100644 index 00000000..1d25f87b --- /dev/null +++ b/css/transform.css @@ -0,0 +1,31 @@ +.recline-transform .script { + margin-right: 10px; +} + +.recline-transform .script textarea { + width: 100%; + height: 100px; + font-family: monospace; +} + +.recline-transform h2 { + margin-bottom: 10px; +} + +.recline-transform h2 .okButton { + margin-left: 10px; + margin-top: -2px; +} + +.recline-transform .preview { + margin-right: 10px; +} + +.expression-preview-parsing-status { + color: #999; +} + +.expression-preview-parsing-status.error { + color: red; +} + diff --git a/demos/multiview/app.js b/demos/multiview/app.js index 30063c3f..b127bee7 100755 --- a/demos/multiview/app.js +++ b/demos/multiview/app.js @@ -36,43 +36,11 @@ var createExplorer = function(dataset, state) { window.dataExplorer = null; var $el = $('
'); $el.appendTo(window.explorerDiv); - var views = [ - { - id: 'grid', - label: 'Grid', - view: new recline.View.SlickGrid({ - model: dataset - }) - }, - - { - id: 'graph', - label: 'Graph', - view: new recline.View.Graph({ - model: dataset - }) - }, - { - id: 'map', - label: 'Map', - view: new recline.View.Map({ - model: dataset - }) - }, - { - id: 'timeline', - label: 'Timeline', - view: new recline.View.Timeline({ - model: dataset - }) - } - ]; window.dataExplorer = new recline.View.MultiView({ model: dataset, el: $el, - state: state, - views: views + state: state }); } diff --git a/src/backend.memory.js b/src/backend.memory.js index 89515921..c228b145 100644 --- a/src/backend.memory.js +++ b/src/backend.memory.js @@ -161,6 +161,15 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {}; }); return facetResults; }; + + this.transform = function(editFunc) { + var toUpdate = costco.mapDocs(this.data, editFunc); + // TODO: very inefficient -- could probably just walk the documents and updates in tandem and update + _.each(toUpdate.updates, function(record, idx) { + self.update(record); + }); + return this.save(toUpdate); + }; }; }(jQuery, this.recline.Backend.Memory)); diff --git a/src/costco.js b/src/costco.js index 86754390..24e40ff4 100644 --- a/src/costco.js +++ b/src/costco.js @@ -20,9 +20,9 @@ var costco = function() { ; if (!after) after = {}; if (currentColumn) { - preview.push({before: JSON.stringify(before[currentColumn]), after: JSON.stringify(after[currentColumn])}); + preview.push({before: before[currentColumn], after: after[currentColumn]}); } else { - preview.push({before: JSON.stringify(before), after: JSON.stringify(after)}); + preview.push({before: before, after: after}); } } return preview; @@ -53,9 +53,9 @@ var costco = function() { }); return { - edited: edited, + updates: edited, docs: updatedDocs, - deleted: deleted, + deletes: deleted, failed: failed }; } diff --git a/src/model.js b/src/model.js index 2266c290..50721278 100644 --- a/src/model.js +++ b/src/model.js @@ -149,6 +149,20 @@ my.Dataset = Backbone.Model.extend({ return this._store.save(this._changes, this.toJSON()); }, + transform: function(editFunc) { + var self = this; + if (!this._store.transform) { + alert('Transform is not supported with this backend: ' + this.get('backend')); + return; + } + this.trigger('recline:flash', {message: "Updating all visible docs. This could take a while...", persist: true, loader: true}); + this._store.transform(editFunc).done(function() { + // reload data as records have changed + self.query(); + self.trigger('recline:flash', {message: "Records updated successfully"}); + }); + }, + // ### query // // AJAX method with promise API to get records from the backend. diff --git a/src/view.multiview.js b/src/view.multiview.js index 477d7013..24f1441a 100644 --- a/src/view.multiview.js +++ b/src/view.multiview.js @@ -83,7 +83,7 @@ my.MultiView = Backbone.View.extend({
\ \
\ - Results found {{docCount}} \ + {{docCount}} records\
\
\
\ @@ -139,6 +139,12 @@ my.MultiView = Backbone.View.extend({ model: this.model, state: this.state.get('view-timeline') }), + }, { + id: 'transform', + label: 'Transform', + view: new my.Transform({ + model: this.model + }) }]; } // these must be called after pageViews are created @@ -264,6 +270,8 @@ my.MultiView = Backbone.View.extend({ this.$filterEditor.toggle(); } else if (action === 'fields') { this.$fieldsView.toggle(); + } else if (action === 'transform') { + this.transformView.el.toggle(); } }, diff --git a/src/view.transform.js b/src/view.transform.js index a0ae741f..3c8aa262 100644 --- a/src/view.transform.js +++ b/src/view.transform.js @@ -8,61 +8,23 @@ this.recline.View = this.recline.View || {}; // ## ColumnTransform // -// View (Dialog) for doing data transformations (on columns of data). -my.ColumnTransform = Backbone.View.extend({ - className: 'transform-column-view modal fade in', +// View (Dialog) for doing data transformations +my.Transform = Backbone.View.extend({ + className: 'recline-transform', template: ' \ -
\ - × \ -

Functional transform on column {{name}}

\ +
\ +

\ + Transform Script \ + \ +

\ + \
\ -
\ -
\ - \ - \ - \ - \ - \ - \ -
\ -
\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ -
\ - Expression \ -
\ -
\ - \ -
\ - 		\ - No syntax error. \ -
\ -
\ - Preview \ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ +
\ + No syntax error. \
\ -
\ - \ - \ +
\ +

Preview

\ +
\
\ ', @@ -71,19 +33,19 @@ my.ColumnTransform = Backbone.View.extend({ 'keydown .expression-preview-code': 'onEditorKeydown' }, - initialize: function() { + initialize: function(options) { this.el = $(this.el); + this.render(); }, render: function() { - var htmls = Mustache.render(this.template, - {name: this.state.currentColumn} - ); + var htmls = Mustache.render(this.template); this.el.html(htmls); // Put in the basic (identity) transform script // TODO: put this into the template? var editor = this.el.find('.expression-preview-code'); - editor.val("function(doc) {\n doc['"+ this.state.currentColumn+"'] = doc['"+ this.state.currentColumn+"'];\n return doc;\n}"); + var col = this.model.fields.models[0].id; + editor.val("function(doc) {\n doc['"+ col +"'] = doc['"+ col +"'];\n return doc;\n}"); editor.focus().get(0).setSelectionRange(18, 18); editor.keydown(); }, @@ -96,58 +58,38 @@ my.ColumnTransform = Backbone.View.extend({ this.trigger('recline:flash', {message: "Error with function! " + editFunc.errorMessage}); return; } - this.el.modal('hide'); - this.trigger('recline:flash', {message: "Updating all visible docs. This could take a while...", persist: true, loader: true}); - var docs = self.model.currentRecords.map(function(doc) { - return doc.toJSON(); - }); - // TODO: notify about failed docs? - var toUpdate = costco.mapDocs(docs, editFunc).edited; - var totalToUpdate = toUpdate.length; - function onCompletedUpdate() { - totalToUpdate += -1; - if (totalToUpdate === 0) { - self.trigger('recline:flash', {message: toUpdate.length + " records updated successfully"}); - alert('WARNING: We have only updated the docs in this view. (Updating of all docs not yet implemented!)'); - self.remove(); - } - } - // TODO: Very inefficient as we search through all docs every time! - _.each(toUpdate, function(editedDoc) { - var realDoc = self.model.currentRecords.get(editedDoc.id); - realDoc.set(editedDoc); - realDoc.save().then(onCompletedUpdate).fail(onCompletedUpdate); - }); - this.el.remove(); + this.model.transform(editFunc); }, editPreviewTemplate: ' \ -
\ - \ +
\ \ \ - \ - \ + \ + {{#fields}} \ + \ + {{/fields}} \ \ \ \ - {{#rows}} \ \ + \ + {{#row.before}} \ \ - \ + {{/row.before}} \ + \ + \ + \ + {{#row.after}} \ + \ + {{/row.after}} \ \ - {{/rows}} \ \
\ - before \ - \ - after \ - {{id}}
Before \ - {{before}} \ - \ - {{after}} \ + {{.}} \
After \ + {{.}} \ +
\ -
\ ', onEditorKeydown: function(e) { @@ -161,10 +103,27 @@ my.ColumnTransform = Backbone.View.extend({ var docs = self.model.currentRecords.map(function(doc) { return doc.toJSON(); }); - var previewData = costco.previewTransform(docs, editFunc, self.state.currentColumn); + var previewData = costco.previewTransform(docs, editFunc); var $el = self.el.find('.expression-preview-container'); - var templated = Mustache.render(self.editPreviewTemplate, {rows: previewData.slice(0,4)}); - $el.html(templated); + var fields = self.model.fields.toJSON(); + var rows = _.map(previewData.slice(0,4), function(row) { + return { + before: _.map(fields, function(field) { + return row.before[field.id]; + }), + after: _.map(fields, function(field) { + return row.after[field.id]; + }) + }; + }); + $el.html(''); + _.each(rows, function(row) { + var templated = Mustache.render(self.editPreviewTemplate, { + fields: fields, + row: row + }); + $el.append(templated); + }); } else { errors.text(editFunc.errorMessage); } diff --git a/test/index.html b/test/index.html index 7a31b6a0..939ffd37 100644 --- a/test/index.html +++ b/test/index.html @@ -29,7 +29,6 @@ -