Blame for efficiency_module/templates/efficiency_index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CHRIS</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script> -->
  <script src="{{ url_for('static',filename='jquery.slim.min.js') }}" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="{{ url_for('static',filename='popper.min.js') }}" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="{{ url_for('static',filename='bootstrap.min.js') }}" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
  <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">

  <style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

</head>

{% extends "base.html" %}
{% block content %}

</header>

<script>
      function addColumn(){

        var i = document.getElementById('theTable').rows[0].cells.length-1;

        $("#theTable tr:eq( 0 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='mass" + i + "'> </td>");
        $("#theTable tr:eq( 1 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='density" + i + "'> </td>");
        $("#theTable tr:eq( 2 )").append("<td> <input type='number' step='any' value='6.0' min='0.00001' required name='area" + i + "'> </td>");
        $("#theTable tr:eq( 3 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='svol" + i + "'> </td>");
        $("#theTable tr:eq( 4 )").append("<td> <input type='number' step='1' value='1' min='1' onchange='this.value = parseInt(this.value);' required name='iterations" + i + "'> </td>");
        $("#theTable tr:eq( 5 )").append("<td> <input type='number' step='any' value='24.0' min='0.00001' required name='time" + i + "'> </td>");
        $("#theTable tr:eq( 6 )").append("<td> <input type='number' step='any' value='1e-08' min='1e-20' required name='D" + i + "'> </td>");
        $("#theTable tr:eq( 7 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='K" + i + "'> </td>");
        $("#theTable tr:eq( 8 )").append("<td> <input readonly id='release'" + i + "> </td>");
        $("#theTable tr:eq( 9 )").append("<td> <input readonly id='conc'" + i + "> </td>");

        //alert(i)

        document.getElementById("sysnum").value = i+1

      };

      function removeColumn(){

        var i = document.getElementById('theTable').rows[0].cells.length-1;

        if (i == 1){
          alert("At least one entry is required");
        } else {
          $('#theTable tr').find('td:last').remove();
          document.getElementById("sysnum").value = i-1
        }
      }

</script>



<body>


