Updated butterfly jar.

Extracted several dialogs' html fragments from their .js files out to .html files.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1016 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-06-21 21:59:53 +00:00
parent 0d7b3b0e9c
commit 52f1e2ba53
19 changed files with 381 additions and 355 deletions

View File

@ -38,6 +38,6 @@
<classpathentry kind="lib" path="tests/server/lib/mockito-all-1.8.4.jar" sourcepath="tests/server/lib-src/mockito-all-1.8.4-sources.jar"/> <classpathentry kind="lib" path="tests/server/lib/mockito-all-1.8.4.jar" sourcepath="tests/server/lib-src/mockito-all-1.8.4-sources.jar"/>
<classpathentry kind="lib" path="tests/server/lib/testng-5.12.1.jar" sourcepath="tests/server/lib-src/testng-5.12.1-sources.jar"/> <classpathentry kind="lib" path="tests/server/lib/testng-5.12.1.jar" sourcepath="tests/server/lib-src/testng-5.12.1-sources.jar"/>
<classpathentry kind="lib" path="/gridworks-server/lib/servlet-api-2.5.jar" sourcepath="/gridworks-server/lib-src/servlet-api-2.5-sources.jar"/> <classpathentry kind="lib" path="/gridworks-server/lib/servlet-api-2.5.jar" sourcepath="/gridworks-server/lib-src/servlet-api-2.5-sources.jar"/>
<classpathentry kind="lib" path="webapp/WEB-INF/lib/butterfly-trunk-r25.jar"/> <classpathentry kind="lib" path="webapp/WEB-INF/lib/butterfly-trunk-r26.jar"/>
<classpathentry kind="output" path="webapp/WEB-INF/classes"/> <classpathentry kind="output" path="webapp/WEB-INF/classes"/>
</classpath> </classpath>

View File

