From 6f25a4d9498134715aa3eb3dd8d64b69d280647a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= <mariewah@stud.ntnu.no>
Date: Wed, 29 Oct 2025 12:14:51 +0100
Subject: [PATCH 1/4] refactor($48): :lipstick: Made the Accepted filtering
 more intuitive

---
 src/AcceptedFiltering/threePanels.css | 16 +++++++++-------
 src/AcceptedFiltering/threePanels.js  |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
index e83b9e6..8dbde01 100644
--- a/src/AcceptedFiltering/threePanels.css
+++ b/src/AcceptedFiltering/threePanels.css
@@ -128,22 +128,24 @@
   align-items: center;
   margin: 3px 0;
   font-size: 13px;
-  color: #ddd; /* visible text */
+  color: #ddd;
 }
 
-/* Color boxes */
+/* Color boxes → now circles */
 #accepted_legend .legend-color {
-  width: 16px;
-  height: 16px;
-  border: 1px solid #777;
-  margin-right: 8px;
-  border-radius: 2px;
+  width: 20px;
+  height: 8px;
+  border-radius: 4px; /* pill shape */
+  margin-left: 6px;
 }
 
 #accepted_legend .legend-color.accepted {
   background-color: #fff;
+  border: #0008;
+  box-shadow: 0 0 4px 1px #fff8;
 }
 
 #accepted_legend .legend-color.not-accepted {
   background-color: #000;
+  box-shadow: 0 0 4px 1px #fff8;
 }
diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js
index 249df0f..e39cf65 100644
--- a/src/AcceptedFiltering/threePanels.js
+++ b/src/AcceptedFiltering/threePanels.js
@@ -299,12 +299,12 @@ function ensureAcceptedLegend() {
     legend.style.display = 'none'
     legend.innerHTML = `
       <div class="legend-row">
+        <span>Accepted points displayed as: </span>
         <div class="legend-color accepted"></div>
-        <span>Accepted points</span>
       </div>
       <div class="legend-row">
+        <span>Not accepted points displayed as: </span>
         <div class="legend-color not-accepted"></div>
-        <span>Not accepted points</span>
       </div>
     `
     list.appendChild(legend)

From 02fc74b1f69174573a168936d01b41ba9daddcad Mon Sep 17 00:00:00 2001
From: Kleinc <kleinc@stud.ntnu.no>
Date: Wed, 29 Oct 2025 12:25:35 +0100
Subject: [PATCH 2/4] refactor(#48): :recycle: Make measurements tools more
 intuitive

Write out name of each measurement tool and move measurements and saved positions above appearance
---
 src/MeasurementControl/measurementsPanel.css | 30 ++++++++++++++
 src/MeasurementControl/measurementsPanel.js  | 42 +++++++++++++++++++-
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
index 96f735f..f22b094 100644
--- a/src/MeasurementControl/measurementsPanel.css
+++ b/src/MeasurementControl/measurementsPanel.css
@@ -271,3 +271,33 @@
   border-top: 1px solid #303a3f;
   padding-top: 10px;
 }
+
+.tool-with-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  cursor: pointer;  
+  border-radius: 4px;
+}
+.tool-with-label:hover {
+  box-shadow: 0 0 5px #fff8;
+}
+
+.tool-with-label:hover img {
+  filter: brightness(1.7); 
+}
+
+.tool-with-label:hover .tool-label {
+  color: #fff;
+}
+
+.tool-label {
+  font-size: 14px;
+  margin-top: 2px;
+  margin-left: 4px;
+  color: #aaa;
+  pointer-events: none; 
+}
+
+
diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
index 6b70ac2..9051705 100644
--- a/src/MeasurementControl/measurementsPanel.js
+++ b/src/MeasurementControl/measurementsPanel.js
@@ -29,7 +29,7 @@ export function initMeasurementsPanel(viewer) {
       panel.appendChild(toolsHostDiv)
       panel.appendChild(listContainerDiv)
       // Insert before filters/tools if possible, else append at end
-      const tools = document.getElementById('menu_tools')
+      const tools = document.getElementById('menu_appearance')
       if (tools) {
         menu.insertBefore(panel, tools)
         menu.insertBefore(header, panel)
@@ -650,6 +650,46 @@ export function initMeasurementsPanel(viewer) {
     toolsHost.appendChild(existingTools)
   }
 
+  // After tools are moved into `toolsHost`
+  const toolDescriptions = {
+    'angle.png': 'Measure angle',
+    'point.svg': 'Add point',
+    'distance.svg': 'Measure distance',
+    'height.svg': 'Measure height',
+    'circle.svg': 'Circle',
+    'azimuth.svg': 'Azimuth',
+    'area.svg': 'Area',
+    'volume.svg': 'Volume',
+    'sphere_distances.svg': 'Sphere volume',
+    'profile.svg': '2D height profile',
+    'reset_tools.svg': 'Remove all'
+  };
+
+  const toolIcons = existingTools.querySelectorAll('img');
+  toolIcons.forEach(img => {
+    const src = img.getAttribute('src');
+    const file = src.split('/').pop(); // extract icon name
+    const baseName = file.replace(/\.[^/.]+$/, '');
+
+    if (toolDescriptions[file]) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'tool-with-label';
+      wrapper.id = `tool-wrapper-${baseName}`;
+
+      wrapper.addEventListener('click', () => img.click());
+
+      img.parentNode.insertBefore(wrapper, img);
+      wrapper.appendChild(img);
+
+      const label = document.createElement('span');
+      label.className = 'tool-label';
+      label.textContent = toolDescriptions[file];
+      label.id = `label-${file.replace(/\.[^/.]+$/, '')}`;
+      wrapper.appendChild(label);
+    }
+  });
+
+
   // Move measurement options UI into our tools host
   if (toolsHost) {
     const measOptions = document.getElementById('measurement_options_show')

From 1aba790259a7e2ac0bdccbf096622c86303012b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= <mariewah@stud.ntnu.no>
Date: Wed, 29 Oct 2025 12:29:42 +0100
Subject: [PATCH 3/4] refactor(#48): :lipstick: Collapsed some panels for a
 better visual representation

---
 src/potreeViewer.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/potreeViewer.js b/src/potreeViewer.js
index ad7a0dc..1cddfcb 100644
--- a/src/potreeViewer.js
+++ b/src/potreeViewer.js
@@ -58,10 +58,10 @@ export async function createPotreeViewer(
 
   viewer.loadGUI(() => {
     viewer.setLanguage('en')
-    $('#menu_appearance').next().show()
-    $('#menu_tools').next().show()
-    $('#menu_scene').next().show()
-    $('#menu_filters').next().show()
+    $('#menu_appearance').next().hide()
+    $('#menu_tools').next().hide()
+    $('#menu_scene').next().hide()
+    $('#menu_filters').next().hide()
     viewer.toggleSidebar()
 
     // Store the last used elevation gradient

From 500894b3fd0e95fe926983a901ca82c4af9d7cd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= <mariewah@stud.ntnu.no>
Date: Wed, 29 Oct 2025 12:37:39 +0100
Subject: [PATCH 4/4] refactor(#48): :fire: Remove the menu_filter panel in the
 sidebar

---
 src/potreeViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/potreeViewer.js b/src/potreeViewer.js
index 1cddfcb..86e1d1b 100644
--- a/src/potreeViewer.js
+++ b/src/potreeViewer.js
@@ -61,7 +61,7 @@ export async function createPotreeViewer(
     $('#menu_appearance').next().hide()
     $('#menu_tools').next().hide()
     $('#menu_scene').next().hide()
-    $('#menu_filters').next().hide()
+    $('#menu_filters').remove()
     viewer.toggleSidebar()
 
     // Store the last used elevation gradient