-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhttp%3A%2F%2Fhelp.metaphacts.com%2Fresource%2FSemanticQuery.html
140 lines (133 loc) · 7.31 KB
/
http%3A%2F%2Fhelp.metaphacts.com%2Fresource%2FSemanticQuery.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<div class="metaphacts_help">
<ol class="breadcrumb" style="background:white;border:none;padding-left:0px;">
<li>
<semantic-link title="Help" uri="http://help.metaphacts.com/resource/Start">Help</semantic-link>
</li>
<li>
<semantic-link title="Documentation" uri="http://help.metaphacts.com/resource/DocumentationOverview">Documentation</semantic-link>
</li>
<li>
<semantic-link title="Components" uri="http://help.metaphacts.com/resource/HTML5Components">Components</semantic-link>
</li>
<li class="active">Query Component</li>
</ol>
<h1>Query Component </h1>
<div class="documentation__intro">
<div class="documentation__intro__description">
The semantic query component is the most powerful and flexible component to query and render SPARQL SELECT query results.
</div>
<div class="documentation__intro__demo" style="height:100px;width:400px;">
<semantic-query query='prefix foaf: <http://xmlns.com/foaf/0.1/>prefix person: <http://example.com/person/>
SELECT ?person ?name WHERE {
VALUES (?person ?name)
{
(person:alice "Alice")
(person:carol "Carol")
(person:bob "Bob")
(person:mike "Mike")
}
}' template='<b>This list is generated by a SPARQL query:</b><ul>{{#each bindings}}<li><semantic-link uri="{{person.value}}"><i class="fa fa-user" style="margin-right: 5px"></i> {{name.value}}</semantic-link></li>{{/each}}</ul>'></semantic-query>
</div>
</div>
<div style="clear:both;"></div>
<h3>Usage</h3>
<p>
Compared to the other visualization components such as tables or trees, the semantic query result component is much simpler in it's basic configuration.
However, at the same time it requires advanced knowledge about the structure of SPARQL SELECT result tuples as well as handlebars.js since it leaves the task of iterating and formatting the result tuples completely to the template configuration.
</p>
<p>
The query component scales easily up to thousands of result entities in a modern web browser, however, the size and complexity of templates may impact the overall performance.
</p>
<h2>Configuration </h2>
<code><semantic-query
query='SELECT ?name WHERE {BIND("Mike" as ?name)}'
template='My Result: {{#each bindings}}{{name.value}}{{/each}}'>
</semantic-query></code><br>
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>query</td>
<td>SPARQL SELECT query string.
Double quotes inside the query need to be escaped if double quotes are already being used for surrounding this the HTML attribute value string. The easiest is to use single quotes for surrounding the HTML attribute value. </td>
</tr>
<tr>
<tr>
<td>template</td>
<td><a href="http://handlebarsjs.com" target="_blank">handlebars.js</a> HTML template string. Get a 'bindings' object injected as template context i.e. the result binding to iterate over. <a href="http://handlebarsjs.com" target="_blank">handlebars.js</a> each can be used to iterate over the bindings. The template will only be rendered if and only if the result is not empty, so that one does not need to have additional if expressions around the component in order to hide, for example, a list header if actually no result are to be displayed. <br>
<b>Example</b>: <code> My Result: {{#each bindings}}{{bindingName.value}}{{/each}}</code> . <br><b>Default</b>: If no template is provided, all tuples for the <b>first projection variable</b> will we rendered as a comma-separated list.</td>
</tr>
</tbody>
</table>
<h2>Examples </h2>
<h3>No (Default) Template</h3>
<div class="documentation__example">
<div class="documentation__example__description">
If no <code>template</code> is defined, all tuples for the <b>first projection variable</b> will we rendered as a comma-separated list.
</div>
<div class="documentation__example__demo">
<mp-code-example>
<semantic-query query='prefix foaf: <http://xmlns.com/foaf/0.1/>prefix person: <http://example.com/person/>
SELECT ?person ?name WHERE {
VALUES (?person ?name)
{
(person:alice "Alice")
(person:carol "Carol")
(person:bob "Bob")
(person:mike "Mike")
}
}'></semantic-query>
</mp-code-example>
</div>
</div>
<h3>HTML List</h3>
<div class="documentation__example">
<div class="documentation__example__description">
Renders as list with custom list entries
</div>
<div class="documentation__example__demo">
<mp-code-example>
<semantic-query query='prefix foaf: <http://xmlns.com/foaf/0.1/>prefix person: <http://example.com/person/>
SELECT ?person ?name WHERE {
VALUES (?person ?name)
{
(person:alice "Alice")
(person:carol "Carol")
(person:bob "Bob")
(person:mike "Mike")
}
}' template='<b>My List:</b><ul>{{#each bindings}}<li><semantic-link uri="{{person.value}}"><i class="fa fa-user" style="margin-right: 5px"></i> {{name.value}}</semantic-link></li>{{/each}}</ul>'></semantic-query>
</mp-code-example>
</div>
</div>
<h3>Comma Separated Value List</h3>
<div class="documentation__example">
<div class="documentation__example__description">
Rendering as comma separated list. Renders no comma after the last item, but an "and" using handlebars.js's <code>{{#if @last}}</code> expression.
In addition, the template will be rendered as inline element by passing the style string <code>style="display: inline;"</code> down to the template item.
</div>
<div class="documentation__example__demo">
<mp-code-example>
<semantic-query
query='prefix foaf: <http://xmlns.com/foaf/0.1/>prefix person: <http://example.com/person/>
SELECT ?person ?name WHERE {
VALUES (?person ?name)
{
(person:alice "Alice")
(person:carol "Carol")
(person:bob "Bob")
(person:mike "Mike")
}
}'
template='{{#each bindings}}<semantic-link title="{{name.value}}" uri="{{person.value}}">{{name.value}}</semantic-link>{{#if @last}} and {{else}}, {{/if}}{{/each}} are persons on my list.'
style="display: inline;">
</semantic-query>
</mp-code-example>
</div>
</div>
</div>