diff --git a/README.md b/README.md
index d357859..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
@@ -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
+_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._
diff --git a/index.html b/index.html
index 169fa40..8b3b311 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,9 @@
+
+
+
@@ -34,7 +37,6 @@
-
@@ -55,6 +57,10 @@
+
+
+
@@ -96,18 +102,55 @@
TED Open Data
We welcome your feedback, suggestions for improvement as well as your contributions to the project.
Visit our GitHub Discussions forum to share your ideas and feedback.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Select a query from the available categories on the left.
+
+
+
+
+
+
Query Title
+
Select a query to see its description.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -323,7 +377,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/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/assets/style.css b/src/assets/style.css
index 0f2a99c..3f49010 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;
@@ -392,3 +393,76 @@ 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 */
+}
+
+/* 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 */
+}
+
+.query-library-accordion-header {
+ background-color: #daf7a6;
+ margin-bottom: 0;
+}
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..814b5de
--- /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 d6cf123..67d772b 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -11,275 +11,23 @@
* or implied. See the Licence for the specific language governing permissions and limitations under
* the Lic
*/
+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');
-
- // 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();
- });
-
- // 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');
-
- // Event listeners
- startTourButton.addEventListener('click', function () {
- console.log('Write your query button clicked'); // Debugging log
- 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..."
- });
-
- // Update button state on editor changes
- editor.on("change", function() {
- 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();
- }
-
- // Update copyUrlButton click handler
- copyUrlButton.addEventListener('click', function () {
- const query = minifySparqlQuery(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 || 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)}`;
-
- 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 = minifySparqlQuery(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 || 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)}`;
-
- 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 = document.getElementById("results");
- resultsDiv.innerHTML = result;
-
- // 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) {
- document.getElementById("results").textContent = `Error: ${error.message}`;
- 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';
- }
+ new HomeTab();
+ const queryEditor = new QueryEditor(sparqlEndpoint);
+ const queryResults = new QueryResults(queryEditor, SPARQL_ENDPOINT);
+ queryEditor.setQueryResults(queryResults);
+ new QueryLibrary(sparqlEndpoint, queryEditor, REMOTE_QUERIES_URL);
});