in script.js [648:714]
function renderNode(node, container) {
const nodeEl = document.createElement('div');
nodeEl.classList.add('tree-item');
// Check effective existence status (considering parent status)
const effectivelyExists = getEffectiveExistenceStatus(node.id);
// Add class based on effective exists property
nodeEl.classList.add(effectivelyExists ? 'mg-exists' : 'mg-not-exists');
nodeEl.dataset.id = node.id;
// If data model and effective status differ, add a special class
if (node.exists && !effectivelyExists) {
nodeEl.classList.add('mg-exists-conflict');
}
// Create drag handle element
const dragHandle = document.createElement('span');
dragHandle.classList.add('drag-handle');
dragHandle.innerHTML = '⋮⋮';
dragHandle.title = 'Drag to reparent';
// Create a status indicator
const statusIndicator = document.createElement('span');
statusIndicator.classList.add('mg-status-indicator');
statusIndicator.title = effectivelyExists ?
'Exists' :
(node.exists ? 'Marked as exists but parent is planned' : 'Does not exist');
// Create text element for the name and ID
const textElement = document.createElement('span');
textElement.classList.add('mg-label');
textElement.textContent = `${node.display_name} (${node.id})`;
// Append the elements in the correct order
nodeEl.appendChild(dragHandle);
nodeEl.appendChild(statusIndicator);
nodeEl.appendChild(textElement);
// Make the element draggable
nodeEl.setAttribute('draggable', 'true');
// Add drag event listeners
nodeEl.addEventListener('dragstart', handleDragStart);
nodeEl.addEventListener('dragover', handleDragOver);
nodeEl.addEventListener('dragenter', handleDragEnter);
nodeEl.addEventListener('dragleave', handleDragLeave);
nodeEl.addEventListener('drop', handleDrop);
nodeEl.addEventListener('dragend', handleDragEnd);
nodeEl.addEventListener('click', (e) => {
e.stopPropagation();
selectManagementGroup(node.id);
});
container.appendChild(nodeEl);
if (node.children && node.children.length > 0) {
const childrenContainer = document.createElement('div');
childrenContainer.classList.add('children');
nodeEl.appendChild(childrenContainer);
node.children.forEach(child => {
renderNode(child, childrenContainer);
});
}
}