Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes to Query component and flavicon for app #37

Closed
wants to merge 7 commits into from
Closed

Changes to Query component and flavicon for app #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0de140f
adding query chache functionality
ecrum19 Feb 21, 2025
aeb903c
added query saving methodology
ecrum19 Feb 21, 2025
adc846d
start of query cache display
ecrum19 Feb 21, 2025
d7cd6e8
added comunica querying within the query component and saving results…
ecrum19 Mar 5, 2025
77f0d35
add flavicon and metadata to head of HTML
ecrum19 Mar 7, 2025
8074861
flavicon should work now
ecrum19 Mar 7, 2025
e7d613d
flavicon should work now pt2
ecrum19 Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/favicon.ico
View file
Open in desktop
Binary file not shown.
13 changes: 13 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="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="favicon.ico" />

</head>
<body>
<noscript>
Expand Down
199 changes: 141 additions & 58 deletions src/components/DataQuery.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -14,7 +17,7 @@
</button>
</li>
<li>
<button @click="currentView = 'previousQueries'">Past Queries</button>
<button @click="currentView = 'previousQueries', loadCache">Past Queries</button>
</li>
</ul>
</div>
Expand Down Expand Up @@ -74,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'
"
>
{{
Expand All @@ -86,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
Expand All @@ -112,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>
Expand All @@ -135,56 +134,79 @@

<script>
// import YASGUI from '@triply/yasgui/build/yasgui.min.js'
import { currentWebId, getPodURLs } from "./login";
import {
ensureCacheContainer,
createQueriesTTL,
uploadQueryFile,
uploadSparqlJson,
getQueriesTtl,
QueryEntry,
fetchQueryFileData,
fetchSparqlJsonFileData,
getCachedQueries,
executeQuery,
} from "./queryPod";
import PodRegistration from "./PodRegistration.vue";
import { ThingExpectedError } from "@inrupt/solid-client";
import { ref, onMounted, computed } from "vue";

export default {
components: {
PodRegistration,
},
data() {
return {
currentPod: "",
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.rhea-db.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://query.wikidata.org/sparql>",
],
currentQuery: {
name: '',
name: "",
sources: [],
query: '', // The current SPARQL query input
query: "", // The current SPARQL query input
results: "",
},
saveQuery: false,
previousQueries: [],
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
const sparqlRegex = /^(SELECT|ASK|CONSTRUCT|DESCRIBE|PREFIX|BASE)\s+/i;
Expand All @@ -210,36 +232,73 @@ 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 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) {
//TODO: save executed query to Pod if
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
);
// 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);
}


// Save the query to the list of previous queries
this.previousQueries.unshift(this.currentQuery.query);

},

// TODO: load past queries for display from connected Pod
loadQuery(query) {
this.currentQuery.query = query;
this.currentView = "newQuery";
// 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);

// jsonResults.value = await fetchSparqlJsonFileData(resultsFileUrl);
// const formattedJsonResults = computed(() => {
// return jsonResults.value
// ? JSON.stringify(jsonResults.value, null, 2)
// : "Loading...";
// });
}
},
},
mounted() {
Expand All @@ -266,6 +325,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, {
Expand Down Expand Up @@ -308,6 +372,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;
Expand Down Expand Up @@ -451,4 +521,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>
2 changes: 1 addition & 1 deletion src/components/PodRegistration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
},
},
Expand Down
5 changes: 2 additions & 3 deletions src/components/PodUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!"
Expand Down Expand Up @@ -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;
},

/*
Expand All @@ -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);
},

Expand Down
Loading
Loading