From 8d1547a9830c8caa3d1802046981b7bb0929501d Mon Sep 17 00:00:00 2001
From: Ivo <Ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 18:10:46 +0200
Subject: [PATCH 1/6] feat: load sqlite files dynamically

---
 src/App.svelte | 117 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 88 insertions(+), 29 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 3c24150..64aa683 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,6 +3,7 @@
   import { Spinner, Alert } from "flowbite-svelte";
   import { Heading, P, A } from "flowbite-svelte";
   import { Select, Input, Label, Helper } from "flowbite-svelte";
+  import { onMount } from "svelte";
 
   import { createDbWorker } from "sql.js-httpvfs";
   import { PowerTable } from "@muonw/powertable";
@@ -49,6 +50,9 @@
   );
   const wasmUrl = new URL("sql.js-httpvfs/dist/sql-wasm.wasm", import.meta.url);
 
+  let sqliteFiles = [];
+  let activeFile = null;
+
   let ptOptions = {
     footerText: false,
     footerFilters: false,
@@ -57,39 +61,73 @@
     parseAs: "unsafe-html",
   };
 
-  let ptInstructs = [
-    { key: "RANK", title: "RANK" },
-    { key: "REFERENCE(ID)", title: "REFERENCE(ID)" },
-    { key: "TARGET(ID)", title: "TARGET(ID)" },
-    // { key: "FORMAT", title: "FORMAT" },
-    { key: "LENGTH", title: "LENGTH" },
-    // { key: "WEIGHTED", title: "WEIGHTED" },
-    { key: "HAMMING-DISTANCE", title: "HAMMING-DISTANCE" },
-    { key: "DISTANCE-Z-SCORE", title: "DISTANCE-Z-SCORE" },
-    { key: "DISTANCE-P-VALUE", title: "DISTANCE-P-VALUE" },
-    { key: "DISTANCE-Z-SCORE(RAND)", title: "DISTANCE-Z-SCORE(RAND)" },
-    { key: "JACCARD-INDEX", title: "JACCARD-INDEX" },
-    { key: "JACCARD-Z-SCORE", title: "JACCARD-Z-SCORE" },
-    { key: "JACCARD-P-VALUE", title: "JACCARD-P-VALUE" },
-    { key: "REFERENCE-VARS", title: "REFERENCE-VARS" },
-    { key: "TARGET-VARS", title: "TARGET-VARS" },
-    { key: "INTERSECT", title: "INTERSECT" },
-    { key: "INTERSECT-RATE(%)", title: "INTERSECT-RATE(%)" },
-    { key: "COMPLETENESS(%)", title: "COMPLETENESS(%)" },
-    { key: "REF-UUID", title: "REF-UUID" },
-    { key: "TAR-UUID", title: "TAR-UUID" },
-    { key: "REF-UUID-URL", title: "REF-UUID-URL", parseAs: "unsafe-html" },
-    { key: "TAR-UUID-URL", title: "TAR-UUID-URL", parseAs: "unsafe-html" },
-  ];
+  let ptInstructs = [];
+
+  function updateInstructs(data) {
+    if (data && data.length) {
+      ptInstructs = Object.keys(data[0]).map((k) => ({ key: k, title: k }));
+    } else {
+      ptInstructs = [];
+    }
+  }
+
+  async function getSqliteFiles() {
+    const apiUrl =
+      "https://api.github.com/repos/CNAG-Biomedical-Informatics/cbi-datahub/contents/sqlite";
+    try {
+      const res = await fetch(apiUrl);
+      if (!res.ok) return [];
+      const data = await res.json();
+      return data
+        .filter(
+          (item) =>
+            item.type === "file" &&
+            (item.name.endsWith(".db") || item.name.endsWith(".sqlite"))
+        )
+        .map((item) => ({
+          name: item.name,
+          url:
+            item.download_url ||
+            `https://raw.githubusercontent.com/CNAG-Biomedical-Informatics/cbi-datahub/main/sqlite/${item.name}`,
+        }));
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
+  }
+
+  async function loadDb(file) {
+    activeFile = file.name;
+    dbUrl = file.url;
+    const tablesData = await queryDb(
+      file.url,
+      "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'"
+    );
+    if (tablesData.result.length) {
+      const table = tablesData.result[0].name;
+      sqlQuery = `SELECT * FROM "${table}" LIMIT 20;`;
+      await runQuery(file.url, sqlQuery);
+    } else {
+      sqlQuery = "";
+      result = [];
+    }
+  }
 
-  async function queryDb() {
+  onMount(async () => {
+    sqliteFiles = await getSqliteFiles();
+    if (sqliteFiles.length) {
+      await loadDb(sqliteFiles[0]);
+    }
+  });
+
+  async function queryDb(url = dbUrl, query = sqlQuery) {
     const worker = await createDbWorker(
       [
         {
           from: "inline",
           config: {
             serverMode: "full",
-            url: dbUrl,
+            url,
             requestChunkSize: Number(pageSize),
           },
         },
@@ -97,7 +135,7 @@
       workerUrl.toString(),
       wasmUrl.toString()
     );
-    const result = await worker.db.query(sqlQuery);
+    const result = await worker.db.query(query);
     const bytesRead = await worker.worker.bytesRead;
     const stats = await worker.worker.getStats();
     return { result, bytesRead, stats };
@@ -113,14 +151,15 @@
   let totalBytes;
   let totalRequests;
 
-  async function runQuery() {
+  async function runQuery(url = dbUrl, query = sqlQuery) {
     result = null;
     querying = true;
     error = false;
-    let queryData = pTime(queryDb)();
+    let queryData = pTime(() => queryDb(url, query))();
     await queryData
       .then((data) => {
         result = data.result;
+        updateInstructs(result);
         timeTaken = queryData.time;
         bytesRead = data.bytesRead;
         totalRequests = data.stats.totalRequests;
@@ -137,6 +176,7 @@
         console.log("Query Error: ", queryError.message);
         console.log(queryError);
         querying = false;
+        updateInstructs([]);
         jsonFile = null;
       });
   }
@@ -174,6 +214,25 @@
       </A>
     </div>
 
+    {#if sqliteFiles.length}
+      <div class="border-b mb-4">
+        <nav class="flex space-x-4" aria-label="Tabs">
+          {#each sqliteFiles as f}
+            <button
+              class={`py-2 px-4 text-sm font-medium border-b-2 ${
+                activeFile === f.name
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500'
+              }`}
+              on:click={() => loadDb(f)}
+            >
+              {f.name}
+            </button>
+          {/each}
+        </nav>
+      </div>
+    {/if}
+
     <div class="p-6">
       <Label class="space-y-2">
         <span>SQLite DB file URL</span>

From 214b72473b00e0d4afacb73d71cd55be266c5985 Mon Sep 17 00:00:00 2001
From: Ivo Leist <ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 18:35:11 +0200
Subject: [PATCH 2/6] dev docs: local setup instructions and common bugs when
 running locally

---
 README.md   | 21 ++++++++++++++++++++-
 docs/dev.md | 21 +++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 docs/dev.md

diff --git a/README.md b/README.md
index 2486f37..c31dbaf 100644
--- a/README.md
+++ b/README.md
@@ -4,4 +4,23 @@
 
 Provide the URL of any SQLite database file and edit the default SQL Query.
 
-[Read more](https://github.com/phiresky/sql.js-httpvfs)
\ No newline at end of file
+[Read more](https://github.com/phiresky/sql.js-httpvfs)
+
+# To run it locally
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/CNAG-Biomedical-Informatics/sql.js-httpvfs-playground.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd sql.js-httpvfs-playground
+   nvm use stable
+   ```
+3. Install the dependencies:
+   ```bash
+   yarn install
+   ```
+4. Start the development server:
+   ```bash
+   yarn dev
+   ```
\ No newline at end of file
diff --git a/docs/dev.md b/docs/dev.md
new file mode 100644
index 0000000..db0f51c
--- /dev/null
+++ b/docs/dev.md
@@ -0,0 +1,21 @@
+
+# To run it locally
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/CNAG-Biomedical-Informatics/sql.js-httpvfs-playground.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd sql.js-httpvfs-playground
+   ```
+3. Install the dependencies:
+   ```bash
+   yarn install
+   ```
+4. Start the development server:
+   ```bash
+   yarn dev
+   ```
+
+# Most frequent bugs when running locally
+- `ReferenceError: fetch is not defined`, make sure you are using Node.js version 18 or higher.
\ No newline at end of file

From e404b6f381611144d0cbfb44c0c7407aec8da816 Mon Sep 17 00:00:00 2001
From: Ivo Leist <ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 18:35:49 +0200
Subject: [PATCH 3/6] removed run it locally from the README

---
 README.md | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/README.md b/README.md
index c31dbaf..489a7ca 100644
--- a/README.md
+++ b/README.md
@@ -5,22 +5,3 @@
 Provide the URL of any SQLite database file and edit the default SQL Query.
 
 [Read more](https://github.com/phiresky/sql.js-httpvfs)
-
-# To run it locally
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/CNAG-Biomedical-Informatics/sql.js-httpvfs-playground.git
-   ```
-2. Navigate to the project directory:
-   ```bash
-   cd sql.js-httpvfs-playground
-   nvm use stable
-   ```
-3. Install the dependencies:
-   ```bash
-   yarn install
-   ```
-4. Start the development server:
-   ```bash
-   yarn dev
-   ```
\ No newline at end of file

From 6e4d57731b9809ea327e116b240c6daaa1675a0c Mon Sep 17 00:00:00 2001
From: Ivo Leist <ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 18:46:59 +0200
Subject: [PATCH 4/6] fix by codex introduced regression that broke being able
 to click links in the table

---
 src/App.svelte | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 64aa683..8542166 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -36,8 +36,8 @@
   // let dbUrl =
   // "https://cnag-biomedical-informatics.github.io/sql.js-httpvfs-playground/db/tcga.db";
   let dbUrl =
-    "https://raw.githubusercontent.com/CNAG-Biomedical-Informatics/cbi-datahub/refs/heads/main/sqlite/tcga.db"
-  
+    "https://raw.githubusercontent.com/CNAG-Biomedical-Informatics/cbi-datahub/refs/heads/main/sqlite/tcga.db";
+
   import Prism from "prismjs";
   import "prismjs/components/prism-sql";
 
@@ -64,11 +64,14 @@
   let ptInstructs = [];
 
   function updateInstructs(data) {
-    if (data && data.length) {
-      ptInstructs = Object.keys(data[0]).map((k) => ({ key: k, title: k }));
-    } else {
-      ptInstructs = [];
+    if (Array.isArray(data) && data.length > 0) {
+      ptInstructs = Object.keys(data[0]).map((key) => ({
+        key,
+        title: key,
+        ...(key.includes("URL") ? { parseAs: "unsafe-html" } : {}),
+      }));
     }
+    return ptInstructs;
   }
 
   async function getSqliteFiles() {
@@ -221,8 +224,8 @@
             <button
               class={`py-2 px-4 text-sm font-medium border-b-2 ${
                 activeFile === f.name
-                  ? 'border-blue-600 text-blue-600'
-                  : 'border-transparent text-gray-500'
+                  ? "border-blue-600 text-blue-600"
+                  : "border-transparent text-gray-500"
               }`}
               on:click={() => loadDb(f)}
             >

From 221c317f0252494e3d62b77260436c48a14b8c5c Mon Sep 17 00:00:00 2001
From: Ivo Leist <ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 19:10:42 +0200
Subject: [PATCH 5/6] feat: update SQL query logic to include custom WHERE
 clauses for the tgca_table and omim_table. Ensure the SQL query is updated in
 the codeJar based on the selected table

---
 src/App.svelte | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 8542166..cd8a2f2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -31,7 +31,7 @@
     { value: "16384", name: "16384" },
     { value: "32768", name: "32768" },
   ];
-  let sqlQuery = `SELECT * FROM tcga_table WHERE "TAR-UUID" = '0011a67b-1ba9-4a32-a6b8-7850759a38cf';`;
+  let sqlQuery = `SELECT * FROM tcga_table LIMIT 20';`;
   // let dbUrl = "https://nishad.github.io/sql.js-httpvfs-playground/db/imdb-titles-100000_1024_indexed.db";
   // let dbUrl =
   // "https://cnag-biomedical-informatics.github.io/sql.js-httpvfs-playground/db/tcga.db";
@@ -100,16 +100,29 @@
   }
 
   async function loadDb(file) {
-    activeFile = file.name;
-    dbUrl = file.url;
+    const dbUrl = file.url;
+
+    // Map of table ➔ custom WHERE clauses
+    const exampleQueries = {
+      tcga_table: `"TAR-UUID" = '0011a67b-1ba9-4a32-a6b8-7850759a38cf'`,
+      omim_table: `"TAR-UUID" = '100100'`,
+    };
+
     const tablesData = await queryDb(
-      file.url,
+      dbUrl,
       "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'"
     );
     if (tablesData.result.length) {
       const table = tablesData.result[0].name;
-      sqlQuery = `SELECT * FROM "${table}" LIMIT 20;`;
-      await runQuery(file.url, sqlQuery);
+      console.log("Selected table: ", table);
+
+      // Override if this table has a special filter
+      if (Object.keys(exampleQueries).includes(table)) {
+        console.log("Using example query for table:", table);
+        sqlQuery = `SELECT * FROM "${table}" WHERE ${exampleQueries[table]};`;
+      }
+
+      await runQuery(dbUrl, sqlQuery);
     } else {
       sqlQuery = "";
       result = [];

From 78a57327319deed8243451e159560b9b110bebd9 Mon Sep 17 00:00:00 2001
From: Ivo Leist <ivo.leist@googlemail.com>
Date: Tue, 1 Jul 2025 19:16:17 +0200
Subject: [PATCH 6/6] attributed nishad's repository

---
 src/App.svelte | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index cd8a2f2..846cfb8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -205,17 +205,10 @@
         >sql.js-httpvfs Playground</Heading
       >
       <P class="my-4 text-gray-500">
-        <code>sql.js-httpvfs</code> is a fork of and wrapper around sql.js to provide
-        a read-only HTTP-Range-request based virtual file system for SQLite. It allows
-        hosting an SQLite database on a static file hoster and querying that database
-        from the browser without fully downloading it.</P
-      >
-      <P class="mb-4"
-        >Provide the URL of any SQLite database file and edit the default SQL
-        Query.</P
-      >
-      <A href="https://github.com/phiresky/sql.js-httpvfs"
-        >Read more
+        This is a fork of nishad's sql.js-httpvfs playground
+      </P>
+      <A href="https://github.com/nishad/sql.js-httpvfs-playground"
+        >Check it out here:
         <svg
           class="ml-1 w-6 h-6"
           fill="currentColor"
@@ -249,7 +242,7 @@
       </div>
     {/if}
 
-    <div class="p-6">
+    <!-- <div class="p-6">
       <Label class="space-y-2">
         <span>SQLite DB file URL</span>
         <Input type="url" placeholder="" size="md" bind:value={dbUrl} />
@@ -258,7 +251,7 @@
         >Select page size
         <Select class="mt-2" items={pageSizes} bind:value={pageSize} />
       </Label>
-    </div>
+    </div> -->
     <div class="p-6">
       <Label class="space-y-2">
         <span>Edit SQL Query</span>