s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Started work on the facet-based edit dialog, which allows editing of cells based on their projections to facet choices.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@166 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-02 19:58:47 +00:00
parent 512cd16381
commit d9507200f8
5 changed files with 215 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/webapp/project.html
View File

@ -1,2 +1,2 @@
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridworks</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/menu.css" /> <link rel="stylesheet" href="/styles/dialog.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/data-table-view.css" /> <link rel="stylesheet" href="/styles/history.css" /> <link rel="stylesheet" href="/styles/browsing.css" /> <link rel="stylesheet" href="/styles/process.css" /> <link rel="stylesheet" href="/styles/menu-bar.css" /> <link rel="stylesheet" href="/styles/expression-preview-dialog.css" /> <link rel="stylesheet" href="/styles/schema-alignment-dialog.css" /> <link rel="stylesheet" href="/styles/recon-dialog.css" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridworks</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/menu.css" /> <link rel="stylesheet" href="/styles/dialog.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/data-table-view.css" /> <link rel="stylesheet" href="/styles/history.css" /> <link rel="stylesheet" href="/styles/browsing.css" /> <link rel="stylesheet" href="/styles/process.css" /> <link rel="stylesheet" href="/styles/menu-bar.css" /> <link rel="stylesheet" href="/styles/expression-preview-dialog.css" /> <link rel="stylesheet" href="/styles/schema-alignment-dialog.css" /> <link rel="stylesheet" href="/styles/recon-dialog.css" /> <link rel="stylesheet" href="/styles/facet-based-edit-dialog.css" />
<script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html> <script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/facet-based-edit-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>

147
src/main/webapp/scripts/dialogs/facet-based-edit-dialog.js Normal file
View File

@ -0,0 +1,147 @@
function FacetBasedEditDialog(columnName, entries) {
this._columnName = columnName;
this._entries = entries;
this._createDialog();
this._cluster();
}
FacetBasedEditDialog.prototype._createDialog = function() {
var self = this;
var frame = DialogSystem.createDialog();
frame.width("800px");
var header = $('<div></div>').addClass("dialog-header").text("Facet-based edit of column " + this._columnName).appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
var html = $(
'<div>' +
'<div bind="tableContainer" class="facet-based-edit-dialog-table-container"></div>' +
'<div class="facet-based-edit-dialog-controls">' +
'<button bind="clusterButton">Cluster</button> ' +
'<button bind="unclusterButton">Un-cluster</button> ' +
'</div>' +
'</div>'
).appendTo(body);
this._elmts = DOM.bind(html);
this._elmts.clusterButton.click(function() { self._cluster(); });
this._elmts.unclusterButton.click(function() { self._uncluster(); });
$('<button></button>').text("OK").click(function() { self._onOK(); }).appendTo(footer);
$('<button></button>').text("Cancel").click(function() { self._dismiss(); }).appendTo(footer);
this._level = DialogSystem.showDialog(frame);
$("#recon-dialog-tabs").tabs();
$("#recon-dialog-tabs-strict").css("display", "");
};
FacetBasedEditDialog.prototype._renderTable = function() {
var self = this;
var container = this._elmts.tableContainer.empty();
var table = $('<table></table>').addClass("facet-based-edit-dialog-entry-table").appendTo(container)[0];
var trHead = table.insertRow(table.rows.length);
trHead.className = "header";
$(trHead.insertCell(0)).text("Current facet choices");
$(trHead.insertCell(1)).text("Edit?");
$(trHead.insertCell(2)).text("New cell value");
var renderCluster = function(cluster) {
var tr = table.insertRow(table.rows.length);
tr.className = table.rows.length % 2 == 0 ? "odd" : "even";
var ul = $(tr.insertCell(0));
var choices = cluster.choices;
for (var c = 0; c < choices.length; c++) {
var choice = choices[c];
var li = $('<li>').appendTo(ul);
$('<span>').text(choice.v.l).appendTo(li);
$('<span>').text(" (" + choice.c + ")").appendTo(li);
}
var editCheck = $('<input type="checkbox" />')
.appendTo(tr.insertCell(1))
.click(function() {
cluster.edit = !cluster.edit;
});
if (cluster.edit) {
editCheck.attr("checked", "true");
}
var input = $('<input size="35" />')
.attr("value", cluster.value)
.appendTo(tr.insertCell(2))
.keyup(function() {
cluster.value = this.value;
});
};
for (var i = 0; i < this._clusters.length; i++) {
renderCluster(this._clusters[i]);
}
};
FacetBasedEditDialog.prototype._onOK = function() {
};
FacetBasedEditDialog.prototype._dismiss = function() {
DialogSystem.dismissUntil(this._level - 1);
};
FacetBasedEditDialog.prototype._cluster = function() {
var clusters = [];
var map = {};
$.each(this._entries, function() {
var choice = {
v: this.v,
c: this.c
};
var s = this.v.l.toLowerCase().replace(/\W/g, ' ').replace(/\s+/g, ' ').split(" ").sort().join(" ");
if (s in map) {
map[s].choices.push(choice);
} else {
map[s] = {
edit: false,
choices: [ choice ]
};
clusters.push(map[s]);
}
});
$.each(clusters, function() {
this.choices.sort(function(a, b) {
var c = b.c - a.c;
return c != 0 ? c : a.v.l.localeCompare(b.v.l);
});
this.value = this.choices[0].v.l;
});
clusters.sort(function(a, b) {
var c = b.choices.length - a.choices.length;
return c != 0 ? c : a.value.localeCompare(b.value);
});
this._clusters = clusters;
this._renderTable();
};
FacetBasedEditDialog.prototype._uncluster = function() {
var clusters = [];
$.each(this._entries, function() {
var cluster = {
edit: false,
choices: [{
v: this.v,
c: this.c
}],
value: this.v.l
};
clusters.push(cluster);
});
this._clusters = clusters;
this._renderTable();
};

