enviPy-bayer/templates/batch_predict_pathway.html

{% extends "framework_modern.html" %}
{% load static %}
{% block content %}
  <div class="mx-auto w-full p-8">
    <h1 class="h1 mb-4 text-3xl font-bold">Batch Predict Pathways</h1>
    <form id="smiles-form" method="POST" action="{% url "jobs" %}">
      {% csrf_token %}
      <input type="hidden" name="substrates" id="substrates" />
      <input type="hidden" name="job-name" value="batch-predict" />

      <fieldset class="flex flex-col gap-4 md:flex-3/4">
        <table class="table table-zebra w-full">
          <thead>
            <tr>
              <th>SMILES</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody id="smiles-table-body">
            <tr>
              <td>
                <label>
                  <input
                    type="text"
                    class="input input-bordered w-full smiles-input"
                    placeholder="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
                    {% if meta.debug %}
                      value="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
                    {% endif %}
                  />
                </label>
              </td>
              <td>
                <label>
                  <input
                    type="text"
                    class="input input-bordered w-full name-input"
                    placeholder="Caffeine"
                    {% if meta.debug %}
                      value="Caffeine"
                    {% endif %}
                  />
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label>
                  <input
                    type="text"
                    class="input input-bordered w-full smiles-input"
                    placeholder="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
                    {% if meta.debug %}
                      value="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
                    {% endif %}
                  />
                </label>
              </td>
              <td>
                <label>
                  <input
                    type="text"
                    class="input input-bordered w-full name-input"
                    placeholder="Ibuprofen"
                    {% if meta.debug %}
                      value="Ibuprofen"
                    {% endif %}
                  />
                </label>
              </td>
            </tr>
          </tbody>
        </table>
        <label class="select mb-2 w-full">
          <span class="label">Predictor</span>
          <select id="prediction-setting" name="prediction-setting">
            <option disabled>Select a Setting</option>
            {% for s in meta.available_settings %}
              <option
                value="{{ s.url }}"
                {% if s.id == meta.user.default_setting.id %}selected{% endif %}
              >
                {{ s.name }}{% if s.id == meta.user.default_setting.id %}
                  (User default)
                {% endif %}
              </option>
            {% endfor %}
          </select>
        </label>
        <label class="floating-label" for="num-tps">
          <input
            type="number"
            name="num-tps"
            value="50"
            step="1"
            min="1"
            max="100"
            id="num-tps"
            class="input input-md w-full"
          />
          <span>Max Transformation Products</span>
        </label>
        <div class="flex justify-end gap-2">
          <button type="button" id="add-row-btn" class="btn btn-outline">
            Add row
          </button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </fieldset>
    </form>
  </div>

  <script>
    const tableBody = document.getElementById("smiles-table-body");
    const addRowBtn = document.getElementById("add-row-btn");
    const form = document.getElementById("smiles-form");
    const hiddenField = document.getElementById("substrates");

    addRowBtn.addEventListener("click", () => {
      const row = document.createElement("tr");

      const tdSmiles = document.createElement("td");
      const tdName = document.createElement("td");

      const smilesInput = document.createElement("input");
      smilesInput.type = "text";
      smilesInput.className = "input input-bordered w-full smiles-input";
      smilesInput.placeholder = "SMILES";

      const nameInput = document.createElement("input");
      nameInput.type = "text";
      nameInput.className = "input input-bordered w-full name-input";
      nameInput.placeholder = "Name";

      tdSmiles.appendChild(smilesInput);
      tdName.appendChild(nameInput);

      row.appendChild(tdSmiles);
      row.appendChild(tdName);

      tableBody.appendChild(row);
    });

    // Before submit, gather table data into the hidden field
    form.addEventListener("submit", (e) => {
      const smilesInputs = Array.from(
        document.querySelectorAll(".smiles-input"),
      );
      const nameInputs = Array.from(document.querySelectorAll(".name-input"));

      const lines = [];

      for (let i = 0; i < smilesInputs.length; i++) {
        const smiles = smilesInputs[i].value.trim();
        const name = nameInputs[i]?.value.trim() ?? "";

        // Skip emtpy rows
        if (!smiles && !name) {
          continue;
        }
        lines.push(`${smiles},${name}`);
      }
      // Value looks like:
      // "CN1C=NC2=C1C(=O)N(C(=O)N2C)C,Caffeine\nCC(C)CC1=CC=C(C=C1)C(C)C(=O)O,Ibuprofen"
      hiddenField.value = lines.join("\n");
    });
  </script>
{% endblock content %}