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

1// Initialize when the DOM is loaded
2document.addEventListener('DOMContentLoaded', function() {
3    // DOM elements
4    const workflowBtn = document.getElementById('workflow-btn');
5    const workflowSection = document.getElementById('workflow-section');
6    const closeWorkflowBtn = document.getElementById('close-workflow-btn');
7    const backToGalleryBtn = document.getElementById('back-to-gallery-btn');
8    const backToComparisonBtn = document.getElementById('back-to-comparison-btn');
9    const backToWorkflowInfoBtn = document.getElementById('back-to-workflow-info-btn');
10    const backToToolsTableBtn = document.getElementById('back-to-tools-table-btn');
11    const pipelineSelect = document.getElementById('pipeline-select');
12    const workflowDisplay = document.getElementById('workflow-display');
13
14    if (!workflowBtn || !workflowSection || !closeWorkflowBtn || !backToGalleryBtn || 
15        !backToComparisonBtn || !backToWorkflowInfoBtn || !backToToolsTableBtn || !pipelineSelect || !workflowDisplay) {
16        console.error('Required workflow elements not found');
17        return;
18    }
19
20    // Initialize the workflow section
21    function initWorkflowSection() {
22        // Populate the pipeline select dropdown (alphabetically by name)
23        const sortedOptions = [...preLoadedObjects].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
24        sortedOptions.forEach(pipeline => {
25            const option = document.createElement('option');
26            option.value = pipeline.id;
27            option.textContent = pipeline.name;
28            pipelineSelect.appendChild(option);
29        });
30
31        // Add event listeners
32        workflowBtn.addEventListener('click', showWorkflowSection);
33        closeWorkflowBtn.addEventListener('click', hideWorkflowSection);
34        pipelineSelect.addEventListener('change', handlePipelineSelection);
35        
36        // Back to Gallery button
37        backToGalleryBtn.addEventListener('click', function(e) {
38            e.preventDefault();
39            hideWorkflowSection();
40            if (typeof window.showGallery === 'function') {
41                window.showGallery();
42            } else {
43                console.error('showGallery function not found');
44            }
45        });
46
47        // Back to Comparison button
48        backToComparisonBtn.addEventListener('click', function(e) {
49            e.preventDefault();
50            hideWorkflowSection();
51            // Ensure other sections are hidden
52            document.getElementById('selector-page-section').style.display = 'none';
53            document.getElementById('tools-table-section').style.display = 'none';
54            if (typeof window.showTable === 'function') {
55                window.showTable();
56            } else {
57                console.error('showTable function not found');
58            }
59        });
60
61        // Back to Tools Selector page button
62        backToWorkflowInfoBtn.addEventListener('click', function(e) {
63            e.preventDefault();
64            hideWorkflowSection();
65            const selectorSection = document.getElementById('selector-page-section');
66            const selectorBtn = document.getElementById('selector-page-btn');
67            if (selectorSection) {
68                const mount = document.getElementById('selector-page-mount');
69                if (mount && mount.innerHTML.trim() === '' && selectorBtn) {
70                    // Trigger the existing loader to render the selector
71                    selectorBtn.click();
72                } else {
73                    selectorSection.style.display = 'block';
74                    document.body.style.overflow = 'hidden';
75                }
76            }
77        });
78
79        // Back to Tools Table button
80        backToToolsTableBtn.addEventListener('click', function(e) {
81            e.preventDefault();
82            hideWorkflowSection();
83            // Ensure other sections are hidden
84            document.getElementById('selector-page-section').style.display = 'none';
85            document.getElementById('table-section').style.display = 'none';
86            if (typeof window.showToolsTable === 'function') {
87                window.showToolsTable();
88            } else {
89                console.error('showToolsTable function not found');
90            }
91        });
92
93        // Prevent event propagation to avoid triggering other sections
94        workflowSection.addEventListener('click', (e) => {
95            e.stopPropagation();
96        });
97    }
98
99    // Show workflow section
100    function showWorkflowSection(e) {
101        e.preventDefault();
102        e.stopPropagation();
103        workflowSection.style.display = 'block';
104        document.body.style.overflow = 'hidden';
105        // Hide other sections if they're visible
106        document.getElementById('gallery-section').style.display = 'none';
107        document.getElementById('table-section').style.display = 'none';
108        document.getElementById('workflow-info-section').style.display = 'none';
109    }
110
111    // Hide workflow section
112    function hideWorkflowSection(e) {
113        if (e) {
114            e.preventDefault();
115            e.stopPropagation();
116        }
117        workflowSection.style.display = 'none';
118        document.body.style.overflow = 'auto';
119        // Clear the workflow display
120        workflowDisplay.innerHTML = '';
121        // Reset the select dropdown
122        pipelineSelect.value = '';
123        // Ensure other sections are also hidden to prevent interference
124        document.getElementById('gallery-section').style.display = 'none';
125        document.getElementById('table-section').style.display = 'none';
126        document.getElementById('workflow-info-section').style.display = 'none';
127        document.getElementById('selector-page-section').style.display = 'none';
128        document.getElementById('tools-table-section').style.display = 'none';
129    }
130
131    // Handle pipeline selection
132    function handlePipelineSelection(event) {
133        const selectedPipelineId = event.target.value;
134        if (!selectedPipelineId) {
135            workflowDisplay.innerHTML = '';
136            return;
137        }
138
139        // Find the selected pipeline object using ID
140        const pipeline = preLoadedObjects.find(p => p.id === selectedPipelineId);
141        if (!pipeline) return;
142
143        // Display the workflow
144        displayWorkflow(pipeline);
145    }
146
147    // Display the workflow for a pipeline
148    function displayWorkflow(pipeline) {
149        // Create the workflow content
150        const workflowContent = document.createElement('div');
151        workflowContent.className = 'workflow-content';
152
153        // Construct the workflow image path using pipeline ID
154        const workflowImagePath = `assets/${pipeline.id}.png`;
155
156        // Add pipeline name and description
157        workflowContent.innerHTML = `
158            <div class="workflow-header-content">
159                <h3>${pipeline.name}</h3>
160                <a href="${pipeline.url}" target="_blank" class="workflow-link">
161                    <i class="fas fa-external-link-alt"></i>
162                    Match me with ${pipeline.name}
163                </a>
164            </div>
165            <p class="pipeline-description">${pipeline.details}</p>
166            <div class="workflow-diagram">
167                <img src="${workflowImagePath}" 
168                     alt="${pipeline.name} workflow diagram" 
169                     class="workflow-image"
170                     onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'no-workflow-message\'><p>No workflow diagram available for this pipeline.</p><p>Please check the pipeline\'s documentation for workflow information.</p></div>';">
171            </div>
172        `;
173
174        // Clear and update the workflow display
175        workflowDisplay.innerHTML = '';
176        workflowDisplay.appendChild(workflowContent);
177    }
178
179    // Initialize the workflow section
180    initWorkflowSection();
181});