Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sib-swiss/sparql-editor

💫 A standard web component to deploy a user-friendly SPARQL query editor for one or more endpoints. Built on the popular YASGUI editor, it provides context-aware autocomplete for classes and predicates based on the content of the endpoints.
https://github.com/sib-swiss/sparql-editor

sparql sparql-editor sparql-query sparql-query-builder yasgui

Last synced: 25 days ago
JSON representation

Host: GitHub
URL: https://github.com/sib-swiss/sparql-editor
Owner: sib-swiss
License: mit
Created: 2024-07-01T08:54:56.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-10-16T09:14:32.000Z (2 months ago)
Last Synced: 2024-10-17T23:10:50.295Z (2 months ago)
Topics: sparql, sparql-editor, sparql-query, sparql-query-builder, yasgui
Language: TypeScript
Homepage: https://sib-swiss.github.io/sparql-editor
Size: 720 KB
Stars: 3
Watchers: 3
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        


# 💫 SPARQL editor web component

[![NPM](https://img.shields.io/npm/v/@sib-swiss/sparql-editor)](https://www.npmjs.com/package/@sib-swiss/sparql-editor)

[![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)

[![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)



A standard web component to easily deploy a user-friendly [SPARQL](https://www.w3.org/TR/sparql12-query/) query editor for one or more endpoints. 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.

The editor retrieves metadata about the endpoints by directly querying them, 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.

> [!TIP]

>

> 👆️ **Try it** with [SIB](https://www.sib.swiss/) endpoints, such as UniProt and Bgee, at **[sib-swiss.github.io/sparql-editor](https://sib-swiss.github.io/sparql-editor)**

- **✨ 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.

  Click here to see the SPARQL query used to retrieve the VoID description.

  ```SPARQL

  PREFIX void: 

  PREFIX void-ext: 

  SELECT DISTINCT ?subjectClass ?prop ?objectClass ?objectDatatype

  WHERE {

      {

          ?cp void:class ?subjectClass ;

              void:propertyPartition ?pp .

          ?pp void:property ?prop .

          OPTIONAL {

              {

                  ?pp  void:classPartition [ void:class ?objectClass ] .

              } UNION {

                  ?pp void-ext:datatypePartition [ void-ext:datatype ?objectDatatype ] .

              }

          }

      } UNION {

          ?linkset void:subjectsTarget ?subjectClass ;

              void:linkPredicate ?prop ;

              void:objectsTarget ?objectClass .

      }

  }

  ```

  

- **📜 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.

  Click here to see the SPARQL query used to retrieve the example queries.

  ```SPARQL

  PREFIX sh: 

  PREFIX rdfs: 

  SELECT DISTINCT ?sq ?comment ?query

  WHERE {

      ?sq a sh:SPARQLExecutable ;

          rdfs:comment ?comment ;

          sh:select|sh:ask|sh:construct|sh:describe ?query .

  } ORDER BY ?sq

  ```

  

- **🏷️ Prefixes** are automatically pulled from the endpoint using their definition defined with the SHACL ontology (`sh:prefix`/`sh:namespace`).

  Click here to see the SPARQL query used to retrieve the prefixes/namespaces.

  ```SPARQL

  PREFIX sh: 

  SELECT DISTINCT ?prefix ?namespace

  WHERE { [] sh:namespace ?namespace ; sh:prefix ?prefix }

  ORDER BY ?prefix

  ```

  

![Screenshot gene](packages/demo/src/screenshot_gene.png)

---

![Screenshot expression](packages/demo/src/screenshot_expression.png)

## 🚀 Use

1. Import from a CDN:

   ```html

   

   ```

   Or install with a package manager in your project:

   ```bash

   npm install --save @sib-swiss/sparql-editor

   # or

   pnpm add @sib-swiss/sparql-editor

   ```

2. Use the custom element in your HTML/JSX/TSX code:

   ```html

   

   ```

   You can also pass a list of endpoints URLs separated by commas to enable users to choose from different endpoints:

   ```html

   

   ```

> [!WARNING]

>

> 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)

### ⚙️ Available attributes

You can customize a few optional attributes when calling the custom element:

- `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,

- `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),

- `examples-namespace`: the namespace used when saving a query as example (defaults to the endpoint URL + /.well-known/sparql-examples/ when not specified),

- `examples-on-main-page`: the number of examples displayed on the main page (defaults to 10),

- `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)

- `style="--btn-color / --btn-bg-color"`: buttons color.

```html

```

### 📝 Basic example

No need for a complex project you can integrate SPARQL editor in any HTML page by importing from a CDN!

Create a `index.html` file with:

```html

  

    

    

    SPARQL editor dev

    

    

    

    

  

  

    


      

    

  

```

Then just open this HTML page in your favorite browser.

You can also start a basic web server with NodeJS or Python (recommended):

```bash

npx http-server

# or

python -m http.server

```

## 🧑‍💻 Contributing

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.

## 🤝 Credits

Thanks to:

- [Triply](https://triply.cc) for originally developing the YASGUI editor

- [Zazuko](https://zazuko.com/) for keeping it up-to-date the last few years