One of the challenges of building a dynamic HTML page that works with OWL-DL data has been how to visualize OWL data without knowing in advance what the data will be about.
For any given owl:Class you do not know in advance which properties will be defined, whether it has children, or whether it will have a description (rdfs:comment) or not, or if any terms (rdfs:label) are assigned to it in any given language. You could write custom code for each application, but that will not get us very far and will be very cumbersome.
Much better is to have some sort of dynamic templating system that allows us to fill in the blanks, and I have been looking for something like that ever since I started coding jOWL. From jOWL (5.1) 6.0 on, the User Interface extensions contain a new component called owl_propertyLens. Luckily I didn't have to invent the wheel all by myself. To create this owl_propertylens functionality I found some inspiration in both the
Fresnel abstract box model (created by the MIT - and used in for example the Simile - Exhibit project) and the mjt templating language (MetaWeb Technologies - freebase).
The first implementation was a based on a couple of ideas inspired by the Fresnel display vocabulary for RDF. But, in order to allow templating of SPARQL-DL queries, I had to make a more hybrid approach, so that the various parameters of a query can integrated with our HTML. The result is I think a quite flexible templating system, specifically tailored towards OWL-DL syntax. As a matter of fact most of the visualisation can be specified by modifying the HTML (no javascript options required). An example page that really needed a templating system like this is the jOWL generic Browser page, a page intended to visualize any ontology loaded with the Ubiquity - Firefox Command I wrote recently.
Basics of an owl_propertyLens
A first thing to mention is that I decided to make use of custom data attributes (actually one kind only: data-jowl). This might seem strange to some, but apparently custom data attributes will make it as a new feature for HTML 5. Attributes of the form 'data-...' are valid HTML5. So basically I'm just being a little ahead of time.
The 'abstract box model' uses three kinds of boxes:
- The topmost is the resourcebox, it is the HTML that surrounds one given resource, and contains several properties. This is the element you call .owl_propertyLens() on, it should contain the attribute class="resourcebox" and preferably a data-jowl attribute with value specifying the expected type of resource:
<div class="resourcebox" data-jowl="owl:Class">
....
</div> - Inside the resourcebox you declare propertyboxes: these are the html fragments that encapsulate (surround) a given kind of 'property', in the broad sense of the word. If the 'property' is unavailable then the propertybox will be hidden from view. A propertybox should contain the attribute class="propertybox".
<div class="propertybox">...</div>
- The third and smallest boxes are what can be considered 'valueboxes'. In order to avoid too much nested HTML elements, valueboxes can co-locate with their propertybox elements. They are identified by the data-jowl attribute, for which it's value specifies the kind of result that is expected. A propertybox can contain at max one data-jowl specification.
Currently the supported values are:- term (showing all available rdfs:label's for an ontology element)
- rdf:ID (the identifier of the element)
- rdfs:label (a representation name for the element)
- rdfs:comment (descriptions for the element)
- SPARQL-DL queries (syntax: sparql-dl + ":" + abstract SPARQL-DL query)
- permalink: create a permalink for the element
- rdfs:range and rdfs:domain: for properties, the range or domain
- owl:disjointWith : disjoints specified on the element.
For each matching result to a property the data-jowl element (valuebox) will be duplicated.
Valueboxes and examples
From the MJT templating language I borrowed the idea of text substitution. This means that inside a 'valuebox' you designate the parameters to be shown by having an element with text equal to parameter surrounded by curly brackets and prefixed with a dollar sign. That is particularly useful for SPARQL-DL statements. Examples:
- Simplest propertylens syntax:
<div class="propertybox" data-jowl="rdfs:label">${rdfs:label}</div> - Another way of defining a propertybox:
<div class="propertybox" data-jowl="rdf:ID">ID = <span>${rdf:ID}</span></div> - More complex example, new <li> elements are created for each term present. If no terms are present, then this entire section will not display.
<div class="propertybox">
Terms:
<ul>
<li data-jowl="term">${term}</li>
</ul>
</div> - SPARQL-DL example: to add the current resource as a parameter: use the data-jowl value of the resourcebox in the abstract syntax as in the example below:
<div class="propertybox">
Direct children:
<div data-jowl="sparql-dl:DirectSubClassOf(?c, owl:Class)">${?c}</div>
</div> - SPARQL-DL example with multiple parameters to show:
<div class="propertybox" data-jowl="sparql-dl:PropertyValue(owl:Class, ?p, ?t)">
<span>${?p}</span><span>: </span><span>${?t}</span>
</div>
Feeding an ontology element to the owl_propertyLens
Like any other UI component, there are two ways to update the template with an ontology element.
var lens = $('#some_element').owl_propertyLens();- propertyChange: pass the owl element inside the propertyChange function:
lens.propertyChange(jOWL('wine')) - By listening to another component, such as a treeview (automatic updates):
sometreeview.addListener(lens);
See the jOWL demo's for some examples.
Additional (optional) Javascript parameters
The templating system should be flexible enough to meet most needs. But there may be cases where you need a little extra control. This can be achieved by feeding some additional options with the owl_propertyLens function.
- onUpdate: a function that will be called each time the template has been updated with a new ontology element.
- onChange: allows you to specify what should happen with elements referencing a given kind of ontology element (owl:Class, owl:Thing, ..) inside the lens. This allows for example to set up a tooltip that will be displayed each time an owl:Thing reference inside the lens is hovered over. See the jOWL generic Browser page for an example.
- tooltip = true: removes the lens from the document, to be used as a tooltip within other components.
- specific data-jowl values: see the jOWL generic Browser page for examples.
- split: if multiple results are present, then this string will additionally be used to separate results (example: ', ').
- "a parameter": a function that can be specified for any of the bracketed parameters (example: rdfs:comment) in the template. The function gives access to the specific HTML elements for this parameter.
Conclusion
I don't know about your opinion, but this system seems quite flexible, not in the least thanks to the SPARQL-DL support. It serves it's purpose in many different situations (see Demo's) and so far I have been very happy with the implementation.
Many, but not all jOWL Demo's have been updated, a task for the weeks to come.
David.
