From 75c5b4370198174a1fd42699d1bedff5b8b38a1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gaute=20Fl=C3=A6gstad?= <gautegf@stud.ntnu.no>
Date: Wed, 1 Oct 2025 12:45:04 +0200
Subject: [PATCH] feat(#5): :sparkles: Display measurements in a sorted list,
 and move the tools for measurements to the same tab

Closes #5
---
 index.html                       |  13 +-
 public/build/potree/sidebar.html |  11 -
 src/measurementsPanel.css        |  20 ++
 src/measurementsPanel.js         | 386 +++++++++++++++++++++++--------
 4 files changed, 318 insertions(+), 112 deletions(-)

diff --git a/index.html b/index.html
index 29196d7..84536ed 100644
--- a/index.html
+++ b/index.html
@@ -55,8 +55,8 @@
     </div>
 
     <link rel="stylesheet" href="/src/measurementsPanel.css" />
-    <script type="module">
-      import { initMeasurementsPanel } from './src/measurementsPanel.js';
+    <script src="/src/measurementsPanel.js"></script>
+    <script>
       window.viewer = new Potree.Viewer(
         document.getElementById('potree_render_area')
       )
@@ -73,12 +73,15 @@
         $('#menu_appearance').next().show()
         $('#menu_tools').next().show()
         $('#menu_scene').next().show()
-        $('#menu_measurements').next().show()
         $('#menu_filters').next().show()
         viewer.toggleSidebar()
         
-        // Initialize custom measurements panel
-        initMeasurementsPanel(viewer)
+        // Initialize custom measurements panel (global function from measurementsPanel.js)
+        if(window.initMeasurementsPanel){
+          window.initMeasurementsPanel(viewer);
+        } else {
+          console.warn('initMeasurementsPanel not found on window');
+        }
       })
 
       let url = './pointclouds/data_converted/metadata.json'
diff --git a/public/build/potree/sidebar.html b/public/build/potree/sidebar.html
index 93b6ca7..1552427 100644
--- a/public/build/potree/sidebar.html
+++ b/public/build/potree/sidebar.html
@@ -116,17 +116,6 @@ <h3 id="menu_scene"><span data-i18n="tb.scene_opt"></span></h3>
 			<div id="scene_object_properties"></div>
 		</div>
 
-		<!-- MEASUREMENTS -->
-		<h3 id="menu_measurements"><span data-i18n="tb.measurements_opt">Measurements</span></h3>
-		<div class="pv-menu-list">
-
-			<div class="divider"><span>Point Measurements</span></div>
-
-			<div id="measurements_list">
-				<!-- Point measurements will be dynamically populated here -->
-			</div>
-		</div>
-
 		<!-- Classification -->
 		<h3 id="menu_filters"><span data-i18n="tb.filters_opt"></span></h3>
 		<div>
diff --git a/src/measurementsPanel.css b/src/measurementsPanel.css
index af89261..67d7d1f 100644
--- a/src/measurementsPanel.css
+++ b/src/measurementsPanel.css
@@ -18,3 +18,23 @@
 #measurements_list::-webkit-scrollbar-track{background:var(--bg-dark-color);}
 #measurements_list::-webkit-scrollbar-thumb{background:var(--bg-color-2);border-radius:4px;}
 #measurements_list::-webkit-scrollbar-thumb:hover{background:var(--color-1);}
