add edge width based on triples count

sib-swiss · Nov 25, 2024 · 86e045e · 86e045e
1 parent 9da7b9b
commit 86e045e
Show file tree

Hide file tree

Showing 9 changed files with 442 additions and 263 deletions.
diff --git a/package.json b/package.json
@@ -6,15 +6,15 @@
   "workspaces": [
     "packages/*"
   ],
-  "description": "Web components to for accessing SPARQL endpoints.",
+  "description": "Web components for accessing SPARQL endpoints.",
   "license": "MIT",
   "author": {
     "name": "Vincent Emonet",
     "email": "vincent.emonet@gmail.com"
   },
   "scripts": {
     "build": "npm run build:overview && npm run build:editor && npm run build:demo",
-    "dev": "npm run dev:editor",
+    "dev": "npm run build:overview && npm run dev:editor",
     "build:editor": "npm run build -w packages/sparql-editor",
     "dev:editor": "npm run dev -w packages/sparql-editor",
     "build:overview": "npm run build -w packages/sparql-overview",

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@sib-swiss/sparql-editor-demo",
+  "name": "@sib-swiss/sparql-demo",
   "version": "0.2.4",
-  "description": "A demo website of the SPARQL query editor. Built on the popular YASGUI editor, it provides context-aware autocomplete for classes and predicates based on the content of the endpoints.",
+  "description": "A demo website of the SPARQL tools.",
   "license": "MIT",
   "author": {
     "name": "Vincent Emonet",

diff --git a/packages/demo/src/index.html b/packages/demo/src/index.html
@@ -30,7 +30,7 @@
     </div>
 
     <sparql-editor
-      endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/,https://sparql.omabrowser.org/sparql/,https://beta.sparql.swisslipids.org/,https://sparql.rhea-db.org/sparql/,https://biosoda.unil.ch/graphdb/repositories/emi-dbgi,https://hamap.expasy.org/sparql/,https://rdf.metanetx.org/sparql/,https://sparql.orthodb.org/sparql"
+      endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/,https://sparql.omabrowser.org/sparql/,https://beta.sparql.swisslipids.org/,https://sparql.rhea-db.org/sparql/,https://biosoda.unil.ch/graphdb/repositories/emi-dbgi,https://biosoda.unil.ch/graphdb/repositories/biodatafuse,https://hamap.expasy.org/sparql/,https://rdf.metanetx.org/sparql/,https://sparql.orthodb.org/sparql"
       examples-repository="https://github.com/sib-swiss/sparql-examples"
     ></sparql-editor>
 

diff --git a/packages/sparql-editor/src/sparql-editor.ts b/packages/sparql-editor/src/sparql-editor.ts
@@ -106,14 +106,14 @@ export class SparqlEditor extends HTMLElement {
         <button id="sparql-add-prefixes-btn" class="btn" style="margin-bottom: 0.3em;">Add common prefixes</button>
         <button id="sparql-save-example-btn" class="btn" style="margin-bottom: 0.3em;">Save query as example</button>
         <button id="sparql-examples-top-btn" class="btn" style="margin-bottom: 0.3em;">Browse examples</button>
-        <button id="sparql-cls-overview" class="btn" style="margin-bottom: 0.3em;" title="Overview of classes and their relations in the endpoint">
+        <button id="sparql-cls-overview-btn" class="btn" style="margin-bottom: 0.3em;" title="Overview of classes and their relations in the endpoint">
           Classes overview
         </button>
         <button id="sparql-clear-cache-btn" class="btn" style="margin-bottom: 0.3em;">Clear cache</button>
         <div id="yasgui"></div>
       </div>
     `;
-    // TODO: <button id="sparql-cls-overview" class="btn" style="margin-bottom: 0.3em;">Browse overview</button>
+    // TODO: <button id="sparql-cls-overview-btn" class="btn" style="margin-bottom: 0.3em;">Browse overview</button>
     this.appendChild(style);
 
     // NOTE: autocompleters are executed when Yasgui is instantiated
@@ -204,7 +204,7 @@ export class SparqlEditor extends HTMLElement {
     Yasgui.Yasr.defaults.prefixes = this.meta[endpoint].prefixes;
 
     // Hide or show the Classes overview button
-    const clsOverviewBtn = this.querySelector("#sparql-cls-overview") as HTMLElement;
+    const clsOverviewBtn = this.querySelector("#sparql-cls-overview-btn") as HTMLElement;
     if (Object.keys(this.meta[endpoint].void).length > 0) {
       clsOverviewBtn.style.display = "";
     } else {
@@ -274,7 +274,10 @@ export class SparqlEditor extends HTMLElement {
       });
     });
     this.yasgui?.on("tabAdd", () => {
-      setTimeout(() => this.showExamples());
+      setTimeout(() => {
+        this.showExamples();
+        this.showOverview();
+      });
     });
 
     // Button to clear and update cache of SPARQL endpoints metadata
@@ -585,16 +588,14 @@ ex:${exampleUri} a sh:SPARQLExecutable${
   }
 
   async showOverview() {
-    const overviewBtn = this.querySelector("#sparql-cls-overview") as HTMLButtonElement;
-    // Create dialog for examples
+    const overviewBtn = this.querySelector("#sparql-cls-overview-btn") as HTMLButtonElement;
+    const existingOverviewDialog = this.querySelector("#sparql-cls-overview-dialog") as HTMLDialogElement;
+    if (existingOverviewDialog) existingOverviewDialog.remove();
     const overviewDialog = document.createElement("dialog");
-    // exQueryDialog.style.margin = "1em";
-    // exQueryDialog.style.width = "calc(100vw - 8px)";
+    // Create dialog for overview
+    overviewDialog.id = "sparql-cls-overview-dialog";
     overviewDialog.style.width = "100%";
     overviewDialog.style.height = "100%";
-    overviewDialog.style.borderColor = "#cccccc";
-    overviewDialog.style.backgroundColor = "#f5f5f5";
-    overviewDialog.style.borderRadius = "10px";
     overviewDialog.innerHTML = `<div style="height: 100%;">
       <sparql-overview endpoint="${this.endpointUrl()}"></sparql-overview>
     </div>`;
@@ -607,13 +608,13 @@ ex:${exampleUri} a sh:SPARQLExecutable${
     dialogCloseBtn.style.top = "1.5em";
     dialogCloseBtn.style.right = "2em";
     overviewDialog.appendChild(dialogCloseBtn);
-    document.body.appendChild(overviewDialog);
+    this.appendChild(overviewDialog);
 
-    overviewBtn.addEventListener("click", () => {
-      overviewDialog.showModal();
-      document.body.style.overflow = "hidden";
-    });
-    overviewBtn.addEventListener("click", () => {
+    // Remove previous event listeners
+    overviewBtn.replaceWith(overviewBtn.cloneNode(true));
+    const newOverviewBtn = this.querySelector("#sparql-cls-overview-btn") as HTMLButtonElement;
+
+    newOverviewBtn.addEventListener("click", () => {
       overviewDialog.showModal();
       document.body.style.overflow = "hidden";
     });

diff --git a/packages/sparql-editor/src/styles.ts b/packages/sparql-editor/src/styles.ts
@@ -7,88 +7,90 @@
 // .yasr .dataTable {
 //   font-size: 0.9em;
 // }
-export const editorCss = `.sparql-editor-container a {
-  text-decoration: none;
-  color: #00709b;
-}
-.sparql-editor-container a:hover {
-  filter: brightness(60%);
-}
-.sparql-editor-container button {
-  cursor: pointer;
-}
-.sparql-editor-container {
+export const editorCss = `.sparql-editor-container {
+  --btn-color: #e30613;
+  --btn-bg-color: #f8bca5;
+  font-family: Arial, sans-serif;
   display: flex;
   flex-direction: row;
-}
-.sparql-editor-container .sparql-examples {
-  padding-left: 1em;
-}
-.sparql-editor-container input.sparql-search-examples-input {
-  width: 300px;
-  padding: 0.5em;
-  border-radius: 5px;
-}
 
-@media (max-width: 600px) {
-  .sparql-editor-container {
-    flex-direction: column;
+  a {
+    text-decoration: none;
+    color: #00709b;
   }
-  .sparql-editor-container .sparql-examples {
-    display: none;
+  a:hover {
+    filter: brightness(60%);
   }
-  .sparql-editor-container #sparql-examples-top-btn {
-    display: inline-block;
+  dialog {
+    border-color: #cccccc;
+    background-color: #f5f5f5;
+    border-radius: 10px;
   }
-  .sparql-editor-container input.sparql-search-examples-input {
-    width: 100%;
+  .sparql-examples {
+    padding-left: 1em;
   }
-}
-@media (min-width: 600px) {
-  .sparql-editor-container #sparql-examples-top-btn {
-    display: none !important;
+  input.sparql-search-examples-input {
+    width: 300px;
+    padding: 0.5em;
+    border-radius: 5px;
+  }
+  .yasr_results {
+    overflow-x: auto;
   }
-}
-
-
-.sparql-editor-container {
-    --btn-color: #e30613;
-    --btn-bg-color: #f8bca5;
-    font-family: Arial, sans-serif;
-}
 
-.sparql-editor-container #status-link {
+  #status-link {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     cursor: pointer;
     padding: 3px;
-}
+  }
 
-@keyframes spin {
-    to { transform: rotate(360deg); }
+  button.btn {
+    background-color: var(--btn-bg-color);
+    color: var(--btn-color);
+    border: none;
+    padding: 0.3em 0.4em;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    cursor: pointer;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  button.btn:hover {
+    filter: brightness(90%);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
+  }
+  button.btn:active {
+    filter: brightness(80%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reset shadow on click */
+  }
 }
 
-.sparql-editor-container button.btn {
-  background-color: var(--btn-bg-color);
-  color: var(--btn-color);
-  border: none;
-  padding: 0.3em 0.4em;
-  border-radius: 5px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-  cursor: pointer;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
-.sparql-editor-container button.btn:hover {
-  filter: brightness(90%);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
-}
-.sparql-editor-container button.btn:active {
-  filter: brightness(80%);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reset shadow on click */
+@media (max-width: 600px) {
+  .sparql-editor-container {
+    flex-direction: column;
+
+    .sparql-examples {
+      display: none;
+    }
+    #sparql-examples-top-btn {
+      display: inline-block;
+    }
+    input.sparql-search-examples-input {
+      width: 100%;
+    }
+  }
+}
+@media (min-width: 600px) {
+  .sparql-editor-container #sparql-examples-top-btn {
+    display: none !important;
+  }
 }
 
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
 
 button.yasqe_share {
   display: none !important;

diff --git a/packages/sparql-overview/README.md b/packages/sparql-overview/README.md
@@ -2,44 +2,44 @@
 
 # 💫 SPARQL overview web component
 
-[![NPM](https://img.shields.io/npm/v/@sib-swiss/sparql-metamap)](https://www.npmjs.com/package/@sib-swiss/sparql-metamap)
-[![Tests](https://github.com/sib-swiss/sparql-metamap/actions/workflows/test.yml/badge.svg)](https://github.com/sib-swiss/sparql-metamap/actions/workflows/test.yml)
-[![Deploy demo to GitHub Pages](https://github.com/sib-swiss/sparql-metamap/actions/workflows/deploy.yml/badge.svg)](https://github.com/sib-swiss/sparql-metamap/actions/workflows/deploy.yml)
+[![NPM](https://img.shields.io/npm/v/@sib-swiss/sparql-overview)](https://www.npmjs.com/package/@sib-swiss/sparql-overview)
+[![Tests](https://github.com/sib-swiss/sparql-editor/actions/workflows/test.yml/badge.svg)](https://github.com/sib-swiss/sparql-v/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)
 
 </div>
 
 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-metamap](https://sib-swiss.github.io/sparql-metamap)**
+👆️ 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](https://sib-swiss.github.io/sparql-editor/overview)**
 
 ## 🚀 Use
 
 1. Import from a CDN:
 
    ```html
-   <script type="module" src="https://unpkg.com/@sib-swiss/sparql-metamap"></script>
+   <script type="module" src="https://unpkg.com/@sib-swiss/sparql-overview"></script>
    ```
 
    Or install with a package manager in your project:
 
    ```bash
-   npm install --save @sib-swiss/sparql-metamap
+   npm install --save @sib-swiss/sparql-overview
    # or
-   pnpm add @sib-swiss/sparql-metamap
+   pnpm add @sib-swiss/sparql-overview
    ```
 
 2. Use the custom element in your HTML/JSX/TSX code:
 
    ```html
-   <sparql-metamap endpoint="https://sparql.uniprot.org/sparql/"></sparql-metamap>
+   <sparql-overview endpoint="https://sparql.uniprot.org/sparql/"></sparql-overview>
    ```
 
    You can also pass a list of endpoints URLs separated by commas to enable users to choose from different endpoints:
 
    ```html
-   <sparql-metamap endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/"></sparql-metamap>
+   <sparql-overview endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/"></sparql-overview>
    ```
 
 > [!WARNING]
@@ -62,15 +62,12 @@ Create a `index.html` file with:
     <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-metamap"></script>
+    <script type="module" src="https://unpkg.com/@sib-swiss/sparql-overview"></script>
   </head>
 
   <body>
     <div>
-      <sparql-metamap endpoint="https://www.bgee.org/sparql/">
-        <h1>About</h1>
-        <p>This SPARQL endpoint contains...</p>
-      </sparql-metamap>
+      <sparql-overview endpoint="https://www.bgee.org/sparql/"></sparql-overview>
     </div>
   </body>
 </html>
@@ -88,4 +85,4 @@ python -m http.server
 
 # 🧑‍💻 Contributing
 
-Checkout [CONTRIBUTING.md](https://github.com/sib-swiss/sparql-metamap/blob/main/CONTRIBUTING.md) for more details on how to run this in development and make a contribution.
+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.
diff --git a/packages/sparql-overview/index.html b/packages/sparql-overview/index.html
@@ -18,7 +18,7 @@
     <div style="height: 97vh">
       <sparql-overview endpoint="https://sparql.uniprot.org/sparql/"></sparql-overview>
       <!-- <sparql-overview endpoint="https://www.bgee.org/sparql/"></sparql-overview> -->
-      <!-- https://www.bgee.org/sparql/ -->
+      <!-- <sparql-overview endpoint="https://sparql.rhea-db.org/sparql/"></sparql-overview> -->
 
       <!-- endpoints="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/,https://sparql.omabrowser.org/sparql/,https://beta.sparql.swisslipids.org/,https://sparql.rhea-db.org/sparql/,https://biosoda.unil.ch/graphdb/repositories/emi-dbgi,https://hamap.expasy.org/sparql/,https://rdf.metanetx.org/sparql/" -->
     </div>