-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
113 lines (105 loc) · 12.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ontoGrapher demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<h1>OntoGrapher</h1>
OntoGrapher is one software tool among many in a toolkit known as the Assembly Line, which serves as a software suite supporting creation, management, evaluation, and publishing of vocabularies - currently for, but not theoretically limited to, those vocabularies containing terms from a legal domain. In particular, OntoGrapher has the following goals:
<ul>
<li>offering a web-based collaborative conceptual modeling environment for domain experts,</li>
<li>accepting SKOS terminologies on input and producing OWL ontologies on output without requiring users to understand either of these standards,</li>
<li>tracking the source of entities, relations and attributes in conceptual models stemming from multiple vocabularies (e.g. laws).</li>
</ul>
<h3>Installation</h3>
<h5>Requirements</h5>
<ul>
<li>Internet connection</li>
<li>Docker</li>
<li>GraphDB server (see instructions below - tested on the free version)</li>
</ul>
<h5>Instructions</h5>
<ol>
<li>Download the <a href="https://github.com/bindeali/ontographer-demo">repository of the demo</a>.</li>
<li>Download the <a href="https://www.ontotext.com/products/graphdb/graphdb-free/">latest version of graphDB server</a> and put the .zip file into the ./graphdb/ directory.</li>
<li>Make sure that the name of the .zip file corresponds with the GRAPHDB_ZIP argument in docker-compose.yml (line 22).</li>
<li>Run "docker-compose up" in the root directory of the repository.</li>
<li>Run the /graphdb/query.rq query (<a href="https://graphdb.ontotext.com/documentation/standard/querying-data.html">instructions</a>) and import the /graphdb/data.jsonld (<a href="https://graphdb.ontotext.com/documentation/standard/loading-data-using-the-workbench.html#importing-local-files">instructions</a>) in the testOG repository from the GraphDB front-end at <a href="http://localhost:7201">http://localhost:7201</a>.</li>
<li>The instance is available at <a href="http://localhost:8080/?workspace=https://slovník.gov.cz/datový/pracovní-prostor/pojem/metadatový-kontext/instance946326684">http://localhost:8080/?workspace=https://slovník.gov.cz/datový/pracovní-prostor/pojem/metadatový-kontext/instance946326684</a>.</li>
</ol>
<h3>Demo</h3>
<h5>Scenario</h5>
The premise of the demo is that we have been given a vocabulary of the terms of Czech Act 56/2001, an act for establishing the terms and conditions under which operation of vehicles on public roads is permitted. This vocabulary is incomplete, yet complex; we will use OntoGrapher to organize its visual representation in order to make understanding it simpler, and correct some mistakes, modifying the vocabulary itself as well as taking advantage of the search function to connect the vocabulary with other vocabularies of terms of Czech law.
<h5>Walk-through</h5>
<div class="alert alert-primary" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
To look at the list of possible actions in OntoGrapher, click "Help" in the top right hand corner of the screen.
</div>
When opening the demo for the first time, you will see a screen similar to this:
<a href="media/1.jpg"> <img alt="OntoGrapher screenshot" src="media/1.jpg"/></a>
<p>The main area is called the canvas, where all the viewed terms and relationships are located. The left panel is where the currently managed vocabularies and terms are listed and can be filtered through various means. In between the menu panel and the canvas is the diagram panel - we will talk about in a moment. For now, let's take a look at the canvas.
<p>As you may have already noticed, the canvas contains terms and relationships concerning road vehicles and their various conditions. The resulting graph is hard to visually process! First, the terms are all in Czech. To change this, use the select input on the top right and change it from "Čeština" (Czech) to English. The terms will change into English right away.
<video controls><source src="media/2.mp4" type="video/mp4"></video>
<p>Second, the graph itself is rather complicated, with too many terms on the screen at once. One way of helping legibility is by switching to Compact view with the button in the top left corner of the screen. Doing so simplifies the Relationship types and aggregates Intrinsic Trope types in the related terms as to make the model easier to read. For now, let's switch back into the default Full view.
<video controls><source src="media/3.mp4" type="video/mp4"></video>
<p>OntoGrapher allows you to manage your models more efficiently with diagrams - distinct "sections" of the entire model, containing some or all of the terms and relationships within.
<div class="alert alert-primary" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
It is not necessary for a term in the model to be in any diagram; also, a single term can be in multiple diagrams, as it is just an OntoGrapher-specific construct.
</div>
<p>For this example, we will create a new diagram containing just the vehicle terms. To do so, click the ➕ tab next to the "New Diagram" tab currently viewed. A new tab will be created, which we can click on to view the new diagram. Clicking on a selected diagram tab allows you to rename the diagram - let's call it "Vehicles".
<video controls><source src="media/4.mp4" type="video/mp4"></video>
<p>The new diagram is empty, as we haven't put any terms in it yet. Notice how in the left panel, all of the terms have a crossed-out eye next to their name. That's because they aren't present in the currently viewed diagram. There are several ways with which we can add terms onto the canvas:
<p>We can pick terms from the left panel and drag them onto the canvas with the mouse. Since we want to have all vehicle-related terms on the canvas, though, we can take advantage of multi-selection: search for "road vehicle" in the search bar, control+click on the terms to select them, then bring the terms over with the mouse. You can then arrange the terms in any way you desire.
<video controls><source src="media/5.mp4" type="video/mp4"></video>
<div class="alert alert-primary" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
To pan the canvas, use the middle mouse button / shift + left mouse button.
</div>
<p>We will demonstrate another way with a new diagram with the Road Vehicle term to start with. Whenever you click on a term, a panel on the right appears with details of the term you just clicked on. For now, let's look at the "Connections" section of the panel, which lists all relationships involving the term. We can use the 🔍 icon to filter through the list.
<p>If we want to only see Intrinsic Trope Type terms in the list, we can select the stereotype from the "Any Type stereotype" select input. Then, we can select all the results with ✅ and arrange them onto the canvas with ➕. If we don't want to use these buttons, we can use the same dragging action used for the left panel here for any individual listing.
<video controls><source src="media/6.mp4" type="video/mp4"></video>
<p>The "Terms outside the workspace" button at the bottom of the list is notable for a significant feature of OntoGrapher we will talk about next: searching through and using terms from cached vocabularies not present in the model. In this example, we can see that the Road vehicle term we are inspecting is a specialization of a Vehicle term in another vocabulary. We can bring over the term in the same dragging action as any other term.
<video controls><source src="media/7.mp4" type="video/mp4"></video>
<p>Upon doing so, the term is initialized with a new background color - terms are color-coded according to the vocabulary they belong to. The left panel, accordingly, shows another vocabulary with the number of terms that vocabulary is represented with in the workspace.
<div class="alert alert-primary" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
Any terms brought over from outside the initial vocabularies of the model are read-only - meaning that their details (in the terms' and relationships' detail panel) are immutable, but their arrangement in diagrams is allowed.
</div>
<p>There are several other ways with which we can bring over terms from other vocabularies:
<ul>
<li>Clicking on the number of terms in the vocabulary header in the left panel brings up the whole vocabulary.</li>
<li>Searching will bring up terms from all vocabularies at the bottom of the search results.</li>
<li>Selecting a vocabulary in the "Pick vocabularies..." select without any search term will bring up the whole vocabulary.</li>
</ul>
<video controls><source src="media/8.mp4" type="video/mp4"></video>
<p>However, we don't have to use just the terms that have already been created, we can create terms of our own. The list of vehicles is missing a Bus and a Motorcycle term in order to be fully compliant with the definitions of the subject law. To create a term, use the right mouse button on the canvas. A modal dialogue will appear, requiring you to fill out the name of your new term.
<div class="alert alert-primary" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
Since we have only one write-enabled vocabulary, there is no other vocabulary that can be picked in the select input.
</div>
<video controls><source src="media/9.mp4" type="video/mp4"></video>
<p>We can then create a generalization relationship between the new term and the Road vehicle term: Click on the circular arrow icon with the orange background that is shown when hovering over the new term. All terms will turn orange to signify with which terms you can create a relationship with. Click on the Road vehicle term, which brings up a modal dialogue with which you can select the generalization relationship. The visual path of the relationship can then be modified by clicking on it and then dragging it to create various breakpoints.
<video controls><source src="media/10.mp4" type="video/mp4"></video>
<p>In the demonstration, we have learned the basics of working with OntoGrapher. As the tool has been developed in tandem with other tools in a set called the Assembly Line, it has been designed to work with these tools. For example, it can communicate with a SHACL validator and display any inconsistencies right in the user interface. To learn more about the Assembly line, visit <a href="https://github.com/opendata-mvcr/sgov-assembly-line">https://github.com/opendata-mvcr/sgov-assembly-line</a>.
<h3>Acknowledgements</h3>
OntoGrapher is developed under the auspices of project OPZ no. CZ.03.4.74/0.0/0.0/15_025/0013983.
<img src="https://data.gov.cz/images/ozp_logo_cz.jpg" alt="Evropská unie - Evropský sociální fond - Operační program Zaměstnanost"/>
<p>For more information, visit the project website at <a href="https://data.gov.cz">https://data.gov.cz (in Czech)</a> or the repository URL at <a href="https://github.com/opendata-mvcr/ontoGrapher">https://github.com/opendata-mvcr/ontoGrapher</a>.
</body>
</html>