Add ability to show json

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
+
 

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');
+}

backend/templates/index.html

@@ -346,6 +346,9 @@ <h3>Query results:</h3>
               <button class="btn btn-default disabled">
                 <i class="glyphicon glyphicon-transfer"></i> <span id="jsonTime"></span> <span class="d">for resolving and sending</span>
               </button>
+              <button class="btn btn-default" id="jsonViewBtn">
+                <i class="glyphicon glyphicon-list-alt"></i> <span class="d">View JSON</span>
+              </button>
             </div>
             <br><br>
 

backend/templates/partials/modals.html

@@ -1,3 +1,4 @@
 {% include './modals/settings.html' %}
 {% include './modals/visualisation.html' %}
-{% include './modals/share.html' %}
+{% include './modals/share.html' %}
+{% include './modals/json.html' %}

backend/templates/partials/modals/json.html

@@ -0,0 +1,25 @@
+<div class="modal" tabindex="-1" role="dialog" id="jsonView">
+    <div class="modal-dialog" role="document" style="width: 90%;">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title pull-left">JSON Response</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="pull-right" style="margin-bottom: 10px;">
+            <button class="btn btn-success" id="downloadJsonBtn">
+              <i class="glyphicon glyphicon-download-alt"></i> Download JSON
+            </button>
+          </div>
+          <div style="clear: both;"></div>
+          <pre id="jsonContent" style="max-height: 500px; overflow-y: auto; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; border-radius: 4px;"></pre>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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) 
+<div style="text-align: center;">
+    <img src="docs/screenshot_result_options.png" alt="JSON View Feature" width="80%">
+    <p><em>QLever UI showing "View JSON" button.</em></p>
+</div>
+3. A modal will open showing the formatted JSON response
+<div style="text-align: center;">
+    <img src="docs/screenshot_show_json.png" alt="JSON View Feature" width="80%">
+    <p><em>JSON view modal showing formatted query response with download functionality</em></p>
+</div>
+4. Click "Download JSON" to save the response as a file
+