From 0de140f8878dc75de19ac9c107b6cd3413428c63 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 21 Feb 2025 11:29:50 +0100
Subject: [PATCH 1/7] adding query chache functionality

---
 src/components/DataQuery.vue |  44 ++++++-
 src/components/queryPod.ts   | 220 ++++++++++++++++++++++++++++++++++-
 2 files changed, 255 insertions(+), 9 deletions(-)

diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue
index 9340fd4..fc79044 100644
--- a/src/components/DataQuery.vue
+++ b/src/components/DataQuery.vue
@@ -2,6 +2,9 @@
   <div class="title-container">
     <span>Data Query</span>
   </div>
+  <div class="pod-chooseContainer">
+    <PodRegistration @pod-selected="handlePodSelected" />
+  </div>
   <div class="general-container">
     <!-- Left Navigation Bar -->
     <div class="nav-container">
@@ -135,8 +138,14 @@
 
 <script>
 // import YASGUI from '@triply/yasgui/build/yasgui.min.js'
+import { currentWebId, getPodURLs } from "./login";
+import { ensureCacheContainer, createQueriesTTL, uploadQueryFile, uploadSparqlJson } from "./queryPod";
+import PodRegistration from "./PodRegistration.vue";
 
 export default {
+  components: {
+    PodRegistration,
+  },
   data() {
     return {
       currentPod: "",
@@ -169,6 +178,7 @@ export default {
       },
       saveQuery: false,
       previousQueries: [],
+      cachePath: "",
     };
   },
   methods: {
@@ -178,13 +188,11 @@ export default {
         title: item.url,
       }
     },
-
     itemPropsExampleQueries (item2) {
       return {
         title: item2.name,
       }
     },
-
     isValidSPARQL(query) {
       // Check if the query starts with a valid SPARQL keyword
       const sparqlRegex = /^(SELECT|ASK|CONSTRUCT|DESCRIBE|PREFIX|BASE)\s+/i;
@@ -210,24 +218,35 @@ export default {
       if (!angleBrackets) {
         return false;
       }
-
       return true;
     },
     clearQueryInput() {
       this.currentQuery.query = "";
     },
-    executeQuery() {
+
+    // method to obtain the current WebID and PodURL
+    async getPodURL() {
+      this.webId = currentWebId(); // fetches user webID from login.ts
+      this.podURLs = await getPodURLs(); // calls async function to get Pod URLs
+    },
+    /* Takes in the emitted value from PodRegistration.vue */
+    handlePodSelected(selectedPod) {
+      this.currentPod = selectedPod;
+    },
+
+    async executeQuery() {
       if (this.currentQuery.query.trim() === "") {
         alert("Please enter a SPARQL query before executing.");
         return;
       }
-      alert(`Executing query: \n${this.currentQuery.query}`);
+      // alert(`Executing query: \n${this.currentQuery.query}`);
       
       // TODO: execute query using comunica here
 
 
       if (this.saveQuery) {
-        //TODO: save executed query to Pod if 
+        this.cachePath = await ensureCacheContainer(this.pod);
+
       }
       
       
@@ -236,6 +255,8 @@ export default {
       
     },
 
+
+
     // TODO: load past queries for display from connected Pod
     loadQuery(query) {
       this.currentQuery.query = query;
@@ -266,6 +287,11 @@ export default {
       this.style.height = this.scrollHeight + "px";
     });
 
+    setTimeout(() => {
+      this.getPodURL();
+      // console.log(this.podURLs)
+    }, 200);
+
     //TODO: integrate yasgui
     // const container = document.getElementById('yasgui-container');
     // const yasguiInstance = new YASGUI(container, {
@@ -308,6 +334,12 @@ body {
   padding-right: 20px;
 }
 
+/* Container pod-chooser bar */
+.pod-chooseContainer {
+  background: #445560;
+  border-radius: 8px;
+}
+
 /* Whole nav and query container */
 .general-container {
   background-color: #445560;
diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts
index b380584..c186e6a 100644
--- a/src/components/queryPod.ts
+++ b/src/components/queryPod.ts
@@ -1,6 +1,19 @@
 import { Session } from "@inrupt/solid-client-authn-browser";
 import { QueryEngine } from '@comunica/query-sparql-link-traversal-solid';
 import { Bindings } from '@comunica/types';
+import {
+  getSolidDataset,
+  saveSolidDatasetAt,
+  createSolidDataset,
+  createContainerAt,
+  saveFileInContainer,
+  createThing,
+  buildThing,
+  setThing,
+  Thing,
+  SolidDataset,
+} from "@inrupt/solid-client";
+import { fetch } from "@inrupt/solid-client-authn-browser";
 
 const myEngine = new QueryEngine();
 
@@ -10,8 +23,7 @@ const myEngine = new QueryEngine();
  * @param webid The webID URL of the current user.
  * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found.
 */
-
-async function executeQuery(source: string, session: Session): Promise<Bindings[] | null> {
+export async function executeQuery(source: string, session: Session): Promise<Bindings[] | null> {
   try {
     const bindingsStream = await myEngine.queryBindings(`
       SELECT ?o WHERE {
@@ -25,7 +37,209 @@ async function executeQuery(source: string, session: Session): Promise<Bindings[
   } catch (err) {
     return null;
   }
+}
+
+/**
+ * Generates a unique 6-character hash using alphanumeric characters.
+ * @param length - Optional length for the hash (default is 6)
+ * @returns A string representing the hash.
+ */
+function generateHash(length = 6): string {
+  const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let hash = "";
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    hash += charset.charAt(randomIndex);
+  }
+  return hash;
+}
+
+/**
+ * Ensures that a container exists at the given URL.
+ * If the container does not exist, it creates one.
+ *
+ * @param podUrl - The URL of the container (should end with a slash, e.g., "https://pod.example.com/").
+ * @returns the query cache directory path.
+ */
+export async function ensureCacheContainer(podUrl: string): Promise<string> {
+  const cacheUrl = podUrl + "querycache/";
+  console.log(`Query Cache container exists at ${cacheUrl}`);
+  try {
+    // Try to retrieve the dataset (container)
+    await getSolidDataset(cacheUrl, { fetch });
+    console.log(`Query Cache container exists at ${cacheUrl}`);
+    return cacheUrl;
+  } catch (error) {
+    // If not found, create the container
+    // await createContainerAt(cacheUrl, { fetch });
+    console.log(`Query Cache container was created at ${cacheUrl}`);
+    return cacheUrl;
+  }
+}
+
+
+/**
+ * Creates and uploads a Turtle file (Queries.ttl) into the container.
+ * The function takes an array of source URLs and formats them into Turtle statements.
+ *
+ * Each source is converted into an entry like:
+ *
+ *     <#hash1> a Query;
+ *         date "date";
+ *         query "hash1.rq";
+ *         results "hash1.sparqljson";
+ *         Source "<url>".
+ *
+ * @param containerUrl - The container URL (should end with a slash).
+ * @param sources - An array of source URLs.
+ * @param fileName - The file name to use (default: "queries.ttl").
+ * @param fetch - The authenticated fetch function.
+ * @returns The hash of the query added to queries.ttl.
+ */
+export async function createQueriesTTL(
+  containerUrl: string,
+  sources: string[],
+  fileName = "queries.ttl",
+  fetch
+): Promise<string> {
   
+  // Initiatize query cache variables
+  const currentDate: Date = new Date();
+  const isoDate: string = currentDate.toISOString();
+  const hash = "#" + generateHash();
+  const queryFile = `${hash}.rq`;
+  const queryResult = `${hash}.sparqljson`;
+  let querySources = '';
+  sources.forEach((source, index) => {
+    if (index < 1) {
+      querySources += `<${source}>`;
+    } else {
+      querySources += `, <${source}>`;
+    }
+  });
+
+  // Create a Thing for the new query cache
+  const subjectUri = `${containerUrl + fileName}#${hash}`;
+  let newQueryThing: Thing = createThing({ url: subjectUri });
+  newQueryThing = buildThing(newQueryThing)
+    // Specify the query hash.
+    .addStringNoLocale("http://www.w3.org/1999/02/22-rdf-syntax-ns#type", "Query")
+    // Add date of query execution.
+    .addStringNoLocale("http://purl.org/dc/terms/created", isoDate)
+    // Add the query file name.
+    .addStringNoLocale("query", queryFile)
+    // Add the results file name.
+    .addStringNoLocale("results", queryResult)
+    // Add the source URLs.
+    .addStringNoLocale("Source", querySources)
+    .build();
+
+  // Saves RDF data as queries.ttl
+  let dataset: SolidDataset, message: string;
+  try {
+    // Try to retrieve the dataset (container) and save updated dataset
+    dataset = await getSolidDataset(containerUrl + fileName, { fetch });
+    message = `UPDATED queries.ttl which now includes: ${hash}`;
+  } catch (error) {
+    dataset = createSolidDataset();
+    message = `CREATED queries.ttl with first query: ${hash}`;
+  }
+
+  const updatedDataset = setThing(dataset, newQueryThing);
+  await saveSolidDatasetAt(containerUrl + fileName, updatedDataset, { fetch });
+  console.log(message);
+  return hash;
+}
+
+/**
+ * Creates and uploads a SPARQL query file (e.g., hash1.rq) into the container.
+ *
+ * The provided query string should be formatted as in the example:
+ *
+ *     PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+ *     PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+ *     SELECT ?name ?email
+ *     WHERE {
+ *         ?person rdf:type foaf:Person.
+ *         ?person foaf:name ?name.
+ *         OPTIONAL { ?person foaf:mbox ?email. }
+ *     }
+ *
+ * @param containerUrl - The container URL (should end with a slash).
+ * @param query - The SPARQL query as a string.
+ * @param hashName - The hash name to use to name file (e.g., "#hash1").
+ * @param fetch - The authenticated fetch function.
+ * @returns The URL of the uploaded file.
+ */
+export async function uploadQueryFile(
+  containerUrl: string,
+  query: string,
+  hashName: string,
+  fetch: typeof window.fetch
+): Promise<string> {
+
+  const fileName = hashName + ".rq";
+  const blob = new Blob([query], { type: "application/sparql-query" });
+
+  try {
+    const savedFile = await saveFileInContainer(containerUrl, blob, {
+      slug: fileName,
+      contentType: "application/sparql-query",
+      fetch,
+    });
+    console.log(`Uploaded ${fileName} to ${savedFile.internal_resourceInfo.sourceIri}`);
+    return savedFile.internal_resourceInfo.sourceIri;
+  } catch (error) {
+    console.error(`Error uploading ${fileName}:`, error);
+    throw error;
+  }
+}
+
+
+/**
+ * Creates and uploads a JSON file (e.g., hash1.sparqljson) into the container.
+ *
+ * The input should be a JSON string formatted like:
+ *
+ * {
+ *   "head": { "vars": ["name", "email"] },
+ *   "results": {
+ *     "bindings": [
+ *       {
+ *         "name": {"type": "literal", "value": "Alice"},
+ *         "email": {"type": "literal", "value": "alice@example.org"}
+ *       },
+ *       { ... }
+ *     ]
+ *   }
+ * }
+ *
+ * @param containerUrl - The container URL (should end with a slash).
+ * @param jsonString - The JSON string to upload.
+ * @param hashName - The hash name to use to name file (e.g., "#hash1").
+ * @param fetch - The authenticated fetch function.
+ * @returns The URL of the uploaded file.
+ */
+export async function uploadSparqlJson(
+  containerUrl: string,
+  jsonString: string,
+  hashName: string,
+  fetch: typeof window.fetch
+): Promise<string> {
+  const fileName = hashName + ".sparqljson"
+  const blob = new Blob([jsonString], { type: "application/json" });
+
+  try {
+    const savedFile = await saveFileInContainer(containerUrl, blob, {
+      slug: fileName,
+      contentType: "application/json",
+      fetch,
+    });
+    console.log(`Uploaded ${fileName} to ${savedFile.internal_resourceInfo.sourceIri}`);
+    return savedFile.internal_resourceInfo.sourceIri;
+  } catch (error) {
+    console.error(`Error uploading ${fileName}:`, error);
+    throw error;
+  }
 }
 
-export { executeQuery };
\ No newline at end of file

From aeb903c997336546fe26a860ea20893a56655619 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 21 Feb 2025 12:40:02 +0100
Subject: [PATCH 2/7] added query saving methodology

---
 src/components/DataQuery.vue       | 18 ++++++++++++------
 src/components/PodRegistration.vue |  2 +-
 src/components/PodUpload.vue       |  5 ++---
 src/components/queryPod.ts         | 24 ++++++++++--------------
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue
index fc79044..7e4469e 100644
--- a/src/components/DataQuery.vue
+++ b/src/components/DataQuery.vue
@@ -141,6 +141,7 @@
 import { currentWebId, getPodURLs } from "./login";
 import { ensureCacheContainer, createQueriesTTL, uploadQueryFile, uploadSparqlJson } from "./queryPod";
 import PodRegistration from "./PodRegistration.vue";
+import { ThingExpectedError } from "@inrupt/solid-client";
 
 export default {
   components: {
@@ -177,8 +178,10 @@ export default {
         query: '', // The current SPARQL query input
       },
       saveQuery: false,
-      previousQueries: [],
       cachePath: "",
+      currHash: "",
+      queryFile: "",
+      resultsFile: "",
     };
   },
   methods: {
@@ -244,15 +247,18 @@ export default {
       // TODO: execute query using comunica here
 
 
+      // Here, the app will save the query and results using a hash
       if (this.saveQuery) {
-        this.cachePath = await ensureCacheContainer(this.pod);
+        this.cachePath = await ensureCacheContainer(this.currentPod);
 
+        // adds query to queries.ttl
+        this.currHash = await createQueriesTTL(this.cachePath, this.currentQuery.sources);
+        // creates #hash.rq file containing the executed query
+        this.queryFile = await uploadQueryFile(this.cachePath, this.currentQuery.query, this.currHash);
+        // creates #hash.sparqljson file with query results
+        // TODO: this.resultsFile = await uploadSparqlJson(this.cachePath, ComunicaResult??, this.currHash);
       }
       
-      
-      // Save the query to the list of previous queries
-      this.previousQueries.unshift(this.currentQuery.query);
-      
     },
 
 
diff --git a/src/components/PodRegistration.vue b/src/components/PodRegistration.vue
index 3eca6e0..c4a4a23 100644
--- a/src/components/PodRegistration.vue
+++ b/src/components/PodRegistration.vue
@@ -164,7 +164,7 @@ export default {
     selectPod() {
       const selectedPod = this.currentPod;
       this.$emit("pod-selected", selectedPod);
-      console.log("Selected pod: " + selectedPod);
+      // console.log("Selected pod: " + selectedPod);
       this.successfulSelection();
     },
   },
diff --git a/src/components/PodUpload.vue b/src/components/PodUpload.vue
index 7c32c45..54032de 100644
--- a/src/components/PodUpload.vue
+++ b/src/components/PodUpload.vue
@@ -74,7 +74,7 @@
         </form>
 
         <!-- Alert for if session is timed out -->
-        <div v-if="this.pod === 'Error: probably not logged in'">
+        <div v-if="this.currentPod === 'Error: probably not logged in'">
           <v-alert
             class="mx-auto"
             title="There was an error with the file(s) upload!"
@@ -154,7 +154,6 @@ export default {
     async getPodURL() {
       this.webId = currentWebId(); // fetches user webID from login.ts
       this.podURLs = await getPodURLs(); // calls async function to get Pod URLs
-      this.pod = this.selectedPod;
     },
 
     /*
@@ -173,7 +172,7 @@ export default {
     Results in update of the uploadSuccess variable if files do have names.
     */
     async submitUpload() {
-      this.filesUploaded = await handleFiles(this.files, this.pod);
+      this.filesUploaded = await handleFiles(this.files, this.currentPod);
       this.uploadDone = uploadSuccess(this.filesUploaded);
     },
 
diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts
index c186e6a..4337bcb 100644
--- a/src/components/queryPod.ts
+++ b/src/components/queryPod.ts
@@ -71,7 +71,7 @@ export async function ensureCacheContainer(podUrl: string): Promise<string> {
     return cacheUrl;
   } catch (error) {
     // If not found, create the container
-    // await createContainerAt(cacheUrl, { fetch });
+    await createContainerAt(cacheUrl, { fetch });
     console.log(`Query Cache container was created at ${cacheUrl}`);
     return cacheUrl;
   }
@@ -93,14 +93,12 @@ export async function ensureCacheContainer(podUrl: string): Promise<string> {
  * @param containerUrl - The container URL (should end with a slash).
  * @param sources - An array of source URLs.
  * @param fileName - The file name to use (default: "queries.ttl").
- * @param fetch - The authenticated fetch function.
  * @returns The hash of the query added to queries.ttl.
  */
 export async function createQueriesTTL(
   containerUrl: string,
   sources: string[],
-  fileName = "queries.ttl",
-  fetch
+  fileName = "queries.ttl"
 ): Promise<string> {
   
   // Initiatize query cache variables
@@ -112,14 +110,14 @@ export async function createQueriesTTL(
   let querySources = '';
   sources.forEach((source, index) => {
     if (index < 1) {
-      querySources += `<${source}>`;
+      querySources += `${source}`;
     } else {
-      querySources += `, <${source}>`;
+      querySources += `, ${source}`;
     }
   });
 
   // Create a Thing for the new query cache
-  const subjectUri = `${containerUrl + fileName}#${hash}`;
+  const subjectUri = `${containerUrl + fileName}${hash}`;
   let newQueryThing: Thing = createThing({ url: subjectUri });
   newQueryThing = buildThing(newQueryThing)
     // Specify the query hash.
@@ -127,11 +125,11 @@ export async function createQueriesTTL(
     // Add date of query execution.
     .addStringNoLocale("http://purl.org/dc/terms/created", isoDate)
     // Add the query file name.
-    .addStringNoLocale("query", queryFile)
+    .addStringNoLocale("http://example.com/terms#query", queryFile)
     // Add the results file name.
-    .addStringNoLocale("results", queryResult)
+    .addStringNoLocale("http://example.com/terms#results", queryResult)
     // Add the source URLs.
-    .addStringNoLocale("Source", querySources)
+    .addStringNoLocale("http://example.com/terms#sources", querySources)
     .build();
 
   // Saves RDF data as queries.ttl
@@ -174,8 +172,7 @@ export async function createQueriesTTL(
 export async function uploadQueryFile(
   containerUrl: string,
   query: string,
-  hashName: string,
-  fetch: typeof window.fetch
+  hashName: string
 ): Promise<string> {
 
   const fileName = hashName + ".rq";
@@ -223,8 +220,7 @@ export async function uploadQueryFile(
 export async function uploadSparqlJson(
   containerUrl: string,
   jsonString: string,
-  hashName: string,
-  fetch: typeof window.fetch
+  hashName: string
 ): Promise<string> {
   const fileName = hashName + ".sparqljson"
   const blob = new Blob([jsonString], { type: "application/json" });

From adc846df4461686489f1d653e3bf1e9fa6daa117 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 21 Feb 2025 13:47:12 +0100
Subject: [PATCH 3/7] start of query cache display

---
 src/components/DataQuery.vue | 140 +++++++++++++++++++++++------------
 src/components/queryPod.ts   | 121 ++++++++++++++++++++++++++++++
 2 files changed, 213 insertions(+), 48 deletions(-)

diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue
index 7e4469e..db82f2c 100644
--- a/src/components/DataQuery.vue
+++ b/src/components/DataQuery.vue
@@ -17,7 +17,7 @@
           </button>
         </li>
         <li>
-          <button @click="currentView = 'previousQueries'">Past Queries</button>
+          <button @click="currentView = 'previousQueries', loadCache">Past Queries</button>
         </li>
       </ul>
     </div>
@@ -77,7 +77,9 @@
             <p
               class="valid-text"
               :class="
-                isValidSPARQL(currentQuery.query) ? 'text-green-600' : 'text-red-600'
+                isValidSPARQL(currentQuery.query)
+                  ? 'text-green-600'
+                  : 'text-red-600'
               "
             >
               {{
@@ -115,21 +117,15 @@
         <ul>
           <div class="top-container">
             <span>Past Queries</span>
-            <!-- TODO: Display past queries here -->
+            <section>
+              <h2>Query File</h2>
+              <pre>{{ queries }}</pre>
+            </section>
+            <!-- <section>
+              <h2>SPARQL JSON Results</h2>
+              <pre>{{ formattedJsonResults }}</pre>
+            </section> -->
           </div>
-          <li
-            v-for="(query, index) in previousQueries"
-            :key="index"
-            class="mb-2 border-b pb-2"
-          >
-            <p>{{ query }}</p>
-            <button
-              class="py-1 px-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-              @click="loadQuery(query)"
-            >
-              Load Query
-            </button>
-          </li>
         </ul>
       </div>
     </div>
@@ -139,9 +135,20 @@
 <script>
 // import YASGUI from '@triply/yasgui/build/yasgui.min.js'
 import { currentWebId, getPodURLs } from "./login";
-import { ensureCacheContainer, createQueriesTTL, uploadQueryFile, uploadSparqlJson } from "./queryPod";
+import {
+  ensureCacheContainer,
+  createQueriesTTL,
+  uploadQueryFile,
+  uploadSparqlJson,
+  getQueriesTtl,
+  QueryEntry,
+  fetchQueryFileData,
+  fetchSparqlJsonFileData,
+  getCachedQueries,
+} from "./queryPod";
 import PodRegistration from "./PodRegistration.vue";
 import { ThingExpectedError } from "@inrupt/solid-client";
+import { ref, onMounted, computed } from "vue";
 
 export default {
   components: {
@@ -153,48 +160,51 @@ export default {
       currentView: "newQuery", // Tracks the active view: 'newQuery' or 'previousQueries'
       exampleQueries: [
         {
-          name: 'Example 1',
-          sources: ['<https://sparql.omabrowser.org/sparql>'],
-          query: 'SELECT DISTINCT ?p WHERE {\n\t?s ?p ?o .\n}LIMIT 10',
-        }
+          name: "Example 1",
+          sources: ["<https://sparql.omabrowser.org/sparql>"],
+          query: "SELECT DISTINCT ?p WHERE {\n\t?s ?p ?o .\n}LIMIT 10",
+        },
       ],
       possibleSources: [
-        '<https://www.bgee.org/sparql/>',
-        '<https://glyconnect.expasy.org/sparql>',
-        '<https://hamap.expasy.org/sparql/>',
-        '<https://rdf.metanetx.org/sparql/>',
-        '<https://sparql.omabrowser.org/sparql>',
-        '<https://sparql.orthodb.org/sparql/>',
-        '<https://sparql.rhea-db.org/sparql>',
-        '<https://sparql.swisslipids.org/sparql/>',
-        '<https://biosoda.unil.ch/emi/sparql/>',
-        '<https://sparql.uniprot.org/sparql/>',
-        '<https://sparql.nextprot.org/sparql>',
-        '<https://query.wikidata.org/sparql>',
+        "<https://www.bgee.org/sparql/>",
+        "<https://glyconnect.expasy.org/sparql>",
+        "<https://hamap.expasy.org/sparql/>",
+        "<https://rdf.metanetx.org/sparql/>",
+        "<https://sparql.omabrowser.org/sparql>",
+        "<https://sparql.orthodb.org/sparql/>",
+        "<https://sparql.rhea-db.org/sparql>",
+        "<https://sparql.swisslipids.org/sparql/>",
+        "<https://biosoda.unil.ch/emi/sparql/>",
+        "<https://sparql.uniprot.org/sparql/>",
+        "<https://sparql.nextprot.org/sparql>",
+        "<https://query.wikidata.org/sparql>",
       ],
       currentQuery: {
-        name: '',
+        name: "",
         sources: [],
-        query: '', // The current SPARQL query input
+        query: "", // The current SPARQL query input
       },
       saveQuery: false,
       cachePath: "",
       currHash: "",
       queryFile: "",
       resultsFile: "",
+      queriesCacheExists: false,
+      cachedQueries: [],
+      queries: [],
     };
   },
   methods: {
     // for the sources autocomplete list
-    itemPropsSources (item) {
+    itemPropsSources(item) {
       return {
         title: item.url,
-      }
+      };
     },
-    itemPropsExampleQueries (item2) {
+    itemPropsExampleQueries(item2) {
       return {
         title: item2.name,
-      }
+      };
     },
     isValidSPARQL(query) {
       // Check if the query starts with a valid SPARQL keyword
@@ -243,30 +253,51 @@ export default {
         return;
       }
       // alert(`Executing query: \n${this.currentQuery.query}`);
-      
-      // TODO: execute query using comunica here
 
+      // TODO: execute query using comunica here
 
       // Here, the app will save the query and results using a hash
       if (this.saveQuery) {
         this.cachePath = await ensureCacheContainer(this.currentPod);
 
         // adds query to queries.ttl
-        this.currHash = await createQueriesTTL(this.cachePath, this.currentQuery.sources);
+        this.currHash = await createQueriesTTL(
+          this.cachePath,
+          this.currentQuery.sources
+        );
         // creates #hash.rq file containing the executed query
-        this.queryFile = await uploadQueryFile(this.cachePath, this.currentQuery.query, this.currHash);
+        this.queryFile = await uploadQueryFile(
+          this.cachePath,
+          this.currentQuery.query,
+          this.currHash
+        );
         // creates #hash.sparqljson file with query results
         // TODO: this.resultsFile = await uploadSparqlJson(this.cachePath, ComunicaResult??, this.currHash);
       }
-      
     },
 
+    // TODO: load past queries for display from connected Pod -- broken currently but not far off
+    async loadCache() {
+      this.queriesCacheExists = await getQueriesTtl(
+        this.currentPod + "querycache/"
+      );
+      if (this.queriesCacheExists) {
+        this.cachedQueries = await getCachedQueries(
+          this.currentPod + "querycache/queries.ttl"
+        );
 
+        this.cachedQueries.forEach((query, index) => {
+          this.queries.push(fetchQueryFileData(this.currentPod + "querycache/" + query.queryFile));
+        });
+        console.log(this.queries);
 
-    // TODO: load past queries for display from connected Pod
-    loadQuery(query) {
-      this.currentQuery.query = query;
-      this.currentView = "newQuery";
+        // jsonResults.value = await fetchSparqlJsonFileData(resultsFileUrl);
+        // const formattedJsonResults = computed(() => {
+        //   return jsonResults.value
+        //     ? JSON.stringify(jsonResults.value, null, 2)
+        //     : "Loading...";
+        // });
+      }
     },
   },
   mounted() {
@@ -489,4 +520,17 @@ body {
   margin-top: 10px;
   display: flex;
 }
+
+/* Past queries data */
+pre {
+  background-color: #f9f9f9;
+  padding: 1em;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+section {
+  margin-bottom: 1.5em;
+}
 </style>
diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts
index 4337bcb..c3adedd 100644
--- a/src/components/queryPod.ts
+++ b/src/components/queryPod.ts
@@ -11,7 +11,10 @@ import {
   buildThing,
   setThing,
   Thing,
+  getThingAll,
+  getStringNoLocale,
   SolidDataset,
+  getFile,
 } from "@inrupt/solid-client";
 import { fetch } from "@inrupt/solid-client-authn-browser";
 
@@ -239,3 +242,121 @@ export async function uploadSparqlJson(
   }
 }
 
+/**
+ * Determines if there is are cached queries in the pod.
+ *
+ * @param containerUrl - The container URL (should end with a slash).
+ * @returns boolean representing if a cache is present.
+ */
+export async function getQueriesTtl(
+  containerUrl: string,
+): Promise<boolean> {
+  try {
+    // Try to retrieve the dataset (container) and save updated dataset
+    await getSolidDataset(containerUrl + "queries.ttl", { fetch });
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export interface QueryEntry {
+  hash: string;
+  queryFile: string;
+  resultsFile: string;
+  source: string;
+  created: string;
+}
+
+/**
+ * Retrieves all query entries from a Queries.ttl file.
+ *
+ * It loads the dataset, iterates over all Things, and for each Thing with an RDF type "Query"
+ * (stored as a string literal on the predicate http://www.w3.org/1999/02/22-rdf-syntax-ns#type),
+ * it extracts:
+ *
+ * - The hash from the Thing’s URL fragment.
+ * - The query file name from http://example.com/ns#query.
+ * - The results file name from http://example.com/ns#results.
+ * - The source URL from http://example.com/ns#Source.
+ * - The created date from http://purl.org/dc/terms/created.
+ *
+ * @param ttlFileUrl - The URL of the Queries.ttl file.
+ * @returns An array of QueryEntry objects.
+ */
+export async function getCachedQueries(
+  ttlFileUrl: string
+): Promise<QueryEntry[]> {
+  // Load the dataset from the TTL file.
+  const dataset: SolidDataset = await getSolidDataset(ttlFileUrl, { fetch });
+  const things: Thing[] = getThingAll(dataset);
+  const queryEntries: QueryEntry[] = [];
+
+  things.forEach((thing) => {
+    // Check if the Thing has an RDF type of "Query".
+    const typeValue = getStringNoLocale(
+      thing,
+      "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+    );
+    if (typeValue !== "Query") {
+      return;
+    }
+
+    // Extract the hash from the Thing’s URL fragment.
+    const thingUrl = thing.url;
+    const hash = thingUrl.includes("#") ? thingUrl.split("#")[1] : "";
+
+    // Extract additional properties using their full predicate IRIs.
+    const queryFile =
+      getStringNoLocale(thing, "http://example.com/ns#query") || "";
+    const resultsFile =
+      getStringNoLocale(thing, "http://example.com/ns#results") || "";
+    const source =
+      getStringNoLocale(thing, "http://example.com/ns#Source") || "";
+    const created =
+      getStringNoLocale(thing, "http://purl.org/dc/terms/created") || "";
+
+    queryEntries.push({
+      hash,
+      queryFile,
+      resultsFile,
+      source,
+      created,
+    });
+  });
+
+  return queryEntries;
+}
+
+/**
+ * Fetches a SPARQL query file (e.g. a "#hash.rq" file) from the given URL and returns its text content.
+ *
+ * @param fileUrl - The URL of the SPARQL query file.
+ * @returns A promise that resolves to the text content of the query file.
+ */
+export async function fetchQueryFileData(
+  fileUrl: string
+): Promise<string> {
+  const file = await getFile(fileUrl, { fetch });
+  const textContent = await file.text();
+  return textContent;
+}
+
+/**
+ * Fetches a SPARQL JSON results file (e.g. a "#hash.sparqljson" file) from the given URL and returns its parsed JSON.
+ *
+ * @param fileUrl - The URL of the SPARQL JSON results file.
+ * @returns A promise that resolves to the parsed JSON object.
+ */
+export async function fetchSparqlJsonFileData(
+  fileUrl: string
+): Promise<any> {
+  const file = await getFile(fileUrl, { fetch });
+  const textContent = await file.text();
+  try {
+    const jsonData = JSON.parse(textContent);
+    return jsonData;
+  } catch (error) {
+    throw new Error(`Error parsing JSON from file at ${fileUrl}: ${error}`);
+  }
+}
\ No newline at end of file

From d7cd6e82d7017b55cd7e2b1a89094445a8e2b4e9 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Wed, 5 Mar 2025 17:26:45 +0100
Subject: [PATCH 4/7] added comunica querying within the query component and
 saving results to json file.

---
 src/components/DataQuery.vue |  21 ++---
 src/components/queryPod.ts   | 160 ++++++++++++++++++++++++++---------
 2 files changed, 133 insertions(+), 48 deletions(-)

diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue
index db82f2c..dd7b8d7 100644
--- a/src/components/DataQuery.vue
+++ b/src/components/DataQuery.vue
@@ -91,7 +91,7 @@
           </li>
           <!-- execute query -->
           <div class="bottom-container">
-            <button class="execute-button" @click="executeQuery">
+            <button class="execute-button" @click="runExecuteQuery">
               Execute Query
             </button>
             <v-checkbox
@@ -145,6 +145,7 @@ import {
   fetchQueryFileData,
   fetchSparqlJsonFileData,
   getCachedQueries,
+  executeQuery,
 } from "./queryPod";
 import PodRegistration from "./PodRegistration.vue";
 import { ThingExpectedError } from "@inrupt/solid-client";
@@ -161,7 +162,7 @@ export default {
       exampleQueries: [
         {
           name: "Example 1",
-          sources: ["<https://sparql.omabrowser.org/sparql>"],
+          sources: ["<https://sparql.rhea-db.org/sparql/>"],
           query: "SELECT DISTINCT ?p WHERE {\n\t?s ?p ?o .\n}LIMIT 10",
         },
       ],
@@ -172,17 +173,17 @@ export default {
         "<https://rdf.metanetx.org/sparql/>",
         "<https://sparql.omabrowser.org/sparql>",
         "<https://sparql.orthodb.org/sparql/>",
-        "<https://sparql.rhea-db.org/sparql>",
+        "<https://sparql.rhea-db.org/sparql/>",
         "<https://sparql.swisslipids.org/sparql/>",
         "<https://biosoda.unil.ch/emi/sparql/>",
         "<https://sparql.uniprot.org/sparql/>",
-        "<https://sparql.nextprot.org/sparql>",
         "<https://query.wikidata.org/sparql>",
       ],
       currentQuery: {
         name: "",
         sources: [],
         query: "", // The current SPARQL query input
+        results: "",
       },
       saveQuery: false,
       cachePath: "",
@@ -247,14 +248,11 @@ export default {
       this.currentPod = selectedPod;
     },
 
-    async executeQuery() {
+    async runExecuteQuery() {
       if (this.currentQuery.query.trim() === "") {
         alert("Please enter a SPARQL query before executing.");
         return;
       }
-      // alert(`Executing query: \n${this.currentQuery.query}`);
-
-      // TODO: execute query using comunica here
 
       // Here, the app will save the query and results using a hash
       if (this.saveQuery) {
@@ -271,8 +269,11 @@ export default {
           this.currentQuery.query,
           this.currHash
         );
-        // creates #hash.sparqljson file with query results
-        // TODO: this.resultsFile = await uploadSparqlJson(this.cachePath, ComunicaResult??, this.currHash);
+        // execute the query
+        this.currentQuery.results = await executeQuery(this.currentQuery.query, this.currentQuery.sources)
+        
+        // create #hash.sparqljson file with query results
+        this.resultsFile = await uploadSparqlJson(this.cachePath, this.currentQuery.results, this.currHash);
       }
     },
 
diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts
index c3adedd..cdf4830 100644
--- a/src/components/queryPod.ts
+++ b/src/components/queryPod.ts
@@ -1,5 +1,6 @@
 import { Session } from "@inrupt/solid-client-authn-browser";
-import { QueryEngine } from '@comunica/query-sparql-link-traversal-solid';
+// import { QueryEngine } from '@comunica/query-sparql-link-traversal-solid';
+import { QueryEngine } from '@comunica/query-sparql';
 import { Bindings } from '@comunica/types';
 import {
   getSolidDataset,
@@ -15,28 +16,68 @@ import {
   getStringNoLocale,
   SolidDataset,
   getFile,
+  overwriteFile,
 } from "@inrupt/solid-client";
 import { fetch } from "@inrupt/solid-client-authn-browser";
 
-const myEngine = new QueryEngine();
-
 /**
  * Fetches a logged-in user's Pod URLs using a webID.
  * 
  * @param webid The webID URL of the current user.
  * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found.
 */
-export async function executeQuery(source: string, session: Session): Promise<Bindings[] | null> {
+export async function executeQuery(query: string, providedSources: string[]): Promise<string | null> {
+  // initialize comunica query engine
+  const myEngine = new QueryEngine();
+  
+  // remove "<>" from Endpoint IRIs
+  const cleanedSources = providedSources.map(url => url.slice(1, -1));
+  
+  // execute query
   try {
-    const bindingsStream = await myEngine.queryBindings(`
-      SELECT ?o WHERE {
-        ?s <http://www.w3.org/ns/ldp#contains> ?o .
-      }`, {
-      sources: [source],
-      '@comunica/actor-http-inrupt-solid-client-authn:session': session
-    });
-    
-    return await bindingsStream.toArray()
+    const bindingsStream = await myEngine.queryBindings(query, {sources: cleanedSources});
+
+    const bindingsArray: any[] = [];
+    let firstBinding: Bindings | undefined = undefined;
+
+    // Process each binding from the stream.
+    for await (const binding of bindingsStream) {
+      // Capture the variable names from the first binding.
+      if (!firstBinding) {
+        firstBinding = binding;
+      }
+      const bindingObj: Record<string, { type: string; value: string }> = {};
+      binding.forEach((term, variable) => {
+        let termType: string;
+        switch (term.termType) {
+          case "Literal":
+            termType = "literal";
+            break;
+          case "NamedNode":
+            termType = "uri";
+            break;
+          case "BlankNode":
+            termType = "bnode";
+            break;
+          default:
+            termType = term.termType.toLowerCase();
+        }
+        bindingObj[variable.value] = { type: termType, value: term.value };
+      });
+      bindingsArray.push(bindingObj);
+    }
+
+    // If there were no results, use an empty array of variables.
+    const vars = firstBinding 
+      ? Array.from(firstBinding.keys()).map(variable => variable.value)
+      : [];
+
+    const jsonOutput = {
+      head: { vars },
+      results: { bindings: bindingsArray },
+    };
+    return JSON.stringify(jsonOutput, null, 2);
+
   } catch (err) {
     return null;
   }
@@ -66,7 +107,6 @@ function generateHash(length = 6): string {
  */
 export async function ensureCacheContainer(podUrl: string): Promise<string> {
   const cacheUrl = podUrl + "querycache/";
-  console.log(`Query Cache container exists at ${cacheUrl}`);
   try {
     // Try to retrieve the dataset (container)
     await getSolidDataset(cacheUrl, { fetch });
@@ -81,13 +121,50 @@ export async function ensureCacheContainer(podUrl: string): Promise<string> {
 }
 
 
+/**
+ * Recursively builds an RDF list (using rdf:first / rdf:rest) from an array of IRI strings.
+ *
+ * @param sources - An array of IRI strings.
+ * @returns An object with:
+ *    - head: A Thing representing the head of the RDF list.
+ *    - nodes: An array of all list node Things (to be added to your dataset).
+ */
+function buildRdfList(sources: string[]): { head: Thing; nodes: Thing[] } {
+  const RDF_FIRST = "http://www.w3.org/1999/02/22-rdf-syntax-ns#first";
+  const RDF_REST = "http://www.w3.org/1999/02/22-rdf-syntax-ns#rest";
+  const RDF_NIL = "http://www.w3.org/1999/02/22-rdf-syntax-ns#nil";
+
+  if (sources.length === 0) {
+    // For an empty list, return rdf:nil.
+    return { head: createThing({ url: RDF_NIL }), nodes: [] };
+  }
+  
+  // Create a blank node for the current list element.
+  let listNode = createThing(); // creates a blank node automatically
+  listNode = buildThing(listNode)
+    .addIri(RDF_FIRST, sources[0])
+    .build();
+  
+  // Recursively build the rest of the list.
+  const restList = buildRdfList(sources.slice(1));
+  
+  // Link the current node to the head of the rest of the list.
+  listNode = buildThing(listNode)
+    .addIri(RDF_REST, restList.head.url)
+    .build();
+  
+  // Return the current node as the head and include all nodes.
+  return { head: listNode, nodes: [listNode, ...restList.nodes] };
+}
+
+
 /**
  * Creates and uploads a Turtle file (Queries.ttl) into the container.
  * The function takes an array of source URLs and formats them into Turtle statements.
  *
  * Each source is converted into an entry like:
  *
- *     <#hash1> a Query;
+ *     <hash1> a Query;
  *         date "date";
  *         query "hash1.rq";
  *         results "hash1.sparqljson";
@@ -107,32 +184,34 @@ export async function createQueriesTTL(
   // Initiatize query cache variables
   const currentDate: Date = new Date();
   const isoDate: string = currentDate.toISOString();
-  const hash = "#" + generateHash();
+  const hash = generateHash();
   const queryFile = `${hash}.rq`;
   const queryResult = `${hash}.sparqljson`;
-  let querySources = '';
-  sources.forEach((source, index) => {
-    if (index < 1) {
-      querySources += `${source}`;
-    } else {
-      querySources += `, ${source}`;
-    }
-  });
+
+  // prefixes
+  const TYPE = "http://www.w3.org/1999/02/22-rdf-syntax-ns#type";
+  const CREATED = "http://purl.org/dc/terms/created";
+  const QUERY = "http://www.w3.org/2001/sw/DataAccess/tests/test-query#query";
+  const RESULT = "http://www.w3.org/2001/sw/DataAccess/tests/test-manifest#result";
+  const SOURCE = "http://www.w3.org/ns/sparql-service-description#endpoint"
+
+  const cleanedSources = sources.map(url => url.slice(1, -1));
 
   // Create a Thing for the new query cache
   const subjectUri = `${containerUrl + fileName}${hash}`;
+  // Create the RDF List of sources
+  const { head: sourceListHead, nodes: sourceListNodes } = buildRdfList(cleanedSources);
   let newQueryThing: Thing = createThing({ url: subjectUri });
   newQueryThing = buildThing(newQueryThing)
     // Specify the query hash.
-    .addStringNoLocale("http://www.w3.org/1999/02/22-rdf-syntax-ns#type", "Query")
+    .addStringNoLocale(`${TYPE}`, "Query")
     // Add date of query execution.
-    .addStringNoLocale("http://purl.org/dc/terms/created", isoDate)
+    .addStringNoLocale(`${CREATED}`, isoDate)
     // Add the query file name.
-    .addStringNoLocale("http://example.com/terms#query", queryFile)
+    .addStringNoLocale(`${QUERY}`, queryFile)
     // Add the results file name.
-    .addStringNoLocale("http://example.com/terms#results", queryResult)
-    // Add the source URLs.
-    .addStringNoLocale("http://example.com/terms#sources", querySources)
+    .addStringNoLocale(`${RESULT}`, queryResult)
+    .addIri(`${SOURCE}`, sourceListHead.url)
     .build();
 
   // Saves RDF data as queries.ttl
@@ -146,8 +225,11 @@ export async function createQueriesTTL(
     message = `CREATED queries.ttl with first query: ${hash}`;
   }
 
-  const updatedDataset = setThing(dataset, newQueryThing);
-  await saveSolidDatasetAt(containerUrl + fileName, updatedDataset, { fetch });
+  dataset = setThing(dataset, newQueryThing);
+  sourceListNodes.forEach((node) => {
+    dataset = setThing(dataset, node);
+  });
+  await saveSolidDatasetAt(containerUrl + fileName, dataset, { fetch });
   console.log(message);
   return hash;
 }
@@ -168,7 +250,7 @@ export async function createQueriesTTL(
  *
  * @param containerUrl - The container URL (should end with a slash).
  * @param query - The SPARQL query as a string.
- * @param hashName - The hash name to use to name file (e.g., "#hash1").
+ * @param hashName - The hash name to use to name file (e.g., "hash1").
  * @param fetch - The authenticated fetch function.
  * @returns The URL of the uploaded file.
  */
@@ -216,7 +298,7 @@ export async function uploadQueryFile(
  *
  * @param containerUrl - The container URL (should end with a slash).
  * @param jsonString - The JSON string to upload.
- * @param hashName - The hash name to use to name file (e.g., "#hash1").
+ * @param hashName - The hash name to use to name file (e.g., "hash1").
  * @param fetch - The authenticated fetch function.
  * @returns The URL of the uploaded file.
  */
@@ -225,8 +307,8 @@ export async function uploadSparqlJson(
   jsonString: string,
   hashName: string
 ): Promise<string> {
-  const fileName = hashName + ".sparqljson"
-  const blob = new Blob([jsonString], { type: "application/json" });
+  const fileName = hashName + ".json"
+  const blob = new Blob([jsonString], { type: "application/sparql-results+json" });
 
   try {
     const savedFile = await saveFileInContainer(containerUrl, blob, {
@@ -268,6 +350,8 @@ export interface QueryEntry {
   created: string;
 }
 
+
+// TODO: Fix THIS
 /**
  * Retrieves all query entries from a Queries.ttl file.
  *
@@ -329,7 +413,7 @@ export async function getCachedQueries(
 }
 
 /**
- * Fetches a SPARQL query file (e.g. a "#hash.rq" file) from the given URL and returns its text content.
+ * Fetches a SPARQL query file (e.g. a "hash.rq" file) from the given URL and returns its text content.
  *
  * @param fileUrl - The URL of the SPARQL query file.
  * @returns A promise that resolves to the text content of the query file.
@@ -343,7 +427,7 @@ export async function fetchQueryFileData(
 }
 
 /**
- * Fetches a SPARQL JSON results file (e.g. a "#hash.sparqljson" file) from the given URL and returns its parsed JSON.
+ * Fetches a SPARQL JSON results file (e.g. a "hash.sparqljson" file) from the given URL and returns its parsed JSON.
  *
  * @param fileUrl - The URL of the SPARQL JSON results file.
  * @returns A promise that resolves to the parsed JSON object.

From 77f0d35f3df94a56f52b04b770c00e040c79ab75 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 7 Mar 2025 13:45:55 +0100
Subject: [PATCH 5/7] add flavicon and metadata to head of HTML

---
 public/index.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/public/index.html b/public/index.html
index 9703f2d..e62d6e8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,19 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta property="og:title" content="Solid Cockpit" />
+    <meta 
+      name="description" 
+      content="An applicaiton for accessing, editing, and querying data in Solid pods"
+    <meta
+      property="og:description"
+      content="An applicaiton for accessing, editing, and querying data in Solid pods"
+    />
+    <meta property="og:image" content="../src/assets/solid-cockpit-logo.png" />
+    <meta name="author" content="KNoWS, IDLab - Ghent University" />
+    <meta name="keywords" content="Solid, RDF, SPARQL Querying, Privacy Editing" />
+    <link rel="icon" type="image/png" href="../src/assets/solid-cockpit-logo.png" />
+
   </head>
   <body>
     <noscript>

From 80748619c7e170755c11923d1c852201843e3925 Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 7 Mar 2025 15:16:41 +0100
Subject: [PATCH 6/7] flavicon should work now

---
 public/favicon.ico | Bin 0 -> 15406 bytes
 public/index.html  |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 public/favicon.ico

diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..669b5ade4ff6260cb99c0cbb01ca0985ad2a6d46
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index e62d6e8..0530786 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,10 @@
       property="og:description"
       content="An applicaiton for accessing, editing, and querying data in Solid pods"
     />
-    <meta property="og:image" content="../src/assets/solid-cockpit-logo.png" />
+    <meta property="og:image" content="favicon.ico" />
     <meta name="author" content="KNoWS, IDLab - Ghent University" />
     <meta name="keywords" content="Solid, RDF, SPARQL Querying, Privacy Editing" />
-    <link rel="icon" type="image/png" href="../src/assets/solid-cockpit-logo.png" />
+    <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
 
   </head>
   <body>

From e7d613d2b9bf1ce1a94278dc5fff78cd8358216b Mon Sep 17 00:00:00 2001
From: ecrum19 <elicrum88@gmail.com>
Date: Fri, 7 Mar 2025 15:24:00 +0100
Subject: [PATCH 7/7] flavicon should work now pt2

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 0530786..3194c43 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <meta property="og:image" content="favicon.ico" />
     <meta name="author" content="KNoWS, IDLab - Ghent University" />
     <meta name="keywords" content="Solid, RDF, SPARQL Querying, Privacy Editing" />
-    <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
   </head>
   <body>