Working Draft 10 July 2012
Working Draft revised 10 August 2025
This version:
http://democritique.org/softs/WebProtege/mindmapping/docs/specification.xhtml
Editor:
Henry Boccon-Gibod - h.c.boccongibod@gmail.com
hbg@democritique.org
See also :
A mind mapping user interface for WebProtege
list and roles of implied code resources in version 0
The current version of te webprotégé client is classically divided differently in frames, that depends of a chosen tab, i.e. classes, properties, individuals, commments, history.
The suggested evolution is to provide a new tab, at the right of the existings tabs,
that may be named "Mindmapping UI"
clicking on that new tab will display the new mindmapping UI on the current item.
That new option of the User Interface is designed to display, one by one, the graph of any current element of an owl ontology ; it requires only one vertical frame divided in two main parts :
On the top of the UI is displayed in HTML the content of :
1) the IRI of the current item
2) the rdfs:label attached to the current item
3) the rdfs:comment attached to the current item
Below that HTML part is displayed (typically in SVG) a local graph of the current element, that may be a Class, a property or an individual. The local graph of an element shows all, but the only direct neighbours of the current entity, as described in the following pseudo code.
By default the first element displayed will be the root of the ontology, that is the generic Class "Thing".
The following sections describe the algorithms performances of different kinds of entities of an ontology.
Actions plotting actual entities and their relationships are indicated in bold and described respectively in the last two sections.
Note :
Each action is identified by a number, which extension implies a composition
(example X-01 is a part of the action X-0)
A typical class is displayed as in the following pictures on which coordinates are added :
A-0 Role : Display MetaData and Comments of current Class ;
A-1 Role : Display current Class and its neighbours in the subgraph portlet
A-110 Compute "SVG frame Ysize" and "Current Item Ordinate"
initialize the five "to be displayed items" ordinates
(YOne YTwo YThree YFour YFive) and the "SVG frame Ysize" to 0 ;
A-111 Compute the left contribution to the ordinate of the current Item
of the currentClass, get the classSuperClasses collection
for each super class in the classSuperClass collection
increment Left Ordinate Contribution of one Ygap ;
end for each ;
of the currentClass, get the classEquivalentClasses collection
for each equivalent class in the superClass collection
increment Left Ordinate Contribution of two Ygap ;
end for each ;
increment Left Ordinate Contribution of two Ygap ;
//( two Ygap due to the equivalent leg size )
A-112 Compute the right contribution to the ordinate of the current Item
of the currentClass, get the Properties names collection size,
increment right Ordinate Contribution of this size * Ygap ;
of the currentClass, get the Properties names values collection size,
increment right Ordinate Contribution of this size * Ygap ;
A-113 Compute "Current Item Ordinate"
It is :
the Maximum of compared value of left and right ordinates,
plus two Ygap ; (for aesthetic reasons )
Keep "Current Item Ordinate" in memory as "YThree" .
A-114 Compute the left contribution to the "SVG frame Ysize"
for each Class Property (of which current Class is in the domain)
increment left "SVG frame Ysize" Contribution of one Ygap ;
for each Property domain
increment left "SVG frame Ysize" Contribution of one Ygap ;
end for each
end for each ;
A-115 Compute the right contribution to the "SVG frame Ysize"
for each SubClass
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap ;
for each asserted Class Individual
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap
for each inferred Class Individual
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
A-115 Compute "SVG frame Ysize"
It is :
Current Item Ordinate, plus
Maximum of compared value of left and right "SVG frame Ysize" Contributions,
plus two Ygap ; (for aesthetic reasons).
Keep "SVG frame Ysize" in memory as "SVG frame Ysize" ;
A-120 Create a SVG frame
its Xsize value is initialized in an Init Resource ;
its Ysize is "SVG frame Ysize" ;
re-initialize the five "to be displayed items" ordinates ;
A-121 Place SuperClasses and SuperClasses equivalents
of currentclass get parent classes collection
for each super class
Draw Bezier Leg in Yellow from XOne, YOne to XThree YThree ;
Draw OWL Entity SuperClass at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each
of currentclass get equivalent classes collection
for each current class equivalent
Draw Bezier Leg in Green from XOne, YOne to XThree YThree ;
Draw OWL Entity SuperClass equivalent at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each ;
A-122 Place DatatypeProperties (that may be functionnal)
for each DatatypeProperty
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity DatatypeProperty XFour, YFour with small scale;
increment YFour of one Ygap ;
set YFive as equal to YFour plus Ygap
end for each ;
A-123 Place ObjectProperties (that may be functionnal, symmetric, transitive )
for each ObjectProperty
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity ObjectProperty at XFour, YFour with small scale;
set YFive as equal to YFour plus Ygap
for each ObjectProperty range Class
Draw Bezier Leg in Blue from XFour, YFour to XFive YFive ;
Draw OWL Entity Class at XFive, YFive with small scale;
increment YFive of one Ygap ;
end for each ;
set YFour as equal to YFive plus Ygap
end for each ;
A-124 Place Individuals (that may be issued from equivalent Class )
set YFour as equal to YThree plus two Ygap
for each Individual of Current Class Type
Draw Bezier Leg in Red from XThree, YThree to XFour YFour ;
Draw OWL Entity Individual at XFour, YFour with small scale;
increment YFour of one Ygap ;
end for each ;
for each Individual of equivalent of Current Class Type
Draw Bezier Leg in Red from XThree, YThree to XFour YFour ;
Draw OWL Entity Individual at XFour, YFour with small scale;
increment YFour of one Ygap ;
end for each ;
A-125 Place (in front) the Current Class
Draw OWL Entity Current Class at XThree, YThree with large scale;
Close SVG frame ;
End of A (Displaying a Class)
B-1 Role : Display current ObjectProperty and its neighbours
the graph will be displayed in a portlet
B-10 Compute "SVG frame Ysize" and "Current Item Ordinate",
initialize the five "to be displayed items" ordinates
(YOne YTwo YThree YFour YFive) and the "SVG frame Ysize" to 0 ;
B-111 Compute the left contribution to the ordinate of the current Item
for each super ObjectProperty of which the current is a subClass
increment Left Ordinate Contribution of one Ygap ;
end for each ;
increment Left Ordinate Contribution of one Ygap ;
B-112 Compute the right contribution to the ordinate of the current Item
for each current ObjectProperty range Class
increment right Ordinate Contribution of one Ygap ;
end for each ;
B-113 Compute "Current Item Ordinate"
It is :
the Maximum of compared value of left and right ordinates,
plus One Ygap for future edition buttons
plus two Ygap ; (for aesthetic reasons );
Keep "Current Item Ordinate" in memory as "YThree" ;
B-114 Compute the left contribution to the "SVG frame Ysize"
for each ObjectProperty domain Class
increment left "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
B-115 Compute the right contribution to the "SVG frame Ysize"
for each ObjectProperty SubType
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap ;
B-115 Compute "SVG frame Ysize"
It is :
Current Item Ordinate
plus the Maximum of compared value of left and right "SVG frame Ysize" Contributions,
plus two Ygap ; (for aesthetic reasons).
Keep "SVG frame Ysize" in memory as "SVG frame Ysize" ;
B-120 Create a SVG frame
its Xsize value is initialized in an Init Resource ;
its Ysize is "SVG frame Ysize" ;
re-initialize the five "to be displayed items" ordinates ;
B-121 Place ObjectProperty SuperTypes
for each ObjectProperty superType
Draw Bezier Leg in Blue from XOne, YOne to XThree YThree ;
Draw OWL Entity ObjectProperty at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each ;
B-122 Place ObjectProperty range Class
for each ObjectProperty range Class
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity Class XFour, YFour with small scale;
increment YFour of one Ygap ;
set YFive as equal to YFour plus Ygap
end for each ;
B-123 Place ObjectProperty SubTypes )
set YFour as equal to YThree plus two Ygap
for each ObjectProperty SubTypes of Current ObjectProperty Type
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity ObjectProperty at XFour, YFour with small scale;
increment YFour of one Ygap ;
end for each ;
B-124 Place (in front) the Current ObjectProperty
Draw OWL Entity Current ObjectProperty at XThree, YThree with large scale;
Close SVG frame ;
End of B (Displaying an ObjectProperty)
C-1 Role : Display current DataTypeProperty and its neighbours
the graph will be displayed in a portlet
C-10 Compute "SVG frame Ysize" and "Current Item Ordinate",
initialize the five "to be displayed items" ordinates
(YOne YTwo YThree YFour YFive) and the "SVG frame Ysize" to 0 ;
C-111 Compute the left contribution to the ordinate of the current Item
for each super DataTypeProperty of which the current is a subtype
increment Left Ordinate Contribution of one Ygap ;
end for each ;
increment Left Ordinate Contribution of one Ygap ;
C-112 Compute the right contribution to the ordinate of the current Item
for each current ObjectProperty range Class
increment right Ordinate Contribution of one Ygap ;
end for each ;
C-113 Compute "Current Item Ordinate"
It is :
the Maximum of compared value of left and right ordinates,
plus One Ygap for future edition buttons
plus two Ygap ; (for aesthetic reasons );
Keep "Current Item Ordinate" in memory as "YThree" ;
C-114 Compute the left contribution to the "SVG frame Ysize"
for each DataTypeProperty domain Class
increment left "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
C-115 Compute the right contribution to the "SVG frame Ysize"
for each DataTypeProperty SubType
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap ;
C-115 Compute "SVG frame Ysize"
It is :
Current Item Ordinate , plus
Maximum of compared value of left and right "SVG frame Ysize" Contributions,
plus two Ygap ; (for aesthetic reasons).
Keep "SVG frame Ysize" in memory as "SVG frame Ysize" ;
C-120 Create a SVG frame
its Xsize value is initialized in an Init Resource ;
its Ysize is "SVG frame Ysize" ;
re-initialize the five "to be displayed items" ordinates ;
C-121 Place DataTypeProperty SuperType
for each DataTypeProperty superType
Draw Bezier Leg in Blue from XOne, YOne to XThree YThree ;
Draw OWL Entity DataTypeProperty at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each ;
C-122 Place DataTypeProperty range Class
for each DataTypeProperty range Class
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity DataTypeProperty XFour, YFour with small scale;
increment YFour of one Ygap ;
set YFive as equal to YFour plus Ygap
end for each ;
C-123 Place DataTypeProperty SubTypes )
set YFour as equal to YThree plus two Ygap
for each DataTypeProperty SubTypes of Current ObjectProperty Type
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity DataTypeProperty at XFour, YFour with small scale;
increment YFour of one Ygap ;
end for each ;
C-124 Place (in front) the Current DataTypeProperty
Draw OWL Entity Current DataTypeProperty at XThree, YThree with large scale;
Close SVG frame ;
Close XHTML ;
End of C (Displaying an DataTypeProperty)
D-1 Role : Display current Individual and its neighbours
the graph will be displayed in a portlet
D-10 Compute "SVG frame Ysize" and "Current Individual Ordinate"
initialize the five "to be displayed items" ordinates (YOne YTwo YThree YFour YFive) and the "SVG frame Ysize" to 0 ;
D-111 Compute the left contribution to the ordinate of the current Individual
for each Class of which Individual is a member
increment Left Ordinate Contribution of one Ygap ;
end for each ;
for each equivalent Class
increment Left Ordinate Contribution of one Ygap ;
end for each ;
increment Left Ordinate Contribution of one Ygap ;
D-112 Compute the right contribution to the ordinate of the current Individual
for each Individual Property
increment right Ordinate Contribution of one Ygap ;
for each Property range
increment right Ordinate Contribution of one Ygap ;
end for each ;
end for each ;
D-113 Compute "Current Item Ordinate"
It is :
the Maximum of compared value of left and right ordinates,
plus One Ygap for future edition buttons
plus two Ygap ; (for aesthetic reasons )
Keep "Current Item Ordinate" in memory as "YThree" .
D-114 Compute the left contribution to the "SVG frame Ysize"
for each Individual Property (of which current Individual is the target)
increment left "SVG frame Ysize" Contribution of one Ygap ;
for each Property domain
increment left "SVG frame Ysize" Contribution of one Ygap ;
end for each
end for each ;
D-115 Compute the right contribution to the "SVG frame Ysize"
for each SubClass
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap ;
for each asserted Class Individual
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
for aesthetic reason increment right "SVG frame Ysize" Contribution of one Ygap
for each inferred Class Individual
increment right "SVG frame Ysize" Contribution of one Ygap ;
end for each ;
D-115 Compute "SVG frame Ysize"
It is :
Current Item Ordinate
plus the Maximum of compared value of left and right "SVG frame Ysize" Contributions,
plus two Ygap ; (for aesthetic reasons).
Keep "SVG frame Ysize" in memory as "SVG frame Ysize" ;
D-120 Create a SVG frame
its Xsize value is initialized in an Init Resource ;
its Ysize is "SVG frame Ysize" ;
re-initialize the five "to be displayed items" ordinates ;
D-121 Place Classes and Classes equivalents
for each Class
Draw Bezier Leg in Yellow from XOne, YOne to XThree YThree ;
Draw OWL Entity Class at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each
for each super class equivalent
Draw Bezier Leg in Green from XOne, YOne to XThree YThree ;
Draw OWL Entity SuperClass equivalent at XOne, YOne with small scale;
increment YOne of one Ygap ;
end for each ;
D-122 Place DatatypeProperties (that may be functionnal)
for each DatatypeProperty
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity DatatypeProperty XFour, YFour with small scale;
increment YFour of one Ygap ;
set YFive as equal to YFour plus Ygap
end for each ;
D-123 Place ObjectProperties (that may be functionnal, symmetric, transitive )
for each ObjectProperty
Draw Bezier Leg in Blue from XThree, YThree to XFour YFour ;
Draw OWL Entity ObjectProperty at XFour, YFour with small scale;
set YFive as equal to YFour plus Ygap
for each ObjectProperty range Class
Draw Bezier Leg in Blue from XFour, YFour to XFive YFive ;
Draw OWL Entity Individual at XFive, YFive with small scale;
increment YFive of one Ygap ;
end for each ;
set YFour as equal to YFive plus Ygap
end for each ;
D-124 Place (in front) the Current Individual
Draw OWL Entity Current Individual at XThree, YThree with large scale;
Close SVG frame ;
End of D (Displaying an Individual)
Get Parameters (OWLType, ID, X, Y, scale, color)
Get Label
choose displayed label from, in order of availability
the unique label in the current language, or :
the unique label in an unset language, or :
the Class ID .
end of choose ;
compute bounding scaled Box length
Draw rectangle
at X, Y,
with width set to Box length
with height set to Icon height
;
insert Icon of OWL TYPE
at X, Y,
scaled to scale parameter ;
Print displayed label,
at X + Icon width, Y,
scaled to scale parameter,
colored with color parameter;
Get Parameters (Xbegin, Ybegin, Xend, Yend, color)
Draw a SVG path
starting at Xbegin, Ybegin,
put C poles at Xbegin, Yend,
and again at Xbegin, Yend,
ending at Xend, Yend,
colored with color parameter;
Navigation along the ontology is obtained by clicking with the left button of the mouse on any element displayed that is linked to the current element.
After clicking on such entity it will become the current element.
The display will move it smoothly from where it was to the middle of the frame then will be displayed smoothly its own neighbours entities as discribed in the following pseudo code.
Clicking in the graph visualisation portlet or in the Class Tree portlet must set it automatically as the controlling one, and synchronize the display of others.
That feature is based on the setup of a "current language"
The first accessed rdfs:label in the current language is displayed, as it is supposed to be unique
The editing process may depends on the verified rights of the user.
They may be of three levels :
read only, abox edition, tbox edition (during tbox edition, abox edition is inhibited)
The edition (create, modify delete ontology elements) of the ontology is allowed from the graph visualisation portlet with the following features :
- one may click on the right mouse button when the mouse is :
on the current item name or
on one of its properties.
on one of its property values.
- to click on the right mouse button displays a context menu linked by a dynamic leg to the current clicked item (that can be either the current item or one of its property).
- to move the mouse with right button down move the popup menu and adapt the shape of the link between the displayed current item origin and the popup menu. see here a prototype example of that feature
The popup menu will depends dynamically on the relative position of the end, in order to respect approximatively the relative position of the created entity with respect on the current one, as these position are described in the above pseudo-code.
For instance a rubberband on the left above a current class would propose to create our choose a superclass. or a rubberband on the right side below a class would propose to create or choose a subclass or to create or choose an individual.
That feature acts on the current element : the popup menu provide a delete button. Click on the left button initiate the element deleting process as it is in web-protégé.
protégé-server take care of the consistancy of any OWL entity which were related to the deleted element
That feature acts only on the current element and/or its properties: the popup menu provides a set of possible creations, the list of which depends on clicked element
to mouse down on the right button initiate the creation process.
The creation process depends on the kind of object to be created :
Typically the process get Five steps :
- One : to mouse down on the right button and move display an attached menu with the list of allowed properties
- Two : release the button let the attached menu where it is.
- Three : to click on one of the property list in the attached menu :
- create the potential property
- display a second property menu allowing either :
- to create the target element ;
- to choose the target element in a list;
- in both case, one or two attached menu displays the list of allowed possibilities.
- Four : to click on one of the possibility either :
- establish the chosen link with the existing chosen existing entity.
- create the new entity in the chosen context with default values.
- Five : update the graph of current element.
The label or the comments of the current element may be changed after clicking on it as it is in the current UI of webprotege.
Modify OWL entity only acts on values of properties of the current element : the popup menu provides a set of possible actions, the list of which depends on the current element.
these actions may be :
- removing an objectProperty value.
- editing a dataTypeProperty value.
on clicking with right button on a property value :
- on an objectProperty value, a menu ask to confirm the property removal.
- on a datatypeProperty value, a menu display the text content and its attributes, with an ok and a cancel button.
1
Protégé and WebProtégé are national resources for biomedical ontologies and knowledge bases supported by the National Institute of General Medical Sciences
Protégé is a core component of The National Center for Biomedical Ontology
Copyright © 2012 Stanford Center for Biomedical Informatics Research
