knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#94,transform][m]: rework transform functionality and integration extensively (+ its working again!).

Browse Source 
* 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
This commit is contained in:
Rufus Pollock
2012-06-28 23:52:58 +01:00
parent c2f5debf1f
commit aa1a362bb2
10 changed files with 153 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
_includes/recline-deps.html
View File

@@ -5,7 +5,12 @@
<link rel="stylesheet" href="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.css"> <link rel="stylesheet" href="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.css">
<!-- Recline CSS components --> <!-- Recline CSS components -->
<link rel="stylesheet" href="{{page.root}}dist/recline.css"> <link rel="stylesheet" href="{{page.root}}css/grid.css">
<link rel="stylesheet" href="{{page.root}}css/slickgrid.css">
<link rel="stylesheet" href="{{page.root}}css/graph.css">
<link rel="stylesheet" href="{{page.root}}css/transform.css">
<link rel="stylesheet" href="{{page.root}}css/map.css">
<link rel="stylesheet" href="{{page.root}}css/multiview.css">
<!-- /Recline CSS components --> <!-- /Recline CSS components -->
<!-- 3rd party JS libraries --> <!-- 3rd party JS libraries -->
@@ -22,5 +27,27 @@
<script type="text/javascript" src="{{page.root}}vendor/moment/1.6.2/moment.js"></script> <script type="text/javascript" src="{{page.root}}vendor/moment/1.6.2/moment.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/timeline/20120520/js/timeline.js"></script> <script type="text/javascript" src="{{page.root}}vendor/timeline/20120520/js/timeline.js"></script>
<!--
<script type="text/javascript" src="{{page.root}}dist/recline.js"></script> <script type="text/javascript" src="{{page.root}}dist/recline.js"></script>
-->
<script type="text/javascript" src="{{page.root}}src/model.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.memory.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.dataproxy.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.gdocs.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.elasticsearch.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.csv.js"></script>
<!-- views and view tests -->
<script type="text/javascript" src="{{page.root}}src/view.grid.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.slickgrid.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.transform.js"></script>
<script type="text/javascript" src="{{page.root}}src/costco.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.graph.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.map.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.timeline.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.pager.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.queryeditor.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.filtereditor.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.fields.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.multiview.js"></script>

88
css/grid.css
View File

@@ -185,94 +185,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
color: #999; 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 * Read-only mode
*********************************************************/ *********************************************************/

31
css/transform.css Normal file
View File

@@ -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;
}

34
demos/multiview/app.js
View File

@@ -36,43 +36,11 @@ var createExplorer = function(dataset, state) {
window.dataExplorer = null; window.dataExplorer = null;
var $el = $('<div />'); var $el = $('<div />');
$el.appendTo(window.explorerDiv); $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({ window.dataExplorer = new recline.View.MultiView({
model: dataset, model: dataset,
el: $el, el: $el,
state: state, state: state
views: views
}); });
} }

9
src/backend.memory.js
View File

@@ -161,6 +161,15 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {};
}); });
return facetResults; 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)); }(jQuery, this.recline.Backend.Memory));

8
src/costco.js
View File

@@ -20,9 +20,9 @@ var costco = function() {
; ;
if (!after) after = {}; if (!after) after = {};
if (currentColumn) { if (currentColumn) {
preview.push({before: JSON.stringify(before[currentColumn]), after: JSON.stringify(after[currentColumn])}); preview.push({before: before[currentColumn], after: after[currentColumn]});
} else { } else {
preview.push({before: JSON.stringify(before), after: JSON.stringify(after)}); preview.push({before: before, after: after});
} }
} }
return preview; return preview;
@@ -53,9 +53,9 @@ var costco = function() {
}); });
return { return {
edited: edited, updates: edited,
docs: updatedDocs, docs: updatedDocs,
deleted: deleted, deletes: deleted,
failed: failed failed: failed
}; };
} }

14
src/model.js
View File

