+
-
-
-
Please execute your query first.
+
+
+
+
+
+ If there is no tree visible. Zoom out to see the tree.
+
+
+
+
+
+
Please execute your query first.
+
-
+
diff --git a/docs/install_qleverui.md b/docs/install_qleverui.md
index b8a3c991..68d4eb8e 100644
--- a/docs/install_qleverui.md
+++ b/docs/install_qleverui.md
@@ -66,12 +66,18 @@ You should now be able to connect to QLever UI via
. Cont
# Installing QLever UI without docker
When not using docker there are some additional steps to do. QLever UI is built upon a [Python 3](https://www.python.org/downloads/) / [Django 5](https://www.djangoproject.com/) backend so you will need to have Python 3 installed in order to run QLever UI. It's strongly recommended to use [virtual environments](https://docs.python.org/3/library/venv.html) to manage the project's dependencies when not using the docker build. In order to manage the dependencies, we use pip.
-1. Setup formatter
+1. Build frontend components
+ QLever UI includes interactive components that require building:
+
```shell
- npm install
+ npm ci
npm run build
```
+
+ This builds:
+ - SPARQL formatter (WebAssembly module)
+ - Query visualization components for interactive tree analysis
2. If "[pip](https://pypi.org/project/pip/)" is installed on your system / in your virtual environment you can simply use
```shell
diff --git a/docs/query-analysis.md b/docs/query-analysis.md
new file mode 100644
index 00000000..24f03d03
--- /dev/null
+++ b/docs/query-analysis.md
@@ -0,0 +1,42 @@
+# Query Analysis
+
+QLever UI provides interactive analysis of SPARQL query execution to help understand query performance and structure.
+
+## Query Execution Tree
+
+After executing a query, click the "Analysis" button to view:
+- **Query execution tree** showing the hierarchical structure of query operations
+- **Performance timing** for each operation node
+- **Cache status** indicators (cached, pinned, ancestor cached)
+- **Result sizes** and cost estimates for each step
+
+## Navigation
+
+For large or complex query trees, the visualization provides interactive navigation:
+- **Navigate large trees** by dragging to move around the visualization
+- **Zoom in/out** using mouse wheel for detailed inspection
+- **Reset view** by double-clicking to return to default position
+- **Hover details** on nodes to see additional performance metrics
+
+## Performance Indicators
+
+The query tree uses visual cues to help identify performance characteristics:
+- **Color-coded nodes** indicate execution time (normal, high, very high)
+- **Cache status** helps identify optimization opportunities
+- **Total computation time** and query planning metrics displayed at the top
+- **Node details** show sizes, cost estimates, and status information
+
+## Real-time Updates
+
+During query execution, the tree updates in real-time via WebSocket connection, showing progress through different execution phases. This helps understand which parts of complex queries are taking the most time.
+
+## Query History
+
+When logging is enabled, you can navigate between different query executions using the pagination controls at the bottom of the analysis modal.
+
+## Tips for Analysis
+
+- **Large trees**: Use the navigation controls to explore different sections of complex query trees
+- **Performance bottlenecks**: Look for red (very high time) or orange (high time) nodes
+- **Cache optimization**: Nodes marked as "cached" indicate good performance optimization
+- **Query planning**: Check the meta information for time spent on query planning vs execution
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ae1bb849..9cc3aedb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "qlever-ui",
"version": "1.0.0",
"dependencies": {
+ "@panzoom/panzoom": "^4.5.1",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-wasm": "^6.2.2",
@@ -21,6 +22,12 @@
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"license": "MIT"
},
+ "node_modules/@panzoom/panzoom": {
+ "version": "4.6.0",
+ "resolved": "https://registry.npmjs.org/@panzoom/panzoom/-/panzoom-4.6.0.tgz",
+ "integrity": "sha512-3KxkY1lNKFn98fW5ZFR6vV0YzsXj3I4EQDyFWSXME6/cic86eSS7VjuqIjrA3PEpySo0r5fFtlX8eYCt4JPUFQ==",
+ "license": "MIT"
+ },
"node_modules/@rollup/plugin-commonjs": {
"version": "28.0.2",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.2.tgz",
diff --git a/package.json b/package.json
index a32862b1..d49b425f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"author": "",
"description": "",
"dependencies": {
+ "@panzoom/panzoom": "^4.5.1",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-wasm": "^6.2.2",
diff --git a/panzoom/index.js b/panzoom/index.js
new file mode 100644
index 00000000..24ffb29e
--- /dev/null
+++ b/panzoom/index.js
@@ -0,0 +1,83 @@
+import Panzoom from '@panzoom/panzoom';
+
+let panzoomInstance = null;
+
+function initializePanzoom() {
+ const treeViewport = document.getElementById('tree-viewport');
+ const resultTree = document.getElementById('result-tree');
+
+ if (treeViewport && resultTree && !panzoomInstance) {
+ console.log('Initializing panzoom on tree-viewport:', treeViewport);
+
+ panzoomInstance = Panzoom(resultTree, {
+ maxScale: 5,
+ minScale: 0.1,
+ cursor: 'grab',
+ step: 0.1,
+ // Allow free panning for unrestricted scrolling
+ contain: false
+ });
+
+ // Expose the instance globally for centering functions
+ window.panzoomInstance = panzoomInstance;
+
+ // Enable zooming with mouse wheel on the viewport
+ treeViewport.addEventListener('wheel', panzoomInstance.zoomWithWheel);
+
+ // Reset zoom when double-clicking on the viewport
+ treeViewport.addEventListener('dblclick', () => {
+ panzoomInstance.reset();
+ });
+
+ console.log('Panzoom initialized successfully');
+ }
+}
+
+function destroyPanzoom() {
+ if (panzoomInstance) {
+ const treeViewport = document.getElementById('tree-viewport');
+ if (treeViewport) {
+ treeViewport.removeEventListener('wheel', panzoomInstance.zoomWithWheel);
+ treeViewport.removeEventListener('dblclick', panzoomInstance.reset);
+ }
+ panzoomInstance.destroy();
+ panzoomInstance = null;
+ window.panzoomInstance = null;
+ console.log('Panzoom destroyed');
+ }
+}
+
+function resetPanzoom() {
+ if (panzoomInstance) {
+ panzoomInstance.reset();
+ }
+}
+
+function centerTree() {
+ if (panzoomInstance) {
+ const treeViewport = document.getElementById('tree-viewport');
+ const resultTree = document.getElementById('result-tree');
+
+ if (treeViewport && resultTree) {
+ // Zoom out to minimum scale first
+ panzoomInstance.zoom(0.1);
+
+ // Get the actual tree content (Treant container)
+ const treantContainer = resultTree.querySelector('.Treant');
+ if (treantContainer) {
+ // Get dimensions
+ const viewportRect = treeViewport.getBoundingClientRect();
+ const treeRect = treantContainer.getBoundingClientRect();
+
+ // Calculate center position
+ const centerX = (viewportRect.width - treeRect.width) / 2;
+ const centerY = Math.max(20, (viewportRect.height - treeRect.height) / 2); // Min 20px from top
+
+ // Pan to center the tree
+ panzoomInstance.pan(centerX, centerY);
+ }
+ }
+ }
+}
+
+export { initializePanzoom, destroyPanzoom, resetPanzoom, centerTree };
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index 933750ca..48b7b326 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,18 +1,30 @@
import resolve from '@rollup/plugin-node-resolve';
import { wasm } from '@rollup/plugin-wasm';
-export default {
- input: './formatter/index.js', // Entry point for your app
- output: {
- dir: './backend/static/wasm/formatter/',
- format: 'esm',
+export default [
+ {
+ input: './formatter/index.js', // Entry point for your app
+ output: {
+ dir: './backend/static/wasm/formatter/',
+ format: 'esm',
+ },
+ plugins: [
+ resolve(),
+ wasm({
+ maxFileSize: 0, // Set to 0 to always load as separate files
+ publicPath: "/static/wasm/formatter/"
+ }
+ ),
+ ]
},
- plugins: [
- resolve(),
- wasm({
- maxFileSize: 0, // Set to 0 to always load as separate files
- publicPath: "/static/wasm/formatter/"
- }
- ),
- ]
-};
+ {
+ input: './panzoom/index.js', // Entry point for panzoom
+ output: {
+ file: './backend/static/js/panzoom.js',
+ format: 'esm',
+ },
+ plugins: [
+ resolve(),
+ ]
+ }
+];