Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
240 lines (222 loc) · 11.6 KB
/
Copy pathindex.html
File metadata and controls
240 lines (222 loc) · 11.6 KB
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TALOS SPARQL Query Endpoint</title>
<link rel="stylesheet" href="css/style.css?v=1.1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="app-container">
<header class="app-header">
<div class="header-left">
<h1><i class="fas fa-database"></i> TALOS SPARQL Query Endpoint</h1>
</div>
<div class="header-right">
<div class="company-logo">
<a href="https://talos-ai4ssh.uoc.gr/" target="_blank" rel="noopener noreferrer">
<img src="images/talos_logo.png" alt="Company Logo" class="logo-image">
<span class="company-name">TALOS AI4SSH</span>
</a>
</div>
<div class="header-actions">
<button id="helpBtn" class="btn-secondary" title="Help & Instructions">
<i class="fas fa-question-circle"></i> Help
</button>
<button id="themeToggle" class="btn-secondary">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
</header>
<div class="main-content">
<section class="dataset-section">
<div class="section-header">
<h2>Dataset & Examples</h2>
</div>
<div class="dataset-controls">
<div class="dataset-selector">
<label for="datasetSelect">Select Dataset:</label>
<select id="datasetSelect" class="form-control">
<option value="">-- Choose a dataset --</option>
</select>
</div>
<div class="examples-selector hidden">
<label for="exampleSelect">Example Queries:</label>
<select id="exampleSelect" class="form-control" disabled>
<option value="">-- Select an example query --</option>
</select>
</div>
<div class="dataset-info">
<div id="datasetDescription" class="dataset-description"></div>
</div>
</div>
</section>
<section class="query-section">
<div class="section-header">
<h2>Query Editor</h2>
<div class="query-actions">
<button id="prefixesBtn" class="btn-secondary">
<i class="fas fa-code"></i> Prefixes
</button>
<button id="clearQuery" class="btn-secondary">
<i class="fas fa-broom"></i> Clear
</button>
<button id="runQuery" class="btn-primary">
<i class="fas fa-play"></i> Execute Query
</button>
</div>
</div>
<div class="query-input-container">
<textarea id="queryEditor" placeholder="Enter your SPARQL query here...">
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
SELECT ?subject ?predicate ?object
WHERE {
?subject ?predicate ?object .
}
LIMIT 100
</textarea>
</div>
</section>
<section class="results-section">
<div class="section-header">
<h2>Query Results</h2>
<div class="results-actions">
<div class="results-controls">
<div class="filter-control">
<input type="text" id="resultsFilter" placeholder="Filter results..." class="form-control">
<i class="fas fa-search filter-icon"></i>
</div>
<div class="pagination-control">
<span class="pagination-info" id="paginationInfo">Showing 0-0 of 0</span>
<button id="prevPage" class="btn-secondary" disabled>
<i class="fas fa-chevron-left"></i>
</button>
<button id="nextPage" class="btn-secondary" disabled>
<i class="fas fa-chevron-right"></i>
</button>
<select id="pageSize" class="form-control">
<option value="50">50 per page</option>
<option value="100" selected>100 per page</option>
<option value="200">200 per page</option>
<option value="500">500 per page</option>
</select>
</div>
</div>
<button id="exportCSV" class="btn-secondary" disabled>
<i class="fas fa-download"></i> CSV
</button>
<button id="exportJSON" class="btn-secondary" disabled>
<i class="fas fa-download"></i> JSON
</button>
<button id="exportRDF" class="btn-secondary" disabled>
<i class="fas fa-download"></i> RDF
</button>
</div>
</div>
<div class="results-container">
<div id="resultsPlaceholder" class="results-placeholder">
<i class="fas fa-search"></i>
<p>Execute a query to see results</p>
</div>
<div id="resultsTable" class="results-table hidden"></div>
<div id="errorMessage" class="error-message hidden"></div>
<div id="loadingSpinner" class="loading-spinner hidden">
<i class="fas fa-spinner fa-spin"></i>
<p>Executing query...</p>
</div>
</div>
</section>
</div>
<div id="helpModal" class="modal hidden">
<div class="modal-content help-modal">
<div class="modal-header">
<h3><i class="fas fa-question-circle"></i> SPARQL Query Help & Instructions</h3>
<button class="btn-close">×</button>
</div>
<div class="modal-body">
<div class="help-content">
<div class="help-section">
<h4>Getting Started</h4>
<ol>
<li><strong>Select a Dataset:</strong> Choose from available datasets in the Dataset section</li>
<li><strong>Load Dataset:</strong> Click "Load Dataset" to configure the endpoint</li>
<li><strong>Use Examples:</strong> Browse example queries for your selected dataset</li>
<li><strong>Write Query:</strong> Use the query editor to write your SPARQL query</li>
<li><strong>Execute:</strong> Click "Execute Query" or use Ctrl+Enter</li>
</ol>
</div>
<div class="help-section">
<h4>Query Guidelines</h4>
<ul>
<li><strong>FROM Clause:</strong> Must match the loaded dataset's Graph URI</li>
<li><strong>Prefixes:</strong> Use the Prefixes button to insert common prefixes</li>
<li><strong>Syntax:</strong> Ensure proper SPARQL syntax with correct brackets and semicolons</li>
</ul>
</div>
<div class="help-section">
<h4>Keyboard Shortcuts</h4>
<ul>
<li><kbd>Ctrl + Enter</kbd> - Execute query</li>
<li><kbd>Ctrl + /</kbd> - Toggle comments (in query editor)</li>
</ul>
</div>
<div class="help-section">
<h4>Results Features</h4>
<ul>
<li><strong>Filtering:</strong> Use the filter input to search within results</li>
<li><strong>Pagination:</strong> Navigate through large result sets</li>
<li><strong>Export:</strong> Download results as CSV, JSON, or RDF</li>
<li><strong>URI Links:</strong> Click on URIs to open them in new tabs</li>
</ul>
</div>
<div class="help-section">
<h4>Troubleshooting</h4>
<ul>
<li><strong>Query fails:</strong> Check syntax and FROM clause compatibility</li>
<li><strong>No results:</strong> Verify dataset content and query conditions</li>
<li><strong>Slow queries:</strong> Add LIMIT clauses and optimize filters</li>
<li><strong>Connection issues:</strong> Verify endpoint URL and network connectivity</li>
</ul>
</div>
<div class="help-section">
<h4>Need More Help?</h4>
<p>For additional assistance with SPARQL queries or dataset-specific questions, please contact the TALOS AI4SSH support team.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-primary close-help">Got it!</button>
</div>
</div>
</div>
<div id="configModal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>SPARQL Endpoint Configuration</h3>
<button id="closeModal" class="btn-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="defaultGraph">Default Graph URI (optional):</label>
<input type="text" id="defaultGraph"
class="form-control">
</div>
</div>
<div class="modal-footer">
<button id="saveConfig" class="btn-primary">Save Configuration</button>
<button id="cancelConfig" class="btn-secondary">Cancel</button>
</div>
</div>
</div>
<footer class="app-footer">
<p>Copyright 2026, <a href="https://talos-ai4ssh.uoc.gr/">TALOS AI4SSH Lab</a></p>
</footer>
</div>
<script src="js/sparql-client.js"></script>
<script src="js/ui-components.js"></script>
<script src="js/app.js"></script>
</body>
</html>