Skip to content

Commit f138358

Browse files
ypriverolypriverol
authored
Merge pull request #581 from bigbio/dev
Added more help to the pmultiqc service
2 parents 61c0841 + b14547e commit f138358

File tree

1 file changed

+184
-8
lines changed

1 file changed

+184
-8
lines changed

‎pmultiqc_service/templates/index.html‎

Lines changed: 184 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,10 @@ <h3>🔍 Choose Analysis Type</h3>
5757
<!-- Step 2: File Upload -->
5858
<div id="step2-upload" class="step">
5959
<h3>📁 Upload Files</h3>
60-
<p>Upload your proteomics data files as ZIP archives (containing MaxQuant, DIANN, quantms, or mzIdentML data)</p>
60+
<p>Upload your proteomics data files as ZIP archives (containing MaxQuant, DIANN, quantms, FragPipe, or mzIdentML data)</p>
61+
<div style="text-align: center; margin-bottom: 15px;">
62+
<a href="#" onclick="showFileRequirements(); return false;" style="color: #007bff; text-decoration: none; font-size: 14px;">What files do I need?</a>
63+
</div>
6164
<input type="file" id="fileInput" class="file-input" multiple accept=".zip">
6265
<button class="upload-btn" onclick="document.getElementById('fileInput').click()">Choose Files</button>
6366
<div id="fileList"></div>
@@ -879,12 +882,27 @@ <h3 style="color: #333; margin-bottom: 20px; font-size: 1.5em;">About pmultiqc</
879882
closeExamples();
880883
}
881884

