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

Redesigned the recon dialog. New features are not implemented yet.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@161 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-01 21:38:50 +00:00
parent 621655372f
commit a17882c44f
3 changed files with 260 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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" />
<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> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>

279
src/main/webapp/scripts/dialogs/recon-dialog.js
View File

@ -1,96 +1,221 @@
function ReconDialog(column, types) {
this._column = column;
this._types = types;
this._types = types.slice(0, 10);
var defaultTypes = {
"/people/person" : {
name: "Person"
},
"/location/location" : {
name: "Location"
}
};
$.each(this._types, function() {
delete defaultTypes[this.id];
});
for (var id in defaultTypes) {
this._types.push({
id: id,
name: defaultTypes[id].name
});
}
this._createDialog();
}
ReconDialog.prototype._createDialog = function() {
var self = this;
var frame = DialogSystem.createDialog();
frame.width("500px");
frame.width("800px");
var header = $('<div></div>').addClass("dialog-header").text("Reconcile column " + this._column.headerLabel).appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
$('<p>').text("Reconcile cell values to Freebase topics of type:").appendTo(body);
var html = $(
'<div id="recon-dialog-tabs">' +
'<ul>' +
'<li><a href="#recon-dialog-tabs-heuristic">Heuristic</a></li>' +
'<li><a href="#recon-dialog-tabs-strict">Strict</a></li>' +
'</ul>' +
'<div id="recon-dialog-tabs-heuristic">' +
'<table class="recon-dialog-main-layout" width="100%">' +
'<tr>' +
'<td>Reconcile each cell to a Freebase topic of type:</td>' +
'<td>Also use relevant details from other columns:</td>' +
'</tr>' +
'<tr>' +
'<td>' +
'<div class="recon-dialog-heuristic-types-container" bind="heuristicTypeContainer">' +
'</div>' +
'<table class="recon-dialog-heuristic-other-type-container recon-dialog-inner-layout">' +
'<tr>' +
'<td width="1"><input type="radio" name="recon-dialog-type-choice" value=""></td>' +
'<td>Search for type: <input size="20" bind="heuristicTypeInput" /></td>' +
'<tr>' +
'</table>' +
'</td>' +
'<td width="50%">' +
'<div class="recon-dialog-heuristic-details-container" bind="heuristicDetailContainer"></div>' +
'</td>' +
'</tr>' +
'</table>' +
'<p>' +
'<input type="checkbox" checked bind="heuristicAutomatchCheck" /> Auto-match correctly-typed candidates scoring at least ' +
'<input size="3" value="100" bind="heuristicAutomatchScoreInput" />' +
'</p>' +
'</div>' +
'<div id="recon-dialog-tabs-strict" style="display: none;">' +
'<p>Each cell contains:</p>' +
'<table class="recon-dialog-main-layout">' +
'<tr><td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="id" checked /></td><td>a Freebase ID, e.g., /en/solar_system</td></tr>' +
'<tr><td><input type="radio" name="recon-dialog-strict-choice" value="guid" /></td><td>a Freebase GUID, e.g., #9202a8c04000641f80000000000354ae</td></tr>' +
'<tr>' +
'<td width="1%"><input type="radio" name="recon-dialog-strict-choice" value="key" /></td>' +
'<td>' +
'<table class="recon-dialog-inner-layout">' +
'<tr><td colspan="2">a Freebase key in</td></tr>' +
'<tr>' +
'<td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="wikipedia-en" checked /></td>' +
'<td>the Wikipedia English namespace</td>' +
'</tr>' +
'<tr>' +
'<td width="1%"><input type="radio" name="recon-dialog-strict-namespace-choice" value="other" /></td>' +
'<td>this namespace: <input bind="strictNamespaceInput" /></td>' +
'</tr>' +
'</table>' +
'</td>' +
'</tr>' +
'</table>' +
'</div>' +
'</div>'
).appendTo(body);
if (this._types.length > 0) {
var createTypeChoice = function(type) {
var div = $('<div>').appendTo(body);
$('<input type="radio" name="recon-dialog-type-choice">')
.attr("value", type.id)
.attr("typeName", type.name)
.appendTo(div);
$('<span></span>').text(" " + type.name).appendTo(div);
$('<span></span>').text(" (" + type.id + ")").appendTo(div);
};
for (var i = 0; i < this._types.length && i < 7; i++) {
createTypeChoice(this._types[i]);
}
var divCustom = $('<div>').appendTo(body);
$('<input type="radio" name="recon-dialog-type-choice">')
.attr("value", "")
.appendTo(divCustom);
$('<span></span>').text(" Other: ").appendTo(divCustom);
var input = $('<input />').appendTo(divCustom);
} else {
var input = $('<input />').appendTo($('<p></p>').appendTo(body));
}
this._elmts = DOM.bind(html);
this._populateDialog();
var type = null;
input.suggest({ type : '/type/type' }).bind("fb-select", function(e, data) {
type = {
id: data.id,
name: data.name
};
$('input[name="recon-dialog-type-choice"][value=""]').attr("checked", "true");
});
$('<button></button>').text("Start Reconciling").click(function() { self._onOK(); }).appendTo(footer);
$('<button></button>').text("Cancel").click(function() { self._dismiss(); }).appendTo(footer);
var optionDiv = $('<p>').appendTo(body);
var autoMatchCheckbox = $('<input type="checkbox" checked />').appendTo(optionDiv);
$('<span>').text(" Auto-match correctly-typed candidates scoring at least ").appendTo(optionDiv);
var minScoreInput = $('<input/>').width("3em").attr("value", "100").appendTo(optionDiv);
this._level = DialogSystem.showDialog(frame);
$('<button></button>').text("Start Reconciling").click(function() {
var choices = $('input[name="recon-dialog-type-choice"]:checked');
if (choices != null && choices.length > 0 && choices[0].value != "") {
type = {
id: choices[0].value,
name: choices.attr("typeName")
};
}
if (type == null) {
alert("Please specify a type.");
} else {
DialogSystem.dismissUntil(level - 1);
Gridworks.postProcess(
"reconcile",
{
columnName: self._column.headerLabel,
typeID: type.id,
typeName: type.name,
autoMatch: autoMatchCheckbox[0].checked,
minScore: minScoreInput[0].value
},
null,
{ cellsChanged: true, columnStatsChanged: true }
);
}
}).appendTo(footer);
$('<button></button>').text("Cancel").click(function() {
DialogSystem.dismissUntil(level - 1);
}).appendTo(footer);
var level = DialogSystem.showDialog(frame);
input.focus().data("suggest").textchange();
$("#recon-dialog-tabs").tabs();
$("#recon-dialog-tabs-strict").css("display", "");
};
ReconDialog.prototype._populateDialog = function() {
var self = this;
/*
* Populate types in heuristic tab
*/
var typeTable = $('<table></table>').addClass("recon-dialog-inner-layout").appendTo(this._elmts.heuristicTypeContainer)[0];
var createTypeChoice = function(type, check) {
var tr = typeTable.insertRow(typeTable.rows.length);
var td0 = tr.insertCell(0);
var td1 = tr.insertCell(1);
td0.width = "1%";
var checkbox = $('<input type="radio" name="recon-dialog-type-choice">')
.attr("value", type.id)
.attr("typeName", type.name)
.appendTo(td0);
if (check) {
checkbox.attr("checked", "true");
}
$(td1).html(type.name + '<br/><span class="recon-dialog-type-id">' + type.id + '</span>');
};
for (var i = 0; i < this._types.length; i++) {
createTypeChoice(this._types[i], i == 0);
}
this._elmts.heuristicTypeInput
.suggest({ type : '/type/type' })
.bind("fb-select", function(e, data) {
$('input[name="recon-dialog-type-choice"][value=""]').attr("checked", "true");
});
/*
* Populate properties in heuristic tab
*/
var heuristicDetailTable = $(
'<table>' +
'<tr><th>Column</th><th>Freebase property</th></tr>' +
'</table>'
).addClass("recon-dialog-inner-layout").appendTo(this._elmts.heuristicDetailContainer)[0];
function renderDetailColumn(column) {
var tr = heuristicDetailTable.insertRow(heuristicDetailTable.rows.length);
var td0 = tr.insertCell(0);
var td1 = tr.insertCell(1);
$(td0).html(column.headerLabel);
$('<input size="15" />')
.appendTo(td1)
.suggest({ type: '/type/property' });
}
var columns = theProject.columnModel.columns;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
if (column !== this._column) {
renderDetailColumn(column);
}
}
/*
* Populate strict tab
*/
this._elmts.strictNamespaceInput
.suggest({ type: '/type/namespace' })
.bind("fb-select", function(e, data) {
$('input[name="recon-dialog-strict-choice"][value="key"]').attr("checked", "true");
$('input[name="recon-dialog-strict-namespace-choice"][value="other"]').attr("checked", "true");
});
};
ReconDialog.prototype._onOK = function() {
var tab = $("#recon-dialog-tabs").tabs('option', 'selected');
if (tab == 0) {
this._onDoHeuristic();
} else {
this._onDoStrict();
}
};
ReconDialog.prototype._dismiss = function() {
DialogSystem.dismissUntil(this._level - 1);
};
ReconDialog.prototype._onDoHeuristic = function() {
var type = this._elmts.heuristicTypeInput.data("data.suggest");
var choices = $('input[name="recon-dialog-type-choice"]:checked');
if (choices != null && choices.length > 0 && choices[0].value != "") {
type = {
id: choices[0].value,
name: choices.attr("typeName")
};
}
if (type == null) {
alert("Please specify a type.");
} else {
this._dismiss();
Gridworks.postProcess(
"reconcile",
{
columnName: this._column.headerLabel,
typeID: type.id,
typeName: type.name,
autoMatch: this._elmts.heuristicAutomatchCheck[0].checked,
minScore: this._elmts.heuristicAutomatchScoreInput[0].value
},
null,
{ cellsChanged: true, columnStatsChanged: true }
);
}
};

