diff --git a/README.md b/README.md index 24b3e7bb..1839fc85 100644 --- a/README.md +++ b/README.md @@ -48,4 +48,7 @@ Distributed under the Apache 2.0 License. See `LICENSE` for more information. * [Extending QLever UI](#construct-and-theoretical-approach) * [Extending the language parser](docs/extending_parser.md) * [Extending the suggestions](docs/extending_suggestions.md) +* [Examining Queries]() +## Features + diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js index 869c9e94..b8f66926 100755 --- a/backend/static/js/qleverUI.js +++ b/backend/static/js/qleverUI.js @@ -8,6 +8,7 @@ var high_query_time_ms = 100; var very_high_query_time_ms = 1000; var request_log = new Map(); var currentlyActiveQueryWebSocket = null; +var currentQueryResult = null; // Generates a random query id only known to this client. // We don't use consecutive ids to prevent clashes between @@ -389,6 +390,22 @@ $(document).ready(function () { accessToken.on("input", function () { updateBackendCommandVisibility(); }); + + // JSON view button + $("#jsonViewBtn").click(function() { + if (currentQueryResult) { + showJsonModal(currentQueryResult); + } else { + log('No query result available', 'other'); + } + }); + + // JSON download functionality + $("#downloadJsonBtn").click(function() { + if (currentQueryResult) { + downloadJson(currentQueryResult); + } + }); }); @@ -675,6 +692,9 @@ async function processQuery(sendLimit=0, element=$("#exebtn")) { result["warnings"].push("Could not determine operation type, defaulting to \"query\""); } case "Query": + // Store the result for JSON view + currentQueryResult = result; + // Display warnings. displayWarningsIfPresent(result["warnings"]); @@ -1044,3 +1064,28 @@ function renderRuntimeInformationToDom(entry = undefined) { $('#lastQueries').html(queryHistoryList); } } + +// Shows the JSON modal with the current query result +function showJsonModal(result) { + const formattedJson = JSON.stringify(result, null, 2); + $("#jsonContent").text(formattedJson); + $("#jsonView").modal("show"); + log('Showing JSON view', 'other'); +} + +// Downloads the current query result as JSON file +function downloadJson(result) { + const jsonString = JSON.stringify(result, null, 2); + const blob = new Blob([jsonString], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + + const downloadLink = document.createElement('a'); + downloadLink.href = url; + downloadLink.download = window.location.pathname.replace(/^\//, "").replace(/\//, "_") + "_result.json"; + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); + URL.revokeObjectURL(url); + + log('Downloaded JSON result', 'other'); +} diff --git a/backend/templates/index.html b/backend/templates/index.html index eafdfc38..38294960 100644 --- a/backend/templates/index.html +++ b/backend/templates/index.html @@ -346,6 +346,9 @@

Query results:

+

diff --git a/backend/templates/partials/modals.html b/backend/templates/partials/modals.html index a8ebd3e1..ee5e4a67 100644 --- a/backend/templates/partials/modals.html +++ b/backend/templates/partials/modals.html @@ -1,3 +1,4 @@ {% include './modals/settings.html' %} {% include './modals/visualisation.html' %} -{% include './modals/share.html' %} \ No newline at end of file +{% include './modals/share.html' %} +{% include './modals/json.html' %} \ No newline at end of file diff --git a/backend/templates/partials/modals/json.html b/backend/templates/partials/modals/json.html new file mode 100644 index 00000000..828588ec --- /dev/null +++ b/backend/templates/partials/modals/json.html @@ -0,0 +1,25 @@ + + \ No newline at end of file diff --git a/docs/json_results.md b/docs/json_results.md new file mode 100644 index 00000000..948d4cd0 --- /dev/null +++ b/docs/json_results.md @@ -0,0 +1,28 @@ + +### JSON View and Download +QLever UI now includes a JSON view feature that allows users to inspect and download the raw JSON response from SPARQL queries. + +**Key Features:** +- **View JSON Response**: Click the "View JSON" button in the query results to see the formatted JSON response in a modal popup +- **Download JSON**: Download the complete query response as a JSON file with proper formatting +- **Formatted Display**: JSON is displayed with proper indentation and syntax highlighting for easy reading + +**This feature is particularly useful for:** +- Understanding the complete structure of query responses +- Debugging SPARQL queries + + +**How to use:** +1. Execute any SPARQL query +2. In the results area, click the "View JSON" button (appears next to CSV/TSV download buttons) +
+ JSON View Feature +

QLever UI showing "View JSON" button.

+
+3. A modal will open showing the formatted JSON response +
+ JSON View Feature +

JSON view modal showing formatted query response with download functionality

+
+4. Click "Download JSON" to save the response as a file + diff --git a/docs/screenshot_result_options.png b/docs/screenshot_result_options.png new file mode 100644 index 00000000..8119298b Binary files /dev/null and b/docs/screenshot_result_options.png differ diff --git a/docs/screenshot_show_json.png b/docs/screenshot_show_json.png new file mode 100644 index 00000000..9abc1106 Binary files /dev/null and b/docs/screenshot_show_json.png differ