npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sib-swiss/sparql-editor

v0.2.4

Published

A standard web component to easily 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.

Downloads

122

Readme

💫 SPARQL editor web component

NPM Tests Deploy demo to GitHub Pages

A standard web component to easily 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.

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 endpoints, such as UniProt and Bgee, at sib-swiss.github.io/sparql-editor

  • ✨ Autocomplete possibilities for properties and classes are automatically pulled from the endpoints based on the VoID description 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 project to automatically generate VoID description for your endpoint.

    PREFIX void: <http://rdfs.org/ns/void#>
    PREFIX void-ext: <http://ldf.fi/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 are automatically pulled from the endpoint. Checkout the sparql-examples project for more details.

    PREFIX sh: <http://www.w3.org/ns/shacl#>
    PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
    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).

    PREFIX sh: <http://www.w3.org/ns/shacl#>
    SELECT DISTINCT ?prefix ?namespace
    WHERE { [] sh:namespace ?namespace ; sh:prefix ?prefix }
    ORDER BY ?prefix

Screenshot gene


Screenshot expression

🚀 Use

  1. Import from a 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
  2. Use the custom element in your HTML/JSX/TSX code:

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

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

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

[!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.
<sparql-editor
  endpoint="https://www.bgee.org/sparql/,https://sparql.uniprot.org/sparql/"
  examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/Bgee"
  examples-repository="https://github.com/sib-swiss/sparql-examples"
  examples-namespace="https://sparql.uniprot.org/sparql/.well-known/sparql-examples/"
  examples-on-main-page="10"
  add-limit="10000"
  style="--btn-color: white; --btn-bg-color: #00709b;"
></sparql-editor>

📝 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:

<!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"></script>
  </head>

  <body>
    <div>
      <sparql-editor
        endpoint="https://www.bgee.org/sparql/"
        examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/Bgee"
        examples-on-main-page="10"
        style="--btn-color: white; --btn-bg-color: #00709b;"
      ></sparql-editor>
    </div>
  </body>
</html>

Then just open this HTML page in your favorite browser.

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

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

🧑‍💻 Contributing

Checkout CONTRIBUTING.md for more details on how to run this in development and make a contribution.

🤝 Credits

Thanks to:

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