From 5fee310c9668677b1dca0f01edbbc154c0be787c Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Sun, 8 Dec 2024 19:58:24 +0100 Subject: [PATCH 01/10] Improve SPARQL minification by removing comments --- index.html | 2 +- package-lock.json | 69 +++++++++++++++++++++++++++++++++++++++++------ package.json | 4 ++- src/js/script.js | 37 +++++++++++++------------ 4 files changed, 83 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 169fa40..2e63079 100644 --- a/index.html +++ b/index.html @@ -323,7 +323,7 @@
Backend Components
- + diff --git a/package-lock.json b/package-lock.json index e54e7c6..63180a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,25 @@ "cors": "^2.8.5", "express": "^4.17.1", "https-proxy-agent": "^7.0.5", - "node-fetch": "^2.6.1" + "node-fetch": "^2.6.1", + "sparqljs": "^3.7.3", + "ted-sparql-editor": "file:" + } + }, + "node_modules/@rdfjs/types": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-1.1.2.tgz", + "integrity": "sha512-wqpOJK1QCbmsGNtyzYnojPU8gRDPid2JO0Q0kMtb4j65xhCK880cnKAfEOwC+dX85VJcCByQx5zOwyyfCjDJsg==", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/node": { + "version": "22.10.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz", + "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==", + "dependencies": { + "undici-types": "~6.20.0" } }, "node_modules/accepts": { @@ -243,9 +261,9 @@ } }, "node_modules/express": { - "version": "4.21.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", - "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", @@ -266,7 +284,7 @@ "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.10", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", "qs": "6.13.0", "range-parser": "~1.2.1", @@ -281,6 +299,10 @@ }, "engines": { "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/finalhandler": { @@ -594,9 +616,9 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==" + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", + "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==" }, "node_modules/proxy-addr": { "version": "2.0.7", @@ -646,6 +668,14 @@ "node": ">= 0.8" } }, + "node_modules/rdf-data-factory": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/rdf-data-factory/-/rdf-data-factory-1.1.2.tgz", + "integrity": "sha512-TfQD63Lokabd09ES1jAtKK8AA6rkr9rwyUBGo6olOt1CE0Um36CUQIqytyf0am2ouBPR0l7SaHxCiMcPGHkt1A==", + "dependencies": { + "@rdfjs/types": "*" + } + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -758,6 +788,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sparqljs": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/sparqljs/-/sparqljs-3.7.3.tgz", + "integrity": "sha512-FQfHUhfwn5PD9WH6xPU7DhFfXMgqK/XoDrYDVxz/grhw66Il0OjRg3JBgwuEvwHnQt7oSTiKWEiCZCPNaUbqgg==", + "dependencies": { + "rdf-data-factory": "^1.1.2" + }, + "bin": { + "sparqljs": "bin/sparql-to-json" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -766,6 +810,10 @@ "node": ">= 0.8" } }, + "node_modules/ted-sparql-editor": { + "resolved": "", + "link": true + }, "node_modules/toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -791,6 +839,11 @@ "node": ">= 0.6" } }, + "node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==" + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index ca9a9dd..541f0a1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "cors": "^2.8.5", "express": "^4.17.1", "https-proxy-agent": "^7.0.5", - "node-fetch": "^2.6.1" + "node-fetch": "^2.6.1", + "sparqljs": "^3.7.3", + "ted-sparql-editor": "file:" } } diff --git a/src/js/script.js b/src/js/script.js index d6cf123..55e4840 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -11,6 +11,7 @@ * or implied. See the Licence for the specific language governing permissions and limitations under * the Lic */ +import SparqlJs from 'https://cdn.jsdelivr.net/npm/sparqljs@3.7.3/+esm'; // Production SPARQL endpoint const SPARQL_ENDPOINT = 'https://publications.europa.eu/webapi/rdf/sparql'; @@ -71,34 +72,31 @@ document.addEventListener('DOMContentLoaded', async function () { placeholder: "Enter your SPARQL query here..." }); + // Add this function to minify SPARQL queries using sparqljs + function minifySparqlQuery(query) { + const parser = new SparqlJs.Parser(); + const generator = new SparqlJs.Generator(); + const parsedQuery = parser.parse(query); + return generator.stringify(parsedQuery); + } + // Update button state on editor changes - editor.on("change", function() { + function onEditorChange() { runQueryButton.disabled = !editor.getValue().trim(); - }); - - // Add this function to minify SPARQL queries - function minifySparqlQuery(query) { - return query - .replace(/\s+/g, ' ') // Replace multiple spaces/newlines with single space - .replace(/\s*\{\s*/g, '{') // Remove spaces around braces - .replace(/\s*\}\s*/g, '}') - .replace(/\s*\(\s*/g, '(') // Remove spaces around parentheses - .replace(/\s*\)\s*/g, ')') - .replace(/\s*\.\s*/g, '.') // Remove spaces around dots - .replace(/\s*;\s*/g, ';') // Remove spaces around semicolons - .replace(/\s*,\s*/g, ',') // Remove spaces around commas - .trim(); } + editor.on("change", onEditorChange); + // Update copyUrlButton click handler copyUrlButton.addEventListener('click', function () { - const query = minifySparqlQuery(editor.getValue()); + const query = editor.getValue(); + const minifiedQuery = minifySparqlQuery(query); const format = document.getElementById("format").value || "application/sparql-results+json"; const defaultGraphUri = document.getElementById("default-graph-uri").value; const timeout = document.getElementById("timeout").value || 30000; // Use the original SPARQL endpoint URL - const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(query)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; + const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; console.log(`Generated URL: ${url}`); navigator.clipboard.writeText(url).then(() => { @@ -111,13 +109,14 @@ document.addEventListener('DOMContentLoaded', async function () { // Update openUrlButton click handler openUrlButton.addEventListener('click', function () { - const query = minifySparqlQuery(editor.getValue()); + const query = editor.getValue(); + const minifiedQuery = minifySparqlQuery(query); const format = document.getElementById("format").value || "application/sparql-results+json"; const defaultGraphUri = document.getElementById("default-graph-uri").value; const timeout = document.getElementById("timeout").value || 30000; // Use the original SPARQL endpoint URL - const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(query)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; + const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; window.open(url, '_blank'); }); From 9b1db35a0c34da7bf6e4759a1c8f23c69f2fdc65 Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Wed, 11 Dec 2024 12:21:21 +0100 Subject: [PATCH 02/10] Added error checking for SPARQL syntaxt --- index.html | 5 ++- src/assets/style.css | 18 +++++++++ src/js/script.js | 88 ++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 106 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 2e63079..94249a0 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,6 @@ -
@@ -102,12 +101,16 @@

TED Open Data

