Skip to content

Commit

Permalink
resolve #15 "v2r: for column property definition allow selection from…
Browse files Browse the repository at this point in the history 
… standard vocabularies"

 A selected property is displayed with associated typical prefix, eg., skos:definition (#19).
  • Loading branch information
@carueda
carueda committed Jun 21, 2016
1 parent f1dd0e4 commit e44aeba
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 62 deletions.
3 changes: 3 additions & 0 deletions ChangeLog.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
## change log ##

* 2016-06-20: 3.0.alpha:
- implement #15 "v2r: for column property definition allow selection from standard vocabularies"
A selected property is displayed with associated typical prefix, eg., skos:definition (#19).
The list is for now hard-coded. TODO capture list in a registered (internal) ontology.
- implement #15 "branding"

* 2016-06-18: 0.3.2:
Expand Down
132 changes: 84 additions & 48 deletions src/app/js/ont/v2r/v2r-edit-id.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@

<form class="form-horizontal">
<p style="color: gray">
To construct the URI of this entity either specify a "local name"
(relative to the URI of this ontology),
or a full URI.
To construct the URI of this {{vm.what}} either specify a "local name"
(relative to the URI of this ontology)
or a full URI<span ng-if="vm.what === 'property'"
>, where you can also select from a list of standard properties
that may be applicable to your vocabulary
</span>.
</p>
<br>

Expand All @@ -24,65 +27,98 @@

<br>

<div class="form-group" ng-if="vm.idType === 'lname'">
<label for="inputLocalName" class="control-label col-xs-2">
Local&nbsp;name:
</label>

<div class="col-xs-4">
<input id="inputLocalName"
type="text"
class="form-control"
ng-model="vm.lname"
>
<div ng-if="vm.idType === 'lname'">
<div class="form-group">
<label for="inputLocalName" class="control-label col-xs-2">
Local&nbsp;name:
</label>

<div class="col-xs-4">
<input id="inputLocalName"
type="text"
class="form-control"
ng-model="vm.lname"
>
</div>
</div>
</div>

<div class="form-group" ng-if="vm.idType === 'lname'">
<label class="control-label col-xs-1"></label>
<div class="form-group">
<label class="control-label col-xs-1"></label>

<div class="col-xs-7">
<span>
URI:&nbsp;<span class="uriTextSimple"
<div class="col-xs-7">
<span>
URI:&nbsp;<span class="uriTextSimple"
>{{vm.namespace}}/<span ng-if="vm.lname" ng-bind="vm.lname" style="text-decoration: underline"
></span><span ng-if="!vm.lname" style="color: red">?</span>
></span><span ng-if="!vm.lname" style="color: red">?</span>
</span>
</span>
</span>
</div>
</div>
</div>

<div class="form-group" ng-if="vm.idType === 'uri'">
<div ng-if="vm.idType === 'uri'">
<div class="form-group" ng-if="vm.what === 'property'">
<label class="control-label col-xs-2">
</label>

<div class="col-xs-8">
<div style="color: gray">
<span style="text-decoration: underline">Tip</span>:
Consider using a
<div class="btn-group" uib-dropdown>
<div type="button" class="btn btn-default btn-xs dropdown-toggle" uib-dropdown-toggle
>
standard property <span class="caret"></span>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="stdProp in vm.stdProperties">
<a href ng-click="stdPropertySelected(stdProp)"
uib-popover="{{stdProp.tooltip}}"
popover-placement="left"
popover-trigger="mouseenter"
>
{{stdProp.prefix}}:{{stdProp.localName}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="form-group">

<label for="inputUri" class="control-label col-xs-2">
Full&nbsp;URI:
</label>
<label for="inputUri" class="control-label col-xs-2">
Full&nbsp;URI:
</label>

<div class="col-xs-8">
<input id="inputUri"
type="url"
class="form-control"
ng-model="vm.uri"
>
<div class="col-xs-8">
<input id="inputUri"
type="url"
class="form-control"
ng-model="vm.uri"
>
</div>
</div>
</div>

<div class="form-group">
<div class="form-group">

<label class="col-xs-3"> </label>
<button class="btn btn-primary btn-sm"
ng-disabled="!idEditFormOk()"
ng-click="doneEditId()"
>OK
</button>

<label class="col-xs-1"> </label>
<button class="btn btn-default btn-sm"
ng-click="cancelEditId()"
ng-disabled="vm.working"
>Cancel
</button>
</div>

<label class="col-xs-3"> </label>
<button class="btn btn-primary btn-sm"
ng-disabled="!idEditFormOk()"
ng-click="doneEditId()"
>OK
</button>

<label class="col-xs-1"> </label>
<button class="btn btn-default btn-sm"
ng-click="cancelEditId()"
ng-disabled="vm.working"
>Cancel
</button>
</div>

</form>

</div>
Expand Down
51 changes: 38 additions & 13 deletions src/app/js/ont/v2r/v2r.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@
}
}

V2rDataViewerController.$inject = ['$window'];
function V2rDataViewerController($window) {
V2rDataViewerController.$inject = ['$window', 'vocabulary'];
function V2rDataViewerController($window, vocabulary) {
var vm = this;
vm.debug = debug;
if (debug) console.log("++V2rDataViewerController++ vm=", vm);

setCommonMethods(vm);
setCommonMethods(vm, vocabulary);

// mainly a workaround as the ng-href link in a "text/ng-template"
// used in <uib-tab> doesn't work for some reason
Expand Down Expand Up @@ -67,26 +67,26 @@
};
}

V2rDataEditorController.$inject = ['$scope', '$uibModal', '$filter', '$timeout', 'utl', 'focus'];
function V2rDataEditorController($scope, $uibModal, $filter, $timeout, utl, focus) {
V2rDataEditorController.$inject = ['$scope', '$uibModal', '$filter', '$timeout', 'utl', 'focus', 'vocabulary'];
function V2rDataEditorController($scope, $uibModal, $filter, $timeout, utl, focus, vocabulary) {
var vm = this;
vm.debug = debug;
if (debug) console.log("++V2rDataEditorController++ vm=", vm);

setCommonMethods(vm);
setCommonMethods(vm, vocabulary);

//////////////////////////////////////
// Class and property editing

vm.editVocabClass = function(idModel) {
return editIdModel("Vocabulary class", idModel);
return editIdModel("Vocabulary class", "class", idModel);
};

vm.editVocabProperty = function(idModel) {
return editIdModel("Vocabulary property", idModel);
return editIdModel("Vocabulary property", "property", idModel);
};

function editIdModel(title, idModel) {
function editIdModel(title, what, idModel) {
//console.log("editId': title=", title, "idModel=", idModel);
return $uibModal.open({
templateUrl: 'js/ont/v2r/v2r-edit-id.html',
Expand All @@ -96,6 +96,7 @@
info: function () {
return {
title: title,
what: what,
namespace: vm.uri,
idModel: idModel
};
Expand Down Expand Up @@ -422,23 +423,30 @@
}
}

V2rEditIdController.$inject = ['$scope', '$uibModalInstance', 'info'];
function V2rEditIdController($scope, $uibModalInstance, info) {
V2rEditIdController.$inject = ['$scope', '$uibModalInstance', 'vocabulary', 'info'];
function V2rEditIdController($scope, $uibModalInstance, vocabulary, info) {
console.log("V2rEditIdController: info=", info);

var vm = $scope.vm = {
title: info.title,
what: info.what,
namespace: info.namespace,
lname: info.idModel.name,
uri: info.idModel.uri,
idType: info.idModel.name ? "lname" : "uri"
idType: info.idModel.name ? "lname" : "uri",
stdProperties: getStdProperties(vocabulary)
};

$scope.$watch("vm.lname", function(val) {
// TODO review; this uses some most obvious symbols to avoid
if (val) vm.lname = val.replace(/[\s/|?&!,;'\\]/gi, "");
});

$scope.stdPropertySelected = function(stdProp) {
console.debug("stdPropertySelected: stdProp=", stdProp);
vm.uri = stdProp.uri;
};

$scope.idEditFormOk = function() {
return vm.idType === 'lname' && vm.lname
|| vm.idType === 'uri' && vm.uri;
Expand All @@ -461,7 +469,7 @@
};
}

function setCommonMethods(vm) {
function setCommonMethods(vm, vocabulary) {
vm.getUri = function(e) {
if (e.uri) return e.uri;
if (!vm.uri) return undefined;
Expand All @@ -476,6 +484,10 @@
vm.getLabel = function(e) {
if (e.label) return e.label;
if (e.name) return capitalizeFirstLetter(e.name);
var def = vocabulary.byUri[e.uri];
if (def) {
return def.prefix + ':' + def.label;
}
return e.uri;
};

Expand All @@ -489,6 +501,19 @@
};
}

// TODO retrieve list from a registered (internal) ontology
function getStdProperties(vocabulary) {
return [
vocabulary.skos.definition,
vocabulary.skos.note,
vocabulary.rdfs.seeAlso,
vocabulary.dct.title,
vocabulary.dct.description,
vocabulary.dct.creator,
vocabulary.dct.contributor
]
}

function capitalizeFirstLetter(s) {
if (s) s = s.substr(0, 1).toUpperCase() + s.substr(1);
return s;
Expand Down
22 changes: 21 additions & 1 deletion src/app/js/vocabulary/vocabulary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,28 @@
;

function vocabulary() {
var byUri = {};
return {
byUri: byUri,

rdf: setDetails("rdf", "http://www.w3.org/1999/02/22-rdf-syntax-ns#", {
type: {
}
}),

rdfs: setDetails("rdfs", "http://www.w3.org/2000/01/rdf-schema#", {
label: {
tooltip: "A human-readable name for the subject."
},
comment: {
tooltip: "A description of the subject resource."
},
isDefinedBy: {
tooltip: "Used to indicate a resource defining the subject resource. " +
"This property may be used to indicate an RDF vocabulary in which a resource is described."
},
seeAlso: {
tooltip: "Further information about the subject resource."
tooltip: "Used to indicate a resource that might provide additional information about the subject resource."
}
}),

Expand Down Expand Up @@ -70,6 +83,12 @@
}),

skos: setDetails("skos", "http://www.w3.org/2004/02/skos/core#", {
note: {
tooltip: "SKOS property for general documentation purposes."
},
definition: {
tooltip: "A complete explanation of the intended meaning of a concept."
},
exactMatch: {
tooltip: "The property skos:exactMatch is used to link two concepts, indicating a high degree " +
"of confidence that the concepts can be used interchangeably across a wide range of " +
Expand Down Expand Up @@ -197,6 +216,7 @@
term.uri = namespace + localName;
term.localName = localName;
term.label = term.label || localName;
byUri[term.uri] = term;
});
obj.NS = namespace;
return obj;
Expand Down

0 comments on commit e44aeba

Please sign in to comment.