refactor(#48): 🚚 Updated elevation and acepted code to be more descri…

…ptic
TDT4290-group-4 · Oct 30, 2025 · a016ed7 · a016ed7
1 parent a3c4875
commit a016ed7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
       href="/src/MeasurementControl/measurementsPanel.css"
     />
     <link rel="stylesheet" href="/src/AnnotationControl/annotationPanel.css" />
-    <link rel="stylesheet" href="src/AcceptedFiltering/threePanels.css" />
+    <link rel="stylesheet" href="src/Filter/filter.css" />
   </head>
 
   <body>

diff --git a/src/AcceptedFiltering/threePanels.css → src/Filter/filter.css b/src/AcceptedFiltering/threePanels.css → src/Filter/filter.css
@@ -1,10 +1,7 @@
 /* ---------- Buttons (shared look) ---------- */
 /* Reuse your accepted button style for all four */
 #btnDoElevationControl,
-#doAcceptedFiltering,
-#btnTHU,
-#btnTVU,
-#btnTHUFilter {
+#doAcceptedFiltering {
   display: flex;
   width: 100%;
   margin: 6px 0 10px;
@@ -22,55 +19,34 @@
 }
 
 #btnDoElevationControl:hover,
-#doAcceptedFiltering:hover,
-#btnTHU:hover,
-#btnTVU:hover,
-#btnTHUFilter:hover {
+#doAcceptedFiltering:hover {
   background-color: #8f8f8f;
 }
 
 #btnDoElevationControl:active,
-#doAcceptedFiltering:active,
-#btnTHU:active,
-#btnTVU:active,
-#btnTHUFilter:active {
+#doAcceptedFiltering: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 {
+#doAcceptedFiltering.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'] {
+#elevation_list [id='materials.elevation_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 {
+#elevation_list,
+#accepted_list_host{
   display: block;
   padding: 4px 0;
 }
@@ -101,16 +77,14 @@
 
 /* ---------- 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 {
+#menu_elevation + .pv-menu-list,
+#menu_accepted + .pv-menu-list{
   padding-top: 6px;
 }
 
 /* Optional: header label color alignment with dark UI */
-#menu_elevation2 span,
-#menu_accepted span,
-#menu_thu_tvu span {
+#menu_elevation span,
+#menu_accepted span {
   color: #e6e6e6;
   font-weight: 600;
   letter-spacing: 0.2px;

diff --git a/src/AcceptedFiltering/threePanels.js → src/Filter/filter.js b/src/AcceptedFiltering/threePanels.js → src/Filter/filter.js
@@ -1,7 +1,10 @@
-// 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)
-
+/**   Two Potree sidebar sections with buttons + panel bodies:
+ *  
+ *        • Elevation  → moves #materials.elevation_container into our Elevation body
+ *                        Used for controlling the elevation gradient with a slider and altering between different gradient schemes 
+ *        • Accepted   → custom UI fully defined here (no external module)
+ *                        Used for indicating which points/surveys are accepted as the seabed and which are not
+*/
 const byId = (id) => document.getElementById(id)
 
 /**
@@ -427,7 +430,7 @@ function attachSelfHealing(activeGetter, hooks) {
  * @param {object} viewer      Potree viewer (not used directly here but available to hooks)
  * @param {{onActivateElevation?:Function, onActivateAccepted?:Function, selectCloudOnce?:Function, onElevationRangeChange?:Function}} hooks
  */
-export function initThreePanels(viewer, hooks = {}) {
+export function initFilterPanels(viewer, hooks = {}) {
   // Build sections
   initElevationControls(hooks)
   initAcceptedControlsInline(hooks)

diff --git a/src/potreeViewer.js b/src/potreeViewer.js
@@ -4,7 +4,7 @@ import { initMiniMap } from './MiniMap/miniMap.js'
 import {
   initThreePanels,
   toggleAcceptedLegend
-} from './AcceptedFiltering/threePanels.js'
+} from './Filter/filter.js'
 import { ecef } from './config.js'
 
 /**
@@ -90,7 +90,7 @@ export async function createPotreeViewer(
       })
     }
 
-    initThreePanels(viewer, {
+    initFilterPanels(viewer, {
       onActivateElevation: () => {
         const $ = window.jQuery || window.$
         const slider = $ ? $('#sldHeightRange') : null