Skip to content

Commit 2725952

Browse files
vemonetvemonet
committed
try to fix the sudden new bug that makes CDN import fail
1 parent 5811820 commit 2725952

File tree

3 files changed

+219
-5
lines changed

3 files changed

+219
-5
lines changed

‎packages/sparql-editor/README.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<div align="center">
2+
3+
# 💫 SPARQL editor web component
4+
5+
[![NPM](https://img.shields.io/npm/v/@sib-swiss/sparql-editor)](https://www.npmjs.com/package/@sib-swiss/sparql-editor)
6+
[![Tests](https://github.com/sib-swiss/sparql-editor/actions/workflows/test.yml/badge.svg)](https://github.com/sib-swiss/sparql-editor/actions/workflows/test.yml)
7+
[![Deploy demo to GitHub Pages](https://github.com/sib-swiss/sparql-editor/actions/workflows/deploy.yml/badge.svg)](https://github.com/sib-swiss/sparql-editor/actions/workflows/deploy.yml)
8+
9+
</div>
10+
11+
A user-friendly [SPARQL](https://www.w3.org/TR/sparql12-query/) query editor built on the popular [YASGUI editor](https://github.com/zazuko/Yasgui), it provides context-aware autocomplete for classes and predicates based on the content of the endpoints, as well as query examples.
12+
13+
Use it directly for any endpoint at **[sib-swiss.github.io/sparql-editor](https://sib-swiss.github.io/sparql-editor)**.
14+
15+
The editor retrieves metadata about the endpoints by directly querying them, or searching in the SPARQL service description. So all that is needed is to generate and upload some metadata to each endpoints, and it works on top of any triplestore without configuration needed. Reducing the need for complex infrastructure, while making your SPARQL endpoints easier to query for users and machines.
16+
17+
You can also redeploy it for a specific endpoint, or set of endpoints using the standard web component documented below,
18+
19+
## 🪄 Features
20+
21+
- **✨ Autocomplete possibilities for properties and classes** are automatically pulled from the endpoints based on the [VoID description](https://www.w3.org/TR/void/) present in the triplestore. The suggested properties are contextually filtered based on the class of the subject at the cursor's position, and are aware of `SERVICE` clauses, ensuring relevant autocompletion even in federated queries. Checkout the [`void-generator`](https://github.com/JervenBolleman/void-generator) project to automatically generate VoID description for your endpoint.
22+
23+
<details><summary>Click here to see the SPARQL query used to retrieve the VoID description.</summary>
24+
25+
```SPARQL
26+
PREFIX void: <http://rdfs.org/ns/void#>
27+
PREFIX void-ext: <http://ldf.fi/void-ext#>
28+
SELECT DISTINCT ?subjectClass ?prop ?objectClass ?objectDatatype
29+
WHERE {
30+
{
31+
?cp void:class ?subjectClass ;
32+
void:propertyPartition ?pp .
33+
?pp void:property ?prop .
34+
OPTIONAL {
35+
{
36+
?pp void:classPartition [ void:class ?objectClass ] .
37+
} UNION {
38+
?pp void-ext:datatypePartition [ void-ext:datatype ?objectDatatype ] .
39+
}
40+
}
41+
} UNION {
42+
?linkset void:subjectsTarget ?subjectClass ;
43+
void:linkPredicate ?prop ;
44+
void:objectsTarget ?objectClass .
45+
}
46+
}
47+
```
48+
49+
</details>
50+
51+
- **📜 Example SPARQL queries** defined using the [SHACL ontology](https://www.w3.org/TR/shacl/) are automatically pulled from the endpoint. Checkout the [`sparql-examples`](https://github.com/sib-swiss/sparql-examples) project for more details.
52+
53+
<details><summary>Click here to see the SPARQL query used to retrieve the example queries.</summary>
54+
55+
```SPARQL
56+
PREFIX sh: <http://www.w3.org/ns/shacl#>
57+
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
58+
SELECT DISTINCT ?sq ?comment ?query
59+
WHERE {
60+
?sq a sh:SPARQLExecutable ;
61+
rdfs:comment ?comment ;
62+
sh:select|sh:ask|sh:construct|sh:describe ?query .
63+
} ORDER BY ?sq
64+
```
65+
66+
</details>
67+
68+
- **🏷️ Prefixes** are automatically pulled from the endpoint using their definition defined with the SHACL ontology (`sh:prefix`/`sh:namespace`).
69+
70+
<details><summary>Click here to see the SPARQL query used to retrieve the prefixes/namespaces.</summary>
71+
72+
```SPARQL
73+
PREFIX sh: <http://www.w3.org/ns/shacl#>
74+
SELECT DISTINCT ?prefix ?namespace
75+
WHERE { [] sh:namespace ?namespace ; sh:prefix ?prefix }
76+
ORDER BY ?prefix
77+
```
78+
79+
- **🗺️ Overview of classes** using the VoID description.
80+
81+
</details>
82+
83+
![Screenshot gene](packages/demo/src/screenshot_gene.png)
84+
85+
---
86+
87+
![Screenshot expression](packages/demo/src/screenshot_expression.png)
88+
89+
## 🚀 Use
90+
91+
1. Install with a package manager in your project:
92+
93+
```bash
94+
npm i --save @sib-swiss/sparql-editor
95+
```
96+
97+
And import in your JS/TS file with:
98+
99+
```ts
100+
import "@sib-swiss/sparql-editor";
101+
```
102+
103+
Or directly import from a CDN:
104+
105+
```html
106+
<script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor"></script>
107+
```
108+
109+
2. Use the custom element in your HTML/JSX/TSX code:
110+
111+
```html
112+
<sparql-editor endpoint="https://sparql.uniprot.org/sparql/"></sparql-editor>
113+
```
114+
115+
You can also pass a list of endpoints URLs separated by commas to enable users to choose from different endpoints:
116+
117+
```html
118+
<sparql-editor endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/"></sparql-editor>
119+
```
120+
121+
> [!WARNING]
122+
>
123+
> Metadata are retrieved by a few lightweight queries sent from client-side JavaScript when the editor is initialized, so your SPARQL **endpoints should accept CORS** (either from \*, which is recommended, or just from the URL where the editor is deployed)
124+
125+
### ⚙️ Available attributes
126+
127+
You can customize a few optional attributes when calling the custom element:
128+
129+
- `default-method`: the default method used by YASGUI to query the endpoints (GET or POST, default to GET)
130+
- `examples-repository`: the URL to the git repository where the query examples for this endpoint are stored (automatically generated from `examples-repo-add-url` if you provide it),
131+
- `examples-repo-add-url`: the URL to directly add the query to the git repository where the query examples for this endpoint are stored through the GitHub web UI
132+
- `examples-namespace`: the namespace used when saving a query as example (defaults to the endpoint URL + /.well-known/sparql-examples/ when not specified),
133+
- `examples-on-main-page`: the number of examples displayed on the main page (defaults to 10),
134+
- `add-limit`: the number of rows to be added as limit to the query before being sent, if no limit has been defined by the user (default to none)
135+
- `style="--btn-color / --btn-bg-color"`: buttons color.
136+
137+
```html
138+
<sparql-editor
139+
endpoint="https://www.bgee.org/sparql/,https://sparql.uniprot.org/sparql/"
140+
default-method="POST"
141+
examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/Bgee"
142+
examples-repository="https://github.com/sib-swiss/sparql-examples"
143+
examples-namespace="https://sparql.uniprot.org/sparql/.well-known/sparql-examples/"
144+
examples-on-main-page="10"
145+
add-limit="10000"
146+
style="--btn-color: white; --btn-bg-color: #00709b;"
147+
></sparql-editor>
148+
```
149+
150+
### 📝 Basic example
151+
152+
No need for a complex project you can integrate SPARQL editor in any HTML page by importing from a CDN!
153+
154+
Create a `index.html` file with:
155+
156+
```html
157+
<!doctype html>
158+
<html lang="en">
159+
<head>
160+
<meta charset="utf-8" />
161+
<meta name="viewport" content="width=device-width, initial-scale=1" />
162+
<title>SPARQL editor dev</title>
163+
<meta name="description" content="SPARQL editor demo page" />
164+
<link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/f/f3/Rdf_logo.svg" />
165+
<!-- Import the module from a CDN -->
166+
<script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor"></script>
167+
</head>
168+
169+
<body>
170+
<div>
171+
<sparql-editor
172+
endpoint="https://www.bgee.org/sparql/"
173+
examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/Bgee"
174+
examples-on-main-page="10"
175+
style="--btn-color: white; --btn-bg-color: #00709b;"
176+
></sparql-editor>
177+
</div>
178+
</body>
179+
</html>
180+
```
181+
182+
Then just open this HTML page in your favorite browser.
183+
184+
You can also start a basic web server with NodeJS or Python (recommended):
185+
186+
```bash
187+
npx http-server
188+
# or
189+
python -m http.server
190+
```
191+
192+
## 🧑‍💻 Contributing
193+
194+
Checkout [CONTRIBUTING.md](https://github.com/sib-swiss/sparql-editor/blob/main/CONTRIBUTING.md) for more details on how to run this in development and make a contribution.
195+
196+
## 🤝 Credits
197+
198+
Thanks to:
199+
200+
- [Triply](https://triply.cc) for originally developing the YASGUI editor
201+
- [Zazuko](https://zazuko.com/) for keeping it up-to-date the last few years

‎packages/sparql-editor/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="description" content="SPARQL editor development page" />
88
<link rel="icon" type="image/png" href="demo/sib-logo.png" />
99

10-
<script type="module" src="./src/sparql-editor.ts"></script>
11-
<!-- <script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor"></script> -->
10+
<!-- <script type="module" src="./src/sparql-editor.ts"></script> -->
11+
<script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor"></script>
12+
13+
<!-- <script src="https://cdn.jsdelivr.net/npm/@sib-swiss/sparql-editor"></script> -->
14+
<!-- https://cdn.jsdelivr.net/npm/@nanopub/sign -->
1215

1316
<!-- <script type="module" src="dist/sparql-editor.min.js"></script> -->
1417
<!-- <script type="module" src="./dist/sparql-editor.js"></script> -->

‎packages/sparql-editor/package.json‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,20 @@
1111
"main": "dist/sparql-editor.umd.cjs",
1212
"module": "dist/sparql-editor.js",
1313
"types": "dist/src/sparql-editor.d.ts",
14+
"browser": "dist/sparql-editor.umd.cjs",
15+
"unpkg": "dist/sparql-editor.umd.cjs",
16+
"jsdelivr": "dist/sparql-editor.umd.cjs",
17+
"exports": {
18+
".": {
19+
"import": "./dist/sparql-editor.js",
20+
"require": "./dist/sparql-editor.umd.cjs",
21+
"types": "./dist/src/sparql-editor.d.ts"
22+
}
23+
},
24+
"homepage": "https://sib-swiss.github.io/sparql-editor",
1425
"files": [
15-
"dist/*",
16-
"../../README.md",
17-
"../../LICENSE"
26+
"dist",
27+
"README.md"
1828
],
1929
"scripts": {
2030
"dev": "vite",

0 commit comments

Comments
 (0)