INSTITUTO TECNOLÓGICO Y DE ESTUDIOS SUPERIORES DE OCCIDENTE Reconocimiento de validez oficial de estudios de nivel superior según acuerdo secretarial 15018, publicado en el Diario Oficial de la Federación el 29 de noviembre de 1976. Departamento de Electrónica, Sistemas e Informática MAESTRÍA EN SISTEMAS COMPUTACIONALES UPGRADING WEBVOWL VISUALIZER Trabajo de Obtención de Grado que para obtener el grado de MAESTRO EN SISTEMAS COMPUTACIONALES Presenta: Ing. Luis Alfonso Campos Aguilera Director: Dr. Iván Esteban Villalón Turrubiates San Pedro Tlaquepaque, Jalisco. julio de 2017. INSTITUTO TECNOLÓGICO Y DE ESTUDIOS SUPERIORES DE OCCIDENTE Reconocimiento de validez oficial de estudios de nivel superior según acuerdo secretarial 15018, publicado en el Diario Oficial de la Federación el 29 de noviembre de 1976. Departamento de Electrónica, Sistemas e Informática MAESTRÍA EN SISTEMAS COMPUTACIONALES MEJORANDO EL VISUALIZADOR WEBVOWL Trabajo de Obtención de Grado que para obtener el grado de MAESTRO EN SISTEMAS COMPUTACIONALES Presenta: Ing. Luis Alfonso Campos Aguilera Director: Dr. Iván Esteban Villalón Turrubiates San Pedro Tlaquepaque, Jalisco. julio de 2017. 3 ACKNOWLEDGEMENTS The work and support of many people favored the development of this work; Not only of this document, but of all those tasks and projects that were carried out during this course. My family has taken the course with me, because they had to cheer me up during difficult days; either washing a dish that I forgot to clean because I came up with an idea for a final project, or preparing something for my breakfast because they saw me staying up late at night doing homework. With encouraging words when I arrived tired from a difficult class or understanding when, instead of eating out with them, they had to bring food home allowing me to continue with an online exam. They are the best. Miriam Escobar is the person in the passenger seat. I discussed with her each strategy to solve a problem and every concern for a difficult examination. Her support, encouragement, ideas and participation on each team I belonged to during classes was excellent. She even showed me the syllabus to enter this course. Luis Escobar shared his time and knowledge for the realization of this document. Because of him, this is about web semantics and also, the use of WebVOWL was his idea. Dr. Ivan Villalon is my adviser for this document. Always with the best attitude and willingness to help me with any situation that may arise. His always positive way of seeing things and the way he followed my activities throughout the course were exceptional. ITESO is the institution that allowed me, thanks to its support in several aspects, the realization of this document, and personal and professional growth throughout the course. In the economic aspect, supported me with a discount on tuition fees. They correctly chose subjects and teachers for each course and the staff in general was always very kind and willing to solve any questions or problems that might arise. CONTPAQi is the company where I currently work as a software engineer. Thanks to they allowed me to adjust my schedule, I was able to attend each of the classes in a timely manner. In addition, due to an agreement with ITESO, they also helped to reduce tuition fees. My team members also contributed. I had to get there before them, and leave before them to attend classes. For that reason, sometimes they had to wait for an important meeting, or sometimes they had to wait to ask me about some change that I made. No one ever made any comments or complained that I could leave early. I thank you all. CONACYT supported me economically with an indispensable scholarship for the completion of this course. The scholarship number 424529 has my name on it and I am very grateful for it. The teachers who taught each course, put effort in preparation of each class. They struggled to answer the questions I had. They carefully reviewed each work, task, and project in order to give me feedback and help me improve. For each person who, in one way or another, were supporting me in the difficult days. Thank you very much. 4 El trabajo y apoyo de muchas personas soporta el desarrollo de este trabajo; no solamente del presente, sino de todas aquellas tareas y proyectos que fueron realizados durante este curso. Mi familia ha realizado el curso junto conmigo, pues han tenido que apoyarme durante los días difíciles; ya sea lavando un plato que olvidé limpiar porque me surgió una idea para un proyecto final de una materia, o preparando algo para mí desayuno porque me vieron acostarme tarde una noche anterior realizando una tarea. Con palabras de aliento cuando llegué cansado de una clase con un tema difícil de comprender y entendiendo cuando, en lugar de salir a comer con ellos, tuvieron que traer comida a casa permitiendo que yo continuara con un examen en línea. Son los mejores. Miriam Escobar es la persona en el asiento del pasajero. Con ella platiqué cada estrategia para resolver un problema y cada preocupación por un examen difícil. Su apoyo, aliento, ideas y participaciones en cada equipo al que pertenecí durante las clases fue excelente. Ella incluso me mostró el plan de estudios para ingresar a este curso. Luis Escobar compartió su tiempo y conocimiento para la realización del presente documento. Fue gracias a él que el trabajo tomó el tema de la semántica web y también la utilización de WebVOWL. El Dr. Iván Villalón es mi asesor para este trabajo. Siempre con la mejor actitud y disposición para ayudarme con cualquier situación que se presentara. Su manera siempre positiva de ver las cosas y la forma en que dio seguimiento a mis actividades durante todo el curso fueron excepcionales. ITESO es la institución que me permitió, gracias a su apoyo en varios aspectos, la realización de este documento, y un crecimiento personal y profesional a lo largo del curso. En el aspecto económico me apoyó con un descuento en las colegiaturas de las materias. Eligió de manera acertada los temas y maestros para cada una de las asignaturas y el personal en general se mostró siempre muy amable y dispuesto a resolver cualquier duda o problema que se me presentara. CONTPAQi es la empresa en la que actualmente me desempeño como ingeniero de software. Gracias a que me permitió ajustar mi horario pude asistir a cada una de las clases en tiempo y forma. Además, debido a un convenio con el ITESO, también ayudo a reducir la cuota de las colegiaturas. Los compañeros de mi equipo de trabajo también contribuyeron. Tenía que llegar antes que ellos y salir antes que ellos para asistir a clases. Por esa razón, a veces teníamos que esperar un día para realizar una junta importante, o en ocasiones tenían que esperar para preguntarme algo de algún cambio mío. Ninguno hizo nunca algún comentario o se quejó de que yo pudiera salir temprano. Se los agradezco. CONACYT me apoyó económicamente con una beca indispensable para la realización de este curso. La beca con el número 424529 tiene mi nombre y estoy muy agradecido por ello. Los maestros que impartieron cada uno de los cursos, pusieron empeño en la preparación de cada clase. Se esforzaron en responder las preguntas que tenía para ellos. Revisaron cuidadosamente cada trabajo, tarea y proyecto con el fin de darme retroalimentación y ayudarme a mejorar. Para cada una de las personas que de un modo u otro estuvieron apoyándome en los días difíciles. Muchas gracias. 5 DEDICATION I would like to dedicate this work to all the people mentioned in the acknowledgments. Without the support of any of them, this would have been very complicated at best. 6 Me gustaría dedicar este trabajo a todas las personas mencionadas en los agradecimientos. Sin el apoyo de cualquiera de ellos, su realización hubiese sido muy complicada en el mejor de los casos. 7 SUMMARY These days, information that is on the web resides in structures useful for people, but not convenient for handling it using computers. The so-called Semantic Web or Web 3.0 is based on the use of ontologies to represent areas of knowledge, and it is considered by experts as the next step in the evolution of how we store and manage information. The present work aims to improve navigation on large graphs that represent ontologies, within a tool that uses web technologies called WebVOWL. The elements, relationships between them, and the labels, cause that navigation on a big graph becomes little manageable for users. The use of a miniature zoomed out view (called minimap or minimap view) is the main contribution of this work, and is presented as a way to help the user analyze a specific part of the graph in greater detail. The two most important concepts to understand the theory on which the WebVOWL editor is built on are OWL and VOWL. Information about three ontology visualizers based on web technologies is shown as way to help better understand this type of tools; TopBraid, Protégé and WebVOWL itself. Details of important concepts to understand WebVOWL are listed, trying to explain to the user why this editor in much more than a pretty animation of a graph in which the components can be dragged. The steps that were necessary to add a minimap to the WebVOWL code for a better navigation over the ontologies are described. It is mentioned how to configure a pair of development tools, the strategy followed for coding and the reason and intention of the algorithms developed. Finally, results and conclusions obtained are shown, as well as some possible future improvements. 8 Actualmente, la información de la web reside en estructuras útiles para las personas, pero poco convenientes para su manejo utilizando computadoras. La llamada Semántica Web o Web 3.0 está basada en el uso de ontologías para representar áreas de conocimiento, y es considerada por muchos expertos como el siguiente paso en la evolución de la forma en que almacenamos y administramos la información. El presente trabajo tiene como objetivo mejorar la navegación sobre grafos de gran tamaño que representan ontologías, dentro de una herramienta que utiliza tecnologías web llamada WebVOWL. Los elementos, las relaciones entre ellos y sus etiquetas, causan que la navegación sobre grafos de gran tamaño sea poco manejable para los usuarios. La utilización de una vista alejada en miniatura (llamada minimapa o vista en minimapa) es la principal contribución de este trabajo, y es presentada como una manera de ayudar al usuario a analizar partes específicas de la ontología en mayor detalle. Los dos conceptos más importantes para entender la teoría sobre la cual está construido WebVOWL son OWL y VOWL. Información sobre tres visores de ontologías, basados en tecnologías web, es utilizada como una manera de entender mejor este tipo de herramientas; TopBraid, Protégé y el mismo WebVOWL. Se muestran conceptos importantes para entender mejor a WebVOWL, con la intención de que el editor en cuestión signifique para el usuario algo más que la bonita animación de un grafo en la que se pueden arrastrar los componentes. Los pasos que fueron necesarios para agregar un vista en minimapa al código de WebVOWL para una mejor navegación sobre las ontologías son descritos. Se menciona cómo configurar un par de herramientas de desarrollo y la estrategia seguida para la codificación, además de la razón e intención de los algoritmos desarrollados. Finalmente, se muestran los resultados y las conclusiones obtenidas, así como algunas posibles mejoras futuras. 9 CONTENTS [1] INTRODUCTION ............................................................................................................................. 14 1.1 BACKGROUND............................................................................................................................................. 15 1.2 JUSTIFICATION ............................................................................................................................................ 15 1.3 PROBLEM ................................................................................................................................................... 15 1.4 HYPOTHESIS ............................................................................................................................................... 16 1.5 OBJECTIVES ................................................................................................................................................ 16 1.5.1 General Objective ......................................................................................................................................... 16 1.5.2 Specific Objectives........................................................................................................................................ 16 1.6 SCIENTIFIC OR TECHNOLOGICAL CONTRIBUTION................................................................................................. 16 [2] STATE OF THE ART OR TECHNIQUE ................................................................................................ 17 2.1 TOPBRAID COMPOSER.................................................................................................................................. 19 2.2 WEBPROTÉGÉ ............................................................................................................................................ 20 2.3 WEBVOWL ............................................................................................................................................... 21 [3] THEORETICAL/CONCEPTUAL FRAMEWORK .................................................................................... 23 3.1 OWL ........................................................................................................................................................ 23 3.2 OWL 2 ..................................................................................................................................................... 24 3.3 VOWL ...................................................................................................................................................... 26 3.4 VOWL 2 ................................................................................................................................................... 26 [4] METHODOLOGICAL DEVELOPMENT ............................................................................................... 28 4.1 CONFIGURATION ......................................................................................................................................... 28 4.1.1 IntelliJ IDEA ................................................................................................................................................... 28 4.1.2 Visual Studio Code ........................................................................................................................................ 29 4.2 DEVELOPMENT............................................................................................................................................ 30 4.2.1 Implementation............................................................................................................................................ 31 [5] RESULTS AND DISCUSSION ............................................................................................................. 34 5.1 RESULTS .................................................................................................................................................... 34 5.2 DISCUSSION................................................................................................................................................ 35 [6] CONCLUSIONS................................................................................................................................ 36 6.1 CONCLUSIONS............................................................................................................................................. 36 6.2 FUTURE WORK ........................................................................................................................................... 36 APPENDIX A ............................................................................................................................................... 41 APPENDIX B ............................................................................................................................................... 42 10 FIGURES Figure 1 Figure 2 Figure 3 Figure 4 Figure 5 Figure 6 Figure 7 Figure 8 TopBraid Composer GUI TopBraid Composer Tools WebProtégé GUI WebVOWL interface OWL 2 Structure GUI IntelliJ IDEA GUI Visual Studio Code WebVOWL GUI without using D3js Example of a minimap view WebVOWL using a minimap view Page 19 Page 20 Page 21 Page 22 Page 25 Page 29 Page 30 Page 31 Figure 9 Figure 10 Page 32 Page 34 11 TABLES Table 1 Information shown for some ontology visualization tools Equivalence of Document or File Categorization and Ontology Features Syntaxes of OWL 2 and their purpose Graphical primitives and color scheme of OWL 2 Page 18 Table 2 Page 24 Table 3 Page 25 Table 4 Page 27 12 ACRONYMS AND ABBREVIATIONS OWL VOWL URI RDF XML IDE HTML GUI CSS D3 TBox ABox SVG Web Ontology Language Visual Notation for OWL Ontologies Uniform Resource Identifier Resource Description Framework Extensible Markup Language Integrated Development Environment Hyper Text Markup Language Graphical User Interface Cascading Style Sheets Data-Driven Documents Terminological Box Assertional Box Scalable Vector Graphic 13 [1] INTRODUCTION Summary—This section introduces some key concepts about semantic web that are useful when talking about showing data and its relations using a tool like WebVOWL. The current web pages are constructed in a way that allows people to understand and benefit from the information contained on them. Text, images, graphics and videos are just some of the resources used to meet the goal of transferring such information to users, in structures that we call documents. This way, it can be said that web is based on the construction of documents and their relations. However, this way of showing and relating data does not allow a more adequate handling by a computer. The semantic web is an extension of the current web in which information is in a well-defined meaning, enabling computers to work on an easier procedure [1]. Its main idea is, “instead of having one web page pointing to another, one data item can point to another, using global references called Uniform Resource Identifiers (URI’s)” [2]. Ontologies are the essence of the semantic web and have become increasingly important in recent years. An ontology is a construction that describes the kinds of entities of a particular domain and how they are related [3]. Many tools have been developed trying to simplify its construction, modeling, and visualizing, which is reflected in higher quality ontologies and a more standard use of them. Applying correctly the knowledge contained on ontologies, computers could make deductions and use that logic to determine how to work with some information. That possibility could be used to automatize a lot of processes in computer sciences. The major obstacle for widespread use of ontologies lies in the complexity of ontology development process [4]. Because of their importance these days, it is necessary to use adequate tools to build, modify and visualize ontologies, in order to keep the correctness on the knowledge and use it properly. This paper addresses ontologies visualizing, considering the improvement of a tool that, using graphs to depict them, provide users with low level of knowledge about semantic web, a better understanding of what it is and what it is useful for. The Ontology Web Language (OWL) is designed for those applications that need to process information. It can be used to express relations between terms of a certain domain. 14 1.1 Background Nowadays, there are lots of tools that work with ontologies, using all kinds of technologies. However, combining the power of these structures with the technologies of the web, allows a massive development of this combination, similar to the one that was given to generate the current web. A dynamic in which many people collaborate to develop areas of knowledge and take advantage of them in many ways. These tools that allow working with that combination of ontologies and web technologies face great challenges. One of the most important is the ease with a casual user can access, not only the use of one of these tools, but also the understanding of the information that is working with, the flexibility and reliability the tool offers to generate something useful for the whole community. After all, the ease that anyone can generate pages has brought the web to its current state. This document mentions three excellent tools, whose implementers took very seriously, characteristics previously mentioned. TopBraid Composer is a visual modeling environment that provides robust solutions for semantic web and Linked Data applications [5]. WebProtégé is an ontology editor and knowledge acquisition tool for the web; it is based in Protégé technology, that has been developed for more than a decade [6]. WebVOWL is an interactive ontology visualizer that uses directed graphs for a very friendly representation of the information contained on them [7]. 1.2 Justification The implementation of a miniature zoomed out view (called minimap or minimap view) represents an advance in handling and visualizing large dimensional ontologies. As the adoption of their use grows up, ontologies increase their size considerably, and the tools need to provide an agile way to get the most out of them. WebVOWL already contains features such as the filtering of displayed nodes, an excellent search for a specific node and the ability to freeze a node with a pin. However, a minimap view complements those tools and improves users' navigation over ontologies. 1.3 Problem Using WebVOWL visualizer, you can navigate over a graph representation to see information contained on an ontology. You can zoom in and out, and move over the graph to see every part of it in more detail. However, when a user is working with an ontology whose graph is large enough, it could get a little lost by moving over the graph and zooming in and out. 15 1.4 Hypothesis Using a minimap view within WebVOWL, a user can move over a large graph and not to lose notion of what part of the ontology he is working with. 1.5 Objectives 1.5.1 General Objective Add to WebVOWL code, a minimap view of the graph shown on it, that allows users to navigate over the graph on an easier way 1.5.2 Specific Objectives 1.- Build a minimap view on a separate module trying to reduce modifications over the original code. 2.- Make code easy to include in the original code 3.- Because WebVOWL is built in javascript using a library called D3js, use this technology to reduce and redraw a graph to use it as a minimap view. 4.- To ease navigation over the graph, allow user to drag elements over the original graph or the minimap view and show the result in both. 5.- To avoid losing perspective on what the user is working on, the graph can be zoomed in and zoomed out and the result will be visible over the two representations. 1.6 Scientific or Technological Contribution An application is considered intelligent when it is able to obtain implicit consequences, based on the explicit knowledge contained in it [8]. As long as the information has a better quality and structure, the greater the number of consequences could be found. Ontologies are representing that information to be exploded, so the importance of a better understanding of that knowledge helps constructing and modifying them. Here is where a better ontology viewer is needed. Tools provided by WebVOWL allow the user to manage and understand the ontology through navigating over it. The minimap view contributes by focusing the user on a part of the ontology that could be improved or modified to obtain more and better consequences from it. 16 [2] STATE OF THE ART OR TECHNIQUE Summary: In this chapter, three ontological viewer options based on web technologies are analyzed. In addition, each fulfills the condition being considered a simple tool for their use. Ontological engineering can be considered more a manual art than a science because there are no definitions or standards of a life cycle, in addition to methodologies and techniques that serve to develop ontologies [9]. The major problem is knowledge acquisition and its maintenance. Many tools for managing, developing, and visualizing ontologies have been developed, trying to make easier and in a standard manner, processes like conceptualization, implementation, consistency checking, and documentation [10]. Most commonly, these tools focus on aspects difficult to understand for ordinary users. Many of them are made for specific types of diagrams or specific information. Thus, the first thing users must do is learn about the type of diagram, to understand the ontology [11]. “The overall sentiment expressed by users of the various ontology development environments clearly reflected the need for facilitating the use of such tools by domain experts rather than by ontologists” [10]. There are many tools to work with ontologies. Most of them, focus on certain aspects and not in showing all classes and properties with their attributes (that would represent complete ontology information). Some focus on class hierarchy and a few relations between properties but do not provide sufficient detail of the relations. Some others represent diverse types of property relations, but do not show sufficient information to fully understand the information in ontologies [11]. Other approach is to show all key elements of ontologies; but using, for example, node-link diagrams without any kind of differentiator, results in diagrams hard to be read. However, include more elaborated notations could not be suitable for casual users. There are 3D graph visualizations, and also representations that use hyperbolic trees. [11]. Finally, there are representations using specific diagram types; for example, tree maps, cluster maps, concept maps, UML diagrams and RDF visualizations [11]. An amazing comparative study of ontology visualizers and their characteristics is shown in [11]. Table 1 shows a summary of this comparison. 17 Visualize Class Hierarchy Tools OWLViz, OntoTrack, KC-Viz, GLOW, CropCircles OntoGraf, FlexViz, OLSVis, OWLPropViz TGViz, NavigOWL SOVA, GROWL Some Types of property relations Use plain node-link diagrams Elaborated notations with different symbols, colors and shapes 3D Graph visualization Hyperbolic trees Tree maps Cluster Maps UML-based ontology visualizations OntoSphere, Onto3DViz, OntoSELF OntoRama, Ontobroker OWL-VisMod, Jambalaya Knoocks, Dope, VIScover, OntoTrix OWLGrEd, Visual Ontology Modeler, TopBraid Composer, OntoViz, VisioOWL, Graffoo, OWLeasyViz COE RDF Gravity, IsaViz, Welkin, RelFinder, gFacet, OOBIAN Insight, LodLive Concept Maps RDF Visualizations Table 1. Information shown for some ontology visualization tools Talking about ontology visualization, Katifori has another approach. He provides information about some tools and groups them, describing andvantages and disadvantages of some visualization methods: indented list methods (offer a Windows Explorer like tree view), node link and tree methods (a set of interconnected nodes with a top-down or left to right layout), zoomable methods (present the nodes in the lower levels of the hierarchy nested inside their parents), space-filling methods (based on the concept of using the whole screen space for the elements) and focus + context or distortion methods (based on the notion of distorting the graph to combine context and focus) [12]. A complete explanation about this visualization techniques is shown in [12]. Another two lists of tools can be reviewed at [13] and [14]. As mentioned before, and in greater detail in [11-15], there are a lot of different graph visualizations of ontologies. Some are too simple and does not show datatype properties and property characteristics required to a better understanding of ontologies. There are some others that fail on differentiating ontology elements, because they use only a different color for each. Some uses abbreviations that makes difficult to casual users to understand what they are working with. As it has been shown, there is a great deal of ontological editors and viewers; however, options are reduced when we talk about those based on web technologies. With elements such as giving an 18 overview of the complete ontology and the consideration of a simple tool are further reduced. Looking for tools based on web technologies, TopBraid Composer [5], WebProtégé [6] and WebVOWL [7] are good choices. 2.1 TopBraid Composer TopBraid Composer is a visual modeling environment for creating and managing ontologies using RDF, RDF Schema and OWL. It provides visual editing capabilities and it is based on Eclipse platform and Jena API. [16] TopBraid Composer is an enterprise-class modeling environment; it is fully compliant with W3C standards. It has a cost but it can be used thirty days as a trial version [17]. The figures 1 and 2 shows the GUI of TopBraid Composer Maestro edition. Figure 1. TopBraid Composer GUI 19 Figure 2. TopBraid Composer Tools 2.2 WebProtégé Protégé is a free, open source platform that works with ontologies. It has many tools like plugins, a desktop ontology editing environment, and a web tool. “WebProtégé is a lightweight ontology development environment for the Web that makes it easy to create, upload, modify and share ontologies for collaborative viewing and editing”. It fully supports OWL 2, RDF/XML, Turtle, OWL/XML and other formats [6]. Uses Google Web Toolkit for the front end and existing Protégé infrastructure on the back end [18]. Figure 3 shows the GUI of WebProtégé. 20 Figure 3. WebProtégé GUI [6] 2.3 WebVOWL WebVOWL is a tool for ontology visualization that is completely implemented with web technologies on the client side [11]. It is open source and is available at [19]. Representing ontologies as graphs is a very common way to depict the structure of the concepts and their relationships on a certain subject or area of knowledge [15]. “WebVOWL is a web application for the interactive visualization of ontologies” [7]. It uses a graph as an ontology representation, where the user can drag, pin, pull, and separate elements to study the ontology in detail. It implements Visual Notation for OWL Ontologies (VOWL) visualizations that are automatically generated from JavaScript Object Notation (JSON) files that contains the classes, properties and datatypes of the ontology. It uses a java-based OWL 2 to VOWL converter to generate those files. If this file does not contain metrics of the ontology, WebVOWL is capable of computing them [7], [11]. As is mentioned in [7], WebVOWL is not completely compatible with all OWL 2 features. Some datatypes and some instance level constructions are not currently supported. Figure 4 shows WebVOWL Interface. 21 Figure 4. WebVOWL interface. Users have a list of seven available ontologies on the “Ontology” menu, or it can visualize external ones using Internationalized Resource Identifiers (IRI) or JSON files. The maximum size of the ontology files that can be visualized is limited to 10MB [7]. 22 [3] THEORETICAL/ CONCEPTUAL FRAMEWORK Summary: This chapter shows the theoretical foundations on wich WebVOWL editor is built The current ability to work with documents is based on the search for keywords. This capability can be greatly benefited using data built with a different structure, e.g. using a vocabulary. A vocabulary on semantic web defines information that describes and represents areas of concern, helps to integrate data and helps to organize knowledge. Choosing a vocabulary depends on the application; some of them just need very simple logic, others may need just agreements on common technologies and finally, some may need more complex logic with reasoning procedures [20], [21]. As mentioned in [20] there are many vocabularies to choose. The one described here is OWL. 3.1 OWL OWL provides a way to describe classes and relationships between them. It is a computational language that can be processed to extract information that is not explicitly expressed. Its first version was published in 2004 and it has greater ability to represent machine interpretable content on the web than Extensible Markup Language (XML), Resource Description Language (RDF) and RDF-Schema technologies [22], [21]. Ontology is a term taken from philosophy and has its origins with the ancient Greeks [23]. They were created in artificial intelligence to facilitate knowledge sharing and re-use [24]. After combining them with web technologies, they became more interesting due to the possibility of massively sharing information. In computer science, an ontology is a semantic model [2] that defines relations between concepts and specifies rules for reasoning, used to describe a domain; a specific theme or area of knowledge (e.g. food, geography, medicine) [11]. Ontologies could be used in e-commerce, facilitating communication by providing a common vocabulary to describe goods and services; also, on search engines, ontologies could help finding words and phrases that are related to the word typed without being the same one [25]. For OWL all individuals in an ontology are instances of owl:Thing [15]. 23 Table 2 shows some equivalences between the structure of a file system objects and ontology terms. This helps to visualize them better. File System Objects Folder Folder/subfolder relationship Categorized Documents Category Category/subcategory relationship Categorization Document Document properties Ontology Entity (class or instance) Isa-relationship Tree view File File properties Taxonomy Instance Slots Table 2. Equivalence of document or file categorization and ontology features [8] OWL provides three sublanguages with different level of expressivity [26]: OWL Lite: provides a classification hierarchy and simple constraints (e.g. it supports cardinality constraints but only permits values of 0 to 1). It has more limitations in the use of the language features than OWL DL and OWL Full. OWL DL: supports maximum expressiveness, computational completeness and decidability (it guarantees to be computable and finish computing it a finite time). OWL Full: supports maximum expressiveness with no computational guarantees. It can be viewed as an extension of RDF - Each of this is an extension of the previous one (e.g. every legal OWL Lite ontology is a legal OWL DL ontology, every legal OWL DL ontology is a legal OWL Full ontology). “Every OWL document is an RDF document and every RDF document is an OWL Full document, but only some RDF documents will be legal OWL Lite or OWL DL document” [26]. 3.2 OWL 2 Limitations of OWL’s expressiveness led to the extension of the language, trying to maintain the decidability of OWL DL [27]. OWL 2 is an extension and revision of the 2004 version of OWL [21]. It was published in 2009, with another edition in 2012. It was designed to facilitate ontology development, sharing and re-use via web technologies [21], [28]. Also, it “represents rich and complex knowledge about things, groups of things and relations between things” [29]. There are some syntaxes available for OWL. Functional-Style syntax is designed to be easier for specification. RDF/XML syntax is the only one that is mandatory to be supported by all OWL 2 tools. Manchester syntax is designed to syntaxes available be easier for non-logicians to read. OWL/XML is an XML syntax for OWL defined by an XML schema. Turtle Syntax allow RDF graphs to be completely written in compact and natural text form [29], [30] . Figure 5 shows the structure of OWL 2. 24 Figure 5. OWL 2 Structure [28] Table 3 shows the purpose of each of the mentioned syntaxes in figure 5. Name of Syntax RDF/XML Mandatory Status Purpose Interchange (can be written and read by all conformant OWL 2 software) Easier to process using XML tools Easier to see the formal structure of ontologies Easier to read/write DL ontologies. Easier to read/write RDF triplets OWL/XML Optional Functional Syntax Optional Manchester Syntax Optional Turtle Optional Table 3. Syntaxes of OWL 2 and their purpose [28] 25 OWL 2 has three sublanguages that are syntactic subsets: OWL 2 EL: “enables polynomial time algorithms for all the standard reasoning tasks”. It is adequate for working with very large ontologies. OWL 2 QL: “enables conjunctive queries to be answered using standard relations database technology”. It is adequate for working with lightweight ontologies with large number of individuals. OWL 2 RL: “enables the implementation of polynomial time reasoning algorithms using ruleextended database technologies operating directly on RDF triplets”. It is adequate for working with lightweight ontologies with large number of individuals and operates directly on RDF data [28]. - All OWL ontologies are valid for OWL 2. It adds new functionality like keys, qualified cardinality restrictions and richer datatypes [28]. 3.3 VOWL The Visual Notation for OWL Ontologies aims to make easier the process to understand an ontology for casual users providing an overview of the complete ontology and making easier explore parts of it in more detail. It focuses on the visual representation of classes, properties, and datatypes and arises from the idea of “providing an integrated representation of classes and individuals” [11], [15]. VOWL is based representing OWL elements to graphical depictions and works with the visualization of the Terminological Box (TBox) along with information from de Assertional Box (Abox). Another characteristic is that there is no limit size to represent ontologies [11], [15]. 3.4 VOWL 2 It is the second version of VOWL. One of its goals is to define a visual language to work with ontologies, that can also be understood by casual users or users with little training [15]. For OWL 2 it was broken down the components of VOWL to a set of shapes and colors that represent datatypes, object properties, classes, and characteristics and their combinations. It focuses on displaying TBox and optionally information from the ABox, but in a different part of the GUI. The set of elements used by VOWL 2 to represent OWL elements are shown in table 4. 26 Primitive Application classes Name General Color Application Classes, object properties, disjoints Elements of RDF and RDF Schema External classes and properties properties RDF property directions datatypes, property labels special classes and properties labels, cardinalities External Deprecated Deprecated classes and properties Datatype Datatypes, literals Datatype property Highlighting Datatype properties Highlighted elements Table 4. Graphical primitives and color scheme of OWL 2 [15] 27 [4] METHODOLOGICAL DEVELOPMENT Summary: This chapter is all about the minimap implementation proposed on WebVOWL code. To develop a minimap view on WebVOWL code, the first step is to obtain the code. It can be downloaded from [31]. The version of the code used to write this is 1.0.3, released on April 22, 2017. This modification was developed on a Microsoft Windows 10 Operative System. 4.1 Configuration WebVOWL project uses technologies like HTML, JavaScript, Node.js [32] and Gruntjs [33]. Two different tools were used at different times to modify the code. 4.1.1 IntelliJ IDEA IntelliJ IDEA is a powerful Integrated Development Environment (IDE) with a lot of features. Requires payment to be used, but has a version that can be used with a student license. It supports different technologies and languages and was the first approach taken to modify WebVOWL. Figure 3 shows how the GUI looks like. IntelliJ IDEA has a built-in terminal (it can be shown using ALT + F12 [34]), so once the code is open on the IDE, it is necessary to type the word “powershell” on the terminal. This is because the default terminal used on Windows systems is the “Command prompt”. After, and positioned on the code path it should be typed “npm install” command. This command installs all dependencies required for execution, defined in the “package.json”. Figure 6 shows the GUI of IntelliJ IDEA. 28 Figure 6. GUI IntelliJ IDEA After dependency installation is completed, it is necessary to use the command “Run index.html” from the menu “Run” and the code is executed. 4.1.2 Visual Studio Code Visual Studio Code is a lightweight source code editor. It comes with support for JavaScript, TypeScript [35] and Node.js [32], besides a lot of extensions to support other languages [36]. This tool was chosen because it is fast and easy to use. Figure 4 shows how the GUI looks like. Same as IntelliJ IDEA, Visual Studio Code has a built-in terminal, but it opens Powershell directly, so only it is necessary to type “npm install” command on the code path to install all dependencies after opening the code on the editor. In order to debug the code using Chrome browser, it is necessary to install a plugin named “Debugger for Chrome” selecting option “Install Additional Debuggers” from the menu called “Debug”. After installation, it is necessary to add a configuration for debugging; it is done using a JSON file called “launch.json”. Inside the “Debug” menu, there is an option called “Add configuration”; it creates the file. Appendix A shows the content used for that file. The final step is calling the command “grunt webserver” on the terminal and, once finished, use “start debugging” option of “Debug” menu. Figure 7 shows the GUI of Visual Studio Code. 29 Figure 7. GUI Visual Studio Code 4.2 Development WebVOWL code includes five principal directories: deploy: Here is where the “executable” code is placed. It is not exactly executable code because it is a web page, but the code is minified, optimized and ready to be showed by a browser. node_modules: This directory is composed of a lot of little modules used on the project. These modules are used to create all kind of objects used among the code. src: This is the only directory modified to the minimap view. Here is where the source code is placed. test: Code for testing is placed here. util: Code to convert Cascading Style Sheets (CSS) attributes to something util for Data-Driven Documents (D3). “D3js is a JavaScript library for manipulating documents based on data” [37]. This library is very important for the code because it allows to draw the graph and interact with it; elements can be dragged, the nodes movement or even set the size of all elements are examples of D3 functionality. To make the use of D3js clearer, figure 5 shows the part of the WebVOWL GUI that is made without it. A graph could be constructed using only HTML and CSS, but it would be a very slow and hard work; besides, the graph would not have movement. Figure 8 shows the GUI of WebVOWL without the D3js functionality. 30 Figure 8. WebVOWL GUI without using D3js WebVOWL code is organized in modules. It has a module that represents the whole graph, a module for the options panel or a module for each shape drawn. The minimap view is also a module that avoids affecting the current code isolating the functionality, and respecting the architecture. 4.2.1 Implementation The idea of making the minimap view a kind of easy addition to the current code, makes sense with the creation of a “minimap.js” file inside of the “src/webvowl/js” directory. This way, functionality is visible to use from “app.js”, the file that contains the principal logic of the page. There are two possible approaches to implement the minimap view: A kind of “thread” with every unit of time (e.g. every second) could be used. It could take a photography of the graph, reduce it, and place it on the minimap area. The main advantage would be that the processor, where the graph is being animated, only would compute the position of each element for a single node, as it currently does. The clearest disadvantage, besides having to take the photographs, is that the movements of the objects in the minimap would not be exactly the same as those of the real size graph. The graph could be drawn and animated twice. The second graph would need to be reduced and placed on the minimap area. The main advantage would be that the graph in the minimap area and the real size graph would move exactly the same way. Every element dragged on the minimap area would be dragged on the real size graph also, because the graph would be the same. The only disadvantage would be that the processor would need to animate the graph twice and calculate - 31 the position for each element twice. On the minimap graph, even a relative position would be needed to be calculated because the space to show everything is reduced. This option was used in this document. A very useful example to implement a minimap view is shown in [38]. This representation includes code using D3js to implement something similar to our graph. Figure 9 shows an example of how a minimap view is viewed. Figure 9. Example of a minimap view [38] The steps to see the minimap view in our graph are: Call the minimap module from “graph.js” module Send to the “minimap.js” file the nodes, links, labels and cardinality of each node. Draw a square area on the lower right corner of the graph. This square needs to be in that position even if the graph is zoomed or dragged. Transform distances of the original graph to the equivalent measure in the minimap graph. Draw the minimap graph. 32 - Animate the minimap graph. The B appendix contains the code used to implement these steps. 33 [5] RESULTS AND DISCUSSION Summary: This chapter shows the results of this work and talks about the taken approach. 5.1 Results Figure 10 shows the expected result of the minimap visualization over the graph showed in WebVOWL. Figure 10. WebVOWL using a minimap view 34 5.2 Discussion This approach consists in drawing twice the graph representing the ontology; one is the main view, and the other, the mini-map presentation. This situation could carry a heavy load on the server side. The processor of the server where the web page is hosted could have a lot of work while increasing the size of the ontologies displayed in WebVOWL and the number of concurrent users on the page. The processor may have difficulty in calculating the paths and positions of each element for each user, even more if it is considered that in the minimap view, it is also necessary to calculate the proportions of each element in the size of the available space to be shown. The example shown in [38] uses the same strategy, but contains a small number of elements. 35 [6] CONCLUSIONS Summary: This chapter shows the conclusions of this document and some ideas that could be useful to implement on WebVOWL code. 6.1 Conclusions D3js is a powerful tool to work with graph representations. It is simple to work with and it has a lot of different options and representations as shown in [37] , [38], and [39]. Navigating over large graphs using a minimap view, helps users to know where in the ontology they are at any given time. The inclusion of the code to draw the minimap view on a separate module respects the current architecture and avoids errors that compromise the stability and usability. This work and the research carried out by Miriam Escobar, called “WebVOWL, Visualization of Individuals into Ontologies” contribute to the research carried out by Luis Escobar called “Semantic Processing” [40], facilitating the use of a tool, based on web technologies, for navigation over graphs that represent ontologies. 6.2 Future Work A way to activate/deactivate the minimap view would be very useful, because some users could be comfortable using all the available space to manipulate a small size ontology. A way to save the graph would be very useful, representing the ontology, distributed after the user modified it for some analysis. Being a web tool, there are two possibilities; the first one would modify the way VewVOWL is currently used, because profiles should be created for each user who would like to use it and be able to save, on each of them, modifications they made during a previous session. This, of course, would force each user to register on the page; a situation that would often cause casual users to decide not to go ahead with visualization. The second option, would be resolved in a less elegant, but perhaps simpler and faster way to implement. It is already possible, with the current code, to export a graph as a Scalable 36 Vector Graphic (SVG) that is downloaded to the user's computer. However, when exported, the visualization stops being interactive (it is no longer possible to move / drag the elements). One way to reload the SVG to WebVOWL could be helpful to continue the analysis done in a previous session. 37 BIBLIOGRAPHY [1] T. B. Lee, J. Hendler, O. Lassila, and others, “The semantic web,” Sci. Am., vol. 284, no. 5, pp. 34– 43, 2001. [2] D. Allemang y J. Hendler, “Semantic Web for the Working Ontologist: Effective Modeling in RDFS and OWL”, Elsevier, 2011. [3] “OWL Web Ontology Language Guide”, W3.org, https://www.w3.org/TR/owl-guide/. [Accessed: 15- Jul- 2017]. 2017. [Online]. Available: [4] M. Hatala, D. Gaševiĉ, M. Siadaty, J. Jovanovic, and C. Torniai, “Ontology extraction tools: An empirical study with educators”, IEEE Trans. Learn. Technol., vol. 5, no. 3, pp. 275–289, 2012. [5] “TopBraid Composer-Maestro Edition (IDE) | TopQuadrant, Inc.”, TopQuadrant, Inc, 2017. [Online]. Available: http://www.topquadrant.com/tools/ide-topbraid-composer-maestro-edition. [Accessed: 15Jul- 2017]. [6] S. Research, “protégé”, Protege.stanford.edu, 2017. [Online]. http://protege.stanford.edu/products.php#web-protege /. [Accessed: 15- Jul- 2017]. Available: [7] S. Vincent Link, “WebVOWL - Web-based Visualization of Ontologies”, Vowl.visualdataweb.org, 2017. [Online]. Available: http://vowl.visualdataweb.org/webvowl.html. [Accessed: 31- Jul- 2017]. [8] F. Baader, D. Calvanese, D. L. McGuinness, D. Nardi, and P. F. Patel-Schneider, “The Description Logic Handbook: Theory, Implementation and Applications,” Kybernetes, vol. 32, no. 9/10, p. 624, 2010. [9] a Gómez-Pérez, M. Fernandez, and a De Vicente, “Towards a method to conceptualize domain ontologies,” Work. Ontol. Eng. ECAI’96, pp. 41–51, 1996. [10] N. Catenazzi, L. Sommaruga, and R. Mazza, “User-friendly ontology editing and visualization tools: The OWLeasyViz approach,” Proc. Int. Conf. Inf. Vis., pp. 283–288, 2009. [11] S. Lohmann, S. Negru, F. Haag, and T. Ertl, “Visualizing Ontologies with VOWL,” Semantic-WebJournal.Net, vol. 0, no. 0, p. 21, 2015. [12] A. Katifori, C. Halatsis, G. Lepouras, C. Vassilakis, and E. Giannopoulou, “Ontology visualization methods$\backslash$—a survey,” ACM Comput. Surv., vol. 39, no. 4, pp. 1–43, 2007. [13] “Ontology (information science)”, En.wikipedia.org, 2017. [Online]. Available: https://en.wikipedia.org/wiki/Ontology_(information_science)#Editor. [Accessed: 15- Jul- 2017]. [14] “Listing of 185 Ontology Building Tools | AI3:::Adaptive Information”, Mkbergman.com, 2017. [Online]. Available: http://www.mkbergman.com/904/listing-of-185-ontology-building-tools/. [Accessed: 15- Jul- 2017]. 38 [15] S. Lohmann, S. Negru, F. Haag, and T. Ertl, “VOWL 2: User-Oriented Visualization of Ontologies,” Int. Conf. Knowl. Eng. Knowl. Manag., pp. 266–281, 2014. [16] “TopBraid - Semantic Web Standards”, W3.org, 2017. https://www.w3.org/2001/sw/wiki/TopBraid. [Accessed: 15- Jul- 2017]. [Online]. Available: [17] “TopBraid Composer TM Getting Started Guide”, TopQuadrant, Inc, 2017. [Online]. Available: http://www.topquadrant.com/docs/marcom/TBC-Getting-Started-Guide.pdf. [Accessed: 15- Jul- 2017]. [18] T. Tudorache, C. Nyulas, N. F. Noy, and M. A. Musen, “WebProtégé: A collaborative ontology editor and knowledge acquisition tool for the web,” Semant. Web, vol. 4, no. 1, pp. 89–99, 2013. [19] V. Vincent Link, “WebVOWL2”, Visualdataweb.de, http://visualdataweb.de/webvowl/. [Accessed: 15- Jul- 2017]. 2017. [Online]. Available: [20] “Ontologies W3C”, W3.org, 2017. [Online]. https://www.w3.org/standards/semanticweb/ontology. [Accessed: 15- Jul- 2017]. [21] “OWL Semantic Web Standards”, W3.org, https://www.w3.org/2001/sw/wiki/OWL. [Accessed: 15- Jul- 2017]. [22] “OWL Web Ontology Language Overview”, W3.org, https://www.w3.org/TR/owl-features/. [Accessed: 15- Jul- 2017]. 2017. [Online]. Available: Available: 2017. [Online]. Available: [23] A. Gomez Perez, M. Fernández Lopez, O. Corcho, “Ontological Engineering: with examples from the areas of Knowledge Management, e-Commerce and the Semantic Web”, Springer Science & Business Media, 2006. [24] J. Davies, D. Fensel, F. van Harmelen, “Towards the Semantic Web: Ontology-driven Knowledge Management”, John Wiley & Sons, 2003. [25] I. Horrocks, P. F. Patel-Schneider, and F. Van Harmelen, “From SHIQ and RDF to OWL: The making of a Web Ontology Language,” Web Semant., vol. 1, no. 1, pp. 7–26, 2003. [26] “OWL Web Ontology Language Overview”, W3.org, 2017. [Online]. https://www.w3.org/TR/2004/REC-owl-features-20040210/. [Accessed: 15- Jul- 2017]. Available: [27] D. Riboni, C. Bettini, “OWL 2 modeling and reasoning with complex human activities”, Pervasive and Mobile Computing, vol. 7, pp. 379-395, 2011. [28] “OWL Web Ontology Language Overview”, W3.org, 2017. [Online]. https://www.w3.org/TR/2012/REC-owl2-overview-20121211/. [Accessed: 15- Jul- 2017]. Available: [29] “OWL 2 Web Ontology Language Primer (Second Edition)”, W3.org, 2017. [Online]. Available: https://www.w3.org/TR/2012/REC-owl2-primer-20121211/. [Accessed: 15- Jul- 2017]. [30] “Turtle - Terse RDF Triple Language”, W3.org, 2017. https://www.w3.org/TeamSubmission/turtle/. [Accessed: 15- Jul- 2017]. [Online]. Available: [31] “VisualDataWeb/WebVOWL”, GitHub, 2017. [Online]. https://github.com/VisualDataWeb/WebVOWL. [Accessed: 15- Jul- 2017]. Available: 39 [32] F. Node.js, “Node.js”, Node.js, 2017. [Online]. Available: https://nodejs.org/es/. [Accessed: 15- Jul2017]. [33] “Grunt: The JavaScript Task Runner”, Gruntjs.com, 2017. [Online]. Available: https://gruntjs.com/. [Accessed: 15- Jul- 2017]. [34] “Features IntelliJ IDEA”, JetBrains, 2017. [Online]. https://www.jetbrains.com/idea/features/#built-in-tools. [Accessed: 15- Jul- 2017]. Available: [35] “TypeScript - JavaScript that scales”., Typescriptlang.org, 2017. [Online]. Available: https://www.typescriptlang.org/. [Accessed: 15- Jul- 2017]. [36] V. Code, “Documentation for Visual Studio Code”, Code.visualstudio.com, 2017. [Online]. Available: https://code.visualstudio.com/docs. [Accessed: 15- Jul- 2017]. [37] M. Bostock, “D3.js - Data-Driven Documents”, D3js.org, 2017. [Online]. Available: https://d3js.org/. [Accessed: 15- Jul- 2017]. [38] “d3 Force Layout with Pan and Zoom Minimap”, Bill White's Blog, 2017. [Online]. Available: http://www.billdwhite.com/wordpress/2013/12/02/d3-force-layout-with-pan-and-zoom-minimap/. [Accessed: 15- Jul- 2017]. [39] “d3/d3”, GitHub, 2017. [Online]. Available: https://github.com/d3/d3/wiki/gallery. [Accessed: 15Jul- 2017]. [39] G. R. Librelotto, J. C. Ramalho, and P. R. Henriques, “TM-Builder: An Ontology Builder based on XML Topic Maps,” Clei Electron. J., vol. 7, no. 2, 2004. [40] L.M. Escobar-Vega, V.H. Zaldivar-Carrillo, and I. Villalon-Turrubiates, “Semantic Processing”, Internal Report PHDEngScITESO-17-09-R. ITESO, Tlaquepaque, Mexico, Jan. 2017. 40 APPENDIX A Summary: This appendix shows the content of the configuration file named “launch.json”. { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8000", "webRoot": "${workspaceRoot}", "sourceMaps": true, "smartStep": true } ] } 41 APPENDIX B Summary: This appendix shows the code used to modify WebVOWL original code and include a minimap view. These lines were added to “graph.js” file. minimap = require("./minimap")(), //Draw minimap minimap.minimapContainer = graphContainer.append("g").classed("minimap", true); minimap.redrawContent(minimap.minimapContainer, classNodes, labelNodes, elementTools, properties, links, dragBehaviour); This is the code for “minimap.js” /** * Contains the logic for the minimap. * @param graph the graph that belongs to these controls * @returns {{}} */ var math = require("./util/math")(); module.exports = function () { var minimap = {}, options = require("./options")(), minimapContainer = null, nodeContainer, 42 labelContainer, cardinalityContainer, linkContainer, nodeElements, labelGroupElements, linkGroups, linkPathElements, cardinalityElements, pulseNodeIds=[], force, //dragBehaviour, nodeMap = [], CARDINALITY_HDISTANCE = 20, CARDINALITY_VDISTANCE = 10, width = 540, height = 420, scale = 0.15, translation = [0,0], origGraphContainer; minimap.redrawContent = function(d, classNodes, labelNodes, elementTools, properties, links, dragBehaviour){ if(!d || classNodes.length < 1 || labelNodes.length < 1){ return; } minimapContainer = d; redrawContent(classNodes, labelNodes, elementTools, properties, links, dragBehaviour); } curveFunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { 43 return d.y; }) .interpolate("cardinal"); force = d3.layout.force() .on("tick", recalculatePositions) .on("end", console.log("terminó")); /*dragBehaviour = d3.behavior.drag() .origin(function (d) { return d; }) .on("dragstart", function (d) { d3.event.sourceEvent.stopPropagation(); // Prevent panning d.locked(true); }) .on("drag", function (d) { d.px = d3.event.x; d.py = d3.event.y; force.resume(); updateHaloRadius(); }) .on("dragend", function (d) { d.locked(false); });*/ /*minimap.setGraphContainer = function(graphContainer){ if(!graphContainer) origGraphContainer = null; else{ origGraphContainer = graphContainer; origGraphContainer. } }*/ 44 function redrawContent(classNodes, labelNodes, elementTools, properties, links, dragBehaviour) { var markerContainer; if (!minimapContainer) { return; } // Empty the graph container minimapContainer.selectAll("*").remove(); /*var minimapCliphPath = minimapContainer.append("clipPath") .attr("id", "wrapperMinimap") .attr("class", "wrapper Minimap") .attr("width", 500) .attr("height", 420);*/ minimapContainer.append("rect") .attr("class", "minimapArea") .attr("x", 200) .attr("y", 200) .attr("width", width)//180) .attr("height", height)//120) //.attr("transform", "translate(0.15, 0.15") .style("fill", 'none') .style("stroke", 'black') .style("stroke-width", 5); //.call(zoom); var xScale = d3.scale.linear() .domain([-width / 2, width / 2]) .range([0, width]); 45 var yScale = d3.scale.linear() .domain([-height / 2, height / 2]) .range([height, 0]); var zoom = d3.behavior.zoom() .x(xScale) .y(yScale) .scaleExtent([0.5, 5]) .on("zoom.canvas", zoomHandler); var zoomHandler = function(newScale) { if (d3.event) { scale = d3.event.scale; } else { scale = newScale; } var tbound = -height * scale, bbound = height * scale, lbound = -width * scale, rbound = width * scale; // limit translation to thresholds translation = d3.event ? d3.event.translate : [0, 0]; translation = [ Math.max(Math.min(translation[0], rbound), lbound), Math.max(Math.min(translation[1], bbound), tbound) ]; d3.select("#minimap") .attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")"); }; zoomHandler(0.15); 46 // Last container -> elements of this container overlap others linkContainer = minimapContainer.append("g").classed("linkContainer", true); cardinalityContainer = minimapContainer.append("g").classed("cardinalityContainer", true); labelContainer = minimapContainer.append("g").classed("labelContainer", true); nodeContainer = minimapContainer.append("g").classed("nodeContainer", true); // Add an extra container for all markers markerContainer = linkContainer.append("defs") // Draw nodes nodeElements = nodeContainer.selectAll(".node") .data(classNodes).enter() .append("g") .classed("node", true) .attr("id", function (d) { return d.id(); }) .call(dragBehaviour); nodeElements.each(function (node) { node.draw(d3.select(this)); }); // Draw label groups (property + inverse) labelGroupElements = labelContainer.selectAll(".labelGroup") .data(labelNodes).enter() .append("g") .classed("labelGroup", true) .call(dragBehaviour); labelGroupElements.each(function (label) { var success = label.draw(d3.select(this)); // Remove empty groups without a label. if (!success) { 47 d3.select(this).remove(); } }); // Place subclass label groups on the bottom of all labels labelGroupElements.each(function (label) { // the label might be hidden e.g. in compact notation if (!this.parentNode) { return; } if (elementTools.isRdfsSubClassOf(label.property())) { var parentNode = this.parentNode; parentNode.insertBefore(this, parentNode.firstChild); } }); // Draw cardinalities cardinalityElements = cardinalityContainer.selectAll(".cardinality") .data(properties).enter() .append("g") .classed("cardinality", true); cardinalityElements.each(function (property) { var success = property.drawCardinality(d3.select(this)); // Remove empty groups without a label. if (!success) { d3.select(this).remove(); } }); // Draw links linkGroups = linkContainer.selectAll(".link") 48 .data(links).enter() .append("g") .classed("link", true); linkGroups.each(function (link) { link.draw(d3.select(this), markerContainer); }); // Select the path for direct access to receive a better performance linkPathElements = linkGroups.selectAll("path"); addClickEvents(); //recalculatePositions(); setForceLayoutData(classNodes, labelNodes, links); force.start(); } function setForceLayoutData(classNodes, labelNodes, links) { var d3Links = []; links.forEach(function (link) { d3Links = d3Links.concat(link.linkParts()); }); var d3Nodes = [].concat(classNodes).concat(labelNodes); setPositionOfOldLabelsOnNewLabels(force.nodes(), labelNodes); force.nodes(d3Nodes) .links(d3Links); } function setPositionOfOldLabelsOnNewLabels(oldLabelNodes, labelNodes) { labelNodes.forEach(function (labelNode) { for (var i = 0; i < oldLabelNodes.length; i++) { var oldNode = oldLabelNodes[i]; 49 if (oldNode.equals(labelNode)) { labelNode.x = oldNode.x; labelNode.y = oldNode.y; labelNode.px = oldNode.px; labelNode.py = oldNode.py; break; } } }); } function addClickEvents() { function executeModules(selectedElement) { options.selectionModules().forEach(function (module) { module.handle(selectedElement); }); } nodeElements.on("click", function (clickedNode) { executeModules(clickedNode); }); labelGroupElements.selectAll(".label").on("click", function (clickedProperty) { executeModules(clickedProperty); }); } function recalculatePositions() { // Set node positions nodeElements.attr("transform", function (node) { return "translate(" + node.x + "," + node.y + ")"; }); // Set label group positions 50 labelGroupElements.attr("transform", function (label) { var position; // force centered positions on single-layered links var link = label.link(); if (link.layers().length === 1 && !link.loops()) { var linkDomainIntersection = math.calculateIntersection(link.range(), link.domain(), 0); var linkRangeIntersection = math.calculateIntersection(link.domain(), link.range(), 0); position = math.calculateCenter(linkDomainIntersection, linkRangeIntersection); label.x = position.x; label.y = position.y; } return "translate(" + label.x + "," + label.y + ")"; }); // Set link paths and calculate additional information linkPathElements.attr("d", function (l) { if (l.isLoop()) { return math.calculateLoopPath(l); } var curvePoint = l.label(); var pathStart = math.calculateIntersection(curvePoint, l.domain(), 1); var pathEnd = math.calculateIntersection(curvePoint, l.range(), 1); return curveFunction([pathStart, curvePoint, pathEnd]); }); // Set cardinality positions cardinalityElements.attr("transform", function (property) { var label = property.link().label(), pos = math.calculateIntersection(label, property.range(), CARDINALITY_HDISTANCE), normalV = math.calculateNormalVector(label, property.domain(), CARDINALITY_VDISTANCE); return "translate(" + (pos.x + normalV.x) + "," + (pos.y + normalV.y) + ")"; 51 }); updateHaloRadius(); } function updateHaloRadius() { if (pulseNodeIds && pulseNodeIds.length > 0) { var forceNodes = force.nodes(); for (var i = 0; i < pulseNodeIds.length; i++) { // console.log("checking Pulse Node Id"+pulseNodeIds[i]); var node = forceNodes[pulseNodeIds[i]]; if (node) computeDistanceToCenter(node); } } } function computeDistanceToCenter(node) { var container = node; var w = graph.options().width(); var h = graph.options().height(); var posXY = getScreenCoords(node.x, node.y, graphTranslation, zoomFactor); var x = posXY.x; var y = posXY.y; var nodeIsRect = false; var halo; var roundHalo; var rectHalo; var borderPoint_x = 0; var borderPoint_y = 0; var defaultRadius; var offset = 15; 52 var radius; if (node.id) { if (!node.getHalos()) return; // something went wrong before halo = node.getHalos().select("rect"); if (halo.node() === null) { // this is a round node nodeIsRect = false; roundHalo = node.getHalos().select("circle"); defaultRadius = node.actualRadius(); roundHalo.attr("r", defaultRadius + offset); halo = roundHalo; } else { // this is a rect node nodeIsRect = true; rectHalo = node.getHalos().select("rect"); rectHalo.classed("hidden", true); roundHalo = node.getHalos().select("circle"); if (roundHalo.node() === null) { radius = node.width(); roundHalo = node.getHalos().append("circle") .classed("searchResultB", true) .classed("searchResultA", false) .attr("r", radius + offset); } halo = roundHalo; } } if (node.property) { if (!node.property().getHalos()) return; // something went wrong before rectHalo = node.property().getHalos().select("rect"); rectHalo.classed("hidden", true); roundHalo = node.property().getHalos().select("circle"); if (roundHalo.node() === null) { 53 radius = node.property().width(); roundHalo = node.property().getHalos().append("circle") .classed("searchResultB", true) .classed("searchResultA", false) .attr("r", radius + 15); } halo = roundHalo; // swap the halo to be round nodeIsRect = true; container = node.property(); } if (x < 0 || x > w || y < 0 || y > h) { // node outside viewport; // check for quadrant and get the correct boarder point (intersection with viewport) if (x < 0 && y < 0) { borderPoint_x = 0; borderPoint_y = 0; } else if (x > 0 && x < w && y < 0) { borderPoint_x = x; borderPoint_y = 0; } else if (x > w && y < 0) { borderPoint_x = w; borderPoint_y = 0; } else if (x > w && y > 0 && y < h) { borderPoint_x = w; borderPoint_y = y; } else if (x > w && y > h) { borderPoint_x = w; borderPoint_y = h; } else if (x > 0 && x < w && y > h) { borderPoint_x = x; borderPoint_y = h; 54 } else if (x < 0 && y > h) { borderPoint_x = 0; borderPoint_y = h; } else if (x < 0 && y > 0 && y < h) { borderPoint_x = 0; borderPoint_y = y; } // kill all pulses of nodes that are outside the viewport container.getHalos().select("rect").classed("searchResultA", false); container.getHalos().select("circle").classed("searchResultA", false); container.getHalos().select("rect").classed("searchResultB", true); container.getHalos().select("circle").classed("searchResultB", true); halo.classed("hidden", false); // compute in pixel coordinates length of difference vector var borderRadius_x = borderPoint_x - x; var borderRadius_y = borderPoint_y - y; var len = borderRadius_x * borderRadius_x + borderRadius_y * borderRadius_y; len = Math.sqrt(len); var normedX = borderRadius_x / len; var normedY = borderRadius_y / len; len = len + 20; // add 20 px; // re-normalized vector var newVectorX = normedX * len + x; var newVectorY = normedY * len + y; // compute world coordinates of this point var wX = (newVectorX - graphTranslation[0]) / zoomFactor; var wY = (newVectorY - graphTranslation[1]) / zoomFactor; // compute distance in world coordinates var dx = wX - node.x; 55 var dy = wY - node.y; var newRadius = Math.sqrt(dx * dx + dy * dy); halo = container.getHalos().select("circle"); // sanity checks and setting new halo radius if (!nodeIsRect) { // console.log("No Width Needed"); defaultRadius = node.actualRadius() + offset; if (newRadius < defaultRadius) { newRadius = defaultRadius; } halo.attr("r", newRadius); } else { if (node.property().inverse()){ defaultRadius=0.5*container.width()+14; container.getHalos().select("circle").attr("cx",0) .attr("cy",14); }else{ defaultRadius=0.5*container.width(); } if (newRadius