https://2pipe.app/toolsSelectorPage.js

1// Standalone Tools Selector page overlay
2document.addEventListener('DOMContentLoaded', function() {
3    const section = document.getElementById('selector-page-section');
4    const mount = document.getElementById('selector-page-mount');
5    const openBtn = document.getElementById('selector-page-btn');
6    const closeBtn = document.getElementById('close-selector-page-btn');
7
8    if (!section || !mount || !openBtn || !closeBtn) return;
9
10    function showSelectorPage() {
11        section.style.display = 'block';
12        document.body.style.overflow = 'hidden';
13        // Add brief instructions (placed above the selector), avoid duplicates
14        const existingDesc = document.getElementById('selector-page-description');
15        if (!existingDesc) {
16            const desc = document.createElement('div');
17            desc.id = 'selector-page-description';
18            desc.className = 'workflow-info-content';
19            desc.innerHTML = `
20                <h3 style="color: var(--accent-color);">What to do here</h3>
21                <p style="font-size: 1.1rem; line-height: 1.6;">
22                    Select one or more tools in each step to match pipelines that use them.
23                    Click items to toggle multiple selections; matched pipelines will appear below with the specific tools that contributed to the score. 
24                    To check the tool and software references, please read the documentation.
25                </p>
26                <a href="https://www.preprints.org/manuscript/202506.0703/v1" target="_blank" class="workflow-link" style="display:inline-flex; gap:0.5rem; align-items:center; margin-top: 0.5rem;">
27                    <i class="fas fa-book"></i> Read documentation
28                </a>
29            `;
30            mount.parentElement.insertBefore(desc, mount);
31        }
32        // Prefer XLSX dataset if available
33        const original = window.MAG_PIPELINES;
34        if (typeof window.MAG_PIPELINES_XLSX !== 'undefined') {
35            window.MAG_PIPELINES = window.MAG_PIPELINES_XLSX;
36        }
37        if (typeof window.renderToolsSelectorInto === 'function') {
38            mount.innerHTML = '';
39            window.renderToolsSelectorInto(mount);
40        }
41        window.MAG_PIPELINES = original;
42    }
43
44    function hideSelectorPage() {
45        section.style.display = 'none';
46        document.body.style.overflow = 'auto';
47        mount.innerHTML = '';
48    }
49
50    openBtn.addEventListener('click', showSelectorPage);
51    closeBtn.addEventListener('click', hideSelectorPage);
52});
53
54