https://2pipe.app/workflow-info.js

1document.addEventListener('DOMContentLoaded', function() {
2    const workflowBtn = document.getElementById('general-workflow-btn');
3    const workflowSection = document.getElementById('workflow-info-section');
4    const closeWorkflowBtn = document.getElementById('close-workflow-info-btn');
5
6    if (!workflowBtn || !workflowSection || !closeWorkflowBtn) {
7        console.error('Required workflow elements not found');
8        return;
9    }
10
11    // Initialize back to top button
12    const backToTopBtn = initializeBackToTopButton(workflowSection);
13
14    // Function to handle scroll event
15    function handleWorkflowScroll() {
16        if (workflowSection.scrollTop > 300) {
17            backToTopBtn.style.display = 'block';
18        } else {
19            backToTopBtn.style.display = 'none';
20        }
21    }
22
23    // Function to scroll to top
24    function scrollToTop() {
25        workflowSection.scrollTo({
26            top: 0,
27            behavior: 'smooth'
28        });
29    }
30
31    // Add scroll event listener to workflow section
32    workflowSection.addEventListener('scroll', handleWorkflowScroll);
33
34    // Add click event listener to back to top button
35    backToTopBtn.addEventListener('click', scrollToTop);
36
37    // Workflow content template
38    const workflowContent = `
39        <div class="workflow-page">
40            <div class="workflow-header">
41                <h1>General MAG reconstruction process</h1>
42                <p>The traditional computational workflow to build and annotate Metagenome-Assembled Genomes involves several steps; the figure below introduces the general scheme to recover High-Quality MAGs.</p>
43            </div>
44
45            <img src="images/workflow_2Pipe.png" alt="General Metagenomics Workflow" class="workflow-image">
46
47            <div class="workflow-steps">
48                <div class="workflow-step">
49                    <h3><i class="fas fa-filter"></i> Quality Control & Preprocessing</h3>
50                    <p class= "text-workflow">Filtering of low-quality reads, removal of adapters, and trimming to ensure high-quality input data.</p>
51                </div>
52
53                <div class="workflow-step">
54                    <h3><i class="fas fa-puzzle-piece"></i> Assembly</h3>
55                    <p class= "text-workflow">The cleaned reads are extended (assembled) to create contiguous and longer sequences, also called contigs.</p>
56                </div>
57
58                <div class="workflow-step">
59                    <h3><i class="fas fa-search"></i> Binning</h3>
60                    <p class= "text-workflow">The contigs are then grouped into bins that potentially represent individual genomes based on genomic features.</p>
61                </div>
62
63                <div class="workflow-step">
64                    <h3><i class="fas fa-search-plus"></i> Quality assessment</h3>
65                    <p class= "text-workflow">The bins are evaluated for common metrics such as completeness and contamination to determine if they are MAGs.</p>
66                </div>
67
68                <div class="workflow-step">
69                    <h3><i class="fas fa-dna"></i> Taxonomic classification</h3>
70                    <p class= "text-workflow">The identity of the MAGs is established by their taxonomic classification using reference databases.</p>
71                </div>
72
73                <div class="workflow-step">
74                    <h3><i class="fas fa-chart-bar"></i> Functional Analysis</h3>
75                    <p class= "text-workflow">Annotation of genes, prediction of metabolic pathways, and analysis of functional potential.</p>
76                </div>
77            </div>
78            
79        </div>
80    `;
81
82    // Load workflow content when the button is clicked
83    workflowBtn.addEventListener('click', function(e) {
84        e.preventDefault();
85        const container = document.querySelector('.workflow-info-container');
86        if (container) {
87            container.innerHTML = workflowContent;
88        }
89        workflowSection.style.display = 'block';
90        document.body.style.overflow = 'hidden';
91
92        // Selector moved to its own page (toolsSelectorPage.js)
93    });

94
95    // Close workflow section
96    closeWorkflowBtn.addEventListener('click', function() {
97        workflowSection.style.display = 'none';
98        document.body.style.overflow = 'auto';
99    });
100});