Function initializeDOMObserver

ui/setHints.ts:389–439

()

// Initialize MutationObserver for immediate hint application
function initializeDOMObserver() {
  if (hintsObserver) {
    hintsObserver.disconnect();
  }

  hintsObserver = new MutationObserver((mutations) => {
    // Process added nodes immediately
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === Node.ELEMENT_NODE) {
            // Apply hints to the node itself
            applyHintToElement(node);

            // Apply hints to all relevant children
            const elements = [
              ...Array.from<any>(node.querySelectorAll('button')),
              ...Array.from<any>(node.querySelectorAll('h2')),
              ...Array.from<any>(node.querySelectorAll('label > span')),
              ...Array.from<any>(node.querySelectorAll('.label-wrap > span')),
              ...Array.from<any>(node.querySelectorAll('span[data-testid="block-info"]')),
            ];

            // Include the node itself if it matches
            if (node.matches && (
              node.matches('button')
              || node.matches('h2')
              || node.matches('label > span')
              || node.matches('.label-wrap > span')
              || node.matches('span[data-testid="block-info"]')
            )) {
              elements.push(node);
            }

            // Apply hints immediately to all found elements
            elements.forEach((el) => applyHintToElement(el));
          }
        }
      }
    }
  });

  // Start observing the entire gradio app for changes
  const targetNode = gradioApp();
  if (targetNode) {
    hintsObserver.observe(targetNode, {
      childList: true,
      subtree: true,
    });
  }
}

export function disconnectHintsObserver() {
  if (hintsObserver) {