Started work on the facet-based edit dialog, which allows editing of cells based on their projections to facet choices.
git-svn-id: http://google-refine.googlecode.com/svn/trunk@166 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
parent
512cd16381
commit
d9507200f8
@ -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" />
|
||||
<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> » </div>
</div>
<div id="body">
<div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div>
</div>
</body>
</html>
|
||||
<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/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> » </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
147
src/main/webapp/scripts/dialogs/facet-based-edit-dialog.js
Normal 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();
|
||||
};
|
@ -203,9 +203,26 @@ ListFacet.prototype.render = function() {
|
||||
self.render();
|
||||
}).appendTo(footerDiv);
|
||||
}
|
||||
|
||||
$('<span>').html(" • ").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) {
|
||||
if (only) {
|
||||
this._selection = [];
|
||||
|
@ -3,7 +3,9 @@ var DOM = {};
|
||||
DOM.bind = function(elmt) {
|
||||
var map = {};
|
||||
|
||||
DOM._bindDOMChildren(elmt[0], map);
|
||||
for (var i = 0; i < elmt.length; i++) {
|
||||
DOM._bindDOMElement(elmt[i], map);
|
||||
}
|
||||
|
||||
return map;
|
||||
};
|
||||
|
46
src/main/webapp/styles/facet-based-edit-dialog.css
Normal file
46
src/main/webapp/styles/facet-based-edit-dialog.css
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user