refactor(#8): 🩹 Adjusted to PR comments

cypress/e2e/filtering.cy.js

@@ -1,10 +1,12 @@
+/**Testing whether the Accepted components excists or not  */
 describe('Accepted filtering', () => {
   it('test accepted filter button', function () {
     cy.visit('http://localhost:5173/#')
     cy.get('#doAcceptedFilter').click()
   })
 })
 
+/**Testing whether the Elevation components excists or not  */
 describe('Elevation Control', () => {
   it('test elevation control', function () {
     cy.visit('http://localhost:5173/#')

src/AcceptedFiltering/threePanels.css

@@ -1,7 +1,7 @@
 /* ---------- Buttons (shared look) ---------- */
 /* Reuse your accepted button style for all four */
 #btnDoElevationControl,
-#doAcceptedHost,
+#doAcceptedFiltering,
 #btnTHU,
 #btnTVU,
 #btnTHUFilter {
@@ -22,15 +22,15 @@
 }
 
 #btnDoElevationControl:hover,
-#doAcceptedHost:hover,
+#doAcceptedFiltering:hover,
 #btnTHU:hover,
 #btnTVU:hover,
 #btnTHUFilter:hover {
   background-color: #8f8f8f;
 }
 
 #btnDoElevationControl:active,
-#doAcceptedHost:active,
+#doAcceptedFiltering:active,
 #btnTHU:active,
 #btnTVU:active,
 #btnTHUFilter:active {
@@ -40,7 +40,7 @@
 
 /* Optional: “active mode” outline if you toggle a class via JS */
 #btnDoElevationControl.active,
-#doAcceptedHost.active,
+#doAcceptedFiltering.active,
 #btnTHU.active,
 #btnTVU.active,
 #btnTHUFilter:active {
@@ -116,20 +116,6 @@
   letter-spacing: 0.2px;
 }
 
-/* Row layout for THU / TVU buttons */
-#thu_tvu_list .thu-tvu-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-
-/* Each button takes up half the width nicely */
-#thu_tvu_list .thu-tvu-row button {
-  flex: 1 1 50%;
-  margin: 0; /* override any global margin */
-}
-
 /* Legend container */
 #accepted_legend {
   margin-top: 10px;

src/AcceptedFiltering/threePanels.js

@@ -198,8 +198,7 @@ function rebindElevationLabel() {
 
   slider.slider({ min: -10000, max: 0, values: [-10000, 0] })
   slider.off('slide.custom slidestop.custom change.custom')
-  slider.on('slide.custom', update)
-  slider.on('slidestop.custom change.custom', update)
+  slider.on('slide.custom', 'slidestop.custom change.custom', update)
   update()
 }
 
@@ -261,10 +260,10 @@ function createAcceptedPanel() {
  */
 function ensureAcceptedButton(hooks) {
   const { btns } = ensurePanelScaffold('accepted_list_host')
-  if (!btns || byId('doAcceptedHost')) return
+  if (!btns || byId('doAcceptedFiltering')) return
 
   const btn = document.createElement('button')
-  btn.id = 'doAcceptedHost'
+  btn.id = 'doAcceptedFiltering'
   btn.type = 'button'
   btn.textContent = 'Activate accepted filter'
   btn.addEventListener('click', () => {
@@ -312,7 +311,7 @@ export function toggleAcceptedLegend(show) {
 }
 
 /**
- * Ensures a UL list host exists inside the Accepted section (Does appearnlty nor work without this).
+ * Ensures a UL list host exists inside the Accepted section (Does appearnlty not work without this).
  * @returns {HTMLElement|null}
  */
 function ensureAcceptedListUL() {
@@ -430,7 +429,9 @@ export function initThreePanels(viewer, hooks = {}) {
   byId('btnDoElevationControl')?.addEventListener('click', () =>
     setActive('elevation')
   )
-  byId('doAcceptedHost')?.addEventListener('click', () => setActive('accepted'))
+  byId('doAcceptedFiltering')?.addEventListener('click', () =>
+    setActive('accepted')
+  )
 
   attachSelfHealing(getActive)
 

src/potreeViewer.js

@@ -23,10 +23,6 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
   oc.removeEventListener('mousewheel', oc._listeners?.mousewheel?.[0])
   oc.addEventListener('mousewheel', clampScrollRadius)
 
-  const e = await Potree.loadPointCloud(pointcloudUrl)
-  const pc = e.pointcloud
-  viewer.scene.addPointCloud(pc)
-
   if (settings.edl) viewer.setEDLEnabled(true)
   if (settings.fov) viewer.setFOV(settings.fov)
   if (settings.pointBudget) viewer.setPointBudget(settings.pointBudget)
@@ -68,6 +64,10 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
     initMeasurementsPanel(viewer)
   })
 
+  const e = await Potree.loadPointCloud(pointcloudUrl)
+  const pc = e.pointcloud
+  viewer.scene.addPointCloud(pc)
+
   // Change name of default background from 'None' to 'Globe"'
   $('#background_options_none')
     .text('Globe')
@@ -162,6 +162,7 @@ function overrideShaderForGradient(pc) {
 
 /**
  * Freeze all scrollable ancestors of a given root during an action (e.g., jsTree select)
+ * Need this so that when Elevation control or Accepted filter is activated the sidebar doesn't scroll down to the Scene panel
  *
  * @param {*} action
  */