From 2c89a5b1ca42ab7d8f5658f45b13a369acbf3a45 Mon Sep 17 00:00:00 2001 From: Vincent Emonet Date: Tue, 22 Oct 2024 18:20:08 +0200 Subject: [PATCH] fix: size of the editor, and update demo pages --- demo/bgee.html | 67 ++++++++++++++-------------- demo/dbgi.html | 47 ++++++++++---------- demo/hamap.html | 47 ++++++++++---------- demo/index.html | 81 +++++++++++++++------------------ demo/metanetx.html | 57 ++++++++++++------------ demo/oma.html | 101 +++++++++++++++++++++--------------------- demo/rhea.html | 93 +++++++++++++++++++------------------- demo/styles.css | 26 +++++++++++ demo/swisslipids.html | 75 +++++++++++++++---------------- demo/uniprot.html | 85 +++++++++++++++++------------------ src/sparql-editor.ts | 14 +++--- src/utils.ts | 3 ++ 12 files changed, 359 insertions(+), 337 deletions(-) diff --git a/demo/bgee.html b/demo/bgee.html index ee11659..b07236f 100644 --- a/demo/bgee.html +++ b/demo/bgee.html @@ -12,40 +12,41 @@ -
- -

About

-

- Tutorial and documentation: - Querying the Bgee knowledge graph -

-

- Ontology (data schema): GenEx semantic model specification -

-

Support: open an issue here

+ -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- +
+

About

+

+ Tutorial and documentation: + Querying the Bgee knowledge graph +

+

+ Ontology (data schema): GenEx semantic model specification +

+

Support: open an issue here

+ +

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/dbgi.html b/demo/dbgi.html index 8a055e6..ec9908e 100644 --- a/demo/dbgi.html +++ b/demo/dbgi.html @@ -12,29 +12,30 @@ -
- -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- + + +
+

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/hamap.html b/demo/hamap.html index 75a81d2..d278a11 100644 --- a/demo/hamap.html +++ b/demo/hamap.html @@ -12,29 +12,30 @@ -
- -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- + + +
+

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/index.html b/demo/index.html index 1e13ae3..031bb5a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,53 +12,42 @@ -
- + - -

Metadata-based SPARQL editor

-

Metadata used by this editor are automatically retrieved by querying the endpoints:

-
    -
  • Context-aware autocomplete for classes and predicates based on the content of the endpoints
    • -
  • Example queries
    • -
  • Commonly used prefixes
    • -
-

- See the repository for more details, - or the check page to check if an endpoint contains the necessary metadata. -

-

Editors for specific SIB endpoints

- - +
+

💫 Metadata-based SPARQL editor 📝

+

Metadata used by this editor are automatically retrieved by querying the endpoints. It features:

+
    +
  • Context-aware autocomplete for classes and predicates based on the content of the endpoints
    • +
  • Example queries
    • +
  • Commonly used prefixes
    • +
+

+ See the + source code repository for more + details on how to generate and upload the required descriptive metadata to your endpoints, or to deploy this web + component yourself. +

+

Go to the check page to check if an endpoint contains the necessary metadata.

+

You can also navigate editors focusing on specific SIB endpoints:

+
- - diff --git a/demo/metanetx.html b/demo/metanetx.html index d1f0d8e..f0f8c25 100644 --- a/demo/metanetx.html +++ b/demo/metanetx.html @@ -12,34 +12,35 @@ -
- -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- + + +
+

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/oma.html b/demo/oma.html index bf00ac6..211411d 100644 --- a/demo/oma.html +++ b/demo/oma.html @@ -12,58 +12,59 @@ -
- -

About OMA SPARQL Endpoint

-

- The OMA SPARQL endpoint is reachable by using your preferable programming language or SPARQL interface through - the following URL address: - https://sparql.omabrowser.org/sparql. -

-

