Skip to content

Commit 782f80d

Browse files
vemonetvemonet
committed
initial commit
0 parents  commit 782f80d

16 files changed

+9695
-0
lines changed

‎.github/workflows/test.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Tests
2+
on: [push, pull_request, workflow_call, workflow_dispatch]
3+
4+
jobs:
5+
test:
6+
runs-on: ubuntu-latest
7+
timeout-minutes: 60
8+
steps:
9+
- uses: actions/checkout@v4
10+
- uses: actions/setup-node@v4
11+
with:
12+
node-version: lts/*
13+
14+
- name: Install dependencies
15+
run: npm ci
16+
17+
- name: Run tests
18+
run: npm test

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎LICENSE.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2024 SIB Swiss Institute of Bioinformatics
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div align="center">
2+
3+
# 💫 SPARQL editor web component
4+
5+
[![Run 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)
6+
7+
</div>
8+
9+
A standard web component to easily deploy a SPARQL query editor for a specific SPARQL endpoint using the popular [YASGUI editor](https://github.com/zazuko/Yasgui).
10+
11+
- [x] **Prefixes** are automatically pulled from the endpoint using their definition defined with the [SHACL ontology](https://www.w3.org/TR/shacl/) (`sh:prefix`/`sh:namespace`).
12+
- [x] **Example SPARQL queries** defined using the SHACL ontology are automatically pulled from the endpoint (queries are defined with `sh:select|sh:ask|sh:construct|sh:describe`, and their human readable description with `rdfs:label|rdfs:comment`). Checkout the [`sparql-examples`](https://github.com/sib-swiss/sparql-examples) project for more details.
13+
- [x] **Autocomplete possibilities for properties and classes** are automatically pulled from the endpoint based on VoID description present in the triplestore (`void:linkPredicate|void:property` and `void:class`). Checkout the [`void-generator`](https://github.com/JervenBolleman/void-generator) project to automatically generate VoID description for your endpoint.
14+
15+
## 🚀 Use
16+
17+
> Release on npm coming soon.
18+
19+
```html
20+
<sparql-editor endpoint="https://sparql.uniprot.org/sparql/"></sparql-editor>
21+
```
22+
23+
Customize buttons color:
24+
25+
```html
26+
<sparql-editor
27+
endpoint="https://www.bgee.org/sparql/"
28+
examples-on-main-page="10"
29+
style="--btn-color: white; --btn-bg-color: #00709b;"
30+
></sparql-editor>
31+
```
32+
33+
## 🛠️ Development
34+
35+
> Requirement: [NodeJS](https://nodejs.org/en) installed.
36+
37+
Clone the repository obviously, and get into the repository root folder.
38+
39+
Install:
40+
41+
```bash
42+
npm install
43+
```
44+
45+
Run in development:
46+
47+
```bash
48+
npm run dev
49+
```
50+
51+
Auto format code with prettier:
52+
53+
```bash
54+
npm run fmt
55+
```
56+
57+
Lint with eslint and run basic tests (we recommend to install the [`ESLint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension on VSCode):
58+
59+
```bash
60+
npm test
61+
```
62+
63+
Build for production in the `dist` folder:
64+
65+
```bash
66+
npm run build
67+
```
68+
69+
Update dependencies to the latest available versions:
70+
71+
```bash
72+
npx npm-check-updates -u
73+
```
74+
75+
## 🤝 Credits
76+
77+
Thanks to:
78+
79+
- [Triply](https://triply.cc) for originally developing the YASGUI editor
80+
- [Zazuko](https://zazuko.com/) for keeping it up-to-date the last few years

‎eslint.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import eslint from "@eslint/js";
2+
import tseslint from "typescript-eslint";
3+
4+
export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, {
5+
rules: {
6+
"@typescript-eslint/no-explicit-any": "off",
7+
"@typescript-eslint/ban-ts-comment": "off",
8+
},
9+
});

‎index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>SPARQL editor dev</title>
7+
<meta name="description" content="SPARQL editor development page" />
8+
<link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/f/f3/Rdf_logo.svg" />
9+
10+
<script type="module" src="./src/sparql-editor.ts"></script>
11+
</head>
12+
13+
<body>
14+
<div>
15+
<sparql-editor endpoint="https://sparql.uniprot.org/sparql/"></sparql-editor>
16+
17+
<!-- <sparql-editor endpoint="https://sparql.uniprot.org/sparql/" style="--btn-color: white; --btn-bg-color: #e30613;"></sparql-editor> -->
18+
<!-- <sparql-editor endpoint="https://sparql.uniprot.org/sparql/" style="--btn-bg-color: #00709b; --btn-color: white;"></sparql-editor> -->
19+
20+
<!-- <sparql-editor endpoint="https://www.bgee.org/sparql/"></sparql-editor> -->
21+
<!-- <sparql-editor endpoint="https://sparql.omabrowser.org/sparql/"></sparql-editor> -->
22+
<!-- <sparql-editor endpoint="https://beta.sparql.swisslipids.org/sparql/"></sparql-editor> -->
23+
</div>
24+
25+
<!-- <div style="display: flex; flex-direction: row;">
26+
<div id="sparql-editor" style="flex: 0 0 70%; margin-right: 1em;"></div>
27+
<div id="sparql-examples" style="flex: 1; border-left: 1px solid #ccc; padding-left: 1em;"></div>
28+
</div>
29+
30+
<script type="module">
31+
import { SparqlEditor } from "./src/sparql-editor-as-class.ts";
32+
33+
const se = new SparqlEditor(
34+
"https://sparql.uniprot.org/sparql/",
35+
// "https://www.bgee.org/sparql/",
36+
// "https://sparql.omabrowser.org/sparql/",
37+
// "https://beta.sparql.swisslipids.org/sparql/",
38+
document.getElementById("sparql-editor"),
39+
document.getElementById("sparql-examples"),
40+
);
41+
</script> -->
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)