Package Exports

@sib-swiss/sparql-editor
@sib-swiss/sparql-editor/dist/sparql-editor.js
@sib-swiss/sparql-editor/dist/sparql-editor.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sib-swiss/sparql-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

💫 SPARQL editor web component

A standard web component to easily deploy a SPARQL query editor for a specific SPARQL endpoint using the popular YASGUI editor.

Prefixes are automatically pulled from the endpoint using their definition defined with the SHACL ontology (sh:prefix/sh:namespace).
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 project for more details.
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). And the proposed properties are filtered based on the properties available for the type of the subject attached to where your cursor is 🤯. Checkout the void-generator project to automatically generate VoID description for your endpoint.

Screenshot gene

Screenshot expression

🚀 Use

Import from CDN

<script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor"></script>

Or install with a package manager in your project:

npm install --save @sib-swiss/sparql-editor
# or
pnpm add @sib-swiss/sparql-editor

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

<sparql-editor endpoint="https://sparql.uniprot.org/sparql/"></sparql-editor>

You can customize the number of examples displayed on the main page, buttons color, and provide other HTML elements to be included under the SPARQL example (e.g. about and links to relevant resources):

<sparql-editor
  endpoint="https://www.bgee.org/sparql/"
  examples-on-main-page="10"
  style="--btn-color: white; --btn-bg-color: #00709b;"
>
  <h1>About</h1>
  <p>This SPARQL endpoint contains...</p>
</sparql-editor>

📝 Basic example

No need for a complex project you can integrate it in any HTML page by importing from a CDN.

Create a index.html file with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SPARQL editor dev</title>
    <meta name="description" content="SPARQL editor demo page" />
    <link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/f/f3/Rdf_logo.svg" />
    <!-- Import the module from a CDN -->
    <script type="module" src="https://unpkg.com/@sib-swiss/sparql-editor@0.1.1"></script>
  </head>

  <body>
    <div>
      <sparql-editor
        endpoint="https://www.bgee.org/sparql/"
        examples-on-main-page="10"
        style="--btn-color: white; --btn-bg-color: #00709b;"
      >
        <h1>About</h1>
        <p>This SPARQL endpoint contains...</p>
      </sparql-editor>
    </div>
  </body>
</html>

Just open this HTML page in your favorite browser.

You can also start a basic web server with nodeJS or python:

npx http-server
# or
python -m http.server

🛠️ Development

Requirement: NodeJS installed.

Clone the repository obviously, and get into the repository root folder.

Install:

npm install

Run in development:

npm run dev

Auto format code with prettier:

npm run fmt

Lint with eslint (we recommend to install the ESLint extension on VSCode):

npm run lint

Build for production in the dist folder:

npm run build

Update dependencies to the latest available versions:

npx npm-check-updates -u

🏷️ Release

To create a new release:

Login with npm adduser if not already done
Upgrade version in package.json
Run release script:
```
npm run release
```
Create release on GitHub

🤝 Credits

Thanks to:

Triply for originally developing the YASGUI editor
Zazuko for keeping it up-to-date the last few years