@@ -149,6 +149,20 @@ my.Dataset = Backbone.Model.extend({
return this._store.save(this._changes, this.toJSON()); 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 // ### query
// //
// AJAX method with promise API to get records from the backend. // AJAX method with promise API to get records from the backend.

10
src/view.multiview.js
View File

@@ -83,7 +83,7 @@ my.MultiView = Backbone.View.extend({
</div> \ </div> \
</div> \ </div> \
<div class="recline-results-info"> \ <div class="recline-results-info"> \
Results found <span class="doc-count">{{docCount}}</span> \ <span class="doc-count">{{docCount}}</span> records\
</div> \ </div> \
<div class="menu-right"> \ <div class="menu-right"> \
<div class="btn-group" data-toggle="buttons-checkbox"> \ <div class="btn-group" data-toggle="buttons-checkbox"> \
@@ -139,6 +139,12 @@ my.MultiView = Backbone.View.extend({
model: this.model, model: this.model,
state: this.state.get('view-timeline') 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 // these must be called after pageViews are created
@@ -264,6 +270,8 @@ my.MultiView = Backbone.View.extend({
this.$filterEditor.toggle(); this.$filterEditor.toggle();
} else if (action === 'fields') { } else if (action === 'fields') {
this.$fieldsView.toggle(); this.$fieldsView.toggle();
} else if (action === 'transform') {
this.transformView.el.toggle();
} }
}, },

155
src/view.transform.js
View File

@@ -8,61 +8,23 @@ this.recline.View = this.recline.View || {};
// ## ColumnTransform // ## ColumnTransform
// //
// View (Dialog) for doing data transformations (on columns of data). // View (Dialog) for doing data transformations
my.ColumnTransform = Backbone.View.extend({ my.Transform = Backbone.View.extend({
className: 'transform-column-view modal fade in', className: 'recline-transform',
template: ' \ template: ' \
<div class="modal-header"> \ <div class="script"> \
<a class="close" data-dismiss="modal">×</a> \ <h2> \
<h3>Functional transform on column {{name}}</h3> \ Transform Script \
<button class="okButton btn btn-primary">Run on all records</button> \
</h2> \
<textarea class="expression-preview-code"></textarea> \
</div> \ </div> \
<div class="modal-body"> \ <div class="expression-preview-parsing-status"> \
<div class="grid-layout layout-tight layout-full"> \ No syntax error. \
<table> \
<tbody> \
<tr> \
<td colspan="4"> \
<div class="grid-layout layout-tight layout-full"> \
<table rows="4" cols="4"> \
<tbody> \
<tr style="vertical-align: bottom;"> \
<td colspan="4"> \
Expression \
</td> \
</tr> \
<tr> \
<td colspan="3"> \
<div class="input-container"> \
<textarea class="expression-preview-code"></textarea> \
</div> \
</td> \
<td class="expression-preview-parsing-status" width="150" style="vertical-align: top;"> \
No syntax error. \
</td> \
</tr> \
<tr> \
<td colspan="4"> \
<div id="expression-preview-tabs"> \
<span>Preview</span> \
<div id="expression-preview-tabs-preview"> \
<div class="expression-preview-container"> \
</div> \
</div> \
</div> \
</td> \
</tr> \
</tbody> \
</table> \
</div> \
</td> \
</tr> \
</tbody> \
</table> \
</div> \
</div> \ </div> \
<div class="modal-footer"> \ <div class="preview"> \
<button class="okButton btn primary">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \ <h3>Preview</h3> \
<button class="cancelButton btn danger">Cancel</button> \ <div class="expression-preview-container"></div> \
</div> \ </div> \
', ',
@@ -71,19 +33,19 @@ my.ColumnTransform = Backbone.View.extend({
'keydown .expression-preview-code': 'onEditorKeydown' 'keydown .expression-preview-code': 'onEditorKeydown'
}, },
initialize: function() { initialize: function(options) {
this.el = $(this.el); this.el = $(this.el);
this.render();
}, },
render: function() { render: function() {
var htmls = Mustache.render(this.template, var htmls = Mustache.render(this.template);
{name: this.state.currentColumn}
);
this.el.html(htmls); this.el.html(htmls);
// Put in the basic (identity) transform script // Put in the basic (identity) transform script
// TODO: put this into the template? // TODO: put this into the template?
var editor = this.el.find('.expression-preview-code'); 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.focus().get(0).setSelectionRange(18, 18);
editor.keydown(); editor.keydown();
}, },
@@ -96,58 +58,38 @@ my.ColumnTransform = Backbone.View.extend({
this.trigger('recline:flash', {message: "Error with function! " + editFunc.errorMessage}); this.trigger('recline:flash', {message: "Error with function! " + editFunc.errorMessage});
return; return;
} }
this.el.modal('hide'); this.model.transform(editFunc);
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();
}, },
editPreviewTemplate: ' \ editPreviewTemplate: ' \
<div class="expression-preview-table-wrapper"> \ <table class="table table-condensed table-bordered"> \
<table class="table table-condensed"> \
<thead> \ <thead> \
<tr> \ <tr> \
<th class="expression-preview-heading"> \ <th></th> \
before \ {{#fields}} \
</th> \ <th>{{id}}</th> \
<th class="expression-preview-heading"> \ {{/fields}} \
after \
</th> \
</tr> \ </tr> \
</thead> \ </thead> \
<tbody> \ <tbody> \
{{#rows}} \
<tr> \ <tr> \
<th>Before</th> \
{{#row.before}} \
<td class="expression-preview-value"> \ <td class="expression-preview-value"> \
{{before}} \ {{.}} \
</td> \
<td class="expression-preview-value"> \
{{after}} \
</td> \ </td> \
{{/row.before}} \
</tr> \
<tr> \
<th>After</th> \
{{#row.after}} \
<td class="expression-preview-value"> \
{{.}} \
</td> \
{{/row.after}} \
</tr> \ </tr> \
{{/rows}} \
</tbody> \ </tbody> \
</table> \ </table> \
</div> \
', ',
onEditorKeydown: function(e) { onEditorKeydown: function(e) {
@@ -161,10 +103,27 @@ my.ColumnTransform = Backbone.View.extend({
var docs = self.model.currentRecords.map(function(doc) { var docs = self.model.currentRecords.map(function(doc) {
return doc.toJSON(); 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 $el = self.el.find('.expression-preview-container');
var templated = Mustache.render(self.editPreviewTemplate, {rows: previewData.slice(0,4)}); var fields = self.model.fields.toJSON();
$el.html(templated); 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 { } else {
errors.text(editFunc.errorMessage); errors.text(editFunc.errorMessage);
} }

1
test/index.html
View File

@@ -29,7 +29,6 @@
<!-- model and backend tests --> <!-- model and backend tests -->
<script type="text/javascript" src="../src/model.js"></script> <script type="text/javascript" src="../src/model.js"></script>
<script type="text/javascript" src="../src/backend.base.js"></script>
<script type="text/javascript" src="../src/backend.memory.js"></script> <script type="text/javascript" src="../src/backend.memory.js"></script>
<script type="text/javascript" src="../src/backend.dataproxy.js"></script> <script type="text/javascript" src="../src/backend.dataproxy.js"></script>
<script type="text/javascript" src="../src/backend.gdocs.js"></script> <script type="text/javascript" src="../src/backend.gdocs.js"></script>