0.0.3 • Published 4 months ago

@sib-swiss/sparql-overview v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

šŸ’« SPARQL overview web component

NPM Tests Deploy demo to GitHub Pages

A standard web component to visualize classes and their relations as a network.

The editor retrieves VoID description about the endpoints by directly querying them with SPARQL.

šŸ‘†ļø You can try it for a few SPARQL endpoints of the SIB, such as UniProt and Bgee, here: sib-swiss.github.io/sparql-editor/overview

šŸš€ Use

Install with a package manager in your project:

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

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 overview</title>
    <meta name="description" content="SPARQL overview demo page" />
    <link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/f/f3/Rdf_logo.svg" />
  </head>

  <body>
    <div style="height: 97vh">
      <div id="sparql-overview"></div>
    </div>
  </body>

  <script type="module">
    import {SparqlOverview} from "@sib-swiss/sparql-overview";

    async function main() {
      const endpointUrl = "https://www.bgee.org/sparql/";

      const prefixes = {
        rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
        rdfs: "http://www.w3.org/2000/01/rdf-schema#",
        owl: "http://www.w3.org/2002/07/owl#",
        up: "http://purl.uniprot.org/core/",
        orth: "http://purl.org/net/orth#",
      };

      const voidQuery = `PREFIX owl: <http://www.w3.org/2002/07/owl#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX sh:<http://www.w3.org/ns/shacl#>
PREFIX sd:<http://www.w3.org/ns/sparql-service-description#>
PREFIX void:<http://rdfs.org/ns/void#>
PREFIX void-ext:<http://ldf.fi/void-ext#>
SELECT DISTINCT ?graph ?graphLabel ?subjectClass ?prop ?objectClass ?objectDatatype
?triples ?subjectClassLabel ?objectClassLabel ?subjectClassComment ?objectClassComment ?propLabel ?propComment
WHERE {
  {
    OPTIONAL {
      ?graph sd:graph ?graphDesc .
      OPTIONAL { ?graph rdfs:label ?graphLabel }
      ?graphDesc void:classPartition ?cp .
    }
    ?cp void:class ?subjectClass ;
      void:propertyPartition ?pp .
    OPTIONAL { ?subjectClass rdfs:label ?subjectClassLabel }
    OPTIONAL { ?subjectClass rdfs:comment ?subjectClassComment }

    ?pp void:property ?prop .
    OPTIONAL { ?pp void:triples ?triples }
    OPTIONAL { ?prop rdfs:label ?propLabel }
    OPTIONAL { ?prop rdfs:comment ?propComment }
    OPTIONAL {
      {
        ?pp  void:classPartition [ void:class ?objectClass ] .
        OPTIONAL { ?objectClass rdfs:label ?objectClassLabel }
        OPTIONAL { ?objectClass rdfs:comment ?objectClassComment }
      } UNION {
        ?pp void-ext:datatypePartition [ void-ext:datatype ?objectDatatype ] .
      }
    }
  } UNION {
    ?linkset void:subjectsTarget [ void:class ?subjectClass ] ;
      void:linkPredicate ?prop ;
      void:objectsTarget [ void:class ?objectClass ] .
  }
} ORDER BY ?subjectClass ?objectClass ?objectDatatype ?graph ?triples`;

      // Query SPARQL endpoint to get the VoID description of classes
      const response = await fetch(`${endpointUrl}?query=${encodeURIComponent(voidQuery)}`, {
        signal: AbortSignal.timeout(5000),
        headers: {Accept: "application/sparql-results+json"},
      });
      const json = await response.json();
      const voidDesc = json.results.bindings;

      new SparqlOverview(document.querySelector("#sparql-overview"), {endpointUrl: voidDesc}, prefixes);
    }

    main();
  </script>
</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.