Skip to content

Commit

Permalink
fix(#5): 🐛 Fix UI title displays and some style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@gautegf
gautegf committed Oct 5, 2025
1 parent e575fbf commit 22e2c24
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 26 deletions.
6 changes: 5 additions & 1 deletion src/MeasurementControl/measurementsPanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
position: relative;
}
.measurement-tools-host {
margin-bottom: 6px;
margin-bottom: 32px;
}
.measurement-items-root {
max-height: 260px;
Expand Down Expand Up @@ -259,6 +259,10 @@
align-items: center;
gap: 6px;
}
.measurement-options-block {
margin-top: 12px !important;
display: block;
}
.m-list-title {
margin: 6px 0 4px;
}
Expand Down
78 changes: 53 additions & 25 deletions src/MeasurementControl/measurementsPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,13 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
let listRoot = document.createElement('div')
listRoot.id = 'measurement_items'
listRoot.className = 'measurement-items-root'
const listTitle = document.createElement('div')
listTitle.className = 'm-list-title'
listTitle.textContent = 'List of measurements'
const listDivider = document.createElement('div')
listDivider.className = 'divider'
const dividerSpan = document.createElement('span')
dividerSpan.textContent = 'List of Measurements'
listDivider.appendChild(dividerSpan)
if (targetContainer.parentElement) {
targetContainer.parentElement.insertBefore(listTitle, targetContainer)
targetContainer.parentElement.insertBefore(listDivider, targetContainer)
targetContainer.parentElement.insertBefore(listRoot, targetContainer)
}

Expand Down Expand Up @@ -150,20 +152,49 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
function showPanelInMeasurements() {
ensurePlaceholder()
if (!originalPropertiesPanel) return
const desiredTitle = lastSelection.label
? `Data for ${lastSelection.label}`
: 'Measurement Data'
const hasSelection = !!lastSelection.label
if (originalPropertiesPanel.parentElement !== targetContainer) {
targetContainer.innerHTML = ''
const titleEl = document.createElement('div')
titleEl.id = 'measurement_data_title'
titleEl.className = 'm-data-title'
titleEl.textContent = desiredTitle
targetContainer.appendChild(titleEl)
if (hasSelection) {
const titleEl = document.createElement('div')
titleEl.id = 'measurement_data_title'
titleEl.className = 'm-data-title'
titleEl.textContent = `Data for ${lastSelection.label}`
targetContainer.appendChild(titleEl)
} else {
const msg = document.createElement('div')
msg.className = 'measurement-info-message'
msg.textContent = 'Select a measurement to view its properties here'
targetContainer.appendChild(msg)
}
targetContainer.appendChild(originalPropertiesPanel)
} else {
const titleEl = targetContainer.querySelector('#measurement_data_title')
if (titleEl) titleEl.textContent = desiredTitle
const existingTitle = targetContainer.querySelector(
'#measurement_data_title'
)
const existingInfo = targetContainer.querySelector(
'.measurement-info-message'
)
if (hasSelection) {
if (!existingTitle) {
if (existingInfo) existingInfo.remove()
const titleEl = document.createElement('div')
titleEl.id = 'measurement_data_title'
titleEl.className = 'm-data-title'
titleEl.textContent = `Data for ${lastSelection.label}`
targetContainer.insertBefore(titleEl, originalPropertiesPanel)
} else {
existingTitle.textContent = `Data for ${lastSelection.label}`
}
} else {
if (existingTitle) existingTitle.remove()
if (!existingInfo) {
const msg = document.createElement('div')
msg.className = 'measurement-info-message'
msg.textContent = 'Select a measurement to view its properties here'
targetContainer.insertBefore(msg, originalPropertiesPanel)
}
}
}
}
function restorePanelToOriginal() {
Expand Down Expand Up @@ -325,19 +356,16 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
(selectedUUID = sel.data.uuid)
}
} catch (_e) {}

const titleEl = targetContainer.querySelector('#measurement_data_title')
if (
selectedUUID &&
listRoot.querySelector(`.m-row[data-uuid="${selectedUUID}"]`)
) {
// Update lastSelection + active row highlight
updateActiveSelection(selectedUUID)
if (titleEl) titleEl.textContent = `Data for ${lastSelection.label}`
lastSelection.label && showPanelInMeasurements()
} else {
lastSelection.uuid = null
lastSelection.label = ''
if (titleEl) titleEl.textContent = 'Measurement Data'
showPanelInMeasurements()
}
}
}
Expand Down Expand Up @@ -439,8 +467,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if (removed && removed.uuid && removed.uuid === lastSelection.uuid) {
lastSelection.uuid = null
lastSelection.label = ''
const titleEl = targetContainer.querySelector('#measurement_data_title')
if (titleEl) titleEl.textContent = 'Measurement Data'
showPanelInMeasurements()
}
})
viewer.scene.addEventListener('volume_removed', (e) => {
Expand All @@ -449,8 +476,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if (removed && removed.uuid && removed.uuid === lastSelection.uuid) {
lastSelection.uuid = null
lastSelection.label = ''
const titleEl = targetContainer.querySelector('#measurement_data_title')
if (titleEl) titleEl.textContent = 'Measurement Data'
showPanelInMeasurements()
}
})
viewer.scene.addEventListener('profile_removed', (e) => {
Expand All @@ -459,8 +485,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if (removed && removed.uuid && removed.uuid === lastSelection.uuid) {
lastSelection.uuid = null
lastSelection.label = ''
const titleEl = targetContainer.querySelector('#measurement_data_title')
if (titleEl) titleEl.textContent = 'Measurement Data'
showPanelInMeasurements()
}
})

Expand Down Expand Up @@ -560,6 +585,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const measOptions = document.getElementById('measurement_options_show')
if (measOptions) {
const measLi = measOptions.closest('li') || measOptions
if (measLi && !measLi.classList.contains('measurement-options-block')) {
measLi.classList.add('measurement-options-block')
}
let prev = measLi.previousElementSibling
for (let i = 0; i < 3 && prev; i++) {
if (
Expand Down

0 comments on commit 22e2c24

Please sign in to comment.