reintroduces envipytags

templates/objects/model.html

@@ -1,5 +1,6 @@
 {% extends "framework.html" %}
 {% load static %}
+{% load envipytags %}
 {% block content %}
 
   {% block action_modals %}
@@ -12,18 +13,34 @@
   <!-- Include required libs -->
   <script src="https://d3js.org/d3.v5.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
+  <link
+    href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css"
+    rel="stylesheet"
+  />
 
   <div class="panel-group" id="model-detail">
     <div class="panel panel-default">
-            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+      <div
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
         {{ model.name|safe }}
-                <div id="actionsButton"
+        <div
+          id="actionsButton"
           style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+          class="dropdown"
-                                         aria-haspopup="true" aria-expanded="false"><span
+        >
-                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
+          <a
-                        style="padding-right:1em"></span></a>
+            href="#"
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            ><span class="glyphicon glyphicon-wrench"></span> Actions
+            <span class="caret"></span><span style="padding-right:1em"></span
+          ></a>
           <ul id="actionsList" class="dropdown-menu">
             {% block actions %}
               {% include "actions/objects/model.html" %}
@@ -36,77 +53,131 @@
       </div>
       {% if model|classname == 'MLRelativeReasoning' or model|classname == 'RuleBasedRelativeReasoning' %}
         <!-- Rule Packages -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="rule-package-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#rule-package">Rule Packages</a>
+              id="rule-package-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#rule-package"
+              >Rule Packages</a
+            >
           </h4>
         </div>
         <div id="rule-package" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             {% for p in model.rule_packages.all %}
-                            <a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
+              <a class="list-group-item" href="{{ p.url }}"
+                >{{ p.name|safe }}</a
+              >
             {% endfor %}
           </div>
         </div>
         <!-- Reaction Packages -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="reaction-package-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#reaction-package">Rule Packages</a>
+              id="reaction-package-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#reaction-package"
+              >Rule Packages</a
+            >
           </h4>
         </div>
         <div id="reaction-package" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             {% for p in model.data_packages.all %}
-                            <a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
+              <a class="list-group-item" href="{{ p.url }}"
+                >{{ p.name|safe }}</a
+              >
             {% endfor %}
           </div>
         </div>
         {% if model.eval_packages.all|length > 0 %}
           <!-- Eval Packages -->
-                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+          <div
+            class="panel panel-default panel-heading list-group-item"
+            style="background-color:silver"
+          >
             <h4 class="panel-title">
-                            <a id="eval-package-link" data-toggle="collapse" data-parent="#model-detail"
+              <a
-                               href="#eval-package">Rule Packages</a>
+                id="eval-package-link"
+                data-toggle="collapse"
+                data-parent="#model-detail"
+                href="#eval-package"
+                >Rule Packages</a
+              >
             </h4>
           </div>
           <div id="eval-package" class="panel-collapse collapse in">
             <div class="panel-body list-group-item">
               {% for p in model.eval_packages.all %}
-                                <a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
+                <a class="list-group-item" href="{{ p.url }}"
+                  >{{ p.name|safe }}</a
+                >
               {% endfor %}
             </div>
           </div>
         {% endif %}
         <!-- Model Status -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="model-status-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#model-status">Model Status</a>
+              id="model-status-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#model-status"
+              >Model Status</a
+            >
           </h4>
         </div>
         <div id="model-status" class="panel-collapse collapse in">
-                    <div class="panel-body list-group-item">
+          <div class="panel-body list-group-item">{{ model.status }}</div>
-                        {{ model.status }}
-                    </div>
         </div>
       {% endif %}
       {% if model.ready_for_prediction %}
         <!-- Predict Panel -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#predict-smiles">Predict</a>
+              id="predict-smiles-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#predict-smiles"
+              >Predict</a
+            >
           </h4>
         </div>
         <div id="predict-smiles" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <div class="input-group">
-                            <input id="smiles-to-predict" type="text" class="form-control"
+              <input
-                                   placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
+                id="smiles-to-predict"
+                type="text"
+                class="form-control"
+                placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
+              />
               <span class="input-group-btn">