+ + +
+
diff --git a/src/assets/style.css b/src/assets/style.css index 0f2a99c..351ca3f 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -392,3 +392,21 @@ main { min-width: 150px; /* Minimum width for cells */ max-width: 300px; /* Maximum width for cells */ } + +/* Syntax Error Highlight */ +.syntax-error-highlight { + /* background-color: rgba(255, 0, 0, 0.3); Red background with some transparency */ + border-bottom: 2px solid red; /* Add a red underline to make it more noticeable */ +} + +.custom-tooltip { + position: absolute; + background: #f8d7da; + color: #721c24; + padding: 5px; + border: 1px solid #f5c6cb; + border-radius: 4px; + white-space: pre-wrap; + z-index: 10; + pointer-events: none; /* Prevent tooltip from interfering with mouse events */ +} diff --git a/src/js/script.js b/src/js/script.js index 55e4840..415c450 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', async function () { const copyUrlButton = document.getElementById('copy-url-button'); const copyUrlAlert = document.getElementById('copy-url-alert'); const openUrlButton = document.getElementById('open-url-button'); + const resultsDiv = document.getElementById("results"); // Define resultsDiv here // Event listeners startTourButton.addEventListener('click', function () { @@ -72,6 +73,8 @@ document.addEventListener('DOMContentLoaded', async function () { placeholder: "Enter your SPARQL query here..." }); + let errorMarker = null; // Variable to store the error marker + // Add this function to minify SPARQL queries using sparqljs function minifySparqlQuery(query) { const parser = new SparqlJs.Parser(); @@ -80,9 +83,87 @@ document.addEventListener('DOMContentLoaded', async function () { return generator.stringify(parsedQuery); } + // Add this function to check SPARQL syntax using sparqljs + function checkSparqlSyntax(query) { + const parser = new SparqlJs.Parser(); + try { + parser.parse(query); + return null; // No errors + } catch (error) { + return error; // Return error object + } + } + // Update button state on editor changes function onEditorChange() { - runQueryButton.disabled = !editor.getValue().trim(); + const query = editor.getValue(); + const error = checkSparqlSyntax(query); + + if (error) { + // Log the error object to inspect its structure + console.log('SPARQL Syntax Error:', error); + + // Clear previous error marker + if (errorMarker) { + errorMarker.clear(); + } + + // Highlight the error position in the editor if location is available + if (error.hash && error.hash.loc && error.hash.loc.first_line && error.hash.loc.last_line) { + const start = error.hash.loc; + errorMarker = editor.markText( + { line: start.first_line - 1, ch: start.first_column }, + { line: start.last_line - 1, ch: start.last_column }, + { className: 'syntax-error-highlight', title: `${error.message}` } + ); + addTooltipToMarker(errorMarker, `${error.message}`); + } else if (error.hash && error.hash.loc && error.hash.loc.first_line) { + const start = error.hash.loc; + errorMarker = editor.markText( + { line: start.first_line - 1, ch: 0 }, + { line: start.first_line - 1, ch: editor.getLine(start.first_line - 1).length }, + { className: 'syntax-error-highlight', title: `${error.message}` } + ); + addTooltipToMarker(errorMarker, `${error.message}`); + } + runQueryButton.disabled = true; // Disable the button if there's a syntax error + } else { + // Clear previous error marker + if (errorMarker) { + errorMarker.clear(); + errorMarker = null; + } + runQueryButton.disabled = !query.trim(); // Enable the button only if the query is not empty + } + } + + function addTooltipToMarker(marker, message) { + const markerElements = marker.replacedWith || [marker]; + markerElements.forEach((element) => { + const from = element.from || marker.from; + const to = element.to || marker.to; + if (from && to) { + const lineHandle = editor.getLineHandle(from.line); + const lineElement = editor.getWrapperElement().querySelector(`.CodeMirror-line:nth-child(${from.line + 1})`); + + if (lineElement) { + lineElement.addEventListener('mouseenter', function () { + const tooltip = document.createElement('div'); + tooltip.className = 'custom-tooltip'; + tooltip.textContent = message; + document.body.appendChild(tooltip); + + const rect = lineElement.getBoundingClientRect(); + tooltip.style.left = `${rect.left + window.scrollX}px`; + tooltip.style.top = `${rect.bottom + window.scrollY}px`; + + lineElement.addEventListener('mouseleave', function () { + tooltip.remove(); + }, { once: true }); + }); + } + } + }); } editor.on("change", onEditorChange); @@ -173,8 +254,7 @@ document.addEventListener('DOMContentLoaded', async function () { format === 'application/vnd.ms-excel') { // Handle HTML and spreadsheet content result = await response.text(); - resultsDiv = document.getElementById("results"); - resultsDiv.innerHTML = result; + resultsDiv.innerHTML = result; // Use resultsDiv here // Fix table structure and pre tags const table = resultsDiv.querySelector('table'); @@ -209,7 +289,7 @@ document.addEventListener('DOMContentLoaded', async function () { displayTextResults(result, 'text'); } } catch (error) { - document.getElementById("results").textContent = `Error: ${error.message}`; + resultsDiv.textContent = `Error: ${error.message}`; // Use resultsDiv here copyUrlAlert.style.display = 'none'; // Hide the alert box if there's an error } finally { // Reset progress bar and re-enable Run Query button From 91f1a899672d9d47018485935ce2f72ee935478e Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Fri, 13 Dec 2024 12:31:31 +0100 Subject: [PATCH 03/10] Added a query library tab --- index.html | 83 +++++++++++++++++- src/assets/queries/index.yaml | 81 +++++++++++++++++ src/assets/queries/query1.sparql | 4 + src/assets/queries/query2.sparql | 4 + src/assets/queries/query3.sparql | 4 + src/assets/queries/query4.sparql | 4 + src/js/script.js | 145 ++++++++++++++++++++++++++++--- 7 files changed, 314 insertions(+), 11 deletions(-) create mode 100644 src/assets/queries/index.yaml create mode 100644 src/assets/queries/query1.sparql create mode 100644 src/assets/queries/query2.sparql create mode 100644 src/assets/queries/query3.sparql create mode 100644 src/assets/queries/query4.sparql diff --git a/index.html b/index.html index 94249a0..26ecb78 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,50 @@ + + + @@ -54,6 +98,10 @@ +
+ +
+
+
+
+
+
+ +
+
+
+
+
+

Select a query from the available categories on the left.

+
+
+
+ +
+
Query Title
+

Select a query to see its description.

+
+ +
+
+
+
+
+
+
+
+
diff --git a/src/assets/queries/index.yaml b/src/assets/queries/index.yaml new file mode 100644 index 0000000..3e6b6eb --- /dev/null +++ b/src/assets/queries/index.yaml @@ -0,0 +1,81 @@ +queries: + - category: Category1 + title: Query1 + description: Description for Query1 in Category1 + sparql: query1.sparql + - category: Category1 + title: Query2 + description: Description for Query2 in Category1 + sparql: query2.sparql + - category: Category2 + title: Query3 + description: Description for Query3 in Category2 + sparql: query3.sparql + - category: Category2 + title: Query4 + description: Description for Query4 in Category2 + sparql: query4.sparql + - category: Category3 + title: Query5 + description: Description for Query5 in Category3 + sparql: query5.sparql + - category: Category3 + title: Query6 + description: Description for Query6 in Category3 + sparql: query6.sparql + - category: Category4 + title: Query7 + description: Description for Query7 in Category4 + sparql: query7.sparql + - category: Category4 + title: Query8 + description: Description for Query8 in Category4 + sparql: query8.sparql + - category: Category5 + title: Query9 + description: Description for Query9 in Category5 + sparql: query9.sparql + - category: Category5 + title: Query10 + description: Description for Query10 in Category5 + sparql: query10.sparql + - category: Category6 + title: Query11 + description: Description for Query11 in Category6 + sparql: query11.sparql + - category: Category6 + title: Query12 + description: Description for Query12 in Category6 + sparql: query12.sparql + - category: Category7 + title: Query13 + description: Description for Query13 in Category7 + sparql: query13.sparql + - category: Category7 + title: Query14 + description: Description for Query14 in Category7 + sparql: query14.sparql + - category: Category8 + title: Query15 + description: Description for Query15 in Category8 + sparql: query15.sparql + - category: Category8 + title: Query16 + description: Description for Query16 in Category8 + sparql: query16.sparql + - category: Category9 + title: Query17 + description: Description for Query17 in Category9 + sparql: query17.sparql + - category: Category9 + title: Query18 + description: Description for Query18 in Category9 + sparql: query18.sparql + - category: Category10 + title: Query19 + description: Description for Query19 in Category10 + sparql: query19.sparql + - category: Category10 + title: Query20 + description: Description for Query20 in Category10 + sparql: query20.sparql \ No newline at end of file diff --git a/src/assets/queries/query1.sparql b/src/assets/queries/query1.sparql new file mode 100644 index 0000000..8dd3701 --- /dev/null +++ b/src/assets/queries/query1.sparql @@ -0,0 +1,4 @@ + +SELECT * WHERE { + ?s ?p ?o +} LIMIT 10 \ No newline at end of file diff --git a/src/assets/queries/query2.sparql b/src/assets/queries/query2.sparql new file mode 100644 index 0000000..ae9f128 --- /dev/null +++ b/src/assets/queries/query2.sparql @@ -0,0 +1,4 @@ + +SELECT ?subject ?predicate ?object WHERE { + ?subject ?predicate ?object +} LIMIT 5 \ No newline at end of file diff --git a/src/assets/queries/query3.sparql b/src/assets/queries/query3.sparql new file mode 100644 index 0000000..f2dead9 --- /dev/null +++ b/src/assets/queries/query3.sparql @@ -0,0 +1,4 @@ + +SELECT ?x ?y ?z WHERE { + ?x ?y ?z +} LIMIT 15 \ No newline at end of file diff --git a/src/assets/queries/query4.sparql b/src/assets/queries/query4.sparql new file mode 100644 index 0000000..a014c0e --- /dev/null +++ b/src/assets/queries/query4.sparql @@ -0,0 +1,4 @@ + +SELECT ?a ?b ?c WHERE { + ?a ?b ?c +} LIMIT 20 \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js index 415c450..0224853 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -12,6 +12,7 @@ * the Lic */ import SparqlJs from 'https://cdn.jsdelivr.net/npm/sparqljs@3.7.3/+esm'; +import yaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm'; // Production SPARQL endpoint const SPARQL_ENDPOINT = 'https://publications.europa.eu/webapi/rdf/sparql'; @@ -30,6 +31,23 @@ document.addEventListener('DOMContentLoaded', async function () { // Get references to elements const queryTextarea = document.getElementById('query'); const runQueryButton = document.getElementById('runQueryButton'); + const queryForm = document.getElementById('queryForm'); + const queryResultsTab = new bootstrap.Tab(document.getElementById('query-results-tab')); + const startTourButton = document.getElementById('start-tour'); + const tryQueryLibraryButton = document.getElementById('try-query-library'); + const queryEditorTab = new bootstrap.Tab(document.getElementById('query-editor-tab')); + const queryLibraryTab = new bootstrap.Tab(document.getElementById('query-library-tab')); + const copyUrlButton = document.getElementById('copy-url-button'); + const copyUrlAlert = document.getElementById('copy-url-alert'); + const openUrlButton = document.getElementById('open-url-button'); + const resultsDiv = document.getElementById("results"); + const queryAccordion = document.getElementById('queryAccordion'); + const selectQueryMessage = document.getElementById('selectQueryMessage'); + const queryCard = document.getElementById('queryCard'); + const queryTitle = document.getElementById('queryTitle'); + const queryDescription = document.getElementById('queryDescription'); + const querySparql = document.getElementById('querySparql'); + const tryQueryButton = document.getElementById('tryQueryButton'); // Remove environment selector if it exists const envSelector = document.querySelector('#cellarEnvironment'); @@ -45,22 +63,24 @@ document.addEventListener('DOMContentLoaded', async function () { runQueryButton.disabled = !this.value.trim(); }); - // DOM elements - const queryForm = document.getElementById('queryForm'); - const queryResultsTab = new bootstrap.Tab(document.getElementById('query-results-tab')); - const startTourButton = document.getElementById('start-tour'); - const queryEditorTab = new bootstrap.Tab(document.getElementById('query-editor-tab')); - const copyUrlButton = document.getElementById('copy-url-button'); - const copyUrlAlert = document.getElementById('copy-url-alert'); - const openUrlButton = document.getElementById('open-url-button'); - const resultsDiv = document.getElementById("results"); // Define resultsDiv here - // Event listeners startTourButton.addEventListener('click', function () { console.log('Write your query button clicked'); // Debugging log queryEditorTab.show(); }); + tryQueryLibraryButton.addEventListener('click', function () { + console.log('Try our query library button clicked'); // Debugging log + queryLibraryTab.show(); + }); + + // Add event listener for "Try this query" button + tryQueryButton.addEventListener('click', function () { + const queryText = querySparqlEditor.getValue(); + editor.setValue(queryText); + queryEditorTab.show(); + }); + // Initialize CodeMirror const editor = CodeMirror.fromTextArea(document.getElementById("query"), { mode: "sparql", @@ -73,6 +93,18 @@ document.addEventListener('DOMContentLoaded', async function () { placeholder: "Enter your SPARQL query here..." }); + // Initialize CodeMirror for the query library display + const querySparqlEditor = CodeMirror.fromTextArea(document.getElementById("querySparql"), { + mode: "sparql", + theme: "eclipse", + lineNumbers: true, + matchBrackets: true, + autoCloseBrackets: true, + lineWrapping: true, + readOnly: true, + viewportMargin: Infinity // Ensure the editor adjusts its height to fit the content + }); + let errorMarker = null; // Variable to store the error marker // Add this function to minify SPARQL queries using sparqljs @@ -361,4 +393,97 @@ document.addEventListener('DOMContentLoaded', async function () { resultsDiv.appendChild(pre); copyUrlAlert.style.display = 'flex'; } + + let queries = []; + let selectedQueryElement = null; + + const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/develop/docs/antora/modules/samples/queries/'; + + // Load categories and queries from a remote YAML file + async function loadQueries() { + try { + const response = await fetch(`${REMOTE_QUERIES_URL}index.yaml`); + const text = await response.text(); + const data = yaml.load(text); + const categories = new Map(); + + data.queries.forEach(query => { + if (!categories.has(query.category)) { + categories.set(query.category, []); + } + categories.get(query.category).push(query); + }); + + categories.forEach((queries, category) => { + const categoryId = `category-${category.replace(/\s+/g, '-')}`; + const categoryItem = document.createElement('div'); + categoryItem.className = 'accordion-item'; + + categoryItem.innerHTML = ` +

+ +

+
+
+
    + ${queries.map(query => ` +
  • + ${query.title} +
    • + `).join('')} +
+
+
+ `; + + queryAccordion.appendChild(categoryItem); + }); + + // Store the queries for later use + queries = data.queries; + } catch (error) { + console.error('Failed to load queries:', error); + } + } + + // Display selected query details + queryAccordion.addEventListener('click', async function (event) { + if (event.target.matches('.list-group-item')) { + const selectedQuery = queries.find(query => query.title === event.target.dataset.queryTitle); + + if (selectedQuery) { + const queryFileResponse = await fetch(`${REMOTE_QUERIES_URL}${selectedQuery.sparql}`); + const querySparqlText = await queryFileResponse.text(); + + queryTitle.textContent = selectedQuery.title; + queryDescription.textContent = selectedQuery.description; + querySparqlEditor.setValue(querySparqlText); + setTimeout(() => querySparqlEditor.refresh(), 0); // Ensure the editor is refreshed after setting the value + tryQueryButton.disabled = false; + queryCard.classList.remove('d-none'); + selectQueryMessage.classList.add('d-none'); + + // Highlight the selected query + if (selectedQueryElement) { + selectedQueryElement.classList.remove('active'); + } + event.target.classList.add('active'); + selectedQueryElement = event.target; + } else { + queryTitle.textContent = 'Query Title'; + queryDescription.textContent = 'Select a query to see its description.'; + querySparqlEditor.setValue('SPARQL query will be displayed here.'); + setTimeout(() => querySparqlEditor.refresh(), 0); // Ensure the editor is refreshed after setting the value + tryQueryButton.disabled = true; + queryCard.classList.add('d-none'); + selectQueryMessage.classList.remove('d-none'); + } + } + }); + + // Load queries on page load + loadQueries(); + }); From 041a6b849ebdb5a13fddc72741cddcfeb64b28d4 Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Fri, 13 Dec 2024 18:33:27 +0100 Subject: [PATCH 04/10] Refactor script.js to simplify and break into classes. --- README.md | 13 +- index.html | 12 +- src/js/HomeTab.js | 55 +++++ src/js/QueryEditor.js | 288 ++++++++++++++++++++++++ src/js/QueryLibrary.js | 170 +++++++++++++++ src/js/QueryResults.js | 155 +++++++++++++ src/js/script.js | 482 ++--------------------------------------- 7 files changed, 703 insertions(+), 472 deletions(-) create mode 100644 src/js/HomeTab.js create mode 100644 src/js/QueryEditor.js create mode 100644 src/js/QueryLibrary.js create mode 100644 src/js/QueryResults.js diff --git a/README.md b/README.md index d357859..2a75322 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,11 @@ This project uses the following third-party components: - License: MIT - Website: https://codemirror.net/ +- **js-yaml** (v4.1.0) + - Purpose: YAML parser and dumper + - License: MIT + - Website: https://github.com/nodeca/js-yaml + ### Backend Components - **Express** (v4.17.1) - Purpose: Web server framework @@ -117,10 +122,14 @@ This project uses the following third-party components: - License: MIT - Website: https://github.com/TooTallNate/node-https-proxy-agent +- **sparqljs** (v3.7.3) + - Purpose: SPARQL query parser and generator + - License: MIT + - Website: https://github.com/RubenVerborgh/SPARQL.js + All third-party components are used under their respective licenses. [^1]: _Copyright 2022 European Union_ -_Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission – -subsequent versions of the EUPL (the "Licence");_ +_Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission – subsequent versions of the EUPL (the "Licence");_ _You may not use this work except in compliance with the Licence. You may obtain [a copy of the Licence here](LICENSE)._ _Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence._ \ No newline at end of file diff --git a/index.html b/index.html index 26ecb78..9b79ac7 100644 --- a/index.html +++ b/index.html @@ -331,6 +331,11 @@
Frontend Components

Code editor with SPARQL syntax highlighting
License: MIT +
  • + js-yaml (v4.1.0) +
    YAML parser and dumper +
    License: MIT +
    • Backend Components
    @@ -350,11 +355,16 @@
    Backend Components

    Fetch API implementation for Node.js
    License: MIT -
  • +
  • https-proxy-agent (v7.0.5)
    HTTP(s) proxy agent for Node.js
    License: MIT
    • +
  • + sparqljs (v3.7.3) +
    SPARQL query parser and generator +
    License: MIT +
    • diff --git a/src/js/HomeTab.js b/src/js/HomeTab.js new file mode 100644 index 0000000..390cd73 --- /dev/null +++ b/src/js/HomeTab.js @@ -0,0 +1,55 @@ +/* + * Copyright 2022 European Union + * + * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European + * Commission – subsequent versions of the EUPL (the "Licence"); You may not use this work except in + * compliance with the Licence. You may obtain a copy of the Licence at: + * https://joinup.ec.europa.eu/software/page/eupl + * + * Unless required by applicable law or agreed to in writing, software distributed under the Licence + * is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the Licence for the specific language governing permissions and limitations under + * the Lic + */ + +/** + * Class representing the Home Tab. + * This class is responsible for initializing the home tab and handling related actions. + */ +export class HomeTab { + constructor() { + this.startTourButton = document.getElementById('start-tour'); + this.tryQueryLibraryButton = document.getElementById('try-query-library'); + this.queryEditorTab = new bootstrap.Tab(document.getElementById('query-editor-tab')); + this.queryLibraryTab = new bootstrap.Tab(document.getElementById('query-library-tab')); + + this.initEventListeners(); + } + + /** + * Initialize event listeners. + * Sets up event listeners for the start tour button and the try query library button. + */ + initEventListeners() { + this.startTourButton.addEventListener('click', this.onStartTour.bind(this)); + this.tryQueryLibraryButton.addEventListener('click', this.onTryQueryLibrary.bind(this)); + } + + /** + * Handle start tour button click event. + * Switches to the query editor tab. + */ + onStartTour() { + console.log('Write your query button clicked'); + this.queryEditorTab.show(); + } + + /** + * Handle try query library button click event. + * Switches to the query library tab. + */ + onTryQueryLibrary() { + console.log('Try our query library button clicked'); + this.queryLibraryTab.show(); + } +} diff --git a/src/js/QueryEditor.js b/src/js/QueryEditor.js new file mode 100644 index 0000000..24c0a76 --- /dev/null +++ b/src/js/QueryEditor.js @@ -0,0 +1,288 @@ +/* + * Copyright 2022 European Union + * + * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European + * Commission – subsequent versions of the EUPL (the "Licence"); You may not use this work except in + * compliance with the Licence. You may obtain a copy of the Licence at: + * https://joinup.ec.europa.eu/software/page/eupl + * + * Unless required by applicable law or agreed to in writing, software distributed under the Licence + * is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the Licence for the specific language governing permissions and limitations under + * the Lic + */ +import SparqlJs from 'https://cdn.jsdelivr.net/npm/sparqljs@3.7.3/+esm'; + +/** + * Class representing the Query Editor. + * This class is responsible for handling the SPARQL query editor and executing queries. + */ +export class QueryEditor { + /** + * Create a Query Editor. + * @param {string} sparqlEndpoint - The SPARQL endpoint URL. + */ + constructor(sparqlEndpoint) { + this.sparqlEndpoint = sparqlEndpoint; + this.editor = CodeMirror.fromTextArea(document.getElementById("query"), { + mode: "sparql", + theme: "eclipse", + lineNumbers: true, + matchBrackets: true, + autoCloseBrackets: true, + lineWrapping: true, + extraKeys: {"Ctrl-Space": "autocomplete"}, + placeholder: "Enter your SPARQL query here..." + }); + this.runQueryButton = document.getElementById('runQueryButton'); + this.queryForm = document.getElementById('queryForm'); + this.resultsDiv = document.getElementById("results"); + this.copyUrlButton = document.getElementById('copy-url-button'); + this.copyUrlAlert = document.getElementById('copy-url-alert'); + this.queryResultsTab = new bootstrap.Tab(document.getElementById('query-results-tab')); + this.errorMarker = null; + this.queryResults = null; + + this.initEventListeners(); + } + + /** + * Set the Query Results instance. + * @param {QueryResults} queryResults - The QueryResults instance. + */ + setQueryResults(queryResults) { + this.queryResults = queryResults; + } + + /** + * Initialize event listeners. + * Sets up event listeners for the query editor, form submission, and copy URL button. + */ + initEventListeners() { + this.editor.on("change", this.onEditorChange.bind(this)); + this.queryForm.addEventListener('submit', this.onSubmit.bind(this)); + this.copyUrlButton.addEventListener('click', this.onCopyUrl.bind(this)); + } + + /** + * Handle editor change event. + * Checks the SPARQL syntax and updates the run query button state. + */ + onEditorChange() { + const query = this.editor.getValue(); + const error = this.checkSparqlSyntax(query); + + if (error) { + console.log('SPARQL Syntax Error:', error); + if (this.errorMarker) { + this.errorMarker.clear(); + } + if (error.hash && error.hash.loc && error.hash.loc.first_line && error.hash.loc.last_line) { + const start = error.hash.loc; + this.errorMarker = this.editor.markText( + { line: start.first_line - 1, ch: start.first_column }, + { line: start.last_line - 1, ch: start.last_column }, + { className: 'syntax-error-highlight', title: `${error.message}` } + ); + this.addTooltipToMarker(this.errorMarker, `${error.message}`); + } else if (error.hash && error.hash.loc && error.hash.loc.first_line) { + const start = error.hash.loc; + this.errorMarker = this.editor.markText( + { line: start.first_line - 1, ch: 0 }, + { line: start.first_line - 1, ch: this.editor.getLine(start.first_line - 1).length }, + { className: 'syntax-error-highlight', title: `${error.message}` } + ); + this.addTooltipToMarker(this.errorMarker, `${error.message}`); + } + this.runQueryButton.disabled = true; + } else { + if (this.errorMarker) { + this.errorMarker.clear(); + this.errorMarker = null; + } + this.runQueryButton.disabled = !query.trim(); + } + } + + /** + * Add a tooltip to the syntax error marker. + * @param {CodeMirror.TextMarker} marker - The syntax error marker. + * @param {string} message - The tooltip message. + */ + addTooltipToMarker(marker, message) { + const markerElements = marker.replacedWith || [marker]; + markerElements.forEach((element) => { + const from = element.from || marker.from; + const to = element.to || marker.to; + if (from && to) { + const lineHandle = this.editor.getLineHandle(from.line); + const lineElement = this.editor.getWrapperElement().querySelector(`.CodeMirror-line:nth-child(${from.line + 1})`); + + if (lineElement) { + lineElement.addEventListener('mouseenter', function () { + const tooltip = document.createElement('div'); + tooltip.className = 'custom-tooltip'; + tooltip.textContent = message; + document.body.appendChild(tooltip); + + const rect = lineElement.getBoundingClientRect(); + tooltip.style.left = `${rect.left + window.scrollX}px`; + tooltip.style.top = `${rect.bottom + window.scrollY}px`; + + lineElement.addEventListener('mouseleave', function () { + tooltip.remove(); + }, { once: true }); + }); + } + } + }); + } + + /** + * Handle form submission event. + * Executes the SPARQL query and displays the results. + * @param {Event} event - The form submission event. + * @async + */ + async onSubmit(event) { + event.preventDefault(); + const progressBar = document.querySelector('.progress-bar'); + const submitButton = this.queryForm.querySelector('button[type="submit"]'); + progressBar.style.width = '100%'; + progressBar.classList.add('progress-bar-striped', 'progress-bar-animated'); + submitButton.disabled = true; + + try { + const query = this.editor.getValue(); + const format = document.getElementById("format").value || "application/sparql-results+json"; + const defaultGraphUri = document.getElementById("default-graph-uri").value; + const timeout = document.getElementById("timeout").value; + const strict = document.getElementById("strict").checked ? "true" : "false"; + const debug = document.getElementById("debug").checked ? "true" : "false"; + const report = document.getElementById("report").checked ? "true" : "false"; + + const body = `query=${encodeURIComponent(query)}&format=${encodeURIComponent(format)}` + + (defaultGraphUri ? `&default-graph-uri=${encodeURIComponent(defaultGraphUri)}` : "") + + (timeout ? `&timeout=${encodeURIComponent(timeout)}` : "") + + `&strict=${encodeURIComponent(strict)}` + + `&debug=${encodeURIComponent(debug)}` + + `&report=${encodeURIComponent(report)}`; + + console.log(`Request body: ${body}`); + console.log(`Sending request to: ${this.sparqlEndpoint}`); + + const response = await fetch(this.sparqlEndpoint, { + method: "POST", + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + body: body + }); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const contentType = response.headers.get('content-type'); + let result; + + if (contentType.includes('json')) { + const responseText = await response.text(); + console.log(`Response text: ${responseText}`); + result = JSON.parse(responseText); + this.queryResults.displayJsonResults(result); + } else if (contentType.includes('html') || + format === 'text/html' || + format === 'text/x-html+tr' || + format === 'application/vnd.ms-excel') { + result = await response.text(); + this.resultsDiv.innerHTML = result; + + const table = this.resultsDiv.querySelector('table'); + if (table) { + const firstRow = table.querySelector('tr'); + if (firstRow && firstRow.querySelectorAll('th').length > 0) { + if (!table.querySelector('thead')) { + const thead = document.createElement('thead'); + thead.appendChild(firstRow); + table.insertBefore(thead, table.firstChild); + } + } + + table.querySelectorAll('td pre').forEach(pre => { + pre.style.whiteSpace = 'pre-wrap'; + pre.style.wordBreak = 'break-word'; + pre.style.overflowX = 'hidden'; + }); + } + + this.copyUrlAlert.style.display = 'flex'; + } else if (contentType.includes('xml')) { + result = await response.text(); + this.queryResults.displayTextResults(result, 'xml'); + } else if (contentType.includes('csv')) { + result = await response.text(); + this.queryResults.displayTextResults(result, 'csv'); + } else { + result = await response.text(); + this.queryResults.displayTextResults(result, 'text'); + } + } catch (error) { + this.resultsDiv.textContent = `Error: ${error.message}`; + this.copyUrlAlert.style.display = 'none'; + } finally { + progressBar.style.width = '0%'; + progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); + submitButton.disabled = false; + } + + this.queryResultsTab.show(); + } + + /** + * Handle copy URL button click event. + * Generates a URL for the current query and copies it to the clipboard. + */ + onCopyUrl() { + const query = this.editor.getValue(); + const minifiedQuery = this.minifySparqlQuery(query); + const format = document.getElementById("format").value || "application/sparql-results+json"; + const defaultGraphUri = document.getElementById("default-graph-uri").value; + const timeout = document.getElementById("timeout").value || 30000; + + const url = `${this.sparqlEndpoint}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; + + console.log(`Generated URL: ${url}`); + navigator.clipboard.writeText(url).then(() => { + const toast = new bootstrap.Toast(document.getElementById('copyUrlToast')); + toast.show(); + }).catch(err => { + console.error('Failed to copy URL:', err); + }); + } + + /** + * Minify the SPARQL query. + * @param {string} query - The SPARQL query. + * @returns {string} - The minified SPARQL query. + */ + minifySparqlQuery(query) { + const parser = new SparqlJs.Parser(); + const generator = new SparqlJs.Generator(); + const parsedQuery = parser.parse(query); + return generator.stringify(parsedQuery); + } + + /** + * Check the SPARQL syntax. + * @param {string} query - The SPARQL query. + * @returns {Error|null} - The syntax error or null if the syntax is valid. + */ + checkSparqlSyntax(query) { + const parser = new SparqlJs.Parser(); + try { + parser.parse(query); + return null; + } catch (error) { + return error; + } + } +} diff --git a/src/js/QueryLibrary.js b/src/js/QueryLibrary.js new file mode 100644 index 0000000..34a28f8 --- /dev/null +++ b/src/js/QueryLibrary.js @@ -0,0 +1,170 @@ +/* + * Copyright 2022 European Union + * + * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European + * Commission – subsequent versions of the EUPL (the "Licence"); You may not use this work except in + * compliance with the Licence. You may obtain a copy of the Licence at: + * https://joinup.ec.europa.eu/software/page/eupl + * + * Unless required by applicable law or agreed to in writing, software distributed under the Licence + * is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the Licence for the specific language governing permissions and limitations under + * the Lic + */ +import yaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm'; + +/** + * Class representing the Query Library. + * This class is responsible for loading and displaying SPARQL queries from a remote source. + */ +export class QueryLibrary { + /** + * Create a Query Library. + * @param {string} sparqlEndpoint - The SPARQL endpoint URL. + * @param {QueryEditor} queryEditor - The QueryEditor instance. + * @param {string} remoteQueriesUrl - The URL to fetch remote queries. + */ + constructor(sparqlEndpoint, queryEditor, remoteQueriesUrl) { + this.sparqlEndpoint = sparqlEndpoint; + this.queryEditor = queryEditor; + this.remoteQueriesUrl = remoteQueriesUrl; + this.queryAccordion = document.getElementById('queryAccordion'); + this.selectQueryMessage = document.getElementById('selectQueryMessage'); + this.queryCard = document.getElementById('queryCard'); + this.queryTitle = document.getElementById('queryTitle'); + this.queryDescription = document.getElementById('queryDescription'); + this.querySparqlEditor = CodeMirror.fromTextArea(document.getElementById("querySparql"), { + mode: "sparql", + theme: "eclipse", + lineNumbers: true, + matchBrackets: true, + autoCloseBrackets: true, + lineWrapping: true, + readOnly: true, + viewportMargin: Infinity + }); + this.tryQueryButton = document.getElementById('tryQueryButton'); + this.selectedQueryElement = null; + this.queries = []; + + this.initEventListeners(); + this.loadQueries(); + } + + /** + * Initialize event listeners. + * Sets up event listeners for the query accordion and the try query button. + */ + initEventListeners() { + this.queryAccordion.addEventListener('click', this.onQueryClick.bind(this)); + this.tryQueryButton.addEventListener('click', this.onTryQuery.bind(this)); + } + + /** + * Load queries from the remote URL. + * This method fetches a YAML file containing SPARQL queries from the specified remote URL. + * The queries are categorized and displayed in an accordion format. + * @async + */ + async loadQueries() { + try { + // Fetch the YAML file containing the queries + const response = await fetch(`${this.remoteQueriesUrl}index.yaml`); + const text = await response.text(); + const data = yaml.load(text); + const categories = new Map(); + + // Organize queries by category + data.queries.forEach(query => { + if (!categories.has(query.category)) { + categories.set(query.category, []); + } + categories.get(query.category).push(query); + }); + + // Create accordion items for each category and populate with queries + categories.forEach((queries, category) => { + const categoryId = `category-${category.replace(/\s+/g, '-')}`; + const categoryItem = document.createElement('div'); + categoryItem.className = 'accordion-item'; + + categoryItem.innerHTML = ` +

    + +

    +
    +
    +
      + ${queries.map(query => ` +
    • + ${query.title} +
      • + `).join('')} +
    +
    +
    + `; + + this.queryAccordion.appendChild(categoryItem); + }); + + this.queries = data.queries; + } catch (error) { + console.error('Failed to load queries:', error); + } + } + + /** + * Handle query click event. + * This method is triggered when a query is clicked in the accordion. + * It fetches the SPARQL query file and displays its content in the query editor. + * @param {Event} event - The click event. + * @async + */ + async onQueryClick(event) { + if (event.target.matches('.list-group-item')) { + const selectedQuery = this.queries.find(query => query.title === event.target.dataset.queryTitle); + + if (selectedQuery) { + const queryFileResponse = await fetch(`${this.remoteQueriesUrl}${selectedQuery.sparql}`); + const querySparqlText = await queryFileResponse.text(); + + this.queryTitle.textContent = selectedQuery.title; + this.queryDescription.textContent = selectedQuery.description; + this.querySparqlEditor.setValue(querySparqlText); + setTimeout(() => this.querySparqlEditor.refresh(), 0); + this.tryQueryButton.disabled = false; + this.queryCard.classList.remove('d-none'); + this.selectQueryMessage.classList.add('d-none'); + + if (this.selectedQueryElement) { + this.selectedQueryElement.classList.remove('active'); + } + event.target.classList.add('active'); + this.selectedQueryElement = event.target; + } else { + this.queryTitle.textContent = 'Query Title'; + this.queryDescription.textContent = 'Select a query to see its description.'; + this.querySparqlEditor.setValue('SPARQL query will be displayed here.'); + setTimeout(() => this.querySparqlEditor.refresh(), 0); + this.tryQueryButton.disabled = true; + this.queryCard.classList.add('d-none'); + this.selectQueryMessage.classList.remove('d-none'); + } + } + } + + /** + * Handle try query button click event. + * This method is triggered when the "Try this query" button is clicked. + * It sets the selected query in the main query editor and switches to the query editor tab. + */ + onTryQuery() { + const queryText = this.querySparqlEditor.getValue(); + this.queryEditor.editor.setValue(queryText); + const queryEditorTab = new bootstrap.Tab(document.getElementById('query-editor-tab')); + queryEditorTab.show(); + } +} diff --git a/src/js/QueryResults.js b/src/js/QueryResults.js new file mode 100644 index 0000000..11f6019 --- /dev/null +++ b/src/js/QueryResults.js @@ -0,0 +1,155 @@ +/* + * Copyright 2022 European Union + * + * Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European + * Commission – subsequent versions of the EUPL (the "Licence"); You may not use this work except in + * compliance with the Licence. You may obtain a copy of the Licence at: + * https://joinup.ec.europa.eu/software/page/eupl + * + * Unless required by applicable law or agreed to in writing, software distributed under the Licence + * is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the Licence for the specific language governing permissions and limitations under + * the Lic + */ + +/** + * Class representing the Query Results. + * This class is responsible for displaying the results of SPARQL queries and handling related actions. + */ +export class QueryResults { + /** + * Create a Query Results instance. + * @param {QueryEditor} queryEditor - The QueryEditor instance. + * @param {string} originalSparqlEndpoint - The original SPARQL endpoint URL. + */ + constructor(queryEditor, originalSparqlEndpoint) { + this.queryEditor = queryEditor; + this.originalSparqlEndpoint = originalSparqlEndpoint; + this.resultsDiv = document.getElementById("results"); + this.copyUrlButton = document.getElementById('copy-url-button'); + this.openUrlButton = document.getElementById('open-url-button'); + this.copyUrlAlert = document.getElementById('copy-url-alert'); + this.queryResultsTab = new bootstrap.Tab(document.getElementById('query-results-tab')); + + this.initEventListeners(); + } + + /** + * Initialize event listeners. + * Sets up event listeners for the copy URL button and the open URL button. + */ + initEventListeners() { + this.copyUrlButton.addEventListener('click', this.onCopyUrl.bind(this)); + this.openUrlButton.addEventListener('click', this.onOpenUrl.bind(this)); + } + + /** + * Generate the URL for the current query. + * @returns {string} - The generated URL. + */ + generateUrl() { + const query = this.queryEditor.editor.getValue(); + const minifiedQuery = this.queryEditor.minifySparqlQuery(query); + const format = document.getElementById("format").value || "application/sparql-results+json"; + const defaultGraphUri = document.getElementById("default-graph-uri").value; + const timeout = document.getElementById("timeout").value || 30000; + + return `${this.originalSparqlEndpoint}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; + } + + /** + * Display JSON results. + * @param {Object} data - The JSON results data. + */ + displayJsonResults(data) { + this.resultsDiv.innerHTML = ""; + + if (data.results && data.results.bindings.length > 0) { + const table = document.createElement("table"); + table.className = "table sparql monospace"; + + const thead = table.createTHead(); + const headerRow = thead.insertRow(); + const headers = Object.keys(data.results.bindings[0]); + headers.forEach((header) => { + const th = document.createElement("th"); + th.textContent = header; + headerRow.appendChild(th); + }); + + const tbody = table.createTBody(); + data.results.bindings.forEach((row, index) => { + const tr = tbody.insertRow(); + tr.className = index % 2 === 1 ? 'even' : ''; + headers.forEach((header) => { + const td = tr.insertCell(); + td.textContent = row[header]?.value || ""; + }); + }); + + this.resultsDiv.appendChild(table); + this.copyUrlAlert.style.display = 'flex'; + } else { + this.resultsDiv.textContent = "No results found."; + this.copyUrlAlert.style.display = 'none'; + } + } + + /** + * Display text results. + * @param {string} content - The text content. + * @param {string} type - The content type (e.g., 'xml', 'csv', 'text'). + */ + displayTextResults(content, type) { + this.resultsDiv.innerHTML = ""; + + const pre = document.createElement("pre"); + pre.className = "p-3 bg-white border rounded"; + pre.style.overflow = "auto"; + + if (type === 'xml') { + pre.innerHTML = content + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } else { + pre.textContent = content; + } + + this.resultsDiv.appendChild(pre); + this.copyUrlAlert.style.display = 'flex'; + } + + /** + * Handle copy URL button click event. + * Generates a URL for the current query and copies it to the clipboard. + */ + onCopyUrl() { + const url = this.generateUrl(); + + console.log(`Generated URL: ${url}`); + navigator.clipboard.writeText(url).then(() => { + const toast = new bootstrap.Toast(document.getElementById('copyUrlToast')); + toast.show(); + }).catch(err => { + console.error('Failed to copy URL:', err); + }); + } + + /** + * Handle open URL button click event. + * Generates a URL for the current query and triggers a download. + */ + onOpenUrl() { + const url = this.generateUrl(); + + const link = document.createElement('a'); + link.href = url; + link.download = 'query-results'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } +} \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js index 0224853..67d772b 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -11,479 +11,23 @@ * or implied. See the Licence for the specific language governing permissions and limitations under * the Lic */ -import SparqlJs from 'https://cdn.jsdelivr.net/npm/sparqljs@3.7.3/+esm'; -import yaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm'; +import { QueryEditor } from './QueryEditor.js'; +import { QueryLibrary } from './QueryLibrary.js'; +import { HomeTab } from './HomeTab.js'; +import { QueryResults } from './QueryResults.js'; -// Production SPARQL endpoint const SPARQL_ENDPOINT = 'https://publications.europa.eu/webapi/rdf/sparql'; -let sparqlEndpoint; +const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/develop/docs/antora/modules/samples/queries/'; -// Detect if we're running locally -const hostname = window.location.hostname; -const isDevelopment = hostname === 'localhost' || hostname === '127.0.0.1'; - -document.addEventListener('DOMContentLoaded', async function () { - // Set endpoint (with proxy if running locally) - sparqlEndpoint = isDevelopment +document.addEventListener('DOMContentLoaded', function () { + const isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; + const sparqlEndpoint = isDevelopment ? `http://localhost:8080/proxy?url=${encodeURIComponent(SPARQL_ENDPOINT)}` : SPARQL_ENDPOINT; - // Get references to elements - const queryTextarea = document.getElementById('query'); - const runQueryButton = document.getElementById('runQueryButton'); - const queryForm = document.getElementById('queryForm'); - const queryResultsTab = new bootstrap.Tab(document.getElementById('query-results-tab')); - const startTourButton = document.getElementById('start-tour'); - const tryQueryLibraryButton = document.getElementById('try-query-library'); - const queryEditorTab = new bootstrap.Tab(document.getElementById('query-editor-tab')); - const queryLibraryTab = new bootstrap.Tab(document.getElementById('query-library-tab')); - const copyUrlButton = document.getElementById('copy-url-button'); - const copyUrlAlert = document.getElementById('copy-url-alert'); - const openUrlButton = document.getElementById('open-url-button'); - const resultsDiv = document.getElementById("results"); - const queryAccordion = document.getElementById('queryAccordion'); - const selectQueryMessage = document.getElementById('selectQueryMessage'); - const queryCard = document.getElementById('queryCard'); - const queryTitle = document.getElementById('queryTitle'); - const queryDescription = document.getElementById('queryDescription'); - const querySparql = document.getElementById('querySparql'); - const tryQueryButton = document.getElementById('tryQueryButton'); - - // Remove environment selector if it exists - const envSelector = document.querySelector('#cellarEnvironment'); - if (envSelector) { - const container = envSelector.closest('.form-floating'); - if (container) { - container.remove(); - } - } - - // Add event listener for textarea changes - queryTextarea.addEventListener('input', function() { - runQueryButton.disabled = !this.value.trim(); - }); - - // Event listeners - startTourButton.addEventListener('click', function () { - console.log('Write your query button clicked'); // Debugging log - queryEditorTab.show(); - }); - - tryQueryLibraryButton.addEventListener('click', function () { - console.log('Try our query library button clicked'); // Debugging log - queryLibraryTab.show(); - }); - - // Add event listener for "Try this query" button - tryQueryButton.addEventListener('click', function () { - const queryText = querySparqlEditor.getValue(); - editor.setValue(queryText); - queryEditorTab.show(); - }); - - // Initialize CodeMirror - const editor = CodeMirror.fromTextArea(document.getElementById("query"), { - mode: "sparql", - theme: "eclipse", - lineNumbers: true, - matchBrackets: true, - autoCloseBrackets: true, - lineWrapping: true, - extraKeys: {"Ctrl-Space": "autocomplete"}, - placeholder: "Enter your SPARQL query here..." - }); - - // Initialize CodeMirror for the query library display - const querySparqlEditor = CodeMirror.fromTextArea(document.getElementById("querySparql"), { - mode: "sparql", - theme: "eclipse", - lineNumbers: true, - matchBrackets: true, - autoCloseBrackets: true, - lineWrapping: true, - readOnly: true, - viewportMargin: Infinity // Ensure the editor adjusts its height to fit the content - }); - - let errorMarker = null; // Variable to store the error marker - - // Add this function to minify SPARQL queries using sparqljs - function minifySparqlQuery(query) { - const parser = new SparqlJs.Parser(); - const generator = new SparqlJs.Generator(); - const parsedQuery = parser.parse(query); - return generator.stringify(parsedQuery); - } - - // Add this function to check SPARQL syntax using sparqljs - function checkSparqlSyntax(query) { - const parser = new SparqlJs.Parser(); - try { - parser.parse(query); - return null; // No errors - } catch (error) { - return error; // Return error object - } - } - - // Update button state on editor changes - function onEditorChange() { - const query = editor.getValue(); - const error = checkSparqlSyntax(query); - - if (error) { - // Log the error object to inspect its structure - console.log('SPARQL Syntax Error:', error); - - // Clear previous error marker - if (errorMarker) { - errorMarker.clear(); - } - - // Highlight the error position in the editor if location is available - if (error.hash && error.hash.loc && error.hash.loc.first_line && error.hash.loc.last_line) { - const start = error.hash.loc; - errorMarker = editor.markText( - { line: start.first_line - 1, ch: start.first_column }, - { line: start.last_line - 1, ch: start.last_column }, - { className: 'syntax-error-highlight', title: `${error.message}` } - ); - addTooltipToMarker(errorMarker, `${error.message}`); - } else if (error.hash && error.hash.loc && error.hash.loc.first_line) { - const start = error.hash.loc; - errorMarker = editor.markText( - { line: start.first_line - 1, ch: 0 }, - { line: start.first_line - 1, ch: editor.getLine(start.first_line - 1).length }, - { className: 'syntax-error-highlight', title: `${error.message}` } - ); - addTooltipToMarker(errorMarker, `${error.message}`); - } - runQueryButton.disabled = true; // Disable the button if there's a syntax error - } else { - // Clear previous error marker - if (errorMarker) { - errorMarker.clear(); - errorMarker = null; - } - runQueryButton.disabled = !query.trim(); // Enable the button only if the query is not empty - } - } - - function addTooltipToMarker(marker, message) { - const markerElements = marker.replacedWith || [marker]; - markerElements.forEach((element) => { - const from = element.from || marker.from; - const to = element.to || marker.to; - if (from && to) { - const lineHandle = editor.getLineHandle(from.line); - const lineElement = editor.getWrapperElement().querySelector(`.CodeMirror-line:nth-child(${from.line + 1})`); - - if (lineElement) { - lineElement.addEventListener('mouseenter', function () { - const tooltip = document.createElement('div'); - tooltip.className = 'custom-tooltip'; - tooltip.textContent = message; - document.body.appendChild(tooltip); - - const rect = lineElement.getBoundingClientRect(); - tooltip.style.left = `${rect.left + window.scrollX}px`; - tooltip.style.top = `${rect.bottom + window.scrollY}px`; - - lineElement.addEventListener('mouseleave', function () { - tooltip.remove(); - }, { once: true }); - }); - } - } - }); - } - - editor.on("change", onEditorChange); - - // Update copyUrlButton click handler - copyUrlButton.addEventListener('click', function () { - const query = editor.getValue(); - const minifiedQuery = minifySparqlQuery(query); - const format = document.getElementById("format").value || "application/sparql-results+json"; - const defaultGraphUri = document.getElementById("default-graph-uri").value; - const timeout = document.getElementById("timeout").value || 30000; - - // Use the original SPARQL endpoint URL - const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; - - console.log(`Generated URL: ${url}`); - navigator.clipboard.writeText(url).then(() => { - const toast = new bootstrap.Toast(document.getElementById('copyUrlToast')); - toast.show(); - }).catch(err => { - console.error('Failed to copy URL:', err); - }); - }); - - // Update openUrlButton click handler - openUrlButton.addEventListener('click', function () { - const query = editor.getValue(); - const minifiedQuery = minifySparqlQuery(query); - const format = document.getElementById("format").value || "application/sparql-results+json"; - const defaultGraphUri = document.getElementById("default-graph-uri").value; - const timeout = document.getElementById("timeout").value || 30000; - - // Use the original SPARQL endpoint URL - const url = `${SPARQL_ENDPOINT}?default-graph-uri=${encodeURIComponent(defaultGraphUri)}&query=${encodeURIComponent(minifiedQuery)}&format=${encodeURIComponent(format)}&timeout=${encodeURIComponent(timeout)}`; - - window.open(url, '_blank'); - }); - - queryForm.addEventListener('submit', async function (event) { - event.preventDefault(); - - // Show progress bar and disable Run Query button - const progressBar = document.querySelector('.progress-bar'); - const submitButton = this.querySelector('button[type="submit"]'); - progressBar.style.width = '100%'; - progressBar.classList.add('progress-bar-striped', 'progress-bar-animated'); - submitButton.disabled = true; - - try { - // Get query from CodeMirror instead of textarea - const query = editor.getValue(); - const format = document.getElementById("format").value || "application/sparql-results+json"; - const defaultGraphUri = document.getElementById("default-graph-uri").value; - const timeout = document.getElementById("timeout").value; - const strict = document.getElementById("strict").checked ? "true" : "false"; - const debug = document.getElementById("debug").checked ? "true" : "false"; - const report = document.getElementById("report").checked ? "true" : "false"; - - const body = `query=${encodeURIComponent(query)}&format=${encodeURIComponent(format)}` - + (defaultGraphUri ? `&default-graph-uri=${encodeURIComponent(defaultGraphUri)}` : "") - + (timeout ? `&timeout=${encodeURIComponent(timeout)}` : "") - + `&strict=${encodeURIComponent(strict)}` - + `&debug=${encodeURIComponent(debug)}` - + `&report=${encodeURIComponent(report)}`; - - console.log(`Request body: ${body}`); - console.log(`Sending request to: ${sparqlEndpoint}`); - - const response = await fetch(sparqlEndpoint, { - method: "POST", - headers: { "Content-Type": "application/x-www-form-urlencoded" }, - body: body - }); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const contentType = response.headers.get('content-type'); - let result; - - if (contentType.includes('json')) { - result = await response.json(); - displayJsonResults(result); - } else if (contentType.includes('html') || - format === 'text/html' || - format === 'text/x-html+tr' || - format === 'application/vnd.ms-excel') { - // Handle HTML and spreadsheet content - result = await response.text(); - resultsDiv.innerHTML = result; // Use resultsDiv here - - // Fix table structure and pre tags - const table = resultsDiv.querySelector('table'); - if (table) { - // Fix thead - const firstRow = table.querySelector('tr'); - if (firstRow && firstRow.querySelectorAll('th').length > 0) { - if (!table.querySelector('thead')) { - const thead = document.createElement('thead'); - thead.appendChild(firstRow); - table.insertBefore(thead, table.firstChild); - } - } - - // Fix pre tags in cells - table.querySelectorAll('td pre').forEach(pre => { - pre.style.whiteSpace = 'pre-wrap'; - pre.style.wordBreak = 'break-word'; - pre.style.overflowX = 'hidden'; - }); - } - - copyUrlAlert.style.display = 'flex'; - } else if (contentType.includes('xml')) { - result = await response.text(); - displayTextResults(result, 'xml'); - } else if (contentType.includes('csv')) { - result = await response.text(); - displayTextResults(result, 'csv'); - } else { - result = await response.text(); - displayTextResults(result, 'text'); - } - } catch (error) { - resultsDiv.textContent = `Error: ${error.message}`; // Use resultsDiv here - copyUrlAlert.style.display = 'none'; // Hide the alert box if there's an error - } finally { - // Reset progress bar and re-enable Run Query button - progressBar.style.width = '0%'; - progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); - submitButton.disabled = false; - } - - // Switch to the results tab - queryResultsTab.show(); - }); - - function displayJsonResults(data) { - const resultsDiv = document.getElementById("results"); - resultsDiv.innerHTML = ""; - - if (data.results && data.results.bindings.length > 0) { - const table = document.createElement("table"); - table.className = "table sparql monospace"; - - // Create table headers - const thead = table.createTHead(); - const headerRow = thead.insertRow(); - const headers = Object.keys(data.results.bindings[0]); - headers.forEach((header) => { - const th = document.createElement("th"); - th.textContent = header; - headerRow.appendChild(th); - }); - - // Create table rows - const tbody = table.createTBody(); - data.results.bindings.forEach((row, index) => { - const tr = tbody.insertRow(); - tr.className = index % 2 === 1 ? 'even' : ''; // Use CSS classes instead of inline styles - headers.forEach((header) => { - const td = tr.insertCell(); - td.textContent = row[header]?.value || ""; - }); - }); - - resultsDiv.appendChild(table); - copyUrlAlert.style.display = 'flex'; - } else { - resultsDiv.textContent = "No results found."; - copyUrlAlert.style.display = 'none'; - } - } - - function displayTextResults(content, type) { - const resultsDiv = document.getElementById("results"); - resultsDiv.innerHTML = ""; - - const pre = document.createElement("pre"); - pre.className = "p-3 bg-white border rounded"; - pre.style.overflow = "auto"; - - if (type === 'xml') { - pre.innerHTML = content - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); - } else { - pre.textContent = content; - } - - resultsDiv.appendChild(pre); - copyUrlAlert.style.display = 'flex'; - } - - let queries = []; - let selectedQueryElement = null; - - const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/develop/docs/antora/modules/samples/queries/'; - - // Load categories and queries from a remote YAML file - async function loadQueries() { - try { - const response = await fetch(`${REMOTE_QUERIES_URL}index.yaml`); - const text = await response.text(); - const data = yaml.load(text); - const categories = new Map(); - - data.queries.forEach(query => { - if (!categories.has(query.category)) { - categories.set(query.category, []); - } - categories.get(query.category).push(query); - }); - - categories.forEach((queries, category) => { - const categoryId = `category-${category.replace(/\s+/g, '-')}`; - const categoryItem = document.createElement('div'); - categoryItem.className = 'accordion-item'; - - categoryItem.innerHTML = ` -

    - -

    -
    -
    -
      - ${queries.map(query => ` -
    • - ${query.title} -
      • - `).join('')} -
    -
    -
    - `; - - queryAccordion.appendChild(categoryItem); - }); - - // Store the queries for later use - queries = data.queries; - } catch (error) { - console.error('Failed to load queries:', error); - } - } - - // Display selected query details - queryAccordion.addEventListener('click', async function (event) { - if (event.target.matches('.list-group-item')) { - const selectedQuery = queries.find(query => query.title === event.target.dataset.queryTitle); - - if (selectedQuery) { - const queryFileResponse = await fetch(`${REMOTE_QUERIES_URL}${selectedQuery.sparql}`); - const querySparqlText = await queryFileResponse.text(); - - queryTitle.textContent = selectedQuery.title; - queryDescription.textContent = selectedQuery.description; - querySparqlEditor.setValue(querySparqlText); - setTimeout(() => querySparqlEditor.refresh(), 0); // Ensure the editor is refreshed after setting the value - tryQueryButton.disabled = false; - queryCard.classList.remove('d-none'); - selectQueryMessage.classList.add('d-none'); - - // Highlight the selected query - if (selectedQueryElement) { - selectedQueryElement.classList.remove('active'); - } - event.target.classList.add('active'); - selectedQueryElement = event.target; - } else { - queryTitle.textContent = 'Query Title'; - queryDescription.textContent = 'Select a query to see its description.'; - querySparqlEditor.setValue('SPARQL query will be displayed here.'); - setTimeout(() => querySparqlEditor.refresh(), 0); // Ensure the editor is refreshed after setting the value - tryQueryButton.disabled = true; - queryCard.classList.add('d-none'); - selectQueryMessage.classList.remove('d-none'); - } - } - }); - - // Load queries on page load - loadQueries(); - + new HomeTab(); + const queryEditor = new QueryEditor(sparqlEndpoint); + const queryResults = new QueryResults(queryEditor, SPARQL_ENDPOINT); + queryEditor.setQueryResults(queryResults); + new QueryLibrary(sparqlEndpoint, queryEditor, REMOTE_QUERIES_URL); }); From 7fc0518f2d82728a0d2f287a420d028f47412f9b Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Sun, 15 Dec 2024 17:11:03 +0100 Subject: [PATCH 05/10] Cleaned up CSS stylesheet. --- index.html | 43 +------------------------------------ src/assets/style.css | 51 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 9b79ac7..3c854cf 100644 --- a/index.html +++ b/index.html @@ -26,48 +26,7 @@ - + diff --git a/src/assets/style.css b/src/assets/style.css index 351ca3f..9b86248 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -24,6 +24,7 @@ --ted-text-color: #fff; /* Text color */ } +/* General Styles */ body { display: flex; flex-direction: column; @@ -410,3 +411,53 @@ main { z-index: 10; pointer-events: none; /* Prevent tooltip from interfering with mouse events */ } + +/* Query Library Styles */ +.list-group-item-action:hover { + cursor: pointer; +} + +.list-group-item-action { + user-select: none; /* Prevent caret from appearing */ +} + +#queryCard { + display: flex; + flex-direction: column; + height: 100%; +} + +#querySparql { + flex-grow: 1; + overflow-y: auto; +} + +#queryDetails { + flex-shrink: 0; +} + +.col-md-8 { + display: flex; + flex-direction: column; + height: 100%; +} + +.card-body { + display: flex; + flex-direction: column; + height: 100%; +} + +.container-fluid { + padding-left: 0; + padding-right: 0; +} + +.accordion-container { + overflow-y: auto; + flex-grow: 1; + max-height: calc(100vh - 200px); /* Further adjust height to fit within the tab */ + margin-bottom: 20px; /* Add margin at the bottom */ + border: 1px solid #dee2e6; /* Add border */ + border-radius: 0.25rem; /* Add border radius */ +} From 6120a50d905e1206f02da183e36fbaafb65f7128 Mon Sep 17 00:00:00 2001 From: Ioannis Rousochatzakis Date: Mon, 16 Dec 2024 12:00:46 +0100 Subject: [PATCH 06/10] Minor update in the help page. --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 3c854cf..8b3b311 100644 --- a/index.html +++ b/index.html @@ -256,6 +256,7 @@

    Help

    How to use this tool

      +
    • Use the Query Library tab to explore suggested SPARQL queries. These will help you get started.
    • Use the Query Editor tab to compose your SPARQL query.
    • To test your query use the Run Query button.
    • The results will be displayed in the Query Results tab.
      • From f3d073a1b14fc2e303e3e36ce5fc7924bb1cba59 Mon Sep 17 00:00:00 2001 From: Cristian Vasquez Date: Tue, 11 Feb 2025 15:11:29 +0100 Subject: [PATCH 07/10] Update link to the application Fixes: https://github.com/OP-TED/ted-open-data/issues/11 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2a75322..77cbdb3 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ A web-based SPARQL query editor for exploring TED Open Data. This application al ## Live Version -Visit [TED SPARQL Editor](https://docs.ted.europa.eu/ted-sparql-editor) to use the live version of the application. +Visit [TED Open Data](https://data.ted.europa.eu/) to use the live version of the application. ## Development Setup @@ -132,4 +132,4 @@ All third-party components are used under their respective licenses. [^1]: _Copyright 2022 European Union_ _Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission – subsequent versions of the EUPL (the "Licence");_ _You may not use this work except in compliance with the Licence. You may obtain [a copy of the Licence here](LICENSE)._ -_Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence._ \ No newline at end of file +_Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence._ From 45dccdf14fbc0debe342d62154ee0085350e2f85 Mon Sep 17 00:00:00 2001 From: Victorio BENTIVOGLI Date: Tue, 13 May 2025 10:49:49 -0300 Subject: [PATCH 08/10] Updated queries endpoint and accordion header color. --- src/js/QueryLibrary.js | 2 +- src/js/script.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/QueryLibrary.js b/src/js/QueryLibrary.js index 34a28f8..b3d9d9f 100644 --- a/src/js/QueryLibrary.js +++ b/src/js/QueryLibrary.js @@ -89,7 +89,7 @@ export class QueryLibrary { categoryItem.className = 'accordion-item'; categoryItem.innerHTML = ` -

      +

      diff --git a/src/js/script.js b/src/js/script.js index 67d772b..0b22f59 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -17,7 +17,7 @@ import { HomeTab } from './HomeTab.js'; import { QueryResults } from './QueryResults.js'; const SPARQL_ENDPOINT = 'https://publications.europa.eu/webapi/rdf/sparql'; -const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/develop/docs/antora/modules/samples/queries/'; +const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/main/docs/antora/modules/samples/queries/'; document.addEventListener('DOMContentLoaded', function () { const isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; From aa02a04f11d935ed088efe258edfb0b0f1f5869c Mon Sep 17 00:00:00 2001 From: Victorio BENTIVOGLI Date: Tue, 13 May 2025 11:04:15 -0300 Subject: [PATCH 09/10] Minor CSS update. --- src/assets/style.css | 5 +++++ src/js/QueryLibrary.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/assets/style.css b/src/assets/style.css index 9b86248..3f49010 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -461,3 +461,8 @@ main { border: 1px solid #dee2e6; /* Add border */ border-radius: 0.25rem; /* Add border radius */ } + +.query-library-accordion-header { + background-color: #daf7a6; + margin-bottom: 0; +} diff --git a/src/js/QueryLibrary.js b/src/js/QueryLibrary.js index b3d9d9f..814b5de 100644 --- a/src/js/QueryLibrary.js +++ b/src/js/QueryLibrary.js @@ -89,7 +89,7 @@ export class QueryLibrary { categoryItem.className = 'accordion-item'; categoryItem.innerHTML = ` -

      +

      From 55f79a9a5719b56a35ab85a098dd07b9d84a8996 Mon Sep 17 00:00:00 2001 From: Victorio BENTIVOGLI Date: Tue, 13 May 2025 12:08:08 -0300 Subject: [PATCH 10/10] Updated endpoint. --- src/js/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/script.js b/src/js/script.js index 0b22f59..67d772b 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -17,7 +17,7 @@ import { HomeTab } from './HomeTab.js'; import { QueryResults } from './QueryResults.js'; const SPARQL_ENDPOINT = 'https://publications.europa.eu/webapi/rdf/sparql'; -const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/main/docs/antora/modules/samples/queries/'; +const REMOTE_QUERIES_URL = 'https://raw.githubusercontent.com/OP-TED/ted-rdf-docs/develop/docs/antora/modules/samples/queries/'; document.addEventListener('DOMContentLoaded', function () { const isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';