Added time comparison to GUI

index.js

@@ -72,7 +72,7 @@ app.get('/rangeQuery', (req, res) => {
     if (parsedQueryPoint.length !== mtree.dimension)
         return res.status(400).send('Query point has the wrong dimension');
     
-    console.time('mtreeRangeQuery');
+    /*console.time('mtreeRangeQuery');
     const result = mtree.rangeQuery(parsedQueryPoint, parsedRadius);
     console.timeEnd('mtreeRangeQuery');
     //console.log(result.length);
@@ -82,7 +82,21 @@ app.get('/rangeQuery', (req, res) => {
     console.timeEnd('sequentialSearch');
     //console.log(sequentialResult.length);
 
-    res.send(result);
+    res.send(result);*/
+    const start = performance.now();
+    const result = mtree.rangeQuery(parsedQueryPoint, parsedRadius);
+    const RangeQueryTime = performance.now() - start;
+
+    const start2 = performance.now();
+    const sequentialResult = points.filter(point => mtree.distanceFunction(point, parsedQueryPoint) <= parsedRadius);
+    const sequentialSearchTime = performance.now() - start2;
+
+    const timingResult = {
+        mtreeRangeQuery: RangeQueryTime,
+        sequentialSearch: sequentialSearchTime
+    };
+    
+    res.send({ values: result, timingResult });
 });
 
 // Perform a k-NN query on the MTree
@@ -102,18 +116,20 @@ app.get('/kNNQuery', (req, res) => {
     }
     const kInt = parseInt(k, 10);
     
-    console.time('mtreeKNNQuery');
+    const start = performance.now();
     const result = mtree.kNNQuery(parsedQueryPoint, kInt);
-    console.timeEnd('mtreeKNNQuery');
-    //console.log(result);
+    const mtreeKNNQueryTime = performance.now() - start;
 
-    console.time('sequentialSearch');
+    const start2 = performance.now();
     const sequentialResult = points.sort((a, b) => mtree.distanceFunction(a, parsedQueryPoint) - mtree.distanceFunction(b, parsedQueryPoint)).slice(0, kInt);
-    console.timeEnd('sequentialSearch');
-    //const sequentialResultWithDistance = sequentialResult.map(point => ({point, distance: mtree.distanceFunction(point, parsedQueryPoint)}));
-    //console.log(sequentialResult);
+    const sequentialSearchTime = performance.now() - start2;
+
+    const timingResult = {
+        mtreeKNNQuery: mtreeKNNQueryTime,
+        sequentialSearch: sequentialSearchTime
+    };
     
-    res.send(result);
+    res.send({ values: result, timingResult });
 });
 
 // Recreate the MTree with the given dimensions

m-tree/mtree.js

@@ -326,4 +326,3 @@ class MTree {
 }
 
 module.exports = MTree;
-

public/script/main.js

@@ -39,12 +39,14 @@ async function performRangeQuery() {
     setStatus(response.ok);
     if (response.ok) {
         const result = await response.json();
-        result.sort((a, b) => a.distance - b.distance);
+        result.values.sort((a, b) => a.distance - b.distance);
         
-        const table = createTable(result);
+        const table = createTable(result.values);
         document.getElementById('result').innerHTML = '';
         document.getElementById('result').appendChild(table);
-        document.getElementById('status').innerText = 'Range query successful';
+        
+        const { mtreeRangeQuery, sequentialSearch } = result.timingResult;
+        document.getElementById('status').innerText = `Range query successful: MTree (${mtreeRangeQuery.toFixed(3)} ms), Sequential (${sequentialSearch.toFixed(3)} ms)`;
     } else {
         document.getElementById('status').innerText = `Error: ${await response.text()}`;
     }
@@ -66,10 +68,12 @@ async function performKNNQuery() {
     setStatus(response.ok);
     if (response.ok) {
         const result = await response.json();
-        const table = createTable(result);
+        const table = createTable(result.values);
         document.getElementById('result').innerHTML = '';
         document.getElementById('result').appendChild(table);
-        document.getElementById('status').innerText = 'KNN query successful';
+
+        const { mtreeKNNQuery, sequentialSearch } = result.timingResult;
+        document.getElementById('status').innerText = `KNN query successful: MTree (${mtreeKNNQuery.toFixed(3)} ms), Sequential (${sequentialSearch.toFixed(3)} ms)`;
     } else {
         document.getElementById('status').innerText = `Error: ${await response.text()}`;
     }
@@ -171,32 +175,6 @@ async function saveTree() {
     }
 }
 
-/**
- * Loads the MTree from the text area.
- */
-/*async function loadTree() {
-    const input = document.getElementById('treeFileInput');
-    const file = input.files[0];
-    const reader = new FileReader();
-    reader.onload = async (event) => {
-        const treeData = event.target.result;
-        const response = await fetch('/loadTree', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: treeData
-        });
-
-        setStatus(response.ok);
-        if (response.ok) {
-            document.getElementById('status').innerText = 'Tree loaded';
-            toggleButtons(true);
-        } else {
-            document.getElementById('status').innerText = `Error: ${await response.text()}`;
-        }
-    };
-    reader.readAsText(file);
-}*/
-
 /**
  * Loads the MTree from the selected file and posts it to the loadTree API endpoint.
  */

public/style/index.css

@@ -59,6 +59,7 @@ input[type="file"] {
     box-sizing: border-box;
     border: 1px solid var(--text-color);
     border-radius: 0.25rem;
+    margin-bottom: 0.5rem;
 }
 
 select {
@@ -68,7 +69,6 @@ select {
     border: 1px solid var(--text-color);
     border-radius: 0.25rem;
     background-color: white;
-    color: var(--text-color);
     appearance: none;
     cursor: pointer;
 }