<form method="POST" id="theForm" align="center">

  <input type = "button" onclick = "javascript:addColumn()" value = "Add column" />
  <input type = "button" onclick = "javascript:removeColumn()" value = "Remove column" />

  <table id="theTable" align="center">
  <tr>
    <th> Test article mass (g) <button type=button class="Info_btn" data-toggle="modal" data-target="#MassModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="mass{{i}}" id="mass{{i}}" step="any" value="{{mass[i]}}" min="0.000001" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Test article density (g/cm<sup>3</sup>) <button type=button class="Info_btn" data-toggle="modal" data-target="#DensityModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="density{{i}}" id="density{{i}}" step="any" value="{{density[i]}}" min="0.01" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Test article surface area (cm<sup>2</sup>) <button type=button class="Info_btn" data-toggle="modal" data-target="#SurfaceModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="area{{i}}" id="area{{i}}" step="any" value="{{area[i]}}" min="0.001" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Solvent volume (ml) <button type=button class="Info_btn" data-toggle="modal" data-target="#SolventModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="svol{{i}}" id="svol{{i}}" step="any" value="{{svol[i]}}" min="0.000001" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> # of iterations <button type=button class="Info_btn" data-toggle="modal" data-target="#IterationModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="iterations{{i}}" id="iterations{{i}}" value="{{iterations[i]}}" min="1" type="number" step="1" onchange="this.value = parseInt(this.value);" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Time per iteration (h) <button type=button class="Info_btn" data-toggle="modal" data-target="#TimeModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="time{{i}}" id="time{{i}}" step="any" value="{{time[i]}}" min="0.001" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Diffusion coefficient (cm<sup>2</sup>/s) <button type=button class="Info_btn" data-toggle="modal" data-target="#DiffusionModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="D{{i}}" id="D{{i}}" step="any" value="{{D[i]}}" min="1e-20" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> Partition coefficient <button type=button class="Info_btn" data-toggle="modal" data-target="#PartitionModal">&#9432;</button> </th>
    {% for i in range(sysnum) %}
    <td> <input name="K{{i}}" id="K{{i}}" step="any" value="{{K[i]}}" min="1e-6" type="number" required> </td>
    {% endfor %}
  </tr>
  <tr>
    <th> M/M<sub>0</sub> <button type=button class="Info_btn" data-toggle="modal" data-target="#ReleaseModal">&#9432;</button> </th>
    {% if release[0] == 0 %}
    {% for i in range(sysnum) %}
    <td> <input name="release{{i}}" id="release{{i}}" readonly> </td>
    {% endfor %}
    {% else %}
    {% for i in range(sysnum) %}
    <td> <input name="release{{i}}" id="release{{i}}" value="{{'%0.4f'%release[i]|float}}" readonly> </td>
    {% endfor %}
    {% endif %}
  </tr>
  <tr>
    <th> C/C<sub>0</sub> <button type=button class="Info_btn" data-toggle="modal" data-target="#ConcModal">&#9432;</button> </th>
    {% if conc[0] == 0 %}
    {% for i in range(sysnum) %}
    <td> <input name="conc{{i}}" id="conc{{i}}" readonly> </td>
    {% endfor %}
    {% else %}
    {% for i in range(sysnum) %}
    <td> <input name="conc{{i}}" id="conc{{i}}" value="{{'%0.4f'%conc[i]|float}}" readonly> </td>
    {% endfor %}
    {% endif %}
  </tr>
  </table>

  <br> <button type="submit">Calculate</button>

  <input name="sysnum" id="sysnum" step="any" value={{sysnum}}  type="number" required style="display: none;">

  </form>

  <!-- Modals -->
  <div id="MassModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Test article mass (g)</em> - Please enter the total mass of the test article being evaluated expressed in grams.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="DensityModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Test article density (g/cm<sup>3</sup>)</em> - Please enter the (approximate) density of the test article
            in grams per cubic centimeter.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

 <div id="SurfaceModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Test article surface area (cm<sup>2</sup>)</em> - Please enter the surface area of the test article
            in square centimeters.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="SolventModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Solvent volume (ml)</em> - Please enter the volume of solvent used for each extraction iteration in milliliters.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="IterationModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em># of iterations</em> - Please enter the number of iterations used in the extraction study. </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="TimeModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Time per iteration (h)</em> - Please enter the extraction time for each iteration in hours. </p>

          <p><em>Note:</em> The extraction efficiency module makes the default assumption that all extraction iterations are equivalent
          in duration.  However, if this is not the case, the module can still be used, although the input must be modified.  Because of
          approximate scaling relationships, a single step extraction will be equivalent to an iterative extraction provided the
            the total solvent used and total time duration are also equivalent.  For example, a three step iterative extraction using 10 ml
            for each iteration with time
            points of 24, 72, and 168 hours can be modeled using a single step extraction (# of iterations = 1) with 30 ml of solvent
            (3 x 10 ml) for 168 hours.  This same approach can be used if the solvent volumes are different for each extraction
            iteration, however unlikely this scenario may be.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="DiffusionModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Diffusion coefficient (cm<sup>2</sup>/s)</em> - Please enter a diffusion coefficient in square centimeters per
            second. </p>

          <p><em>Note:</em> The diffusion coefficient (D) is a material property that reflects the rate at which a compound
          can migrate through the matrix - formally it is a proportionality constant relating concentration gradient to flux.
          The value of D can vary dramatically depending on the polymer matrix and extractable compound, and even extraction solvent,
            for systems that exhibit significant swelling.  If you are interested in comparing the extraction efficiency for a specific
          compound, we recommend estimating D for the system of interest based on available data.  For comparing experimental conditions
          for extractable compounds in general, we recommend probing an appropriate range of D for the systems of interest.  For example,
          compounds in the Mw range of 200 to 1200 g/mol extracted from HDPE have been found to lie in the range of 1e-9 to 1e-13 cm2/s for IPA
          and 1e-7 to 1e-9 cm2/s in hexane [1].</p>

          <p>[1] P. Turner, et al., Toxicological Sciences 178 (1) (2020) 201–211.</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="PartitionModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>Partition coefficient</em> - Please enter a partition coefficient of interest for your system.</p>

          <p><em>Note:</em> The partition coefficient (K) is a material property that reflects the ratio of the
            concentrations of extractable compound in the polymer matrix and extraction solvent in equilibrium.  As such, the value of K can vary
          dramatically depending on the extraction materials.  If you are interested in comparing the extraction efficiency for a specific
          compound, we recommend estimating K for the system of interest based on available data.  A number of empirical approaches
          have been developed for this purpose, e.g. [1,2].  However, these approaches do not necessarily capture the potential impact
          of temperature and matrix swelling, which can both dramatically impact this quantity [3-5].  For comparing experimental conditions
          for extractable compounds in general, we recommend probing an appropriate range of K for the systems of interest.  We note
          that the range of interest will be restricted because large values of K will not permit substantive quantities of a compound to
          be extracted over relevant timeframes and for systems with small values of K extraction efficiency will be dictated solely
          by kinetic limitations.  </p>

          <p>[1] M. H. Abraham, et al., Journal of Chromatography A 1037 (1-2) (2004) 29–47. <br>
          [2] D. R. Jenke, B. E. Rabinow, PDA Journal of Pharmaceutical Science and Technology 71 (3) (2017) 225–233. <br>
          [3] T. P. Gandek, et al., Industrial & Engineering Chemistry Research 28 (7) (1989) 1036–1045. <br>
          [4] A. Hauk, et al., European Journal of Pharmaceutical Sciences 163 (2021) 105841. <br>
          [5] P. Turner, et al., Toxicological Sciences 178 (1) (2020) 201–211.
          </p>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="ReleaseModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>M / M<sub>0</sub> </em> - Predicted extraction efficiency expressed as a ratio of total mass released over the
          initial mass (total pool) in the polymer matrix </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<div id="ConcModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Extraction efficiency</h4>
        </div>
        <div class="modal-body">
          <p><em>C / C<sub>0</sub> </em> - Predicted relative solvent concentration expressed as a ratio of extraction solvent concentration
            and the initial concentration of the extractable compound in the polymer matrix </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</body>
{% endblock %}
</html>