- The OMA SPARQL endpoint is updated in sync with the OMA Browser. The data - of the current release as well of the previous releases - can be downloaded from the download section of the OMA - Browser as turtle files (look out for OMA Browser in RDF). -

-

+ -

RDF Serialisation and Ontologies

-

- The RDF serialisation of the OMA Hierarchical Orthologous Groups is based on the - ORTH ontology specification in the context of the Quest - for Orthologs (QfO) consortium (see GitHub repository - here). -

-

-

- To cross-reference other resources, this SPARQL endpoint contains annotation property assertions defined by a - first draft of the life-sciences cross-reference (LSCR) ontology that is available to download at the Quest - for Orthologs github repository here - - lscr.ttl file. -

+
+

About OMA SPARQL Endpoint

+

+ The OMA SPARQL endpoint is reachable by using your preferable programming language or SPARQL interface through + the following URL address: + https://sparql.omabrowser.org/sparql. +

+

+ The OMA SPARQL endpoint is updated in sync with the OMA Browser. The data + of the current release as well of the previous releases + can be downloaded from the download section of the OMA Browser + as turtle files (look out for OMA Browser in RDF). +

+

-

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- +

RDF Serialisation and Ontologies

+

+ The RDF serialisation of the OMA Hierarchical Orthologous Groups is based on the + ORTH ontology specification in the context of the Quest + for Orthologs (QfO) consortium (see GitHub repository + here). +

+

+

+ To cross-reference other resources, this SPARQL endpoint contains annotation property assertions defined by a + first draft of the life-sciences cross-reference (LSCR) ontology that is available to download at the Quest for + Orthologs github repository here - + lscr.ttl file. +

+ +

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/rhea.html b/demo/rhea.html index cb93bcd..f63dad2 100644 --- a/demo/rhea.html +++ b/demo/rhea.html @@ -12,54 +12,53 @@ -
- -

About

-

- This SPARQL endpoint contains Rhea reactions data (see - statistics), and a snapshot of ChEBI data matching the Rhea - release. It is free to access and supports the SPARQL 1.1 Standard. -

-

- The query timeout is 45 minutes. All triples are available in the default graph. There are two named graphs: - Rhea and ChEBI. -

-

Documentation

-
    -
  1. - Statistics and - diagrams -
    2. -
  2. - Tutorial on using SPARQL with Rhea -
    3. -
  3. Example queries
    4. -
  4. Release data
    5. -
+ -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- +
+

About

+

+ This SPARQL endpoint contains Rhea reactions data (see + statistics), and a snapshot of ChEBI data matching the Rhea + release. It is free to access and supports the SPARQL 1.1 Standard. +

+

+ The query timeout is 45 minutes. All triples are available in the default graph. There are two named graphs: + Rhea and ChEBI. +

+

Documentation

+
    +
  1. + Statistics and + diagrams +
    2. +
  2. + Tutorial on using SPARQL with Rhea +
    3. +
  3. Example queries
    4. +
  4. Release data
    5. +
