function initConcreteSyntaxUI()

in playground/tree-sitter/concrete-syntax.js [158:254]
57 lines of code
5 McCabe index (conditional complexity)

function initConcreteSyntaxUI() {
    const queryCheckbox = document.getElementById('query-checkbox');
    const queryTypeSelector = document.querySelector('.query-type-selector');
    const queryTypeRadios = document.querySelectorAll('input[name="query-type"]');
    const queryContainer = document.getElementById('query-container');
    const concreteSyntaxContainer = document.getElementById('concrete-syntax-container');
    const statusText = document.getElementById('concrete-syntax-status');
    const languageSelect = document.getElementById('language-select');

    // Initialize CodeMirror for concrete syntax
    const concreteSyntaxEditor = window.CodeMirror(document.getElementById('concrete-syntax-editor'), {
        lineNumbers: true,
        lineWrapping: true,
        theme: 'default',
        placeholder: 'Enter concrete syntax pattern...',
        mode: 'text',
        tabSize: 2,
        indentWithTabs: false,
        extraKeys: {
            'Ctrl-Enter': function(cm) {
                const pattern = cm.getValue().trim();
                if (pattern) {
                    executeConcreteSyntaxPattern(pattern);
                }
            },
            'Cmd-Enter': function(cm) {
                const pattern = cm.getValue().trim();
                if (pattern) {
                    executeConcreteSyntaxPattern(pattern);
                }
            }
        }
    });

    // Show/hide query sections based on query checkbox and type
    queryCheckbox.addEventListener('change', function() {
        if (this.checked) {
            queryTypeSelector.style.display = 'flex';
            updateQueryContainerVisibility();
        } else {
            queryTypeSelector.style.display = 'none';
            queryContainer.style.visibility = 'hidden';
            queryContainer.style.position = 'absolute';
            concreteSyntaxContainer.style.visibility = 'hidden';
            concreteSyntaxContainer.style.position = 'absolute';
        }
    });

    // Initialize visibility on page load
    if (queryCheckbox.checked) {
        queryTypeSelector.style.display = 'flex';
        updateQueryContainerVisibility();
    }

    // Handle query type changes
    queryTypeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            updateQueryContainerVisibility();
        });
    });

    function updateQueryContainerVisibility() {
        const queryType = document.querySelector('input[name="query-type"]:checked').value;
        
        if (queryType === 'tree-sitter') {
            queryContainer.style.visibility = 'visible';
            queryContainer.style.position = 'relative';
            concreteSyntaxContainer.style.visibility = 'hidden';
            concreteSyntaxContainer.style.position = 'absolute';
        } else {
            queryContainer.style.visibility = 'hidden';
            queryContainer.style.position = 'absolute';
            concreteSyntaxContainer.style.visibility = 'visible';
            concreteSyntaxContainer.style.position = 'relative';
        }
    }

    // Auto-execute on input changes
    let debounceTimer;
    concreteSyntaxEditor.on('change', function(cm) {
        const pattern = cm.getValue().trim();
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            if (pattern) {
                executeConcreteSyntaxPattern(pattern);
            } else {
                clearHighlights();
            }
        }, 300); // 300ms debounce
    });

    // Initialize UI
    if (queryCheckbox.checked) {
        queryTypeSelector.style.display = 'flex';
        updateQueryContainerVisibility();
    }
}