enviPy-bayer/templates/modals/collections/new_model_modal.html

<div
  class="modal fade"
  tabindex="-1"
  id="new_model_modal"
  role="dialog"
  aria-labelledby="new_model_modal"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">New Model</h4>
      </div>
      <div class="modal-body">
        <form
          id="new_model_form"
          accept-charset="UTF-8"
          action="{{ meta.current_package.url }}/model"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <div class="jumbotron">
            Create a new Model to limit the number of degradation products in
            the prediction. You just need to set a name and the packages you
            want the object to be based on. There are multiple types of models
            available. For additional information have a look at our
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/relative-reasoning"
              role="button"
              >wiki &gt;&gt;</a
            >
          </div>
          <!-- Name -->
          <label for="model-name">Name</label>
          <input
            id="model-name"
            name="model-name"
            class="form-control"
            placeholder="Name"
          />

          <!-- Description -->
          <label for="model-description">Description</label>
          <input
            id="model-description"
            name="model-description"
            class="form-control"
            placeholder="Description"
          />

          <!-- Model Type -->
          <label for="model-type">Model Type</label>
          <select
            id="model-type"
            name="model-type"
            class="form-control"
            data-width="100%"
          >
            <option disabled selected>Select Model Type</option>
            {% for k, v in model_types.items %}
              <option value="{{ v }}">{{ k }}</option>
            {% endfor %}
          </select>

          <!-- Rule Packages -->
          <div id="rule-packages" class="ep-model-param mlrr rbrr">
            <label for="model-rule-packages">Rule Packages</label>
            <select
              id="model-rule-packages"
              name="model-rule-packages"
              data-actions-box="true"
              class="form-control"
              multiple
              data-width="100%"
            >
              <option disabled>Reviewed Packages</option>
              {% for obj in meta.readable_packages %}
                {% if obj.reviewed %}
                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                {% endif %}
              {% endfor %}

              <option disabled>Unreviewed Packages</option>
              {% for obj in meta.readable_packages %}
                {% if not obj.reviewed %}
                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>

          <!-- Data Packages -->
          <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
            <label for="model-data-packages">Data Packages</label>
            <select
              id="model-data-packages"
              name="model-data-packages"
              data-actions-box="true"
              class="form-control"
              multiple
              data-width="100%"
            >
              <option disabled>Reviewed Packages</option>
              {% for obj in meta.readable_packages %}
                {% if obj.reviewed %}
                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                {% endif %}
              {% endfor %}

              <option disabled>Unreviewed Packages</option>
              {% for obj in meta.readable_packages %}
                {% if not obj.reviewed %}
                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>

          <!-- Fingerprinter -->
          <div id="fingerprinter" class="ep-model-param mlrr">
            <label for="model-fingerprinter">Fingerprinter</label>
            <select
              id="model-fingerprinter"
              name="model-fingerprinter"
              data-actions-box="true"
              class="form-control"
              multiple
              data-width="100%"
            >
              <option value="MACCS" selected>MACCS Fingerprinter</option>
              {% if meta.enabled_features.PLUGINS and additional_descriptors %}
                <option disabled selected>
                  Select Additional Fingerprinter / Descriptor
                </option>
                {% for k, v in additional_descriptors.items %}
                  <option value="{{ v }}">{{ k }}</option>
                {% endfor %}
              {% endif %}
            </select>
          </div>

          <!-- Threshold -->
          <div id="threshold" class="ep-model-param mlrr enviformer">
            <label for="model-threshold">Threshold</label>
            <input
              type="number"
              min="0"
              max="1"
              step="0.05"
              value="0.5"
              id="model-threshold"
              name="model-threshold"
              class="form-control"
            />
          </div>

          <div id="appdomain" class="ep-model-param mlrr">
            {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
              <!-- Build AD? -->
              <div class="checkbox">
                <label>
                  <input
                    type="checkbox"
                    id="build-app-domain"
                    name="build-app-domain"
                  />Also build an Applicability Domain?
                </label>
              </div>
              <div id="ad-params" style="display:none">
                <!-- Num Neighbors -->
                <label for="num-neighbors">Number of Neighbors</label>
                <input
                  id="num-neighbors"
                  name="num-neighbors"
                  type="number"
                  class="form-control"
                  value="5"
                  step="1"
                  min="0"
                  max="10"
                />
                <!-- Local Compatibility -->
                <label for="local-compatibility-threshold"
                  >Local Compatibility Threshold</label
                >
                <input
                  id="local-compatibility-threshold"
                  name="local-compatibility-threshold"
                  type="number"
                  class="form-control"
                  value="0.5"
                  step="0.01"
                  min="0"
                  max="1"
                />
                <!-- Reliability -->
                <label for="reliability-threshold">Reliability Threshold</label>
                <input
                  id="reliability-threshold"
                  name="reliability-threshold"
                  type="number"
                  class="form-control"
                  value="0.5"
                  step="0.01"
                  min="0"
                  max="1"
                />
              </div>
            {% endif %}
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <a id="new_model_modal_form_submit" class="btn btn-primary" href="#"
          >Submit</a
        >
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    // Built in Model Types
    var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];

    // Initially hide all "specific" forms
    $(".ep-model-param").each(function () {
      $(this).hide();
    });

    $("#model-type").selectpicker();
    $("#model-fingerprinter").selectpicker();
    $("#model-rule-packages").selectpicker();
    $("#model-data-packages").selectpicker();

    $("#build-app-domain").change(function () {
      if ($(this).is(":checked")) {
        $("#ad-params").show();
      } else {
        $("#ad-params").hide();
      }
    });

    // On change hide all and show only selected
    $("#model-type").change(function () {
      $(".ep-model-param").hide();
      var modelType = $("#model-type").val();
      if (nativeModelTypes.indexOf(modelType) !== -1) {
        $("." + modelType).show();
      } else {
        // do nothing
      }
    });

    $("#new_model_modal_form_submit").on("click", function (e) {
      e.preventDefault();
      $("#new_model_form").submit();
    });
  });
</script>