885+
// File Requirements Modal
886+
function showFileRequirements() {
887+
const modal = document.getElementById('fileRequirementsModal');
888+
modal.style.display = 'block';
889+
}
890+
891+
function closeFileRequirements() {
892+
const modal = document.getElementById('fileRequirementsModal');
893+
modal.style.display = 'none';
894+
}
895+
882896
// Close modal when clicking outside
883897
window.onclick = function(event) {
884-
const modal = document.getElementById('examplesModal');
885-
if (event.target === modal) {
898+
const examplesModal = document.getElementById('examplesModal');
899+
const fileReqModal = document.getElementById('fileRequirementsModal');
900+
if (event.target === examplesModal) {
886901
closeExamples();
887902
}
903+
if (event.target === fileReqModal) {
904+
closeFileRequirements();
905+
}
888906
}
889907
</script>
890908

@@ -1064,11 +1082,169 @@ <h4 style="margin: 0 0 5px; color: #333;">PXD062399 - FragPipe Analysis</h4>
10641082

10651083
<div style="margin-top: 20px; text-align: center;">
10661084
<button onclick="closeExamples()" style="
1067-
background: #6c757d;
1068-
color: white;
1069-
border: none;
1070-
padding: 10px 20px;
1071-
border-radius: 6px;
1085+
background: #6c757d;
1086+
color: white;
1087+
border: none;
1088+
padding: 10px 20px;
1089+
border-radius: 6px;
1090+
cursor: pointer;
1091+
">Close</button>
1092+
</div>
1093+
</div>
1094+
</div>
1095+
1096+
<!-- File Requirements Modal -->
1097+
<div id="fileRequirementsModal" class="modal" style="
1098+
display: none;
1099+
position: fixed;
1100+
z-index: 1000;
1101+
left: 0;
1102+
top: 0;
1103+
width: 100%;
1104+
height: 100%;
1105+
background-color: rgba(0,0,0,0.5);
1106+
overflow-y: auto;
1107+
">
1108+
<div class="modal-content" style="
1109+
background-color: #fefefe;
1110+
margin: 3% auto;
1111+
padding: 20px;
1112+
border: 1px solid #888;
1113+
width: 90%;
1114+
max-width: 750px;
1115+
border-radius: 10px;
1116+
position: relative;
1117+
">
1118+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
1119+
<h3 style="margin: 0; color: #333;">📋 File Requirements by Workflow</h3>
1120+
<span onclick="closeFileRequirements()" style="
1121+
color: #aaa;
1122+
font-size: 28px;
1123+
font-weight: bold;
1124+
cursor: pointer;
1125+
">&times;</span>
1126+
</div>
1127+
1128+
<div style="margin-bottom: 20px;">
1129+
<p style="color: #666; margin-bottom: 15px;">
1130+
Your ZIP archive will be automatically detected based on the files it contains. Below are the required files for each supported workflow.
1131+
</p>
1132+
</div>
1133+
1134+
<div style="display: grid; gap: 15px;">
1135+
<!-- MaxQuant Section -->
1136+
<div style="
1137+
border-left: 4px solid #007bff;
1138+
border-radius: 0 8px 8px 0;
1139+
padding: 15px;
1140+
background: #f8f9fa;
1141+
">
1142+
<h4 style="margin: 0 0 10px; color: #007bff;">MaxQuant</h4>
1143+
<p style="margin: 0 0 10px; color: #333; font-weight: 500;">Required files (at least one of):</p>
1144+
<ul style="margin: 0 0 10px; padding-left: 20px; color: #333;">
1145+
<li><code>evidence.txt</code></li>
1146+
<li><code>msms.txt</code></li>
1147+
<li><code>peptides.txt</code></li>
1148+
<li><code>proteinGroups.txt</code></li>
1149+
</ul>
1150+
<p style="margin: 0 0 5px; color: #666; font-size: 0.9em;"><strong>Recommended additional files:</strong></p>
1151+
<p style="margin: 0; color: #666; font-size: 0.9em;">
1152+
<code>summary.txt</code>, <code>parameters.txt</code>, <code>msScans.txt</code>, <code>msmsScans.txt</code>
1153+
</p>
1154+
<p style="margin: 10px 0 0; color: #28a745; font-size: 0.9em;">
1155+
<strong>Optional:</strong> <code>*sdrf.tsv</code> (sample metadata)
1156+
</p>
1157+
</div>
1158+
1159+
<!-- DIANN Section -->
1160+
<div style="
1161+
border-left: 4px solid #28a745;
1162+
border-radius: 0 8px 8px 0;
1163+
padding: 15px;
1164+
background: #f8f9fa;
1165+
">
1166+
<h4 style="margin: 0 0 10px; color: #28a745;">DIA-NN</h4>
1167+
<p style="margin: 0 0 10px; color: #333; font-weight: 500;">Required files:</p>
1168+
<ul style="margin: 0 0 10px; padding-left: 20px; color: #333;">
1169+
<li><code>report.tsv</code> or <code>report.parquet</code></li>
1170+
<li>Alternative names: <code>diann_report.tsv</code> or <code>diann_report.parquet</code></li>
1171+
</ul>
1172+
<p style="margin: 10px 0 0; color: #28a745; font-size: 0.9em;">
1173+
<strong>Optional:</strong> <code>*sdrf.tsv</code> (sample metadata), <code>*ms_info.parquet</code> (mzML statistics)
1174+
</p>
1175+
</div>
1176+
1177+
<!-- Quantms Section -->
1178+
<div style="
1179+
border-left: 4px solid #6f42c1;
1180+
border-radius: 0 8px 8px 0;
1181+
padding: 15px;
1182+
background: #f8f9fa;
1183+
">
1184+
<h4 style="margin: 0 0 10px; color: #6f42c1;">quantms Pipeline</h4>
1185+
<p style="margin: 0 0 10px; color: #333; font-weight: 500;">Required files:</p>
1186+
<ul style="margin: 0 0 10px; padding-left: 20px; color: #333;">
1187+
<li><code>multiqc_config.yml</code> (pipeline configuration)</li>
1188+
<li>AND at least one of: <code>*.mzTab</code> or <code>*_ms_info.parquet</code></li>
1189+
</ul>
1190+
<p style="margin: 0 0 5px; color: #666; font-size: 0.9em;"><strong>Common additional files:</strong></p>
1191+
<p style="margin: 0; color: #666; font-size: 0.9em;">
1192+
<code>experimental_design.tsv</code>, <code>*msstats*.csv</code>, <code>*.idXML</code>, <code>diann_report.tsv</code>
1193+
</p>
1194+
</div>
1195+
1196+
<!-- FragPipe Section -->
1197+
<div style="
1198+
border-left: 4px solid #17a2b8;
1199+
border-radius: 0 8px 8px 0;
1200+
padding: 15px;
1201+
background: #f8f9fa;
1202+
">
1203+
<h4 style="margin: 0 0 10px; color: #17a2b8;">FragPipe</h4>
1204+
<p style="margin: 0 0 10px; color: #333; font-weight: 500;">Required files (at least one of):</p>
1205+
<ul style="margin: 0 0 10px; padding-left: 20px; color: #333;">
1206+
<li><code>psm.tsv</code> (FDR-filtered PSMs)</li>
1207+
<li><code>ion.tsv</code> (FDR-filtered ions)</li>
1208+
</ul>
1209+
<p style="margin: 0 0 5px; color: #666; font-size: 0.9em;"><strong>Common additional files:</strong></p>
1210+
<p style="margin: 0; color: #666; font-size: 0.9em;">
1211+
<code>combined_ion.tsv</code>, <code>combined_peptide.tsv</code>, <code>combined_protein.tsv</code>, <code>peptide.tsv</code>
1212+
</p>
1213+
</div>
1214+
1215+
<!-- mzIdentML Section -->
1216+
<div style="
1217+
border-left: 4px solid #fd7e14;
1218+
border-radius: 0 8px 8px 0;
1219+
padding: 15px;
1220+
background: #f8f9fa;
1221+
">
1222+
<h4 style="margin: 0 0 10px; color: #fd7e14;">mzIdentML</h4>
1223+
<p style="margin: 0 0 10px; color: #333; font-weight: 500;">Required files:</p>
1224+
<ul style="margin: 0 0 10px; padding-left: 20px; color: #333;">
1225+
<li><code>*.mzid</code> (identification results)</li>
1226+
<li>AND corresponding spectra files: <code>*.mzML</code> or <code>*.mgf</code></li>
1227+
</ul>
1228+
<p style="margin: 10px 0 0; color: #fd7e14; font-size: 0.9em;">
1229+
<strong>Supported compressed formats:</strong> <code>.gz</code>, <code>.zip</code>
1230+
</p>
1231+
</div>
1232+
</div>
1233+
1234+
<div style="margin-top: 20px; padding: 15px; background: #e7f3ff; border-radius: 8px; border-left: 4px solid #007bff;">
1235+
<p style="margin: 0; color: #004085; font-size: 0.9em;">
1236+
<strong>Tip:</strong> The workflow type is automatically detected based on the files in your ZIP archive.
1237+
Make sure to include all required files in a single ZIP archive (max 10GB).
1238+
</p>
1239+
</div>
1240+
1241+
<div style="margin-top: 20px; text-align: center;">
1242+
<button onclick="closeFileRequirements()" style="
1243+
background: #6c757d;
1244+
color: white;
1245+
border: none;
1246+
padding: 10px 20px;
1247+
border-radius: 6px;
10721248
cursor: pointer;
10731249
">Close</button>
10741250
</div>

0 commit comments

Comments
 (0)