-                        <button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
+                <button
+                  class="btn btn-default"
+                  type="submit"
+                  id="predict-button"
+                >
+                  Predict!
+                </button>
               </span>
             </div>
             <div id="predictLoading"></div>
@@ -118,18 +189,37 @@
 
       {% if model.ready_for_prediction and model.app_domain %}
         <!-- App Domain -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="app-domain-assessment-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#app-domain-assessment">Applicability Domain Assessment</a>
+              id="app-domain-assessment-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#app-domain-assessment"
+              >Applicability Domain Assessment</a
+            >
           </h4>
         </div>
         <div id="app-domain-assessment" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <div class="input-group">
-                            <input id="smiles-to-assess" type="text" class="form-control" placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
+              <input
+                id="smiles-to-assess"
+                type="text"
+                class="form-control"
+                placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
+              />
               <span class="input-group-btn">
-                        <button class="btn btn-default" type="submit" id="assess-button">Assess!</button>
+                <button
+                  class="btn btn-default"
+                  type="submit"
+                  id="assess-button"
+                >
+                  Assess!
+                </button>
               </span>
             </div>
             <div id="appDomainLoading"></div>
@@ -141,23 +231,34 @@
 
       {% if model.model_status == 'FINISHED' %}
         <!-- Single Gen Curve Panel -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
           <h4 class="panel-title">
-                        <a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
+            <a
-                           href="#sg-curve">Precision Recall Curve</a>
+              id="sg-curve-link"
+              data-toggle="collapse"
+              data-parent="#model-detail"
+              href="#sg-curve"
+              >Precision Recall Curve</a
+            >
           </h4>
         </div>
         <div id="sg-curve" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <!-- Center container contents -->
-                        <div class="container" style="display: flex;justify-content: center;">
+            <div
+              class="container"
+              style="display: flex;justify-content: center;"
+            >
               <div id="sg-curve-plotdiv" class="chart">
                 <div id="sg-chart"></div>
               </div>
             </div>
-
           </div>
         </div>
+        {# prettier-ignore-start #}
                 <script>
                     $(function () {
                         if (!($('#sg-chart').length > 0)) {
@@ -264,44 +365,61 @@
                         });
                     });
                 </script>
