function renderNode()

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);
      });
    }
  }