+ +

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/styles.css b/demo/styles.css index 6511a42..970e9e5 100644 --- a/demo/styles.css +++ b/demo/styles.css @@ -6,3 +6,29 @@ a:hover { filter: brightness(60%); text-decoration: underline; } + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} +.info-box { + max-width: 800px; + margin: 2em auto; + text-align: left; + padding: 0.5em 1em; + background-color: white; + /* background-color: #f4f4f4; */ + border: 1px solid #ccc; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} +h2 { + text-align: center; +} +p, +ul, +li { + text-align: left; +} +ul { + padding-left: 1.5em; +} diff --git a/demo/swisslipids.html b/demo/swisslipids.html index 79bec4f..90c78a4 100644 --- a/demo/swisslipids.html +++ b/demo/swisslipids.html @@ -12,44 +12,45 @@ -
- -

About

-

- This SPARQL endpoint contains all SwissLipids data. It is free to access and supports the - SPARQL 1.1 Standard. -

-

- There are 15,271,348 triples in this release (2024_08_30). The query timeout is 45 minutes. All triples are - available in the default graph. There are 3 named graphs. -

-

Documentation

-
    -
  1. Statistics and diagrams
    2. -
  2. Example queries
    3. -
+ -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- +
+

About

+

+ This SPARQL endpoint contains all SwissLipids data. It is free to access and supports the + SPARQL 1.1 Standard. +

+

+ There are 15,271,348 triples in this release (2024_08_30). The query timeout is 45 minutes. All triples are + available in the default graph. There are 3 named graphs. +

+

Documentation

+
    +
  1. Statistics and diagrams
    2. +
  2. Example queries
    3. +
+ +

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/demo/uniprot.html b/demo/uniprot.html index 27fef7e..6b927f0 100644 --- a/demo/uniprot.html +++ b/demo/uniprot.html @@ -12,49 +12,50 @@ -
- -

About

-

- This SPARQL endpoint contains all UniProt data. It is free to access and supports the - SPARQL 1.1 Standard. -

-

- There are 186,631,773,819 triples in this release (2024_04). The query timeout is 45 minutes. All triples are - available in the default graph. There are 22 named graphs. -

-

Documentation

-
    -
  1. Classes and predicates defined by the UniProt consortium
    2. -
  2. - Tutorial on using SPARQL with UniProt -
    3. -
  3. Statistics and diagrams
    4. -
+ -

Other SPARQL editors for SIB endpoints

- -

You can check if an endpoint contains the necessary metadata here.

- +
+

About

+

+ This SPARQL endpoint contains all UniProt data. It is free to access and supports the + SPARQL 1.1 Standard. +

+

+ There are 186,631,773,819 triples in this release (2024_04). The query timeout is 45 minutes. All triples are + available in the default graph. There are 22 named graphs. +

+

Documentation

+
    +
  1. Classes and predicates defined by the UniProt consortium
    2. +
  2. + Tutorial on using SPARQL with UniProt +
    3. +
  3. Statistics and diagrams
    4. +
+ +

Other SPARQL editors for SIB endpoints

+ +

You can check if an endpoint contains the necessary metadata here.

diff --git a/src/sparql-editor.ts b/src/sparql-editor.ts index f62e33f..f3ef3ef 100644 --- a/src/sparql-editor.ts +++ b/src/sparql-editor.ts @@ -690,18 +690,16 @@ ex:${exampleUri} a sh:SPARQLExecutable${ }); // Add the examples next to the YASQE editor - // yasqeEl.style.height = "100%"; yasqeEl.style.width = "100%"; exampleQueriesEl.style.width = "50%"; + exampleQueriesEl.style.height = "fit-content"; yasqeElParent.style.display = "flex"; yasqeElParent.appendChild(exampleQueriesEl); - const yasqe = this.yasgui?.getTab()?.getYasqe(); - yasqe?.expandEditor(); - // if (exampleQueriesEl.offsetHeight > 0) { - // Yasgui.Yasqe.defaults.editorHeight = `${exampleQueriesEl.offsetHeight}px`; - // const yasqe = this.yasgui?.getTab()?.getYasqe(); - // yasqe?.expandEditor(); - // } + if (exampleQueriesEl.offsetHeight > 0) { + // Yasgui.Yasqe.defaults.editorHeight = `${exampleQueriesEl.offsetHeight}px`; + const yasqe = this.yasgui?.getTab()?.getYasqe(); + yasqe?.setSize(null, `${exampleQueriesEl.offsetHeight}px`); + } } addPrefixesToQuery(query: string) { diff --git a/src/utils.ts b/src/utils.ts index e5d8a9e..cda130e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -280,6 +280,9 @@ export function generateTabLabel(description: string): string { "them", "from", "these", + "what", + "used", + "have", ]; // Remove HTML tags and parenthesis const words = description