diff src/meta-compound-mix.html @ 1:7e3085fc60c1 draft default tip

master branch Updating
author lain
date Wed, 30 Aug 2023 14:21:18 +0000
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/meta-compound-mix.html	Wed Aug 30 14:21:18 2023 +0000
@@ -0,0 +1,1231 @@
+<!doctype HTML>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="MetaboHUB">
+    <link rel="icon" type="image/ico" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/ico/favicon.ico">
+    <title>PeakForest MetaboHub</title>
+    <meta name="keywords" content="spectral database, mass spectrometry, nmr, lc-ms, gc-ms, chemical, metabolomic, compound, library">
+    <meta name="description" content="PeakForest is a spectral data portal for Metabolomics community. It provides storage and annotation services for metabolic profils of biological matrix. It relies on the wide range of complementary methods using UPLC-(API)HRMS, GC-QToF, and NMR.">
+    <style>.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }.file-input-name { margin-left: 8px; }</style>
+    <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/sb-admin.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/font-awesome/css/font-awesome.min.css">
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/jquery.min.js"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap.min.js"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-typeahead.min.js"></script>
+    <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap-select.min.css" media="screen" rel="stylesheet" type="text/css">
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-select.min.js" type="text/javascript"></script>
+    <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap-datepicker.min.css" media="screen" rel="stylesheet" type="text/css">
+    <script type="text/javascript" src="/common.js"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/jquery.tmpl.min.js" type="text/javascript"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/highcharts.min.js"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/modules/exporting.min.js"></script>
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/themes/grid.min.js"></script>
+    <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap.overwrite.min.css" rel="stylesheet" media="screen">
+    <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/peakforest.min.js"></script>
+    <script type="text/javascript" src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/tablesorter/jquery.tablesorter.min.js"></script>
+    <script type="text/javascript" src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/tablesorter/tables.min.js"></script>
+    <link rel="stylesheet" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/nmrpro/specdraw.min.css" type="text/css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div id="page-wrapper" class="peakforest-main-wrapper">
+      <div>
+        <button class="btn btn-validate" onclick="ctx().exit()">Close MS2PF</button>
+      </div>
+      <div class="row" style="margin-bottom: 50px;">
+        <div id="add-spectrum">
+          <div class="panel-group" id="accordion-{{ TAB_INDEX_PLACEHOLDER }}">
+            <div class="panel panel-default">
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a
+                    data-toggle="collapse"
+                    data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
+                    href="#step0-{{ TAB_INDEX_PLACEHOLDER }}"
+                  >
+                    Spectrum Type
+                    <i
+                      id="step0sign-{{ TAB_INDEX_PLACEHOLDER }}"
+                      class="fa fa-question-circle"
+                    ></i>
+                  </a>
+                </h4>
+              </div>
+              <div
+                id="step0-{{ TAB_INDEX_PLACEHOLDER }}"
+                class="panel-collapse collapse in"
+              >
+                <div class="panel-bodỵ">
+                  <button
+                    class="btn btn-disabled"
+                    disabled="disabled"><i
+                    class="fa fa-plus-circle"
+                  ></i> GC-MS spectrum</button>
+                  <button
+                    id="set_LC_MS_spectrum_button"
+                    class="btn btn-primary"
+                    onclick="ctx().addOneSpectrum(2);"><i
+                    class="fa fa-plus-circle"
+                  ></i> LC-MS spectrum</button>
+                  <button
+                    id="set_LC_MSMS_spectrum_button"
+                    class="btn btn-primary"
+                    onclick="ctx().addOneSpectrum(5);"><i
+                    class="fa fa-plus-circle"
+                  ></i> LC-MSMS spectrum</button>
+                </div>
+              </div>
+            </div>
+            <div
+              id="add1spectrum-sampleData-{{ TAB_INDEX_PLACEHOLDER }}"
+              class="panel panel-default"
+              style="display: none;">
+              <div
+                class="panel-heading panel-success">
+                <h4
+                  class="panel-title">
+                  <a
+                    id="linkActivateStep1-{{ TAB_INDEX_PLACEHOLDER }}"
+                    data-toggle="collapse"
+                    data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
+                    href="#step1-{{ TAB_INDEX_PLACEHOLDER }}"
+                  >
+                    Sample Type
+                    <i
+                      id="step1sign-{{ TAB_INDEX_PLACEHOLDER }}"
+                      class="fa fa-question-circle"
+                    ></i>
+                  </a>
+                </h4>
+              </div>
+              <div
+                id="step1-{{ TAB_INDEX_PLACEHOLDER }}"
+                class="panel-collapse collapse"
+              >
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">
+                              Sample Type
+                            </span>
+                            <select
+                              id="add1spectrum-sample-type-{{ TAB_INDEX_PLACEHOLDER }}"
+                              class="form-control add1spectrum add1spectrum-sampleForm is-mandatory">
+                              <option
+                                value=""
+                                selected="selected"
+                                disabled="disabled">choose in list…</option>
+                              <option value="compound-mix">
+                                Mix of Ref. Chemical Compound
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div
+                            id="add1spectrum-sample-type-compound-mix-{{ TAB_INDEX_PLACEHOLDER }}"
+                            class="add1spectrum-sample-type-panel"
+                            style="display:none;">
+                            <div class="form-group input-group  has-warning">
+                              <span class="input-group-addon">solvent</span>
+                              <select
+                                id="add1spectrum-sample-mixSolvent-{{ TAB_INDEX_PLACEHOLDER }}"
+                                class="form-control add1spectrum add1spectrum-sampleForm is-optional"
+                              >
+                                <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                                <option value="H2O/ethanol (75/25)">H2O/ethanol (75/25)</option>
+                              </select>
+                            </div>
+                          </div>
+                          <div
+                            id="add1spectrum-sample-type-rcc-added-{{ TAB_INDEX_PLACEHOLDER }}"
+                            class="panel panel-default add1spectrum-sample-type-panel"
+                            style="display:none"
+                          >
+                            <div class="panel-heading">
+                              <h3 class="panel-title">Reference compound added</h3>
+                            </div>
+                            <div class="panel-bodỵ" style="padding: 0px;">
+                              <div
+                                id="container_RCC_ADDED-{{ TAB_INDEX_PLACEHOLDER }}"
+                                class="handsontable"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-4">
+                      <div id="sample-bonus-display-{{ TAB_INDEX_PLACEHOLDER }}"></div>
+                      &nbsp;
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <br>
+                      <button
+                        id="btnSwitch-gotoStep2-{{ TAB_INDEX_PLACEHOLDER }}"
+                        onclick="ctx().switchToStep(2)"
+                        class="btn btn-disabled switchStep"
+                        disabled=""
+                      >
+                        <i class="fa fa-arrow-circle-down"></i> Next!
+                      </button>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              id="add1spectrum-chromatographyData-LC-{{ TAB_INDEX_PLACEHOLDER }}"
+              class="panel panel-default"
+              style="display: none;"
+            >
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a
+                    id="linkActivateStep2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
+                    data-toggle="collapse"
+                    data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
+                    href="#step2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
+                  >
+                    Liquid Chromatography
+                    <i
+                      id="step2-lc-sign-{{ TAB_INDEX_PLACEHOLDER }}"
+                      class="fa fa-question-circle"
+                    ></i>
+                  </a>
+                </h4>
+              </div>
+              <div
+                id="step2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
+                class="panel-collapse collapse"
+              >
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+                    <div class="col-lg-6">
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Chromatography Param.</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Method</span>
+                            <select
+                              id="add1spectrum-chromatoLC-method-{{ TAB_INDEX_PLACEHOLDER }}"
+                              class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
+                            ></select>
+                          </div>
+                          <div id="alertBoxSelectTemplate-{{ TAB_INDEX_PLACEHOLDER }}"></div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Column constructor</span>
+                            <select
+                              id="add1spectrum-chromatoLC-colConstructor-{{ TAB_INDEX_PLACEHOLDER }}"
+                              class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
+                            >
+                              <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                            </select>
+                          </div>
+                          <div class="form-group input-group ">
+                            <span class="input-group-addon">Column constructor (other)</span>
+                            <input id="add1spectrum-chromatoLC-colConstructorOther-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm" disabled="disabled" placeholder="e.g. HAL 9000">
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">Column name</span>
+                            <input id="add1spectrum-chromatoLC-colName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. UPLC HSS T3">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Column length (mm)</span>
+                            <input id="add1spectrum-chromatoLC-colLength-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 150">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Column diameter (mm)</span>
+                            <input id="add1spectrum-chromatoLC-colDiameter-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 2.1">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Particule size (µm)</span>
+                            <input id="add1spectrum-chromatoLC-colParticuleSize-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 1.8">
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">Column temperature (°C)</span>
+                            <input id="add1spectrum-chromatoLC-colTemperature-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 30">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">LC mode</span>
+                            <select id="add1spectrum-chromatoLC-LCMode-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory">
+                              <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                              <option value="Gradient">Gradient</option>
+                              <option value="Isocratic">Isocratic</option>
+                            </select>
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">Separation flow rate (µL/min)</span>
+                            <input id="add1spectrum-chromatoLC-separationFlowRate-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 400">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Separation solvent A</span>
+                            <select
+                              id="add1spectrum-chromatoLC-separationSolvA-{{ TAB_INDEX_PLACEHOLDER }}"
+                              class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
+                            >
+                              <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                            </select>
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">pH solvent A (if acqueous solvant)</span>
+                            <input id="add1spectrum-chromatoLC-separationSolvApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
+                          </div>
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Separation solvent B</span>
+                            <select
+                              id="add1spectrum-chromatoLC-separationSolvB-{{ TAB_INDEX_PLACEHOLDER }}"
+                              class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
+                            >
+                            </select>
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">pH solvent B (if acqueous solvant)</span>
+                            <input id="add1spectrum-chromatoLC-separationSolvBApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6">
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Separation flow gradient</h3>
+                        </div>
+                        <div class="panel-bodỵ" style="padding: 0px;">
+                          <div id="container_LC_SFG-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <br>
+                      <button id="btnSwitch-gotoStep3-lc-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(3);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div id="add1spectrum-chromatographyData-GC-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a id="linkActivateStep2-gc-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step2-gc-{{ TAB_INDEX_PLACEHOLDER }}">
+                    Gaz Chromatography <i id="step2-gc-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
+                  </a>
+                </h4>
+              </div>
+              <div id="step2-gc-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+                    <div class="col-lg-6">
+                      i &lt;3 GC
+                    </div>
+                    <div class="col-lg-6">&nbsp;</div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <br>
+                      <button id="btnSwitch-gotoStep3-gc-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(3);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div id="add1spectrum-analyserData-MS-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a id="linkActivateStep3-ms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step3-ms-{{ TAB_INDEX_PLACEHOLDER }}">
+                    MS Analyzer <i id="step3-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
+                  </a>
+                </h4>
+              </div>
+              <div id="step3-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+                    <div class="col-lg-6">
+                      <br>
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Analyzer</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">Instrument</span>
+                            <input id="add1spectrum-analyzer-ms-instrument-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. Q-TOF; LTQ - Orbitrap">
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">Model</span>
+                            <input id="add1spectrum-analyzer-ms-model-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. QToF micro (Micromass Waters); XL; Impact II; ...">
+                          </div>
+                          <div class="form-group">
+                            <div class="form-group input-group  has-error">
+                              <span class="input-group-addon">Ion analyzer Type</span>
+                              <input id="add1spectrum-analyzer-ms-ionAnalyzerType-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. QTOF; QQQ; ...">
+                            </div>
+                            <p class="help-block">
+                              <small>
+                                Ion analyzer types are "B", "E", "FT" (include other types using FT like FTICR or Orbitrap), "IT", "Q", "TOF" (e.g.: "QTOF", "QQQ", "EB", "ITFT"); 
+                                for further informations please refer to <a target="_BLANK" href="https://github.com/MassBank/MassBank-web/blob/main/Documentation/MassBankRecordFormat.md#212-record_title">MassBank Record documentation</a>.
+                              </small>
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6">
+                      <br>
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Molecule Ionization</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group has-error">
+                            <span class="input-group-addon">Ionization method <small>(POS/NEG)</small></span>
+                            <select
+                              id="add1spectrum-analyzserMS-ionizationMethod-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
+                            >
+                            </select>
+                            <select
+                              id="add1spectrum-analyzserMS-ionizationMethod-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
+                            >
+                            </select>
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              Spray (needle) gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-sprayGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 40 (POS)"
+                            >
+                            <input
+                              id="add1spectrum-analyzserMS-sprayGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 20 (NEG)"
+                            >
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              Vaporizer gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-vaporizerGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 10 (POS)"
+                            />
+                            <input
+                              id="add1spectrum-analyzserMS-vaporizerGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 5 (NEG)"
+                            />
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              Vaporizer temperature <br><small>(°C, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-vaporizerTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 330 (POS)"
+                            />
+                            <input
+                              id="add1spectrum-analyzserMS-vaporizerTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 330 (NEG)"
+                            />
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              Source gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-sourceGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 40 (POS)"
+                            />
+                            <input
+                              id="add1spectrum-analyzserMS-sourceGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 40 (NEG)"
+                            />
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              Ion transfer tube temperature <br> Transfer capillary temperature <small>(°C, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 350 (POS)"
+                            />
+                            <input
+                              id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 350 (NEG)"
+                            />
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">
+                              High voltage (ESI) <br> Corona voltage (APCI) <small>(in kV, POS/NEG)</small>
+                            </span>
+                            <input
+                              id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-pos-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 3.5 (POS)"
+                            />
+                            <input
+                              id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-neg-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g. 2.8 (NEG)"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6 opt-msms">
+                      <br>
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Ion Storage / Ion Beam</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">Type <small>(storage / beam)</small></span>
+                            <select id="add1spectrum-ionTrapBeam-type-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional one-or-more">
+                              <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                              <option value="trap">Ion Trap</option>
+                              <option value="beam">Ion Beam</option>
+                            </select>
+                          </div>
+                          <p class="help-block">
+                            <small>
+                              Ion storage: Ion Trap (IT) and ICR.
+                              <br>Ion beam: Q or H collision Cell (QQQ, QQIT, QQ/TOF, Fusion). 
+                            </small>
+                          </p>
+                          <div class="form-group input-group  has-success">
+                            <span class="input-group-addon">Gas </span>
+                            <select id="add1spectrum-ionTrapBeam-ionGas-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional ">
+                              <option value="He">He</option>
+                              <option value="N2">N2</option>
+                              <option value="Ar">Ar</option>
+                            </select>
+                          </div>
+                          <div class="form-group input-group has-warning">
+                            <span class="input-group-addon">Gas pressure</span>
+                            <input
+                              id="add1spectrum-ionTrapBeam-ionGasPressureValue-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              style="max-width: 50%;"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                            />
+                            <select
+                              id="add1spectrum-ionTrapBeam-ionGasPressureUnit-{{ TAB_INDEX_PLACEHOLDER }}"
+                              style="max-width: 50%;"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                            >
+                              <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                              <option value="mbar">mbar</option>
+                              <option value="au">a.u.</option>
+                            </select>
+                          </div>
+                          <div class="form-group input-group add1spectrum-ionTrap has-warning">
+                            <span class="input-group-addon">Frequency Shift <small>(KHz)</small></span>
+                            <input
+                              id="add1spectrum-ionTrapBeam-ionFrequencyShift-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g.: ..."
+                            />
+                          </div>
+                          <div class="form-group input-group add1spectrum-ionTrap has-warning">
+                            <span class="input-group-addon">Ion Number <small>(AGC or ICC)</small></span>
+                            <input
+                              id="add1spectrum-ionTrapBeam-ionNumber-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
+                              placeholder="e.g.: ..."
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <br>
+                      <button
+                        id="btnSwitch-gotoStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
+                        onclick="ctx().switchToStep(4);"
+                        class="btn btn-disabled switchStep"
+                        disabled=""
+                      >
+                        <i class="fa fa-arrow-circle-down"></i> Next!
+                      </button>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              id="add1spectrum-peaksData-MS-{{ TAB_INDEX_PLACEHOLDER }}"
+              class="panel panel-default"
+              style="display: none;"
+            >
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a
+                    id="linkActivateStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
+                    data-toggle="collapse"
+                    data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
+                    href="#step4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
+                  >
+                    MS Peaks
+                    <i
+                      id="step4-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}"
+                      class="fa fa-question-circle"
+                    ></i>
+                  </a>
+                </h4>
+              </div>
+              <div id="step4-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+<!-- 
+                    <div class="form-group input-group col-lg-3 has-success">
+                      <span class="input-group-addon">scan type</span>
+                      <select
+                        style="width: 150px;"
+                        id="add1spectrum-peaksMS-msLevel-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
+                      >
+                        <option value="" disabled="disabled">choose in list…</option>
+                        <option class="enable-if-ms" value="ms" disabled="disabled" selected="selected">ms</option>
+                        <option class="enable-if-msms" value="ms2" disabled="disabled">ms2</option>
+                      </select>
+                    </div>
+ -->
+                    <div class="form-group input-group col-lg-3 has-error">
+                      <span class="input-group-addon">polarity</span>
+                      <select
+                        style="width: 150px;"
+                        id="add1spectrum-peaksMS-polarity-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
+                      >
+                        <option value="" selected="selected" disabled="disabled">choose in list…</option>
+                        <option value="positive" disabled="disabled">positive</option>
+                        <option value="negative" disabled="disabled">negative</option>
+                      </select>
+                    </div>
+                    <div class="form-group input-group col-lg-3 has-error">
+                      <span class="input-group-addon">resolution</span>
+                      <select
+                        style="width: 150px;"
+                        id="add1spectrum-peaksMS-resolution-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
+                      >
+                        <option value="" disabled="disabled">choose in list…</option>
+                        <option value="low">low</option>
+                        <option selected="selected" value="high">high</option>
+                      </select>
+                    </div>
+                    <div class="form-group input-group col-lg-3 has-success">
+                      <span class="input-group-addon">curation</span>
+                      <select
+                        style="width: 150px;"
+                        id="add1spectrum-peaksMS-curation-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-optional"
+                      >
+                        <option value="no_curation" selected="selected">no curation</option>
+                        <option value="peaks_RI_sup_1percent">Peaks RI &gt; 1%</option>
+                        <option value="top_50_peaks">Top 50 peaks</option>
+                        <option value="top_20_peaks">Top 20 peaks</option>
+                        <option value="top_10_peaks">Top 10 peaks</option>
+                        <option value="similar_chromatographic_profile">Similar chromatographic profile</option>
+                      </select>
+                    </div>
+                  </div>
+                  <br>
+                  <div class="col-lg-12 opt-msms">
+                    <hr>
+                    <div class="form-group input-group col-lg-4 has-success">
+                      <span class="input-group-addon">
+                        Isolation mode <i class="fa fa-question-circle" title="IT / Q / TOF / ICR"></i>
+                      </span>
+                      <select
+                        id="add1spectrum-peaksMS-isolationMode-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional add1spectrum-peaksMSForm-peaklist-reset"
+                      >
+                        <option value="" disabled="disabled">choose in list…</option>
+                        <option value="IT">IT</option>
+                        <option value="Q">Q</option>
+                        <option value="TOF">TOF</option>
+                        <option value="ICR">ICR</option>
+                      </select>
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">
+                        Isolation window <i class="fa fa-question-circle" title="(+ / - value)"></i>
+                      </span>
+                      <input
+                        id="add1spectrum-peaksMS-isolationWindow-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
+                        placeholder="e.g. ..."
+                      />
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">qz isolation / activation <i class="fa fa-question-circle" title="if IT"></i> <small>(no unit)</small></span>
+                      <input
+                        id="add1spectrum-peaksMS-qzIsolation-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
+                        placeholder="e.g. ..."
+                      />
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">Activation time <i class="fa fa-question-circle" title="if FT-ICR (SORI-CID) or IT"></i> <small>(ms)</small></span>
+                      <input
+                        id="add1spectrum-peaksMS-activationTime-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
+                        placeholder="e.g. ..."
+                      />
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-success">
+                      <span class="input-group-addon">
+                        Mode <i class="fa fa-question-circle" title="HCD / CID / ECD /ETD"></i>
+                      </span>
+                      <select
+                        id="add1spectrum-peaksMS-mode-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional"
+                      >
+                        <option value="" disabled="disabled">choose in list…</option>
+                        <option value="HCD">HCD</option>
+                        <option value="CID">CID</option>
+                        <option value="ECD">ECD</option>
+                        <option value="ETD">ETD</option>
+                      </select>
+                    </div>
+
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">
+                        Frag. energy <i class="fa fa-question-circle" title="without unit"></i>
+                      </span>
+                      <input
+                        id="add1spectrum-peaksMS-frag-nrj-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
+                        placeholder="e.g. ..."
+                      >
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">
+                        Resolution FWHM <small>(resolution@mass)</small>
+                      </span>
+                      <input
+                        id="add1spectrum-analyzer-ms-resolutionFWHM-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
+                        placeholder="e.g. 6500@1000"
+                      />
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-error">
+                      <span class="input-group-addon">
+                        m/z range <small>(ppm) from / to</small>
+                      </span>
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rangeFrom-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-mandatory"
+                        placeholder="50"
+                        value="{{ DEFAULT_MIN_MZ }}"
+                      />
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rangeTo-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-mandatory"
+                        placeholder="500"
+                        value="{{ DEFAULT_MAX_MZ }}"
+                      />
+                    </div>
+                    <div class="form-group input-group col-lg-4 has-error">
+                      <span class="input-group-addon">
+                        retention time (min) <small>from / to</small>
+                      </span>
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rtMinFrom-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-mandatory"
+                        placeholder="0.9"
+                        value="{{ DEFAULT_MIN_RT }}"
+                      />
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rtMinTo-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-mandatory"
+                        placeholder="1.4"
+                        value="{{ DEFAULT_MAX_RT }}"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="form-group input-group col-lg-4 has-warning">
+                      <span class="input-group-addon">
+                        retention time (% solvant) <small>from / to</small>
+                      </span>
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rtSolvFrom-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-optional"
+                        placeholder="??"
+                      />
+                      <input
+                        style="width: 100px;"
+                        id="add1spectrum-peaksMS-rtSolvTo-{{ TAB_INDEX_PLACEHOLDER }}"
+                        type="text"
+                        class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum  is-optional"
+                        placeholder="??"
+                      />
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div>
+                      <ul
+                        class="col-lg-12 nav nav-tabs"
+                        style="
+                          margin-bottom: 15px;
+                          float:left;
+                          height:42px;
+                          margin-left:20px;"
+                        >
+                        {{ TAB_LIST_PLACEHOLDER }}
+                      </ul>
+                      <div class="tab-content" style="float: left;">
+                        {{ ADD_SPECTRUM_FORM }}
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <button
+                        class="btn btn-success add1spectrum"
+                        onclick="$('#add1spectrum-peaksMS-msPrecursorIon-{{ TAB_INDEX_PLACEHOLDER }}').change()"
+                      >check</button>
+                      <button
+                        id="btnSwitch-gotoStep5-ms-{{ TAB_INDEX_PLACEHOLDER }}"
+                        onclick="$('#open_tab_1').click();setTimeout(()=>ctx().switchToStep(5), 100);"
+                        class="btn switchStep btn-primary"
+                      ><i class="fa fa-arrow-circle-down"></i> Next!</button>
+                      <br>
+                      <br>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+            <div
+              id="add1spectrum-otherData-{{ TAB_INDEX_PLACEHOLDER }}"
+              class="panel panel-default"
+              style="display: none;"
+            >
+              <div class="panel-heading panel-success">
+                <h4 class="panel-title">
+                  <a id="linkActivateStep5-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step5-{{ TAB_INDEX_PLACEHOLDER }}">
+                    Other <i id="step5sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
+                  </a>
+                </h4>
+              </div>
+              <div id="step5-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
+                <div class="panel-bodỵ">
+                  <div class="col-lg-12">
+                    <div class="col-lg-6">
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Ownership</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group  has-error">
+                            <span class="input-group-addon">data author(s)</span>
+                            <input
+                              id="add1spectrum-other-author-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-otherForm is-mandatory"
+                              placeholder="enter your lab. / plateforme name"
+                              value=""
+                            />
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">data validator(s)</span>
+                            <input
+                              id="add1spectrum-other-validator-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-otherForm is-optional"
+                              placeholder="name of the personne who checked all data in this file"
+                            />
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">acquisition date</span>
+                            <input
+                              id="add1spectrum-other-date-{{ TAB_INDEX_PLACEHOLDER }}"
+                              data-date-format="yyyy-mm-dd"
+                              type="text"
+                              class="form-control add1spectrum  add1spectrum-otherForm datepicker is-optional"
+                              value=""
+                              placeholder="2022-11-04"
+                            />
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">data ownership</span>
+                            <input
+                              id="add1spectrum-other-owner-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-otherForm is-optional"
+                              placeholder="enter your lab. / plateforme name &amp; sample provider;"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6">
+                      <div class="panel panel-default">
+                        <div class="panel-heading">
+                          <h3 class="panel-title">Raw File</h3>
+                        </div>
+                        <div class="panel-bodỵ">
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">raw file name</span>
+                            <input
+                              id="add1spectrum-other-fileName-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-otherForm is-optional"
+                              placeholder="needed to retrieve file later"
+                            />
+                          </div>
+                          <div class="form-group input-group  has-warning">
+                            <span class="input-group-addon">raw file size (Ko)</span>
+                            <input
+                              id="add1spectrum-other-fileSize-{{ TAB_INDEX_PLACEHOLDER }}"
+                              type="text"
+                              class="form-control add1spectrum add1spectrum-otherForm is-optional"
+                              placeholder="optional, to check if the file is correct"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <br>
+                      <button
+                        id="btnSwitch-gotoStep6-{{ TAB_INDEX_PLACEHOLDER }}"
+                        onclick="ctx().switchToStep(6);"
+                        class="btn btn-disabled switchStep"
+                        disabled=""
+                      >
+                        <i class="fa fa-arrow-circle-right"></i> Validate this compound/mix!
+                      </button>
+                      <span
+                        id="import1SpectrumLoadingBare-{{ TAB_INDEX_PLACEHOLDER }}"
+                        style="display: none;"><img
+                        src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif"
+                        title="please wait"
+                      ></span>
+                      <span
+                        id="import1SpectrumResults-{{ TAB_INDEX_PLACEHOLDER }}"
+                        style="display: none;"
+                      >
+                        <button
+                          id="btnSwitch-view-{{ TAB_INDEX_PLACEHOLDER }}"
+                          data-toggle="modal"
+                          data-target="#modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
+                          class="btn btn-success"
+                        >
+                          <i class="fa fa-eye"></i> View spectrum
+                        </button>
+                        <button
+                          id="btnSwitch-returntoStep3-{{ TAB_INDEX_PLACEHOLDER }}"
+                          onclick="ctx().switchToStep(3);"
+                          class="btn btn-primary"
+                        >
+                          <i class="fa fa-arrow-circle-up"></i> Add new peaklist!
+                        </button>
+                      </span>
+                    </div>
+                    <div class="col-lg-4">
+                      <br>
+                      <br>
+                      <br>
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="col-lg-8">
+                      <div
+                        id="alertBoxSubmitSpectrum-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="col-lg-6"
+                      ></div>
+                    </div>
+                    <div class="col-lg-4">&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.js"></script>
+            <link
+              rel="stylesheet"
+              media="screen"
+              href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.css"
+            >
+            <link
+              rel="stylesheet"
+              media="screen"
+              href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/bootstrap/handsontable.bootstrap.min.css"
+            >
+            <div
+              class="modal"
+              id="modalPickCompound-{{ TAB_INDEX_PLACEHOLDER }}"
+              tabindex="-1"
+              role="dialog"
+              aria-labelledby="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
+              aria-hidden="true"
+            >
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button
+                      type="button"
+                      class="close"
+                      data-dismiss="modal"
+                      aria-hidden="true"
+                    >×</button>
+                    <h4
+                      class="modal-title"
+                      id="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
+                    >
+                      Pick a compound
+                    </h4>
+                  </div>
+                  <div class="modal-body">
+                    <div class="form-group input-group">
+                      <span class="input-group-addon">Compound Name</span>
+                      <input
+                        id="add-one-cc-s1-value-{{ TAB_INDEX_PLACEHOLDER }}"
+                        class="form-control"
+                        placeholder="e.g. Caffeine"
+                        type="text"
+                      />
+                      <span class="input-group-btn">
+                        <button
+                          class="btn btn-default"
+                          type="button"
+                          onclick="ctx().searchLocalCompound();"
+                        >
+                          <i class="fa fa-search"></i>
+                        </button>
+                      </span>
+                    </div>
+                    <div id="load-step-1-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;">
+                      <img src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif" title="please wait">
+                    </div>
+                    <div
+                      id="ok-step-1-{{ TAB_INDEX_PLACEHOLDER }}"
+                      style="overflow: auto; max-height: 300px;"
+                    ></div>
+                  </div>
+                  <div class="modal-footer">
+                    <button
+                      type="button"
+                      class="btn btn-danger"
+                      data-dismiss="modal"
+                      onclick="ctx().clearLine()"
+                    >
+                      <i class="fa fa-eraser"></i> Clear
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-default"
+                      data-dismiss="modal"
+                    >Fermer</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="modal "
+              id="modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
+              tabindex="-1"
+              role="dialog"
+              aria-labelledby="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
+              aria-hidden="true"
+            >
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button
+                      type="button"
+                      class="close"
+                      data-dismiss="modal"
+                      aria-hidden="true"
+                    >×</button>
+                    <h4
+                      class="modal-title"
+                      id="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
+                    >Modal title</h4>
+                  </div>
+                  <div class="modal-body">
+                    <div class="te"></div>
+                  </div>
+                  <div class="modal-footer">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="send_buttons_div">
+        <button
+          onclick="send_everything_to_peakforest('{{ PF_URL_PLACEHOLDER }}', '{{ PF_TOKEN_PLACEHOLDER }}')"
+          class="btn btn-success"
+        >
+          <i class="fa fa-arrow-circle-right"></i>
+          Send everything to peakforest!
+        </button>
+        <button class="btn btn-validate" onclick="ctx().exit()">
+          Close MS2PF
+        </button>
+      </div>
+      <script
+        type="text/javascript"
+        src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/jqueryform/2.8/jquery.form.min.js"
+      ></script>
+      <script
+        src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/md5.min.js"
+      ></script>
+    </div>
+    <nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse navbar-main" role="navigation">
+      <div class="navbar-header navbar-inverse footer">
+        <ul id="ul-info-footer" class="nav navbar-nav">
+          <li class="li-info-footer"><a id="linkcontact" href="mailto:contact@peakforest.org?subject=%5Babout%20peakforest%20webapp%5D">Contact</a></li>
+          <li class="li-info-footer">
+            <a id="about-peakforest" href="about-peakforest" data-toggle="modal" data-target="#modalAbout">À propos</a>
+          </li>
+          <li class="li-info-footer">
+            <a href="https://peakforest.org/mypeakforest" target="_blank">Ma PeakForest</a>
+          </li>
+          <li class="li-info-footer">
+            <a href="http://metabohub.fr" target="_blank">metaboHUB</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <div
+      class="modal"
+      id="modalAbout"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="modalAboutLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-hidden="true"
+            >×</button>
+            <h4 class="modal-title" id="modalAboutLabel">À propos de la Base de Données PeakForest</h4>
+          </div>
+          <div class="modal-body">
+            <div class="te"></div>
+          </div>
+          <div class="modal-footer">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal"
+      id="modalMyPeakForest"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="modalMyPFLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h4 class="modal-title" id="modalAboutLabel">Ma base de Données PeakForest</h4>
+          </div>
+          <div class="modal-body">
+            <div class="te"></div>
+          </div>
+          <div class="modal-footer">
+          </div>
+        </div>
+      </div>
+    </div>
+    {{ EMBED_JS }}
+    <script type="text/javascript">context = context_1 ;</script>
+  </body>
+</html>
\ No newline at end of file