sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
332 lines (310 loc) • 11.5 kB
HTML
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- bootstrap stuff -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- YASGUI stuff -->
<link
href="https://cdn.jsdelivr.net/npm/@triply/yasgui/build/yasgui.min.css"
rel="stylesheet"
type="text/css"
/>
<!-- FONTAWESOME-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<title>SPARnatural - test page</title>
<style>
.yasqe .CodeMirror {
font-size: 0.8em;
height: 380px;
}
.yasr_header {
display: none;
}
</style>
<!-- Webpack CSS -->
<%= css %>
</head>
<body>
<!-- The HTML needs to import one Sparnatural theme CSS of their choice - and this can be customized by the client -->
<link href="themes/sparnatural-theme-sea.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand display-1 mr-auto" href="#"
>SPARnatural - test page</a
>
<span class="navbar-text" style="margin-right: 100px">
<a href="?lang=fr">fr</a> | <a href="?lang=en">en</a>
</span>
</nav>
</header>
<div class="container-fluid" style="margin-top: 1em">
<div class="row">
<custom-dropdown></custom-dropdown>
</div>
<div class="row">
<div class="col-md-7">
<a href="#" id="switch-language">switch to en</a>
<div>
<!--
<sparnatural-form
src="configs/dbpediafr-config.ttl"
lang="en"
endpoint="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=http%3A%2F%2Ffr.dbpedia.org%2Fsparql"
form="form.json"
query="query.json"
/>-->
</div>
<div id="ui-search" style="width: auto">
<!-- Other src to test with :
https://xls2rdf.sparna.fr/rest/convert?url=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wIVJIIg7q-dZJQmvbKsSGdoS2gbFk3xwoZ_6ud_MiS4%2Fexport%3Fformat%3Dxlsx&noPostProcessings=true
-->
<!-- You can try adding typePredicate="http://www.w3.org/2000/01/rdf-schema#subClassOf" -->
<!-- src="configs/VehiclePropertyOntology.ttl configs/VehiclePropertyVocabulary.ttl" -->
<!-- src="configs/person-v2.shacl.ttl" -->
<!-- src="configs/vehicle-cross-domain-ontology.ttl" -->
<!-- dumb config pour tester une hierarchie -->
<!-- src="configs/sparnatural-hierarchy-config.ttl" -->
<!-- config pour tester une hierarchie plus complete (on appelle les 2 fichiers) -->
<!-- src="configs/instantiations-shacl.ttl configs/collections-shacl.ttl configs/sapa-sparnatural-shacl.ttl configs/sapa-sparnatural-shacl-test.ttl" -->
<!-- Test with property hierarchy: src="configs/sparnatural-hierarchy-config.ttl configs/RiC-O_1-0.rdf" -->
<!--
A mettre dans src pour une config pour tester les libellés :
Faire "Record>Acte notarié" puis choisir sous "Lieu>Quartier, paroisse ou arondissement"
https://xls2rdf.sparna.fr/rest/convert?url=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1LBumEdCIl8CUlkB0PGqPK6T_9-4nnpix%2Fexport%3Fformat%3Dxlsx&noPostProcessings=true https://raw.githubusercontent.com/ICA-EGAD/RiC-O/refs/heads/master/ontology/previous-versions/RiC-O_v0-2_release/RiC-O_v0-2.rdf
-->
<spar-natural
src="https://dataria.org/static/sparnatural/config.ttl"
lang="en"
defaultLang="en"
endpoint="https://graph.dhi-roma.it/query"
distinct="true"
limit="100"
prefixes="skos:http://www.w3.org/2004/02/skos/core# rico:https://www.ica.org/standards/RiC/ontology# crm:http://www.cidoc-crm.org/cidoc-crm/ grace:https://g17.dhi-roma.it/ontology/"
debug="true"
/>
</div>
<input type="hidden" id="query-json" />
<div><a id="export" href="#">Export query in JSON</a></div>
<div><a id="load" href="#">Load query from JSON</a></div>
<div><a id="clear" href="#">Clear query</a></div>
</div>
<div class="col-md-5">
<div class="row" style="margin-bottom: 0.5em">
<div class="col-md-12">
<span style="font-size: 90%">
Les requêtes sont envoyées à
<a
id="endpoint"
href="http://openarchaeo-graphdb.huma-num.fr/repositories/openarchaeo?default-graph-uri=https%3A%2F%2Fpactols.frantiq.fr%2Fopentheso%2F&default-graph-uri=https%3A%2F%2Fanalytics.huma-num.fr%2Farcheoviz%2F"
>http://openarchaeo-graphdb.huma-num.fr/repositories/openarchaeo?default-graph-uri=https%3A%2F%2Fpactols.frantiq.fr%2Fopentheso%2F&default-graph-uri=https%3A%2F%2Fanalytics.huma-num.fr%2Farcheoviz%2F</a
>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="yasqe"></div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12">
<div id="yasr"></div>
</div>
</div>
</div>
<div
class="modal fade"
id="exportModal"
tabindex="-1"
role="dialog"
aria-labelledby="jsonModelLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="jsonModelLabel">Export query</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" style="overflow: hidden">
<textarea
class="form-control"
rows="20"
id="export-json"
style="width: 100%"
readonly="readonly"
></textarea>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
id="loadModal"
tabindex="-1"
role="dialog"
aria-labelledby="loadModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loadModalLabel">Load query</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" style="overflow: hidden">
<textarea
class="form-control"
rows="20"
id="load-json"
style="width: 100%"
></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="loadJson">
Load
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<!-- Tableau pour comparer SPARQL -->
<div class="container mt-4">
<h2>Comparaison SPARQL</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Ancien SPARQL</th>
<th>Nouveau SPARQL</th>
<th>État</th>
</tr>
</thead>
<tbody id="sparql-comparison-table">
<!-- Les lignes seront ajoutées ici par JavaScript -->
</tbody>
</table>
</div>
<footer id="footer" style="margin-top: 30px; text-align: center">
<a href="http://blog.sparna.fr" target="_blank">Thomas Francart</a>
|
<a href="http://sparna.fr" target="_blank"
><img src="http://labs.sparna.fr/skos-play/images/sparna.png"
/></a>
|
<a href="https://github.com/sparna-git/Sparnatural" target="_blank"
>Voir sur Github</a
>
<br />
<br />
</footer>
<a
href="https://github.com/sparna-git/Sparnatural"
class="github-corner"
aria-label="View on GitHub"
><svg
width="100"
height="100"
viewBox="0 0 250 250"
style="
fill: #fd6c6c;
color: #fff;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path></svg></a
><style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
</style>
<!--JQUERY DEPENDENCY-->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- YASGUI stuff -->
<script src="https://cdn.jsdelivr.net/npm/@triply/yasgui/build/yasgui.min.js"></script>
<!-- Webpack JS -->
<%= js %>
<script src="sparnatural-yasgui-plugins.js"></script>
<script src="scripts/init.js"></script>
</body>
</html>