diff --git "a/ambermdflow/js/script.js" "b/ambermdflow/js/script.js"
new file mode 100644--- /dev/null
+++ "b/ambermdflow/js/script.js"
@@ -0,0 +1,6600 @@
+// MD Simulation Pipeline JavaScript
+console.log('Script loading...'); // Debug log
+
+class MDSimulationPipeline {
+ constructor() {
+ this.currentProtein = null;
+ this.preparedProtein = null;
+ this.completedProtein = null;
+ this.missingResiduesInfo = null;
+ this.missingResiduesPdbId = null;
+ this.chainSequences = null;
+ this.chainSequenceStart = {};
+ this.chainFirstResidue = {};
+ this.chainLastResidue = {};
+ this.simulationParams = {};
+ this.generatedFiles = {};
+ this.nglStage = null;
+ this.preparedNglStage = null;
+ this.completedNglStage = null;
+ this.originalNglStage = null;
+ this.currentRepresentation = 'cartoon';
+ this.preparedRepresentation = 'cartoon';
+ this.completedRepresentation = 'cartoon';
+ this.originalRepresentation = 'cartoon';
+ this.isSpinning = false;
+ this.preparedIsSpinning = false;
+ this.completedIsSpinning = false;
+ this.originalIsSpinning = false;
+ this.currentTabIndex = 0;
+ this.tabOrder = ['protein-loading', 'fill-missing', 'structure-prep', 'simulation-params', 'simulation-steps', 'file-generation', 'plumed'];
+ // Consistent chain color palette - same colors for same chain IDs throughout
+ this.chainColorPalette = [
+ '#1f77b4', // blue
+ '#ff7f0e', // orange
+ '#2ca02c', // green
+ '#d62728', // red
+ '#9467bd', // purple
+ '#8c564b', // brown
+ '#e377c2', // pink
+ '#7f7f7f', // gray
+ '#bcbd22', // olive
+ '#17becf', // cyan
+ '#aec7e8', // light blue
+ '#ffbb78', // light orange
+ '#98df8a', // light green
+ '#ff9896', // light red
+ '#c5b0d5', // light purple
+ '#c49c94', // light brown
+ '#f7b6d3', // light pink
+ '#c7c7c7', // light gray
+ '#dbdb8d', // light olive
+ '#9edae5' // light cyan
+ ];
+ this.chainColorMap = {}; // Will store chain ID -> color mapping
+ this.sessionId = null; // Per-user session for multi-user (e.g. Hugging Face)
+ this._sessionPromise = null;
+ this.init();
+ this.initializeTooltips();
+ }
+
+ /** Ensure we have a session ID (isolates this user's output from others). */
+ async getSessionId() {
+ if (this.sessionId) return this.sessionId;
+ try {
+ const stored = typeof sessionStorage !== 'undefined' && sessionStorage.getItem('ambermdflow_session_id');
+ if (stored) { this.sessionId = stored; return this.sessionId; }
+ } catch (e) { /* ignore */ }
+ if (this._sessionPromise) return this._sessionPromise;
+ this._sessionPromise = (async () => {
+ try {
+ const r = await fetch('/api/session');
+ const d = await r.json();
+ this.sessionId = d.session_id || 'default';
+ if (typeof sessionStorage !== 'undefined') sessionStorage.setItem('ambermdflow_session_id', this.sessionId);
+ return this.sessionId;
+ } catch (e) {
+ this.sessionId = 'default';
+ return this.sessionId;
+ }
+ })();
+ return this._sessionPromise;
+ }
+
+ /** Fetch with session header so backend uses this user's output folder. */
+ async apiFetch(url, options = {}) {
+ await this.getSessionId();
+ const headers = { ...(options.headers || {}), 'X-Session-Id': this.sessionId };
+ return fetch(url, { ...options, headers });
+ }
+
+ /** Base URL for output files (includes session so NGL/downloads hit the right folder). */
+ getOutputUrl(path) {
+ const sid = this.sessionId || 'default';
+ return `/output/${sid}/${path}`.replace(/\/+/g, '/');
+ }
+
+ init() {
+ // On every page load (including refresh), clean this session's output folder so old files
+ // don't overlap with new work (session ID persists in sessionStorage, files do not).
+ this.getSessionId().then(() => this.apiFetch('/api/clean-output', { method: 'POST' })).catch(() => {});
+
+ this.setupEventListeners();
+ this.initializeTabs();
+ this.initializeStepToggles();
+ this.loadDefaultParams();
+ this.updateNavigationState();
+ }
+
+ initializeTooltips() {
+ // Initialize Bootstrap tooltips using vanilla JavaScript
+ // Note: This requires Bootstrap to be loaded
+ if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
+ return new bootstrap.Tooltip(tooltipTriggerEl);
+ });
+ } else {
+ console.log('Bootstrap not loaded, tooltips will not work');
+ }
+ }
+
+ setupEventListeners() {
+ // Tab navigation
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.addEventListener('click', (e) => this.switchTab(e.target.dataset.tab));
+ });
+
+ // File upload
+ const fileInput = document.getElementById('pdb-file');
+ const fileUploadArea = document.getElementById('file-upload-area');
+ const chooseFileBtn = document.getElementById('choose-file-btn');
+
+ console.log('File input element:', fileInput);
+ console.log('File upload area:', fileUploadArea);
+ console.log('Choose file button:', chooseFileBtn);
+
+ if (!fileInput) {
+ console.error('File input element not found!');
+ return;
+ }
+
+ fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
+
+ // Handle click on upload area (but not on the button)
+ fileUploadArea.addEventListener('click', (e) => {
+ // Only trigger if not clicking on the button
+ if (e.target !== chooseFileBtn && !chooseFileBtn.contains(e.target)) {
+ console.log('Upload area clicked, triggering file input');
+ fileInput.click();
+ }
+ });
+
+ // Handle click on choose file button
+ chooseFileBtn.addEventListener('click', (e) => {
+ e.stopPropagation(); // Prevent triggering the upload area click
+ console.log('Choose file button clicked, triggering file input');
+ fileInput.click();
+ });
+
+ fileUploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
+ fileUploadArea.addEventListener('drop', (e) => this.handleDrop(e));
+
+ // PDB fetch
+ document.getElementById('fetch-pdb').addEventListener('click', () => this.fetchPDB());
+
+ // Missing residues analysis
+ const detectMissingBtn = document.getElementById('detect-missing-residues');
+ if (detectMissingBtn) {
+ detectMissingBtn.addEventListener('click', () => this.detectMissingResidues());
+ }
+ const buildCompleteBtn = document.getElementById('build-complete-structure');
+ if (buildCompleteBtn) {
+ buildCompleteBtn.addEventListener('click', () => this.buildCompletedStructure());
+ }
+ const applyTrimBtn = document.getElementById('apply-trim');
+ if (applyTrimBtn) {
+ applyTrimBtn.addEventListener('click', () => this.applyTrimming());
+ }
+ const previewCompletedBtn = document.getElementById('preview-completed-structure');
+ if (previewCompletedBtn) {
+ previewCompletedBtn.addEventListener('click', () => this.previewCompletedStructure());
+ }
+ const previewSuperimposedBtn = document.getElementById('preview-superimposed-structure');
+ if (previewSuperimposedBtn) {
+ previewSuperimposedBtn.addEventListener('click', () => this.previewSuperimposedStructure());
+ }
+ const viewSequencesBtn = document.getElementById('view-protein-sequences');
+ if (viewSequencesBtn) {
+ viewSequencesBtn.addEventListener('click', () => this.toggleSequenceViewer());
+ }
+ const downloadCompletedBtn = document.getElementById('download-completed-structure');
+ if (downloadCompletedBtn) {
+ downloadCompletedBtn.addEventListener('click', () => this.downloadCompletedStructure());
+ }
+
+ // File generation
+ document.getElementById('generate-files').addEventListener('click', () => this.generateAllFiles());
+ document.getElementById('preview-files').addEventListener('click', () => this.previewFiles());
+ document.getElementById('add-simulation-file').addEventListener('click', () => this.showAddFileModal());
+ document.getElementById('preview-solvated').addEventListener('click', () => this.previewSolvatedProtein());
+ document.getElementById('download-solvated').addEventListener('click', () => this.downloadSolvatedProtein());
+ document.getElementById('download-zip').addEventListener('click', () => this.downloadZip());
+
+
+ // Structure preparation
+ document.getElementById('prepare-structure').addEventListener('click', () => this.prepareStructure());
+ document.getElementById('preview-prepared').addEventListener('click', () => this.previewPreparedStructure());
+ document.getElementById('download-prepared').addEventListener('click', () => this.downloadPreparedStructure());
+
+ // Ligand download button
+ const downloadLigandBtn = document.getElementById('download-ligand');
+ if (downloadLigandBtn) {
+ downloadLigandBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ this.downloadLigandFile();
+ });
+ }
+
+ // Docking section
+ const runDockingBtn = document.getElementById('run-docking');
+ if (runDockingBtn) {
+ runDockingBtn.addEventListener('click', () => this.runDocking());
+ }
+ const applyDockingPosesBtn = document.getElementById('apply-docking-poses');
+ if (applyDockingPosesBtn) {
+ applyDockingPosesBtn.addEventListener('click', () => this.applyDockingPoses());
+ }
+
+ // Navigation buttons
+ document.getElementById('prev-tab').addEventListener('click', () => this.previousTab());
+ document.getElementById('next-tab').addEventListener('click', () => this.nextTab());
+
+ // Parameter changes
+ document.querySelectorAll('input, select').forEach(input => {
+ input.addEventListener('change', () => this.updateSimulationParams());
+ });
+
+ // Render chain and ligand choices when structure tab becomes visible
+ document.querySelector('[data-tab="structure-prep"]').addEventListener('click', () => {
+ this.renderChainAndLigandSelections();
+ });
+
+ // Separate ligands checkbox change
+ document.getElementById('separate-ligands').addEventListener('change', (e) => {
+ const downloadBtn = document.getElementById('download-ligand');
+
+ if (e.target.checked && this.preparedProtein && this.preparedProtein.ligand_present && this.preparedProtein.ligand_content) {
+ downloadBtn.disabled = false;
+ downloadBtn.classList.remove('btn-outline-secondary');
+ downloadBtn.classList.add('btn-outline-primary');
+ } else {
+ downloadBtn.disabled = true;
+ downloadBtn.classList.remove('btn-outline-primary');
+ downloadBtn.classList.add('btn-outline-secondary');
+ }
+ });
+
+ // Preserve ligands checkbox change
+ document.getElementById('preserve-ligands').addEventListener('change', (e) => {
+ this.toggleLigandForceFieldGroup(e.target.checked);
+ });
+ }
+
+ initializeTabs() {
+ const tabs = document.querySelectorAll('.tab-content');
+ tabs.forEach(tab => {
+ if (!tab.classList.contains('active')) {
+ tab.style.display = 'none';
+ }
+ });
+ }
+
+ initializeStepToggles() {
+ document.querySelectorAll('.step-header').forEach(header => {
+ header.addEventListener('click', () => {
+ const stepItem = header.parentElement;
+ const content = stepItem.querySelector('.step-content');
+ const isActive = content.classList.contains('active');
+
+ // Close all other step contents
+ document.querySelectorAll('.step-content').forEach(c => c.classList.remove('active'));
+
+ // Toggle current step
+ if (!isActive) {
+ content.classList.add('active');
+ }
+ });
+ });
+ }
+
+ loadDefaultParams() {
+ this.simulationParams = {
+ boxType: 'cubic',
+ boxSize: 1.0,
+ boxMargin: 1.0,
+ forceField: 'amber99sb-ildn',
+ waterModel: 'tip3p',
+ ionConcentration: 150,
+ temperature: 300,
+ pressure: 1.0,
+ couplingType: 'berendsen',
+ timestep: 0.002,
+ cutoff: 1.0,
+ pmeOrder: 4,
+ steps: {
+ restrainedMin: { enabled: true, steps: 1000, force: 1000 },
+ minimization: { enabled: true, steps: 5000, algorithm: 'steep' },
+ nvt: { enabled: true, steps: 50000, temperature: 300 },
+ npt: { enabled: true, steps: 100000, temperature: 300, pressure: 1.0 },
+ production: { enabled: true, steps: 1000000, temperature: 300, pressure: 1.0 }
+ }
+ };
+ }
+
+ switchTab(tabName) {
+ // Hide all tab contents
+ document.querySelectorAll('.tab-content').forEach(tab => {
+ tab.classList.remove('active');
+ tab.style.display = 'none';
+ });
+
+ // Remove active class from all tab buttons
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.classList.remove('active');
+ });
+
+ // Show selected tab
+ document.getElementById(tabName).classList.add('active');
+ document.getElementById(tabName).style.display = 'block';
+
+ // Add active class to clicked button
+ document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+
+ // Update current tab index and navigation state
+ this.currentTabIndex = this.tabOrder.indexOf(tabName);
+ this.updateNavigationState();
+ }
+
+ previousTab() {
+ if (this.currentTabIndex > 0) {
+ const prevTab = this.tabOrder[this.currentTabIndex - 1];
+ this.switchTab(prevTab);
+ }
+ }
+
+ nextTab() {
+ if (this.currentTabIndex < this.tabOrder.length - 1) {
+ const nextTab = this.tabOrder[this.currentTabIndex + 1];
+ this.switchTab(nextTab);
+ }
+ }
+
+ updateNavigationState() {
+ const prevBtn = document.getElementById('prev-tab');
+ const nextBtn = document.getElementById('next-tab');
+ const currentStepSpan = document.getElementById('current-step');
+ const totalStepsSpan = document.getElementById('total-steps');
+
+ // Update button states
+ prevBtn.disabled = this.currentTabIndex === 0;
+ nextBtn.disabled = this.currentTabIndex === this.tabOrder.length - 1;
+
+ // Update step indicator
+ if (currentStepSpan) {
+ currentStepSpan.textContent = this.currentTabIndex + 1;
+ }
+ if (totalStepsSpan) {
+ totalStepsSpan.textContent = this.tabOrder.length;
+ }
+
+ // Update next button text based on current tab
+ if (this.currentTabIndex === this.tabOrder.length - 1) {
+ nextBtn.innerHTML = 'Complete [${timestamp}] ${icon} ${this.escapeHtml(message)} `;
+ container.appendChild(line);
+
+ // Auto-scroll to bottom only if modal is visible and autoScroll is enabled
+ if (autoScroll) {
+ // Check both ligand-ff and docking log modals
+ const logModal = document.getElementById('ligand-ff-log-modal') || document.getElementById('docking-log-modal');
+ if (logModal && logModal.style.display === 'block' && container.parentElement) {
+ // Check if user is near bottom before auto-scrolling
+ const isNearBottom = container.parentElement.scrollTop + container.parentElement.clientHeight >=
+ container.parentElement.scrollHeight - 50;
+ if (isNearBottom) {
+ container.parentElement.scrollTop = container.parentElement.scrollHeight;
+ }
+ }
+ }
+ }
+
+ displayFinalResult(data, container) {
+ const resultDiv = document.createElement('div');
+ resultDiv.className = 'log-result';
+ resultDiv.innerHTML = '📊 Final Results: ';
+
+ if (data.ligands && data.ligands.length > 0) {
+ let resultHtml = `✅ ${data.message}
`;
+ data.ligands.forEach(ligand => {
+ resultHtml += `Ligand ${ligand.ligand_num}: ';
+
+ if (data.errors && data.errors.length > 0) {
+ resultHtml += '⚠️ Warnings:
';
+ data.errors.forEach(err => {
+ resultHtml += `${this.escapeHtml(err)} `;
+ });
+ resultHtml += ' ';
+ }
+
+ resultDiv.innerHTML += resultHtml;
+ }
+
+ container.appendChild(resultDiv);
+ container.parentElement.scrollTop = container.parentElement.scrollHeight;
+ }
+
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ createDockingLogModal() {
+ const modal = document.createElement('div');
+ modal.id = 'docking-log-modal';
+ modal.className = 'log-modal';
+ const self = this;
+ modal.innerHTML = `
+
+ `;
+ // Add click handler to modal background to close
+ modal.addEventListener('click', function(e) {
+ if (e.target === modal) {
+ modal.style.display = 'none';
+ }
+ });
+ return modal;
+ }
+
+ renderDockingLogs(logContent) {
+ // Store current scroll position if modal is visible
+ const logModal = document.getElementById('docking-log-modal');
+ const wasAtBottom = logModal && logModal.style.display === 'block' &&
+ logContent.parentElement &&
+ (logContent.parentElement.scrollTop + logContent.parentElement.clientHeight >= logContent.parentElement.scrollHeight - 10);
+
+ logContent.innerHTML = '';
+ if (this.dockingLogs && this.dockingLogs.length > 0) {
+ this.dockingLogs.forEach(logEntry => {
+ if (logEntry.type === 'result') {
+ this.displayDockingFinalResult(logEntry.data, logContent);
+ } else {
+ this.addLogLine(logContent, logEntry.message, logEntry.type || 'info', false);
+ }
+ });
+ }
+
+ // Restore scroll position or scroll to bottom
+ if (logModal && logModal.style.display === 'block' && logContent.parentElement) {
+ if (wasAtBottom) {
+ logContent.parentElement.scrollTop = logContent.parentElement.scrollHeight;
+ }
+ }
+ }
+
+ displayDockingFinalResult(data, container) {
+ const resultDiv = document.createElement('div');
+ resultDiv.className = 'log-result';
+ resultDiv.innerHTML = '📊 Docking Results: ';
+
+ if (data.ligands && data.ligands.length > 0) {
+ let resultHtml = `✅ Successfully docked ${data.ligands.length} ligand(s)
`;
+ data.ligands.forEach(ligand => {
+ const ligName = ligand.displayLabel || ligand.name || `Ligand ${ligand.index}`;
+ resultHtml += `${ligName}: ';
+
+ if (data.warnings && data.warnings.length > 0) {
+ resultHtml += '⚠️ Warnings:
';
+ data.warnings.forEach(warn => {
+ resultHtml += `${this.escapeHtml(warn)} `;
+ });
+ resultHtml += ' ';
+ }
+
+ if (data.errors && data.errors.length > 0) {
+ resultHtml += '❌ Errors:
';
+ data.errors.forEach(err => {
+ resultHtml += `${this.escapeHtml(err)} `;
+ });
+ resultHtml += ' ';
+ }
+
+ resultDiv.innerHTML += resultHtml;
+ } else {
+ resultDiv.innerHTML += 'No ligands were docked.
';
+ }
+
+ container.appendChild(resultDiv);
+ container.parentElement.scrollTop = container.parentElement.scrollHeight;
+ }
+
+ addViewDockingLogsButton(button) {
+ // Remove existing button if any
+ this.removeViewDockingLogsButton();
+
+ // Create view logs button
+ const viewLogsBtn = document.createElement('button');
+ viewLogsBtn.id = 'view-docking-logs-btn';
+ viewLogsBtn.className = 'btn btn-info';
+ viewLogsBtn.style.marginLeft = '10px';
+ viewLogsBtn.innerHTML = '
+
+
+
+ Edit the Vina configuration file. Changes will be saved automatically when you click "Save Config".
+
+
+
+ Cancel
+
+
+
+
+
Type: ${fileType}
+ Size: ${fileSize}
+
+
+
+
+ `;
+
+ filesList.appendChild(fileItem);
+ });
+ }
+
+ getFileType(filename) {
+ const extension = filename.split('.').pop().toLowerCase();
+ const types = {
+ 'mdp': 'GROMACS MDP',
+ 'pbs': 'PBS Script',
+ 'sh': 'Shell Script',
+ 'gro': 'GROMACS Structure',
+ 'top': 'GROMACS Topology',
+ 'xvg': 'GROMACS Data'
+ };
+ return types[extension] || 'Text File';
+ }
+
+ getFileIcon(filename) {
+ const extension = filename.split('.').pop().toLowerCase();
+ const icons = {
+ 'mdp': 'fa-cogs',
+ 'pbs': 'fa-tasks',
+ 'sh': 'fa-terminal',
+ 'gro': 'fa-cube',
+ 'top': 'fa-sitemap',
+ 'xvg': 'fa-chart-line'
+ };
+ return icons[extension] || 'fa-file';
+ }
+
+ formatFileSize(bytes) {
+ if (bytes < 1024) return bytes + ' B';
+ if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+ return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+ }
+
+ previewFile(filename) {
+ const content = this.generatedFiles[filename];
+ const previewWindow = window.open('', '_blank', 'width=800,height=600');
+ previewWindow.document.write(`
+
+
+ Preview: ${filename}
+
+
+
+ ${filename}
+ ${content}
+
+
+ `);
+ }
+
+ downloadFile(filename) {
+ const content = this.generatedFiles[filename];
+ const blob = new Blob([content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ async previewFiles() {
+ try {
+ const resp = await this.apiFetch('/api/get-generated-files');
+ const data = await resp.json();
+ if (!data.success) {
+ alert('❌ Error: ' + (data.error || 'Unable to load files'));
+ return;
+ }
+ const filesList = document.getElementById('files-list');
+ if (!filesList) return;
+ filesList.innerHTML = '';
+
+ // Store file contents for modal display
+ this.fileContents = data.files;
+
+ Object.entries(data.files).forEach(([name, content]) => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'file-item';
+ fileItem.style.cssText = 'padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; background: #f9f9f9;';
+ fileItem.innerHTML = `${name} `;
+ // Use cache at click time so we show saved edits; closure over `content` would stay stale after save
+ fileItem.onclick = () => this.showFileContent(name, this.fileContents?.[name] ?? content);
+ filesList.appendChild(fileItem);
+ });
+
+ // Reveal preview and download areas
+ const preview = document.getElementById('files-preview');
+ if (preview) preview.style.display = 'block';
+ const dl = document.getElementById('download-section');
+ if (dl) dl.style.display = 'block';
+ this.switchTab('file-generation');
+ } catch (e) {
+ console.error('Preview error:', e);
+ alert('❌ Failed to preview files: ' + e.message);
+ }
+ }
+
+ showFileContent(filename, content) {
+ // Create modal if it doesn't exist
+ let modal = document.getElementById('file-content-modal');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.id = 'file-content-modal';
+ modal.style.cssText = `
+ position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+ background: rgba(0,0,0,0.5); z-index: 1000; display: none;
+ align-items: center; justify-content: center;
+ `;
+ modal.innerHTML = `
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+ File Name (e.g., nvt_heating.in):
+
+
+ File will be saved in the output directory. Make sure to include .in extension.
+
+
+
+
+ File Content:
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+ ⚠️ Important: Please update the submit_job.pbs file to include this new simulation step.
+
+ `;
+
+ // Update fileContents if it exists
+ if (this.fileContents) {
+ this.fileContents[filename] = content;
+ }
+
+ // Refresh the files list
+ setTimeout(() => {
+ this.previewFiles();
+ this.closeAddFileModal(modal);
+ // Show a persistent message
+ alert(`✅ File "${filename}" saved successfully!\n\n⚠️ Please remember to update the submit_job.pbs file to include this new simulation step.`);
+ }, 1500);
+ } else {
+ throw new Error(result.error || 'Failed to save file');
+ }
+ } catch (error) {
+ console.error('Error saving new file:', error);
+ statusDiv.style.background = '#f8d7da';
+ statusDiv.style.color = '#721c24';
+ statusDiv.innerHTML = `
+
Protein Information
+
Structure ID: ${protein.structureId}
+
Atoms: ${protein.atomCount.toLocaleString()}
+
Chains: ${protein.chains.join(', ')}
+
Residues: ${protein.residueCount.toLocaleString()}
+
+
System Components
+
Water molecules: ${protein.waterMolecules.toLocaleString()}
+
Ions: ${protein.ions.toLocaleString()}
+
Ligands: ${protein.ligands.length > 0 ? protein.ligands.join(', ') : 'None'}
+
HETATM entries: ${protein.hetatoms.toLocaleString()}
+
+
Simulation Box
+
Type: ${params.boxType}
+
Size: ${params.boxSize} nm
+
Margin: ${params.boxMargin} nm
+
+
Force Field & Water
+
Force Field: ${params.forceField}
+
Water Model: ${params.waterModel}
+
Ion Conc.: ${params.ionConcentration} mM
+
+
Simulation Parameters
+
Temperature: ${params.temperature} K
+
Pressure: ${params.pressure} bar
+
Time Step: ${params.timestep} ps
+
+
Simulation Time
+
Total Time: ${totalTime.toFixed(2)} ns
+
Steps: ${params.steps.production.steps.toLocaleString()}
+
Output Freq: Every 5 ps
+
+
Generated Files
+
MDP Files: 6
+
Scripts: 3
+
Total Size: ${this.formatFileSize(Object.values(this.generatedFiles).join('').length)}
+
+ `;
+
+ try {
+ // Call Python backend
+ const response = await this.apiFetch('/api/prepare-structure', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ pdb_content: this.currentProtein.content,
+ options: options
+ })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ // Display ligand name changes if any
+ if (result.ligand_name_changes && result.ligand_name_changes.length > 0) {
+ const changesList = result.ligand_name_changes.map(change => {
+ const [oldName, newName, filename] = change;
+ return `• Ligand "${oldName}" renamed to "${newName}" (in ${filename})`;
+ }).join('\n');
+
+ alert(
+ `⚠️ Ligand Name Changes Detected\n\n` +
+ `The following ligand names were changed because they were pure numeric:\n\n` +
+ `${changesList}\n\n` +
+ `tleap won't accept pure numeric names while loading ligand mol2 files. ` +
+ `They have been converted to 3-letter codes (e.g., "478" → "L78"). ` +
+ `The PDB files have been updated automatically.`
+ );
+ }
+
+ // Store prepared structure
+ this.preparedProtein = {
+ content: result.prepared_structure,
+ original_atoms: result.original_atoms,
+ prepared_atoms: result.prepared_atoms,
+ removed_components: result.removed_components,
+ added_capping: result.added_capping,
+ preserved_ligands: result.preserved_ligands,
+ ligand_present: result.ligand_present,
+ separate_ligands: result.separate_ligands,
+ ligand_content: result.ligand_content || ''
+ };
+
+ // Format removed components
+ const removedText = result.removed_components ?
+ Object.entries(result.removed_components)
+ .filter(([key, value]) => value > 0)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join(', ') || 'None' : 'None';
+
+ // Format added capping
+ const addedText = result.added_capping ?
+ Object.entries(result.added_capping)
+ .filter(([key, value]) => value > 0)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join(', ') || 'None' : 'None';
+
+ // Update status
+ document.getElementById('prep-status-content').innerHTML = `
+
+ Original atoms: ${result.original_atoms.toLocaleString()} (protein without H, before capping)
+ Prepared atoms: ${result.prepared_atoms.toLocaleString()} (protein without H, after capping)
+ Removed: ${removedText}
+ Added: ${addedText}
+ Ligands: ${result.preserved_ligands}
+ Ready for AMBER force field generation!
+ `;
+
+ // Enable preview and download buttons
+ document.getElementById('preview-prepared').disabled = false;
+ document.getElementById('download-prepared').disabled = false;
+
+ // Enable ligand download button if ligands are present and separate ligands is checked
+ const separateLigandsChecked = document.getElementById('separate-ligands').checked;
+ const downloadLigandBtn = document.getElementById('download-ligand');
+ if (result.ligand_present && separateLigandsChecked && result.ligand_content) {
+ downloadLigandBtn.disabled = false;
+ downloadLigandBtn.classList.remove('btn-outline-secondary');
+ downloadLigandBtn.classList.add('btn-outline-primary');
+ } else {
+ downloadLigandBtn.disabled = true;
+ downloadLigandBtn.classList.remove('btn-outline-primary');
+ downloadLigandBtn.classList.add('btn-outline-secondary');
+ }
+
+ // Show ligand force field group if preserve ligands is checked
+ const preserveLigandsChecked = document.getElementById('preserve-ligands').checked;
+ const dockingSection = document.getElementById('docking-section');
+ if (preserveLigandsChecked && result.ligand_present) {
+ this.toggleLigandForceFieldGroup(true);
+ if (dockingSection) {
+ dockingSection.style.display = 'block';
+ this.initializeDockingSetup(result.preserved_ligands || 0);
+ // Store ligand info for selection
+ this.dockingLigandCount = result.preserved_ligands || 0;
+ }
+ } else if (dockingSection) {
+ dockingSection.style.display = 'none';
+ }
+ } else {
+ throw new Error(result.error || 'Structure preparation failed');
+ }
+ } catch (error) {
+ console.error('Error preparing structure:', error);
+ document.getElementById('prep-status-content').innerHTML = `
+
+ ${error.message}
+ `;
+ }
+ }
+
+ initializeDockingSetup(ligandCount) {
+ if (!ligandCount || ligandCount <= 0) return;
+
+ // Setup collapsible toggle only once (idempotent)
+ if (!this.dockingToggleSetupDone) {
+ this.setupDockingToggle();
+ this.dockingToggleSetupDone = true;
+ }
+
+ // Render ligand selection checkboxes
+ this.renderDockingLigandSelection(ligandCount);
+
+ const setupList = document.getElementById('docking-setup-list');
+ if (!setupList) return;
+
+ setupList.innerHTML = '';
+
+ // Use currently selected chains from structure-prep as the protein context
+ const chains = this.getSelectedChains();
+ const chainLabel = chains && chains.length > 0 ? chains.join(', ') : 'All selected chains';
+
+ for (let i = 1; i <= ligandCount; i++) {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'docking-setup-entry';
+ wrapper.innerHTML = `
+
+
+
+
+
+ Leave center fields empty to use the automatically computed center of the ligand.
+
+
';
+ }
+
+ renderDockingLigandSelectionWithInfo(ligands, chains) {
+ const container = document.getElementById('docking-ligand-selection');
+ if (!container) return;
+
+ container.innerHTML = '';
+
+ // Store chains for later use
+ this.availableChains = chains || ['A'];
+
+ // Render each ligand with its name and chain selection
+ ligands.forEach((lig, idx) => {
+ const ligIndex = lig.index || (idx + 1);
+ const ligName = lig.name || `LIG${ligIndex}`;
+ const ligChain = lig.chain || 'A';
+ const fullLigandName = lig.displayLabel || `${ligName}-${ligChain}`; // Match prep: GOL-A-1, LIZ-A
+
+ const wrapper = document.createElement('div');
+ wrapper.className = 'docking-ligand-row';
+ wrapper.style.cssText = 'display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;';
+
+ // Ligand selection checkbox with full name (RESNAME-CHAIN format)
+ let html = `
+
+
+ ${fullLigandName}
+
+
+
+
+ ${chain}
+
+ `;
+ });
+
+ html += '
';
+ wrapper.innerHTML = html;
+ container.appendChild(wrapper);
+ });
+
+ // Add listener to show/hide box controls based on selection
+ container.querySelectorAll('input[id^="dock-select-lig"]').forEach(cb => {
+ cb.addEventListener('change', () => {
+ this.updateDockingBoxControlsVisibility();
+ setTimeout(() => this.updateDockingVisualizationFromInputs(), 100);
+ });
+ });
+ }
+
+ renderDockingBoxControls(ligands) {
+ const setupList = document.getElementById('docking-setup-list');
+ if (!setupList) return;
+
+ setupList.innerHTML = '';
+
+ // Box colors matching the 3D visualization (CSS format)
+ const boxColorsCss = [
+ '#ff0000', // Red
+ '#00cc00', // Green
+ '#0000ff', // Blue
+ '#ff8000', // Orange
+ '#cc00cc', // Magenta
+ '#00cccc', // Cyan
+ ];
+
+ ligands.forEach((lig, idx) => {
+ const i = lig.index || (idx + 1);
+ const ligName = lig.name || `LIG${i}`;
+ const ligChain = lig.chain || 'A';
+ const fullLigandName = lig.displayLabel || `${ligName}-${ligChain}`; // Match prep: GOL-A-1, LIZ-A
+ const center = lig.center || { x: 0, y: 0, z: 0 };
+ const size = lig.size || { x: 10, y: 10, z: 10 };
+ const boxColor = boxColorsCss[idx % boxColorsCss.length];
+
+ const entry = document.createElement('div');
+ entry.className = 'docking-setup-entry';
+ entry.style.cssText = 'flex: 0 0 calc(50% - 10px); min-width: 280px; background: white; padding: 12px; border-radius: 5px; border: 1px solid #dee2e6;';
+
+ entry.innerHTML = `
+
+
+
+
+
+ `;
+
+ setupList.appendChild(entry);
+ });
+
+ // Attach listeners for live updates
+ ligands.forEach((lig, idx) => {
+ const i = lig.index || (idx + 1);
+ ['center-x', 'center-y', 'center-z', 'size-x', 'size-y', 'size-z', 'enabled'].forEach(suffix => {
+ const el = document.getElementById(`dock-lig${i}-${suffix}`);
+ if (el) {
+ el.addEventListener('input', () => {
+ setTimeout(() => {
+ this.updateDockingVisualizationFromInputs();
+ // Update config file if it's a size or center change
+ if (suffix.includes('size') || suffix.includes('center')) {
+ this.updateConfigFileFromGUI(i);
+ }
+ }, 50);
+ });
+ el.addEventListener('change', () => {
+ setTimeout(() => {
+ this.updateDockingVisualizationFromInputs();
+ // Update config file if it's a size or center change
+ if (suffix.includes('size') || suffix.includes('center')) {
+ this.updateConfigFileFromGUI(i);
+ }
+ }, 50);
+ });
+ }
+ });
+ });
+
+ // Update visibility based on ligand selection
+ this.updateDockingBoxControlsVisibility();
+ }
+
+ updateDockingBoxControlsVisibility() {
+ const setupList = document.getElementById('docking-setup-list');
+ if (!setupList) return;
+
+ const entries = setupList.querySelectorAll('.docking-setup-entry');
+ entries.forEach(entry => {
+ const enabledInput = entry.querySelector('input[id^="dock-lig"][id$="-enabled"]');
+ if (!enabledInput) return;
+
+ const ligIndex = enabledInput.id.match(/\d+/)?.[0];
+ if (!ligIndex) return;
+
+ const selectCheckbox = document.getElementById(`dock-select-lig${ligIndex}`);
+ if (selectCheckbox) {
+ // Use flex display when visible to maintain horizontal layout
+ entry.style.display = selectCheckbox.checked ? 'block' : 'none';
+ }
+ });
+ }
+
+ async initializeDockingVisualization() {
+ if (!this.preparedProtein) return;
+
+ try {
+ // Initialize docking-specific NGL stage if not already done
+ if (!this.dockingStage) {
+ this.dockingStage = new NGL.Stage("docking-ngl-viewer", {
+ backgroundColor: "white",
+ quality: "medium"
+ });
+ }
+
+ // Clear existing components
+ this.dockingStage.removeAllComponents();
+
+ // Create a blob from prepared PDB content (tleap_ready.pdb)
+ const blob = new Blob([this.preparedProtein.content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+
+ // Load the structure
+ const component = await this.dockingStage.loadFile(url, {
+ ext: "pdb",
+ defaultRepresentation: false
+ });
+
+ // Store reference to the structure component for box attachment
+ this.dockingStructureComponent = component;
+
+ // Protein cartoon with consistent chain colors
+ const structureChains = (this.currentProtein && this.currentProtein.chains) ? this.currentProtein.chains : [];
+
+ if (this.chainColorMap && Object.keys(this.chainColorMap).length > 0) {
+ // Use consistent chain colors from chainColorMap
+ structureChains.forEach((chain) => {
+ if (this.chainColorMap[chain]) {
+ component.addRepresentation("cartoon", {
+ sele: `:${chain}`,
+ color: this.chainColorMap[chain],
+ opacity: 0.8
+ });
+ }
+ });
+ } else {
+ // Fallback: use chainid if color map not available
+ component.addRepresentation("cartoon", {
+ sele: "protein",
+ colorScheme: "chainid",
+ opacity: 0.8
+ });
+ }
+
+ // Ligands as ball+stick
+ component.addRepresentation("ball+stick", {
+ sele: "hetero",
+ radius: 0.2,
+ color: "element"
+ });
+
+ this.dockingStage.autoView();
+
+ URL.revokeObjectURL(url);
+
+ // After structure is loaded, render boxes if we have defaults
+ setTimeout(() => {
+ if (this.dockingBoxDefaults) {
+ this.updateDockingVisualizationFromInputs();
+ }
+ }, 500);
+ } catch (err) {
+ console.error('Error initializing docking visualization:', err);
+ }
+ }
+
+ async fetchInitialDockingBoxes(ligandCount) {
+ try {
+ const response = await this.apiFetch('/api/docking/get-ligand-boxes');
+ const result = await response.json();
+ if (!result.success) {
+ console.warn('Failed to fetch default ligand boxes:', result.error);
+ return;
+ }
+
+ // Store defaults and ligand info for later use
+ this.dockingBoxDefaults = {};
+ this.dockingLigandInfo = result.ligands || [];
+ this.availableChains = result.chains || ['A'];
+
+ (result.ligands || []).forEach(lig => {
+ this.dockingBoxDefaults[lig.index] = lig;
+ });
+
+ // Render ligand selection with actual names and chain options
+ this.renderDockingLigandSelectionWithInfo(result.ligands || [], result.chains || []);
+
+ // Render box controls for each ligand (compact horizontal layout)
+ this.renderDockingBoxControls(result.ligands || []);
+
+ // Wait a bit for DOM to update and stage to be ready, then render boxes
+ setTimeout(() => {
+ console.log('Rendering docking boxes after fetching defaults...');
+ this.updateDockingVisualizationFromInputs();
+ }, 300);
+ } catch (err) {
+ console.error('Error fetching initial docking boxes:', err);
+ }
+ }
+
+ updateDockingVisualizationFromInputs() {
+ if (!this.dockingStage) {
+ console.warn('Docking stage not initialized');
+ return;
+ }
+
+ // Remove previous THREE.js box objects (groups with cylinders and spheres)
+ if (this.dockingBoxObjects && this.dockingBoxObjects.length > 0) {
+ this.dockingBoxObjects.forEach(obj => {
+ try {
+ // Remove from parent (modelGroup, rotationGroup, component, or scene)
+ if (obj.parent) {
+ obj.parent.remove(obj);
+ }
+ // Dispose of all children's geometries and materials
+ if (obj.children) {
+ obj.children.forEach(child => {
+ if (child.geometry) child.geometry.dispose();
+ if (child.material) child.material.dispose();
+ });
+ }
+ // Also dispose if it's a single object
+ if (obj.geometry) obj.geometry.dispose();
+ if (obj.material) obj.material.dispose();
+ } catch (e) {
+ console.warn('Could not remove previous box object:', e);
+ }
+ });
+ }
+ this.dockingBoxObjects = [];
+
+ // Get the structure component's THREE.js object for proper rotation
+ // Boxes attached to this will rotate with the molecule
+ const structureObject = this.dockingStructureComponent ?
+ this.dockingStructureComponent.object : null;
+
+ // Debug: Check all relevant positions in NGL's hierarchy
+ let structureCenter = { x: 0, y: 0, z: 0 };
+ const viewer = this.dockingStage.viewer;
+
+ if (this.dockingStructureComponent && this.dockingStructureComponent.structure) {
+ const center = this.dockingStructureComponent.structure.center;
+ if (center) {
+ structureCenter = { x: center.x, y: center.y, z: center.z };
+ console.log(`Structure center: (${center.x.toFixed(2)}, ${center.y.toFixed(2)}, ${center.z.toFixed(2)})`);
+ }
+ }
+
+ // Log positions of NGL viewer groups
+ if (viewer.rotationGroup) {
+ const rg = viewer.rotationGroup;
+ console.log(`rotationGroup position: (${rg.position.x.toFixed(2)}, ${rg.position.y.toFixed(2)}, ${rg.position.z.toFixed(2)})`);
+ }
+ if (viewer.translationGroup) {
+ const tg = viewer.translationGroup;
+ console.log(`translationGroup position: (${tg.position.x.toFixed(2)}, ${tg.position.y.toFixed(2)}, ${tg.position.z.toFixed(2)})`);
+ }
+ if (viewer.modelGroup) {
+ const mg = viewer.modelGroup;
+ console.log(`modelGroup position: (${mg.position.x.toFixed(2)}, ${mg.position.y.toFixed(2)}, ${mg.position.z.toFixed(2)})`);
+ }
+
+ const setupList = document.getElementById('docking-setup-list');
+ if (!setupList) {
+ console.warn('Docking setup list not found');
+ return;
+ }
+
+ const entries = setupList.querySelectorAll('.docking-setup-entry');
+ if (entries.length === 0) {
+ console.warn('No docking setup entries found');
+ return;
+ }
+
+ let boxCount = 0;
+
+ // Colors for different ligands (hex values)
+ const boxColors = [
+ 0xff0000, // Red
+ 0x00cc00, // Green
+ 0x0000ff, // Blue
+ 0xff8000, // Orange
+ 0xcc00cc, // Magenta
+ 0x00cccc, // Cyan
+ ];
+
+ // Get THREE.js - NGL bundles it internally
+ // Access through the viewer's scene constructor or global
+ let THREE = window.THREE;
+ if (!THREE) {
+ // Try to get THREE from NGL's internal references
+ const scene = this.dockingStage.viewer.scene;
+ if (scene && scene.constructor) {
+ // Get THREE from the scene's constructor context
+ THREE = {
+ BoxGeometry: scene.constructor.prototype.constructor.BoxGeometry || window.BoxGeometry,
+ EdgesGeometry: scene.constructor.prototype.constructor.EdgesGeometry || window.EdgesGeometry,
+ LineSegments: scene.constructor.prototype.constructor.LineSegments || window.LineSegments,
+ LineBasicMaterial: scene.constructor.prototype.constructor.LineBasicMaterial || window.LineBasicMaterial,
+ BufferGeometry: scene.constructor.prototype.constructor.BufferGeometry || window.BufferGeometry,
+ Float32BufferAttribute: scene.constructor.prototype.constructor.Float32BufferAttribute || window.Float32BufferAttribute,
+ Line: scene.constructor.prototype.constructor.Line || window.Line
+ };
+ }
+ }
+
+ // If THREE still not available, try to load it dynamically or use fallback
+ if (!THREE || !THREE.BoxGeometry) {
+ console.warn('THREE.js not fully available, using manual line drawing fallback');
+ this.renderDockingBoxesFallback(entries, boxColors);
+ return;
+ }
+
+ entries.forEach((entry, idx) => {
+ const ligIndex = idx + 1;
+
+ // Check if this ligand is selected for docking
+ const selectCheckbox = document.getElementById(`dock-select-lig${ligIndex}`);
+ if (selectCheckbox && !selectCheckbox.checked) {
+ console.log(`Ligand ${ligIndex} not selected, skipping box`);
+ return;
+ }
+
+ const enabledEl = entry.querySelector(`#dock-lig${ligIndex}-enabled`);
+ if (enabledEl && !enabledEl.checked) {
+ console.log(`Ligand ${ligIndex} disabled, skipping box`);
+ return;
+ }
+
+ const cxEl = entry.querySelector(`#dock-lig${ligIndex}-center-x`);
+ const cyEl = entry.querySelector(`#dock-lig${ligIndex}-center-y`);
+ const czEl = entry.querySelector(`#dock-lig${ligIndex}-center-z`);
+ const sxEl = entry.querySelector(`#dock-lig${ligIndex}-size-x`);
+ const syEl = entry.querySelector(`#dock-lig${ligIndex}-size-y`);
+ const szEl = entry.querySelector(`#dock-lig${ligIndex}-size-z`);
+
+ let cx = cxEl && cxEl.value !== '' ? parseFloat(cxEl.value) : null;
+ let cy = cyEl && cyEl.value !== '' ? parseFloat(cyEl.value) : null;
+ let cz = czEl && czEl.value !== '' ? parseFloat(czEl.value) : null;
+
+ let sx = sxEl && sxEl.value !== '' ? parseFloat(sxEl.value) : 10.0;
+ let sy = syEl && syEl.value !== '' ? parseFloat(syEl.value) : 10.0;
+ let sz = szEl && szEl.value !== '' ? parseFloat(szEl.value) : 10.0;
+
+ // If center is not specified, try to get from backend defaults
+ if (cx == null || cy == null || cz == null) {
+ if (this.dockingBoxDefaults && this.dockingBoxDefaults[ligIndex]) {
+ const def = this.dockingBoxDefaults[ligIndex];
+ cx = def.center?.x || null;
+ cy = def.center?.y || null;
+ cz = def.center?.z || null;
+ console.log(`Using default center for ligand ${ligIndex}:`, {cx, cy, cz});
+ }
+ if (cx == null || cy == null || cz == null) {
+ console.warn(`No center available for ligand ${ligIndex}, skipping box`);
+ return;
+ }
+ }
+
+ // Ensure all values are numbers
+ if (isNaN(cx) || isNaN(cy) || isNaN(cz) || isNaN(sx) || isNaN(sy) || isNaN(sz)) {
+ console.warn(`Invalid box parameters for ligand ${ligIndex}:`, {cx, cy, cz, sx, sy, sz});
+ return;
+ }
+
+ const color = boxColors[(ligIndex - 1) % boxColors.length];
+
+ // Debug: Log the coordinates being used
+ console.log(`Box ${ligIndex} params: center=(${cx.toFixed(2)}, ${cy.toFixed(2)}, ${cz.toFixed(2)}), size=(${sx}, ${sy}, ${sz})`);
+
+ try {
+ // Create thick wireframe box using cylinders for each edge
+ // This works in all browsers (unlike linewidth which only works in WebGL1)
+
+ const tubeRadius = 0.15; // Thickness of the box edges
+ const radialSegments = 6; // Segments for cylinder smoothness
+
+ // Calculate box corners
+ const halfX = sx / 2;
+ const halfY = sy / 2;
+ const halfZ = sz / 2;
+
+ // Define 8 corners of the box (relative to center)
+ const corners = [
+ new THREE.Vector3(-halfX, -halfY, -halfZ), // 0
+ new THREE.Vector3(+halfX, -halfY, -halfZ), // 1
+ new THREE.Vector3(+halfX, +halfY, -halfZ), // 2
+ new THREE.Vector3(-halfX, +halfY, -halfZ), // 3
+ new THREE.Vector3(-halfX, -halfY, +halfZ), // 4
+ new THREE.Vector3(+halfX, -halfY, +halfZ), // 5
+ new THREE.Vector3(+halfX, +halfY, +halfZ), // 6
+ new THREE.Vector3(-halfX, +halfY, +halfZ) // 7
+ ];
+
+ // Define 12 edges as pairs of corner indices
+ const edgePairs = [
+ [0, 1], [1, 2], [2, 3], [3, 0], // bottom face
+ [4, 5], [5, 6], [6, 7], [7, 4], // top face
+ [0, 4], [1, 5], [2, 6], [3, 7] // vertical edges
+ ];
+
+ // Material for the tubes
+ const tubeMaterial = new THREE.MeshBasicMaterial({
+ color: color,
+ transparent: true,
+ opacity: 0.9
+ });
+
+ // Create a group to hold all edge cylinders
+ const boxGroup = new THREE.Group();
+ boxGroup.position.set(cx, cy, cz);
+
+ // Create cylinder for each edge
+ edgePairs.forEach(([i1, i2]) => {
+ const start = corners[i1];
+ const end = corners[i2];
+
+ // Calculate edge properties
+ const direction = new THREE.Vector3().subVectors(end, start);
+ const length = direction.length();
+ const midpoint = new THREE.Vector3().addVectors(start, end).multiplyScalar(0.5);
+
+ // Create cylinder geometry (default orientation is along Y-axis)
+ const cylinderGeom = new THREE.CylinderGeometry(tubeRadius, tubeRadius, length, radialSegments);
+ const cylinder = new THREE.Mesh(cylinderGeom, tubeMaterial.clone());
+
+ // Position at midpoint
+ cylinder.position.copy(midpoint);
+
+ // Orient cylinder along the edge direction
+ // Default cylinder is along Y-axis, so we need to rotate it to align with edge
+ const yAxis = new THREE.Vector3(0, 1, 0);
+ const edgeDir = direction.clone().normalize();
+
+ // Calculate quaternion to rotate from Y-axis to edge direction
+ const quaternion = new THREE.Quaternion();
+ quaternion.setFromUnitVectors(yAxis, edgeDir);
+ cylinder.setRotationFromQuaternion(quaternion);
+
+ boxGroup.add(cylinder);
+ });
+
+ // Add corner spheres for a nicer look
+ const sphereGeom = new THREE.SphereGeometry(tubeRadius * 1.2, 8, 8);
+ corners.forEach(corner => {
+ const sphere = new THREE.Mesh(sphereGeom, tubeMaterial);
+ sphere.position.copy(corner);
+ boxGroup.add(sphere);
+ });
+
+ // Add to NGL's modelGroup - this is where structures are actually placed
+ // This ensures boxes are in the same coordinate space as the molecule
+ const modelGroup = this.dockingStage.viewer.modelGroup;
+ const rotationGroup = this.dockingStage.viewer.rotationGroup;
+
+ if (modelGroup) {
+ modelGroup.add(boxGroup);
+ console.log(`Added box ${ligIndex} to modelGroup at (${cx.toFixed(2)}, ${cy.toFixed(2)}, ${cz.toFixed(2)})`);
+ } else if (rotationGroup) {
+ rotationGroup.add(boxGroup);
+ console.log(`Added box ${ligIndex} to rotationGroup`);
+ } else if (structureObject) {
+ structureObject.add(boxGroup);
+ console.log(`Added box ${ligIndex} to structureObject`);
+ } else {
+ this.dockingStage.viewer.scene.add(boxGroup);
+ console.log(`Added box ${ligIndex} to scene`);
+ }
+ this.dockingBoxObjects.push(boxGroup);
+
+ boxCount++;
+ console.log(`✅ Added thick box for ligand ${ligIndex} at (${cx.toFixed(2)}, ${cy.toFixed(2)}, ${cz.toFixed(2)}) with size (${sx}, ${sy}, ${sz})`);
+
+ } catch (e) {
+ console.error(`Error creating wireframe for ligand ${ligIndex}:`, e);
+ }
+ });
+
+ // Request render update to show the boxes
+ if (boxCount > 0) {
+ this.dockingStage.viewer.requestRender();
+ console.log(`✅ Rendered ${boxCount} docking box(es) in visualization`);
+ } else {
+ console.warn('⚠️ No boxes to render - check ligand selection and center values');
+ }
+ }
+
+ // Fallback method for rendering docking boxes when THREE.js isn't directly accessible
+ renderDockingBoxesFallback(entries, boxColors) {
+ console.log('Using fallback docking box visualization');
+ let boxCount = 0;
+
+ // Try to access THREE through different paths
+ const viewer = this.dockingStage.viewer;
+ const scene = viewer.scene;
+
+ // Check various ways THREE might be available
+ let ThreeLib = null;
+
+ // Method 1: Check if it's on window after NGL loaded
+ if (typeof THREE !== 'undefined') {
+ ThreeLib = THREE;
+ }
+ // Method 2: Check NGL's internal module system
+ else if (typeof NGL !== 'undefined' && NGL.Stage) {
+ // NGL exports some THREE objects
+ // Try to construct THREE objects using scene's prototype chain
+ const sceneProto = Object.getPrototypeOf(scene);
+ if (sceneProto && sceneProto.constructor) {
+ const mod = sceneProto.constructor;
+ // Check if we can find THREE in the module's scope
+ console.log('Scene constructor:', mod.name);
+ }
+ }
+
+ // If we still can't get THREE, create a simple HTML overlay as fallback
+ if (!ThreeLib) {
+ console.log('Creating HTML overlay for docking boxes');
+ entries.forEach((entry, idx) => {
+ const ligIndex = idx + 1;
+
+ const selectCheckbox = document.getElementById(`dock-select-lig${ligIndex}`);
+ if (selectCheckbox && !selectCheckbox.checked) return;
+
+ const cxEl = entry.querySelector(`#dock-lig${ligIndex}-center-x`);
+ const cyEl = entry.querySelector(`#dock-lig${ligIndex}-center-y`);
+ const czEl = entry.querySelector(`#dock-lig${ligIndex}-center-z`);
+ const sxEl = entry.querySelector(`#dock-lig${ligIndex}-size-x`);
+ const syEl = entry.querySelector(`#dock-lig${ligIndex}-size-y`);
+ const szEl = entry.querySelector(`#dock-lig${ligIndex}-size-z`);
+
+ let cx = cxEl && cxEl.value !== '' ? parseFloat(cxEl.value) : null;
+ let cy = cyEl && cyEl.value !== '' ? parseFloat(cyEl.value) : null;
+ let cz = czEl && czEl.value !== '' ? parseFloat(czEl.value) : null;
+ let sx = sxEl && sxEl.value !== '' ? parseFloat(sxEl.value) : 10.0;
+ let sy = syEl && syEl.value !== '' ? parseFloat(syEl.value) : 10.0;
+ let sz = szEl && szEl.value !== '' ? parseFloat(szEl.value) : 10.0;
+
+ if (cx == null || cy == null || cz == null) {
+ if (this.dockingBoxDefaults && this.dockingBoxDefaults[ligIndex]) {
+ const def = this.dockingBoxDefaults[ligIndex];
+ cx = def.center?.x || 0;
+ cy = def.center?.y || 0;
+ cz = def.center?.z || 0;
+ }
+ }
+
+ if (cx != null && cy != null && cz != null) {
+ boxCount++;
+ console.log(`📦 Docking box ${ligIndex}: center (${cx.toFixed(2)}, ${cy.toFixed(2)}, ${cz.toFixed(2)}), size (${sx}×${sy}×${sz}) Å`);
+ }
+ });
+
+ // Update status to show box info since we can't render visually
+ const statusEl = document.getElementById('docking-status');
+ if (statusEl && boxCount > 0) {
+ statusEl.innerHTML = `✓ ${boxCount} docking box(es) configured (visual preview not available) `;
+ }
+ return;
+ }
+
+ // If ThreeLib is available, use it
+ entries.forEach((entry, idx) => {
+ const ligIndex = idx + 1;
+
+ const selectCheckbox = document.getElementById(`dock-select-lig${ligIndex}`);
+ if (selectCheckbox && !selectCheckbox.checked) return;
+
+ const cxEl = entry.querySelector(`#dock-lig${ligIndex}-center-x`);
+ const cyEl = entry.querySelector(`#dock-lig${ligIndex}-center-y`);
+ const czEl = entry.querySelector(`#dock-lig${ligIndex}-center-z`);
+ const sxEl = entry.querySelector(`#dock-lig${ligIndex}-size-x`);
+ const syEl = entry.querySelector(`#dock-lig${ligIndex}-size-y`);
+ const szEl = entry.querySelector(`#dock-lig${ligIndex}-size-z`);
+
+ let cx = cxEl && cxEl.value !== '' ? parseFloat(cxEl.value) : null;
+ let cy = cyEl && cyEl.value !== '' ? parseFloat(cyEl.value) : null;
+ let cz = czEl && czEl.value !== '' ? parseFloat(czEl.value) : null;
+ let sx = sxEl && sxEl.value !== '' ? parseFloat(sxEl.value) : 10.0;
+ let sy = syEl && syEl.value !== '' ? parseFloat(syEl.value) : 10.0;
+ let sz = szEl && szEl.value !== '' ? parseFloat(szEl.value) : 10.0;
+
+ if (cx == null || cy == null || cz == null) {
+ if (this.dockingBoxDefaults && this.dockingBoxDefaults[ligIndex]) {
+ const def = this.dockingBoxDefaults[ligIndex];
+ cx = def.center?.x || 0;
+ cy = def.center?.y || 0;
+ cz = def.center?.z || 0;
+ }
+ }
+
+ if (cx == null || cy == null || cz == null) return;
+
+ const color = boxColors[(ligIndex - 1) % boxColors.length];
+
+ try {
+ const geometry = new ThreeLib.BoxGeometry(sx, sy, sz);
+ const edges = new ThreeLib.EdgesGeometry(geometry);
+ const material = new ThreeLib.LineBasicMaterial({ color: color });
+ const wireframe = new ThreeLib.LineSegments(edges, material);
+ wireframe.position.set(cx, cy, cz);
+ scene.add(wireframe);
+ this.dockingBoxObjects.push(wireframe);
+ geometry.dispose();
+ boxCount++;
+ } catch (e) {
+ console.error(`Fallback: Error creating box for ligand ${ligIndex}:`, e);
+ }
+ });
+
+ if (boxCount > 0) {
+ viewer.requestRender();
+ console.log(`✅ Fallback rendered ${boxCount} docking box(es)`);
+ }
+ }
+
+ async runDocking() {
+ if (!this.preparedProtein || !this.preparedProtein.ligand_present) {
+ alert('Please prepare a structure with preserved ligands before running docking.');
+ return;
+ }
+
+ // Get selected ligands for docking
+ const selectedLigands = [];
+ const selectionContainer = document.getElementById('docking-ligand-selection');
+ if (selectionContainer) {
+ selectionContainer.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
+ const ligIndex = parseInt(cb.getAttribute('data-ligand-index'));
+ if (ligIndex) selectedLigands.push(ligIndex);
+ });
+ }
+
+ if (selectedLigands.length === 0) {
+ alert('Please select at least one ligand to dock.');
+ return;
+ }
+
+ const setupList = document.getElementById('docking-setup-list');
+ const statusEl = document.getElementById('docking-status');
+ const posesContainer = document.getElementById('docking-poses-container');
+ const posesList = document.getElementById('docking-poses-list');
+
+ // Build per-ligand configuration from setup rows, only for selected ligands
+ const ligandConfigs = [];
+ if (setupList) {
+ const entries = setupList.querySelectorAll('.docking-setup-entry');
+ entries.forEach((entry, idx) => {
+ const ligIndex = idx + 1;
+
+ // Check if this ligand is selected for docking
+ const selectCheckbox = document.getElementById(`dock-select-lig${ligIndex}`);
+ if (!selectCheckbox || !selectCheckbox.checked) return;
+
+ const enabledEl = entry.querySelector(`#dock-lig${ligIndex}-enabled`);
+ const cxEl = entry.querySelector(`#dock-lig${ligIndex}-center-x`);
+ const cyEl = entry.querySelector(`#dock-lig${ligIndex}-center-y`);
+ const czEl = entry.querySelector(`#dock-lig${ligIndex}-center-z`);
+ const sxEl = entry.querySelector(`#dock-lig${ligIndex}-size-x`);
+ const syEl = entry.querySelector(`#dock-lig${ligIndex}-size-y`);
+ const szEl = entry.querySelector(`#dock-lig${ligIndex}-size-z`);
+
+ const enabled = enabledEl ? enabledEl.checked : true;
+ const center = {};
+ const size = {};
+
+ if (cxEl && cxEl.value !== '') center.x = parseFloat(cxEl.value);
+ if (cyEl && cyEl.value !== '') center.y = parseFloat(cyEl.value);
+ if (czEl && czEl.value !== '') center.z = parseFloat(czEl.value);
+
+ if (sxEl && sxEl.value !== '') size.x = parseFloat(sxEl.value);
+ if (syEl && syEl.value !== '') size.y = parseFloat(syEl.value);
+ if (szEl && szEl.value !== '') size.z = parseFloat(szEl.value);
+
+ ligandConfigs.push({
+ index: ligIndex,
+ enabled,
+ center,
+ size,
+ });
+ });
+ }
+
+ // Show loading state
+ const runDockingBtn = document.getElementById('run-docking');
+ const originalText = runDockingBtn ? runDockingBtn.innerHTML : '';
+ if (runDockingBtn) {
+ runDockingBtn.innerHTML = 'Warnings: Errors: No docking poses were generated. ';
+ } else {
+ // Small delay to ensure DOM has updated with visible dimensions
+ await new Promise(resolve => setTimeout(resolve, 100));
+ // Initialize the poses viewer
+ await this.initializePosesViewer(ligands);
+ }
+ }
+ } else {
+ this.dockingLogs.push({ type: 'error', message: `❌ Error: ${data.error}` });
+ this.addLogLine(logContent, `❌ Error: ${data.error}`, 'error');
+ if (statusEl) {
+ statusEl.innerHTML = `
+
+ `;
+ }).join('');
+
+ // Tab click handlers
+ tabsContainer.querySelectorAll('.docking-ligand-tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ const ligIdx = parseInt(tab.getAttribute('data-ligand-idx'));
+ this.switchPosesLigand(ligIdx);
+ });
+ });
+ }
+
+ // Render selection radio buttons
+ const posesList = document.getElementById('docking-poses-list');
+ if (posesList) {
+ posesList.innerHTML = `
+
+ `;
+ chainContainer.appendChild(wrapper);
+ });
+ }
+
+ // Render ligands (one per instance; displayLabel e.g. GOL-A or GOL-A-1, GOL-A-2 for duplicates in same chain)
+ const ligandContainer = document.getElementById('ligand-selection');
+ if (ligandContainer) {
+ ligandContainer.innerHTML = '';
+ if (Array.isArray(this.currentProtein.ligandGroups) && this.currentProtein.ligandGroups.length > 0) {
+ this.currentProtein.ligandGroups.forEach((l, idx) => {
+ const label = l.displayLabel || `${l.resn}-${l.chain}`;
+ const id = `lig-${idx}`;
+ const resi = (l.resi != null && l.resi !== '') ? String(l.resi) : '';
+ const wrapper = document.createElement('div');
+ wrapper.className = 'checkbox-inline';
+ wrapper.innerHTML = `
+
+ `;
+ ligandContainer.appendChild(wrapper);
+
+ // Add event listener to automatically check "Preserve ligands" when ligand is clicked
+ const checkbox = document.getElementById(id);
+ if (checkbox) {
+ checkbox.addEventListener('change', (e) => {
+ if (e.target.checked) {
+ const preserveLigandsCheckbox = document.getElementById('preserve-ligands');
+ if (preserveLigandsCheckbox && !preserveLigandsCheckbox.checked) {
+ preserveLigandsCheckbox.checked = true;
+ preserveLigandsCheckbox.dispatchEvent(new Event('change'));
+ }
+ }
+ });
+ }
+ });
+ } else {
+ // Fallback: show unique ligand names if detailed positions not parsed
+ if (Array.isArray(this.currentProtein.ligands) && this.currentProtein.ligands.length > 0) {
+ this.currentProtein.ligands.forEach(resn => {
+ const id = `lig-${resn}`;
+ const wrapper = document.createElement('div');
+ wrapper.className = 'checkbox-inline';
+ wrapper.innerHTML = `
+
+ `;
+ ligandContainer.appendChild(wrapper);
+
+ // Add event listener to automatically check "Preserve ligands" when ligand is clicked
+ const checkbox = document.getElementById(id);
+ if (checkbox) {
+ checkbox.addEventListener('change', (e) => {
+ if (e.target.checked) {
+ const preserveLigandsCheckbox = document.getElementById('preserve-ligands');
+ if (preserveLigandsCheckbox && !preserveLigandsCheckbox.checked) {
+ preserveLigandsCheckbox.checked = true;
+ preserveLigandsCheckbox.dispatchEvent(new Event('change'));
+ }
+ }
+ });
+ }
+ });
+ } else {
+ ligandContainer.innerHTML = 'No ligands detected ';
+ }
+ }
+ }
+ }
+
+ getSelectedChains() {
+ const container = document.getElementById('chain-selection');
+ if (!container) return [];
+ return Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.getAttribute('data-chain'));
+ }
+
+ getSelectedLigands() {
+ const container = document.getElementById('ligand-selection');
+ if (!container) return [];
+ return Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).map(cb => ({
+ resn: cb.getAttribute('data-resn') || '',
+ chain: cb.getAttribute('data-chain') || '',
+ resi: cb.getAttribute('data-resi') || ''
+ }));
+ }
+
+ previewPreparedStructure() {
+ if (!this.preparedProtein) {
+ alert('Please prepare a protein structure first');
+ return;
+ }
+
+ // Show prepared structure preview
+ document.getElementById('prepared-structure-preview').style.display = 'block';
+
+ // Format removed components
+ const removedText = this.preparedProtein.removed_components ?
+ Object.entries(this.preparedProtein.removed_components)
+ .filter(([key, value]) => value > 0)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join(', ') || 'None' : 'None';
+
+ // Format added capping
+ const addedText = this.preparedProtein.added_capping ?
+ Object.entries(this.preparedProtein.added_capping)
+ .filter(([key, value]) => value > 0)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join(', ') || 'None' : 'None';
+
+ // Update structure info
+ document.getElementById('original-atoms').textContent = this.preparedProtein.original_atoms.toLocaleString();
+ document.getElementById('prepared-atoms').textContent = this.preparedProtein.prepared_atoms.toLocaleString();
+ document.getElementById('removed-components').textContent = removedText;
+ document.getElementById('added-capping').textContent = addedText;
+ document.getElementById('preserved-ligands').textContent = this.preparedProtein.preserved_ligands;
+
+ // Load 3D visualization of prepared structure
+ this.loadPrepared3DVisualization();
+ }
+
+ downloadPreparedStructure() {
+ if (!this.preparedProtein) {
+ alert('Please prepare a structure first');
+ return;
+ }
+
+ // Download prepared structure
+ const blob = new Blob([this.preparedProtein.content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `tleap_ready.pdb`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ downloadLigandFile() {
+ if (!this.preparedProtein || !this.preparedProtein.ligand_present || !this.preparedProtein.ligand_content) {
+ alert('No ligand file available. Please prepare structure with separate ligands enabled.');
+ return;
+ }
+
+ // Download ligand file
+ const ligandBlob = new Blob([this.preparedProtein.ligand_content], { type: 'text/plain' });
+ const ligandUrl = URL.createObjectURL(ligandBlob);
+ const ligandA = document.createElement('a');
+ ligandA.href = ligandUrl;
+ ligandA.download = `4_ligands_corrected.pdb`;
+ document.body.appendChild(ligandA);
+ ligandA.click();
+ document.body.removeChild(ligandA);
+ URL.revokeObjectURL(ligandUrl);
+ }
+
+ // 3D Visualization for prepared structure
+ async loadPrepared3DVisualization() {
+ if (!this.preparedProtein) return;
+
+ try {
+ // Initialize NGL stage for prepared structure if not already done
+ if (!this.preparedNglStage) {
+ this.preparedNglStage = new NGL.Stage("prepared-ngl-viewer", {
+ backgroundColor: "white",
+ quality: "medium"
+ });
+ }
+
+ // Clear existing components
+ this.preparedNglStage.removeAllComponents();
+
+ // Create a blob from prepared PDB content
+ const blob = new Blob([this.preparedProtein.content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+
+ // Load the prepared structure
+ const component = await this.preparedNglStage.loadFile(url, {
+ ext: "pdb",
+ defaultRepresentation: false
+ });
+
+ // Add cartoon representation for each chain with consistent colors
+ // This ensures each chain gets the same color as in Step 1
+ // Use chains from parsed protein data (more reliable than structure API)
+ const structureChains = (this.currentProtein && this.currentProtein.chains) ? this.currentProtein.chains : [];
+
+ if (this.chainColorMap && Object.keys(this.chainColorMap).length > 0) {
+ // Add representation for each chain that exists in the structure
+ structureChains.forEach((chain) => {
+ if (this.chainColorMap[chain]) {
+ component.addRepresentation("cartoon", {
+ sele: `:${chain}`,
+ color: this.chainColorMap[chain],
+ opacity: 0.9
+ });
+ }
+ });
+ } else {
+ // Fallback: use chainid if color map not available
+ component.addRepresentation("cartoon", {
+ sele: "protein",
+ colorScheme: "chainid",
+ opacity: 0.9
+ });
+ }
+
+ // Apply consistent chain colors after representation is added (backup)
+ setTimeout(() => {
+ this.applyConsistentChainColors(component);
+ }, 500);
+
+ // Add ball and stick for ligands (if any) - check for HETATM records
+ component.addRepresentation("ball+stick", {
+ sele: "hetero",
+ color: "element",
+ radius: 0.2,
+ opacity: 0.8
+ });
+
+ // Set initial representation state for toggle cycle
+ this.preparedRepresentation = 'cartoon';
+
+ // Auto-fit the view
+ this.preparedNglStage.autoView();
+
+ // Show controls
+ document.getElementById('prepared-viewer-controls').style.display = 'flex';
+
+ // Clean up the blob URL
+ URL.revokeObjectURL(url);
+
+ } catch (error) {
+ console.error('Error loading prepared 3D visualization:', error);
+ }
+ }
+
+ resetPreparedView() {
+ if (this.preparedNglStage) {
+ this.preparedNglStage.autoView();
+ }
+ }
+
+ togglePreparedRepresentation() {
+ if (!this.preparedNglStage) return;
+
+ const components = this.preparedNglStage.compList;
+ if (components.length === 0) return;
+
+ const component = components[0];
+ component.removeAllRepresentations();
+
+ if (this.preparedRepresentation === 'cartoon') {
+ // Switch to ball and stick
+ component.addRepresentation("ball+stick", {
+ color: "element",
+ radius: 0.15
+ });
+ this.preparedRepresentation = 'ball+stick';
+ document.getElementById('prepared-style-text').textContent = 'Ball & Stick';
+ } else if (this.preparedRepresentation === 'ball+stick') {
+ // Switch to surface with consistent chain colors
+ // Use chains from parsed protein data (more reliable than structure API)
+ const structureChains = (this.currentProtein && this.currentProtein.chains) ? this.currentProtein.chains : [];
+ if (this.chainColorMap && Object.keys(this.chainColorMap).length > 0) {
+ structureChains.forEach((chain) => {
+ if (this.chainColorMap[chain]) {
+ // protein and :A = only protein atoms in chain; excludes hetero so surface is not drawn around ligands
+ component.addRepresentation("surface", {
+ sele: `protein and :${chain}`,
+ color: this.chainColorMap[chain],
+ opacity: 0.7
+ });
+ }
+ });
+ } else {
+ // protein only: excludes hetero/ligands from surface
+ component.addRepresentation("surface", {
+ sele: "protein",
+ colorScheme: "chainid",
+ opacity: 0.7
+ });
+ }
+ // Add ball and stick for ligands so they remain visible in Surface mode (on top of protein-only surface)
+ component.addRepresentation("ball+stick", {
+ sele: "hetero",
+ color: "element",
+ radius: 0.2,
+ opacity: 0.8
+ });
+ this.preparedRepresentation = 'surface';
+ document.getElementById('prepared-style-text').textContent = 'Surface';
+ } else {
+ // Switch back to cartoon (from surface): use per-chain cartoon like load, avoid getChainColorScheme
+ const structureChains = (this.currentProtein && this.currentProtein.chains) ? this.currentProtein.chains : [];
+ if (this.chainColorMap && Object.keys(this.chainColorMap).length > 0) {
+ structureChains.forEach((chain) => {
+ if (this.chainColorMap[chain]) {
+ component.addRepresentation("cartoon", {
+ sele: `:${chain}`,
+ color: this.chainColorMap[chain],
+ opacity: 0.9
+ });
+ }
+ });
+ } else {
+ component.addRepresentation("cartoon", {
+ sele: "protein",
+ colorScheme: "chainid",
+ opacity: 0.9
+ });
+ }
+ // Add ball and stick for ligands
+ component.addRepresentation("ball+stick", {
+ sele: "hetero",
+ color: "element",
+ radius: 0.2,
+ opacity: 0.8
+ });
+ this.preparedRepresentation = 'cartoon';
+ document.getElementById('prepared-style-text').textContent = 'Mixed View';
+ }
+ }
+
+ togglePreparedSpin() {
+ if (!this.preparedNglStage) return;
+
+ this.preparedIsSpinning = !this.preparedIsSpinning;
+ this.preparedNglStage.setSpin(this.preparedIsSpinning);
+ }
+
+ // Missing Residues Methods
+ async detectMissingResidues() {
+ if (!this.currentProtein) {
+ this.showMissingStatus('error', 'Please load a protein structure first');
+ return;
+ }
+
+ const statusDiv = document.getElementById('missing-status');
+ statusDiv.className = 'status-message info';
+ statusDiv.innerHTML = '
+
+ `;
+ container.appendChild(wrapper);
+ });
+
+ // Show and populate minimization section
+ const minSection = document.getElementById('chain-minimization-section');
+ const minChainsList = document.getElementById('minimization-chains-list');
+ const minCheckboxes = document.getElementById('minimization-chains-checkboxes');
+
+ if (minSection && minChainsList && minCheckboxes) {
+ minSection.style.display = 'block';
+ minCheckboxes.innerHTML = '';
+
+ chainsWithMissing.forEach(chain => {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'checkbox-inline';
+ wrapper.innerHTML = `
+
+
+ `;
+ minCheckboxes.appendChild(wrapper);
+ });
+
+ // Show chain selection when minimize checkbox is checked
+ const minimizeCheckbox = document.getElementById('minimize-chains-checkbox');
+ if (minimizeCheckbox) {
+ minimizeCheckbox.addEventListener('change', (e) => {
+ minChainsList.style.display = e.target.checked ? 'block' : 'none';
+ });
+ }
+ }
+
+ // Update button state based on selections
+ this.updateBuildButtonState();
+
+ // Add event listeners to checkboxes
+ container.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+ checkbox.addEventListener('change', () => this.updateBuildButtonState());
+ });
+ }
+
+ updateBuildButtonState() {
+ const container = document.getElementById('missing-chains-list');
+ const selectedChains = Array.from(container.querySelectorAll('input[type="checkbox"]:checked'));
+ const buildBtn = document.getElementById('build-complete-structure');
+ const previewBtn = document.getElementById('preview-completed-structure');
+ const downloadBtn = document.getElementById('download-completed-structure');
+
+ if (selectedChains.length > 0) {
+ buildBtn.disabled = false;
+ } else {
+ buildBtn.disabled = true;
+ previewBtn.disabled = true;
+ document.getElementById('preview-superimposed-structure').disabled = true;
+ downloadBtn.disabled = true;
+ }
+ }
+
+ displayMissingSummary(missingResidues) {
+ const summaryContent = document.getElementById('missing-summary-content');
+ let html = '';
+
+ Object.entries(missingResidues).forEach(([chain, info]) => {
+ html += ``;
+ html += `
Chain ${chain}: ${info.count} missing residues `;
+ if (info.residues && info.residues.length > 0) {
+ // Display all residues horizontally directly on green background
+ // Format negative numbers as GLY(-3) instead of GLY -3
+ const residueStrings = info.residues.map(
+ ([resname, resnum]) => {
+ if (resnum < 0) {
+ return `${resname}(${resnum})`;
+ } else {
+ return `${resname}${resnum}`;
+ }
+ }
+ );
+ html += '
';
+ html += residueStrings.join(', ');
+ html += '
';
+ }
+ html += `
+
+ (${sequence.length} residues${missingInfo ? `, ${missingInfo.count} missing` : ''})
+
+
+ `;
+ chainDiv.appendChild(header);
+
+ const sequenceDiv = document.createElement('div');
+ sequenceDiv.className = 'sequence-display';
+
+ // Split sequence into chunks of 80 characters for display (more characters per line for better width utilization)
+ const chunkSize = 80;
+ for (let i = 0; i < sequence.length; i += chunkSize) {
+ const chunk = sequence.substring(i, i + chunkSize);
+ const chunkDiv = document.createElement('div');
+ chunkDiv.className = 'sequence-line';
+
+ // Add line number using actual residue numbering (accounting for missing residues)
+ const lineNum = document.createElement('span');
+ lineNum.className = 'sequence-line-number';
+ // Calculate residue number: sequenceStart + position in sequence
+ const residueNum = sequenceStart + i;
+ // Format with proper padding (handle negative numbers)
+ // For negative numbers, pad the absolute value and add sign
+ if (residueNum < 0) {
+ lineNum.textContent = '-' + String(Math.abs(residueNum)).padStart(4, ' ');
+ } else {
+ lineNum.textContent = String(residueNum).padStart(5, ' ');
+ }
+ chunkDiv.appendChild(lineNum);
+
+ // Add sequence characters
+ const seqSpan = document.createElement('span');
+ seqSpan.className = 'sequence-characters';
+
+ for (let j = 0; j < chunk.length; j++) {
+ const char = chunk[j];
+ const pos = i + j;
+ // Calculate actual residue number: sequenceStart + position
+ const residueNum = sequenceStart + pos;
+ const charSpan = document.createElement('span');
+ charSpan.className = 'sequence-char';
+
+ // Get three-letter code for tooltip
+ const threeLetterCode = this.getThreeLetterCode(char);
+
+ // Check if this residue number is missing (using PDB residue numbers)
+ if (missingResNums.has(residueNum)) {
+ charSpan.style.color = '#6c757d'; // Grey for missing
+ charSpan.style.backgroundColor = '#f0f0f0';
+ charSpan.style.fontWeight = 'bold';
+ charSpan.title = `Missing residue ${threeLetterCode} at position ${residueNum}`;
+ } else {
+ charSpan.style.color = chainColor; // Chain color for present residues
+ charSpan.title = `Residue ${threeLetterCode} at position ${residueNum}`;
+ }
+
+ charSpan.textContent = char;
+ seqSpan.appendChild(charSpan);
+ }
+
+ chunkDiv.appendChild(seqSpan);
+ sequenceDiv.appendChild(chunkDiv);
+ }
+
+ chainDiv.appendChild(sequenceDiv);
+ container.appendChild(chainDiv);
+ });
+ }
+
+ parseLastResidueNumbers() {
+ /**
+ * Parse PDB content to extract the last residue number for each chain
+ * Returns: { chainId: lastResidueNumber }
+ */
+ const chainLastResidue = {};
+
+ if (!this.currentProtein || !this.currentProtein.content) {
+ return chainLastResidue;
+ }
+
+ const lines = this.currentProtein.content.split('\n');
+ const chainResidues = {}; // { chainId: Set of residue numbers }
+
+ for (const line of lines) {
+ // Only look at ATOM records for protein chains (not HETATM for ligands/water)
+ if (line.startsWith('ATOM')) {
+ const chainId = line.substring(21, 22).trim();
+ if (!chainId) continue;
+
+ // Extract residue number (columns 22-26, handling insertion codes and negative numbers)
+ const residueStr = line.substring(22, 26).trim();
+ const match = residueStr.match(/^(-?\d+)/);
+ if (match) {
+ const residueNum = parseInt(match[1], 10);
+
+ if (!chainResidues[chainId]) {
+ chainResidues[chainId] = new Set();
+ }
+ chainResidues[chainId].add(residueNum);
+ }
+ }
+ }
+
+ // Find the maximum residue number for each chain
+ for (const [chainId, residueSet] of Object.entries(chainResidues)) {
+ if (residueSet.size > 0) {
+ chainLastResidue[chainId] = Math.max(...Array.from(residueSet));
+ }
+ }
+
+ return chainLastResidue;
+ }
+
+ analyzeEdgeResidues(chain, missingResidues) {
+ /**
+ * Analyze missing residues to determine which ones are at edges
+ * Returns: { n_terminal: {start, end, count}, c_terminal: {start, end, count} }
+ *
+ * A missing residue is at the edge ONLY if:
+ * - N-terminal: There are NO residues present in the sequence BEFORE the first missing residue
+ * - C-terminal: There are NO residues present in the sequence AFTER the last missing residue
+ *
+ * This ensures we only trim residues that are truly at the edges, not internal missing residues
+ * that have sequence residues before/after them.
+ */
+ if (!missingResidues || !missingResidues[chain] || !missingResidues[chain].residues) {
+ return { n_terminal: null, c_terminal: null };
+ }
+
+ const residues = missingResidues[chain].residues;
+ if (residues.length === 0) {
+ return { n_terminal: null, c_terminal: null };
+ }
+
+ // Get the chain sequence to check for residues present before/after missing residues
+ const sequence = this.chainSequences && this.chainSequences[chain];
+ // sequenceStart tells us what residue number corresponds to position 0 in the sequence
+ // If not set, default to 1 (canonical sequence starting at residue 1)
+ const sequenceStart = this.chainSequenceStart && this.chainSequenceStart[chain] !== undefined
+ ? this.chainSequenceStart[chain]
+ : 1;
+
+ // If we don't have the sequence, we can't check for residues before/after
+ if (!sequence) {
+ console.warn(`No sequence available for chain ${chain}, cannot check edge residues`);
+ return { n_terminal: null, c_terminal: null };
+ }
+
+ // Get actual first and last residue numbers from PDB
+ const firstPdbResidue = this.chainFirstResidue && this.chainFirstResidue[chain];
+ const lastPdbResidue = this.chainLastResidue && this.chainLastResidue[chain];
+
+ // If we don't have PDB residue info, fall back to old logic (but this shouldn't happen)
+ if (firstPdbResidue === undefined || lastPdbResidue === undefined) {
+ console.warn(`Missing PDB residue info for chain ${chain}, using fallback logic`);
+ console.warn(`chainFirstResidue:`, this.chainFirstResidue);
+ console.warn(`chainLastResidue:`, this.chainLastResidue);
+ return { n_terminal: null, c_terminal: null };
+ }
+
+ // Extract residue numbers and sort
+ const resNums = residues.map(([resname, resnum]) => resnum).sort((a, b) => a - b);
+
+ // Create a set of missing residue numbers for quick lookup
+ const missingResNums = new Set(resNums);
+
+ // Debug logging (after resNums is declared)
+ console.log(`Chain ${chain} edge detection:`, {
+ firstPdbResidue,
+ lastPdbResidue,
+ missingResidueCount: residues.length,
+ firstMissing: resNums.length > 0 ? resNums[0] : null,
+ lastMissing: resNums.length > 0 ? resNums[resNums.length - 1] : null,
+ sequenceLength: sequence ? sequence.length : 0,
+ sequenceStart: sequenceStart
+ });
+
+ // Find all consecutive ranges
+ const ranges = [];
+ if (resNums.length > 0) {
+ let rangeStart = resNums[0];
+ let rangeEnd = resNums[0];
+
+ for (let i = 1; i < resNums.length; i++) {
+ if (resNums[i] === rangeEnd + 1) {
+ // Consecutive, extend range
+ rangeEnd = resNums[i];
+ } else {
+ // Gap found, save current range and start new one
+ ranges.push({ start: rangeStart, end: rangeEnd });
+ rangeStart = resNums[i];
+ rangeEnd = resNums[i];
+ }
+ }
+ // Don't forget the last range
+ ranges.push({ start: rangeStart, end: rangeEnd });
+ }
+
+ // Identify N-terminal edge
+ // A missing residue is N-terminal ONLY if:
+ // 1. The first missing residue is at or before the first PDB residue (no PDB residues before it)
+ // 2. AND there are NO sequence residues present BEFORE the first missing residue in the sequence
+ let nTerminal = null;
+ if (ranges.length > 0 && sequence) {
+ const firstRange = ranges[0];
+ // Check if the first missing residue is at or before the first PDB residue
+ if (firstRange.start <= firstPdbResidue) {
+ // Map the first missing residue number to sequence position
+ // sequenceStart maps position 0 to a residue number, so: position = residueNum - sequenceStart
+ const firstMissingPos = firstRange.start - sequenceStart;
+
+ // Check if there are any non-missing residues in the sequence BEFORE this position
+ let hasResiduesBefore = false;
+ for (let pos = 0; pos < firstMissingPos && pos < sequence.length; pos++) {
+ const residueNum = sequenceStart + pos; // Map position to residue number
+ // If this residue is not missing, then we have residues before the missing ones
+ if (!missingResNums.has(residueNum)) {
+ hasResiduesBefore = true;
+ break;
+ }
+ }
+
+ // Only mark as N-terminal edge if there are NO residues before the missing ones
+ if (!hasResiduesBefore) {
+ nTerminal = {
+ start: firstRange.start,
+ end: firstRange.end,
+ count: firstRange.end - firstRange.start + 1
+ };
+ }
+ }
+ }
+
+ // Identify C-terminal edge
+ // A missing residue is C-terminal ONLY if:
+ // 1. The missing residues extend beyond the last PDB residue (no PDB residues after them)
+ // 2. AND there are NO sequence residues present AFTER the last missing residue in the sequence
+ let cTerminal = null;
+ if (ranges.length > 0 && sequence) {
+ const lastRange = ranges[ranges.length - 1];
+ // Check if the missing residues extend beyond the last PDB residue
+ const extendsBeyond = lastRange.end > lastPdbResidue;
+ const noGap = lastRange.start <= lastPdbResidue + 1;
+
+ if (extendsBeyond && noGap) {
+ // Map the last missing residue number to sequence position
+ // sequenceStart maps position 0 to a residue number, so: position = residueNum - sequenceStart
+ const lastMissingPos = lastRange.end - sequenceStart;
+
+ // Check if there are any non-missing residues in the sequence AFTER this position
+ let hasResiduesAfter = false;
+ for (let pos = lastMissingPos + 1; pos < sequence.length; pos++) {
+ const residueNum = sequenceStart + pos; // Map position to residue number
+ // If this residue is not missing, then we have residues after the missing ones
+ if (!missingResNums.has(residueNum)) {
+ hasResiduesAfter = true;
+ break;
+ }
+ }
+
+ // Only mark as C-terminal edge if there are NO residues after the missing ones
+ if (!hasResiduesAfter) {
+ cTerminal = {
+ start: lastRange.start,
+ end: lastRange.end,
+ count: lastRange.end - lastRange.start + 1
+ };
+ }
+ }
+ }
+
+ return {
+ n_terminal: nTerminal,
+ c_terminal: cTerminal
+ };
+ }
+
+ updateTrimInfoBox(chainsWithMissing) {
+ const infoBox = document.getElementById('trim-info-box-content');
+ if (!infoBox || !this.missingResiduesInfo) {
+ return;
+ }
+
+ let html = 'Note: ';
+
+ const edgeInfo = [];
+ chainsWithMissing.forEach(chain => {
+ const edges = this.analyzeEdgeResidues(chain, this.missingResiduesInfo);
+ const chainInfo = [];
+
+ if (edges.n_terminal) {
+ chainInfo.push(`residues ${edges.n_terminal.start}-${edges.n_terminal.end} from N-terminal`);
+ }
+ if (edges.c_terminal) {
+ chainInfo.push(`residues ${edges.c_terminal.start}-${edges.c_terminal.end} from C-terminal`);
+ }
+
+ if (chainInfo.length > 0) {
+ edgeInfo.push(`Chain ${chain}: ${chainInfo.join(' and ')}`);
+ }
+ });
+
+ if (edgeInfo.length > 0) {
+ html += 'Only missing residues at the edges can be trimmed. ';
+ html += edgeInfo.join('; ') + '. ';
+ html += 'Missing residues in internal loops (discontinuities in the middle) cannot be trimmed and will be filled by ESMFold.';
+ } else {
+ html += 'Only missing residues at the N-terminal edge (beginning) and C-terminal edge (end) can be trimmed. ';
+ html += 'Missing residues in internal loops (discontinuities in the middle of the sequence) cannot be trimmed using this tool and will be filled by ESMFold.';
+ }
+
+ infoBox.innerHTML = html;
+ }
+
+ renderTrimControls(chainsWithMissing) {
+ const container = document.getElementById('trim-residues-list');
+ container.innerHTML = '';
+
+ if (!this.chainSequences || Object.keys(this.chainSequences).length === 0) {
+ return;
+ }
+
+ // Update the info box with dynamic information
+ this.updateTrimInfoBox(chainsWithMissing);
+
+ chainsWithMissing.forEach(chain => {
+ const sequence = this.chainSequences[chain] || '';
+ const seqLength = sequence.length;
+
+ // Get edge residue information for this chain
+ const edges = this.analyzeEdgeResidues(chain, this.missingResiduesInfo);
+
+ // Calculate max values based on detected edge residues
+ const nTerminalMax = edges.n_terminal ? edges.n_terminal.count : 0;
+ const cTerminalMax = edges.c_terminal ? edges.c_terminal.count : 0;
+
+ // Build N-terminal label with limit info
+ let nTerminalLabel = 'N-terminal:';
+ if (edges.n_terminal) {
+ nTerminalLabel += ` (max: ${nTerminalMax}) `;
+ } else {
+ nTerminalLabel += ` (no missing residues) `;
+ }
+
+ // Build C-terminal label with limit info
+ let cTerminalLabel = 'C-terminal:';
+ if (edges.c_terminal) {
+ cTerminalLabel += ` (max: ${cTerminalMax}) `;
+ } else {
+ cTerminalLabel += ` (no missing residues) `;
+ }
+
+ const wrapper = document.createElement('div');
+ wrapper.className = 'trim-chain-controls';
+ wrapper.innerHTML = `
+ Chain ${chain} (${seqLength} residues)
+
+
+ Original length: ${seqLength} residues
+
+ `;
+ container.appendChild(wrapper);
+
+ // Add event listeners to update info and enforce limits
+ const nInput = wrapper.querySelector(`#trim-n-${chain}`);
+ const cInput = wrapper.querySelector(`#trim-c-${chain}`);
+ const infoDiv = wrapper.querySelector(`#trim-info-${chain}`);
+
+ // Enforce max limits based on edge residues (only if there are edge residues)
+ if (nTerminalMax > 0) {
+ nInput.addEventListener('input', () => {
+ const value = parseInt(nInput.value) || 0;
+ if (value > nTerminalMax) {
+ nInput.value = nTerminalMax;
+ }
+ });
+ } else {
+ // Disable input if no edge residues
+ nInput.disabled = true;
+ }
+
+ if (cTerminalMax > 0) {
+ cInput.addEventListener('input', () => {
+ const value = parseInt(cInput.value) || 0;
+ if (value > cTerminalMax) {
+ cInput.value = cTerminalMax;
+ }
+ });
+ } else {
+ // Disable input if no edge residues
+ cInput.disabled = true;
+ }
+
+ const updateInfo = () => {
+ const nTrim = parseInt(nInput.value) || 0;
+ const cTrim = parseInt(cInput.value) || 0;
+ const totalTrim = nTrim + cTrim;
+ const newLength = seqLength - totalTrim;
+
+ // Check if values exceed edge limits
+ let warningMsg = '';
+ if (nTerminalMax > 0 && nTrim > nTerminalMax) {
+ warningMsg = `Warning: N-terminal trim (${nTrim}) exceeds edge limit (${nTerminalMax}) `;
+ } else if (cTerminalMax > 0 && cTrim > cTerminalMax) {
+ warningMsg = `Warning: C-terminal trim (${cTrim}) exceeds edge limit (${cTerminalMax}) `;
+ } else if (nTerminalMax === 0 && nTrim > 0) {
+ warningMsg = `Warning: No N-terminal edge residues to trim `;
+ } else if (cTerminalMax === 0 && cTrim > 0) {
+ warningMsg = `Warning: No C-terminal edge residues to trim `;
+ } else if (totalTrim >= seqLength) {
+ warningMsg = `Error: Total trim (${totalTrim}) exceeds sequence length (${seqLength}) `;
+ } else if (newLength <= 0) {
+ warningMsg = `Error: Resulting sequence would be empty `;
+ } else {
+ let infoText = `Original: ${seqLength} residues → Trimmed: ${newLength} residues (removing ${nTrim} from N-term, ${cTrim} from C-term)`;
+ if (nTerminalMax > 0 || cTerminalMax > 0) {
+ infoText += `Edge limits: N-term max ${nTerminalMax}, C-term max ${cTerminalMax} `;
+ } else {
+ infoText += `No edge residues available for trimming `;
+ }
+ infoDiv.innerHTML = infoText;
+ }
+
+ if (warningMsg) {
+ infoDiv.innerHTML = warningMsg;
+ }
+ };
+
+ nInput.addEventListener('input', updateInfo);
+ cInput.addEventListener('input', updateInfo);
+ updateInfo(); // Initial update
+ });
+
+ // Show the trim section
+ document.getElementById('trim-residues-section').style.display = 'block';
+ }
+
+ async applyTrimming() {
+ if (!this.chainSequences || !this.missingResiduesPdbId) {
+ this.showTrimStatus('error', 'No chain sequences available. Please detect missing residues first.');
+ return;
+ }
+
+ const trimStatusDiv = document.getElementById('trim-status');
+ trimStatusDiv.className = 'status-message info';
+ trimStatusDiv.innerHTML = 'Trimmed! Original: ${info.original_length} →
+ Trimmed: ${info.trimmed_length} residues
+ (removed ${info.n_terminal_trimmed} from N-term, ${info.c_terminal_trimmed} from C-term)
+ `;
+ infoDiv.style.color = '#155724';
+ }
+ });
+
+ this.showTrimStatus('success', result.message);
+ } else {
+ throw new Error(result.error || 'Failed to apply trimming');
+ }
+ } catch (error) {
+ console.error('Error applying trimming:', error);
+ this.showTrimStatus('error', `Error: ${error.message}`);
+ }
+ }
+
+ showTrimStatus(type, message) {
+ const statusDiv = document.getElementById('trim-status');
+ statusDiv.className = `status-message ${type}`;
+ statusDiv.textContent = message;
+ statusDiv.style.display = 'block';
+
+ if (type === 'success') {
+ setTimeout(() => {
+ statusDiv.style.display = 'none';
+ }, 5000);
+ }
+ }
+
+ async buildCompletedStructure() {
+ const container = document.getElementById('missing-chains-list');
+ const selectedChains = Array.from(container.querySelectorAll('input[type="checkbox"]:checked'))
+ .map(cb => cb.getAttribute('data-chain'));
+
+ if (selectedChains.length === 0) {
+ this.showMissingStatus('error', 'Please select at least one chain to complete');
+ return;
+ }
+
+ // Get minimization preference
+ const minimizeCheckbox = document.getElementById('minimize-chains-checkbox');
+ const minimizeChains = minimizeCheckbox ? minimizeCheckbox.checked : false;
+ let chainsToMinimize = [];
+
+ if (minimizeChains) {
+ // Get selected chains for minimization
+ const minContainer = document.getElementById('minimization-chains-checkboxes');
+ if (minContainer) {
+ chainsToMinimize = Array.from(minContainer.querySelectorAll('input[type="checkbox"]:checked'))
+ .map(cb => cb.getAttribute('data-chain'));
+ }
+ // If no specific chains selected, minimize all
+ if (chainsToMinimize.length === 0) {
+ chainsToMinimize = selectedChains;
+ }
+ }
+
+ const buildBtn = document.getElementById('build-complete-structure');
+ const originalText = buildBtn.innerHTML;
+ buildBtn.innerHTML = '