diff --git a/cypress/e2e/filtering.cy.js b/cypress/e2e/filtering.cy.js
new file mode 100644
index 0000000..9443380
--- /dev/null
+++ b/cypress/e2e/filtering.cy.js
@@ -0,0 +1,24 @@
+/**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/#')
+ cy.get('#btnDoElevationControl').click()
+
+ cy.get(
+ '#elevation_gradient_scheme_selection span:nth-child(8) rect'
+ ).click()
+ cy.get(
+ '#elevation_gradient_scheme_selection span:nth-child(3) rect'
+ ).click()
+
+ cy.get('#sldHeightRange').click()
+ })
+})
diff --git a/index.html b/index.html
index 192e6ef..2f98510 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
href="/src/MeasurementControl/measurementsPanel.css"
/>
+
diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
new file mode 100644
index 0000000..e83b9e6
--- /dev/null
+++ b/src/AcceptedFiltering/threePanels.css
@@ -0,0 +1,149 @@
+/* ---------- Buttons (shared look) ---------- */
+/* Reuse your accepted button style for all four */
+#btnDoElevationControl,
+#doAcceptedFiltering,
+#btnTHU,
+#btnTVU,
+#btnTHUFilter {
+ display: flex;
+ width: 100%;
+ margin: 6px 0 10px;
+ padding: 10px 10px;
+ font-size: 13px;
+ font-weight: 500;
+ background-color: #636262;
+ color: #ffffff;
+ border: 1px solid #555;
+ border-radius: 4px;
+ cursor: pointer;
+ transition:
+ background-color 0.2s ease,
+ transform 0.1s ease;
+}
+
+#btnDoElevationControl:hover,
+#doAcceptedFiltering:hover,
+#btnTHU:hover,
+#btnTVU:hover,
+#btnTHUFilter:hover {
+ background-color: #8f8f8f;
+}
+
+#btnDoElevationControl:active,
+#doAcceptedFiltering:active,
+#btnTHU:active,
+#btnTVU:active,
+#btnTHUFilter:active {
+ transform: scale(0.97);
+ background-color: #a8a6a6;
+}
+
+/* Optional: “active mode” outline if you toggle a class via JS */
+#btnDoElevationControl.active,
+#doAcceptedFiltering.active,
+#btnTHU.active,
+#btnTVU.active,
+#btnTHUFilter:active {
+ outline: 2px solid #7ba8ff;
+ outline-offset: 1px;
+}
+
+/* THU/TVU side-by-side */
+#thu_tvu_list .thu-tvu-row {
+ display: flex;
+ gap: 6px;
+}
+#thu_tvu_list .thu-tvu-row > button {
+ flex: 1 1 50%;
+ margin: 0;
+}
+
+/* ---------- Panels / moved containers ---------- */
+/* Keep Potree’s moved subtrees neat and full-width inside our panels */
+#elevation2_list [id='materials.elevation_container'],
+#thu_tvu_list [id='materials.extra_container'] {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 6px 8px; /* small breathing room since we moved it out of Appearance */
+}
+
+/* Slight spacing inside our panel lists (under the button) */
+#elevation2_list,
+#accepted_list_host,
+#thu_tvu_list {
+ display: block;
+ padding: 4px 0;
+}
+
+/* A small notice style used when an attribute/panel isn’t available */
+.panel-notice {
+ font-size: 13px;
+ color: #ddd;
+ background: rgba(255, 255, 255, 0.04);
+ border: 1px dashed #666;
+ border-radius: 4px;
+ padding: 8px;
+ margin: 6px 0;
+}
+
+/* ---------- Elevation label + slider tweaks ---------- */
+#lblHeightRange {
+ display: inline-block;
+ font-size: 12px;
+ color: #ddd;
+ margin: 4px 0 6px 2px;
+}
+
+/* Make sure the jQuery-UI slider has a little vertical room */
+#sldHeightRange {
+ margin: 6px 4px 10px 4px;
+}
+
+/* ---------- Accordions / headers (light touch) ---------- */
+/* Don’t fight jQuery-UI’s theme. Just small spacing adjustments. */
+#menu_elevation2 + .pv-menu-list,
+#menu_accepted + .pv-menu-list,
+#menu_thu_tvu + .pv-menu-list {
+ padding-top: 6px;
+}
+
+/* Optional: header label color alignment with dark UI */
+#menu_elevation2 span,
+#menu_accepted span,
+#menu_thu_tvu span {
+ color: #e6e6e6;
+ font-weight: 600;
+ letter-spacing: 0.2px;
+}
+
+/* Legend container */
+#accepted_legend {
+ margin-top: 10px;
+ padding-left: 4px;
+}
+
+/* Legend rows */
+#accepted_legend .legend-row {
+ display: flex;
+ align-items: center;
+ margin: 3px 0;
+ font-size: 13px;
+ color: #ddd; /* visible text */
+}
+
+/* Color boxes */
+#accepted_legend .legend-color {
+ width: 16px;
+ height: 16px;
+ border: 1px solid #777;
+ margin-right: 8px;
+ border-radius: 2px;
+}
+
+#accepted_legend .legend-color.accepted {
+ background-color: #fff;
+}
+
+#accepted_legend .legend-color.not-accepted {
+ background-color: #000;
+}
diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js
new file mode 100644
index 0000000..2ab84f4
--- /dev/null
+++ b/src/AcceptedFiltering/threePanels.js
@@ -0,0 +1,440 @@
+// Three Potree sidebar sections with buttons + panel bodies:
+// • Elevation → moves #materials.elevation_container into our Elevation body
+// • Accepted → custom UI fully defined here (no external module)
+
+const byId = (id) => document.getElementById(id)
+
+/**
+ * Refreshes the jQuery-UI accordion after DOM mutations.
+ */
+function accordionRefresh() {
+ const menu = byId('potree_menu')
+ if (window.$ && menu && window.$(menu).accordion) {
+ try {
+ window.$(menu).accordion('refresh')
+ } catch {}
+ }
+}
+
+/**
+ * Inserts a sidebar section with a header and a panel container.
+ * Places it before Appearance/Filters if present, otherwise at the end.
+ * @param {{headerId:string, headerText:string, listId:string}}
+ */
+function insertSection({ headerId, headerText, listId }) {
+ if (byId(listId)) return
+
+ const menu = byId('potree_menu')
+ if (!menu) return
+
+ const header = document.createElement('h3')
+ header.id = headerId
+ header.innerHTML = `${headerText}`
+
+ const panel = document.createElement('div')
+ panel.className = 'pv-menu-list'
+ panel.innerHTML = ``
+
+ const before = byId('menu_appearance') || byId('menu_filters') || null
+ if (before) {
+ menu.insertBefore(panel, before)
+ menu.insertBefore(header, panel)
+ } else {
+ menu.appendChild(header)
+ menu.appendChild(panel)
+ }
+
+ accordionRefresh()
+}
+
+/**
+ * Ensures buttons row and a body container to new panel
+ * @param {string} listId
+ * @returns {{list:HTMLElement|null, btns:HTMLElement|null, body:HTMLElement|null}}
+ */
+function ensurePanelScaffold(listId) {
+ const list = byId(listId)
+ if (!list) return { list: null, btns: null, body: null }
+
+ let btns = list.querySelector('.panel-buttons')
+ let body = list.querySelector('.panel-body')
+
+ if (!btns) {
+ btns = document.createElement('div')
+ btns.className = 'panel-buttons'
+ list.insertBefore(btns, list.firstChild)
+ }
+ if (!body) {
+ body = document.createElement('div')
+ body.className = 'panel-body'
+ list.appendChild(body)
+ }
+ return { list, btns, body }
+}
+
+/**
+ * Shows only the requested body to make for a better visual experience by the user (buttons remain visible at all times).
+ * @param {'elevation'|'accepted'} key
+ */
+function showOnly(key) {
+ const elevBody = byId('elevation2_list')?.querySelector('.panel-body')
+ const accBody = byId('accepted_list_host')?.querySelector('.panel-body')
+
+ if (elevBody) elevBody.style.display = key === 'elevation' ? '' : 'none'
+ if (accBody) accBody.style.display = key === 'accepted' ? '' : 'none'
+}
+
+/**
+ * Clicks a button only once (used for auto-activation of elevation upon opening the application).
+ * @param {string} id
+ */
+function clickOnce(id) {
+ const btn = byId(id)
+ if (btn && !btn.dataset.autoClicked) {
+ btn.dataset.autoClicked = 'true'
+ btn.click()
+ }
+}
+
+/**
+ * Opens the Scene accordion so the Properties/Attributes UI renders and can be moved to customized sections.
+ */
+function openScenePane() {
+ const menu = byId('potree_menu')
+ const header = byId('menu_scene')
+ if (!menu || !header) return
+
+ if (window.$ && window.$(menu).accordion) {
+ try {
+ const headers = [...menu.querySelectorAll(':scope > h3')]
+ const idx = headers.findIndex((h) => h.id === 'menu_scene')
+ if (idx >= 0) window.$(menu).accordion('option', 'active', idx)
+ } catch {}
+ } else {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ }
+}
+
+/**
+ * Ensures a cloud node is selected so the Properties of the Scene renders.
+ * @param {{selectCloudOnce?:Function}} hooks
+ */
+function selectCloudNode(hooks) {
+ if (typeof hooks?.selectCloudOnce === 'function') {
+ try {
+ hooks.selectCloudOnce()
+ return
+ } catch {}
+ }
+ const icon = document.querySelector(
+ '#scene_objects i.jstree-themeicon-custom'
+ )
+ if (icon) icon.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+}
+
+/**
+ * Polls the DOM for an element id so that wverything is ensured displayed.
+ * @param {string} id
+ * @param {number} softMs
+ * @param {number} pollEvery
+ * @returns {Promise}
+ */
+async function waitForOrPoll(id, softMs = 1400, pollEvery = 120) {
+ const start = performance.now()
+ while (performance.now() - start < softMs) {
+ const el = byId(id)
+ if (el) return el
+ await new Promise((r) => setTimeout(r, pollEvery))
+ }
+ return null
+}
+
+/* ───────────────────────────── Elevation panel ───────────────────────────── */
+/**
+ * Inserts the Elevation panel section and scaffold.
+ */
+function createElevationPanel() {
+ insertSection({
+ headerId: 'menu_elevation',
+ headerText: 'Elevation Control',
+ listId: 'elevation2_list'
+ })
+ ensurePanelScaffold('elevation2_list')
+}
+
+/**
+ * Ensures the Elevation action button is present and wired.
+ * @param {{onActivateElevation?:Function}} hooks
+ */
+function ensureElevationButton(hooks) {
+ const { btns } = ensurePanelScaffold('elevation2_list')
+ if (!btns || byId('btnDoElevationControl')) return
+
+ const btn = document.createElement('button')
+ btn.id = 'btnDoElevationControl'
+ btn.type = 'button'
+ btn.textContent = 'Activate elevation control'
+ btn.addEventListener('click', () => {
+ switchMode('elevation', hooks?.onActivateElevation, hooks)
+ })
+ btns.appendChild(btn)
+}
+
+/**
+ * Reconnects the Elevation slider label to reflect the current range.
+ * Assumes #sldHeightRange and #lblHeightRange exist.
+ */
+function rebindElevationLabel() {
+ const $ = window.jQuery || window.$
+ const slider = $ ? $('#sldHeightRange') : null
+ const label = byId('lblHeightRange')
+ if (!slider || !slider.length || !label) return
+
+ const update = () => {
+ const low = slider.slider('values', 0)
+ const high = slider.slider('values', 1)
+ label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}`
+ }
+
+ slider.slider({ min: -10000, max: 0, values: [-10000, 0] })
+ slider.off('slide.custom slidestop.custom change.custom')
+ slider.on('slide.custom', 'slidestop.custom change.custom', update)
+ update()
+}
+
+/**
+ * Moves Potree's Elevation container under the Elevation panel body and rebinds label.
+ * @returns {boolean} true if moved or already in place
+ */
+function moveElevationContainer() {
+ const { body } = ensurePanelScaffold('elevation2_list')
+ const src = byId('materials.elevation_container')
+ if (!body || !src) return false
+
+ if (src.parentNode !== body) {
+ body.appendChild(src)
+ rebindElevationLabel()
+ accordionRefresh()
+ }
+ return true
+}
+
+/**
+ * Initializes Elevation section and passive self-healing for rebuilds.
+ * @param {{onActivateElevation?:Function}} hooks
+ */
+function initElevationControls(hooks) {
+ createElevationPanel()
+ ensureElevationButton(hooks)
+
+ const root = byId('potree_menu') || document.body
+ const obs = new MutationObserver(() => {
+ if (byId('materials.elevation_container')) moveElevationContainer()
+ })
+ obs.observe(root, { childList: true, subtree: true })
+}
+
+/* ───────────────────────────── Accepted panel ───────────────────────────── */
+
+/**
+ * Inserts the Accepted section and an inner host container.
+ */
+function createAcceptedPanel() {
+ insertSection({
+ headerId: 'menu_accepted',
+ headerText: 'Accepted Filter',
+ listId: 'accepted_list_host'
+ })
+ const { body } = ensurePanelScaffold('accepted_list_host')
+
+ if (body && !byId('accepted_list')) {
+ const wrap = document.createElement('div')
+ wrap.id = 'accepted_list'
+ body.appendChild(wrap)
+ }
+}
+
+/**
+ * Ensures the Accepted action button is present.
+ * @param {{onActivateAccepted?:Function}} hooks
+ */
+function ensureAcceptedButton(hooks) {
+ const { btns } = ensurePanelScaffold('accepted_list_host')
+ if (!btns || byId('doAcceptedFiltering')) return
+
+ const btn = document.createElement('button')
+ btn.id = 'doAcceptedFiltering'
+ btn.type = 'button'
+ btn.textContent = 'Activate accepted filter'
+ btn.addEventListener('click', () => {
+ switchMode('accepted', hooks?.onActivateAccepted, hooks)
+ })
+ btns.appendChild(btn)
+}
+
+/**
+ * Creates legend under the Accepted list for accepted and not accepted indication.
+ * @returns {HTMLElement|null}
+ */
+function ensureAcceptedLegend() {
+ const list = byId('accepted_list')
+ if (!list) return null
+
+ let legend = list.querySelector('#accepted_legend')
+ if (!legend) {
+ legend = document.createElement('div')
+ legend.id = 'accepted_legend'
+ legend.style.display = 'none'
+ legend.innerHTML = `
+
+
+
+
Not accepted points
+