313 lines
12 KiB
JavaScript
313 lines
12 KiB
JavaScript
|
var RdfSchemaAlignment = {};
|
||
|
|
|
||
|
|
function RdfSchemaAlignmentDialog(schema){
|
||
|
|
this._originalSchema = schema || { rootNodes: [] };
|
||
|
|
this._schema = cloneDeep(this._originalSchema); // this is what can be munched on
|
||
|
|
|
||
|
|
if (!this._schema.rootNodes.length) {
|
||
|
|
this._schema.rootNodes.push(RdfSchemaAlignment.createNewRootNode());
|
||
|
|
}
|
||
|
|
|
||
|
|
//this._schema = { rootNodes: [] };
|
||
|
|
//this._schema.rootNodes.push(RdfSchemaAlignment.createNewRootNode());
|
||
|
|
this._nodeUIs = [];
|
||
|
|
this._createDialog();
|
||
|
|
|
||
|
|
RdfSchemaAlignment._defaultNamespace = this._schema.baseUri;
|
||
|
|
this._replaceBaseUri(RdfSchemaAlignment._defaultNamespace || URL.getHostname()+'/');
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._createDialog = function() {
|
||
|
|
var self = this;
|
||
|
|
var frame = DialogSystem.createDialog();
|
||
|
|
|
||
|
|
frame.width("1000px");
|
||
|
|
|
||
|
|
var header = $('<div></div>').addClass("dialog-header").text("RDF Schema Alignment").appendTo(frame);
|
||
|
|
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
|
||
|
|
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
|
||
|
|
|
||
|
|
this._constructFooter(footer);
|
||
|
|
this._constructBody(body);
|
||
|
|
|
||
|
|
this._level = DialogSystem.showDialog(frame);
|
||
|
|
|
||
|
|
this._renderBody(body);
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._constructFooter = function(footer) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
$('<button></button>').html(" OK ").click(function() {
|
||
|
|
var schema = self.getJSON();
|
||
|
|
Gridworks.postProcess(
|
||
|
|
"save-rdf-schema",
|
||
|
|
{},
|
||
|
|
{ schema: JSON.stringify(schema) },
|
||
|
|
{},
|
||
|
|
{
|
||
|
|
onDone: function() {
|
||
|
|
DialogSystem.dismissUntil(self._level - 1);
|
||
|
|
theProject.schema = schema;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}).appendTo(footer);
|
||
|
|
|
||
|
|
$('<button></button>').text("Cancel").click(function() {
|
||
|
|
DialogSystem.dismissUntil(self._level - 1);
|
||
|
|
}).appendTo(footer);
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._constructBody = function(body) {
|
||
|
|
var self = this;
|
||
|
|
$('<p>' +
|
||
|
|
'RDF Schema Alignment... node types are: cell-as-resource, cell-as-literal, cell-as-blank, literal, resource, and blank' +
|
||
|
|
'</p>').appendTo(body);
|
||
|
|
|
||
|
|
var html = $(
|
||
|
|
'<p>Base URI: <span bind="baseUriSpan" class="emphasized"></span> <a href="#" bind="editBaseUriLink">edit</a></p>'+
|
||
|
|
'<div id="rdf-schema-alignment-tabs" class="gridworks-tabs">' +
|
||
|
|
'<ul>' +
|
||
|
|
'<li><a href="#rdf-schema-alignment-tabs-schema">RDF Skeleton</a></li>' +
|
||
|
|
'<li><a href="#rdf-schema-alignment-tabs-preview">RDF Preview</a></li>' +
|
||
|
|
'<li><a href="#rdf-schema-alignment-tabs-vocabulary-manager">Vocabulary Manager</a></li>' +
|
||
|
|
'</ul>' +
|
||
|
|
'<div id="rdf-schema-alignment-tabs-schema">' +
|
||
|
|
'<div class="schema-alignment-dialog-canvas rdf-schema-alignment-dialog-canvas"></div>' +
|
||
|
|
'</div>' +
|
||
|
|
'<div id="rdf-schema-alignment-tabs-preview" style="display: none;">' +
|
||
|
|
'<div class="schema-alignment-dialog-preview" id="rdf-schema-alignment-dialog-preview"></div>' +
|
||
|
|
'</div>' +
|
||
|
|
'<div id="rdf-schema-alignment-tabs-vocabulary-manager" style="display: none;">' +
|
||
|
|
'<div id="rdf-vocabulary-manager" class="schema-alignment-dialog-preview"></div>' +
|
||
|
|
'</div>' +
|
||
|
|
'</div>'
|
||
|
|
).appendTo(body);
|
||
|
|
var elmts = DOM.bind(html);
|
||
|
|
this._baseUriSpan = elmts.baseUriSpan;
|
||
|
|
elmts.baseUriSpan.text(RdfSchemaAlignment._defaultNamespace);
|
||
|
|
|
||
|
|
elmts.editBaseUriLink.click(function(evt){
|
||
|
|
evt.preventDefault();
|
||
|
|
self._editBaseUri($(evt.target));
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._previewRdf = function(){
|
||
|
|
var self = this;
|
||
|
|
var schema = this.getJSON();
|
||
|
|
self._previewPane.empty().html('<img src="images/large-spinner.gif" title="loading..."/>');
|
||
|
|
$.post(
|
||
|
|
"/command/preview-rdf?" + $.param({ project: theProject.id }),
|
||
|
|
{ schema: JSON.stringify(schema), engine: JSON.stringify(ui.browsingEngine.getJSON()) },
|
||
|
|
function(data) {
|
||
|
|
self._previewPane.empty();
|
||
|
|
self._previewPane.text(data.v);
|
||
|
|
},
|
||
|
|
"json"
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._renderBody = function(body) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
$("#rdf-schema-alignment-tabs").tabs({
|
||
|
|
select:function(evt,tabs){
|
||
|
|
if(tabs.index===1){
|
||
|
|
self._previewRdf();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$("#rdf-schema-alignment-tabs-preview").css("display", "");
|
||
|
|
$("#rdf-schema-alignment-tabs-vocabulary-manager").css("display", "");
|
||
|
|
|
||
|
|
this._canvas = $(".schema-alignment-dialog-canvas");
|
||
|
|
this._nodeTable = $('<table></table>').addClass("schema-alignment-table-layout").appendTo(this._canvas)[0];
|
||
|
|
|
||
|
|
for (var i = 0; i < this._schema.rootNodes.length; i++) {
|
||
|
|
this._nodeUIs.push(new RdfSchemaAlignmentDialog.UINode(
|
||
|
|
this,
|
||
|
|
this._schema.rootNodes[i],
|
||
|
|
this._nodeTable,
|
||
|
|
{
|
||
|
|
expanded: true,
|
||
|
|
mustBeCellTopic: true
|
||
|
|
}
|
||
|
|
));
|
||
|
|
}
|
||
|
|
|
||
|
|
this._previewPane = $("#rdf-schema-alignment-dialog-preview");
|
||
|
|
|
||
|
|
this._vocabularyManager = $("#rdf-vocabulary-manager");
|
||
|
|
var vocab_html = $(
|
||
|
|
'<div id="vocabulary-list" bind="vocabularyList" class="vocabulary-manager-list">' +
|
||
|
|
'</div>' +
|
||
|
|
'<div id="new-vocabulary" bind="newVocabulary" class="vocabulary-manager-footer">' +
|
||
|
|
'</div>'
|
||
|
|
);
|
||
|
|
var elmts = DOM.bind(vocab_html);
|
||
|
|
this._vocabularyManager.html(vocab_html);
|
||
|
|
this._vocabularyListContainer = elmts.vocabularyList;
|
||
|
|
this._newVocabularyContainer = elmts.newVocabulary;
|
||
|
|
this._listVocabularies();
|
||
|
|
};
|
||
|
|
//TODO refactor vocabulary manager into its stand-alone Javascript object (~Class)
|
||
|
|
RdfSchemaAlignmentDialog.prototype._listVocabularies = function(){
|
||
|
|
var self = this;
|
||
|
|
self._vocabularyListContainer.empty();
|
||
|
|
self._renderVocabularyFooter();
|
||
|
|
|
||
|
|
|
||
|
|
$.get("/command/list-vocabularies",{},function(o){
|
||
|
|
var vocab_table = $('<table></table>').width('100%').addClass('data-table')[0];
|
||
|
|
var tr = vocab_table.insertRow(vocab_table.rows.length);
|
||
|
|
$(tr).addClass('');
|
||
|
|
$(tr).html('<td></td><td>Prefix</td><td>Namespace</td>');
|
||
|
|
$('td',tr).addClass('column-header');
|
||
|
|
for(var i=0;i<o.vocabularies.length;i++){
|
||
|
|
var vocabulary = o.vocabularies[i];
|
||
|
|
var tr = vocab_table.insertRow(vocab_table.rows.length);
|
||
|
|
$(tr).addClass(i%2==0?'even':'odd');
|
||
|
|
var td = tr.insertCell(0);
|
||
|
|
var getDelFunc = function(){
|
||
|
|
var vocab_uri = vocabulary.uri;
|
||
|
|
return function(){self._deleteVocabulary(vocab_uri);}
|
||
|
|
}();
|
||
|
|
var del_link = $('<a>').html('<img title="remove vocabulary" src="images/close.png" style="cursor: pointer;" />').click(getDelFunc).appendTo($(td));
|
||
|
|
|
||
|
|
td = tr.insertCell(1);
|
||
|
|
$(td).text(vocabulary.name );
|
||
|
|
td = tr.insertCell(2);
|
||
|
|
$(td).text(vocabulary.uri);
|
||
|
|
}
|
||
|
|
$(vocab_table).appendTo(self._vocabularyListContainer);
|
||
|
|
},"json");
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._renderVocabularyFooter = function(){
|
||
|
|
var self = this;
|
||
|
|
self._newVocabularyContainer.empty();
|
||
|
|
var html = $(
|
||
|
|
'<h2>Add New:</h2>' +
|
||
|
|
'<form>'+
|
||
|
|
'<table width="900px">' +
|
||
|
|
'<tr><td>prefix:</td><td> <input type="text" bind="prefix" size="12"></td><td> e.g. rdf, rdfs, foaf, skos, dcat...</td></tr>' +
|
||
|
|
'<tr><td>url:</td><td> <input type="text" bind="url" size="40"></td><td> The URL where vocabulary definition can be obtained as RDF/XML</td></tr>' +
|
||
|
|
'<tr><td>namespace:</td><td> <input type="text" bind="namespace" size="40"></td><td> <span>The namespace under which vocabulary classes and properties are defined (only those will be imported)</span><br/><span> it is usually the same as the URL.</span> </td></tr>' +
|
||
|
|
'<tr><td colspan="3"><input type="submit" bind="addvocab" id="addvocab-submit" value="Import Vocabulary"></td></tr>' +
|
||
|
|
'</table>' +
|
||
|
|
'</form>'
|
||
|
|
);
|
||
|
|
|
||
|
|
var elmts = DOM.bind(html);
|
||
|
|
elmts.addvocab.click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
var prefix = elmts.prefix.val();
|
||
|
|
var namespace = elmts.namespace.val();
|
||
|
|
var url = elmts.url.val();
|
||
|
|
if(!(prefix && namespace && url)){
|
||
|
|
alert('Please enter all required parameters');
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
var dismissBusy = DialogSystem.showBusy('Importing vocabulary from: ' + url);
|
||
|
|
$.get("/command/import-vocabulary",{prefix:prefix,namespace:namespace,url:url},function(data){
|
||
|
|
dismissBusy();
|
||
|
|
if (data.code === "error"){
|
||
|
|
alert('Error:' + data.message)
|
||
|
|
}else{
|
||
|
|
self._listVocabularies();
|
||
|
|
}
|
||
|
|
},"json");
|
||
|
|
});
|
||
|
|
|
||
|
|
html.appendTo(self._newVocabularyContainer);
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._deleteVocabulary = function(uri){
|
||
|
|
var self = this;
|
||
|
|
var dismissBusy = DialogSystem.showBusy('Deleteing vocabulary: ' + uri);
|
||
|
|
$.post("/command/delete-vocabulary",{uri:uri},function(data){
|
||
|
|
dismissBusy();
|
||
|
|
if (data.code === "error"){
|
||
|
|
alert('Error:' + data.message)
|
||
|
|
}else{
|
||
|
|
self._listVocabularies();
|
||
|
|
}
|
||
|
|
},"json");
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignment.createNewRootNode = function() {
|
||
|
|
var links = [];
|
||
|
|
var columns = theProject.columnModel.columns;
|
||
|
|
for (var i = 0; i < columns.length; i++) {
|
||
|
|
var column = columns[i];
|
||
|
|
var target = {
|
||
|
|
nodeType: "cell-as-literal",
|
||
|
|
columnName: column.name,
|
||
|
|
columnIndex:i
|
||
|
|
};
|
||
|
|
links.push({
|
||
|
|
uri: null,
|
||
|
|
curie:null,
|
||
|
|
target: target
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
rootNode = { nodeType: "cell-as-resource", uriExpression:"gel:row.index.urlify(baseURI)", columnIndex:-1, isRowNumberCell:true};
|
||
|
|
rootNode.links = links;
|
||
|
|
|
||
|
|
return rootNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype._editBaseUri = function(src){
|
||
|
|
var self = this;
|
||
|
|
var menu = MenuSystem.createMenu().width('400px');
|
||
|
|
menu.html('<div class="schema-alignment-link-menu-type-search"><input type="text" bind="newBaseUri" size="50"><br/>'+
|
||
|
|
'<button bind="applyButton">Apply</button>' +
|
||
|
|
'<button bind="cancelButton">Cancel</button></div>'
|
||
|
|
);
|
||
|
|
MenuSystem.showMenu(menu,function(){});
|
||
|
|
MenuSystem.positionMenuLeftRight(menu, src);
|
||
|
|
var elmts = DOM.bind(menu);
|
||
|
|
elmts.newBaseUri.val(RdfSchemaAlignment._defaultNamespace).focus().select();
|
||
|
|
elmts.applyButton.click(function() {
|
||
|
|
var newBaseUri = elmts.newBaseUri.val();
|
||
|
|
if(!newBaseUri || !newBaseUri.substring(7)=='http://'){
|
||
|
|
alert('Base URI should start with http://');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
MenuSystem.dismissAll();
|
||
|
|
self._replaceBaseUri(newBaseUri);
|
||
|
|
});
|
||
|
|
|
||
|
|
elmts.cancelButton.click(function() {
|
||
|
|
MenuSystem.dismissAll();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
RdfSchemaAlignmentDialog.prototype._replaceBaseUri = function(newBaseUri){
|
||
|
|
var self = this;
|
||
|
|
RdfSchemaAlignment._defaultNamespace = newBaseUri;
|
||
|
|
$.post("/command/save-baseURI?" + $.param({project: theProject.id }),{baseURI:newBaseUri},function(data){
|
||
|
|
if (data.code === "error"){
|
||
|
|
alert('Error:' + data.message)
|
||
|
|
}else{
|
||
|
|
self._baseUriSpan.empty().text(newBaseUri);
|
||
|
|
}
|
||
|
|
},"json");
|
||
|
|
};
|
||
|
|
|
||
|
|
RdfSchemaAlignmentDialog.prototype.getJSON = function() {
|
||
|
|
var rootNodes = [];
|
||
|
|
for (var i = 0; i < this._nodeUIs.length; i++) {
|
||
|
|
var node = this._nodeUIs[i].getJSON();
|
||
|
|
if (node !== null) {
|
||
|
|
rootNodes.push(node);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
baseUri:RdfSchemaAlignment._defaultNamespace,
|
||
|
|
rootNodes: rootNodes
|
||
|
|
};
|
||
|
|
};
|