17
src/main/webapp/scripts/facets/list-facet.js
View File

@ -203,9 +203,26 @@ ListFacet.prototype.render = function() {
self.render(); self.render();
}).appendTo(footerDiv); }).appendTo(footerDiv);
} }
$('<span>').html(" &bull; ").appendTo(footerDiv);
$('<a href="javascript:{}"></a>').addClass("action").text("edit").click(function() {
self._doEdit();
}).appendTo(footerDiv);
} }
}; };
ListFacet.prototype._doEdit = function() {
var entries = [];
for (var i = 0; i < this._data.choices.length; i++) {
var choice = this._data.choices[i];
entries.push({
v: choice.v,
c: choice.c
});
}
new FacetBasedEditDialog(this._config.columnName, entries);
};
ListFacet.prototype._select = function(choice, only) { ListFacet.prototype._select = function(choice, only) {
if (only) { if (only) {
this._selection = []; this._selection = [];

4
src/main/webapp/scripts/util/dom.js
View File

@ -3,7 +3,9 @@ var DOM = {};
DOM.bind = function(elmt) { DOM.bind = function(elmt) {
var map = {}; var map = {};
DOM._bindDOMChildren(elmt[0], map); for (var i = 0; i < elmt.length; i++) {
DOM._bindDOMElement(elmt[i], map);
}
return map; return map;
}; };

46
src/main/webapp/styles/facet-based-edit-dialog.css Normal file
View File

@ -0,0 +1,46 @@
table.facet-based-edit-dialog-main-layout {
border-collapse: collapse;
}
table.facet-based-edit-dialog-main-layout > tbody > tr > td {
padding: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
table.facet-based-edit-dialog-main-layout > tbody > tr > td:last-child {
padding-right: 0px;
}
table.facet-based-edit-dialog-main-layout > tbody > tr:last-child > td {
padding-bottom: 0px;
}
.facet-based-edit-dialog-table-container {
height: 450px;
overflow: auto;
border: 1px solid #aaa;
}
table.facet-based-edit-dialog-entry-table {
border-collapse: collapse;
width: 100%;
}
table.facet-based-edit-dialog-entry-table > tbody > tr.header {
background: #ccc;
font-weight: bold;
}
table.facet-based-edit-dialog-entry-table > tbody > tr > td {
padding: 2px 5px;
}
table.facet-based-edit-dialog-entry-table > tbody > tr.odd > td {
background: #eee;
}
table.facet-based-edit-dialog-entry-table > tbody > tr.even > td {
background: white;
}
table.facet-based-edit-dialog-entry-table input {
border: none;
}