57
src/main/webapp/styles/recon-dialog.css Normal file
View File

@ -0,0 +1,57 @@
table.recon-dialog-main-layout {
border-collapse: collapse;
}
table.recon-dialog-main-layout > tbody > tr > td {
padding: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
table.recon-dialog-main-layout > tbody > tr > td:last-child {
padding-right: 0px;
}
table.recon-dialog-main-layout > tbody > tr:last-child > td {
padding-bottom: 0px;
}
table.recon-dialog-inner-layout {
border-collapse: collapse;
}
table.recon-dialog-inner-layout > tbody > tr > td {
padding: 0px;
padding-right: 5px;
padding-bottom: 5px;
}
table.recon-dialog-inner-layout > tbody > tr > td:last-child {
padding-right: 0px;
}
table.recon-dialog-inner-layout > tbody > tr:last-child > td {
padding-bottom: 0px;
}
table.recon-dialog-inner-layout > tbody > tr > th {
text-align: left;
padding-bottom: 5px;
padding-right: 5px;
}
.recon-dialog-type-id {
color: #888;
}
.recon-dialog-heuristic-types-container {
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow: auto;
}
.recon-dialog-heuristic-other-type-container {
margin: 10px;
}
.recon-dialog-heuristic-details-container {
border: 1px solid #ccc;
padding: 10px;
max-height: 300px;
overflow: auto;
}