+                {# prettier-ignore-end #}
         <!-- End Single Gen Curve Panel       -->
       {% endif %}
     </div>
   </div>
 
   <script>
-
     function handlePredictionResponse(data) {
-            res = "<table class='table table-striped'>"
+      res = "<table class='table table-striped'>";
-            res += "<thead>"
+      res += "<thead>";
-            res += "<th scope='col'>#</th>"
+      res += "<th scope='col'>#</th>";
 
-            columns = ['products', 'image', 'probability', 'btrule']
+      columns = ["products", "image", "probability", "btrule"];
 
       for (col in columns) {
-                res += "<th scope='col'>" + columns[col] + "</th>"
+        res += "<th scope='col'>" + columns[col] + "</th>";
       }
 
-            res += "</thead>"
+      res += "</thead>";
-            res += "<tbody>"
+      res += "<tbody>";
       var cnt = 1;
       for (transformation in data) {
-                res += "<tr>"
+        res += "<tr>";
-                res += "<th scope='row'>" + cnt + "</th>"
+        res += "<th scope='row'>" + cnt + "</th>";
-                res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
+        res +=
-                res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
+          "<th scope='row'>" +
-                res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
+          data[transformation]["products"][0].join(", ") +
-                if (data[transformation]['btrule'] != null) {
+          "</th>";
-                    res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
+        res +=
+          "<th scope='row'>" +
+          "<img width='400' src='{% url 'depict' %}?smiles=" +
+          encodeURIComponent(data[transformation]["products"][0].join(".")) +
+          "'></th>";
+        res +=
+          "<th scope='row'>" +
+          data[transformation]["probability"].toFixed(3) +
+          "</th>";
+        if (data[transformation]["btrule"] != null) {
+          res +=
+            "<th scope='row'>" +
+            "<a href='" +
+            data[transformation]["btrule"]["url"] +
+            "'>" +
+            data[transformation]["btrule"]["name"] +
+            "</a>" +
+            "</th>";
         } else {
-                    res += "<th scope='row'>N/A</th>"
+          res += "<th scope='row'>N/A</th>";
         }
-                res += "</tr>"
+        res += "</tr>";
         cnt += 1;
       }
 
-            res += "</tbody>"
+      res += "</tbody>";
-            res += "</table>"
+      res += "</table>";
       $("#predictResultTable").append(res);
     }
 
@@ -310,37 +428,40 @@
       $("#" + divid).empty();
     }
 
-        if ($('#predict-button').length > 0) {
+    if ($("#predict-button").length > 0) {
       $("#predict-button").on("click", function (e) {
         e.preventDefault();
 
         clear("predictResultTable");
 
         data = {
-                    "smiles": $("#smiles-to-predict").val(),
+          smiles: $("#smiles-to-predict").val(),
-                    "classify": "ILikeCats!"
+          classify: "ILikeCats!",
-                }
+        };
 
         if (data["smiles"].trim() === "") {
           $("#predictResultTable").addClass("alert alert-danger");
-                    $("#predictResultTable").append("Please enter a SMILES string to predict!");
+          $("#predictResultTable").append(
+            "Please enter a SMILES string to predict!",
+          );
           return;
         }
 
         makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
         $.ajax({
-                    type: 'get',
+          type: "get",
           data: data,
-                    url: '',
+          url: "",
           success: function (data, textStatus) {
             try {
               $("#predictLoading").empty();
               handlePredictionResponse(data);
             } catch (error) {
-
               $("#predictLoading").empty();
               $("#predictResultTable").addClass("alert alert-danger");
-                            $("#predictResultTable").append("Error while processing response :/");
+              $("#predictResultTable").append(
+                "Error while processing response :/",
+              );
             }
           },
           error: function (jqXHR, textStatus, errorThrown, x) {
@@ -352,30 +473,30 @@
       });
     }
 
-        if ($('#assess-button').length > 0) {
+    if ($("#assess-button").length > 0) {
       $("#assess-button").on("click", function (e) {
         e.preventDefault();
 
         clear("appDomainAssessmentResultTable");
 
         data = {
-                    "smiles": $("#smiles-to-assess").val(),
+          smiles: $("#smiles-to-assess").val(),
-                    "app-domain-assessment": "ILikeCats!"
+          "app-domain-assessment": "ILikeCats!",
-                }
+        };
 
         if (data["smiles"].trim() === "") {
           $("#appDomainAssessmentResultTable").addClass("alert alert-danger");
-                    $("#appDomainAssessmentResultTable").append("Please enter a SMILES string to predict!");
+          $("#appDomainAssessmentResultTable").append(
+            "Please enter a SMILES string to predict!",
+          );
           return;
         }
 
-
-
         makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
         $.ajax({
-                    type: 'get',
+          type: "get",
           data: data,
-                    url: '',
+          url: "",
           success: function (data, textStatus) {
             try {
               $("#appDomainLoading").empty();
@@ -383,19 +504,23 @@
               console.log(data);
             } catch (error) {
               $("#appDomainLoading").empty();
-                            $("#appDomainAssessmentResultTable").addClass("alert alert-danger");
+              $("#appDomainAssessmentResultTable").addClass(
-                            $("#appDomainAssessmentResultTable").append("Error while processing response :/");
+                "alert alert-danger",
+              );
+              $("#appDomainAssessmentResultTable").append(
+                "Error while processing response :/",
+              );
             }
           },
           error: function (jqXHR, textStatus, errorThrown) {
             $("#appDomainLoading").empty();
             $("#appDomainAssessmentResultTable").addClass("alert alert-danger");
-                        $("#appDomainAssessmentResultTable").append(jqXHR.responseJSON.error);
+            $("#appDomainAssessmentResultTable").append(
-                    }
+              jqXHR.responseJSON.error,
+            );
+          },
         });
       });
     }
-
   </script>
-
 {% endblock content %}