@ -18,6 +18,8 @@ function init() {
"project/scripts", "project/scripts",
module, module,
[ [
"wirings.js",
"externals/jquery-1.4.2.min.js", "externals/jquery-1.4.2.min.js",
"externals/jquery.cookie.js", "externals/jquery.cookie.js",
"externals/suggest/suggest-1.2.min.js", "externals/suggest/suggest-1.2.min.js",
@ -111,18 +113,29 @@ function init() {
* This is the function that is invoked by Butterfly * This is the function that is invoked by Butterfly
*/ */
function process(path, request, response) { function process(path, request, response) {
if (path.endsWith("/")) { if (path == "wirings.js") {
path = path.substring(0, path.length - 1); var wirings = butterfly.getWirings(request);
} butterfly.sendString(
request,
response,
"var ModuleWirings = " + butterfly.toJSONString(wirings) + ";",
encoding,
"text/javascript"
);
} else {
if (path.endsWith("/")) {
path = path.substring(0, path.length - 1);
}
var slash = path.lastIndexOf("/"); var slash = path.lastIndexOf("/");
var lastSegment = slash >= 0 ? path.substring(slash + 1) : path; var lastSegment = slash >= 0 ? path.substring(slash + 1) : path;
if (lastSegment in templatedFiles) { if (lastSegment in templatedFiles) {
var context = {}; var context = {};
context.scripts = ClientSideResourceManager.getPaths(lastSegment + "/scripts"); context.scripts = ClientSideResourceManager.getPaths(lastSegment + "/scripts");
context.styles = ClientSideResourceManager.getPaths(lastSegment + "/styles"); context.styles = ClientSideResourceManager.getPaths(lastSegment + "/styles");
send(request, response, path + ".vt", context); send(request, response, path + ".vt", context);
}
} }
} }

View File

@ -0,0 +1,57 @@
<div class="dialog-frame" style="width: 900px;">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table>
<tr>
<td>
Method:
<select bind="methodSelector">
<option selected="true">key collision</option>
<option>nearest neighbor</option>
</select>
</td>
<td>
<div class="binning-controls">Keying Function: <select bind="keyingFunctionSelector">
<option selected="true">fingerprint</option>
<option>ngram-fingerprint</option>
<option>double-metaphone</option>
</select></div>
<div class="knn-controls hidden">Distance Function: <select bind="distanceFunctionSelector">
<option selected="true">levenshtein</option>
<option>PPM</option>
</select></div>
</td>
<td>
<div id="ngram-fingerprint-params" class="function-params hidden">
'Ngram Size: <input type="text" value="2" bind="ngramSize" name="ngram-size" size="3" class="param" datatype="int">
</div>
<div class="knn-controls hidden">
<span style="margin-right: 1em">Radius: <input type="text" value="1.0" bind="radius" name="radius" size="3" class="param" datatype="float"></span>
<span>Block Chars: <input type="text" value="6" bind="ngramBlock" name="blocking-ngram-size" size="3" class="param" datatype="int"></span>
</div>
</td>
<td bind="resultSummary" align="right">
</td>
</tr>
<tr>
<td colspan="3">
<div bind="tableContainer" class="clustering-dialog-table-container"></div>
</td>
<td bind="facetContainer" width="200"></td>
</tr>
</table></div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<table width="100%"><tr>
<td class="left" style="text-align: left">
<button bind="selectAllButton">Select All</button>
<button bind="deselectAllButton">Deselect All</button>
</td>
<td class="right" style="text-align: right">
<button bind="applyReClusterButton">Apply &amp; Re-Cluster</button>
<button bind="applyCloseButton">Apply &amp; Close</button>
<button bind="closeButton">Close</button>
</td>
</tr></table>
</div>
</div>

View File

@ -13,62 +13,10 @@ function ClusteringDialog(columnName, expression) {
ClusteringDialog.prototype._createDialog = function() { ClusteringDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = DialogSystem.createDialog(); var dialog = $(DOM.loadHTML("core", "scripts/dialogs/clustering-dialog.html"));
frame.width("900px");
var header = $('<div></div>').addClass("dialog-header").text('Cluster & Edit column "' + this._columnName + '"').appendTo(frame); this._elmts = DOM.bind(dialog);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame); this._elmts.dialogHeader.text('Cluster & Edit column "' + this._columnName + '"');
var footer = $(
'<div class="dialog-footer">' +
'<table width="100%"><tr>' +
'<td class="left" style="text-align: left"></td>' +
'<td class="right" style="text-align: right"></td>' +
'</tr></table>' +
'</div>'
).appendTo(frame);
var html = $(
'<div class="grid-layout layout-normal layout-full"><table>' +
'<tr>' +
'<td>' +
'Method: <select bind="methodSelector">' +
'<option selected="true">key collision</option>' +
'<option>nearest neighbor</option>' +
'</select>' +
'</td>' +
'<td>' +
'<div class="binning-controls">Keying Function: <select bind="keyingFunctionSelector">' +
'<option selected="true">fingerprint</option>' +
'<option>ngram-fingerprint</option>' +
'<option>double-metaphone</option>' +
'</select></div>' +
'<div class="knn-controls hidden">Distance Function: <select bind="distanceFunctionSelector">' +
'<option selected="true">levenshtein</option>' +
'<option>PPM</option>' +
'</select></div>' +
'</td>' +
'<td>' +
'<div id="ngram-fingerprint-params" class="function-params hidden">' +
'Ngram Size: <input type="text" value="2" bind="ngramSize" name="ngram-size" size="3" class="param" datatype="int">' +
'</div>' +
'<div class="knn-controls hidden">' +
'<span style="margin-right: 1em">Radius: <input type="text" value="1.0" bind="radius" name="radius" size="3" class="param" datatype="float"></span>' +
'<span>Block Chars: <input type="text" value="6" bind="ngramBlock" name="blocking-ngram-size" size="3" class="param" datatype="int"></span>' +
'</div>' +
'</td>' +
'<td bind="resultSummary" align="right">' +
'</td>' +
'</tr>' +
'<tr>' +
'<td colspan="3">' +
'<div bind="tableContainer" class="clustering-dialog-table-container"></div>' +
'</td>' +
'<td bind="facetContainer" width="200"></td>' +
'</tr>' +
'</table></div>'
).appendTo(body);
this._elmts = DOM.bind(html);
this._elmts.methodSelector.change(function() { this._elmts.methodSelector.change(function() {
var selection = $(this).find("option:selected").text(); var selection = $(this).find("option:selected").text();
@ -116,19 +64,13 @@ ClusteringDialog.prototype._createDialog = function() {
this._elmts.radius.change(params_changer); this._elmts.radius.change(params_changer);
this._elmts.ngramBlock.change(params_changer); this._elmts.ngramBlock.change(params_changer);
var left_footer = footer.find(".left"); this._elmts.selectAllButton.click(function() { self._selectAll(); });
$('<button></button>').text("Select All").click(function() { self._selectAll(); }).appendTo(left_footer); this._elmts.deselectAllButton.click(function() { self._deselectAll(); });
$('<button></button>').text("Deselect All").click(function() { self._deselectAll(); }).appendTo(left_footer); this._elmts.applyReClusterButton.click(function() { self._onApplyReCluster(); });
this._elmts.applyCloseButton.click(function() { self._onApplyClose(); });
this._elmts.closeButton.click(function() { self._dismiss(); });
var right_footer = footer.find(".right"); this._level = DialogSystem.showDialog(dialog);
$('<button></button>').text("Apply & Re-Cluster").click(function() { self._onApplyReCluster(); }).appendTo(right_footer);
$('<button></button>').text("Apply & Close").click(function() { self._onApplyClose(); }).appendTo(right_footer);
$('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer);
this._level = DialogSystem.showDialog(frame);
$("#recon-dialog-tabs").tabs();
$("#recon-dialog-tabs-strict").css("display", "");
}; };
ClusteringDialog.prototype._renderTable = function(clusters) { ClusteringDialog.prototype._renderTable = function(clusters) {
@ -248,7 +190,6 @@ ClusteringDialog.prototype._renderTable = function(clusters) {
'<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">No clusters were found with the selected method</div><div style="padding-top: 1em; font-size: 110%; color: #888;">Try selecting another method above or changing its parameters</div></div>' '<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">No clusters were found with the selected method</div><div style="padding-top: 1em; font-size: 110%; color: #888;">Try selecting another method above or changing its parameters</div></div>'
); );
} }
}; };
ClusteringDialog.prototype._cluster = function() { ClusteringDialog.prototype._cluster = function() {

View File

@ -0,0 +1,35 @@
<div class="grid-layout layout-tight layout-full"><table rows="4" cols="2">
<tr>
<td>Expression</td>
<td>Language</td>
</tr>
<tr>
<td rowspan="2"><div class="input-container"><textarea class="expression-preview-code" bind="expressionPreviewTextarea" /></div></td>
<td width="150" height="1">
<select bind="expressionPreviewLanguageSelect">$LANGUAGE_OPTIONS$</select>
</td>
</tr>
<tr>
<td class="expression-preview-error-container" bind="expressionPreviewErrorContainer" width="150" style="vertical-align: top;"></td>
</tr>
<tr>
<td colspan="2">
<div id="expression-preview-tabs" class="gridworks-tabs">
<ul>
<li><a href="#expression-preview-tabs-preview">Preview</a></li>
<li><a href="#expression-preview-tabs-history">History</a></li>
<li><a href="#expression-preview-tabs-help">Help</a></li>
</ul>
<div id="expression-preview-tabs-preview">
<div class="expression-preview-container" bind="expressionPreviewPreviewContainer"></div>
</div>
<div id="expression-preview-tabs-history" style="display: none;">
<div class="expression-preview-container" bind="expressionPreviewHistoryContainer"></div>
</div>
<div id="expression-preview-tabs-help" style="display: none;">
<div class="expression-preview-help-container" bind="expressionPreviewHelpTabBody"></div>
</div>
</div>
</td>
</tr>
</table></div>

View File

@ -32,6 +32,8 @@ function ExpressionPreviewDialog(title, cellIndex, rowIndices, values, expressio
} }
ExpressionPreviewDialog.generateWidgetHtml = function() { ExpressionPreviewDialog.generateWidgetHtml = function() {
var html = DOM.loadHTML("core", "scripts/dialogs/expression-preview-dialog.html");
var languageOptions = []; var languageOptions = [];
for (var prefix in theProject.scripting) { for (var prefix in theProject.scripting) {
if (theProject.scripting.hasOwnProperty(prefix)) { if (theProject.scripting.hasOwnProperty(prefix)) {
@ -40,43 +42,7 @@ ExpressionPreviewDialog.generateWidgetHtml = function() {
} }
} }
return '<div class="grid-layout layout-tight layout-full"><table rows="4" cols="2">' + return html.replace("$LANGUAGE_OPTIONS$", languageOptions.join(""));
'<tr>' +
'<td>Expression</td>' +
'<td>Language</td>' +
'</tr>' +
'<tr>' +
'<td rowspan="2"><div class="input-container"><textarea class="expression-preview-code" bind="expressionPreviewTextarea" /></div></td>' +
'<td width="150" height="1">' +
'<select bind="expressionPreviewLanguageSelect">' +
languageOptions.join("") +
'</select>' +
'</td>' +
'</tr>' +
'<tr>' +
'<td class="expression-preview-error-container" bind="expressionPreviewErrorContainer" width="150" style="vertical-align: top;"></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2">' +
'<div id="expression-preview-tabs" class="gridworks-tabs">' +
'<ul>' +
'<li><a href="#expression-preview-tabs-preview">Preview</a></li>' +
'<li><a href="#expression-preview-tabs-history">History</a></li>' +
'<li><a href="#expression-preview-tabs-help">Help</a></li>' +
'</ul>' +
'<div id="expression-preview-tabs-preview">' +
'<div class="expression-preview-container" bind="expressionPreviewPreviewContainer"></div>' +
'</div>' +
'<div id="expression-preview-tabs-history" style="display: none;">' +
'<div class="expression-preview-container" bind="expressionPreviewHistoryContainer"></div>' +
'</div>' +
'<div id="expression-preview-tabs-help" style="display: none;">' +
'<div class="expression-preview-help-container" bind="expressionPreviewHelpTabBody"></div>' +
'</div>' +
'</div>' +
'</td>' +
'</tr>' +
'</table></div>';
}; };
ExpressionPreviewDialog.Widget = function( ExpressionPreviewDialog.Widget = function(

View File

@ -0,0 +1,26 @@
<div class="dialog-frame extend-data-preview-dialog" style="width: 1000px;">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table rows="4">
<tr>
<td width="300" height="1">Add Property</td>
<td height="1">Preview</td>
<td height="1" width="1%"><button bind="resetButton">Reset</button></td>
</tr>
<tr>
<td style="vertical-align: top;" height="1"><div class="input-container"><input bind="addPropertyInput" /></div></td>
<td style="vertical-align: top;" rowspan="3" colspan="2"><div class="preview-container" bind="previewContainer"></div></td>
</tr>
<tr>
<td height="1">Suggested Properties</td>
</tr>
<tr>
<td><div class="suggested-property-container" bind="suggestedPropertyContainer"></div></td>
</tr>
</table></div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
<button bind="cancelButton">Cancel</button>
</div>
</div>

View File

@ -6,51 +6,25 @@ function ExtendDataPreviewDialog(column, columnIndex, rowIndices, onDone) {
this._extension = { properties: [] }; this._extension = { properties: [] };
var self = this; var self = this;
var frame = this._frame = DialogSystem.createDialog(); this._dialog = $(DOM.loadHTML("core", "scripts/dialogs/extend-data-preview-dialog.html"));
frame.width("1000px").addClass("extend-data-preview-dialog"); this._elmts = DOM.bind(this._dialog);
this._elmts.dialogHeader.text("Add Columns from Freebase Based on Column " + column.name);
var header = $('<div></div>').addClass("dialog-header").text("Add Columns from Freebase Based on Column " + column.name).appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
var html = $(
'<div class="grid-layout layout-normal layout-full"><table rows="4">' +
'<tr>' +
'<td width="300" height="1">Add Property</td>' +
'<td height="1">Preview</td>' +
'<td height="1" width="1%"><button bind="resetButton">Reset</button></td>' +
'</tr>' +
'<tr>' +
'<td style="vertical-align: top;" height="1"><div class="input-container"><input bind="addPropertyInput" /></div></td>' +
'<td style="vertical-align: top;" rowspan="3" colspan="2"><div class="preview-container" bind="previewContainer"></div></td>' +
'</tr>' +
'<tr>' +
'<td height="1">Suggested Properties</td>' +
'</tr>' +
'<tr>' +
'<td><div class="suggested-property-container" bind="suggestedPropertyContainer"></div></td>' +
'</tr>' +
'</table></div>'
).appendTo(body);
this._elmts = DOM.bind(html);
this._elmts.resetButton.click(function() { this._elmts.resetButton.click(function() {
self._extension.properties = []; self._extension.properties = [];
self._update(); self._update();
}); });
$('<button></button>').html("&nbsp;&nbsp;OK&nbsp;&nbsp;").click(function() { this._elmts.okButton.click(function() {
if (self._extension.properties.length === 0) { if (self._extension.properties.length === 0) {
alert("Please add some properties first."); alert("Please add some properties first.");
} else { } else {
DialogSystem.dismissUntil(self._level - 1); DialogSystem.dismissUntil(self._level - 1);
self._onDone(self._extension); self._onDone(self._extension);
} }
}).appendTo(footer); });
this._elmts.cancelButton.click(function() {
$('<button></button>').text("Cancel").click(function() {
DialogSystem.dismissUntil(self._level - 1); DialogSystem.dismissUntil(self._level - 1);
}).appendTo(footer); });
var dismissBusy = DialogSystem.showBusy(); var dismissBusy = DialogSystem.showBusy();
var type = "reconConfig" in column && "type" in column.reconConfig ? column.reconConfig.type.id : "/common/topic"; var type = "reconConfig" in column && "type" in column.reconConfig ? column.reconConfig.type.id : "/common/topic";
@ -105,7 +79,7 @@ ExtendDataPreviewDialog.getAllProperties = function(typeID, onDone) {
}; };
ExtendDataPreviewDialog.prototype._show = function(properties) { ExtendDataPreviewDialog.prototype._show = function(properties) {
this._level = DialogSystem.showDialog(this._frame); this._level = DialogSystem.showDialog(this._dialog);
var n = this._elmts.suggestedPropertyContainer.offset().top + var n = this._elmts.suggestedPropertyContainer.offset().top +
this._elmts.suggestedPropertyContainer.outerHeight(true) - this._elmts.suggestedPropertyContainer.outerHeight(true) -

View File

@ -0,0 +1,24 @@
<div class="dialog-frame" style="width: 800px;">
<div class="dialog-header" bind="dialogHeader">Load Data into Freebase</div>
<div class="dialog-body" bind="dialogBody">
</div>
<div class="dialog-footer" bind="dialogFooter">
<table width="100%"><tr>
<td bind="left" style="text-align: left" width="40%" nowrap="true">
<button bind="cancelButton" id="freebase-loading-cancel">Cancel</button>
</td>
<td bind="center" style="text-align: center" width="20%" nowrap="true">
<div bind="authorization" class="freebase-loading-authorization"></div>
</td>
<td bind="right" style="text-align: right" width="40%" nowrap="true">
<span bind="selector" class="freebase-loading-graph-selector">
Load this data into
<input type="radio" bind="sandbox" id="freebase-loading-graph-selector-sandbox" name="graph-selector" checked="checked" value="sandbox"/><label class="sandbox" for="freebase-loading-graph-selector-sandbox" title="Load into the sandbox">sandbox</label>
<input type="radio" bind="freebase" id="freebase-loading-graph-selector-freebase" name="graph-selector" value="freebase" disabled="disabled"/><label class="freebase" for="freebase-loading-graph-selector-freebase" title="Load into Freebase">freebase</label>
</span>
<button bind="loadButton" id="freebase-loading-load" disabled="disabled">Load</button>
</td>
</tr></table>
</div>
</div>

View File

@ -5,41 +5,14 @@ function FreebaseLoadingDialog() {
FreebaseLoadingDialog.prototype._createDialog = function() { FreebaseLoadingDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = DialogSystem.createDialog(); var dialog = $(DOM.loadHTML("core", "scripts/dialogs/freebase-loading-dialog.html"));
frame.width("800px"); this._elmts = DOM.bind(dialog);
this._elmts.cancelButton.click(function() { self._dismiss(); });
var header = $('<div></div>').addClass("dialog-header").text('Load Data into Freebase').appendTo(frame); this._elmts.selector.buttonset();
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $(
'<div class="dialog-footer">' +
'<table width="100%"><tr>' +
'<td bind="left" style="text-align: left" width="40%" nowrap="true"></td>' +
'<td bind="center" style="text-align: center" width="20%" nowrap="true"></td>' +
'<td bind="right" style="text-align: right" width="40%" nowrap="true"></td>' +
'</tr></table>' +
'</div>'
).appendTo(frame);
this._elmts = DOM.bind(frame);
var left_footer = this._elmts.left;
var center_footer = this._elmts.center;
var right_footer = this._elmts.right;
var cancel_button = $('<button bind="cancel" id="freebase-loading-cancel"></button>').text("Cancel").click(function() {
self._dismiss();
}).appendTo(left_footer);
var authorization = $('<div bind="authorization">').addClass("freebase-loading-authorization").hide().appendTo(center_footer);
var selector = $('<span bind="selector">').addClass("freebase-loading-graph-selector").html("Load this data into " +
'<input type="radio" bind="sandbox" id="freebase-loading-graph-selector-sandbox" name="graph-selector" checked="checked" value="sandbox"/><label class="sandbox" for="freebase-loading-graph-selector-sandbox" title="Load into the sandbox">sandbox</label>' +
'<input type="radio" bind="freebase" id="freebase-loading-graph-selector-freebase" name="graph-selector" value="freebase" disabled="disabled"/><label class="freebase" for="freebase-loading-graph-selector-freebase" title="Load into Freebase">freebase</label>'
).buttonset().appendTo(right_footer);
var load_button = $('<button bind="load" id="freebase-loading-load" disabled="disabled"></button>').text("Load").appendTo(right_footer);
var provider = "www.freebase.com"; var provider = "www.freebase.com";
var authorization = this._elmts.authorization;
var loadButton = this._elmts.loadButton;
var check_authorization = function(cont) { var check_authorization = function(cont) {
$.get("/command/check-authorization/" + provider, function(data) { $.get("/command/check-authorization/" + provider, function(data) {
@ -47,11 +20,11 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
authorization.html('Signed in as: <a target="_new" href="http://www.freebase.com/view/user/' + data.username + '">' + data.username + '</a> | <a href="javascript:{}" bind="signout">Sign Out</a>').show(); authorization.html('Signed in as: <a target="_new" href="http://www.freebase.com/view/user/' + data.username + '">' + data.username + '</a> | <a href="javascript:{}" bind="signout">Sign Out</a>').show();
DOM.bind(authorization).signout.click(function() { DOM.bind(authorization).signout.click(function() {
self._signedin = false; self._signedin = false;
load_button.attr("disabled","disabled"); loadButton.attr("disabled","disabled");
$("#freebase-loading-graph-selector-freebase").attr("disabled","disabled").button("refresh"); $("#freebase-loading-graph-selector-freebase").attr("disabled","disabled").button("refresh");
Sign.signout(check_authorization,provider); Sign.signout(check_authorization,provider);
}); });
load_button.unbind().click(function() { loadButton.unbind().click(function() {
self._load(); self._load();
}); });
self._signedin = true; self._signedin = true;
@ -121,6 +94,7 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
{ protograph: JSON.stringify(theProject.protograph), engine: JSON.stringify(ui.browsingEngine.getJSON()) }, { protograph: JSON.stringify(theProject.protograph), engine: JSON.stringify(ui.browsingEngine.getJSON()) },
function(data) { function(data) {
if ("tripleloader" in data) { if ("tripleloader" in data) {
var body = self._elmts.dialogBody;
body.html( body.html(
'<div class="freebase-loading-tripleloader-info"><table><tr>' + '<div class="freebase-loading-tripleloader-info"><table><tr>' +
'<td><div>Name this data load &not; <sup style="color: red">required</sup></div>' + '<td><div>Name this data load &not; <sup style="color: red">required</sup></div>' +
@ -130,13 +104,13 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
'</tr></table></div>' + '</tr></table></div>' +
'<div class="freebase-loading-tripleloader-data">' + data.tripleloader + '</div>' '<div class="freebase-loading-tripleloader-data">' + data.tripleloader + '</div>'
); );
self._elmts = DOM.bind(frame); self._elmts = DOM.bind(dialog);
self._elmts.source_name.keyup(function() { self._elmts.source_name.keyup(function() {
if (self._signedin && $(this).val() != "") { if (self._signedin && $(this).val() != "") {
load_button.removeAttr("disabled"); loadButton.removeAttr("disabled");
} else { } else {
load_button.attr("disabled","disabled"); loadButton.attr("disabled","disabled");
} }
}); });
@ -157,10 +131,10 @@ FreebaseLoadingDialog.prototype._createDialog = function() {
'<p>Have you aligned it with the Freebase schemas yet?</p>' + '<p>Have you aligned it with the Freebase schemas yet?</p>' +
'</div>' '</div>'
); );
self._elmts = DOM.bind(frame); self._elmts = DOM.bind(dialog);
self._end(); self._end();
} }
self._level = DialogSystem.showDialog(frame); self._level = DialogSystem.showDialog(dialog);
}, },
"json" "json"
); );
@ -199,7 +173,7 @@ FreebaseLoadingDialog.prototype._load = function() {
function(data) { function(data) {
dismissBusy(); dismissBusy();
var body = $(".dialog-body"); var body = self._elmts.dialogBody;
if ("status" in data && typeof data.status == "object" && "code" in data.status && data.status.code == 200) { if ("status" in data && typeof data.status == "object" && "code" in data.status && data.status.code == 200) {
body.html( body.html(
'<div class="freebase-loading-tripleloader-message">' + '<div class="freebase-loading-tripleloader-message">' +
@ -246,7 +220,7 @@ FreebaseLoadingDialog.prototype._dismiss = function() {
}; };
FreebaseLoadingDialog.prototype._show_error = function(msg, error) { FreebaseLoadingDialog.prototype._show_error = function(msg, error) {
var body = $(".dialog-body"); var body = self._elmts.dialogBody;
body.html( body.html(
'<div class="freebase-loading-tripleloader-message">' + '<div class="freebase-loading-tripleloader-message">' +
'<h2>' + msg + '</h2>' + '<h2>' + msg + '</h2>' +
@ -259,10 +233,10 @@ FreebaseLoadingDialog.prototype._show_error = function(msg, error) {
FreebaseLoadingDialog.prototype._end = function() { FreebaseLoadingDialog.prototype._end = function() {
var self = this; var self = this;
self._elmts.load.text("Close").removeAttr("disabled").unbind().click(function() { self._elmts.loadButton.text("Close").removeAttr("disabled").unbind().click(function() {
self._dismiss(); self._dismiss();
}); });
self._elmts.cancel.hide(); self._elmts.cancelButton.hide();
self._elmts.authorization.hide(); self._elmts.authorization.hide();
self._elmts.selector.hide(); self._elmts.selector.hide();
}; };

View File

@ -0,0 +1,71 @@
<div class="dialog-frame" style="width: 800px;">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div id="recon-dialog-tabs" class="gridworks-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">
<div class="grid-layout layout-normal layout-full"><table>
<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>
<tr>
<td>
<input type="checkbox" checked bind="heuristicAutomatchCheck" /> Auto-match candidates with high confidence
</td>
<td>
Use
<input type="radio" name="recon-dialog-heuristic-service" value="relevance" checked="" /> relevance service
<input type="radio" name="recon-dialog-heuristic-service" value="recon" /> recon service
</td>
</tr>
</table></div>
</div>
<div id="recon-dialog-tabs-strict" style="display: none;">
<p>Each cell contains:</p>
<div class="grid-layout layout-normal layout-full"><table>
<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>
<div class="grid-layout layout-tighter layout-full"><table>
<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" nsName="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></div>
</td>
</tr>
</table></div>
</div>
</div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<button bind="reconcileButton">Start Reconciling</button>
<button bind="cancelButton">Cancel</button>
</div>
</div>

View File

@ -27,85 +27,16 @@ function ReconDialog(column, types) {
ReconDialog.prototype._createDialog = function() { ReconDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = DialogSystem.createDialog(); var dialog = $(DOM.loadHTML("core", "scripts/dialogs/recon-dialog.html"));
frame.width("800px");
var header = $('<div></div>').addClass("dialog-header").text("Reconcile column " + this._column.name).appendTo(frame); this._elmts = DOM.bind(dialog);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame); this._elmts.dialogHeader.text("Reconcile column " + this._column.name);
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame); this._elmts.reconcileButton.click(function() { self._onOK(); });
this._elmts.cancelButton.click(function() { self._dismiss(); });
var html = $(
'<div id="recon-dialog-tabs" class="gridworks-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">' +
'<div class="grid-layout layout-normal layout-full"><table>' +
'<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>' +
'<tr>' +
'<td>' +
'<input type="checkbox" checked bind="heuristicAutomatchCheck" /> Auto-match candidates with high confidence' +
'</td>' +
'<td>' +
'Use ' +
'<input type="radio" name="recon-dialog-heuristic-service" value="relevance" checked="" /> relevance service ' +
'<input type="radio" name="recon-dialog-heuristic-service" value="recon" /> recon service ' +
'</td>' +
'</tr>' +
'</table></div>' +
'</div>' +
'<div id="recon-dialog-tabs-strict" style="display: none;">' +
'<p>Each cell contains:</p>' +
'<div class="grid-layout layout-normal layout-full"><table>' +
'<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>' +
'<div class="grid-layout layout-tighter layout-full"><table>' +
'<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" nsName="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></div>' +
'</td>' +
'</tr>' +
'</table></div>' +
'</div>' +
'</div>'
).appendTo(body);
this._elmts = DOM.bind(html);
this._populateDialog(); this._populateDialog();
$('<button></button>').text("Start Reconciling").click(function() { self._onOK(); }).appendTo(footer); this._level = DialogSystem.showDialog(dialog);
$('<button></button>').text("Cancel").click(function() { self._dismiss(); }).appendTo(footer);
this._level = DialogSystem.showDialog(frame);
$("#recon-dialog-tabs").tabs(); $("#recon-dialog-tabs").tabs();
$("#recon-dialog-tabs-strict").css("display", ""); $("#recon-dialog-tabs-strict").css("display", "");

View File

@ -0,0 +1,41 @@
<div class="dialog-frame" style="width: 1100px;">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal">
<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>
</div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<table width="100%"><tr>
<td class="left" style="text-align: left">
<div class="scatterplot-dialog-selectors-container">
<table class="scatterplot-selectors"><tr>
<td nowrap>
<div class="buttonset scatterplot-dim-selector" bind="plotSelector">
<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>
<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>
</div>
</td>
<td nowrap>
<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">
<input type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>
<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>
<input type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>
</div>
</td>
<td nowrap>
<div class="buttonset scatterplot-dot-selector" bind="dotSelector">
<input type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>
<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>
<input type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>
</div>
</td>
</tr></table>
</div>
</td>
<td class="right" style="text-align: right">
<button bind="closeButton">Close</button>
</td>
</tr></table>
</div>
</div>

View File

@ -7,55 +7,13 @@ function ScatterplotDialog(column) {
ScatterplotDialog.prototype._createDialog = function() { ScatterplotDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = DialogSystem.createDialog(); var dialog = $(DOM.loadHTML("core", "scripts/dialogs/scatterplot-dialog.html"));
frame.width("1100px"); this._elmts = DOM.bind(dialog);
this._elmts.dialogHeader.text(
'Scatterplot Matrix' +
((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')"));
var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix' + ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')")).appendTo(frame); this._elmts.closeButton.click(function() { self._dismiss(); });
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $(
'<div>' +
'<table width="100%"><tr>' +
'<td class="left" style="text-align: left"></td>' +
'<td class="right" style="text-align: right"></td>' +
'</tr></table>' +
'</div>'
).appendTo(frame);
$('<div class="grid-layout layout-normal">' +
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
'</div>').appendTo(body);
var left_footer = footer.find(".left");
var right_footer = footer.find(".right");
$('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer);
$('<div class="scatterplot-dialog-selectors-container">' +
'<table class="scatterplot-selectors"><tr>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
'<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>' +
'<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">' +
'<input type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dot-selector" bind="dotSelector">' +
'<input type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>' +
'</div>' +
'</td>' +
'</tr></table>' +
'</div>').appendTo(left_footer);
this._elmts = DOM.bind(frame);
this._elmts.plotSelector.buttonset().change(function() { this._elmts.plotSelector.buttonset().change(function() {
self._plot_method = $(this).find("input:checked").val(); self._plot_method = $(this).find("input:checked").val();
@ -79,7 +37,7 @@ ScatterplotDialog.prototype._createDialog = function() {
self._renderMatrix(); self._renderMatrix();
}); });
this._level = DialogSystem.showDialog(frame); this._level = DialogSystem.showDialog(dialog);
this._renderMatrix(); this._renderMatrix();
}; };

View File

@ -0,0 +1,26 @@
<div class="dialog-frame" style="width: 900px;">
<div class="dialog-header" bind="dialogHeader">Templating Export</div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table>
<tr>
<td style="vertical-align: top"><div class="grid-layout layout-tighter layout-full" bind="controls"><table>
<tr><td>Prefix</td></tr>
<tr><td><div class="input-container"><textarea bind="prefixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>
<tr><td>Row Template</td></tr>
<tr><td><div class="input-container"><textarea bind="templateTextarea" class="code" wrap="off" style="height:20em;"></textarea></div></td></tr>
<tr><td>Row Separator</td></tr>
<tr><td><div class="input-container"><textarea bind="separatorTextarea" class="code" wrap="off" style="height:3em;"></textarea></div></td></tr>
<tr><td>Suffix</td></tr>
<tr><td><div class="input-container"><textarea bind="suffixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>
</table></div></td>
<td width="50%" style="vertical-align: top">
<div class="input-container"><textarea bind="previewTextarea" class="code" wrap="off" style="height: 40em;"></textarea></div>
</td>
</tr>
</table></div>'
</div>
<div class="dialog-footer" bind="dialogFooter">
<button bind="exportButton">Export</button>
<button bind="cancelButton">Cancel</button>
</div>
</div>

View File

@ -6,34 +6,8 @@ function TemplatingExporterDialog() {
TemplatingExporterDialog.prototype._createDialog = function() { TemplatingExporterDialog.prototype._createDialog = function() {
var self = this; var self = this;
var frame = DialogSystem.createDialog(); var dialog = $(DOM.loadHTML("core", "scripts/dialogs/templating-exporter-dialog.html"));
frame.width("900px"); this._elmts = DOM.bind(dialog);
var header = $('<div></div>').addClass("dialog-header").text('Templating Export').appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $('<div>').addClass("dialog-footer").appendTo(frame);
body.html(
'<div class="grid-layout layout-normal layout-full"><table>' +
'<tr>' +
'<td style="vertical-align: top"><div class="grid-layout layout-tighter layout-full" bind="controls"><table>' +
'<tr><td>Prefix</td></tr>' +
'<tr><td><div class="input-container"><textarea bind="prefixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>' +
'<tr><td>Row Template</td></tr>' +
'<tr><td><div class="input-container"><textarea bind="templateTextarea" class="code" wrap="off" style="height:20em;"></textarea></div></td></tr>' +
'<tr><td>Row Separator</td></tr>' +
'<tr><td><div class="input-container"><textarea bind="separatorTextarea" class="code" wrap="off" style="height:3em;"></textarea></div></td></tr>' +
'<tr><td>Suffix</td></tr>' +
'<tr><td><div class="input-container"><textarea bind="suffixTextarea" class="code" wrap="off" style="height:5em;"></textarea></div></td></tr>' +
'</table></div></td>' +
'<td width="50%" style="vertical-align: top">' +
'<div class="input-container"><textarea bind="previewTextarea" class="code" wrap="off" style="height: 40em;"></textarea></div>' +
'</td>' +
'</tr>' +
'</table></div>'
);
this._elmts = DOM.bind(body);
this._elmts.controls.find("textarea").keyup(function() { self._scheduleUpdate(); }); this._elmts.controls.find("textarea").keyup(function() { self._scheduleUpdate(); });
this._elmts.prefixTextarea[0].value = '{\n "rows" : [\n'; this._elmts.prefixTextarea[0].value = '{\n "rows" : [\n';
@ -44,10 +18,10 @@ TemplatingExporterDialog.prototype._createDialog = function() {
return '\n "' + column.name + '" : {{jsonize(cells["' + column.name + '"].value)}}'; return '\n "' + column.name + '" : {{jsonize(cells["' + column.name + '"].value)}}';
}).join(',') + '\n }'; }).join(',') + '\n }';
$('<button></button>').text("Export").click(function() { self._export(); self._dismiss(); }).appendTo(footer); this._elmts.exportButton.click(function() { self._export(); self._dismiss(); });
$('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(footer); this._elmts.cancelButton.click(function() { self._dismiss(); });
this._level = DialogSystem.showDialog(frame); this._level = DialogSystem.showDialog(dialog);
}; };
TemplatingExporterDialog.prototype._scheduleUpdate = function() { TemplatingExporterDialog.prototype._scheduleUpdate = function() {

View File

@ -14,7 +14,6 @@ DOM._bindDOMElement = function(elmt, map) {
var bind = elmt.getAttribute("bind"); var bind = elmt.getAttribute("bind");
if (bind !== null && bind.length > 0) { if (bind !== null && bind.length > 0) {
map[bind] = $(elmt); map[bind] = $(elmt);
elmt.removeAttribute("bind");
} }
if (elmt.hasChildNodes()) { if (elmt.hasChildNodes()) {
@ -32,3 +31,19 @@ DOM._bindDOMChildren = function(elmt, map) {
node = node2; node = node2;
} }
}; };
DOM._loadedHTML = {};
DOM.loadHTML = function(module, path) {
var fullPath = ModuleWirings[module] + path;
if (!(fullPath in DOM._loadedHTML)) {
$.ajax({
async: false,
url: fullPath,
dataType: "html",
success: function(html) {
DOM._loadedHTML[fullPath] = html;
}
})
}
return DOM._loadedHTML[fullPath];
};