+
+/* Modern grouped measurement list */
+#measurement_items{background:#252d31;border:1px solid #1b2326;border-radius:6px;font-size:12px;color:#d9e2e6;}
+#measurement_items .m-empty{padding:10px;text-align:center;opacity:.6;}
+#measurement_items .m-group{border-top:1px solid #303a3f;}
+#measurement_items .m-group:first-child{border-top:none;}
+#measurement_items .m-group-header{display:flex;align-items:center;gap:6px;padding:6px 10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:11px;background:linear-gradient(#2f383d,#2b3438);cursor:pointer;user-select:none;position:sticky;top:0;z-index:1;}
+#measurement_items .m-group-header:hover{background:#374247;}
+#measurement_items .m-group-caret{font-size:10px;width:14px;text-align:center;color:#8fb9c9;}
+#measurement_items .m-group-title{flex:1;color:#c7d4d9;}
+#measurement_items .m-group-count{background:#3d4850;color:#9fb7c2;font-size:10px;padding:2px 6px;border-radius:10px;line-height:1;}
+#measurement_items .m-group-body{padding:4px 4px 6px;}
+#measurement_items .m-row{display:flex;align-items:center;gap:6px;padding:6px 8px;margin:2px 2px;border:1px solid transparent;border-radius:4px;background:#2c3539;transition:background .15s,border-color .15s;cursor:pointer;}
+#measurement_items .m-row-icon{width:16px;flex:0 0 16px;text-align:center;font-size:12px;color:#8fb9c9;filter:drop-shadow(0 0 2px #0a0f12);}
+#measurement_items .m-row:hover{background:#354045;border-color:#425056;}
+#measurement_items .m-row.active{background:#1f4b63;border-color:#2f6b8c;box-shadow:0 0 0 1px #2f6b8c66;}
+#measurement_items .m-row-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+#measurement_items .m-row-delete{background:#3b2626;border:1px solid #5a3a3a;color:#ff9a9a;font-weight:600;font-size:11px;line-height:1;padding:4px 6px;border-radius:4px;cursor:pointer;transition:background .15s, color .15s;}
+#measurement_items .m-row-delete:hover{background:#5a2d2d;color:#fff;}
+
diff --git a/src/measurementsPanel.js b/src/measurementsPanel.js
index 88a55ea..7af504d 100644
--- a/src/measurementsPanel.js
+++ b/src/measurementsPanel.js
@@ -1,127 +1,321 @@
-export function initMeasurementsPanel(viewer){
-  const container = document.getElementById('measurements_list');
-  if(!container){
-    console.warn('Measurements list container not found');
+/**
+ * Measurements Panel
+ * Injects a custom Measurements accordion section, shows grouped measurement
+ * entries with per-type numbering, syncs selection with Potree's jsTree, and
+ * dynamically mounts the native properties panel when a measurement is active.
+ */
+window.initMeasurementsPanel = function initMeasurementsPanel(viewer){
+  // Resolve or create measurements container in Potree menu
+  const existingListContainer = document.getElementById('measurements_list');
+  let targetContainer = existingListContainer;
+  if(!targetContainer){
+    const menu = document.getElementById('potree_menu');
+    if(menu){
+      const header = document.createElement('h3');
+      header.id = 'menu_point_measurements';
+      header.innerHTML = '<span>Measurements</span>';
+      const panel = document.createElement('div');
+      panel.className = 'pv-menu-list';
+      panel.innerHTML = '<div style="margin-bottom:6px" id="measurement_tools_host"></div><div id="measurements_list" class="auto"></div>';
+      // Insert before filters/about if possible, else append at end
+      const about = document.getElementById('menu_about');
+      if(about){
+        menu.insertBefore(panel, about);
+        menu.insertBefore(header, panel);
+      } else {
+        menu.appendChild(header);
+        menu.appendChild(panel);
+      }
+      // Activate tab behavior if jQuery UI accordion already initialized
+      if($(menu).accordion){
+        try { $(menu).accordion('refresh'); } catch(e) {}
+      }
+      // Toggle on header click if not managed by accordion refresh
+      header.addEventListener('click', ()=> panel.style.display = panel.style.display==='none'?'':'none');
+      targetContainer = panel.querySelector('#measurements_list');
+    }
+  }
+  if(!targetContainer){
+    console.warn('Measurements list container not found and dynamic injection failed');
     return;
   }
 
-  const state = new Map();
-  let needsRender = true;
+  let listRoot = document.createElement('div');
+  listRoot.id = 'measurement_items';
+  listRoot.style.cssText = 'max-height:260px; overflow:auto; margin-bottom:6px; border:1px solid #333; border-radius:4px;';
+  targetContainer.parentElement && targetContainer.parentElement.insertBefore(listRoot, targetContainer);
+
+  // Creating an incremental number for each measurment type
+  const creationOrder = [];
+  const uuidRef = new Map();
 
-  function formatNumber(n, p=2){
-    if(n===undefined||n===null||isNaN(n)) return '-';
-    return Number(n).toFixed(p);
+  function trackCreation(obj){
+    if(!obj || !obj.uuid) return;
+    if(!uuidRef.has(obj.uuid)){
+      uuidRef.set(obj.uuid, obj);
+      creationOrder.push(obj.uuid);
+    } else {
+      uuidRef.set(obj.uuid, obj);
+    }
   }
 
-  function distance(a,b){
-    const A = a.position || a; const B = b.position || b;
-    return Math.sqrt((A.x-B.x)**2 + (A.y-B.y)**2 + (A.z-B.z)**2);
+  function buildTypeIndices(items){
+    const indexMap = new Map();
+    for(const uuid of creationOrder){
+      const entry = items.find(it=>it.obj.uuid===uuid);
+      if(!entry) continue;
+      const t = entry.type;
+      if(!indexMap.has(t)) indexMap.set(t, new Map());
+      const map = indexMap.get(t);
+      if(!map.has(uuid)) map.set(uuid, map.size + 1);
+    }
+    return indexMap;
   }
 
-  function inferType(m){
-    if(m.points && m.points.length===1) return 'potCoordinate';
-    if(m.points && m.points.length>1) return 'potDistance';
+  const TYPE_ICONS = {
+    'Point':'●',
+    'Distance':'﹔',
+    'Height':'↕',
+    'Area':'▧',
+    'Angle':'∠',
+    'Circle':'◯',
+    'Azimuth':'N',
+    'Volume':'▣',
+    'Profile':'≋',
+    'Measurement':'●'
+  };
+
+  function resolveType(m){
+    const ctor = m.constructor?.name || '';
+    if(/Volume/i.test(ctor)) return 'Volume';
+    if(/Profile/i.test(ctor)) return 'Profile';
+    if(/Circle/i.test(ctor) || m.showCircle) return 'Circle';
+    if(/Angle/i.test(ctor) || m.showAngle) return 'Angle';
+    if(/Height/i.test(ctor) || m.showHeight && m.points?.length >= 2) return 'Height';
+    if(/Azimuth/i.test(ctor) || m.showAzimuth) return 'Azimuth';
+    if(/Area/i.test(ctor) || (m.showDistances && m.showArea)) return 'Area';
+    if(m.className) return m.className;
+    // Fallback heuristics on point count
+    if(m.points){
+      if(m.points.length === 1) return 'Point';
+      if(m.points.length === 2 && m.showHeight) return 'Height';
+      return 'Distance';
+    }
     return 'Measurement';
   }
 
-  function addMeasurement(m){
-    state.set(m.uuid, {measurement: m, dirty:true});
-    needsRender = true;
+  const originalPropertiesPanel = document.querySelector('#scene_object_properties');
+  // This section is for moving the "scene" object to the meaasurements tab, only if the measurements section is selected, so that all other folders (like camera) stays where it should be
+  let placeholder = null;
+  let originalParent = null;
+  function ensurePlaceholder(){
+    if(originalPropertiesPanel && !placeholder){
+      originalParent = originalPropertiesPanel.parentElement;
+      placeholder = document.createElement('div');
+      placeholder.id = 'scene_object_properties_placeholder';
+      placeholder.style.display='none';
+      originalParent.insertBefore(placeholder, originalPropertiesPanel);
+    }
+  }
+  function showPanelInMeasurements(){
+    ensurePlaceholder();
+    if(!originalPropertiesPanel) return;
+    if(originalPropertiesPanel.parentElement !== targetContainer){
+      targetContainer.innerHTML='';
+      targetContainer.appendChild(originalPropertiesPanel);
+    }
+  }
+  function restorePanelToOriginal(){
+    if(!originalPropertiesPanel || !placeholder || !originalParent) return;
+    if(originalPropertiesPanel.parentElement !== originalParent){
+      originalParent.insertBefore(originalPropertiesPanel, placeholder.nextSibling);
+    }
+    if(targetContainer && targetContainer.children.length === 0){
+      targetContainer.innerHTML = '<div style="padding:4px 8px;font-size:12px;opacity:0.6">Select a measurement to view its properties here</div>';
+    }
   }
 
-  function removeMeasurement(m){
-    state.delete(m.uuid);
-    needsRender = true;
+  if(targetContainer){
+    targetContainer.innerHTML = '<div style="padding:4px 8px;font-size:12px;opacity:0.6">Select a measurement to view its properties here</div>';
   }
 
-  function collectAttributes(point){
-    if(!point) return [];
-    const attrs = [];
-    const accepted = point.accepted ?? point.ACCEPTED ?? point.Accepted;
-    const tvu = point.TVU ?? point.tvu;
-    const thu = point.THU ?? point.thu;
-    if(accepted !== undefined) attrs.push(['accepted', accepted]);
-    if(tvu !== undefined) attrs.push(['TVU', tvu]);
-    if(thu !== undefined) attrs.push(['THU', thu]);
-    return attrs;
+  // Helper to decide if a uuid is a measurement-like object
+  function isMeasurementUUID(uuid){
+    if(!uuid) return false;
+    const s = viewer.scene;
+    return s.measurements.some(m=>m.uuid===uuid) || s.volumes.some(v=>v.uuid===uuid) || s.profiles.some(p=>p.uuid===uuid);
   }
 
-  function render(){
-    if(!needsRender) return;
-    needsRender = false;
-    container.innerHTML = '';
-    if(state.size===0){
-      container.innerHTML = '<div class="empty">No measurements</div>';
+  // If on load there's already a selected measurement, move panel immediately
+  setTimeout(()=>{
+    try {
+      const tree = $('#jstree_scene').jstree && $('#jstree_scene').jstree();
+      if(tree){
+        const sel = tree.get_selected(true)[0];
+        if(sel && sel.data && isMeasurementUUID(sel.data.uuid)){
+          showPanelInMeasurements();
+        }
+      }
+    } catch(_e) {}
+  },0);
+
+  // Build/update the measurement list
+  function rebuildMeasurementList(){
+    if(!listRoot) return;
+    const scene = viewer.scene;
+    const itemsRaw = [
+      ...scene.measurements.map(m=>({type: resolveType(m), obj:m})),
+      ...scene.profiles.map(p=>({type:'Profile', obj:p})),
+      ...scene.volumes.map(v=>({type:'Volume', obj:v}))
+    ];
+    itemsRaw.forEach(entry=> trackCreation(entry.obj));
+    const perTypeNumbers = buildTypeIndices(itemsRaw);
+
+    // Group by type while preserving overall creation order within each type
+    const groups = new Map();
+    for(const entry of itemsRaw){
+      if(!groups.has(entry.type)) groups.set(entry.type, []);
+      groups.get(entry.type).push(entry);
+    }
+    const order = Array.from(groups.keys()).sort();
+    listRoot.innerHTML = '';
+    if(itemsRaw.length===0){
+      listRoot.innerHTML = '<div class="m-empty">No measurements</div>';
       return;
     }
+    order.forEach(type=>{
+      const section = document.createElement('div');
+      section.className = 'm-group';
+      const gid = 'g_'+type.toLowerCase();
+      section.innerHTML = `\n        <div class="m-group-header" data-group="${gid}" data-open="true">\n          <span class="m-group-caret">▾</span>\n          <span class="m-group-title">${type}</span>\n          <span class="m-group-count" id="${gid}_count"></span>\n        </div>\n        <div class="m-group-body" id="${gid}_body"></div>`;
+  listRoot.appendChild(section);
+      const body = section.querySelector('.m-group-body');
+      groups.get(type).forEach(entry=>{
+        const m = entry.obj;
+        const num = perTypeNumbers.get(type)?.get(m.uuid) || 0;
+        const baseName = `${type} #${num}`;
+        const row = document.createElement('div');
+        row.className = 'm-row';
+        row.dataset.uuid = m.uuid;
+        const icon = TYPE_ICONS[type] || TYPE_ICONS['Measurement'];
+        row.innerHTML = `<span class="m-row-icon">${icon}</span><span class="m-row-label" title="${baseName}">${baseName}</span>`+
+          '<button class="m-row-delete" data-act="delete" title="Delete">×</button>';
+        body.appendChild(row);
+      });
+      section.querySelector('#'+gid+'_count').textContent = groups.get(type).length;
+    });
+  }
 
-    for(const {measurement:m} of state.values()){
-      const points = m.points || [];
-      const card = document.createElement('div');
-      card.className='mcard';
-
-      let body = '<table>';
-      if(points.length>0){
-        let total=0;
-        const isDistance = points.length>1;
-        for(let i=0;i<points.length;i++){
-          const pt = points[i];
-          const vec = pt.position || pt;
-          body += `<tr class="coordRow"><td colspan="3">${formatNumber(vec.x)}, ${formatNumber(vec.y)}, ${formatNumber(vec.z)}</td></tr>`;
-          if(!isDistance){
-            const attrs = collectAttributes(pt);
-            for(const [k,v] of attrs){
-              body += `<tr class="attrRow"><td colspan="3">${k}: ${v}</td></tr>`;
-            }
-          }
-          if(i < points.length -1){
-            const seg = distance(points[i], points[i+1]);
-            total += seg;
-            body += `<tr class="segmentRow"><td colspan="3"><div class="segmentConnector"></div><div class="segmentPill">${formatNumber(seg)} m</div></td></tr>`;
-          }
-        }
-        if(points.length>1){
-          body += `<tr class="totalRow"><td colspan="3">${formatNumber(total)} m</td></tr>`;
+  rebuildMeasurementList();
+
+  // Hook into scene add/remove events to refresh list
+  viewer.scene.addEventListener('measurement_added', (e)=>{
+    const obj = e.measurement || e.object || e.detail || null;
+    // Some measurements start as a point, then become distance or height when adding more points to it. This is a listener for that.
+    if(obj && obj.addEventListener && !obj._mp_listenersAttached){
+      obj._mp_listenersAttached = true;
+      // Potree measurement objects usually fire their own events; fallback to polling if needed
+      ['marker_added','marker_removed','point_added','point_removed'].forEach(ev=>{
+        try { obj.addEventListener(ev, ()=> rebuildMeasurementList()); } catch(_e) {}
+      });
+    }
+    rebuildMeasurementList();
+    if(obj && isMeasurementUUID(obj.uuid)){
+      showPanelInMeasurements();
+    } else {
+      const tree = $('#jstree_scene').jstree && $('#jstree_scene').jstree();
+      if(tree){
+        const sel = tree.get_selected(true)[0];
+        if(sel && sel.data && isMeasurementUUID(sel.data.uuid)){
+          showPanelInMeasurements();
         }
       }
-      body += '</table>';
-      card.innerHTML = `
-        <div class="mheader"><div class="mstatus"></div><span>${m.name || inferType(m)}</span><button class="mdelete" data-uuid="${m.uuid}" title="Delete">×</button></div>
-        ${body}`;
-      container.appendChild(card);
     }
-  }
+  });
+  //volume and profile have their own event handlers and wont be included in the basic "measurement_added"
+  viewer.scene.addEventListener('measurement_removed', rebuildMeasurementList);
+  viewer.scene.addEventListener('volume_added', rebuildMeasurementList);
+  viewer.scene.addEventListener('volume_removed', rebuildMeasurementList);
+  viewer.scene.addEventListener('profile_added', rebuildMeasurementList);
+  viewer.scene.addEventListener('profile_removed', rebuildMeasurementList);
 
-  viewer.scene.addEventListener('measurement_added', e=> addMeasurement(e.measurement));
-  viewer.scene.addEventListener('measurement_removed', e=> removeMeasurement(e.measurement));
-
-  viewer.addEventListener('update', ()=>{
-    for(const entry of state.values()){
-      const m = entry.measurement;
-      if(!m.points) continue;
-      // If any point still at (0,0,0) while others not, mark dirty; or if distances change
-      if(m.points.some(pt => (pt.position||pt).x!==0 || (pt.position||pt).y!==0 || (pt.position||pt).z!==0)){
-        if(entry.dirty){
-        } else if(Math.random()<0.02){ // light periodic refresh safety
-          entry.dirty=true;
+  // Click handling for selection, focus and delete
+  listRoot.addEventListener('click', (e)=>{
+    const header = e.target.closest('.m-group-header');
+    if(header){
+      const open = header.getAttribute('data-open') === 'true';
+      header.setAttribute('data-open', String(!open));
+      const caret = header.querySelector('.m-group-caret');
+      const body = header.parentElement.querySelector('.m-group-body');
+      if(body){ body.style.display = open ? 'none':'block'; }
+      if(caret){ caret.textContent = open ? '▸':'▾'; }
+      return;
+    }
+    const btn = e.target.closest('button');
+    const row = e.target.closest('.m-row[data-uuid]');
+    if(!row) return;
+    const uuid = row.dataset.uuid;
+    const scene = viewer.scene;
+    const all = [...scene.measurements, ...scene.profiles, ...scene.volumes];
+    const obj = all.find(o=>o.uuid===uuid);
+    if(!obj) return;
+    if(btn){
+      const act = btn.dataset.act;
+      if(act==='delete'){
+        if(scene.removeMeasurement && scene.measurements.includes(obj)) scene.removeMeasurement(obj);
+        else if(scene.removeVolume && scene.volumes.includes(obj)) scene.removeVolume(obj);
+        else if(scene.removeProfile && scene.profiles.includes(obj)) scene.removeProfile(obj);
+        rebuildMeasurementList();
+        return;
+      }
+    } else {
+      const treeElement = document.getElementById('jstree_scene');
+      if(treeElement && $(treeElement).jstree){
+        let measurementsRoot = $('#jstree_scene').jstree().get_json('measurements');
+        const findNode = (root) => root.children.find(ch => ch.data && ch.data.uuid === uuid);
+        let node = measurementsRoot && findNode(measurementsRoot);
+        if(!node){
+          node = measurementsRoot && measurementsRoot.children.find(ch => ch.data && ch.data.uuid === uuid);
+        }
+        if(node){
+          $.jstree.reference(node.id).deselect_all();
+          $.jstree.reference(node.id).select_node(node.id);
         }
       }
+      [...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach(el=>{
+        el.classList.toggle('active', el.dataset.uuid===uuid);
+      });
+      showPanelInMeasurements();
     }
-    if([...state.values()].some(e=>e.dirty)){
-      for(const e of state.values()) e.dirty=false;
-      needsRender=true; 
-    }
-    render();
   });
 
-  // Initial existing measurements
-  for(const m of viewer.scene.measurements){ addMeasurement(m); }
-  render();
-
-  container.addEventListener('click', e=>{
-    const btn = e.target.closest('button.mdelete');
-    if(!btn) return;
-    const m = state.get(btn.getAttribute('data-uuid'))?.measurement;
-    if(m){ viewer.scene.removeMeasurement(m); }
+  // Sync highlight if selection changes via original tree
+  document.addEventListener('click', (e)=>{
+    if(!e.target.closest('#jstree_scene')) return;
+    setTimeout(()=>{
+      const tree = $('#jstree_scene').jstree();
+      if(!tree) return;
+      const sel = tree.get_selected(true)[0];
+      if(sel && sel.data && sel.data.uuid){
+        const uuid = sel.data.uuid;
+        [...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach(el=>{
+          el.classList.toggle('active', el.dataset.uuid===uuid);
+        });
+        // Determine if selected node is a measurement-like object; if not, restore.
+        const isMeasurement = sel && sel.data && isMeasurementUUID(sel.data.uuid);
+        if(isMeasurement){
+          showPanelInMeasurements();
+        } else {
+          restorePanelToOriginal();
+        }
+      }
+    },0);
   });
+
+  // Move existing tools UI into this section
+  const toolsHost = document.getElementById('measurement_tools_host');
+  const existingTools = document.getElementById('tools');
+  if(toolsHost && existingTools){
+    toolsHost.appendChild(existingTools);
+  }
 }