Merge branch 'develop' into fix/missing_nav_links

templates/actions/collections/compound.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_compound_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Compound</a
+            <span class="glyphicon glyphicon-plus"></span> New Compound</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/compound_structure.html

@@ -1,11 +1,6 @@
 {% if meta.can_edit %}
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#new_compound_structure_modal">
-      role="button"
+            <span class="glyphicon glyphicon-plus"></span> New Compound Structure</a>
-      data-toggle="modal"
-      data-target="#new_compound_structure_modal"
-    >
-      <span class="glyphicon glyphicon-plus"></span> New Compound Structure</a
-    >
     </li>
 {% endif %}

templates/actions/collections/edge.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_edge_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Edge</a
+            <span class="glyphicon glyphicon-plus"></span> New Edge</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/group.html

@@ -1,5 +1,4 @@
 <li>
     <a role="button" data-toggle="modal" data-target="#new_group_modal">
-    <span class="glyphicon glyphicon-plus"></span> New Group</a
+        <span class="glyphicon glyphicon-plus"></span> New Group</a>
-  >
 </li>

templates/actions/collections/model.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_model_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Model</a
+            <span class="glyphicon glyphicon-plus"></span> New Model</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/node.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_node_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Node</a
+            <span class="glyphicon glyphicon-plus"></span> New Node</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/package.html

@@ -1,20 +1,12 @@
 <li>
     <a role="button" data-toggle="modal" data-target="#new_package_modal">
-    <span class="glyphicon glyphicon-plus"></span> New Package</a
+        <span class="glyphicon glyphicon-plus"></span> New Package</a>
-  >
 </li>
 <li>
     <a role="button" data-toggle="modal" data-target="#import_package_modal">
-    <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a
+        <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a>
-  >
 </li>
 <li>
-  <a
+    <a role="button" data-toggle="modal" data-target="#import_legacy_package_modal">
-    role="button"
+        <span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a>
-    data-toggle="modal"
-    data-target="#import_legacy_package_modal"
-  >
-    <span class="glyphicon glyphicon-import"></span> Import Package from legacy
-    JSON</a
-  >
 </li>

templates/actions/collections/reaction.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_reaction_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Reaction</a
+            <span class="glyphicon glyphicon-plus"></span> New Reaction</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/rule.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_rule_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Rule</a
+            <span class="glyphicon glyphicon-plus"></span> New Rule</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/scenario.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_scenario_modal">
-      <span class="glyphicon glyphicon-plus"></span> New Scenario</a
+            <span class="glyphicon glyphicon-plus"></span> New Scenario</a>
-    >
     </li>
 {% endif %}

templates/actions/collections/setting.html

@@ -1,7 +1,6 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#new_setting_modal">
-      <span class="glyphicon glyphicon-plus"></span>New Setting</a
+            <span class="glyphicon glyphicon-plus"></span>New Setting</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/compound.html

@@ -1,43 +1,32 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_compound_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Compound</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Compound</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#add_structure_modal">
-      <i class="glyphicon glyphicon-plus"></i> Add Structure</a
+            <i class="glyphicon glyphicon-plus"></i> Add Structure</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
-      role="button"
+            <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
-      data-toggle="modal"
-      data-target="#generic_set_external_reference_modal"
-    >
-      <i class="glyphicon glyphicon-plus"></i> Set External Reference</a
-    >
     </li>
 {% endif %}
-<li>
+    <li>
         <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
-    <i class="glyphicon glyphicon-duplicate"></i> Copy</a
+            <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
-  >
+    </li>
-</li>
 {% if meta.can_edit %}
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Compound</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/compound_structure.html

@@ -1,35 +1,22 @@
 {% if meta.can_edit %}
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#edit_compound_structure_modal">
-      role="button"
+            <i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a>
-      data-toggle="modal"
-      data-target="#edit_compound_structure_modal"
-    >
-      <i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
-      role="button"
+            <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
-      data-toggle="modal"
-      data-target="#generic_set_external_reference_modal"
-    >
-      <i class="glyphicon glyphicon-plus"></i> Set External Reference</a
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/edge.html

@@ -1,17 +1,14 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Edge</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Edge</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/group.html

@@ -1,12 +1,10 @@
 {% if meta.can_edit %}
     <li>
     <a role="button" data-toggle="modal" data-target="#edit_group_member_modal">
-      <i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a
+            <i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Group</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Group</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/model.html

@@ -1,22 +1,18 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_model_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Model</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Model</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#evaluate_model_modal">
-      <i class="glyphicon glyphicon-ok"></i> Evaluate Model</a
+            <i class="glyphicon glyphicon-ok"></i> Evaluate Model</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#retrain_model_modal">
-      <i class="glyphicon glyphicon-repeat"></i> Retrain Model</a
+            <i class="glyphicon glyphicon-repeat"></i> Retrain Model</a>
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Model</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Model</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/node.html

@@ -1,22 +1,18 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_node_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Node</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Node</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Node</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Node</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/package.html

@@ -1,36 +1,26 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_package_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Package</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Package</a>
-    >
     </li>
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#edit_package_permissions_modal">
-      role="button"
+            <i class="glyphicon glyphicon-user"></i> Edit Permissions</a>
-      data-toggle="modal"
-      data-target="#edit_package_permissions_modal"
-    >
-      <i class="glyphicon glyphicon-user"></i> Edit Permissions</a
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#publish_package_modal">
-      <i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a
+            <i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#export_package_modal">
-      <i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a
+            <i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_license_modal">
-      <i class="glyphicon glyphicon-duplicate"></i> License</a
+            <i class="glyphicon glyphicon-duplicate"></i> License</a>
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Package</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Package</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/pathway.html

@@ -1,65 +1,43 @@
 {% if meta.can_edit %}
     <li>
         <a class="button" data-toggle="modal" data-target="#add_pathway_node_modal">
-      <i class="glyphicon glyphicon-plus"></i> Add Compound</a
+            <i class="glyphicon glyphicon-plus"></i> Add Compound</a>
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
-      <i class="glyphicon glyphicon-plus"></i> Add Reaction</a
+            <i class="glyphicon glyphicon-plus"></i> Add Reaction</a>
-    >
     </li>
     <li role="separator" class="divider"></li>
 {% endif %}
-<li>
+    <li>
         <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
-    <i class="glyphicon glyphicon-duplicate"></i> Copy</a
+            <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
-  >
+    </li>
-</li>
+    <li>
-<li>
+        <a class="button" data-toggle="modal" data-target="#download_pathway_csv_modal">
-  <a
+            <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a>
-    class="button"
+    </li>
-    data-toggle="modal"
+    <li>
-    data-target="#download_pathway_csv_modal"
+        <a class="button" data-toggle="modal" data-target="#download_pathway_image_modal">
-  >
+            <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a>
-    <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a
+    </li>
-  >
-</li>
-<li>
-  <a
-    class="button"
-    data-toggle="modal"
-    data-target="#download_pathway_image_modal"
-  >
-    <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a
-  >
-</li>
 {% if meta.can_edit %}
     <li>
-    <a
+        <a class="button" data-toggle="modal" data-target="#identify_missing_rules_modal">
-      class="button"
+            <i class="glyphicon glyphicon-question-sign"></i> Identify Missing Rules</a>
-      data-toggle="modal"
-      data-target="#identify_missing_rules_modal"
-    >
-      <i class="glyphicon glyphicon-question-sign"></i> Identify Missing
-      Rules</a
-    >
     </li>
     <li role="separator" class="divider"></li>
     <li>
         <a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     {#    <li>#}
     {#        <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
@@ -67,26 +45,15 @@
     {#    </li>#}
     <li role="separator" class="divider"></li>
     <li>
-    <a
+        <a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal">
-      class="button"
+            <i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
-      data-toggle="modal"
-      data-target="#delete_pathway_node_modal"
-    >
-      <i class="glyphicon glyphicon-trash"></i> Delete Compound</a
-    >
     </li>
     <li>
-    <a
+        <a class="button" data-toggle="modal" data-target="#delete_pathway_edge_modal">
-      class="button"
+            <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
-      data-toggle="modal"
-      data-target="#delete_pathway_edge_modal"
-    >
-      <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Pathway</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Pathway</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/reaction.html

@@ -1,38 +1,28 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_reaction_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Reaction</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Reaction</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
-      role="button"
+            <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
-      data-toggle="modal"
-      data-target="#generic_set_external_reference_modal"
-    >
-      <i class="glyphicon glyphicon-plus"></i> Set External Reference</a
-    >
     </li>
 {% endif %}
-<li>
+    <li>
         <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
-    <i class="glyphicon glyphicon-duplicate"></i> Copy</a
+            <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
-  >
+    </li>
-</li>
 {% if meta.can_edit %}
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/rule.html

@@ -1,29 +1,24 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_rule_modal">
-      <i class="glyphicon glyphicon-edit"></i> Edit Rule</a
+            <i class="glyphicon glyphicon-edit"></i> Edit Rule</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
+            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
+            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
-    >
     </li>
 {% endif %}
-<li>
+    <li>
         <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
-    <i class="glyphicon glyphicon-duplicate"></i> Copy</a
+            <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
-  >
+    </li>
-</li>
 {% if meta.can_edit %}
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Rule</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Rule</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/scenario.html

@@ -1,25 +1,14 @@
 {% if meta.can_edit %}
     <li>
-    <a
+        <a class="button" data-toggle="modal" data-target="#add_additional_information_modal">
-      class="button"
+            <i class="glyphicon glyphicon-trash"></i> Add Additional Information</a>
-      data-toggle="modal"
-      data-target="#add_additional_information_modal"
-    >
-      <i class="glyphicon glyphicon-trash"></i> Add Additional Information</a
-    >
     </li>
     <li>
-    <a
+        <a class="button" data-toggle="modal" data-target="#update_scenario_additional_information_modal">
-      class="button"
+            <i class="glyphicon glyphicon-trash"></i> Set Additional Information</a>
-      data-toggle="modal"
-      data-target="#update_scenario_additional_information_modal"
-    >
-      <i class="glyphicon glyphicon-trash"></i> Set Additional Information</a
-    >
     </li>
     <li>
         <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Scenario</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Scenario</a>
-    >
     </li>
 {% endif %}

templates/actions/objects/user.html

@@ -1,30 +1,22 @@
 {% if meta.can_edit %}
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_user_modal">
-      <i class="glyphicon glyphicon-edit"></i> Update</a
+            <i class="glyphicon glyphicon-edit"></i> Update</a>
-    >
     </li>
     <li>
         <a role="button" data-toggle="modal" data-target="#edit_password_modal">
-      <i class="glyphicon glyphicon-lock"></i> Update Password</a
+            <i class="glyphicon glyphicon-lock"></i> Update Password</a>
-    >
     </li>
     <li>
-    <a
+        <a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal">
-      role="button"
+            <i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a>
-      data-toggle="modal"
-      data-target="#new_prediction_setting_modal"
-    >
-      <i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a
-    >
     </li>
-  {#    <li>#}
+{#    <li>#}
-  {#        <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
+{#        <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
-  {#            <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#}
+{#            <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#}
-  {#    </li>#}
+{#    </li>#}
     <li>
         <a role="button" data-toggle="modal" data-target="#generic_delete_modal">
-      <i class="glyphicon glyphicon-trash"></i> Delete Account</a
+            <i class="glyphicon glyphicon-trash"></i> Delete Account</a>
-    >
     </li>
 {% endif %}

templates/admin.html

@@ -1,17 +1,12 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-  <div id="searchContent">
+
+<div id=searchContent>
     <form id="admin-form" action="{{ SERVER_BASE }}/admin" method="post">
         <div class="form-group">
             <label for="textarea">Query</label>
-        <textarea
+            <textarea id="textarea" class="form-control" rows="10" placeholder="Paste query here" required>
-          id="textarea"
-          class="form-control"
-          rows="10"
-          placeholder="Paste query here"
-          required
-        >
 PREFIX pps: <http://localhost:8080/vocabulary#>
 SELECT ?name (count(?objId) as ?xcnt)
 WHERE {
@@ -20,29 +15,32 @@ WHERE {
     ?packageId pps:reviewStatus 'reviewed' .
     ?packageId pps:pathway ?objId .
 } GROUP BY ?name
-            </textarea
+            </textarea>
-        >
         </div>
         <button id="submit" type="button" class="btn btn-primary">Submit</button>
     </form>
     <p></p>
-  </div>
+</div>
-  <div id="results"></div>
+<div id="results">
-  <div id="loading"></div>
+</div>
-  <script>
+<div id="loading"></div>
-    $(function () {
+</div>
-      $("#submit").on("click", function () {
+<script>
+$(function() {
+    $('#submit').on('click', function() {
+
         makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
 
         data = {
-          query: $("#textarea").val(),
+            "query": $("#textarea").val()
-        };
+        }
 
-        $.post("{{ SERVER_BASE }}/expire", data, function (result) {
+        $.post("{{ SERVER_BASE }}/expire", data, function(result) {
             $("#loading").empty();
             queryResultToTable("results", result);
+        })
     });
-      });
+})
-    });
+</script>
-  </script>
+
 {% endblock content %}

templates/collections/joblog.html

@@ -1,38 +1,30 @@
 {% extends "framework.html" %}
 {% load static %}
-{% load envipytags %}
 {% block content %}
+
     <div class="panel-group" id="reviewListAccordion">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 Jobs
             </div>
             <div class="panel-body">
-        <p>Job Logs Desc</p>
+                <p>
+                    Job Logs Desc
+                </p>
+
             </div>
 
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="job-accordion-link" data-toggle="collapse" data-parent="#job-accordion" href="#jobs">
-            id="job-accordion-link"
-            data-toggle="collapse"
-            data-parent="#job-accordion"
-            href="#jobs"
-          >
                         Jobs
                     </a>
                 </h4>
             </div>
-      <div id="jobs" class="panel-collapse in collapse">
+            <div id="jobs"
+                 class="panel-collapse collapse in">
                 <div class="panel-body list-group-item" id="job-content">
-          <table class="table-bordered table-hover table">
+                    <table class="table table-bordered table-hover">
                         <tr style="background-color: rgba(0, 0, 0, 0.08);">
                             <th scope="col">ID</th>
                             <th scope="col">Name</th>
@@ -64,12 +56,10 @@
             </div>
 
             <!-- Unreviewable objects such as User / Group / Setting -->
-      <ul class="list-group">
+            <ul class='list-group'>
                 {% for obj in objects %}
                     {% if object_type == 'user' %}
-            <a class="list-group-item" href="{{ obj.url }}"
+                        <a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
-              >{{ obj.username }}</a
-            >
                     {% else %}
                         <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
                     {% endif %}

templates/collections/objects_list.html

@@ -6,22 +6,14 @@
         <div>
             <div id="load-all-error" style="display: none;">
                 <div class="alert alert-danger" role="alert">
-          <span
+                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            class="glyphicon glyphicon-exclamation-sign"
-            aria-hidden="true"
-          ></span>
                     <span class="sr-only">Error:</span>
                     Getting objects failed!
                 </div>
             </div>
 
-      <input
+            <input type="text" id="object-search" class="form-control" placeholder="Search by name"
-        type="text"
+                   style="display: none;">
-        id="object-search"
-        class="form-control"
-        placeholder="Search by name"
-        style="display: none;"
-      />
             <p></p>
         </div>
     {% endif %}
@@ -56,13 +48,9 @@
         {% endif %}
     {% endblock action_modals %}
 
-  <div class="panel-group" id="reviewListAccordion">
+<div class="panel-group" id="reviewListAccordion">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {% if object_type == 'package' %}
             Packages
             {% elif object_type == 'compound' %}
@@ -90,21 +78,12 @@
             {% elif object_type == 'group' %}
             Groups
             {% endif %}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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 %}
                         {% if object_type == 'package' %}
@@ -139,204 +118,93 @@
         <div class="panel-body">
             <!-- Set Text above links -->
             {% if object_type == 'package' %}
-          <p>
+            <p>A package contains pathways, rules, etc. and can reflect specific experimental
-            A package contains pathways, rules, etc. and can reflect specific
+                conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
-            experimental conditions.
+                    more &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/packages"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'compound' %}
-          <p>
+            <p>A compound stores the structure of a molecule and can include meta-information.
-            A compound stores the structure of a molecule and can include
+                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
-            meta-information.
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/compounds"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'structure' %}
-          <p>
+            <p>The structures stored in this compound
-            The structures stored in this compound
+                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/compounds"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'rule' %}
-          <p>
+            <p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
-            A rule describes a biotransformation reaction template that is
+                <a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
-            defined as SMIRKS.
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/Rules"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'reaction' %}
-          <p>
+            <p>A reaction is a specific biotransformation from educt compounds to product compounds.
-            A reaction is a specific biotransformation from educt compounds to
+                <a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
-            product compounds.
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/reactions"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'pathway' %}
-          <p>
+            <p>A pathway displays the (predicted) biodegradation of a compound as graph.
-            A pathway displays the (predicted) biodegradation of a compound as
+                <a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more
-            graph.
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/pathways"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'node' %}
-          <p>
+            <p>Nodes represent the (predicted) compounds in a graph.
-            Nodes represent the (predicted) compounds in a graph.
+                <a target="_blank" href="https://wiki.envipath.org/index.php/nodes" role="button">Learn more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/nodes"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'edge' %}
-          <p>
+            <p>Edges represent the links between Nodes in a graph
-            Edges represent the links between Nodes in a graph
+                <a target="_blank" href="https://wiki.envipath.org/index.php/edges" role="button">Learn more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/edges"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'scenario' %}
-          <p>
+            <p>A scenario contains meta-information that can be attached to other data (compounds, rules, ..).
-            A scenario contains meta-information that can be attached to other
+                <a target="_blank" href="https://wiki.envipath.org/index.php/scenarios" role="button">Learn more
-            data (compounds, rules, ..).
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/scenarios"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'model' %}
-          <p>
+            <p>A model applies machine learning to limit the combinatorial explosion.
-            A model applies machine learning to limit the combinatorial
+                <a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn
-            explosion.
+                    more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/relative_reasoning"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'setting' %}
-          <p>
+            <p>A setting includes configuration parameters for pathway predictions.
-            A setting includes configuration parameters for pathway predictions.
+                <a target="_blank" href="https://wiki.envipath.org/index.php/settings" role="button">Learn more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/settings"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'user' %}
-          <p>
+            <p>Register now to create own packages and to submit and manage your data.
-            Register now to create own packages and to submit and manage your
+                <a target="_blank" href="https://wiki.envipath.org/index.php/users" role="button">Learn more
-            data.
+                    &gt;&gt;</a></p>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/users"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% elif object_type == 'group' %}
-          <p>
+            <p>Users can team up in groups to share packages.
-            Users can team up in groups to share packages.
+                <a target="_blank" href="https://wiki.envipath.org/index.php/groups" role="button">Learn more
-            <a
+                    &gt;&gt;</a></p>
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/groups"
-              role="button"
-              >Learn more &gt;&gt;</a
-            >
-          </p>
             {% endif %}
 
             <!-- If theres nothing to show extend the text above -->
             {% if reviewed_objects and unreviewed_objects %}
             {% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
-            <p>
+            <p>Nothing found. There are two possible reasons: <br><br>1. There is no content yet.<br>2. You have no
-              Nothing found. There are two possible reasons: <br /><br />1.
+                reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
-              There is no content yet.<br />2. You have no reading
-              permissions.<br /><br />Please be sure you have at least reading
-              permissions.
-            </p>
             {% endif %}
             {% endif %}
         </div>
         {% if reviewed_objects %}
         {% if reviewed_objects|length > 0 %}
-          <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-            class="panel panel-default panel-heading list-group-item"
-            style="background-color:silver"
-          >
             <h4 class="panel-title">
-              <a
+                <a id="ReviewedLink" data-toggle="collapse" data-parent="#reviewListAccordion"
-                id="ReviewedLink"
+                   href="#Reviewed">Reviewed</a>
-                data-toggle="collapse"
-                data-parent="#reviewListAccordion"
-                href="#Reviewed"
-                >Reviewed</a
-              >
             </h4>
         </div>
-          <div id="Reviewed" class="panel-collapse in collapse">
+        <div id="Reviewed" class="panel-collapse collapse in">
             <div class="panel-body list-group-item" id="ReviewedContent">
                 {% if object_type == 'package' %}
                 {% for obj in reviewed_objects %}
-                  <a class="list-group-item" href="{{ obj.url }}"
+                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}
-                    >{{ obj.name|safe }}
+                    <span class="glyphicon glyphicon-star" aria-hidden="true"
-                    <span
+                          style="float:right" data-toggle="tooltip"
-                      class="glyphicon glyphicon-star"
+                          data-placement="top" title="" data-original-title="Reviewed">
-                      aria-hidden="true"
-                      style="float:right"
-                      data-toggle="tooltip"
-                      data-placement="top"
-                      title=""
-                      data-original-title="Reviewed"
-                    >
                         </span>
                 </a>
                 {% endfor %}
                 {% else %}
                 {% for obj in reviewed_objects|slice:":50" %}
-                  <a class="list-group-item" href="{{ obj.url }}"
+                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
-                    >{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
+                    <span class="glyphicon glyphicon-star" aria-hidden="true"
-                    <span
+                          style="float:right" data-toggle="tooltip"
-                      class="glyphicon glyphicon-star"
+                          data-placement="top" title="" data-original-title="Reviewed">
-                      aria-hidden="true"
-                      style="float:right"
-                      data-toggle="tooltip"
-                      data-placement="top"
-                      title=""
-                      data-original-title="Reviewed"
-                    >
                         </span>
                 </a>
                 {% endfor %}
@@ -346,36 +214,18 @@
         {% endif %}
         {% endif %}
         {% if unreviewed_objects %}
-        <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver"><h4
-          class="panel panel-default panel-heading list-group-item"
+                class="panel-title"><a id="UnreviewedLink" data-toggle="collapse" data-parent="#unReviewListAccordion"
-          style="background-color:silver"
+                                       href="#Unreviewed">Unreviewed</a></h4></div>
-        >
+        <div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
-          <h4 class="panel-title">
-            <a
-              id="UnreviewedLink"
-              data-toggle="collapse"
-              data-parent="#unReviewListAccordion"
-              href="#Unreviewed"
-              >Unreviewed</a
-            >
-          </h4>
-        </div>
-        <div
-          id="Unreviewed"
-          class="panel-collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %} collapse"
-        >
             <div class="panel-body list-group-item" id="UnreviewedContent">
                 {% if object_type == 'package' %}
                 {% for obj in unreviewed_objects %}
-                <a class="list-group-item" href="{{ obj.url }}"
+                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
-                  >{{ obj.name|safe }}</a
-                >
                 {% endfor %}
                 {% else %}
                 {% for obj in unreviewed_objects|slice:":50" %}
-                <a class="list-group-item" href="{{ obj.url }}"
+                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
-                  >{{ obj.name|safe }}</a
-                >
                 {% endfor %}
                 {% endif %}
             </div>
@@ -383,16 +233,12 @@
         {% endif %}
         {% if objects %}
         <!-- Unreviewable objects such as User / Group / Setting -->
-        <ul class="list-group">
+        <ul class='list-group'>
             {% for obj in objects %}
             {% if object_type == 'user' %}
-              <a class="list-group-item" href="{{ obj.url }}"
+            <a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
-                >{{ obj.username|safe }}</a
-              >
             {% else %}
-              <a class="list-group-item" href="{{ obj.url }}"
+            <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
-                >{{ obj.name|safe }}</a
-              >
             {% endif %}
             {% endfor %}
         </ul>
@@ -415,14 +261,10 @@
     </style>
 
     <div id="load-all-loading" class="spinner-widget" style="display: none">
-      <img
+        <img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
-        id="loading-gif"
-        src="{% static '/images/wait.gif' %}"
-        alt="Loading..."
-      />
     </div>
-  </div>
+
-  {# prettier-ignore-start #}
+</div>
     <script>
         $(function () {
 
@@ -474,5 +316,4 @@
 
         });
     </script>
-    {# prettier-ignore-end #}
 {% endblock content %}

templates/compare.html

@@ -4,32 +4,16 @@
     <div>
         <form action="" method="post">
             {% csrf_token %}
-      <input
+            <input type="text" class="form-control" id="smiles" name="smiles" placeholder="SMILES"
-        type="text"
+                   value="{{ smiles }}"/>
-        class="form-control"
+            <input type="text" class="form-control" id="smiles" name="smirks" placeholder="SMIRKS"
-        id="smiles"
+                   value="{{ smirks }}"/>
-        name="smiles"
-        placeholder="SMILES"
-        value="{{ smiles }}"
-      />
-      <input
-        type="text"
-        class="form-control"
-        id="smiles"
-        name="smirks"
-        placeholder="SMIRKS"
-        value="{{ smirks }}"
-      />
             <button type="submit" class="btn btn-primary">Test</button>
         </form>
     </div>
     {% if result %}
-    {{ smiles }}
+        {{ smiles }}<p></p>
-    <p></p>
+        <img width='400' src='{% url 'depict' %}?smiles={{ smiles|urlencode }}'><br>
-    <img
-      width="400"
-      src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
-    /><br />
         <p></p>
         {% if rule %}
             {{ smirks }}
@@ -38,7 +22,9 @@
             <p></p>
             {{ rule.products_smarts }}
             <p></p>
-      <div>{{ rule.as_svg|safe }}</div>
+            <div>
+                {{ rule.as_svg|safe }}
+            </div>
         {% endif %}
         <h2>Diff</h2>
         {% if diff %}
@@ -52,22 +38,16 @@
             <div class="col-md-6">
                 <h2>Ambit</h2>
                 {% for p in ambit_res %}
-          {{ p }}<br />
+                    {{ p }}<br>
-          <img
+                    <img width='400' src='{% url 'depict' %}?smiles={{ p|urlencode }}'><br>
-            width="400"
-            src="{% url 'depict' %}?smiles={{ p|urlencode }}"
-          /><br />
                 {% endfor %}
             </div>
 
             <div class="col-md-6">
                 <h2>RDKit</h2>
                 {% for p in rdkit_res %}
-          {{ p }}<br />
+                    {{ p }}<br>
-          <img
+                    <img width='400' src='{% url 'depict' %}?smiles={{ p|urlencode }}'><br>
-            width="400"
-            src="{% url 'depict' %}?smiles={{ p|urlencode }}"
-          /><br />
                 {% endfor %}
             </div>
         </div>

templates/errors/400_bad_request.html

@@ -1,18 +1,15 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-  <div class="alert alert-error" role="alert">
+
+<div class="alert alert-error" role="alert">
     <h4 class="alert-heading">Bad Request!</h4>
     <p>Lorem</p>
-    <hr />
+    <hr>
     <p class="mb-0">
-      You can find out more about permissions in our
+        You can find out more about permissions in our <a target="_blank"
-      <a
-        target="_blank"
                                                           href="https://wiki.envipath.org/index.php/packages"
-        role="button"
+                                                          role="button">Wiki &gt;&gt;</a></p>
-        >Wiki &gt;&gt;</a
+</div>
-      >
+
-    </p>
-  </div>
 {% endblock content %}

templates/errors/403_access_denied.html

@@ -1,18 +1,15 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-  <div class="alert alert-error" role="alert">
+
+<div class="alert alert-error" role="alert">
     <h4 class="alert-heading">Access Denied!</h4>
-    <p>Access to X denied.</p>
+    <p>Access to X denied. </p>
-    <hr />
+    <hr>
     <p class="mb-0">
-      You can find out more about permissions in our
+        You can find out more about permissions in our <a target="_blank"
-      <a
-        target="_blank"
                                                           href="https://wiki.envipath.org/index.php/packages"
-        role="button"
+                                                          role="button">Wiki &gt;&gt;</a></p>
-        >Wiki &gt;&gt;</a
+</div>
-      >
+
-    </p>
-  </div>
 {% endblock content %}

templates/errors/404_not_found.html

@@ -1,18 +1,15 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-  <div class="alert alert-error" role="alert">
+
+<div class="alert alert-error" role="alert">
     <h4 class="alert-heading">Not Found!</h4>
     <p>Does not exist</p>
-    <hr />
+    <hr>
     <p class="mb-0">
-      You can find out more about permissions in our
+        You can find out more about permissions in our <a target="_blank"
-      <a
-        target="_blank"
                                                           href="https://wiki.envipath.org/index.php/packages"
-        role="button"
+                                                          role="button">Wiki &gt;&gt;</a></p>
-        >Wiki &gt;&gt;</a
+</div>
-      >
+
-    </p>
-  </div>
 {% endblock content %}

templates/errors/error.html

@@ -1,9 +1,13 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
+
     <div class="alert alert-danger" role="alert">
         <h4 class="alert-heading">{{ error_message }}</h4>
-    <hr />
+        <hr>
-    <p class="mb-0">{{ error_detail }}</p>
+        <p class="mb-0">
+            {{ error_detail }}
+        </p>
     </div>
+
 {% endblock content %}

templates/errors/user_account_inactive.html

@@ -1,11 +1,12 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
+
     <div class="alert alert-danger" role="alert">
         <h4 class="alert-heading">Your account has not been activated yet!</h4>
-    <p>
+        <p>Your account has not been activated yet. If you have questions <a href="mailto:admin@envipath.org">contact
-      Your account has not been activated yet. If you have questions
+            us.</a>
-      <a href="mailto:admin@envipath.org">contact us.</a>
         </p>
     </div>
+
 {% endblock content %}

templates/framework.html

@@ -124,7 +124,7 @@
 
           <!-- Collect the nav links, forms, and other content for toggling -->
           <div
-            class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
+            class="collapse navbar-collapse collapse-framework navbar-collapse-framework"
             id="navbarCollapse"
           >
             <ul class="nav navbar-nav navbar-nav-framework">
@@ -338,7 +338,7 @@
               >
             </div>
           </div>
-          <div id="license" class="panel-collapse in collapse">
+          <div id="license" class="panel-collapse collapse in">
             <div class="panel-body list-group-item">
               <a target="_blank" href="{{ meta.current_package.license.link }}">
                 <img src="{{ meta.current_package.license.image_link }}" />

templates/framework_modern.html

@@ -80,7 +80,7 @@
       {% block main_content %}
         {# Breadcrumbs - outside main content, optional #}
         {% if breadcrumbs %}
-          <div id="bread" class="mx-auto max-w-7xl px-4 py-4">
+          <div id="bread" class="max-w-7xl mx-auto px-4 py-4">
             <div class="breadcrumbs text-sm">
               <ul>
                 {% for elem in breadcrumbs %}
@@ -113,7 +113,7 @@
 
           {# License - inside paper if present #}
           {% if meta.url_contains_package and meta.current_package.license %}
-            <div class="collapse-arrow bg-base-200 collapse p-8">
+            <div class="collapse collapse-arrow bg-base-200 m-8">
               <input type="checkbox" checked />
               <div class="collapse-title text-xl font-medium">License</div>
               <div class="collapse-content">
@@ -137,7 +137,7 @@
 
     {# Floating Help Tab #}
     {% if not public_mode %}
-      <div class="fixed top-1/2 right-0 z-50 -translate-y-1/2">
+      <div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
         <a
           href="https://community.envipath.org/"
           target="_blank"

templates/includes/navbar.html

@@ -27,7 +27,7 @@
           class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
         >
           <li>
-            <a href="{{ meta.server_url }}/package" id="packageLink">Package</a>
+            <a href="{{ meta.server_url }}/Package" id="packageLink">Package</a>
           </li>
           <li>
             <a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a>

templates/migration.html

@@ -1,71 +1,44 @@
 {% extends "framework.html" %}
 
 {% block content %}
-  <div class="panel-group" id="migration-detail">
+<div class="panel-group" id="migration-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             Migration Status BT Rules
         </div>
         <div class="panel-body">
-        <p>Rules with Error: {{ error }}/{{ total }}</p>
+            <p>Rules with Error: {{ error }}/{{ total }} </p>
             <p>Rules without Error: {{ success }}/{{ total }}</p>
         </div>
 
         {% for obj in results %}
-        <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
             {% if obj.status %}
-            <span
+            <span class="glyphicon glyphicon-ok" aria-hidden="true"
-              class="glyphicon glyphicon-ok"
+                  style="float:right" data-toggle="tooltip"
-              aria-hidden="true"
+                  data-placement="top" title="" data-original-title="Reviewed">
-              style="float:right"
-              data-toggle="tooltip"
-              data-placement="top"
-              title=""
-              data-original-title="Reviewed"
-            >
             </span>
             {% else %}
-            <span
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"
-              class="glyphicon glyphicon-remove"
+                  style="float:right" data-toggle="tooltip"
-              aria-hidden="true"
+                  data-placement="top" title="" data-original-title="Reviewed">
-              style="float:right"
-              data-toggle="tooltip"
-              data-placement="top"
-              title=""
-              data-original-title="Reviewed"
-            >
             </span>
             {% endif %}
             <h4 class="panel-title">
-            <a
+                <a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
-              id="{{ obj.id }}-link"
+                   href="#{{ obj.id }}">{{ obj.name|safe }}</a>
-              data-toggle="collapse"
-              data-parent="#migration-detail"
-              href="#{{ obj.id }}"
-              >{{ obj.name|safe }}</a
-            >
             </h4>
         </div>
-        <div
+        <div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
-          id="{{ obj.id }}"
-          class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
-        >
             <div class="panel-body list-group-item">
-            <a class="list-group-item" href="{{ obj.detail_url }}"
+                <a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a>
-              >{{ obj.name|safe }} Migration Detail Page</a
-            >
             </div>
         </div>
         {% endfor %}
     </div>
-  </div>
+</div>
 
-  <script></script>
+<script>
+
+</script>
 {% endblock content %}

templates/migration_detail.html

@@ -3,68 +3,34 @@
 {% block content %}
     <div class="panel-group" id="migration-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 Migration Status for {{ bt_rule_name }}
             </div>
             <div class="panel-body">
-        <p>
+                <p>A package contains pathways, rules, etc. and can reflect specific experimental
-          A package contains pathways, rules, etc. and can reflect specific
+                    conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
-          experimental conditions.
+                        more &gt;&gt;</a></p>
-          <a
-            target="_blank"
-            href="https://wiki.envipath.org/index.php/packages"
-            role="button"
-            >Learn more &gt;&gt;</a
-          >
-        </p>
             </div>
 
             {% for obj in results %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     {% if obj.status %}
-            <span
+                        <span class="glyphicon glyphicon-ok" aria-hidden="true"
-              class="glyphicon glyphicon-ok"
+                              style="float:right" data-toggle="tooltip"
-              aria-hidden="true"
+                              data-placement="top" title="" data-original-title="Reviewed">
-              style="float:right"
-              data-toggle="tooltip"
-              data-placement="top"
-              title=""
-              data-original-title="Reviewed"
-            >
                         </span>
                     {% else %}
-            <span
+                        <span class="glyphicon glyphicon-remove" aria-hidden="true"
-              class="glyphicon glyphicon-remove"
+                              style="float:right" data-toggle="tooltip"
-              aria-hidden="true"
+                              data-placement="top" title="" data-original-title="Reviewed">
-              style="float:right"
-              data-toggle="tooltip"
-              data-placement="top"
-              title=""
-              data-original-title="Reviewed"
-            >
                         </span>
                     {% endif %}
                     <h4 class="panel-title">
-            <a
+                        <a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
-              id="{{ obj.id }}-link"
+                           href="#{{ obj.id }}">{{ obj.name|safe }}</a>
-              data-toggle="collapse"
-              data-parent="#migration-detail"
-              href="#{{ obj.id }}"
-              >{{ obj.name|safe }}</a
-            >
                     </h4>
                 </div>
-        <div
+                <div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
-          id="{{ obj.id }}"
-          class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
-        >
                     <div class="panel-body list-group-item">
                         <pre>{{ obj.detail }}</pre>
                     </div>
@@ -73,5 +39,7 @@
         </div>
     </div>
 
-  <script></script>
+    <script>
+
+    </script>
 {% endblock content %}

templates/modals/cite_modal.html

@@ -1,11 +1,5 @@
-<div
+<div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
-  class="modal fade bs-modal-lg"
+     aria-hidden="true">
-  id="citemodal"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="myLargeModalLabel"
-  aria-hidden="true"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -15,33 +9,22 @@
                 <ol class="list-group list-group-numbered">
                     <li class="list-group-item">
                         Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
-            <cite
+                        <cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel
-              >Advancements in biotransformation pathway prediction:
+                            functionalities in enviPath.</cite>
-              enhancements, datasets, and novel functionalities in
+                        <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93
-              enviPath.</cite
+                            (2024)</a>
-            >
-            <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank"
-              >J Cheminform 16, 93 (2024)</a
-            >
                     </li>
                     <li class="list-group-item">
-            Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D.,
+                        Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K.
-            Kramer, S., Fenner, K.
+                        <cite>enviPath - The environmental contaminant biotransformation pathway resource</cite>
-            <cite
-              >enviPath - The environmental contaminant biotransformation
-              pathway resource</cite
-            >
                         <a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
-              Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages
+                            Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages D502-D508
-              D502-D508
                         </a>
                     </li>
                 </ol>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-          Close
-        </button>
             </div>
         </div>
     </div>

templates/modals/collections/import_legacy_package_modal.html

@@ -1,11 +1,5 @@
-<div
+<div class="modal fade" tabindex="-1" id="import_legacy_package_modal" role="dialog"
-  class="modal fade"
+     aria-labelledby="import_legacy_package_modal" aria-hidden="true">
-  tabindex="-1"
-  id="import_legacy_package_modal"
-  role="dialog"
-  aria-labelledby="import_legacy_package_modal"
-  aria-hidden="true"
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -17,54 +11,32 @@
             </div>
             <div class="modal-body">
                 <p>Create a Package based on the JSON Export of the legacy system.</p>
-        <form
+                <form id="import-legacy-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
-          id="import-legacy-package-modal-form"
+                      enctype="multipart/form-data">
-          accept-charset="UTF-8"
-          data-remote="true"
-          method="post"
-          enctype="multipart/form-data"
-        >
                     {% csrf_token %}
                     <p>
                         <label class="btn btn-primary" for="legacyJsonFile">
-              <input
+                            <input id="legacyJsonFile" name="file" type="file" style="display:none;"
-                id="legacyJsonFile"
+                                   onchange="$('#upload-legacy-file-info').html(this.files[0].name)">
-                name="file"
-                type="file"
-                style="display:none;"
-                onchange="$('#upload-legacy-file-info').html(this.files[0].name)"
-              />
                             Choose JSON File
                         </label>
                         <span class="label label-info" id="upload-legacy-file-info"></span>
-            <input
+                        <input type="hidden" value="import-legacy-package-json" name="hidden" readonly="">
-              type="hidden"
-              value="import-legacy-package-json"
-              name="hidden"
-              readonly=""
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <a
+                <a id="import-legacy-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a>
-          id="import-legacy-package-modal-form-submit"
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          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 () {
-    $("#import-legacy-package-modal-form-submit").on("click", function (e) {
+        $('#import-legacy-package-modal-form-submit').on('click', function (e) {
             e.preventDefault();
-      $("#import-legacy-package-modal-form").submit();
+            $('#import-legacy-package-modal-form').submit();
         });
     });
 </script>

templates/modals/collections/import_package_modal.html

@@ -1,11 +1,5 @@
-<div
+<div class="modal fade" tabindex="-1" id="import_package_modal" role="dialog"
-  class="modal fade"
+     aria-labelledby="import_package_modal" aria-hidden="true">
-  tabindex="-1"
-  id="import_package_modal"
-  role="dialog"
-  aria-labelledby="import_package_modal"
-  aria-hidden="true"
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -17,54 +11,32 @@
             </div>
             <div class="modal-body">
                 <p>Create a Package based on a JSON Export.</p>
-        <form
+                <form id="import-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
-          id="import-package-modal-form"
+                      enctype="multipart/form-data">
-          accept-charset="UTF-8"
-          data-remote="true"
-          method="post"
-          enctype="multipart/form-data"
-        >
                     {% csrf_token %}
                     <p>
                         <label class="btn btn-primary" for="jsonFile">
-              <input
+                            <input id="jsonFile" name="file" type="file" style="display:none;"
-                id="jsonFile"
+                                   onchange="$('#upload-file-info').html(this.files[0].name)">
-                name="file"
-                type="file"
-                style="display:none;"
-                onchange="$('#upload-file-info').html(this.files[0].name)"
-              />
                             Choose JSON File
                         </label>
                         <span class="label label-info" id="upload-file-info"></span>
-            <input
+                        <input type="hidden" value="import-package-json" name="hidden" readonly="">
-              type="hidden"
-              value="import-package-json"
-              name="hidden"
-              readonly=""
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <a
+                <a id="import-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a>
-          id="import-package-modal-form-submit"
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          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 () {
-    $("#import-package-modal-form-submit").on("click", function (e) {
+        $('#import-package-modal-form-submit').on('click', function (e) {
             e.preventDefault();
-      $("#import-package-modal-form").submit();
+            $('#import-package-modal-form').submit();
         });
     });
 </script>

templates/modals/collections/new_compound_modal.html

@@ -1,102 +1,57 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="new_compound_modal"
-  tabindex="-1"
-  aria-labelledby="new_compound_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
                 <h4 class="modal-title">Create a new Compound</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post">
-          id="new_compound_modal_form"
-          accept-charset="UTF-8"
-          action="{% url 'package compound list' meta.current_package.uuid %}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="compound-name">Name</label>
-          <input
+                    <input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/>
-            id="compound-name"
-            class="form-control"
-            name="compound-name"
-            placeholder="Name"
-          />
                     <label for="compound-description">Description</label>
-          <input
+                    <input id="compound-description" class="form-control" name="compound-description" placeholder="Description"/>
-            id="compound-description"
-            class="form-control"
-            name="compound-description"
-            placeholder="Description"
-          />
                     <label for="compound-smiles">SMILES</label>
-          <input
+                    <input type="text" class="form-control" name="compound-smiles" placeholder="SMILES" id="compound-smiles">
-            type="text"
-            class="form-control"
-            name="compound-smiles"
-            placeholder="SMILES"
-            id="compound-smiles"
-          />
                     <p></p>
                     <div>
-            <iframe
+                        <iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-              id="new_compound_ketcher"
+                                height="510"></iframe>
-              src="{% static '/js/ketcher2/ketcher.html' %}"
-              width="100%"
-              height="510"
-            ></iframe>
                     </div>
                     <p></p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="new_compound_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="new_compound_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  function newCompoundModalketcherToNewCompoundModalTextInput() {
-    $("#compound-smiles").val(this.ketcher.getSmiles());
-  }
 
-  $(function () {
+function newCompoundModalketcherToNewCompoundModalTextInput() {
-    $("#new_compound_ketcher").on("load", function () {
+    $('#compound-smiles').val(this.ketcher.getSmiles());
+}
+
+$(function() {
+
+    $('#new_compound_ketcher').on('load', function() {
         const checkKetcherReady = () => {
-        win = this.contentWindow;
+            win = this.contentWindow
-        if (win.ketcher && "editor" in win.ketcher) {
+            if (win.ketcher && 'editor' in win.ketcher) {
                 win.ketcher.editor.event.change.handlers.push({
                     once: false,
                     priority: 0,
                     f: newCompoundModalketcherToNewCompoundModalTextInput,
-            ketcher: win.ketcher,
+                    ketcher: win.ketcher
                 });
             } else {
                 setTimeout(checkKetcherReady, 100);
@@ -104,16 +59,20 @@
         };
 
         checkKetcherReady();
-    });
+    })
 
-    $(function () {
+    $(function() {
-      $("#new_compound_modal_form_submit").on("click", function (e) {
+        $('#new_compound_modal_form_submit').on('click', function(e) {
             e.preventDefault();
-        $(this).prop("disabled", true);
+            $(this).prop("disabled",true);
+
+
 
             // submit form
-        $("#new_compound_modal_form").submit();
+            $('#new_compound_modal_form').submit();
-      });
         });
     });
+
+});
+
 </script>

templates/modals/collections/new_group_modal.html

@@ -1,11 +1,5 @@
-<div
+<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
-  class="modal fade"
+     aria-hidden="true">
-  tabindex="-1"
-  id="new_group_modal"
-  role="dialog"
-  aria-labelledby="new_group_modal"
-  aria-hidden="true"
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -16,44 +10,25 @@
                 <h4 class="modal-title">New Group</h4>
             </div>
             <div class="modal-body">
-        <p>
+                <p>Create new Group. You can assign users to the group once
-          Create new Group. You can assign users to the group once it is
+                    it is created. Description can be changed after creation.</p>
-          created. Description can be changed after creation.
+                <form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
-        </p>
-        <form
-          id="new_group_modal_form"
-          accept-charset="UTF-8"
-          action="{{ SERVER_BASE }}/group"
                       data-remote="true"
-          method="post"
+                      method="post">
-        >
                     {% csrf_token %}
                     <p>
                         <label for="name">Name</label>
-            <input
+                        <input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
-              id="name"
-              type="text"
-              name="group-name"
-              class="form-control"
-              placeholder="Name"
-            />
                     </p>
                     <p>
                         <label for="description">Description</label>
-            <input
+                        <input id="description" type="text" class="form-control" placeholder="Description..."
-              id="description"
+                               name="group-description"/>
-              type="text"
-              class="form-control"
-              placeholder="Description..."
-              name="group-description"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <a id="new_group_modal_form_submit" class="btn btn-primary" href="#"
+                <a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
-          >Submit</a
-        >
                 <button type="button" class="btn btn-default" data-dismiss="modal">
                     Cancel
                 </button>
@@ -62,9 +37,9 @@
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#new_group_modal_form_submit").on("click", function () {
+    $('#new_group_modal_form_submit').on('click', function() {
-      $("#new_group_modal_form").submit();
+        $('#new_group_modal_form').submit();
-    });
     });
+});
 </script>

templates/modals/collections/new_model_modal.html

@@ -1,11 +1,6 @@
-<div
+
-  class="modal fade"
+<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
-  tabindex="-1"
+     aria-hidden="true">
-  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">
@@ -16,52 +11,29 @@
                 <h4 class="modal-title">New Model</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="new_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
-          id="new_model_form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ meta.current_package.url }}/model"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <div class="jumbotron">
+                    <div class="jumbotron">Create a new Model to
-            Create a new Model to limit the number of degradation products in
+                        limit the number of degradation products in the
-            the prediction. You just need to set a name and the packages you
+                        prediction. You just need to set a name and the packages
-            want the object to be based on. There are multiple types of models
+                        you want the object to be based on. There are multiple types of models available.
-            available. For additional information have a look at our
+                        For additional information have a look at our
-            <a
+                        <a target="_blank" href="https://wiki.envipath.org/index.php/relative-reasoning" role="button">wiki
-              target="_blank"
+                            &gt;&gt;</a>
-              href="https://wiki.envipath.org/index.php/relative-reasoning"
-              role="button"
-              >wiki &gt;&gt;</a
-            >
                     </div>
                     <!-- Name -->
                     <label for="model-name">Name</label>
-          <input
+                    <input id="model-name" name="model-name" class="form-control" placeholder="Name"/>
-            id="model-name"
-            name="model-name"
-            class="form-control"
-            placeholder="Name"
-          />
 
                     <!-- Description -->
                     <label for="model-description">Description</label>
-          <input
+                    <input id="model-description" name="model-description" class="form-control"
-            id="model-description"
+                           placeholder="Description"/>
-            name="model-description"
-            class="form-control"
-            placeholder="Description"
-          />
 
                     <!-- Model Type -->
                     <label for="model-type">Model Type</label>
-          <select
+                    <select id="model-type" name="model-type" class="form-control" data-width='100%'>
-            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>
@@ -71,14 +43,8 @@
                     <!-- Rule Packages -->
                     <div id="rule-packages" class="ep-model-param mlrr rbrr">
                         <label for="model-rule-packages">Rule Packages</label>
-            <select
+                        <select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
-              id="model-rule-packages"
+                                class="form-control" multiple data-width='100%'>
-              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 %}
@@ -98,14 +64,8 @@
                     <!-- Data Packages -->
                     <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
                         <label for="model-data-packages">Data Packages</label>
-            <select
+                        <select id="model-data-packages" name="model-data-packages" data-actions-box='true'
-              id="model-data-packages"
+                                class="form-control" multiple data-width='100%'>
-              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 %}
@@ -125,19 +85,11 @@
                     <!-- Fingerprinter -->
                     <div id="fingerprinter" class="ep-model-param mlrr">
                         <label for="model-fingerprinter">Fingerprinter</label>
-            <select
+                        <select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
-              id="model-fingerprinter"
+                                class="form-control" multiple data-width='100%'>
-              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>
+                                <option disabled selected>Select Additional Fingerprinter / Descriptor</option>
-                  Select Additional Fingerprinter / Descriptor
-                </option>
                                 {% for k, v in additional_descriptors.items %}
                                     <option value="{{ v }}">{{ k }}</option>
                                 {% endfor %}
@@ -148,16 +100,8 @@
                     <!-- Threshold -->
                     <div id="threshold" class="ep-model-param mlrr enviformer">
                         <label for="model-threshold">Threshold</label>
-            <input
+                        <input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
-              type="number"
+                               name="model-threshold" class="form-control">
-              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">
@@ -165,64 +109,33 @@
                             <!-- Build AD? -->
                             <div class="checkbox">
                                 <label>
-                  <input
+                                    <input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
-                    type="checkbox"
+                                    Applicability Domain?
-                    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
+                                <input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
-                  id="num-neighbors"
-                  name="num-neighbors"
-                  type="number"
-                  class="form-control"
                                        value="5"
-                  step="1"
+                                       step="1" min="0" max="10">
-                  min="0"
-                  max="10"
-                />
                                 <!-- Local Compatibility -->
-                <label for="local-compatibility-threshold"
+                                <label for="local-compatibility-threshold">Local Compatibility Threshold</label>
-                  >Local Compatibility Threshold</label
+                                <input id="local-compatibility-threshold" name="local-compatibility-threshold"
-                >
-                <input
-                  id="local-compatibility-threshold"
-                  name="local-compatibility-threshold"
                                        type="number"
-                  class="form-control"
+                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
-                  value="0.5"
-                  step="0.01"
-                  min="0"
-                  max="1"
-                />
                                 <!-- Reliability -->
                                 <label for="reliability-threshold">Reliability Threshold</label>
-                <input
+                                <input id="reliability-threshold" name="reliability-threshold" type="number"
-                  id="reliability-threshold"
+                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
-                  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="#"
+                <a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
-          >Submit</a
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        >
-        <button type="button" class="btn btn-default" data-dismiss="modal">
-          Cancel
-        </button>
             </div>
         </div>
     </div>
@@ -231,40 +144,45 @@
 <script>
     $(function () {
         // Built in Model Types
-    var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
+        var nativeModelTypes = [
+            "mlrr",
+            "rbrr",
+            "enviformer",
+        ]
 
         // Initially hide all "specific" forms
         $(".ep-model-param").each(function () {
             $(this).hide();
         });
 
-    $("#model-type").selectpicker();
+        $('#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();
+                $('#ad-params').show();
             } else {
-        $("#ad-params").hide();
+                $('#ad-params').hide();
             }
         });
 
         // On change hide all and show only selected
         $("#model-type").change(function () {
-      $(".ep-model-param").hide();
+            $('.ep-model-param').hide();
-      var modelType = $("#model-type").val();
+            var modelType = $('#model-type').val();
             if (nativeModelTypes.indexOf(modelType) !== -1) {
-        $("." + modelType).show();
+                $('.' + modelType).show();
             } else {
                 // do nothing
             }
         });
 
-    $("#new_model_modal_form_submit").on("click", function (e) {
+        $('#new_model_modal_form_submit').on('click', function (e) {
             e.preventDefault();
-      $("#new_model_form").submit();
+            $('#new_model_form').submit();
         });
+
     });
 </script>

templates/modals/collections/new_package_modal.html

@@ -1,15 +1,15 @@
-<div
+<div class="modal fade"
-  class="modal fade"
      tabindex="-1"
      id="new_package_modal"
      role="dialog"
      aria-labelledby="new_package_modal"
-  aria-hidden="true"
+     aria-hidden="true">
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal">
                     <span aria-hidden="true">&times;</span>
                     <span class="sr-only">Close</span>
                 </button>
@@ -17,52 +17,46 @@
             </div>
             <div class="modal-body">
                 <p>Create new package. Description can be changed later.</p>
-        <form
+                <form id="new_package_modal_form"
-          id="new_package_modal_form"
                       accept-charset="UTF-8"
                       action=""
                       data-remote="true"
-          method="post"
+                      method="post">
-        >
                     {% csrf_token %}
                     <p>
                         <label for="name">Name</label>
-            <input
+                        <input id="name" class="form-control"
-              id="name"
-              class="form-control"
                                name="package-name"
-              placeholder="Name"
+                               placeholder="Name"/>
-            />
                     </p>
                     <p>
                         <label for="description">Description</label>
-            <input
+                        <input id="description"
-              id="description"
                                type="text"
                                rows="3"
                                class="form-control"
                                placeholder="Description..."
-              name="package-description"
+                               name="package-description"/>
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <a id="new_package_modal_form_submit" class="btn btn-primary" href="#"
+                <a id="new_package_modal_form_submit"
-          >Submit</a
+                   class="btn btn-primary"
-        >
+                   href="#">Submit</a>
-        <button type="button" class="btn btn-default" data-dismiss="modal">
+                <button type="button"
-          Cancel
+                        class="btn btn-default"
+                        data-dismiss="modal">Cancel
                 </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#new_package_modal_form_submit").on("click", function (e) {
+    $('#new_package_modal_form_submit').on('click', function (e) {
         e.preventDefault();
-      $("#new_package_modal_form").submit();
+        $('#new_package_modal_form').submit();
-    });
     });
+});
 </script>

templates/modals/collections/new_pathway_modal.html

@@ -1,57 +1,40 @@
+
 {% load static %}
-<div
+<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
-  class="modal fade"
+     aria-hidden="true" style="overflow-y: auto;">
-  tabindex="-1"
-  id="new_pathway_modal"
-  role="dialog"
-  aria-labelledby="new_pathway_modal"
-  aria-hidden="true"
-  style="overflow-y: auto;"
->
     <!-- FIXME: make width dynamic-->
     <div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">
-          <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span>
-          <span class="sr-only">Close</span>
                 </button>
                 <h4 class="js-title-step"></h4>
             </div>
             <div class="modal-body hide" data-step="1" data-title="New Pathway">
-        <div class="jumbotron">
+                <div class="jumbotron">Create a new pathway by entering
-          Create a new pathway by entering the root compound and a name. Then
+                    the root compound and a name. Then select if you want to
-          select if you want to use the prediction engine to generate a
+                    use the prediction engine to generate a predicted pathway or
-          predicted pathway or create an empty pathway that you fill in by
+                    create an empty pathway that you fill in by yourself. If
-          yourself. If you choose to predict a pathway, you can modify the
+                    you choose to predict a pathway, you can modify the
-          settings for the prediction, or use the default settings and just
+                    settings for the prediction, or use the default settings
-          click Submit.
+                    and just click Submit.
                 </div>
                 <div class="modal-body">
                     {% if current_user.name == 'anonymous' %}
                     <div class="alert alert-warning">
-              You are currently logged in as Anonymous. Please note: Pathways
+                        You are currently logged in as Anonymous. Please note:
-              entered or predicted as anonymous user will be deleted after 30
+                        Pathways entered or predicted as anonymous user will be deleted after 30 days.
-              days. Please log in to save your results.
+                        Please log in to save your results.
                     </div>
                     {% endif %}
                 </div>
                 <div class="row">
                     <div class="col-md-6">
                         <label for="name">Name</label>
-            <input
+                        <input id="name" class="form-control" name="name" placeholder="Name"/>
-              id="name"
-              class="form-control"
-              name="name"
-              placeholder="Name"
-            />
                         <label for="description">Description</label>
-            <input
+                        <input id="description" class="form-control" name="description" placeholder="no description"/>
-              id="description"
-              class="form-control"
-              name="description"
-              placeholder="no description"
-            />
                     </div>
 
                     <div class="col-md-6">
@@ -59,33 +42,17 @@
                         <div class="radio" id="predict">
                             <p>
                                 <label>
-                  <input
+                                    <input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
-                    type="radio"
-                    name="predict"
-                    id="radioPredict"
-                    value="predict"
-                    checked
-                  />Predict pathway
                                 </label>
                             </p>
                             <p>
                                 <label>
-                  <input
+                                    <input type="radio" name="predict" id="radioIncremental"value="incremental"/>Incremental prediction
-                    type="radio"
-                    name="predict"
-                    id="radioIncremental"
-                    value="incremental"
-                  />Incremental prediction
                                 </label>
                             </p>
                             <p>
                                 <label>
-                  <input
+                                    <input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
-                    type="radio"
-                    name="predict"
-                    id="radioBuild"
-                    value="build"
-                  />Build pathway
                                 </label>
                             </p>
                         </div>
@@ -94,18 +61,13 @@
                 <label for="smilesinput">SMILES</label>
                 <table style="width: 100%">
                     <colgroup>
-            <col span="1" style="width: 90%;" />
+                        <col span="1" style="width: 90%;">
-            <col span="1" style="width: 10%;" />
+                        <col span="1" style="width: 10%;">
                     </colgroup>
                     <tr>
                         <td>
-              <input
+                            <input id="smilesinput" class="form-control" name="smilesinput" placeholder="C1CCCCC1"
-                id="smilesinput"
+                                   autocapitalize="none"/>
-                class="form-control"
-                name="smilesinput"
-                placeholder="C1CCCCC1"
-                autocapitalize="none"
-              />
                         </td>
                         <td>
                             <button type="button" class="btn btn-default" id="render-button">
@@ -116,57 +78,33 @@
                 </table>
                 <p id="ketcher_container"></p>
                 <div>
-          <iframe
+                    <iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
-            id="ifKetcher"
+                            height="510"></iframe>
-            src="{% static '/js/ketcher/ketcher.html' %}"
-            width="850"
-            height="510"
-          ></iframe>
                 </div>
             </div>
-      <div
+            <div class="modal-body hide" data-step="2" data-title="New Pathway - Advanced Settings">
-        class="modal-body hide"
+                <div class="jumbotron">Choose if you want to use an existing
-        data-step="2"
+                    setting, or create a new one for this pathway
-        data-title="New Pathway - Advanced Settings"
+                    prediction. Then click Submit to use the specified setting,
-      >
+                    or click next to set the parameters.
-        <div class="jumbotron">
-          Choose if you want to use an existing setting, or create a new one for
-          this pathway prediction. Then click Submit to use the specified
-          setting, or click next to set the parameters.
                 </div>
                 <div id="settings">
                     <div class="radio" id="settingRadio">
                         <p>
                             <label>
-                <input
+                                <input type="radio" name="existing" id="radioDefault" value="exisiting" checked/>
-                  type="radio"
-                  name="existing"
-                  id="radioDefault"
-                  value="exisiting"
-                  checked
-                />
                                 Use Default
                             </label>
                         </p>
                         <p>
                             <label>
-                <input
+                                <input type="radio" name="existing" id="radioExists" value="exisiting"/>
-                  type="radio"
-                  name="existing"
-                  id="radioExists"
-                  value="exisiting"
-                />
                                 Select Existing
                             </label>
                         </p>
                         <p>
                             <label>
-                <input
+                                <input type="radio" name="existing" id="radioNew" value="temporary"/>
-                  type="radio"
-                  name="existing"
-                  id="radioNew"
-                  value="temporary"
-                />
                                 Create New
                             </label>
                         </p>
@@ -184,25 +122,12 @@
             {% include "templates/modals/collections/new_setting_modal_body.html" %}
             {% endwith %}
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel"
-          type="button"
+                        onclick="reset()" data-dismiss="modal"></button>
-          class="btn btn-default js-btn-step pull-left"
+                <button type="button" class="btn btn-default js-btn-step" data-orientation="previous"
-          data-orientation="cancel"
+                        id="backbutton"></button>
-          onclick="reset()"
+                <button type="button" class="btn btn-default js-btn-step" data-orientation="next"
-          data-dismiss="modal"
+                        id="nextbutton"></button>
-        ></button>
-        <button
-          type="button"
-          class="btn btn-default js-btn-step"
-          data-orientation="previous"
-          id="backbutton"
-        ></button>
-        <button
-          type="button"
-          class="btn btn-default js-btn-step"
-          data-orientation="next"
-          id="nextbutton"
-        ></button>
                 <a id="modal-form-submit" class="btn btn-primary" href="#">Submit</a>
             </div>
         </div>
@@ -210,87 +135,87 @@
 </div>
 
 <script>
-  s = new Setting(
+s = new Setting(
-    "settingName",
+    'settingName',
-    "package_multi_select",
+    'package_multi_select',
-    "modelSelect",
+    'modelSelect',
-    "cutoff",
+    'cutoff',
-    "evalType",
+    'evalType',
-    "availableTS",
+    'availableTS',
-    "forms",
+    'forms',
-    "truncatorTable",
+    'truncatorTable',
-    "summaryTable",
+    'summaryTable',
-  );
+);
 
-  $(function () {
+$(function() {
     // hide all forms
-    $("#forms").children().hide();
+    $('#forms').children().hide()
 
-    $("#render-button").on("click", function () {
+    $("#render-button").on("click", function() {
-      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
+        syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
     });
 
     // If theres a change in the in '#smilesinput' sync the value to ketcher
-    $("#smilesinput").on("input", function () {
+    $('#smilesinput').on('input', function() {
-      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
+        syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
     });
 
     // If theres an update in ketcher sync it to textinput
-    setInterval(function () {
+    setInterval(function() {
-      syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
+        syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
     }, 250);
 
-    $("#smilesinput").on("blur", function () {
+    $("#smilesinput").on("blur", function() {
-      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
+        syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
     });
 
-    $("#smilesinput").on("keypress", function (event) {
+    $("#smilesinput").on("keypress", function(event) {
         if (event.keyCode == 13) {
-        syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
+            syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
         }
     });
 
     // Show forms depending on the selected TS
-    $("#availableTS").on("change", function (e) {
+    $('#availableTS').on('change', function(e) {
         e.preventDefault();
 
         var type = $(this).val();
         // hide current content
-      $("#forms").children().hide();
+        $('#forms').children().hide()
 
-      if (type === "") {
+        if(type === '') {
             return;
         }
 
-      $("#" + type + "_form").show();
+        $('#' + type + '_form').show()
     });
 
-    $("#modelSelect").on("change", function () {
+    $("#modelSelect").on("change", function() {
         setCutoff = function (thresh) {
             $("#cutoff").val(thresh);
-      };
+        }
 
         var modelUri = $("#modelSelect :selected").val();
         fillPRCurve(modelUri, setCutoff);
     });
 
     // Add a TS to the setting
-    $("#add-ts-button").on("click", function (e) {
+    $('#add-ts-button').on('click', function(e) {
         e.preventDefault();
         s.addTruncator();
     });
 
-    $("input[type=radio][name=predict]").change(function () {
+    $('input[type=radio][name=predict]').change(function() {
-      if (this.id == "radioBuild") {
+        if (this.id == 'radioBuild') {
           $("#nextbutton").prop("disabled", true);
         } else {
           $("#nextbutton").prop("disabled", false);
         }
     });
 
-    $("input[type=radio][name=existing]").change(function () {
+    $('input[type=radio][name=existing]').change(function() {
-      if (this.id == "radioDefault" || this.id == "radioExists") {
+        if (this.id == 'radioDefault' || this.id == 'radioExists') {
-        if (this.id == "radioDefault") {
+          if(this.id == 'radioDefault') {
             $("#settingSelect").prop("disabled", true);
           } else {
             $("#settingSelect").prop("disabled", false);
@@ -303,74 +228,75 @@
         }
     });
 
-    var pwStep1 = function () {
+    var pwStep1 = function() {
         console.log("pw step 1");
         // Make "Next" to "Advanced"
-      $("#nextbutton").val("Advanced");
+        $('#nextbutton').val("Advanced");
-    };
+    }
 
-    var pwStep2 = function () {
+    var pwStep2 = function() {
         console.log("pw step 2");
         // Make "Advanced" to "Next"
-      $("#nextbutton").val("Next");
+        $('#nextbutton').val("Next");
         // As "Use default is preselected" disable "Next" button
-      $("#nextbutton").prop("disabled", true);
+        $("#nextbutton").prop("disabled",true);
         // Disable setting dropdown as long as the correspndonding radio isnt checked
-      $("#settingSelect").prop("disabled", true);
+        $("#settingSelect").prop("disabled",true);
         // Show submit button
         $("#modal-form-submit").show();
-    };
+    }
 
-    var settingStep1 = function () {
+    var settingStep1 = function (){
         // First step sets name and packages
         s.extractName();
         s.extractSelectedPackages();
-    };
+    }
 
-    var settingStep2 = function () {
+    var settingStep2 = function (){
         // Seconds step gathers relative reasoning params
         s.extractRelativeReasoning();
         s.extractCutoff();
         s.extractEvaluationType();
-    };
+    }
 
-    var settingStep3 = function () {
+    var settingStep3 = function() {
         s.updateTable();
         s.updateSummaryTable();
         // hide duplicate submit...
         $("#nextbutton").hide();
-    };
+    }
 
-    var postPathway = function () {
+    var postPathway = function(){
         console.log("Complete!");
         console.log(s.tsParams);
         console.log("Getting SMILES");
-    };
+    }
 
     function dummy() {
         console.log("dummy");
     }
 
-    $("#new_pathway_modal").modalSteps({
+    $('#new_pathway_modal').modalSteps({
-      btnCancelHtml: "Cancel",
+      btnCancelHtml: 'Cancel',
-      btnPreviousHtml: "Back",
+      btnPreviousHtml: 'Back',
-      btnNextHtml: "Next",
+      btnNextHtml: 'Next',
-      btnLastStepHtml: "Submit",
+      btnLastStepHtml: 'Submit',
       disableNextButton: false,
       completeCallback: postPathway,
       callbacks: {
-        1: pwStep1,
+        '1': pwStep1,
-        2: pwStep2,
+        '2' : pwStep2,
-        3: dummy,
+        '3' : dummy,
-        4: settingStep1,
+        '4' : settingStep1,
-        5: settingStep2,
+        '5' : settingStep2,
-        6: settingStep3,
+        '6' : settingStep3,
-      },
+      }
     });
 
-    $("#modal-form-submit").on("click", function () {
+   $('#modal-form-submit').on('click', function() {
       e.preventDefault();
       postPathway();
    });
-  });
+});
+
 </script>

templates/modals/collections/new_prediction_setting_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 
 <div id="new_prediction_setting_modal" class="modal" tabindex="-1">
@@ -5,88 +6,38 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Create a Prediction Setting</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        <p>
+                <p>To create a Prediction Setting fill the form below and click "Create"</p>
-          To create a Prediction Setting fill the form below and click "Create"
+                <form id="new-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true"
-        </p>
+                      method="post">
-        <form
-          id="new-prediction-setting-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
 
                     <label for="prediction-setting-name">Name</label>
-          <input
+                    <input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/>
-            id="prediction-setting-name"
-            name="prediction-setting-name"
-            class="form-control"
-            placeholder="Name"
-          />
                     <label for="prediction-setting-description">Description</label>
-          <input
+                    <input id="prediction-setting-description" name="prediction-setting-description" class="form-control"
-            id="prediction-setting-description"
+                           placeholder="Description"/>
-            name="prediction-setting-description"
-            class="form-control"
-            placeholder="Description"
-          />
 
                     <label for="prediction-setting-max-nodes">Max #Nodes</label>
-          <input
+                    <input id="prediction-setting-max-nodes" type="number" class="form-control" name="prediction-setting-max-nodes" value="30" min="1" max="50" step="1">
-            id="prediction-setting-max-nodes"
-            type="number"
-            class="form-control"
-            name="prediction-setting-max-nodes"
-            value="30"
-            min="1"
-            max="50"
-            step="1"
-          />
                     <label for="prediction-setting-max-depth">Max Depth</label>
-          <input
+                    <input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1">
-            id="prediction-setting-max-depth"
-            type="number"
-            class="form-control"
-            name="prediction-setting-max-depth"
-            value="5"
-            min="1"
-            max="8"
-            step="1"
-          />
 
                     <label for="tp-generation-method">TP Generation Method</label>
-          <select
+                    <select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'>
-            id="tp-generation-method"
-            name="tp-generation-method"
-            class="form-control"
-            data-width="100%"
-          >
                         <option disabled selected>Select how TPs are generated</option>
                         <option value="rule-based-prediction-setting">Rule Based</option>
                         <option value="model-based-prediction-setting">Model Based</option>
                     </select>
                     <div id="rule-based-prediction-setting-specific-form">
                         <!-- Rule Packages -->
-            <label>Rule Packages</label><br />
+                        <label>Rule Packages</label><br>
-            <select
+                        <select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages"
-              id="rule-based-prediction-setting-packages"
+                                data-actions-box='true' class="form-control" multiple data-width='100%'>
-              name="rule-based-prediction-setting-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 %}
@@ -103,83 +54,56 @@
                         </select>
                     </div>
                     <div id="model-based-prediction-setting-specific-form">
-            <label>Select Model</label><br />
+                        <label>Select Model</label><br>
-            <select
+                        <select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
-              id="model-based-prediction-setting-model"
-              name="model-based-prediction-setting-model"
-              class="form-control"
-              data-width="100%"
-            >
                         <option disabled selected>Select the model</option>
                         {% for m in models %}
                         <option value="{{ m.url }}">{{ m.name|safe }}</option>
                         {% endfor %}
                         </select>
-            <label for="model-based-prediction-setting-threshold"
+                        <label for="model-based-prediction-setting-threshold">Threshold</label>
-              >Threshold</label
+                        <input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/>
-            >
-            <input
-              id="model-based-prediction-setting-threshold"
-              name="model-based-prediction-setting-threshold"
-              class="form-control"
-              placeholder="0.25"
-              type="number"
-            />
                     </div>
 
-          <input
+                    <input class="form-check-input" type="checkbox" value="on" id="prediction-setting-new-default" name="prediction-setting-new-default">
-            class="form-check-input"
+                    <label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label>
-            type="checkbox"
+
-            value="on"
-            id="prediction-setting-new-default"
-            name="prediction-setting-new-default"
-          />
-          <label class="form-check-label" for="prediction-setting-new-default"
-            >Set this setting as new default</label
-          >
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="new-prediction-setting-modal-submit">Create</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="new-prediction-setting-modal-submit"
-        >
-          Create
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+    $(function() {
+
         // Initially hide all "specific" forms
-    $("div[id$='-specific-form']").each(function () {
+        $("div[id$='-specific-form']").each( function() {
             $(this).hide();
         });
 
         $("#rule-based-prediction-setting-packages").selectpicker();
 
         // On change hide all and show only selected
-    $("#tp-generation-method").change(function () {
+        $("#tp-generation-method").change(function() {
-      $("div[id$='-specific-form']").each(function () {
+            $("div[id$='-specific-form']").each( function() {
                 $(this).hide();
             });
-      val = $("option:selected", this).val();
+            val = $('option:selected', this).val();
             $("#" + val + "-specific-form").show();
         });
 
-    $("#new-prediction-setting-modal-submit").click(function (e) {
+        $('#new-prediction-setting-modal-submit').click(function(e){
             e.preventDefault();
             // $('#new-prediction-setting-modal-form').submit();
 
-      const formData = $("#new-prediction-setting-modal-form").serialize();
+            const formData = $('#new-prediction-setting-modal-form').serialize();
-      $.post("/setting", formData, function (response) {
+            $.post('/setting', formData, function(response) {
                 location.reload();
             });
         });
-  });
+    })
 </script>

templates/modals/collections/new_reaction_modal.html

@@ -1,91 +1,50 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="new_reaction_modal" tabindex="-1" aria-labelledby="new_reaction_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="new_reaction_modal"
-  tabindex="-1"
-  aria-labelledby="new_reaction_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
                 <h4 class="modal-title">Create a new Reaction</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post">
-          id="new_reaction_modal_form"
-          accept-charset="UTF-8"
-          action="{% url 'package reaction list' meta.current_package.uuid %}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="reaction-name">Name</label>
-          <input
+                    <input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/>
-            id="reaction-name"
-            class="form-control"
-            name="reaction-name"
-            placeholder="Name"
-          />
                     <label for="reaction-description">Description</label>
-          <input
+                    <input id="reaction-description" class="form-control" name="reaction-description" placeholder="Description"/>
-            id="reaction-description"
-            class="form-control"
-            name="reaction-description"
-            placeholder="Description"
-          />
                     <p></p>
                     <div>
-            <iframe
+                        <iframe id="new_reaction_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-              id="new_reaction_ketcher"
+                                height="510"></iframe>
-              src="{% static '/js/ketcher2/ketcher.html' %}"
-              width="100%"
-              height="510"
-            ></iframe>
                     </div>
-          <input type="hidden" name="reaction-smirks" id="reaction-smirks" />
+                    <input type="hidden" name="reaction-smirks" id="reaction-smirks">
                     <p></p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="new_reaction_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="new_reaction_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#new_reaction_modal_form_submit").on("click", function (e) {
+    $('#new_reaction_modal_form_submit').on('click', function(e) {
         e.preventDefault();
-      $(this).prop("disabled", true);
+        $(this).prop("disabled",true);
 
-      k = getKetcher("new_reaction_ketcher");
+        k = getKetcher('new_reaction_ketcher');
-      $("#reaction-smirks").val(k.getSmiles());
+        $('#reaction-smirks').val(k.getSmiles());
 
         // submit form
-      $("#new_reaction_modal_form").submit();
+        $('#new_reaction_modal_form').submit();
-    });
     });
+});
 </script>

templates/modals/collections/new_rule_modal.html

@@ -1,102 +1,54 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="new_rule_modal" tabindex="-1" aria-labelledby="new_rule_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="new_rule_modal"
-  tabindex="-1"
-  aria-labelledby="new_rule_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
                 <h4 class="modal-title">Create a new Rule</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="new_rule_modal_form" accept-charset="UTF-8" action="{% url 'package rule list' meta.current_package.uuid %}" data-remote="true" method="post">
-          id="new_rule_modal_form"
-          accept-charset="UTF-8"
-          action="{% url 'package rule list' meta.current_package.uuid %}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="rule-name">Name</label>
-          <input
+                    <input id="rule-name" class="form-control" name="rule-name" placeholder="Name"/>
-            id="rule-name"
-            class="form-control"
-            name="rule-name"
-            placeholder="Name"
-          />
                     <label for="rule-description">Description</label>
-          <input
+                    <input id="rule-description" class="form-control" name="rule-description" placeholder="Description"/>
-            id="rule-description"
-            class="form-control"
-            name="rule-description"
-            placeholder="Description"
-          />
                     <label for="rule-smirks">SMIRKS</label>
-          <input
+                    <input id="rule-smirks" class="form-control" name="rule-smirks" placeholder="SMIRKS"/>
-            id="rule-smirks"
-            class="form-control"
-            name="rule-smirks"
-            placeholder="SMIRKS"
-          />
                     <p></p>
                     <div id="rule-smirks-viz"></div>
-          <input
+                    <input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule">
-            type="hidden"
-            name="rule-type"
-            id="rule-type"
-            value="SimpleAmbitRule"
-          />
                     <p></p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="new_rule_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="new_rule_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#rule-smirks").on("input", function (e) {
-      $("#rule-smirks-viz").empty();
 
-      smirks = $("#rule-smirks").val();
+    $('#rule-smirks').on('input', function(e) {
+        $('#rule-smirks-viz').empty()
+
+        smirks = $('#rule-smirks').val()
 
         const img = new Image();
-      img.src =
+        img.src = "{% url 'depict' %}?is_query_smirks=true&smirks=" + encodeURIComponent(smirks);
-        "{% url 'depict' %}?is_query_smirks=true&smirks=" +
+        img.style.width = '100%';
-        encodeURIComponent(smirks);
+        img.style.height = '100%';
-      img.style.width = "100%";
+        img.style.objectFit = 'cover';
-      img.style.height = "100%";
-      img.style.objectFit = "cover";
 
         img.onload = function () {
-        $("#rule-smirks-viz").append(img);
+            $('#rule-smirks-viz').append(img);
         };
 
         img.onerror = function () {
@@ -105,16 +57,16 @@
                     <h4 class="alert-heading">Could not render SMIRKS!</h4>
                     <p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a>
                     </p>
-                </div>`;
+                </div>`
-        $("#rule-smirks-viz").append(error_tpl);
+            $('#rule-smirks-viz').append(error_tpl);
         };
     });
 
-    $("#new_rule_modal_form_submit").on("click", function (e) {
+    $('#new_rule_modal_form_submit').on('click', function(e) {
         e.preventDefault();
-      $(this).prop("disabled", true);
+        $(this).prop("disabled",true);
         // submit form
-      $("#new_rule_modal_form").submit();
+        $('#new_rule_modal_form').submit();
-    });
     });
+});
 </script>

templates/modals/collections/new_scenario_modal.html

@@ -1,11 +1,5 @@
-<div
+<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
-  class="modal fade"
+     aria-hidden="true">
-  tabindex="-1"
-  id="new_scenario_modal"
-  role="dialog"
-  aria-labelledby="new_scenario_modal"
-  aria-hidden="true"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -16,84 +10,39 @@
                 <h4 class="modal-title">New Scenario</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
-          id="new_scenario_form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ meta.current_package.url }}/scenario"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <div class="jumbotron">
+                    <div class="jumbotron">Please enter name, description, and date of scenario. Date should be
-            Please enter name, description, and date of scenario. Date should be
+                        associated to the data, not the current date. For example, this could reflect the publishing
-            associated to the data, not the current date. For example, this
+                        date of a study. You can leave all fields but the name empty and fill them in later.
-            could reflect the publishing date of a study. You can leave all
+                        <a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
-            fields but the name empty and fill them in later.
+                            &gt;&gt;</a>
-            <a
-              target="_blank"
-              href="https://wiki.envipath.org/index.php/scenario"
-              role="button"
-              >wiki &gt;&gt;</a
-            >
                     </div>
                     <label for="scenario-name">Name</label>
-          <input
+                    <input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
-            id="scenario-name"
-            name="scenario-name"
-            class="form-control"
-            placeholder="Name"
-          />
                     <label for="scenario-description">Description</label>
-          <input
+                    <input id="scenario-description" name="scenario-description" class="form-control"
-            id="scenario-description"
+                           placeholder="Description"/>
-            name="scenario-description"
-            class="form-control"
-            placeholder="Description"
-          />
                     <label id="dateField" for="dateYear">Date</label>
                     <table>
                         <tr>
                             <th>
-                <input
+                                <input type="number" id="dateYear" name="scenario-date-year" class="form-control"
-                  type="number"
+                                       placeholder="YYYY" max="{% now "Y" %}">
-                  id="dateYear"
-                  name="scenario-date-year"
-                  class="form-control"
-                  placeholder="YYYY"
-                  max="{% now "Y" %}"
-                />
                             </th>
                             <th>
-                <input
+                                <input type="number" id="dateMonth" name="scenario-date-month" min="1" max="12"
-                  type="number"
+                                       class="form-control" placeholder="MM" >
-                  id="dateMonth"
-                  name="scenario-date-month"
-                  min="1"
-                  max="12"
-                  class="form-control"
-                  placeholder="MM"
-                />
                             </th>
                             <th>
-                <input
+                                <input type="number" id="dateDay" name="scenario-date-day" min="1" max="31" class="form-control"
-                  type="number"
+                                       placeholder="DD">
-                  id="dateDay"
-                  name="scenario-date-day"
-                  min="1"
-                  max="31"
-                  class="form-control"
-                  placeholder="DD"
-                />
                             </th>
                         </tr>
                     </table>
                     <label for="scenario-type">Scenario Type</label>
-          <select
+                    <select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
-            id="scenario-type"
-            name="scenario-type"
-            class="form-control"
-            data-width="100%"
-          >
                         <option value="empty" selected>Empty Scenario</option>
                         {% for k, v in scenario_types.items %}
                             <option value="{{ v.name }}">{{ k }}</option>
@@ -107,15 +56,12 @@
                             {% endfor %}
                         </div>
                     {% endfor %}
+
                 </form>
             </div>
             <div class="modal-footer">
-        <a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#"
+                <a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
-          >Submit</a
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        >
-        <button type="button" class="btn btn-default" data-dismiss="modal">
-          Cancel
-        </button>
             </div>
         </div>
     </div>
@@ -133,21 +79,24 @@
             $("div[id$='-specific-inputs']").each(function () {
                 $(this).hide();
             });
-      val = $("option:selected", this).val();
+            val = $('option:selected', this).val();
             $("#" + val + "-specific-inputs").show();
         });
 
-    $("#new_scenario_modal_form_submit").on("click", function (e) {
+        $('#new_scenario_modal_form_submit').on('click', function (e) {
             e.preventDefault();
-      $("#new_scenario_form").submit();
+            $('#new_scenario_form').submit();
         });
 
         var dateYear = document.getElementById("dateYear");
         dateYear.addEventListener("change", () => {
             console.log("Final value after editing:", dateYear.value);
             if (dateYear.value.length < 4) {
-        dateYear.value = new Date().getFullYear();
+                dateYear.value = {% now "Y" %};
             }
         });
+
     });
+
 </script>
+

templates/modals/objects/add_additional_information_modal.html

@@ -4,89 +4,58 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h3 class="modal-title">Add Additional Information</h3>
             </div>
             <div class="modal-body">
-        <select
+                <select id="select-additional-information-type" data-actions-box='true' class="form-control" data-width='100%'>
-          id="select-additional-information-type"
-          data-actions-box="true"
-          class="form-control"
-          data-width="100%"
-        >
                     <option selected disabled>Select the type to add</option>
                     {% for add_inf in available_additional_information %}
-            <option value="{{ add_inf.name }}">
+                        <option value="{{ add_inf.name }}">{{ add_inf.display_name }}</option>
-              {{ add_inf.display_name }}
-            </option>
                     {% endfor %}
                 </select>
                 {% for add_inf in available_additional_information %}
                     <div class="aiform {{ add_inf.name }}" style="display: none;">
-            <form
+                        <form id="add_{{ add_inf.name }}_add-additional-information-modal-form" accept-charset="UTF-8"
-              id="add_{{ add_inf.name }}_add-additional-information-modal-form"
+                              action="" data-remote="true" method="post">
-              accept-charset="UTF-8"
-              action=""
-              data-remote="true"
-              method="post"
-            >
                             {% csrf_token %}
                             {{ add_inf.widget|safe }}
-              <input
+                            <input type="hidden" name="hidden" value="add-additional-information">
-                type="hidden"
-                name="hidden"
-                value="add-additional-information"
-              />
                         </form>
                     </div>
                 {% endfor %}
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="add-additional-information-modal-submit">Add
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="add-additional-information-modal-submit"
-        >
-          Add
                 </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#select-additional-information-type").change(function (e) {
-      var selectedType = $(
-        "#select-additional-information-type :selected",
-      ).val();
-      $(".aiform").hide();
-      $("." + selectedType).show();
-    });
 
-    $("#add-additional-information-modal-submit").click(function (e) {
+    $('#select-additional-information-type').change(function(e){
+        var selectedType = $("#select-additional-information-type :selected").val();
+        $('.aiform').hide();
+        $('.' + selectedType).show();
+    })
+
+    $('#add-additional-information-modal-submit').click(function(e){
         e.preventDefault();
 
-      var selectedType = $(
+        var selectedType = $("#select-additional-information-type :selected").val();
-        "#select-additional-information-type :selected",
-      ).val();
         console.log(selectedType);
-      if (
+        if (selectedType !== null && selectedType !== undefined && selectedType !== '') {
-        selectedType !== null &&
+            $('.' + selectedType + ' >form').submit();
-        selectedType !== undefined &&
-        selectedType !== ""
-      ) {
-        $("." + selectedType + " >form").submit();
         }
+
     });
-  });
+
+});
+
+
 </script>

templates/modals/objects/add_pathway_edge_modal.html

@@ -1,150 +1,95 @@
+
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
-  class="modal fade bs-modal-lg"
-  id="add_pathway_edge_modal"
-  tabindex="-1"
-  aria-labelledby="add_pathway_edge_modal"
      aria-modal="true"
-  role="dialog"
+     role="dialog">
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h4 class="modal-title">Add a Reaction</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="add_pathway_edge_modal_form" accept-charset="UTF-8"
-          id="add_pathway_edge_modal_form"
-          accept-charset="UTF-8"
                       action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}"
-          data-remote="true"
+                      data-remote="true" method="post">
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="edge-name">Name</label>
-          <input
+                    <input id="edge-name" class="form-control" name="edge-name" placeholder="Name"/>
-            id="edge-name"
-            class="form-control"
-            name="edge-name"
-            placeholder="Name"
-          />
                     <label for="edge-description">Description</label>
-          <input
+                    <input id="edge-description" class="form-control" name="edge-description" placeholder="Description"/>
-            id="edge-description"
-            class="form-control"
-            name="edge-description"
-            placeholder="Description"
-          />
                     <p></p>
                     <div class="row">
                         <div class="col-xs-5">
                             <legend>Substrate(s)</legend>
                         </div>
-            <div class="col-xs-2"></div>
+                        <div class="col-xs-2">
+
+                        </div>
                         <div class="col-xs-5">
                             <legend>Product(s)</legend>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-xs-5">
-              <select
+                            <select id="add_pathway_edge_substrates" name="edge-substrates"
-                id="add_pathway_edge_substrates"
+                                    data-actions-box='true' class="form-control" multiple data-width='100%'>
-                name="edge-substrates"
-                data-actions-box="true"
-                class="form-control"
-                multiple
-                data-width="100%"
-              >
                                 {% for n in pathway.nodes %}
-                  <option
+                                    <option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
-                    data-smiles="{{ n.default_node_label.smiles }}"
-                    value="{{ n.url }}"
-                  >
-                    {{ n.default_node_label.name|safe }}
-                  </option>
                                 {% endfor %}
                             </select>
                         </div>
-            <div
+                        <div class="col-xs-2" style="display: flex; justify-content: center; align-items: center;">
-              class="col-xs-2"
-              style="display: flex; justify-content: center; align-items: center;"
-            >
                             <i class="glyphicon glyphicon-arrow-right"></i>
                         </div>
                         <div class="col-xs-5">
-              <select
+                            <select id="add_pathway_edge_products" name="edge-products"
-                id="add_pathway_edge_products"
+                                    data-actions-box='true' class="form-control" multiple data-width='100%'>
-                name="edge-products"
-                data-actions-box="true"
-                class="form-control"
-                multiple
-                data-width="100%"
-              >
                                 {% for n in pathway.nodes %}
-                  <option
+                                    <option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
-                    data-smiles="{{ n.default_node_label.smiles }}"
-                    value="{{ n.url }}"
-                  >
-                    {{ n.default_node_label.name|safe }}
-                  </option>
                                 {% endfor %}
                             </select>
                         </div>
                     </div>
                     <div class="row">
                         <p></p>
-            <div class="col-xs-12" id="reaction_image"></div>
+                        <div class="col-xs-12" id="reaction_image">
+
+                        </div>
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="add_pathway_edge_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="add_pathway_edge_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
+
     function reactionImage() {
         var substrates = [];
-    $("#add_pathway_edge_substrates option:selected").each(function () {
+        $('#add_pathway_edge_substrates option:selected').each(function () {
-      var smiles = $(this).data("smiles"); // read data-smiles attribute
+          var smiles = $(this).data('smiles'); // read data-smiles attribute
           substrates.push(smiles);
         });
 
-    var products = [];
+        var products = []
-    $("#add_pathway_edge_products option:selected").each(function () {
+        $('#add_pathway_edge_products option:selected').each(function () {
-      var smiles = $(this).data("smiles"); // read data-smiles attribute
+          var smiles = $(this).data('smiles'); // read data-smiles attribute
           products.push(smiles);
         });
 
         if (substrates.length > 0 && products.length > 0) {
-      reaction = substrates.join(".") + ">>" + products.join(".");
+            reaction = substrates.join('.') + ">>" + products.join('.');
-      $("#reaction_image").empty();
+            $('#reaction_image').empty();
-      $("#reaction_image").append(
+            $('#reaction_image').append(
-        "<img width='100%' src='{% url 'depict' %}?smirks=" +
+                "<img width='100%' src='{% url 'depict' %}?smirks=" + encodeURIComponent(reaction) +"'>"
-          encodeURIComponent(reaction) +
-          "'>",
             );
         }
     }
@@ -153,22 +98,30 @@
         $("#add_pathway_edge_substrates").selectpicker();
         $("#add_pathway_edge_products").selectpicker();
 
-    $("#add_pathway_edge_substrates").on("change", function (e) {
+        $("#add_pathway_edge_substrates").on('change', function (e) {
             reactionImage();
-    });
+        })
 
-    $("#add_pathway_edge_products").on("change", function (e) {
+        $("#add_pathway_edge_products").on('change', function (e) {
             reactionImage();
-    });
+        })
 
         $(function () {
-      $("#add_pathway_edge_modal_form_submit").on("click", function (e) {
+            $('#add_pathway_edge_modal_form_submit').on('click', function (e) {
                 e.preventDefault();
                 $(this).prop("disabled", true);
 
+
                 // submit form
-        $("#add_pathway_edge_modal_form").submit();
+                $('#add_pathway_edge_modal_form').submit();
             });
         });
+
     });
+
 </script>
+
+
+
+
+

templates/modals/objects/add_pathway_node_modal.html

@@ -1,102 +1,57 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="add_pathway_node_modal"
-  tabindex="-1"
-  aria-labelledby="add_pathway_node_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h4 class="modal-title">Add a Node</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="add_pathway_node_modal_form" accept-charset="UTF-8" action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}" data-remote="true" method="post">
-          id="add_pathway_node_modal_form"
-          accept-charset="UTF-8"
-          action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="node-name">Name</label>
-          <input
+                    <input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
-            id="node-name"
-            class="form-control"
-            name="node-name"
-            placeholder="Name"
-          />
                     <label for="node-description">Description</label>
-          <input
+                    <input id="node-description" class="form-control" name="node-description" placeholder="Description"/>
-            id="node-description"
-            class="form-control"
-            name="node-description"
-            placeholder="Description"
-          />
                     <label for="node-smiles">SMILES</label>
-          <input
+                    <input type="text" class="form-control" name="node-smiles" placeholder="SMILES" id="node-smiles">
-            type="text"
-            class="form-control"
-            name="node-smiles"
-            placeholder="SMILES"
-            id="node-smiles"
-          />
                     <p></p>
                     <div>
-            <iframe
+                        <iframe id="add_node_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-              id="add_node_ketcher"
+                                height="510"></iframe>
-              src="{% static '/js/ketcher2/ketcher.html' %}"
-              width="100%"
-              height="510"
-            ></iframe>
                     </div>
                     <p></p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="add_pathway_node_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="add_pathway_node_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  function newStructureModalketcherToNewStructureModalTextInput() {
-    $("#node-smiles").val(this.ketcher.getSmiles());
-  }
 
-  $(function () {
+function newStructureModalketcherToNewStructureModalTextInput() {
-    $("#add_node_ketcher").on("load", function () {
+    $('#node-smiles').val(this.ketcher.getSmiles());
+}
+
+$(function() {
+
+    $('#add_node_ketcher').on('load', function() {
         const checkKetcherReady = () => {
-        win = this.contentWindow;
+            win = this.contentWindow
-        if (win.ketcher && "editor" in win.ketcher) {
+            if (win.ketcher && 'editor' in win.ketcher) {
                 win.ketcher.editor.event.change.handlers.push({
                     once: false,
                     priority: 0,
                     f: newStructureModalketcherToNewStructureModalTextInput,
-            ketcher: win.ketcher,
+                    ketcher: win.ketcher
                 });
             } else {
                 setTimeout(checkKetcherReady, 100);
@@ -104,16 +59,20 @@
         };
 
         checkKetcherReady();
-    });
+    })
 
-    $(function () {
+    $(function() {
-      $("#add_pathway_node_modal_form_submit").on("click", function (e) {
+        $('#add_pathway_node_modal_form_submit').on('click', function(e) {
             e.preventDefault();
-        $(this).prop("disabled", true);
+            $(this).prop("disabled",true);
+
+
 
             // submit form
-        $("#add_pathway_node_modal_form").submit();
+            $('#add_pathway_node_modal_form').submit();
-      });
         });
     });
+
+});
+
 </script>

templates/modals/objects/add_structure_modal.html

@@ -1,102 +1,57 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="add_structure_modal"
-  tabindex="-1"
-  aria-labelledby="add_structure_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
                 <h4 class="modal-title">Create a new Structure</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="add_structure_modal_form" accept-charset="UTF-8" action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}" data-remote="true" method="post">
-          id="add_structure_modal_form"
-          accept-charset="UTF-8"
-          action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="structure-name">Name</label>
-          <input
+                    <input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/>
-            id="structure-name"
-            class="form-control"
-            name="structure-name"
-            placeholder="Name"
-          />
                     <label for="structure-description">Description</label>
-          <input
+                    <input id="structure-description" class="form-control" name="structure-description" placeholder="Description"/>
-            id="structure-description"
-            class="form-control"
-            name="structure-description"
-            placeholder="Description"
-          />
                     <label for="structure-smiles">SMILES</label>
-          <input
+                    <input type="text" class="form-control" name="structure-smiles" placeholder="SMILES" id="structure-smiles">
-            type="text"
-            class="form-control"
-            name="structure-smiles"
-            placeholder="SMILES"
-            id="structure-smiles"
-          />
                     <p></p>
                     <div>
-            <iframe
+                        <iframe id="add_structure_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-              id="add_structure_ketcher"
+                                height="510"></iframe>
-              src="{% static '/js/ketcher2/ketcher.html' %}"
-              width="100%"
-              height="510"
-            ></iframe>
                     </div>
                     <p></p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="add_structure_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="add_structure_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  function newStructureModalketcherToNewStructureModalTextInput() {
-    $("#structure-smiles").val(this.ketcher.getSmiles());
-  }
 
-  $(function () {
+function newStructureModalketcherToNewStructureModalTextInput() {
-    $("#add_structure_ketcher").on("load", function () {
+    $('#structure-smiles').val(this.ketcher.getSmiles());
+}
+
+$(function() {
+
+    $('#add_structure_ketcher').on('load', function() {
         const checkKetcherReady = () => {
-        win = this.contentWindow;
+            win = this.contentWindow
-        if (win.ketcher && "editor" in win.ketcher) {
+            if (win.ketcher && 'editor' in win.ketcher) {
                 win.ketcher.editor.event.change.handlers.push({
                     once: false,
                     priority: 0,
                     f: newStructureModalketcherToNewStructureModalTextInput,
-            ketcher: win.ketcher,
+                    ketcher: win.ketcher
                 });
             } else {
                 setTimeout(checkKetcherReady, 100);
@@ -104,16 +59,20 @@
         };
 
         checkKetcherReady();
-    });
+    })
 
-    $(function () {
+    $(function() {
-      $("#add_structure_modal_form_submit").on("click", function (e) {
+        $('#add_structure_modal_form_submit').on('click', function(e) {
             e.preventDefault();
-        $(this).prop("disabled", true);
+            $(this).prop("disabled",true);
+
+
 
             // submit form
-        $("#add_structure_modal_form").submit();
+            $('#add_structure_modal_form').submit();
-      });
         });
     });
+
+});
+
 </script>

templates/modals/objects/delete_pathway_edge_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Delete Edge -->
 <div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
@@ -5,56 +6,31 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Delete Edge</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 Deletes the Edge. Nodes referenced by this edge will remain.
                 <p></p>
-        <form
+                <form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
-          id="delete-pathway-edge-modal-form"
+                      method="post">
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <select
+                    <select id="delete_pathway_edge_edges" name="edge-url"
-            id="delete_pathway_edge_edges"
+                            data-actions-box='true' class="form-control" data-width='100%'>
-            name="edge-url"
+                        <option value="" disabled selected>Select Reaction to delete</option>
-            data-actions-box="true"
-            class="form-control"
-            data-width="100%"
-          >
-            <option value="" disabled selected>
-              Select Reaction to delete
-            </option>
                         {% for e in pathway.edges %}
                             <option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
                         {% endfor %}
                     </select>
-          <input type="hidden" id="hidden" name="hidden" value="delete" />
+                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
                 </form>
                 <p></p>
                 <div id="delete_pathway_edge_image"></div>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="delete-pathway-edge-modal-submit">Delete</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="delete-pathway-edge-modal-submit"
-        >
-          Delete
-        </button>
             </div>
         </div>
     </div>
@@ -63,27 +39,28 @@
     $(function () {
         $("#delete_pathway_edge_edges").selectpicker();
 
-    $("#delete_pathway_edge_edges").on("change", function (e) {
+        $("#delete_pathway_edge_edges").on('change', function (e) {
-      edge_url = $("#delete_pathway_edge_edges option:selected").val();
+            edge_url = $('#delete_pathway_edge_edges option:selected').val()
 
             if (edge_url !== "") {
-        $("#delete_pathway_edge_image").empty();
+                $('#delete_pathway_edge_image').empty();
-        $("#delete_pathway_edge_image").append(
+                $('#delete_pathway_edge_image').append(
-          "<img width='100%' src='" + edge_url + "?image=svg'>",
+                    "<img width='100%' src='" + edge_url + "?image=svg'>"
                 );
             }
-    });
+        })
 
-    $("#delete-pathway-edge-modal-submit").click(function (e) {
+        $('#delete-pathway-edge-modal-submit').click(function (e) {
             e.preventDefault();
-      edge_url = $("#delete_pathway_edge_edges option:selected").val();
+            edge_url = $('#delete_pathway_edge_edges option:selected').val()
 
             if (edge_url === "") {
                 return;
             }
 
-      $("#delete-pathway-edge-modal-form").attr("action", edge_url);
+            $('#delete-pathway-edge-modal-form').attr('action', edge_url)
-      $("#delete-pathway-edge-modal-form").submit();
+            $('#delete-pathway-edge-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/delete_pathway_node_modal.html

@@ -6,59 +6,31 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Delete Node</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        Deletes the Node. Edges having this Node as Substrate or Product will be
+                Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
-        removed as well.
                 <p></p>
-        <form
+                <form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
-          id="delete-pathway-node-modal-form"
+                      method="post">
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <select
+                    <select id="delete_pathway_node_nodes" name="node-url"
-            id="delete_pathway_node_nodes"
+                            data-actions-box='true' class="form-control" data-width='100%'>
-            name="node-url"
+                        <option value="" disabled selected>Select Compound to delete</option>
-            data-actions-box="true"
-            class="form-control"
-            data-width="100%"
-          >
-            <option value="" disabled selected>
-              Select Compound to delete
-            </option>
                         {% for n in pathway.nodes %}
-              <option value="{{ n.url }}">
+                            <option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
-                {{ n.default_node_label.name|safe }}
-              </option>
                         {% endfor %}
                     </select>
-          <input type="hidden" id="hidden" name="hidden" value="delete" />
+                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
                 </form>
                 <p></p>
                 <div id="delete_pathway_node_image"></div>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="delete-pathway-node-modal-submit">Delete</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="delete-pathway-node-modal-submit"
-        >
-          Delete
-        </button>
             </div>
         </div>
     </div>
@@ -67,27 +39,28 @@
     $(function () {
         $("#delete_pathway_node_nodes").selectpicker();
 
-    $("#delete_pathway_node_nodes").on("change", function (e) {
+        $("#delete_pathway_node_nodes").on('change', function (e) {
-      node_url = $("#delete_pathway_node_nodes option:selected").val();
+            node_url = $('#delete_pathway_node_nodes option:selected').val()
 
             if (node_url !== "") {
-        $("#delete_pathway_node_image").empty();
+                $('#delete_pathway_node_image').empty();
-        $("#delete_pathway_node_image").append(
+                $('#delete_pathway_node_image').append(
-          "<img width='100%' src='" + node_url + "?image=svg'>",
+                    "<img width='100%' src='" + node_url + "?image=svg'>"
                 );
             }
-    });
+        })
 
-    $("#delete-pathway-node-modal-submit").click(function (e) {
+        $('#delete-pathway-node-modal-submit').click(function (e) {
             e.preventDefault();
-      node_url = $("#delete_pathway_node_nodes option:selected").val();
+            node_url = $('#delete_pathway_node_nodes option:selected').val()
 
             if (node_url === "") {
                 return;
             }
 
-      $("#delete-pathway-node-modal-form").attr("action", node_url);
+            $('#delete-pathway-node-modal-form').attr('action', node_url)
-      $("#delete-pathway-node-modal-form").submit();
+            $('#delete-pathway-node-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/download_pathway_csv_modal.html

@@ -5,49 +5,32 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Download Pathway as CSV</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        By clicking on Download the Pathway will be converted into a CSV and
+                By clicking on Download the Pathway will be converted into a CSV and directly downloaded.
-        directly downloaded.
+                <form id="download-pathway-csv-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
-        <form
+                      data-remote="true" method="GET">
-          id="download-pathway-csv-modal-form"
+                    <input type="hidden" name="download" value="true"/>
-          accept-charset="UTF-8"
-          action="{{ pathway.url }}"
-          data-remote="true"
-          method="GET"
-        >
-          <input type="hidden" name="download" value="true" />
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="download-pathway-csv-modal-submit">Download</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="download-pathway-csv-modal-submit"
-        >
-          Download
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#download-pathway-csv-modal-submit").click(function (e) {
+
+        $('#download-pathway-csv-modal-submit').click(function (e) {
             e.preventDefault();
-      $("#download-pathway-csv-modal-form").submit();
+            $('#download-pathway-csv-modal-form').submit();
-      $("#download_pathway_csv_modal").modal("hide");
+            $('#download_pathway_csv_modal').modal('hide');
-    });
         });
+
+    })
 </script>

templates/modals/objects/download_pathway_image_modal.html

@@ -5,12 +5,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Download Pathway as Image</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -18,26 +13,20 @@
                 By clicking on Download the Pathway will be saved as SVG.
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="download-pathway-image-modal-submit">Download</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="download-pathway-image-modal-submit"
-        >
-          Download
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#download-pathway-image-modal-submit").click(function (e) {
+
+        $('#download-pathway-image-modal-submit').click(function (e) {
             e.preventDefault();
-      downloadSVG($("#pwsvg")[0], '{{ pathway.name.split|join:"_" }}.svg');
+            downloadSVG($('#pwsvg')[0], '{{ pathway.name.split|join:"_" }}.svg')
-      $("#download_pathway_image_modal").modal("hide");
+            $('#download_pathway_image_modal').modal('hide');
-    });
         });
+
+    })
 </script>

templates/modals/objects/edit_compound_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Compound -->
 <div id="edit_compound_modal" class="modal" tabindex="-1">
@@ -5,66 +6,42 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Edit Compound</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit Compound.</p>
-        <form
+                <form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-compound-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="compound-name">Name</label>
-            <input
+                        <input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name|safe}}">
-              id="compound-name"
-              class="form-control"
-              name="compound-name"
-              value="{{ compound.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="compound-description">Description</label>
-            <input
+                        <input id="compound-description" type="text" class="form-control"
-              id="compound-description"
-              type="text"
-              class="form-control"
                                value="{{ compound.description|safe }}"
-              name="compound-description"
+                               name="compound-description">
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-compound-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-compound-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-compound-modal-submit").click(function (e) {
+
+    $('#edit-compound-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-compound-modal-form").submit();
+        $('#edit-compound-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/objects/edit_compound_structure_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Compound -->
 <div id="edit_compound_structure_modal" class="modal" tabindex="-1">
@@ -5,66 +6,41 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Create a Compound</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit a Compound Structure.</p>
-        <form
+                <form id="edit-compound-structure-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-compound-structure-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="compound-structure-name">Name</label>
-            <input
+                        <input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name|safe }}">
-              id="compound-structure-name"
-              class="form-control"
-              name="compound-structure-name"
-              value="{{ compound_structure.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="compound-structure-description">Description</label>
-            <input
+                        <input id="compound-structure-description" type="text" class="form-control"
-              id="compound-structure-description"
+                               value="{{ compound_structure.description|safe }}" name="compound-structure-description">
-              type="text"
-              class="form-control"
-              value="{{ compound_structure.description|safe }}"
-              name="compound-structure-description"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-compound-structure-modal-submit">Create</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-compound-structure-modal-submit"
-        >
-          Create
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-compound-structure-modal-submit").click(function (e) {
+
+    $('#edit-compound-structure-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-compound-structure-modal-form").submit();
+        $('#edit-compound-structure-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/objects/edit_group_member_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_group_member_modal" class="modal" tabindex="-1">
@@ -5,20 +6,15 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Add or Remove Group Member</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>
-          To add member (either User or entire Groups) to this group select the
+                    To add member (either User or entire Groups) to this group select the entity you want to add below
-          entity you want to add below and click the check mark.
+                    and click the check mark.
-          <br />
+                    <br>
                     To remove member simply click the <code>X</code> next to the member.
                 </p>
 
@@ -32,24 +28,12 @@
 				</div>
 
                 <div class="row">
-          <form
+                    <form id="modal-form-group-member" class="form-inline" role="form" accept-charset="UTF-8" action=""
-            id="modal-form-group-member"
+                          data-remote="true" method="post">
-            class="form-inline"
-            role="form"
-            accept-charset="UTF-8"
-            action=""
-            data-remote="true"
-            method="post"
-          >
                         {% csrf_token %}
                         <div class="col-xs-8">
-              <select
+                            <select id="select_member" name="member" data-actions-box='true'
-                id="select_member"
+                                    class="selPackages" data-width='100%'>
-                name="member"
-                data-actions-box="true"
-                class="selPackages"
-                data-width="100%"
-              >
                                 <option disabled selected>User</option>
                                 {% for u in users %}
                                 <option value="{{ u.url }}">{{ u.username }}</option>
@@ -59,9 +43,10 @@
                                 <option value="{{ g.url }}">{{ g.name|safe }}</option>
                                 {% endfor %}
                             </select>
-              <input type="hidden" name="action" value="add" />
+                            <input type="hidden" name="action" value="add">
+                        </div>
+                        <div class="col-xs-2">
                         </div>
-            <div class="col-xs-2"></div>
                         <div class="col-xs-2">
                             <button type="submit" style="width:60%;" class="btn col-xs-2">
                                 <span class="glyphicon glyphicon-ok"></span>
@@ -72,22 +57,16 @@
                 <p></p>
                 {% for u in group.user_member.all %}
                 <div class="row">
-            <form
+                    <form id="modal-form-group-member_{{ u.uuid }}" class="form-inline" role="form"
-              id="modal-form-group-member_{{ u.uuid }}"
+                          accept-charset="UTF-8" action="" data-remote="true" method="post">
-              class="form-inline"
-              role="form"
-              accept-charset="UTF-8"
-              action=""
-              data-remote="true"
-              method="post"
-            >
                         {% csrf_token %}
                         <div class="col-xs-8">
                             {{ u.username }}
-                <input type="hidden" name="member" value="{{ u.url }}" />
+                            <input type="hidden" name="member" value="{{ u.url }}"/>
-                <input type="hidden" name="action" value="remove" />
+                            <input type="hidden" name="action" value="remove">
+                        </div>
+                        <div class="col-xs-2">
                         </div>
-              <div class="col-xs-2"></div>
                         <div class="col-xs-2">
                             <button type="submit" style="width:60%;" class="btn col-xs-2">
                                 <span class="glyphicon glyphicon-trash"></span>
@@ -99,22 +78,16 @@
                 <p></p>
                 {% for g in group.group_member.all %}
                 <div class="row">
-            <form
+                    <form id="modal-form-group-member_{{ g.uuid }}" class="form-inline" role="form"
-              id="modal-form-group-member_{{ g.uuid }}"
+                          accept-charset="UTF-8" action="" data-remote="true" method="post">
-              class="form-inline"
-              role="form"
-              accept-charset="UTF-8"
-              action=""
-              data-remote="true"
-              method="post"
-            >
                         {% csrf_token %}
                         <div class="col-xs-8">
                             {{ g.name|safe }}
-                <input type="hidden" name="member" value="{{ g.url }}" />
+                            <input type="hidden" name="member" value="{{ g.url }}"/>
-                <input type="hidden" name="action" value="remove" />
+                            <input type="hidden" name="action" value="remove">
+                        </div>
+                        <div class="col-xs-2">
                         </div>
-              <div class="col-xs-2"></div>
                         <div class="col-xs-2">
                             <button type="submit" style="width:60%;" class="btn col-xs-2">
                                 <span class="glyphicon glyphicon-trash"></span>
@@ -123,29 +96,26 @@
                     </form>
                 </div>
                 {% endfor %}
+
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-package-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+
-    $("#edit-package-modal-submit").click(function (e) {
+
+$(function() {
+
+    $('#edit-package-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-package-modal-form").submit();
+        $('#edit-package-modal-form').submit();
     });
 
     $("#select_member").selectpicker();
-  });
+
+})
 </script>

templates/modals/objects/edit_model_modal.html

@@ -1,71 +1,45 @@
+
 {% load static %}
 <!-- Edit Model -->
 <div id="edit_model_modal" class="modal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h3 class="modal-title">Update Model</h3>
             </div>
             <div class="modal-body">
                 <p>Alter Name and Description of the Model.</p>
-        <form
+                <form id="edit-model-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-model-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="model-name">Name</label>
-            <input
+                        <input id="model-name" type="text" class="form-control" name="model-name"
-              id="model-name"
+                               value="{{ model.name|safe }}">
-              type="text"
-              class="form-control"
-              name="model-name"
-              value="{{ model.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="model-description">Description</label>
-            <input
+                        <input id="model-description" type="text" class="form-control" name="model-description"
-              id="model-description"
+                               value="{{ model.description|safe }}">
-              type="text"
-              class="form-control"
-              name="model-description"
-              value="{{ model.description|safe }}"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-model-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-model-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#edit-model-modal-submit").click(function (e) {
+
+        $('#edit-model-modal-submit').click(function (e) {
             e.preventDefault();
-      $("#edit-model-modal-form").submit();
+            $('#edit-model-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/edit_node_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Node -->
 <div id="edit_node_modal" class="modal" tabindex="-1">
@@ -5,66 +6,42 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Edit Node</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit Node.</p>
-        <form
+                <form id="edit-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-node-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="node-name">Name</label>
-            <input
+                        <input id="node-name" class="form-control" name="node-name" value="{{ node.name|safe}}">
-              id="node-name"
-              class="form-control"
-              name="node-name"
-              value="{{ node.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="node-description">Description</label>
-            <input
+                        <input id="node-description" type="text" class="form-control"
-              id="node-description"
-              type="text"
-              class="form-control"
                                value="{{ node.description|safe }}"
-              name="node-description"
+                               name="node-description">
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-node-modal-submit">Create</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-node-modal-submit"
-        >
-          Create
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-node-modal-submit").click(function (e) {
+
+    $('#edit-node-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-node-modal-form").submit();
+        $('#edit-node-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/objects/edit_package_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Package -->
 <div id="edit_package_modal" class="modal" tabindex="-1">
@@ -5,66 +6,40 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Update Package</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit a Package.</p>
-        <form
+                <form id="edit-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-package-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="package-name">Name</label>
-            <input
+                        <input id="package-name" class="form-control" name="package-name" value="{{ package.name|safe}}">
-              id="package-name"
-              class="form-control"
-              name="package-name"
-              value="{{ package.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="package-description">Description</label>
-            <input
+                        <input id="package-description" type="text" class="form-control"
-              id="package-description"
-              type="text"
-              class="form-control"
                                value="{{ package.description|safe }}"
-              name="package-description"
+                               name="package-description">
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-package-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-package-modal-submit").click(function (e) {
+
+    $('#edit-package-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-package-modal-form").submit();
+        $('#edit-package-modal-form').submit();
-    });
     });
+
+})
 </script>

templates/modals/objects/edit_package_permissions_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_package_permissions_modal" class="modal" tabindex="-1">
@@ -5,23 +6,16 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Grant or Revoke Permissions</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>
-          Modify permissions for this package. Note that if you give
+                    Modify permissions for this package. Note that if you give <code>write</code>
-          <code>write</code> permissions to a user or group,
+                    permissions to a user or group, <code>read</code> permissions will be granted automatically.
-          <code>read</code> permissions will be granted automatically.
+                    <br>
-          <br />
+                    To allow users to perform destructive actions, such as deleting the package, <code>owner</code>
-          To allow users to perform destructive actions, such as deleting the
-          package, <code>owner</code>
                     permissions must be granted.
                 </p>
 
@@ -41,24 +35,12 @@
 				</div>
 
                 <div class="row">
-          <form
+                    <form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
-            id="modal-form-permissions"
+                          data-remote="true" method="post">
-            class="form-inline"
-            role="form"
-            accept-charset="UTF-8"
-            action=""
-            data-remote="true"
-            method="post"
-          >
                         {% csrf_token %}
                         <div class="col-xs-4">
-              <select
+                            <select id="select_grantee" name="grantee" data-actions-box='true'
-                id="select_grantee"
+                                    class="selPackages" data-width='100%'>
-                name="grantee"
-                data-actions-box="true"
-                class="selPackages"
-                data-width="100%"
-              >
                                 <option disabled selected>User</option>
                                 {% for u in users %}
                                 <option value="{{ u.url }}">{{ u.username }}</option>
@@ -70,20 +52,16 @@
                             </select>
                         </div>
                         <div class="col-xs-2">
-              <input type="checkbox" name="read" id="read_new" />
+                            <input type="checkbox" name="read" id="read_new"/>
                         </div>
                         <div class="col-xs-2">
-              <input type="checkbox" name="write" id="write_new" />
+                            <input type="checkbox" name="write" id="write_new"/>
                         </div>
                         <div class="col-xs-2">
-              <input type="checkbox" name="owner" id="owner_new" />
+                            <input type="checkbox" name="owner" id="owner_new"/>
                         </div>
                         <div class="col-xs-2">
-              <button
+                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
-                type="submit"
-                style="width:60%;"
-                class="btn col-xs-2 modify-perm-button"
-              >
                                 <span class="glyphicon glyphicon-plus"></span>
                             </button>
                         </div>
@@ -92,50 +70,24 @@
                 <p></p>
                 {% for up in user_permissions %}
                 <div class="row">
-            <form
+                    <form id="modal-form-permissions_{{ up.user.uuid }}" class="form-inline" role="form"
-              id="modal-form-permissions_{{ up.user.uuid }}"
+                          accept-charset="UTF-8" action="" data-remote="true" method="post">
-              class="form-inline"
-              role="form"
-              accept-charset="UTF-8"
-              action=""
-              data-remote="true"
-              method="post"
-            >
                         {% csrf_token %}
                         <div class="col-xs-4">
                             {{ up.user.username }}
-                <input type="hidden" name="grantee" value="{{ up.user.url }}" />
+                            <input type="hidden" name="grantee" value="{{ up.user.url }}"/>
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="read" id="read_{{ up.user.uuid }}" {% if up.has_read %} checked {% endif %}/>
-                  type="checkbox"
-                  name="read"
-                  id="read_{{ up.user.uuid }}"
-                  {% if up.has_read %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="write" id="write_{{ up.user.uuid }}" {% if up.has_write %} checked {% endif %}/>
-                  type="checkbox"
-                  name="write"
-                  id="write_{{ up.user.uuid }}"
-                  {% if up.has_write %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="owner" id="owner_{{ up.user.uuid }}" {% if up.has_all %} checked {% endif %}/>
-                  type="checkbox"
-                  name="owner"
-                  id="owner_{{ up.user.uuid }}"
-                  {% if up.has_all %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <button
+                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
-                  type="submit"
-                  style="width:60%;"
-                  class="btn col-xs-2 modify-perm-button"
-                >
                                 <span class="glyphicon glyphicon-ok"></span>
                             </button>
                         </div>
@@ -145,93 +97,58 @@
                 <p></p>
                 {% for gp in group_permissions %}
                 <div class="row">
-            <form
+                    <form id="modal-form-permissions_{{ gp.user.uuid }}" class="form-inline" role="form"
-              id="modal-form-permissions_{{ gp.user.uuid }}"
+                          accept-charset="UTF-8" action="" data-remote="true" method="post">
-              class="form-inline"
-              role="form"
-              accept-charset="UTF-8"
-              action=""
-              data-remote="true"
-              method="post"
-            >
                         {% csrf_token %}
                         <div class="col-xs-4">
                             {{ gp.group.name|safe }}
-                <input
+                            <input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
-                  type="hidden"
-                  name="grantee"
-                  value="{{ gp.group.url }}"
-                />
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="read" id="read_{{ gp.group.uuid }}" {% if gp.has_read %} checked {% endif %}/>
-                  type="checkbox"
-                  name="read"
-                  id="read_{{ gp.group.uuid }}"
-                  {% if gp.has_read %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="write" id="write_{{ gp.group.uuid }}" {% if gp.has_write %} checked {% endif %}/>
-                  type="checkbox"
-                  name="write"
-                  id="write_{{ gp.group.uuid }}"
-                  {% if gp.has_write %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <input
+                            <input type="checkbox" name="owner" id="owner_{{ gp.group.uuid }}" {% if gp.has_all %} checked {% endif %}/>
-                  type="checkbox"
-                  name="owner"
-                  id="owner_{{ gp.group.uuid }}"
-                  {% if gp.has_all %}checked{% endif %}
-                />
                         </div>
                         <div class="col-xs-2">
-                <button
+                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
-                  type="submit"
-                  style="width:60%;"
-                  class="btn col-xs-2 modify-perm-button"
-                >
                                 <span class="glyphicon glyphicon-ok"></span>
                             </button>
                         </div>
                     </form>
                 </div>
                 {% endfor %}
+
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-package-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  function checkboxClick() {
+
+function checkboxClick() {
     // id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
-    parts = this.id.split("_");
+    parts = this.id.split('_');
     perm = parts[0];
     id = parts[1];
 
-    readbox = "#read_" + id;
+    readbox = '#read_' + id;
-    writebox = "#write_" + id;
+    writebox = '#write_' + id;
-    ownerbox = "#owner_" + id;
+    ownerbox = '#owner_' + id;
 
-    if (perm == "read" && !$(readbox).prop("checked")) {
+
+    if (perm == 'read' && !$(readbox).prop("checked")) {
         $(writebox).prop("checked", false);
         $(ownerbox).prop("checked", false);
     }
 
-    if (perm == "write") {
+    if (perm == 'write') {
         if ($(writebox).prop("checked")) {
             $(readbox).prop("checked", true);
         }
@@ -240,25 +157,27 @@
         }
     }
 
-    if (perm == "owner") {
+    if (perm == 'owner') {
         if ($(ownerbox).prop("checked")) {
             $(readbox).prop("checked", true);
             $(writebox).prop("checked", true);
         }
     }
-  }
+}
 
-  $(function () {
+$(function() {
-    $("#edit-package-modal-submit").click(function (e) {
+
+    $('#edit-package-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-package-modal-form").submit();
+        $('#edit-package-modal-form').submit();
     });
 
     $("#select_grantee").selectpicker();
 
     // Add click functions to permission checkboxes
-    $('[id^="read_"]').on("click", checkboxClick);
+    $('[id^="read_"]').on('click', checkboxClick);
-    $('[id^="write_"]').on("click", checkboxClick);
+    $('[id^="write_"]').on('click', checkboxClick);
-    $('[id^="owner_"]').on("click", checkboxClick);
+    $('[id^="owner_"]').on('click', checkboxClick);
-  });
+
+})
 </script>

templates/modals/objects/edit_password_modal.html

@@ -5,78 +5,42 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Update your Password</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>To change your password please fill out the following inputs</p>
-        <form
+                <form id="edit-password-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-password-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="old-password">Old Password</label>
-            <input
+                        <input id="old-password" class="form-control" name="old-password" type="password" autocomplete="current-password">
-              id="old-password"
-              class="form-control"
-              name="old-password"
-              type="password"
-              autocomplete="current-password"
-            />
                     </p>
                     <p>
                         <label for="new-password">New Password</label>
-            <input
+                        <input id="new-password" class="form-control" name="new-password" type="password", autocomplete="new-password">
-              id="new-password"
-              class="form-control"
-              name="new-password"
-              type="password"
-              ,
-              autocomplete="new-password"
-            />
                     </p>
                     <p>
                         <label for="new-password-repeat">Repeat New Password</label>
-            <input
+                        <input id="new-password-repeat" class="form-control" name="new-password-repeat" type="password" autocomplete="new-password">
-              id="new-password-repeat"
-              class="form-control"
-              name="new-password-repeat"
-              type="password"
-              autocomplete="new-password"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-password-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-password-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-password-modal-submit").click(function (e) {
+
+    $('#edit-password-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-password-modal-form").submit();
+        $('#edit-password-modal-form').submit();
-    });
     });
+
+})
 </script>

templates/modals/objects/edit_pathway_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit Pathway -->
 <div id="edit_pathway_modal" class="modal" tabindex="-1">
@@ -5,68 +6,39 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Edit Pathway</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit Pathway.</p>
-        <form
+                <form id="edit-pathway-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-pathway-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="pathway-name">Name</label>
-            <input
+                        <input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name|safe }}">
-              id="pathway-name"
-              class="form-control"
-              name="pathway-name"
-              value="{{ pathway.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="pathway-description">Description</label>
-            <textarea
+                        <textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
-              id="pathway-description"
+                                  rows="10">{{ pathway.description|safe }}</textarea>
-              type="text"
-              class="form-control"
-              name="pathway-description"
-              rows="10"
-            >
-{{ pathway.description|safe }}</textarea
-            >
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-pathway-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-pathway-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-pathway-modal-submit").click(function (e) {
+
+    $('#edit-pathway-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-pathway-modal-form").submit();
+        $('#edit-pathway-modal-form').submit();
-    });
     });
+
+})
 </script>

templates/modals/objects/edit_prediction_setting_modal.html

@@ -5,31 +5,18 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Update Prediction Setting</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        <p>
+                <p>To update your prediction setting modify parameters in the form below und click "Update"</p>
-          To update your prediction setting modify parameters in the form below
+                <form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          und click "Update"
-        </p>
-        <form
-          id="edit-prediction-setting-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <div id="prediction-setting" class="panel-collapse in collapse">
+                    <div id="prediction-setting" class="panel-collapse collapse in">
                         <div class="panel-body list-group-item">
-              <table class="table-bordered table-hover table">
+
+                            <table class="table table-bordered table-hover">
                                 <tr style="background-color: rgba(0, 0, 0, 0.08);">
                                     <th scope="col" width="20%">Parameter</th>
                                     <th scope="col" width="80%">Value</th>
@@ -39,26 +26,13 @@
                                 <tr>
                                     <td width="20%">Model</td>
                                     <td width="80%">
-                        <table
+                                        <table width="100%" class="table table-bordered table-hover">
-                          width="100%"
-                          class="table-bordered table-hover table"
-                        >
                                             <tbody>
                                             <tr>
                                                 <td colspan="2">
-                                <select
+                                                    <select id="model" name="model" class="form-control" data-width='100%'>
-                                  id="model"
-                                  name="model"
-                                  class="form-control"
-                                  data-width="100%"
-                                >
                                                     {% for m in models %}
-                                    <option
+                                                    <option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name|safe }}</option>
-                                      value="{{ m.id }}"
-                                      {% if user.prediction_settings.model.url == m.url %}selected{% endif %}
-                                    >
-                                      {{ m.name|safe }}
-                                    </option>
                                                     {% endfor %}
                                                     </select>
                                                 </td>
@@ -76,15 +50,8 @@
                                                 </td>
                                                 <td width="80%">
                                                     {% if k == 'threshold' %}
-                                    <input
+                                                    <input type="number" class="form-control" name="{{k}}" value="{{v}}"
-                                      type="number"
+                                                           min="0" max="1" step="0.05">
-                                      class="form-control"
-                                      name="{{ k }}"
-                                      value="{{ v }}"
-                                      min="0"
-                                      max="1"
-                                      step="0.05"
-                                    />
                                                     {% endif %}
                                                 </td>
                                             </tr>
@@ -96,40 +63,22 @@
                                 {% endif %}
                                 {% for k, v in user.prediction_settings.truncator.items %}
                                 <tr>
-                      <td>
+                                    <td><p>
-                        <p>
                                         {% if k == 'max_nodes' %}
                                         Max Nodes
                                         {% elif k == 'max_depth' %}
                                         Max Depth
                                         {% endif %}
-                        </p>
+                                    </p></td>
-                      </td>
+                                    <td><p>
-                      <td>
-                        <p>
                                         {% if k == 'max_nodes' %}
-                            <input
+                                        <input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
-                              type="number"
+                                               max="50" step="1">
-                              class="form-control"
-                              name="{{ k }}"
-                              value="{{ v }}"
-                              min="1"
-                              max="50"
-                              step="1"
-                            />
                                         {% elif k == 'max_depth' %}
-                            <input
+                                        <input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
-                              type="number"
+                                               max="8" step="1">
-                              class="form-control"
-                              name="{{ k }}"
-                              value="{{ v }}"
-                              min="1"
-                              max="8"
-                              step="1"
-                            />
                                         {% endif %}
-                        </p>
+                                    </p></td>
-                      </td>
                                 </tr>
                                 {% endfor %}
                                 </tbody>
@@ -139,25 +88,19 @@
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-prediction-setting-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-prediction-setting-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+    $(function() {
-    $("#edit-prediction-setting-modal-submit").click(function (e) {
+
+        $('#edit-prediction-setting-modal-submit').click(function(e){
             e.preventDefault();
-      $("#edit-prediction-setting-modal-form").submit();
+            $('#edit-prediction-setting-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/edit_reaction_modal.html

@@ -1,69 +1,45 @@
+
 {% load static %}
 <!-- Edit Reaction -->
 <div id="edit_reaction_modal" class="modal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h3 class="modal-title">Update Reaction</h3>
             </div>
             <div class="modal-body">
-        <form
+                <form id="edit-reaction-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-reaction-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="reaction-name">Name</label>
-            <input
+                        <input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name|safe }}">
-              id="reaction-name"
-              class="form-control"
-              name="reaction-name"
-              value="{{ reaction.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="reaction-description">Description</label>
-            <input
+                        <input id="reaction-description" type="text" class="form-control"
-              id="reaction-description"
+                               value="{{ reaction.description|safe }}" name="reaction-description">
-              type="text"
-              class="form-control"
-              value="{{ reaction.description|safe }}"
-              name="reaction-description"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-reaction-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-reaction-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-reaction-modal-submit").click(function (e) {
+
+    $('#edit-reaction-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-reaction-modal-form").submit();
+        $('#edit-reaction-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/objects/edit_rule_modal.html

@@ -1,69 +1,45 @@
+
 {% load static %}
 <!-- Edit Rule -->
 <div id="edit_rule_modal" class="modal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h3 class="modal-title">Update Rule</h3>
             </div>
             <div class="modal-body">
-        <form
+                <form id="edit-rule-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-rule-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="rule-name">Name</label>
-            <input
+                        <input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name|safe }}">
-              id="rule-name"
-              class="form-control"
-              name="rule-name"
-              value="{{ rule.name|safe }}"
-            />
                     </p>
                     <p>
                         <label for="rule-description">Description</label>
-            <input
+                        <input id="rule-description" type="text" class="form-control"
-              id="rule-description"
+                               value="{{ rule.description|safe }}" name="rule-description">
-              type="text"
-              class="form-control"
-              value="{{ rule.description|safe }}"
-              name="rule-description"
-            />
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-rule-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-rule-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-rule-modal-submit").click(function (e) {
+
+    $('#edit-rule-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-rule-modal-form").submit();
+        $('#edit-rule-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/objects/edit_user_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Edit User -->
 <div id="edit_user_modal" class="modal" tabindex="-1">
@@ -5,106 +6,57 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Update User Defaults</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Edit User Defaults.</p>
-        <form
+                <form id="edit-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-user-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <p>
                         <label for="default-package">Default Package</label>
-            <select
+                        <select id="default-package" name="default-package" class="form-control" data-width='100%'>
-              id="default-package"
-              name="default-package"
-              class="form-control"
-              data-width="100%"
-            >
                             <option disabled>Select a Package</option>
                             {% for p in meta.writeable_packages %}
-                <option
+                            <option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name|safe }}</option>
-                  value="{{ p.url }}"
-                  {% if p.id == meta.user.default_package.id %}selected{% endif %}
-                >
-                  {{ p.name|safe }}
-                </option>
                             {% endfor %}
                         </select>
                     </p>
                     <p>
                         <label for="default-group">Default Group</label>
-            <select
+                        <select id="default-group" name="default-group" class="form-control" data-width='100%'>
-              id="default-group"
-              name="default-group"
-              class="form-control"
-              data-width="100%"
-            >
                             <option disabled>Select a Group</option>
                             {% for g in meta.available_groups %}
-                <option
+                            <option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name|safe }}</option>
-                  value="{{ g.url }}"
-                  {% if g.id == meta.user.default_group.id %}selected{% endif %}
-                >
-                  {{ g.name|safe }}
-                </option>
                             {% endfor %}
                         </select>
                     </p>
                     <p>
-            <label for="default-prediction-setting"
+                        <label for="default-prediction-setting">Default Prediction Setting</label>
-              >Default Prediction Setting</label
+                        <select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
-            >
-            <select
-              id="default-prediction-setting"
-              name="default-prediction-setting"
-              class="form-control"
-              data-width="100%"
-            >
                             <option disabled>Select a Setting</option>
                             {% for s in meta.available_settings %}
-                <option
+                            <option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name|safe }}</option>
-                  value="{{ s.url }}"
-                  {% if s.id == meta.user.default_setting.id %}selected{% endif %}
-                >
-                  {{ s.name|safe }}
-                </option>
                             {% endfor %}
                         </select>
                     </p>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-user-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-user-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-user-modal-submit").click(function (e) {
+
+    $('#edit-user-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-user-modal-form").submit();
+        $('#edit-user-modal-form').submit();
-    });
     });
+
+})
 </script>

templates/modals/objects/evaluate_model_modal.html

@@ -1,11 +1,6 @@
-<div
+
-  class="modal fade"
+<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
-  tabindex="-1"
+     aria-hidden="true">
-  id="evaluate_model_modal"
-  role="dialog"
-  aria-labelledby="evaluate_model_modal"
-  aria-hidden="true"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -16,29 +11,17 @@
                 <h4 class="modal-title">Evaluate Model</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="evaluate_model_form" accept-charset="UTF-8" action="{{ current_object.url }}"
-          id="evaluate_model_form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ current_object.url }}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <div class="jumbotron">
                         For evaluation, you need to select the packages you want to use.
-            While the model is evaluating, you can use the model for
+                        While the model is evaluating, you can use the model for predictions.
-            predictions.
                     </div>
                     <!-- Evaluation Packages -->
                     <label for="model-evaluation-packages">Evaluation Packages</label>
-          <select
+                    <select id="model-evaluation-packages" name="model-evaluation-packages" data-actions-box='true'
-            id="model-evaluation-packages"
+                            class="form-control" multiple data-width='100%'>
-            name="model-evaluation-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 %}
@@ -56,38 +39,35 @@
 
                     <!-- Eval Type -->
                     <label for="model-evaluation-type">Evaluation Type</label>
-          <select
+                    <select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
-            id="model-evaluation-type"
-            name="model-evaluation-type"
-            class="form-control"
-          >
                         <option disabled selected>Select evaluation type</option>
                         <option value="sg">Single Generation</option>
                         <option value="mg">Multiple Generations</option>
                     </select>
 
-          <input type="hidden" name="hidden" value="evaluate" />
+                    <input type="hidden" name="hidden" value="evaluate">
                 </form>
             </div>
             <div class="modal-footer">
-        <a id="evaluate_model_form_submit" class="btn btn-primary" href="#"
+                <a id="evaluate_model_form_submit" class="btn btn-primary" href="#">Evaluate</a>
-          >Evaluate</a
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        >
-        <button type="button" class="btn btn-default" data-dismiss="modal">
-          Cancel
-        </button>
             </div>
         </div>
     </div>
 </div>
 
 <script>
+
     $(function () {
+
         $("#model-evaluation-packages").selectpicker();
 
-    $("#evaluate_model_form_submit").on("click", function (e) {
+        $('#evaluate_model_form_submit').on('click', function (e) {
             e.preventDefault();
-      $("#evaluate_model_form").submit();
+            $('#evaluate_model_form').submit();
         });
+
     });
+
+
 </script>

templates/modals/objects/export_package_modal.html

@@ -5,49 +5,32 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Export Package as JSON</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        By clicking on Export the Package will be serialized into a JSON and
+                By clicking on Export the Package will be serialized into a JSON and directly downloaded.
-        directly downloaded.
+                <form id="export-package-modal-form" accept-charset="UTF-8" action="{{ package.url }}"
-        <form
+                      data-remote="true" method="GET">
-          id="export-package-modal-form"
+                    <input type="hidden" name="export" value="true"/>
-          accept-charset="UTF-8"
-          action="{{ package.url }}"
-          data-remote="true"
-          method="GET"
-        >
-          <input type="hidden" name="export" value="true" />
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="export-package-modal-form-submit">Export</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="export-package-modal-form-submit"
-        >
-          Export
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#export-package-modal-form-submit").click(function (e) {
+
+        $('#export-package-modal-form-submit').click(function (e) {
             e.preventDefault();
-      $("#export-package-modal-form").submit();
+            $('#export-package-modal-form').submit();
-      $("#export_package_modal").modal("hide");
+            $('#export_package_modal').modal('hide');
-    });
         });
+
+    })
 </script>

templates/modals/objects/generic_copy_object_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Copy Object -->
 <div id="generic_copy_object_modal" class="modal" tabindex="-1">
@@ -5,58 +6,30 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Copy {{ object_type|capfirst }}</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        <form
+                <form id="generic-copy-object-modal-form" accept-charset="UTF-8" data-remote="true" method="post">
-          id="generic-copy-object-modal-form"
-          accept-charset="UTF-8"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <label for="target-package"
+                    <label for="target-package">Select the Target Package you want to copy this {{ object_type }}
-            >Select the Target Package you want to copy this {{ object_type }}
+                        into</label>
-            into</label
+                    <select id="target-package" name="target-package" data-actions-box='true' class="form-control"
-          >
+                            data-width='100%'>
-          <select
-            id="target-package"
-            name="target-package"
-            data-actions-box="true"
-            class="form-control"
-            data-width="100%"
-          >
                         <option disabled selected>Select Target Package</option>
                         {% for p in meta.writeable_packages %}
-              <option value="{{ p.url }}">{{ p.name|safe }}</option>
+                            <option value="{{ p.url }}">{{ p.name|safe }}</option>`
-              `
                         {% endfor %}
                     </select>
-          <input type="hidden" name="hidden" value="copy" />
+                    <input type="hidden" name="hidden" value="copy">
                 </form>
-        <div
+                <div id="copy-object-error-message" class="alert alert-danger" role="alert" style="display: none">
-          id="copy-object-error-message"
+                </div>
-          class="alert alert-danger"
-          role="alert"
-          style="display: none"
-        ></div>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="generic-copy-object-modal-form-submit">
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="generic-copy-object-modal-form-submit"
-        >
                     Copy
                 </button>
             </div>
@@ -65,45 +38,38 @@
 </div>
 <script>
     $(function () {
-    $("#generic-copy-object-modal-form-submit").click(function (e) {
+
+        $('#generic-copy-object-modal-form-submit').click(function (e) {
             e.preventDefault();
-      $("#copy-object-error-message").hide();
+            $('#copy-object-error-message').hide()
 
-      const packageUrl = $("#target-package").find(":selected").val();
+            const packageUrl = $('#target-package').find(":selected").val();
 
-      if (
+            if (packageUrl === 'Select Target Package' || packageUrl === '' || packageUrl === null || packageUrl === undefined) {
-        packageUrl === "Select Target Package" ||
-        packageUrl === "" ||
-        packageUrl === null ||
-        packageUrl === undefined
-      ) {
                 return;
             }
             const formData = {
-        hidden: "copy",
+                hidden: 'copy',
-        object_to_copy: "{{ current_object.url }}",
+                object_to_copy: '{{ current_object.url }}',
-      };
+            }
 
             $.ajax({
-        type: "post",
+                type: 'post',
                 data: formData,
                 url: packageUrl,
                 success: function (data, textStatus) {
                     window.location.href = data.success;
                 },
                 error: function (jqXHR, textStatus, errorThrown) {
-          if (jqXHR.responseJSON.error.indexOf("to the same package") > -1) {
+                    if (jqXHR.responseJSON.error.indexOf('to the same package') > -1) {
-            $("#copy-object-error-message").append(
+                        $('#copy-object-error-message').append('<p>The target Package is the same as the source Package. Please select another target!</p>');
-              "<p>The target Package is the same as the source Package. Please select another target!</p>",
-            );
                     } else {
-            $("#copy-object-error-message").append(
+                        $('#copy-object-error-message').append('<p>' + jqXHR.responseJSON.error + '</p>');
-              "<p>" + jqXHR.responseJSON.error + "</p>",
+                    }
-            );
+                    $('#copy-object-error-message').show();
                 }
-          $("#copy-object-error-message").show();
-        },
-      });
             });
         });
+
+    })
 </script>

templates/modals/objects/generic_delete_modal.html

@@ -5,54 +5,38 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Delete {{ object_type|capfirst }}</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 {% if object_type == 'user' %}
-          Clicking "Delete" will <strong>permanently</strong> delete the User
+                    Clicking "Delete" will <strong>permanently</strong> delete the User and associated data.
-          and associated data. This action can't be undone!
+                    This action can't be undone!
                 {% else %}
-          Deletes the {{ object_type|capfirst }}. Related objects that depend on
+                    Deletes the {{ object_type|capfirst }}. Related objects that depend on this {{ object_type|capfirst }}
-          this {{ object_type|capfirst }} will be deleted as well.
+                    will be deleted as well.
                 {% endif %}
-        <form
+                <form id="generic-delete-modal-form" accept-charset="UTF-8" action="{{ current_object.url }}"
-          id="generic-delete-modal-form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ current_object.url }}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <input type="hidden" id="hidden" name="hidden" value="delete" />
+                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="generic-delete-modal-form-submit">Delete</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="generic-delete-modal-form-submit"
-        >
-          Delete
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#generic-delete-modal-form-submit").click(function (e) {
+
+        $('#generic-delete-modal-form-submit').click(function (e) {
             e.preventDefault();
-      $("#generic-delete-modal-form").submit();
+            $('#generic-delete-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/generic_set_aliases_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 
 <style>
@@ -47,110 +48,66 @@
     }
 </style>
 
-<div
+<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
-  class="modal fade bs-modal-lg"
+     aria-modal="true" role="dialog">
-  id="set_aliases_modal"
-  tabindex="-1"
-  aria-labelledby="set_aliases_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
-        <h4 class="modal-title">
+                <h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4>
-          Set Aliases for {{ current_object.name|safe }}
-        </h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
-          id="set_aliases_modal_form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ current_object.url }}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="alias-input">Aliases:</label>
                     <div class="form-control alias-container" id="alias-box">
                         {% for alias in current_object.aliases %}
-              <span class="alias"
+                        <span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
-                >{{ alias|escape }}<span class="remove">&times;</span></span
-              >
                         {% endfor %}
-            <input
+                        <input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
-              type="text"
-              id="alias-input"
-              class="alias-input"
-              placeholder="Add Alias..."
-            />
                     </div>
                 </form>
-        <div
+                <div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
-          id="add-alias-error-message"
+                </div>
-          class="alert alert-danger"
-          role="alert"
-          style="display: none"
-        ></div>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
-          type="button"
+                <button type="button" class="btn btn-primary" id="set_aliases_modal_form_submit">Submit</button>
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="set_aliases_modal_form_submit"
-        >
-          Submit
-        </button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
     $(function () {
+
         function addAlias(aliasText) {
             aliasText = aliasText.trim();
-      if (aliasText === "") return;
+            if (aliasText === '') return;
 
             // Avoid duplicate aliass
             var exists = false;
-      $("#alias-box .alias").each(function () {
+            $('#alias-box .alias').each(function () {
-        if (
+                if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
-          $(this).text().replace("×", "").trim().toLowerCase() ===
-          aliasText.toLowerCase()
-        ) {
                     exists = true;
                     return false;
                 }
             });
 
             if (!exists) {
-        var aliasHtml =
+                var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
-          '<span class="alias">' +
-          $("<div>").text(aliasText).html() +
                     '<span class="remove">&times;</span></span>';
-        $(aliasHtml).insertBefore("#alias-input");
+                $(aliasHtml).insertBefore('#alias-input');
             }
 
-      $("#alias-input").val("");
+            $('#alias-input').val('');
         }
 
         // Add alias when Enter is pressed
-    $("#alias-input").on("keypress", function (e) {
+        $('#alias-input').on('keypress', function (e) {
             if (e.which === 13) {
                 e.preventDefault();
                 addAlias($(this).val());
@@ -158,56 +115,56 @@
         });
 
         // Add alias when input loses focus
-    $("#alias-input").on("blur", function () {
+        $('#alias-input').on('blur', function () {
             var val = $(this).val();
-      if (val.trim() !== "") {
+            if (val.trim() !== '') {
                 addAlias(val);
             }
         });
 
         // Remove alias when clicking ×
-    $("#alias-box").on("click", ".remove", function () {
+        $('#alias-box').on('click', '.remove', function () {
-      $(this).closest(".alias").remove();
+            $(this).closest('.alias').remove();
         });
 
         // Focus input when clicking the container
-    $("#alias-box").on("click", function () {
+        $('#alias-box').on('click', function () {
-      $("#alias-input").focus();
+            $('#alias-input').focus();
         });
 
-    $("#set_aliases_modal_form_submit").on("click", function (e) {
+
+        $('#set_aliases_modal_form_submit').on('click', function (e) {
             e.preventDefault();
 
             let aliases = [];
-      $("#alias-box .alias").each(function () {
+            $('#alias-box .alias').each(function () {
-        aliases.push($(this).text().replace("×", "").trim());
+                aliases.push($(this).text().replace('×', '').trim())
             });
 
             if (aliases.length === 0) {
                 // Set empty string for deletion of all aliases
                 // If empty list is sent, its gets removed entirely from post data
-        aliases = [""];
+                aliases = ['']
             }
 
             formData = {
-        aliases: aliases,
+                'aliases': aliases
-      };
+            }
 
             $.ajax({
-        type: "post",
+                type: 'post',
                 data: formData,
-        url: "{{ current_object.url }}",
+                url: '{{ current_object.url }}',
                 traditional: true,
                 success: function (data, textStatus) {
                     window.location.href = data.success;
                 },
                 error: function (jqXHR, textStatus, errorThrown) {
-          $("#add-alias-error-message").append(
+                    $('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
-            "<p>Setting aliases failed!</p>",
+                    $('#add-alias-error-message').show();                }
-          );
-          $("#add-alias-error-message").show();
-        },
             });
+
         });
+
     });
 </script>

templates/modals/objects/generic_set_external_reference_modal.html

@@ -1,3 +1,4 @@
+
 {% load static %}
 <!-- Delete Object -->
 <div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
@@ -5,93 +6,56 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Add External References</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        <form
+                <form id="generic-set-external-reference-modal-form" accept-charset="UTF-8"
-          id="generic-set-external-reference-modal-form"
-          accept-charset="UTF-8"
                       action="{{ current_object.url }}"
-          data-remote="true"
+                      data-remote="true" method="post">
-          method="post"
-        >
                     {% csrf_token %}
-          <label for="database-select"
+                    <label for="database-select">Select the Database you want to attach an External Reference
-            >Select the Database you want to attach an External Reference
+                        for</label>
-            for</label
+                    <select id="database-select" name="selected-database" data-actions-box='true' class="form-control"
-          >
+                            data-width='100%'>
-          <select
-            id="database-select"
-            name="selected-database"
-            data-actions-box="true"
-            class="form-control"
-            data-width="100%"
-          >
                         <option disabled selected>Select Database</option>
                         {% for entity, databases in meta.external_databases.items %}
                             {% if entity == object_type %}
                                 {% for db in databases %}
-                  <option
+                                    <option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
-                    id="db-select-{{ db.database.pk }}"
+                                            value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
-                    data-input-placeholder="{{ db.placeholder }}"
-                    value="{{ db.database.id }}"
-                  >
-                    {{ db.database.name|safe }}
-                  </option>
-                  `
                                 {% endfor %}
                             {% endif %}
                         {% endfor %}
                     </select>
                     <p></p>
                     <div id="input-div" style="display: none">
-            <label for="identifier">The reference</label>
+                        <label for="identifier" >The reference</label>
-            <input
+                        <input type="text" id="identifier" name="identifier" class="form-control" placeholder="">
-              type="text"
-              id="identifier"
-              name="identifier"
-              class="form-control"
-              placeholder=""
-            />
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="generic-set-external-reference-modal-form-submit">Submit</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="generic-set-external-reference-modal-form-submit"
-        >
-          Submit
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
+
         $("#database-select").on("change", function () {
             let selected = $(this).val();
-      $("#identifier").attr(
+            $("#identifier").attr("placeholder", $('#db-select-' + selected).data('input-placeholder'));
-        "placeholder",
-        $("#db-select-" + selected).data("input-placeholder"),
-      );
             $("#input-div").show();
         });
 
-    $("#generic-set-external-reference-modal-form-submit").click(function (e) {
+        $('#generic-set-external-reference-modal-form-submit').click(function (e) {
             e.preventDefault();
-      $("#generic-set-external-reference-modal-form").submit();
+            $('#generic-set-external-reference-modal-form').submit();
-    });
         });
+
+    })
 </script>

templates/modals/objects/generic_set_scenario_modal.html

@@ -1,71 +1,37 @@
+
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_modal"
-  class="modal fade bs-modal-lg"
+     aria-modal="true" role="dialog">
-  id="set_scenario_modal"
-  tabindex="-1"
-  aria-labelledby="set_scenario_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
-        <h4 class="modal-title">
+                <h4 class="modal-title">Set Scenarios for {{ current_object.name|safe }}</h4>
-          Set Scenarios for {{ current_object.name|safe }}
-        </h4>
             </div>
             <div class="modal-body">
                 <div id="loading_scenario_div" class="text-center"></div>
-        <form
+                <form id="set_scenario_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
-          id="set_scenario_modal_form"
+                      data-remote="true" method="post">
-          accept-charset="UTF-8"
-          action="{{ current_object.url }}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <label for="scenario-select">Scenarios</label>
-          <select
+                    <select id="scenario-select" name="selected-scenarios" data-actions-box='true' class="form-control"
-            id="scenario-select"
+                            multiple data-width='100%'>
-            name="selected-scenarios"
-            data-actions-box="true"
-            class="form-control"
-            multiple
-            data-width="100%"
-          >
                         <option disabled>Select Scenarios</option>
                         <option value="" hidden></option>
                     </select>
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="set_scenario_modal_form_submit"
-        >
-          Submit
                 </button>
+                <button type="button" class="btn btn-primary" id="set_scenario_modal_form_submit">Submit</button>
             </div>
         </div>
     </div>
+
 </div>
-{# prettier-ignore-start #}
 <script>
 
     $(function () {
@@ -109,4 +75,3 @@
     });
 
 </script>
-{# prettier-ignore-end #}

templates/modals/objects/identify_missing_rules_modal.html

@@ -5,33 +5,18 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Identify Missing Rules</h3>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-        By clicking on Download we'll search the Pathway for Reactions that are
+                By clicking on Download we'll search the Pathway for Reactions that are not backed by
-        not backed by a Rule or which can be assembled by chaining two rules.
+                a Rule or which can be assembled by chaining two rules.
-        <form
+                <form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
-          id="identify-missing-rules-modal-form"
+                      data-remote="true" method="GET">
-          accept-charset="UTF-8"
-          action="{{ pathway.url }}"
-          data-remote="true"
-          method="GET"
-        >
                     <label for="rule-package">Select the Rule Package</label>
-          <select
+                    <select id="rule-package" name="rule-package" data-actions-box='true' class="form-control"
-            id="rule-package"
+                            data-width='100%'>
-            name="rule-package"
-            data-actions-box="true"
-            class="form-control"
-            data-width="100%"
-          >
                         <option disabled>Reviewed Packages</option>
                         {% for obj in meta.readable_packages %}
                             {% if obj.reviewed %}
@@ -46,30 +31,24 @@
                             {% endif %}
                         {% endfor %}
                     </select>
-          <input type="hidden" name="identify-missing-rules" value="true" />
+                    <input type="hidden" name="identify-missing-rules" value="true"/>
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="identify-missing-rules-modal-submit">Download</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="identify-missing-rules-modal-submit"
-        >
-          Download
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $(function () {
-    $("#identify-missing-rules-modal-submit").click(function (e) {
+
+        $('#identify-missing-rules-modal-submit').click(function (e) {
             e.preventDefault();
-      $("#identify-missing-rules-modal-form").submit();
+            $('#identify-missing-rules-modal-form').submit();
-      $("#identify_missing_rules_modal").modal("hide");
+            $('#identify_missing_rules_modal').modal('hide');
-    });
         });
+
+    })
 </script>

templates/modals/objects/manage_api_token_modal.html

@@ -1,52 +1,35 @@
-<div
+
-  class="modal fade"
+<div class="modal fade"
      tabindex="-1"
      id="manage_api_token_modal"
      role="dialog"
      aria-labelledby="manage_api_token_modal"
-  aria-hidden="true"
+     aria-hidden="true">
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal">
                     <span aria-hidden="true">&times;</span>
                     <span class="sr-only">Close</span>
                 </button>
                 <h3 class="modal-title">Manage API Token</h3>
             </div>
             <div class="modal-body">
-        <p>
+                <p>Requesting a Token will invalidate all potential existing tokens. The new token will only be shown once, so ensure to store it in secure place</p>
-          Requesting a Token will invalidate all potential existing tokens. The
+                <form id="request_api_token_form"
-          new token will only be shown once, so ensure to store it in secure
-          place
-        </p>
-        <form
-          id="request_api_token_form"
                       accept-charset="UTF-8"
                       action=""
                       data-remote="true"
-          method="post"
+                      method="post">
-        >
                     {% csrf_token %}
                     <p>
                         <label for="token-name">Name</label>
-            <input
+                        <input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
-              type="text"
-              id="token-name"
-              class="form-control"
-              name="name"
-              placeholder="Generic Token for {{ meta.user.username }}"
-            />
                         <label for="valid-for">Valid for (in days)</label>
-            <input
+                        <input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
-              type="number"
+                        <input type="hidden" name="hidden" value="request-api-token">
-              id="valid-for"
-              class="form-control"
-              name="valid-for"
-              value="90"
-            />
-            <input type="hidden" name="hidden" value="request-api-token" />
                     </p>
                 </form>
                 <div id="new-token">
@@ -54,23 +37,12 @@
                 </div>
                 <div id="existing-tokens">
                     {% for t in tokens %}
-            <form
+                    <form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
-              id="delete-token-{{ forloop.counter0 }}"
-              accept-charset="UTF-8"
-              action="{{ meta.user.url }}"
-              data-remote="true"
-              method="post"
-            >
                         {% csrf_token %}
                         <div class="input-group">
-                <input type="hidden" name="hidden" value="delete" />
+                            <input type="hidden" name="hidden" value="delete">
-                <input type="hidden" name="token-id" value="{{ t.pk }}" />
+                            <input type="hidden" name="token-id" value="{{ t.pk }}">
-                <input
+                            <input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
-                  type="text"
-                  class="form-control"
-                  value="{{ t.name|safe }}"
-                  disabled
-                />
                             <span class="input-group-btn">
                                 <button type="submit" class="btn btn-danger">Delete</button>
                             </span>
@@ -80,39 +52,41 @@
                 </div>
             </div>
             <div class="modal-footer">
-        <a id="manage_api_token_form_submit" class="btn btn-primary" href="#"
+                <a id="manage_api_token_form_submit"
-          >Submit</a
+                   class="btn btn-primary"
-        >
+                   href="#">Submit</a>
-        <button type="button" class="btn btn-default" data-dismiss="modal">
+                <button type="button"
-          Cancel
+                        class="btn btn-default"
+                        data-dismiss="modal">Cancel
                 </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#new-token").hide();
+    $('#new-token').hide()
 
-    $("#manage_api_token_form_submit").on("click", function (e) {
+    $('#manage_api_token_form_submit').on('click', function (e) {
         e.preventDefault();
 
-      const formData = $("#request_api_token_form").serialize();
+        const formData = $('#request_api_token_form').serialize();
-      $.post("", formData, function (response) {
+        $.post('', formData, function(response) {
-        $("#new-token-pre").text(response.raw_token);
+            $('#new-token-pre').text(response.raw_token);
-        $("#new-token").show();
+            $('#new-token').show();
         });
     });
 
     // Select all elements that start with 'delete-token-'
-    $("[id^='delete-token-']").on("submit", function (e) {
+    $("[id^='delete-token-']").on("submit", function(e) {
         e.preventDefault();
         const formData = $(this).serialize();
         const form = $(this);
-      $.post(this.action, formData, function (response) {
+        $.post(this.action, formData, function(response) {
             console.log(this);
             form.remove();
         });
     });
-  });
+
+});
 </script>

templates/modals/objects/publish_package_modal.html

@@ -5,48 +5,31 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Publish Package</h5>
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
                 <p>Clicking on Publish will make this Package publicly available!</p>
-        <form
+                <form id="publish-package-modal-form" accept-charset="UTF-8" action="{{ current_package.url }}" data-remote="true" method="post">
-          id="publish-package-modal-form"
-          accept-charset="UTF-8"
-          action="{{ current_package.url }}"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
-          <input type="hidden" name="hidden" value="publish-package" />
+                    <input type="hidden" name="hidden" value="publish-package">
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="publish-package-modal-form-submit">Publish</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="publish-package-modal-form-submit"
-        >
-          Publish
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#publish-package-modal-form-submit").click(function (e) {
+
+    $('#publish-package-modal-form-submit').click(function(e){
         e.preventDefault();
-      $("#publish-package-modal-form").submit();
+        $('#publish-package-modal-form').submit();
-    });
     });
+
+})
 </script>

templates/modals/objects/set_license_modal.html

@@ -1,15 +1,15 @@
-<div
+<div class="modal fade"
-  class="modal fade"
      tabindex="-1"
      id="set_license_modal"
      role="dialog"
      aria-labelledby="set_license_modal"
-  aria-hidden="true"
+     aria-hidden="true">
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal">
                     <span aria-hidden="true">&times;</span>
                     <span class="sr-only">Close</span>
                 </button>
@@ -21,152 +21,101 @@
                     <div class="col-md-9">
                         <p>
                             Set the license for all data in this package:
-              <br />
+                            <br> <br>
-              <br />
+                            (For more information please visit our <a target="#"
-              (For more information please visit our
+                                                                      href="https://wiki.envipath.org/index.php/License">wiki</a>.)
-              <a target="#" href="https://wiki.envipath.org/index.php/License"
-                >wiki</a
-              >.)
                         </p>
                     </div>
                     <div class="col-md-3">
                         <div id="ccfig"></div>
                     </div>
                 </div>
-        <form
+                <form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="set_license_form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <div class="input-group">
                         <div class="radio">
-              <label
+                            <label><input type="radio" name="optlicense" onclick="cc()" id="ccradio">Creative commons license</label>
-                ><input
-                  type="radio"
-                  name="optlicense"
-                  onclick="cc()"
-                  id="ccradio"
-                />Creative commons license</label
-              >
                         </div>
                         <div>
                             <div class="checkbox">
-                <label
+                                <label><input type="checkbox" value="" onclick="cc()" id="ccremix" disabled>Allow adaptations of your work to be shared</label>
-                  ><input
-                    type="checkbox"
-                    value=""
-                    onclick="cc()"
-                    id="ccremix"
-                    disabled
-                  />Allow adaptations of your work to be shared</label
-                >
                             </div>
                             <div class="checkbox">
-                <label
+                                <label><input type="checkbox" value="" onclick="cc()" id="ccnocom" disabled>Prohibit commercial use</label>
-                  ><input
-                    type="checkbox"
-                    value=""
-                    onclick="cc()"
-                    id="ccnocom"
-                    disabled
-                  />Prohibit commercial use</label
-                >
                             </div>
                             <div class="checkbox">
-                <label
+                                <label><input type="checkbox" value="" onclick="cc()" id="ccalike" disabled>Share only if others share alike</label>
-                  ><input
-                    type="checkbox"
-                    value=""
-                    onclick="cc()"
-                    id="ccalike"
-                    disabled
-                  />Share only if others share alike</label
-                >
                             </div>
                         </div>
                         <div class="radio">
-              <label
+                            <label><input type="radio" name="optlicense" onclick="cc()" id="noccradio">No creative commons license, contact package owner for license information</label>
-                ><input
-                  type="radio"
-                  name="optlicense"
-                  onclick="cc()"
-                  id="noccradio"
-                />No creative commons license, contact package owner for license
-                information</label
-              >
                         </div>
                     </div>
-          <input type="hidden" id="license" name="license" />
+                    <input type="hidden" id="license" name="license">
                 </form>
             </div>
             <div class="modal-footer">
-        <button id="set_license_form_submit" class="btn btn-primary">
+                <button id="set_license_form_submit" class="btn btn-primary">Submit</button>
-          Submit
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        </button>
-        <button type="button" class="btn btn-default" data-dismiss="modal">
-          Cancel
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  function ccstring(ccremix, ccnocom, ccalike) {
+
+function ccstring(ccremix, ccnocom, ccalike){
     var ccstring = "by";
 
-    if (ccnocom) {
+    if(ccnocom){
-      ccstring += "-nc";
+        ccstring +="-nc";
     }
 
-    if (!ccremix) {
+    if(!ccremix){
-      ccstring += "-nd";
+        ccstring +="-nd";
-    } else {
+    } else{
-      if (ccalike) {
+        if(ccalike){
-        ccstring += "-sa";
+            ccstring +="-sa";
         }
     }
     return ccstring;
-  }
+}
 
-  function cc() {
+function cc() {
-    var nocc = $("#noccradio").prop("checked");
+    var nocc = $('#noccradio').prop('checked')
-    var iscc = $("#ccradio").prop("checked");
+    var iscc = $('#ccradio').prop('checked');
 
-    if (nocc) {
+    if(nocc) {
-      $("#ccradio").prop("checked", false);
+        $('#ccradio').prop('checked', false);
-      $("#ccremix").prop("checked", false);
+        $('#ccremix').prop('checked', false);
-      $("#ccnocom").prop("checked", false);
+        $('#ccnocom').prop('checked', false);
-      $("#ccalike").prop("checked", false);
+        $('#ccalike').prop('checked', false);
 
-      $("#ccremix").prop("disabled", true);
+        $('#ccremix').prop('disabled', true);
-      $("#ccnocom").prop("disabled", true);
+        $('#ccnocom').prop('disabled', true);
-      $("#ccalike").prop("disabled", true);
+        $('#ccalike').prop('disabled', true);
     } else if (iscc) {
-      $("#ccremix").prop("disabled", false);
+        $('#ccremix').prop('disabled', false);
-      $("#ccnocom").prop("disabled", false);
+        $('#ccnocom').prop('disabled', false);
 
-      if ($("#ccremix").prop("checked")) {
+        if ($('#ccremix').prop('checked')) {
-        $("#ccalike").prop("disabled", false);
+            $('#ccalike').prop('disabled', false);
         } else {
-        $("#ccalike").prop("disabled", true);
+            $('#ccalike').prop('disabled', true);
         }
     }
 
-    var remix = $("#ccremix").prop("checked");
+    var remix = $('#ccremix').prop('checked');
-    var nocom = $("#ccnocom").prop("checked");
+    var nocom = $('#ccnocom').prop('checked');
-    var alike = $("#ccalike").prop("checked");
+    var alike = $('#ccalike').prop('checked');
 
-    if (nocc) {
+    if(nocc) {
-      $("#set_license_form_submit").prop("disabled", false);
+        $('#set_license_form_submit').prop('disabled', false);
-      $("#ccfig").empty();
+        $('#ccfig').empty();
-      $("#license").val("no-license");
+        $('#license').val('no-license')
-    } else if (iscc) {
+    } else if(iscc) {
-      $("#set_license_form_submit").prop("disabled", false);
+        $('#set_license_form_submit').prop('disabled', false);
-      $("#ccfig").empty();
+        $('#ccfig').empty();
-      var ccstr = ccstring(remix, nocom, alike);
+        var ccstr = ccstring(remix, nocom, alike)
 
         var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
         var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
@@ -175,24 +124,26 @@
                        <img src='${imageLink}'>
                        </a>`;
 
-      $("#ccfig").append(img_tpl);
+        $('#ccfig').append(img_tpl);
-      $("#license").val(ccstr);
+        $('#license').val(ccstr);
     } else {
-      $("#ccfig").empty();
+        $('#ccfig').empty();
-      $("#set_license_form_submit").prop("disabled", true);
+        $('#set_license_form_submit').prop('disabled', true);
-      $("#license").val("no-license");
+        $('#license').val('no-license')
-    }
     }
 
-  $(function () {
+}
+
+$(function() {
     // Disable by default as nothing is selected
 
     cc();
-    $("#set_license_form_submit").prop("disabled", true);
+    $('#set_license_form_submit').prop('disabled', true);
 
-    $("#set_license_form_submit").on("click", function (e) {
+     $('#set_license_form_submit').on('click', function (e) {
         e.preventDefault();
-      $("#set_license_form").submit();
+        $('#set_license_form').submit();
-    });
     });
+});
+
 </script>

templates/modals/objects/update_scenario_additional_information_modal.html

@@ -1,62 +1,39 @@
 {% load static %}
 <!-- Update Scenario Additional Information-->
-<div
+<div id="update_scenario_additional_information_modal" class="modal" tabindex="-1">
-  id="update_scenario_additional_information_modal"
-  class="modal"
-  tabindex="-1"
->
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h3 class="modal-title">Update Additional Information</h3>
             </div>
             <div class="modal-body">
-        <form
+                <form id="edit-scenario-additional-information-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
-          id="edit-scenario-additional-information-modal-form"
-          accept-charset="UTF-8"
-          action=""
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     {% for widget in update_widgets %}
                         {{ widget|safe }}
                     {% endfor %}
-          <input
+                <input type="hidden" name="hidden" value="set-additional-information">
-            type="hidden"
-            name="hidden"
-            value="set-additional-information"
-          />
                 </form>
             </div>
             <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          Close
+                <button type="button" class="btn btn-primary" id="edit-scenario-additional-information-modal-submit">Update</button>
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="edit-scenario-additional-information-modal-submit"
-        >
-          Update
-        </button>
             </div>
         </div>
     </div>
 </div>
 <script>
-  $(function () {
+$(function() {
-    $("#edit-scenario-additional-information-modal-submit").click(function (e) {
+
+    $('#edit-scenario-additional-information-modal-submit').click(function(e){
         e.preventDefault();
-      $("#edit-scenario-additional-information-modal-form").submit();
+        $('#edit-scenario-additional-information-modal-form').submit();
-    });
     });
+
+});
+
+
 </script>

templates/modals/predict_modal.html

@@ -1,157 +1,94 @@
 {% load static %}
-<div
+<div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
-  class="modal fade bs-modal-lg"
+     role="dialog">
-  id="predict_modal"
-  tabindex="-1"
-  aria-labelledby="predict_modal"
-  aria-modal="true"
-  role="dialog"
->
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-        <button
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
                     <span aria-hidden="true">×</span>
                 </button>
                 <h4 class="modal-title">Predict a Pathway</h4>
             </div>
             <div class="modal-body">
-        <form
+                <form id="predict_modal_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/pathway" data-remote="true" method="post">
-          id="predict_modal_form"
-          accept-charset="UTF-8"
-          action="{{ meta.current_package.url }}/pathway"
-          data-remote="true"
-          method="post"
-        >
                     {% csrf_token %}
                     <div class="row">
                         <div class="col-md-6">
                             <label for="name">Name</label>
-              <input
+                            <input id="name" class="form-control" name="name" placeholder="Name"/>
-                id="name"
-                class="form-control"
-                name="name"
-                placeholder="Name"
-              />
                             <label for="description">Description</label>
-              <input
+                            <input id="description" class="form-control" name="description" placeholder="Description"/>
-                id="description"
-                class="form-control"
-                name="description"
-                placeholder="Description"
-              />
                         </div>
                         <div class="col-md-6">
                             <label for="predict">Predict pathway or build yourself?</label>
                             <div class="radio" id="predict">
                                 <p>
                                     <label>
-                    <input
+                                        <input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
-                      type="radio"
+                                        pathway
-                      name="predict"
-                      id="radioPredict"
-                      value="predict"
-                      checked
-                    />Predict pathway
                                     </label>
                                 </p>
                                 <p>
                                     <label>
-                    <input
+                                        <input type="radio" name="predict" id="radioIncremental" value="incremental"/>Incremental
-                      type="radio"
+                                        prediction
-                      name="predict"
-                      id="radioIncremental"
-                      value="incremental"
-                    />Incremental prediction
                                     </label>
                                 </p>
                                 <p>
                                     <label>
-                    <input
+                                        <input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
-                      type="radio"
-                      name="predict"
-                      id="radioBuild"
-                      value="build"
-                    />Build pathway
                                     </label>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <label for="predict-modal-smiles">SMILES</label>
-          <input
+                    <input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
-            type="text"
-            class="form-control"
-            name="smiles"
-            placeholder="SMILES"
-            id="predict-modal-smiles"
-          />
                     <p id="ketcher_container"></p>
                     <div>
-            <iframe
+                        <iframe id="predict-modal-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-              id="predict-modal-ketcher"
+                                height="510"></iframe>
-              src="{% static '/js/ketcher2/ketcher.html' %}"
-              width="100%"
-              height="510"
-            ></iframe>
                     </div>
 
                     <label for="prediction-setting">Default Prediction Setting</label>
-          <select
+                    <select id="prediction-setting" name="prediction-setting" class="form-control"
-            id="prediction-setting"
+                            data-width='100%'>
-            name="prediction-setting"
-            class="form-control"
-            data-width="100%"
-          >
                         <option disabled>Select a Setting</option>
                         {% for s in meta.available_settings %}
-              <option
+                            <option value="{{ s.url }}"{% if s.id == meta.user.default_setting.id %}selected{% endif %}>
-                value="{{ s.url }}"
+                                {{ s.name|safe }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
-                {% if s.id == meta.user.default_setting.id %}selected{% endif %}
-              >
-                {{ s.name|safe }}{% if s.id == meta.user.default_setting.id %}
-                  <i>(User default)</i>
-                {% endif %}
                             </option>
                         {% endfor %}
                     </select>
+
                 </form>
             </div>
             <div class="modal-footer">
-        <button
+                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
-          type="button"
-          class="btn btn-secondary pull-left"
-          data-dismiss="modal"
-        >
-          Close
-        </button>
-        <button type="button" class="btn btn-primary" id="predictButton">
-          Predict
                 </button>
+                <button type="button" class="btn btn-primary" id="predictButton">Predict</button>
             </div>
         </div>
     </div>
+
 </div>
 <script>
-  function predictModalketcherToPredictModalTextInput() {
-    $("#predict-modal-smiles").val(this.ketcher.getSmiles());
-  }
 
-  $(function () {
+function predictModalketcherToPredictModalTextInput() {
-    $("#predict-modal-ketcher").on("load", function () {
+    $('#predict-modal-smiles').val(this.ketcher.getSmiles());
+}
+
+$(function() {
+
+    $('#predict-modal-ketcher').on('load', function() {
         const checkKetcherReady = () => {
-        win = this.contentWindow;
+            win = this.contentWindow
-        if (win.ketcher && "editor" in win.ketcher) {
+            if (win.ketcher && 'editor' in win.ketcher) {
                 win.ketcher.editor.event.change.handlers.push({
                     once: false,
                     priority: 0,
                     f: predictModalketcherToPredictModalTextInput,
-            ketcher: win.ketcher,
+                    ketcher: win.ketcher
                 });
             } else {
                 setTimeout(checkKetcherReady, 100);
@@ -159,9 +96,9 @@
         };
 
         checkKetcherReady();
-    });
+    })
 
-    $("#predictButton").on("click", function (e) {
+    $('#predictButton').on('click', function(e) {
         e.preventDefault();
         $(this).prop("disabled", true);
 
@@ -172,7 +109,7 @@
         // existing pws...
 
         // submit form
-      $("#predict_modal_form").submit();
+        $('#predict_modal_form').submit();
-    });
     });
+});
 </script>

templates/objects/composite_rule.html

@@ -10,29 +10,16 @@
         {% include "modals/objects/generic_delete_modal.html" %}
     {% endblock action_modals %}
 
-  <div class="panel-group" id="rule-detail">
+<div class="panel-group" id="rule-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {{ rule.name|safe }}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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/rule.html" %}
@@ -41,26 +28,20 @@
             </div>
         </div>
         <div class="panel-body">
-        <p>{{ rule.description|safe }}</p>
+            <p>
+                {{ rule.description|safe }}
+            </p>
         </div>
 
         {% if rule.aliases %}
             <!-- Aliases -->
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-aliases-link"
+                       href="#rule-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-aliases"
-              >Aliases</a
-            >
                 </h4>
             </div>
-        <div id="rule-aliases" class="panel-collapse in collapse">
+            <div id="rule-aliases" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for alias in rule.aliases %}
                         <a class="list-group-item">{{ alias }}</a>
@@ -70,26 +51,20 @@
         {% endif %}
 
         <!-- Reaction Patterns -->
-      <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
             <h4 class="panel-title">
-          <a
+                <a id="rule-reaction-patterns-link" data-toggle="collapse" data-parent="#rule-detail"
-            id="rule-reaction-patterns-link"
+                   href="#rule-reaction-patterns">Reaction Patterns</a>
-            data-toggle="collapse"
-            data-parent="#rule-detail"
-            href="#rule-reaction-patterns"
-            >Reaction Patterns</a
-          >
             </h4>
         </div>
-      <div id="rule-reaction-patterns" class="panel-collapse in collapse">
+        <div id="rule-reaction-patterns" class="panel-collapse collapse in">
             <div class="panel-body list-group-item">
                 {% for r in rule.srs %}
                 <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
                 <div align="center">
-              <p>{{ r.as_svg|safe }}</p>
+                    <p>
+                        {{r.as_svg|safe}}
+                    </p>
                 </div>
                 {% endfor %}
             </div>
@@ -97,26 +72,16 @@
 
         <!-- Scenarios -->
         {% if rule.scenarios.all %}
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-scenario-link"
+                       href="#rule-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-scenario"
-              >Scenarios</a
-            >
                 </h4>
             </div>
-        <div id="rule-scenario" class="panel-collapse in collapse">
+            <div id="rule-scenario" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for s in rule.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                        <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                     {% endfor %}
                 </div>
             </div>
@@ -124,49 +89,31 @@
 
         {% if rule.enzymelinks %}
             <!-- EC Numbers -->
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-ec-numbers-link"
+                       href="#rule-ec-numbers">EC Numbers</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-ec-numbers"
-              >EC Numbers</a
-            >
                 </h4>
             </div>
-        <div id="rule-ec-numbers" class="panel-collapse in collapse">
+            <div id="rule-ec-numbers" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for k, v in rule.get_grouped_enzymelinks.items %}
-              <div
+                        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                class="panel panel-default panel-heading list-group-item"
-                style="background-color:silver"
-              >
                             <h4 class="panel-title">
-                  <a
+                                <a id="{{ k|slugify }}_Link" data-toggle="collapse"
-                    id="{{ k|slugify }}_Link"
-                    data-toggle="collapse"
                                    data-parent="#{{ k|slugify }}_Accordion"
-                    href="#{{ k|slugify }}"
+                                   href="#{{ k|slugify }}">
-                  >
                                     {{ k }}
                                 </a>
                             </h4>
                         </div>
-              <div id="{{ k|slugify }}" class="panel-collapse in collapse">
+                        <div id="{{ k|slugify }}" class="panel-collapse collapse in">
                             <div class="panel-body list-group-item">
                                 {% for enzyme in v %}
                                     <a class="list-group-item" href="{{ enzyme.url }}">
                                         {{ enzyme.ec_number }}
-                      <div style="position:absolute;bottom:10px;left:100px;">
+                                        <div style="position:absolute;bottom:10px;left:100px;">{{ enzyme.name }}</div>
-                        {{ enzyme.name }}
+                                        <div style="float:right;">{{ enzyme.linking_method }}</div>
-                      </div>
-                      <div style="float:right;">
-                        {{ enzyme.linking_method }}
-                      </div>
                                     </a>
                                 {% endfor %}
                             </div>
@@ -176,5 +123,5 @@
             </div>
         {% endif %}
     </div>
-  </div>
+</div>
 {% endblock content %}

templates/objects/compound.html

@@ -14,27 +14,14 @@
 
     <div class="panel-group" id="compound-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ compound.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/compound.html" %}
@@ -44,30 +31,22 @@
             </div>
             <div class="panel-body">
                 <p>
-          The structures stored in this compound can be found at
+                    The structures stored in this compound can be found at <a target="_blank"
-          <a target="_blank" href="{{ compound.url }}/structure" role="button"
+                                                                              href="{{ compound.url }}/structure"
-            >Compound structures &gt;&gt;</a
+                                                                              role="button">Compound structures
-          >
+                    &gt;&gt;</a>
                 </p>
             </div>
 
             {% if compound.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="compound-aliases-link" data-toggle="collapse" data-parent="#compound-detail"
-              id="compound-aliases-link"
+                           href="#compound-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#compound-detail"
-              href="#compound-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="compound-aliases" class="panel-collapse in collapse">
+                <div id="compound-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in compound.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -77,42 +56,26 @@
             {% endif %}
 
             <!-- Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="compound-desc-link" data-toggle="collapse" data-parent="#compound-detail"
-            id="compound-desc-link"
+                       href="#compound-desc">Description</a>
-            data-toggle="collapse"
-            data-parent="#compound-detail"
-            href="#compound-desc"
-            >Description</a
-          >
                 </h4>
             </div>
-      <div id="compound-desc" class="panel-collapse in collapse">
+            <div id="compound-desc" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ compound.description|safe }}
                 </div>
             </div>
 
             <!-- Image -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="compound-image-link" data-toggle="collapse" data-parent="#compound-detail"
-            id="compound-image-link"
+                       href="#compound-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#compound-detail"
-            href="#compound-image"
-            >Image Representation</a
-          >
                 </h4>
             </div>
-      <div id="compound-image" class="panel-collapse in collapse">
+            <div id="compound-image" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     <div id="image-div" align="center">
                         {{ compound.default_structure.as_svg|safe }}
@@ -121,63 +84,39 @@
             </div>
 
             <!-- SMILES -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="compound-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
-            id="compound-smiles-link"
+                       href="#compound-smiles">SMILES Representation</a>
-            data-toggle="collapse"
-            data-parent="#compound-detail"
-            href="#compound-smiles"
-            >SMILES Representation</a
-          >
                 </h4>
             </div>
-      <div id="compound-smiles" class="panel-collapse in collapse">
+            <div id="compound-smiles" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ compound.default_structure.smiles }}
                 </div>
             </div>
 
             <!-- Canonical SMILES -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="compound-canonical-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
-            id="compound-canonical-smiles-link"
+                       href="#compound-canonical-smiles">Canonical SMILES Representation</a>
-            data-toggle="collapse"
-            data-parent="#compound-detail"
-            href="#compound-canonical-smiles"
-            >Canonical SMILES Representation</a
-          >
                 </h4>
             </div>
-      <div id="compound-canonical-smiles" class="panel-collapse in collapse">
+            <div id="compound-canonical-smiles" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ compound.default_structure.canonical_smiles }}
                 </div>
             </div>
 
             <!-- InChiKey -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="compound-inchi-link" data-toggle="collapse" data-parent="#compound-detail"
-            id="compound-inchi-link"
+                       href="#compound-inchi">InChIKey</a>
-            data-toggle="collapse"
-            data-parent="#compound-detail"
-            href="#compound-inchi"
-            >InChIKey</a
-          >
                 </h4>
             </div>
-      <div id="compound-inchi" class="panel-collapse in collapse">
+            <div id="compound-inchi" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ compound.default_structure.inchikey }}
                 </div>
@@ -185,26 +124,16 @@
 
             <!-- Reactions -->
             {% if compound.related_reactions %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="compound-reaction-link" data-toggle="collapse" data-parent="#compound-detail"
-              id="compound-reaction-link"
+                           href="#compound-reaction">Reactions</a>
-              data-toggle="collapse"
-              data-parent="#compound-detail"
-              href="#compound-reaction"
-              >Reactions</a
-            >
                     </h4>
                 </div>
-        <div id="compound-reaction" class="panel-collapse in collapse">
+                <div id="compound-reaction" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in compound.related_reactions %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
-                >{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -212,26 +141,16 @@
 
             <!-- Pathways -->
             {% if compound.related_pathways %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="compound-pathway-link" data-toggle="collapse" data-parent="#compound-detail"
-              id="compound-pathway-link"
+                           href="#compound-pathway">Pathways</a>
-              data-toggle="collapse"
-              data-parent="#compound-detail"
-              href="#compound-pathway"
-              >Pathways</a
-            >
                     </h4>
                 </div>
-        <div id="compound-pathway" class="panel-collapse in collapse">
+                <div id="compound-pathway" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in compound.related_pathways %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
-                >{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -239,26 +158,16 @@
 
             <!-- Scenarios -->
             {% if compound.scenarios.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="compound-scenario-link" data-toggle="collapse" data-parent="#compound-detail"
-              id="compound-scenario-link"
+                           href="#compound-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#compound-detail"
-              href="#compound-scenario"
-              >Scenarios</a
-            >
                     </h4>
                 </div>
-        <div id="compound-scenario" class="panel-collapse in collapse">
+                <div id="compound-scenario" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for s in compound.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                            <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -266,106 +175,67 @@
 
             <!-- External Identifiers -->
             {% if compound.get_external_identifiers %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="compound-external-identifier-link" data-toggle="collapse" data-parent="#compound-detail"
-              id="compound-external-identifier-link"
+                           href="#compound-external-identifier">External Identifier</a>
-              data-toggle="collapse"
-              data-parent="#compound-detail"
-              href="#compound-external-identifier"
-              >External Identifier</a
-            >
                     </h4>
                 </div>
-        <div
+                <div id="compound-external-identifier" class="panel-collapse collapse in">
-          id="compound-external-identifier"
-          class="panel-collapse in collapse"
-        >
                     <div class="panel-body list-group-item">
                         {% if compound.get_pubchem_compound_identifiers %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
-                    id="compound-pubchem-identifier-link"
-                    data-toggle="collapse"
                                        data-parent="#compound-external-identifier"
-                    href="#compound-pubchem-identifier"
+                                       href="#compound-pubchem-identifier">PubChem Compound Identifier</a>
-                    >PubChem Compound Identifier</a
-                  >
                                 </h4>
                             </div>
-              <div
+                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
-                id="compound-pubchem-identifier"
-                class="panel-collapse in collapse"
-              >
                                 {% for eid in compound.get_pubchem_compound_identifiers %}
-                  <a class="list-group-item" href="{{ eid.external_url }}"
+                                    <a class="list-group-item"
-                    >CID{{ eid.identifier_value }}</a
+                                       href="{{ eid.external_url }}">CID{{ eid.identifier_value }}</a>
-                  >
                                 {% endfor %}
                             </div>
                         {% endif %}
                         {% if compound.get_pubchem_substance_identifiers %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
-                    id="compound-pubchem-identifier-link"
-                    data-toggle="collapse"
                                        data-parent="#compound-external-identifier"
-                    href="#compound-pubchem-identifier"
+                                       href="#compound-pubchem-identifier">PubChem Substance Identifier</a>
-                    >PubChem Substance Identifier</a
-                  >
                                 </h4>
                             </div>
-              <div
+                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
-                id="compound-pubchem-identifier"
-                class="panel-collapse in collapse"
-              >
                                 {% for eid in compound.get_pubchem_substance_identifiers %}
-                  <a class="list-group-item" href="{{ eid.external_url }}"
+                                    <a class="list-group-item"
-                    >SID{{ eid.identifier_value }}</a
+                                       href="{{ eid.external_url }}">SID{{ eid.identifier_value }}</a>
-                  >
                                 {% endfor %}
                             </div>
                         {% endif %}
                         {% if compound.get_chebi_identifiers %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="compound-chebi-identifier-link" data-toggle="collapse"
-                    id="compound-chebi-identifier-link"
-                    data-toggle="collapse"
                                        data-parent="#compound-external-identifier"
-                    href="#compound-chebi-identifier"
+                                       href="#compound-chebi-identifier">ChEBI Identifier</a>
-                    >ChEBI Identifier</a
-                  >
                                 </h4>
                             </div>
-              <div
+                            <div id="compound-chebi-identifier" class="panel-collapse collapse in">
-                id="compound-chebi-identifier"
-                class="panel-collapse in collapse"
-              >
                                 {% for eid in compound.get_chebi_identifiers %}
-                  <a class="list-group-item" href="{{ eid.external_url }}"
+                                    <a class="list-group-item"
-                    >CHEBI:{{ eid.identifier_value }}</a
+                                       href="{{ eid.external_url }}">CHEBI:{{ eid.identifier_value }}</a>
-                  >
                                 {% endfor %}
                             </div>
                         {% endif %}
                     </div>
                 </div>
             {% endif %}
+
         </div>
+
     </div>
 {% endblock content %}

templates/objects/compound_structure.html

@@ -10,29 +10,16 @@
         {% include "modals/objects/generic_delete_modal.html" %}
     {% endblock action_modals %}
 
-  <div class="panel-group" id="compound-structure-detail">
+<div class="panel-group" id="compound-structure-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {{ compound_structure.name|safe }}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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/compound_structure.html" %}
@@ -41,25 +28,17 @@
             </div>
         </div>
         <div class="panel-body">
-        <p>{{ compound_structure.description|safe }}</p>
+            <p> {{ compound_structure.description|safe }} </p>
         </div>
 
         <!-- Image -->
-      <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
             <h4 class="panel-title">
-          <a
+                <a id="compound-structure-image-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-            id="compound-structure-image-link"
+                   href="#compound-structure-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#compound-structure-detail"
-            href="#compound-structure-image"
-            >Image Representation</a
-          >
             </h4>
         </div>
-      <div id="compound-structure-image" class="panel-collapse in collapse">
+        <div id="compound-structure-image" class="panel-collapse collapse in">
             <div class="panel-body list-group-item">
                 <div id="image-div" align="center">
                     {{ compound_structure.as_svg|safe }}
@@ -68,21 +47,13 @@
         </div>
 
         <!-- SMILES -->
-      <div
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
             <h4 class="panel-title">
-          <a
+                <a id="compound-structure-smiles-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-            id="compound-structure-smiles-link"
+                   href="#compound-structure-smiles">SMILES Representation</a>
-            data-toggle="collapse"
-            data-parent="#compound-structure-detail"
-            href="#compound-structure-smiles"
-            >SMILES Representation</a
-          >
             </h4>
         </div>
-      <div id="compound-structure-smiles" class="panel-collapse in collapse">
+        <div id="compound-structure-smiles" class="panel-collapse collapse in">
             <div class="panel-body list-group-item">
                 {{ compound_structure.smiles }}
             </div>
@@ -90,21 +61,13 @@
 
         {% if compound_structure.aliases %}
             <!-- Aliases -->
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="compound-structure-aliases-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-              id="compound-structure-aliases-link"
+                       href="#compound-structure-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#compound-structure-detail"
-              href="#compound-structure-aliases"
-              >Aliases</a
-            >
                 </h4>
             </div>
-        <div id="compound-structure-aliases" class="panel-collapse in collapse">
+            <div id="compound-structure-aliases" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for alias in compound_structure.aliases %}
                         <a class="list-group-item">{{ alias }}</a>
@@ -114,29 +77,16 @@
         {% endif %}
 
         {% if compound_structure.scenarios.all %}
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="compound-structure-scenario-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-              id="compound-structure-scenario-link"
+                       href="#compound-structure-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#compound-structure-detail"
-              href="#compound-structure-scenario"
-              >Scenarios</a
-            >
                 </h4>
             </div>
-        <div
+            <div id="compound-structure-scenario" class="panel-collapse collapse in">
-          id="compound-structure-scenario"
-          class="panel-collapse in collapse"
-        >
                 <div class="panel-body list-group-item">
                     {% for s in compound_structure.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                        <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                     {% endfor %}
                 </div>
             </div>
@@ -145,6 +95,8 @@
         <!-- Reactions -->
 
         <!-- Pathways -->
+
     </div>
-  </div>
+
+</div>
 {% endblock content %}

templates/objects/edge.html

@@ -3,7 +3,7 @@
 {% block content %}
 
     {% block action_modals %}
-    {#        {% include "modals/objects/edit_edge_modal.html" %}#}
+{#        {% include "modals/objects/edit_edge_modal.html" %}#}
         {% include "modals/objects/generic_set_aliases_modal.html" %}
         {% include "modals/objects/generic_set_scenario_modal.html" %}
         {% include "modals/objects/generic_delete_modal.html" %}
@@ -11,27 +11,14 @@
 
     <div class="panel-group" id="edge-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ edge.edge_label.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/edge.html" %}
@@ -41,21 +28,13 @@
             </div>
 
             <!-- Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="edge-desc-link" data-toggle="collapse" data-parent="#edge-detail"
-            id="edge-desc-link"
+                       href="#edge-desc">Description</a>
-            data-toggle="collapse"
-            data-parent="#edge-detail"
-            href="#edge-desc"
-            >Description</a
-          >
                 </h4>
             </div>
-      <div id="edge-desc" class="panel-collapse in collapse">
+            <div id="edge-desc" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ edge.description|safe }}
                 </div>
@@ -63,21 +42,13 @@
 
             {% if edge.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="edge-aliases-link" data-toggle="collapse" data-parent="#edge-detail"
-              id="edge-aliases-link"
+                           href="#edge-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#edge-detail"
-              href="#edge-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="edge-aliases" class="panel-collapse in collapse">
+                <div id="edge-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in edge.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -87,21 +58,13 @@
             {% endif %}
 
             <!-- Image -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="edge-image-link" data-toggle="collapse" data-parent="#edge-detail"
-            id="edge-image-link"
+                       href="#edge-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#edge-detail"
-            href="#edge-image"
-            >Image Representation</a
-          >
                 </h4>
             </div>
-      <div id="edge-image" class="panel-collapse in collapse">
+            <div id="edge-image" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     <div id="image-div" align="center">
                         {{ edge.edge_label.as_svg|safe }}
@@ -110,56 +73,33 @@
             </div>
 
             <!-- Reaction Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="edge-description-link" data-toggle="collapse" data-parent="#edge-description-detail"
-            id="edge-description-link"
+                       href="#edge-description-smiles">Reaction Description</a>
-            data-toggle="collapse"
-            data-parent="#edge-description-detail"
-            href="#edge-description-smiles"
-            >Reaction Description</a
-          >
                 </h4>
             </div>
-      <div id="edge-description-smiles" class="panel-collapse in collapse">
+            <div id="edge-description-smiles" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for educt in edge.start_nodes.all %}
-            <a class="btn btn-default" href="{{ educt.url }}"
+                        <a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
-              >{{ educt.name|safe }}</a
-            >
                     {% endfor %}
-          <span
+                    <span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
-            class="glyphicon glyphicon-arrow-right"
+                          aria-hidden="true"></span>
-            style="margin-left:5em;margin-right:5em;"
-            aria-hidden="true"
-          ></span>
                     {% for product in edge.end_nodes.all %}
-            <a class="btn btn-default" href="{{ product.url }}"
+                        <a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
-              >{{ product.name|safe }}</a
-            >
                     {% endfor %}
                 </div>
             </div>
 
             <!-- SMIRKS -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="edge-smirks-link" data-toggle="collapse" data-parent="#edge-detail"
-            id="edge-smirks-link"
+                       href="#edge-smirks">SMIRKS Representation</a>
-            data-toggle="collapse"
-            data-parent="#edge-detail"
-            href="#edge-smirks"
-            >SMIRKS Representation</a
-          >
                 </h4>
             </div>
-      <div id="edge-smirks" class="panel-collapse in collapse">
+            <div id="edge-smirks" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ edge.edge_label.smirks }}
                 </div>
@@ -167,56 +107,36 @@
 
             {% if edge.edge_label.rules.all %}
                 <!-- Rules -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="edge-rules-link" data-toggle="collapse" data-parent="#edge-detail"
-              id="edge-rules-link"
+                           href="#edge-rules">Rules</a>
-              data-toggle="collapse"
-              data-parent="#edge-detail"
-              href="#edge-rules"
-              >Rules</a
-            >
                     </h4>
                 </div>
-        <div id="edge-rules" class="panel-collapse in collapse">
+                <div id="edge-rules" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in edge.edge_label.rules.all %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
-                >{{ r.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             {% if edge.scenarios.all %}
-        <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                 <h4 class="panel-title">
-            <a
+                    <a id="edge-scenario-link" data-toggle="collapse" data-parent="#edge-detail"
-              id="edge-scenario-link"
+                       href="#edge-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#edge-detail"
-              href="#edge-scenario"
-              >Scenarios</a
-            >
                 </h4>
             </div>
-        <div id="edge-scenario" class="panel-collapse in collapse">
+            <div id="edge-scenario" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for s in edge.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                        <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                     {% endfor %}
                 </div>
             </div>
             {% endif %}
-    </div>
+
     </div>
 {% endblock content %}

templates/objects/enzymelink.html

@@ -1,164 +1,105 @@
 {% extends "framework.html" %}
 
 {% block content %}
+
     <div class="panel-group" id="enzyme-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ enzymelink.ec_number }}
             </div>
 
             <!-- Name -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="enzyme-name-link" data-toggle="collapse" data-parent="#enzyme-detail"
-            id="enzyme-name-link"
+                       href="#enzyme-name">Enzyme Name</a>
-            data-toggle="collapse"
-            data-parent="#enzyme-detail"
-            href="#enzyme-name"
-            >Enzyme Name</a
-          >
                 </h4>
             </div>
-      <div id="enzyme-name" class="panel-collapse in collapse">
+            <div id="enzyme-name" class="panel-collapse collapse in">
-        <div class="panel-body list-group-item">{{ enzymelink.name }}</div>
+                <div class="panel-body list-group-item">
+                    {{ enzymelink.name }}
+                </div>
             </div>
 
             <!-- Linking Method -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="enzyme-linking-link" data-toggle="collapse" data-parent="#enzyme-detail"
-            id="enzyme-linking-link"
+                       href="#enzyme-linking">Linking Method</a>
-            data-toggle="collapse"
-            data-parent="#enzyme-detail"
-            href="#enzyme-linking"
-            >Linking Method</a
-          >
                 </h4>
             </div>
-      <div id="enzyme-linking" class="panel-collapse in collapse">
+            <div id="enzyme-linking" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ enzymelink.linking_method }}. &nbsp;<a
-            href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks"
+                        href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks" target="#">Learn more &gt;&gt;</a>
-            target="#"
-            >Learn more &gt;&gt;</a
-          >
                 </div>
             </div>
 
             {% if enzymelink.kegg_reaction_links %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="enzyme-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
-              id="enzyme-evidence-link"
+                           href="#enzyme-evidence">Linking Evidence</a>
-              data-toggle="collapse"
-              data-parent="#enzyme-detail"
-              href="#enzyme-evidence"
-              >Linking Evidence</a
-            >
                     </h4>
                 </div>
-        <div id="enzyme-evidence" class="panel-collapse in collapse">
+                <div id="enzyme-evidence" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for kl in enzymelink.kegg_reaction_links %}
-              <a class="list-group-item" href="{{ kl.external_url }}"
+                            <a class="list-group-item"
-                >{{ kl.identifier_value }}</a
+                               href="{{ kl.external_url }}">{{ kl.identifier_value }}</a>
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             {% if enzymelink.reaction_evidence.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="enzyme-reaction-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
-              id="enzyme-reaction-evidence-link"
+                           href="#enzyme-reaction-evidence">Linking Evidence - enviPath Reactions</a>
-              data-toggle="collapse"
-              data-parent="#enzyme-detail"
-              href="#enzyme-reaction-evidence"
-              >Linking Evidence - enviPath Reactions</a
-            >
                     </h4>
                 </div>
-        <div id="enzyme-reaction-evidence" class="panel-collapse in collapse">
+                <div id="enzyme-reaction-evidence" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in enzymelink.reaction_evidence.all %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name }} <i>({{ r.package.name }})</i></a>
-                >{{ r.name }} <i>({{ r.package.name }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             {% if enzymelink.edge_evidence.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="enzyme-edge-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
-              id="enzyme-edge-evidence-link"
+                           href="#enzyme-edge-evidence">Linking Evidence - enviPath Pathways</a>
-              data-toggle="collapse"
-              data-parent="#enzyme-detail"
-              href="#enzyme-edge-evidence"
-              >Linking Evidence - enviPath Pathways</a
-            >
                     </h4>
                 </div>
-        <div id="enzyme-edge-evidence" class="panel-collapse in collapse">
+                <div id="enzyme-edge-evidence" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for e in enzymelink.edge_evidence.all %}
-              <a class="list-group-item" href="{{ e.pathway.url }}"
+                            <a class="list-group-item" href="{{ e.pathway.url }}">{{ e.pathway.name }}
-                >{{ e.pathway.name }} <i>({{ r.package.name }})</i></a
+                                <i>({{ r.package.name }})</i></a>
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             <!-- External DB Reference -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="enzyme-external-identifier-link" data-toggle="collapse" data-parent="#enzyme-detail"
-            id="enzyme-external-identifier-link"
+                       href="#enzyme-external-identifier">External DB References</a>
-            data-toggle="collapse"
-            data-parent="#enzyme-detail"
-            href="#enzyme-external-identifier"
-            >External DB References</a
-          >
                 </h4>
             </div>
-      <div id="enzyme-external-identifier" class="panel-collapse in collapse">
+            <div id="enzyme-external-identifier" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <a
+                    <a class="list-group-item"
-            class="list-group-item"
                        href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ enzymelink.ec_number }}"
-            target="_blank"
+                       target="_blank"> Brenda entry for {{ enzymelink.ec_number }}</a>
-          >
-            Brenda entry for {{ enzymelink.ec_number }}</a
-          >
                 </div>
             </div>
+
         </div>
     </div>
 {% endblock content %}

templates/objects/group.html

@@ -2,35 +2,22 @@
 
 {% block content %}
 
-  {% block action_modals %}
+{% block action_modals %}
-    {% include "modals/objects/edit_group_modal.html" %}
+{% include "modals/objects/edit_group_modal.html" %}
-    {% include "modals/objects/edit_group_member_modal.html" %}
+{% include "modals/objects/edit_group_member_modal.html" %}
-    {% include "modals/objects/generic_delete_modal.html" %}
+{% include "modals/objects/generic_delete_modal.html" %}
-  {% endblock action_modals %}
+{% endblock action_modals %}
 
-  <div class="panel-group" id="package-detail">
+<div class="panel-group" id="package-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {{ group.name|safe }}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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/group.html" %}
@@ -39,28 +26,20 @@
             </div>
         </div>
         <div class="panel-body">
-        <p>{{ group.description|safe }}</p>
+            <p> {{ group.description|safe }} </p>
         </div>
     </div>
 
     <p></p>
 
     <div class="panel panel-default">
-      <div
+        <div id="member-panel" style="font-size:2rem;height: 46px" class="panel-heading">Members</div>
-        id="member-panel"
-        style="font-size:2rem;height: 46px"
-        class="panel-heading"
-      >
-        Members
-      </div>
         <div class="panel-body">
             <p>List of members of this group</p>
         </div>
         <ul class="list-group">
             {% for um in group.user_member.all %}
-          <a class="list-group-item" href="{{ um.url }}"
+            <a class="list-group-item" href="{{ um.url }}">{{ um.username|safe }}</a>
-            >{{ um.username|safe }}</a
-          >
             {% endfor %}
             {% for gm in group.group_member.all %}
             <a class="list-group-item" href="{{ gm.url }}">{{ gm.name|safe }}</a>
@@ -71,13 +50,7 @@
     <p></p>
 
     <div class="panel panel-default">
-      <div
+        <div id="package-panel" style="font-size:2rem;height: 46px" class="panel-heading">Packages</div>
-        id="package-panel"
-        style="font-size:2rem;height: 46px"
-        class="panel-heading"
-      >
-        Packages
-      </div>
         <div class="panel-body">
             <p>Packages where this group has access to</p>
         </div>
@@ -87,5 +60,5 @@
             {% endfor %}
         </ul>
     </div>
-  </div>
+</div>
 {% endblock content %}

templates/objects/model.html

@@ -67,7 +67,7 @@
             >
           </h4>
         </div>
-        <div id="rule-package" class="panel-collapse in collapse">
+        <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 }}"
@@ -91,7 +91,7 @@
             >
           </h4>
         </div>
-        <div id="reaction-package" class="panel-collapse in collapse">
+        <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 }}"
@@ -116,7 +116,7 @@
               >
             </h4>
           </div>
-          <div id="eval-package" class="panel-collapse in collapse">
+          <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 }}"
@@ -141,7 +141,7 @@
             >
           </h4>
         </div>
-        <div id="model-status" class="panel-collapse in collapse">
+        <div id="model-status" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">{{ model.status }}</div>
         </div>
       {% endif %}
@@ -161,7 +161,7 @@
             >
           </h4>
         </div>
-        <div id="predict-smiles" class="panel-collapse in collapse">
+        <div id="predict-smiles" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <div class="input-group">
               <input
@@ -203,7 +203,7 @@
             >
           </h4>
         </div>
-        <div id="app-domain-assessment" class="panel-collapse in collapse">
+        <div id="app-domain-assessment" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <div class="input-group">
               <input
@@ -245,7 +245,7 @@
             >
           </h4>
         </div>
-        <div id="sg-curve" class="panel-collapse in collapse">
+        <div id="sg-curve" class="panel-collapse collapse in">
           <div class="panel-body list-group-item">
             <!-- Center container contents -->
             <div

templates/objects/node.html

@@ -11,27 +11,14 @@
 
     <div class="panel-group" id="node-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ node.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/node.html" %}
@@ -40,26 +27,17 @@
                 </div>
             </div>
             <div class="panel-body">
-        The underlying structure can be found
+                The underlying structure can be found <a href="{{ node.default_node_label.url }}">here</a>.
-        <a href="{{ node.default_node_label.url }}">here</a>.
             </div>
 
             <!-- Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail"
-            id="node-desc-link"
+                       href="#node-desc">Description</a>
-            data-toggle="collapse"
-            data-parent="#node-detail"
-            href="#node-desc"
-            >Description</a
-          >
                 </h4>
             </div>
-      <div id="node-desc" class="panel-collapse in collapse">
+            <div id="node-desc" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ node.description|safe }}
                 </div>
@@ -67,21 +45,13 @@
 
             {% if node.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="node-aliases-link" data-toggle="collapse" data-parent="#node-detail"
-              id="node-aliases-link"
+                           href="#node-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#node-detail"
-              href="#node-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="node-aliases" class="panel-collapse in collapse">
+                <div id="node-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in node.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -91,21 +61,13 @@
             {% endif %}
 
             <!-- Image -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="node-image-link" data-toggle="collapse" data-parent="#node-detail"
-            id="node-image-link"
+                       href="#node-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#node-detail"
-            href="#node-image"
-            >Image Representation</a
-          >
                 </h4>
             </div>
-      <div id="node-image" class="panel-collapse in collapse">
+            <div id="node-image" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     <div id="image-div" align="center">
                         {{ node.default_node_label.as_svg|safe }}
@@ -114,47 +76,29 @@
             </div>
 
             <!-- SMILES -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="node-smiles-link" data-toggle="collapse" data-parent="#node-detail"
-            id="node-smiles-link"
+                       href="#node-smiles">SMILES Representation</a>
-            data-toggle="collapse"
-            data-parent="#node-detail"
-            href="#node-smiles"
-            >SMILES Representation</a
-          >
                 </h4>
             </div>
-      <div id="node-smiles" class="panel-collapse in collapse">
+            <div id="node-smiles" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ node.default_node_label.smiles }}
                 </div>
             </div>
 
             {% if node.scenarios.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="node-scenario-link" data-toggle="collapse" data-parent="#node-detail"
-              id="node-scenario-link"
+                           href="#node-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#node-detail"
-              href="#node-scenario"
-              >Scenarios</a
-            >
                     </h4>
                 </div>
-        <div id="node-scenario" class="panel-collapse in collapse">
+                <div id="node-scenario" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for s in node.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                            <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -162,14 +106,16 @@
 
             {% if app_domain_assessment_data %}
                 <div id="appDomainAssessmentResultTable"></div>
-        {# prettier-ignore-start #}
                 <script>
                     $(document).ready(function () {
                         handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }})
                     })
                 </script>
-                {# prettier-ignore-end #}
             {% endif %}
+
         </div>
+
     </div>
+
+
 {% endblock content %}

templates/objects/package.html

@@ -2,38 +2,25 @@
 
 {% block content %}
 
-  {% block action_modals %}
+{% block action_modals %}
     {% include "modals/objects/edit_package_modal.html" %}
     {% include "modals/objects/edit_package_permissions_modal.html" %}
     {% include "modals/objects/publish_package_modal.html" %}
     {% include "modals/objects/set_license_modal.html" %}
     {% include "modals/objects/export_package_modal.html" %}
     {% include "modals/objects/generic_delete_modal.html" %}
-  {% endblock action_modals %}
+{% endblock action_modals %}
 
-  <div class="panel-group" id="package-detail">
+<div class="panel-group" id="package-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {{ package.name|safe }}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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/package.html" %}
@@ -42,38 +29,30 @@
             </div>
         </div>
         <div class="panel-body">
-        <p>{{ package.description|safe }}</p>
+            <p> {{ package.description|safe }} </p>
         </div>
         <ul class="list-group">
             <li class="list-group-item">
-          <a href="{{ package.url }}/pathway"
+                <a href="{{ package.url }}/pathway">Pathways ({{ package.pathways.count }})</a>
-            >Pathways ({{ package.pathways.count }})</a
-          >
             </li>
             <li class="list-group-item">
                 <a href="{{ package.url }}/rule">Rules ({{ package.rules.count }})</a>
             </li>
             <li class="list-group-item">
-          <a href="{{ package.url }}/compound"
+                <a href="{{ package.url }}/compound">Compounds ({{ package.compounds.count }})</a>
-            >Compounds ({{ package.compounds.count }})</a
-          >
             </li>
             <li class="list-group-item">
-          <a href="{{ package.url }}/reaction"
+                <a href="{{ package.url }}/reaction">Reactions ({{ package.reactions.count }})</a>
-            >Reactions ({{ package.reactions.count }})</a
-          >
             </li>
             <li class="list-group-item">
-          <a href="{{ package.url }}/model"
+                <a href="{{ package.url }}/model">Models ({{ package.models.count }})</a>
-            >Models ({{ package.models.count }})</a
-          >
             </li>
             <li class="list-group-item">
-          <a href="{{ package.url }}/scenario"
+                <a href="{{ package.url }}/scenario">Scenarios ({{ package.scenarios.count }})</a>
-            >Scenarios ({{ package.scenarios.count }})</a
-          >
             </li>
         </ul>
+
     </div>
-  </div>
+
+</div>
 {% endblock content %}

templates/objects/pathway.html

@@ -1,6 +1,7 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
+
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
         #vizdiv {
@@ -18,6 +19,7 @@
         .link {
             stroke: #999;
             stroke-opacity: 0.6;
+            //marker-end: url(#arrow);
         }
 
         .link_no_arrow {
@@ -59,6 +61,7 @@
             stroke-opacity: 0.6;
         }
 
+
         .highlighted {
             stroke: red;
             stroke-width: 3px;
@@ -70,7 +73,7 @@
             padding: 5px;
             border-radius: 5px;
             visibility: hidden;
-      opacity: 1;
+            opacity: 1
         }
     </style>
     <script src="{% static 'js/pw.js' %}"></script>
@@ -94,47 +97,29 @@
     <div id="pwcontent">
         <div class="panel-group" id="pwAccordion">
             <div class="panel panel-default">
-        <div
+                <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-          class="panel-heading"
-          id="headingPanel"
-          style="font-size:2rem;height: 46px"
-        >
                     {{ pathway.name|safe }}
                 </div>
             </div>
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
-            id="vizLink"
-            data-toggle="collapse"
-            data-parent="#pwAccordion"
-            href="#viz"
-          >
                         Graphical Representation
                     </a>
                 </h4>
             </div>
-      <div id="viz" class="panel-collapse in collapse">
+            <div id="viz" class="panel-collapse collapse in">
                 <nav role="navigation" class="navbar navbar-default" style="margin: 0;">
-          <div class="navbar-header"></div>
+                    <div class="navbar-header">
-          <div id="editbarCollapse" class="navbar-collapse collapse">
+                    </div>
+                    <div id="editbarCollapse" class="collapse navbar-collapse ">
                         <ul class="nav navbar-nav">
                             <li class="dropdown requiresWritePerm">
-                <a
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                  href="#"
+                                   aria-haspopup="true" aria-expanded="false">
-                  class="dropdown-toggle"
-                  data-toggle="dropdown"
-                  role="button"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
                                     <span class="glyphicon glyphicon-edit"></span>
                                     Edit
-                  <span class="caret"></span
+                                    <span class="caret"></span></a>
-                ></a>
                                 <ul id="editingList" class="dropdown-menu">
                                     {% block actions %}
                                         {% include "actions/objects/pathway.html" %}
@@ -143,27 +128,15 @@
                             </li>
                             {% if pathway.setting.model.app_domain %}
                             <li class="dropdown">
-                  <a
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                    href="#"
+                                   aria-haspopup="true" aria-expanded="false">
-                    class="dropdown-toggle"
-                    data-toggle="dropdown"
-                    role="button"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
                                     <span class="glyphicon glyphicon-eye-open"></span>
                                     View
-                    <span class="caret"></span
+                                    <span class="caret"></span></a>
-                  ></a>
                                 <ul id="editingList" class="dropdown-menu">
                                     <li>
                                         <a class="button" id="app-domain-toggle-button">
-                        <i
+                                            <i id="app-domain-toggle-button" class="glyphicon glyphicon-eye-open"></i> App Domain View</a>
-                          id="app-domain-toggle-button"
-                          class="glyphicon glyphicon-eye-open"
-                        ></i>
-                        App Domain View</a
-                      >
                                     </li>
                                 </ul>
                             </li>
@@ -172,96 +145,51 @@
 
                         <ul class="nav navbar-nav navbar-right">
                             <li>
-                <a
+                                <a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
-                  role="button"
-                  data-toggle="modal"
-                  onclick="goFullscreen('vizdiv')"
-                >
                                     <span class="glyphicon glyphicon-fullscreen"></span>
                                     Fullscreen
                                 </a>
                             </li>
                             <li>
                                 {% if pathway.completed %}
-                  <button
+                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
-                    type="button"
+                                            id="status" data-original-title="" title=""
-                    class="btn btn-default navbar-btn"
+                                            data-content="Pathway prediction complete.">
-                    data-toggle="popover"
-                    id="status"
-                    data-original-title=""
-                    title=""
-                    data-content="Pathway prediction complete."
-                  >
                                         <span class="glyphicon glyphicon-ok"></span>
                                     </button>
                                 {% elif pathway.failed %}
-                  <button
+                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
-                    type="button"
+                                            id="status" data-original-title="" title=""
-                    class="btn btn-default navbar-btn"
+                                            data-content="Pathway prediction failed.">
-                    data-toggle="popover"
-                    id="status"
-                    data-original-title=""
-                    title=""
-                    data-content="Pathway prediction failed."
-                  >
                                         <span class="glyphicon glyphicon-remove"></span>
                                     </button>
                                 {% else %}
-                  <button
+                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
-                    type="button"
+                                            id="status" data-original-title="" title=""
-                    class="btn btn-default navbar-btn"
+                                            data-content="Pathway prediction running.">
-                    data-toggle="popover"
+                                        <img height="20" src="{% static '/images/wait.gif' %}">
-                    id="status"
-                    data-original-title=""
-                    title=""
-                    data-content="Pathway prediction running."
-                  >
-                    <img height="20" src="{% static '/images/wait.gif' %}" />
                                     </button>
                                 {% endif %}
                                 &nbsp;
                             </li>
                         </ul>
+
                     </div>
                 </nav>
-        <div id="vizdiv">
+                <div id="vizdiv" >
                     <svg id="pwsvg">
                         <defs>
-              <marker
+                            <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
-                id="arrow"
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
-                viewBox="0 0 10 10"
+                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
-                refX="43"
-                refY="5"
-                markerWidth="6"
-                markerHeight="6"
-                orient="auto-start-reverse"
-                markerUnits="userSpaceOnUse"
-              >
-                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
                             </marker>
-              <marker
+                            <marker id="arrow_passes_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
-                id="arrow_passes_app_domain"
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
-                viewBox="0 0 10 10"
+                                <path d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
-                refX="43"
-                refY="5"
-                markerWidth="6"
-                markerHeight="6"
-                orient="auto-start-reverse"
-                markerUnits="userSpaceOnUse"
-              >
-                <path d="M 0 0 L 10 5 L 0 10 z" fill="green" />
                             </marker>
-              <marker
+                            <marker id="arrow_fails_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
-                id="arrow_fails_app_domain"
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
-                viewBox="0 0 10 10"
+                                <path d="M 0 0 L 10 5 L 0 10 z" fill="red"/>
-                refX="43"
-                refY="5"
-                markerWidth="6"
-                markerHeight="6"
-                orient="auto-start-reverse"
-                markerUnits="userSpaceOnUse"
-              >
-                <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
                             </marker>
                         </defs>
                         <g id="zoomable"></g>
@@ -270,21 +198,12 @@
                 </div>
             </div>
             <!-- Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
-            id="DescriptionLink"
+                       href="#Description">Description</a></h4>
-            data-toggle="collapse"
-            data-parent="#pathwayAccordion"
-            href="#Description"
-            >Description</a
-          >
-        </h4>
             </div>
-      <div id="Description" class="panel-collapse in collapse">
+            <div id="Description" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item" id="DescriptionContent">
                     {{ pathway.description | safe }}
                 </div>
@@ -292,21 +211,13 @@
 
             {% if pathway.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="pathway-aliases-link" data-toggle="collapse" data-parent="#pathway-detail"
-              id="pathway-aliases-link"
+                           href="#pathway-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#pathway-detail"
-              href="#pathway-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="pathway-aliases" class="panel-collapse in collapse">
+                <div id="pathway-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in pathway.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -316,49 +227,30 @@
             {% endif %}
 
             {% if pathway.scenarios.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="pathway-scenario-link" data-toggle="collapse" data-parent="#pathway-detail"
-              id="pathway-scenario-link"
+                           href="#pathway-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#pathway-detail"
-              href="#pathway-scenario"
-              >Scenarios</a
-            >
                     </h4>
                 </div>
-        <div id="pathway-scenario" class="panel-collapse in collapse">
+                <div id="pathway-scenario" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for s in pathway.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                            <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             {% if pathway.setting %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="pathwaySettingLink" data-toggle="collapse" data-parent="#pathwayAccordion"
-              id="pathwaySettingLink"
+                           href="#pathwaySetting">Setting</a></h4>
-              data-toggle="collapse"
-              data-parent="#pathwayAccordion"
-              href="#pathwaySetting"
-              >Setting</a
-            >
-          </h4>
                 </div>
                 <div id="pathwaySetting" class="panel-collapse collapse">
                     <div class="panel-body list-group-item" id="pathwaySettingContent">
-            <table class="table-bordered table-hover table">
+                        <table class="table table-bordered table-hover">
                             <tr style="background-color: rgba(0, 0, 0, 0.08);">
                                 <th scope="col" width="20%">Parameter</th>
                                 <th scope="col" width="80%">Value</th>
@@ -368,10 +260,7 @@
                                 <tr>
                                     <td width="20%">Model</td>
                                     <td width="80%">
-                      <table
+                                        <table width="100%" class="table table-bordered table-hover">
-                        width="100%"
-                        class="table-bordered table-hover table"
-                      >
                                             <tbody>
                                             <tr>
                                                 <td colspan="2">
@@ -387,7 +276,9 @@
                                                 <th width="80%">Parameter Value</th>
                                             </tr>
                                             <tr>
-                            <td width="20%">Threshold</td>
+                                                <td width="20%">
+                                                    Threshold
+                                                </td>
                                                 <td width="80%">
                                                     {{ pathway.setting.model_threshold }}
                                                 </td>
@@ -401,16 +292,15 @@
                                 <tr>
                                     <td width="20%">Rule Packages</td>
                                     <td width="80%">
-                      <table
+                                        <table width="100%" class="table table-bordered table-hover">
-                        width="100%"
-                        class="table-bordered table-hover table"
-                      >
                                             <tbody>
                                             <tr>
                                                 <td colspan="2">
                                                     {% for p in pathway.setting.rule_packages.all %}
                                                         <li class="list-group-item">
-                                  <a href="{{ p.url }}"> {{ p.name|safe }} </a>
+                                                            <a href="{{ p.url }}">
+                                                                {{ p.name|safe }}
+                                                            </a>
                                                         </li>
                                                     {% endfor %}
                                                 </td>
@@ -443,7 +333,6 @@
             {% endif %}
         </div>
     </div>
-  {# prettier-ignore-start #}
     <script>
         // Global switch for app domain view
         var appDomainViewEnabled = false;
@@ -566,5 +455,4 @@
         });
 
     </script>
-    {# prettier-ignore-end #}
 {% endblock content %}

templates/objects/reaction.html

@@ -13,27 +13,14 @@
 
     <div class="panel-group" id="reaction-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ reaction.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/reaction.html" %}
@@ -43,21 +30,13 @@
             </div>
 
             <!-- Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
-            id="reaction-desc-link"
+                       href="#reaction-desc">Description</a>
-            data-toggle="collapse"
-            data-parent="#reaction-detail"
-            href="#reaction-desc"
-            >Description</a
-          >
                 </h4>
             </div>
-      <div id="reaction-desc" class="panel-collapse in collapse">
+            <div id="reaction-desc" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {{ reaction.description|safe }}
                 </div>
@@ -65,21 +44,13 @@
 
             {% if reaction.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="reaction-aliases-link" data-toggle="collapse" data-parent="#reaction-detail"
-              id="reaction-aliases-link"
+                           href="#reaction-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#reaction-detail"
-              href="#reaction-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="reaction-aliases" class="panel-collapse in collapse">
+                <div id="reaction-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in reaction.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -89,102 +60,65 @@
             {% endif %}
 
             <!-- Image -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="reaction-image-link" data-toggle="collapse" data-parent="#reaction-detail"
-            id="reaction-image-link"
+                       href="#reaction-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#reaction-detail"
-            href="#reaction-image"
-            >Image Representation</a
-          >
                 </h4>
             </div>
-      <div id="reaction-image" class="panel-collapse in collapse">
+            <div id="reaction-image" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <div id="image-div" align="center">{{ reaction.as_svg|safe }}</div>
+                    <div id="image-div" align="center">
+                        {{ reaction.as_svg|safe }}
+                    </div>
                 </div>
             </div>
 
             <!-- Reaction Description -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="reaction-description-link" data-toggle="collapse" data-parent="#reaction-description-detail"
-            id="reaction-description-link"
+                       href="#reaction-description-smiles">Reaction Description</a>
-            data-toggle="collapse"
-            data-parent="#reaction-description-detail"
-            href="#reaction-description-smiles"
-            >Reaction Description</a
-          >
                 </h4>
             </div>
-      <div id="reaction-description-smiles" class="panel-collapse in collapse">
+            <div id="reaction-description-smiles" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
                     {% for educt in reaction.educts.all %}
-            <a class="btn btn-default" href="{{ educt.url }}"
+                        <a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
-              >{{ educt.name|safe }}</a
-            >
                     {% endfor %}
-          <span
+                    <span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
-            class="glyphicon glyphicon-arrow-right"
+                          aria-hidden="true"></span>
-            style="margin-left:5em;margin-right:5em;"
-            aria-hidden="true"
-          ></span>
                     {% for product in reaction.products.all %}
-            <a class="btn btn-default" href="{{ product.url }}"
+                        <a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
-              >{{ product.name|safe }}</a
-            >
                     {% endfor %}
                 </div>
             </div>
 
             <!-- SMIRKS -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="reaction-smirks-link" data-toggle="collapse" data-parent="#reaction-detail"
-            id="reaction-smirks-link"
+                       href="#reaction-smirks">SMIRKS Representation</a>
-            data-toggle="collapse"
-            data-parent="#reaction-detail"
-            href="#reaction-smirks"
-            >SMIRKS Representation</a
-          >
                 </h4>
             </div>
-      <div id="reaction-smirks" class="panel-collapse in collapse">
+            <div id="reaction-smirks" class="panel-collapse collapse in">
-        <div class="panel-body list-group-item">{{ reaction.smirks }}</div>
+                <div class="panel-body list-group-item">
+                    {{ reaction.smirks }}
+                </div>
             </div>
 
             {% if reaction.rules.all %}
                 <!-- Rules -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="reaction-rules-link" data-toggle="collapse" data-parent="#reaction-detail"
-              id="reaction-rules-link"
+                           href="#reaction-rules">Rules</a>
-              data-toggle="collapse"
-              data-parent="#reaction-detail"
-              href="#reaction-rules"
-              >Rules</a
-            >
                     </h4>
                 </div>
-        <div id="reaction-rules" class="panel-collapse in collapse">
+                <div id="reaction-rules" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in reaction.rules.all %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
-                >{{ r.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -192,28 +126,16 @@
 
             {% if reaction.get_related_enzymes %}
                 <!-- EC Numbers -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-ec-numbers-link"
+                           href="#rule-ec-numbers">EC Numbers</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-ec-numbers"
-              >EC Numbers</a
-            >
                     </h4>
                 </div>
-        <div id="rule-ec-numbers" class="panel-collapse in collapse">
+                <div id="rule-ec-numbers" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for e in reaction.get_related_enzymes %}
-              <a
+                            <a class="list-group-item" href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ e.ec_number }}">{{ e.name }}</a>
-                class="list-group-item"
-                href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ e.ec_number }}"
-                >{{ e.name }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -221,52 +143,32 @@
 
             {% if reaction.related_pathways %}
                 <!-- Pathways -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="reaction-pathway-link" data-toggle="collapse" data-parent="#reaction-detail"
-              id="reaction-pathway-link"
+                           href="#reaction-pathway">Pathways</a>
-              data-toggle="collapse"
-              data-parent="#reaction-detail"
-              href="#reaction-pathway"
-              >Pathways</a
-            >
                     </h4>
                 </div>
-        <div id="reaction-pathway" class="panel-collapse in collapse">
+                <div id="reaction-pathway" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for r in reaction.related_pathways %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
-                >{{ r.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
             {% endif %}
 
             {% if reaction.scenarios.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="reaction-scenario-link" data-toggle="collapse" data-parent="#reaction-detail"
-              id="reaction-scenario-link"
+                           href="#reaction-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#reaction-detail"
-              href="#reaction-scenario"
-              >Scenarios</a
-            >
                     </h4>
                 </div>
-        <div id="reaction-scenario" class="panel-collapse in collapse">
+                <div id="reaction-scenario" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for s in reaction.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                            <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -274,80 +176,50 @@
 
             <!-- External Identifiers -->
             {% if reaction.get_external_identifiers %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="reaction-external-identifier-link" data-toggle="collapse" data-parent="#reaction-detail"
-              id="reaction-external-identifier-link"
+                           href="#reaction-external-identifier">External Identifier</a>
-              data-toggle="collapse"
-              data-parent="#reaction-detail"
-              href="#reaction-external-identifier"
-              >External Identifier</a
-            >
                     </h4>
                 </div>
-        <div
+                <div id="reaction-external-identifier" class="panel-collapse collapse in">
-          id="reaction-external-identifier"
-          class="panel-collapse in collapse"
-        >
                     <div class="panel-body list-group-item">
                         {% if reaction.get_rhea_identifiers %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="reaction-rhea-identifier-link" data-toggle="collapse"
-                    id="reaction-rhea-identifier-link"
-                    data-toggle="collapse"
                                        data-parent="#reaction-external-identifier"
-                    href="#reaction-rhea-identifier"
+                                       href="#reaction-rhea-identifier">Rhea</a>
-                    >Rhea</a
-                  >
                                 </h4>
                             </div>
-              <div
+                            <div id="reaction-rhea-identifier" class="panel-collapse collapse in">
-                id="reaction-rhea-identifier"
-                class="panel-collapse in collapse"
-              >
                                 {% for eid in reaction.get_rhea_identifiers %}
-                  <a class="list-group-item" href="{{ eid.external_url }}"
+                                    <a class="list-group-item"
-                    >{{ eid.identifier_value }}</a
+                                       href="{{ eid.external_url }}">{{ eid.identifier_value }}</a>
-                  >
                                 {% endfor %}
                             </div>
                         {% endif %}
                         {% if reaction.get_uniprot_identifiers %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="reaction-uniprot-identifier-link" data-toggle="collapse"
-                    id="reaction-uniprot-identifier-link"
-                    data-toggle="collapse"
                                        data-parent="#reaction-external-identifier"
-                    href="#reaction-uniprot-identifier"
+                                       href="#reaction-uniprot-identifier">UniProt</a>
-                    >UniProt</a
-                  >
                                 </h4>
                             </div>
-              <div
+                            <div id="reaction-uniprot-identifier" class="panel-collapse collapse in">
-                id="reaction-uniprot-identifier"
-                class="panel-collapse in collapse"
-              >
                                 {% for eid in reaction.get_uniprot_identifiers %}
-                  <a class="list-group-item" href="{{ eid.external_url }}"
+                                    <a class="list-group-item"
-                    >10 SwissProt entries ({{ eid.identifier_value }})</a
+                                       href="{{ eid.external_url }}">10 SwissProt entries ({{ eid.identifier_value }})</a>
-                  >
                                 {% endfor %}
                             </div>
                         {% endif %}
                     </div>
                 </div>
             {% endif %}
+
         </div>
     </div>
 {% endblock content %}

templates/objects/scenario.html

@@ -9,27 +9,14 @@
     {% endblock action_modals %}
     <div class="panel-group" id="scenario-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ scenario.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/scenario.html" %}
@@ -44,18 +31,15 @@
         <div class="panel-heading">Description</div>
         <div class="panel-body">
             {{ scenario.description|safe }}
-      <br />
+            <br>
             {{ scenario.scenario_type }}
-      <br />
+            <br>
             Reported {{ scenario.scenario_date }}
         </div>
     </div>
 
     <div class="table-responsive">
-    <table
+        <table id="scenario-table" class="table table-bordered table-striped table-hover">
-      id="scenario-table"
-      class="table-bordered table-striped table-hover table"
-    >
             <tbody>
             <tr>
                 <th>Property</th>
@@ -68,25 +52,16 @@
 
             {% for ai in scenario.get_additional_information %}
                 <tr>
-            <td>{{ ai.property_name|safe }}</td>
+                    <td> {{ ai.property_name|safe }} </td>
-            <td>{{ ai.property_data|safe }}</td>
+                    <td> {{ ai.property_data|safe }} </td>
-            <td>{{ ai.property_unit|safe }}</td>
+                    <td> {{ ai.property_unit|safe }} </td>
                     {% if meta.can_edit %}
                     <td>
-                <form
+                        <form action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" method="post">
-                  action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}"
-                  method="post"
-                >
                             {% csrf_token %}
-                  <input type="hidden" name="uuid" value="{{ ai.uuid }}" />
+                            <input type="hidden" name="uuid" value="{{ ai.uuid }}">
-                  <input
+                            <input type="hidden" name="hidden" value="delete-additional-information">
-                    type="hidden"
+                            <button type="submit" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
-                    name="hidden"
-                    value="delete-additional-information"
-                  />
-                  <button type="submit" class="btn">
-                    <span class="glyphicon glyphicon-minus"></span>
-                  </button>
                         </form>
                     </td>
                     {%  endif %}
@@ -98,19 +73,10 @@
                     <td></td>
                     <td>Delete all</td>
                     <td>
-              <form
+                        <form action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" method="post">
-                action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}"
-                method="post"
-              >
                             {% csrf_token %}
-                <input
+                            <input type="hidden" name="hidden" value="delete-all-additional-information">
-                  type="hidden"
+                            <button type="submit" class="btn"><span class="glyphicon glyphicon-trash"></span></button>
-                  name="hidden"
-                  value="delete-all-additional-information"
-                />
-                <button type="submit" class="btn">
-                  <span class="glyphicon glyphicon-trash"></span>
-                </button>
                         </form>
                     </td>
                 </tr>
@@ -118,4 +84,6 @@
             </tbody>
         </table>
     </div>
+
+
 {% endblock content %}

templates/objects/simple_rule.html

@@ -12,27 +12,14 @@
 
     <div class="panel-group" id="rule-detail">
         <div class="panel panel-default">
-      <div
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
                 {{ rule.name|safe }}
-        <div
+                <div id="actionsButton"
-          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"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                         aria-haspopup="true" aria-expanded="false"><span
-          <a
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                        style="padding-right:1em"></span></a>
-            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/rule.html" %}
@@ -41,26 +28,20 @@
                 </div>
             </div>
             <div class="panel-body">
-        <p>{{ rule.description|safe }}</p>
+                <p>
+                    {{ rule.description|safe }}
+                </p>
             </div>
 
             {% if rule.aliases %}
                 <!-- Aliases -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-aliases-link"
+                           href="#rule-aliases">Aliases</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-aliases"
-              >Aliases</a
-            >
                     </h4>
                 </div>
-        <div id="rule-aliases" class="panel-collapse in collapse">
+                <div id="rule-aliases" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for alias in rule.aliases %}
                             <a class="list-group-item">{{ alias }}</a>
@@ -70,160 +51,101 @@
             {% endif %}
 
             <!-- Representation -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
-            id="rule-image-link"
+                       href="#rule-image">Image Representation</a>
-            data-toggle="collapse"
-            data-parent="#rule-detail"
-            href="#rule-image"
-            >Image Representation</a
-          >
                 </h4>
             </div>
-      <div id="rule-image" class="panel-collapse in collapse">
+            <div id="rule-image" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <div id="image-div" align="center">{{ rule.as_svg|safe }}</div>
+                    <div id="image-div" align="center">
+                        {{ rule.as_svg|safe }}
+                    </div>
                 </div>
             </div>
 
             <!-- SMIRKS -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
-            id="rule-smirks-link"
+                       href="#rule-smirks">SMIRKS Representation</a>
-            data-toggle="collapse"
-            data-parent="#rule-detail"
-            href="#rule-smirks"
-            >SMIRKS Representation</a
-          >
                 </h4>
             </div>
-      <div id="rule-smirks" class="panel-collapse in collapse">
+            <div id="rule-smirks" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <p>{{ rule.smirks }}</p>
+                    <p> {{ rule.smirks }} </p>
                 </div>
             </div>
 
             <!-- Reactants SMARTS -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
-            id="rule-reactants-smarts-link"
+                       href="#rule-reactants-smarts">Reactant SMARTS</a>
-            data-toggle="collapse"
-            data-parent="#rule-detail"
-            href="#rule-reactants-smarts"
-            >Reactant SMARTS</a
-          >
                 </h4>
             </div>
-      <div id="rule-reactants-smarts" class="panel-collapse in collapse">
+            <div id="rule-reactants-smarts" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <p>{{ rule.reactants_smarts }}</p>
+                    <p> {{ rule.reactants_smarts }} </p>
                 </div>
             </div>
 
             <!-- Reactant Filter SMARTS -->
             {% if rule.reactant_filter_smarts %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-reactant-filter-smarts-link"
+                           href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-reactant-filter-smarts"
-              >Reactant Filter SMARTS</a
-            >
                     </h4>
                 </div>
-        <div
+                <div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
-          id="rule-reactant-filter-smarts"
-          class="panel-collapse in collapse"
-        >
                     <div class="panel-body list-group-item">
-            <p>{{ rule.reactant_filter_smarts }}</p>
+                        <p> {{ rule.reactant_filter_smarts }} </p>
                     </div>
                 </div>
             {% endif %}
 
             <!-- Products SMARTS -->
-      <div
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
                 <h4 class="panel-title">
-          <a
+                    <a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
-            id="rule-products-smarts-link"
+                       href="#rule-products-smarts">Reactant SMARTS</a>
-            data-toggle="collapse"
-            data-parent="#rule-detail"
-            href="#rule-products-smarts"
-            >Reactant SMARTS</a
-          >
                 </h4>
             </div>
-      <div id="rule-products-smarts" class="panel-collapse in collapse">
+            <div id="rule-products-smarts" class="panel-collapse collapse in">
                 <div class="panel-body list-group-item">
-          <p>{{ rule.products_smarts }}</p>
+                    <p> {{ rule.products_smarts }} </p>
                 </div>
             </div>
 
             <!-- Product Filter SMARTS -->
             {% if rule.product_filter_smarts %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-product-filter-smarts-link"
+                           href="#rule-product-filter-smarts">Product Filter SMARTS</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-product-filter-smarts"
-              >Product Filter SMARTS</a
-            >
                     </h4>
                 </div>
-        <div id="rule-product-filter-smarts" class="panel-collapse in collapse">
+                <div id="rule-product-filter-smarts" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
-            <p>{{ rule.product_filter_smarts }}</p>
+                        <p> {{ rule.product_filter_smarts }} </p>
                     </div>
                 </div>
             {% endif %}
 
             <!-- Included in Composite Rules -->
             {% if rule.parallelrule_set.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-composite-rule-link"
+                           href="#rule-composite-rule">Included in Composite Rules</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-composite-rule"
-              >Included in Composite Rules</a
-            >
                     </h4>
                 </div>
-        <div id="rule-composite-rule" class="panel-collapse in collapse">
+                <div id="rule-composite-rule" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for cr in rule.parallelrule_set.all %}
-              <a class="list-group-item" href="{{ cr.url }}"
+                            <a class="list-group-item" href="{{ cr.url }}">{{ cr.name|safe }}</a>
-                >{{ cr.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -231,26 +153,16 @@
 
             <!-- Scenarios -->
             {% if rule.scenarios.all %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-scenario-link"
+                           href="#rule-scenario">Scenarios</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-scenario"
-              >Scenarios</a
-            >
                     </h4>
                 </div>
-        <div id="rule-scenario" class="panel-collapse in collapse">
+                <div id="rule-scenario" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for s in rule.scenarios.all %}
-              <a class="list-group-item" href="{{ s.url }}"
+                            <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }}</a>
-                >{{ s.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -258,26 +170,16 @@
 
             <!-- Reactions -->
             {% if rule.related_reactions %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-reaction-link"
+                           href="#rule-reaction">Reactions</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-reaction"
-              >Reactions</a
-            >
                     </h4>
                 </div>
                 <div id="rule-reaction" class="panel-collapse collapse">
                     <div class="panel-body list-group-item">
                         {% for r in rule.related_reactions %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
-                >{{ r.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -285,26 +187,16 @@
 
             <!-- Pathways -->
             {% if rule.related_pathways %}
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-pathway-link"
+                           href="#rule-pathway">Pathways</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-pathway"
-              >Pathways</a
-            >
                     </h4>
                 </div>
                 <div id="rule-pathway" class="panel-collapse collapse">
                     <div class="panel-body list-group-item">
                         {% for r in rule.related_pathways %}
-              <a class="list-group-item" href="{{ r.url }}"
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
-                >{{ r.name|safe }}</a
-              >
                         {% endfor %}
                     </div>
                 </div>
@@ -312,49 +204,32 @@
 
             {% if rule.enzymelinks %}
                 <!-- EC Numbers -->
-        <div
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-          class="panel panel-default panel-heading list-group-item"
-          style="background-color:silver"
-        >
                     <h4 class="panel-title">
-            <a
+                        <a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
-              id="rule-ec-numbers-link"
+                           href="#rule-ec-numbers">EC Numbers</a>
-              data-toggle="collapse"
-              data-parent="#rule-detail"
-              href="#rule-ec-numbers"
-              >EC Numbers</a
-            >
                     </h4>
                 </div>
-        <div id="rule-ec-numbers" class="panel-collapse in collapse">
+                <div id="rule-ec-numbers" class="panel-collapse collapse in">
                     <div class="panel-body list-group-item">
                         {% for k, v in rule.get_grouped_enzymelinks.items %}
-              <div
+                            <div class="panel panel-default panel-heading list-group-item"
-                class="panel panel-default panel-heading list-group-item"
+                                 style="background-color:silver">
-                style="background-color:silver"
-              >
                                 <h4 class="panel-title">
-                  <a
+                                    <a id="{{ k|slugify }}_Link" data-toggle="collapse"
-                    id="{{ k|slugify }}_Link"
-                    data-toggle="collapse"
                                        data-parent="#{{ k|slugify }}_Accordion"
-                    href="#{{ k|slugify }}"
+                                       href="#{{ k|slugify }}">
-                  >
                                         {{ k }}
                                     </a>
                                 </h4>
                             </div>
-              <div id="{{ k|slugify }}" class="panel-collapse in collapse">
+                            <div id="{{ k|slugify }}" class="panel-collapse collapse in">
                                 <div class="panel-body list-group-item">
                                     {% for enzyme in v %}
                                         <a class="list-group-item" href="{{ enzyme.url }}">
                                             {{ enzyme.ec_number }}
-                      <div style="position:absolute;bottom:10px;left:100px;">
+                                            <div style="position:absolute;bottom:10px;left:100px;">{{ enzyme.name }}</div>
-                        {{ enzyme.name }}
+                                            <div style="float:right;">{{ enzyme.linking_method }}</div>
-                      </div>
-                      <div style="float:right;">
-                        {{ enzyme.linking_method }}
-                      </div>
                                         </a>
                                     {% endfor %}
                                 </div>

templates/objects/user.html

@@ -2,37 +2,24 @@
 
 {% block content %}
 
-  {% block action_modals %}
+{% block action_modals %}
-    {% include "modals/objects/edit_user_modal.html" %}
+{% include "modals/objects/edit_user_modal.html" %}
-    {% include "modals/objects/edit_password_modal.html" %}
+{% include "modals/objects/edit_password_modal.html" %}
-    {% include "modals/collections/new_prediction_setting_modal.html" %}
+{% include "modals/collections/new_prediction_setting_modal.html" %}
-    {% include "modals/objects/manage_api_token_modal.html" %}
+{% include "modals/objects/manage_api_token_modal.html" %}
-    {% include "modals/objects/generic_delete_modal.html" %}
+{% include "modals/objects/generic_delete_modal.html" %}
-  {% endblock action_modals %}
+{% endblock action_modals %}
 
-  <div class="panel-group" id="user-detail">
+<div class="panel-group" id="user-detail">
     <div class="panel panel-default">
-      <div
+        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
             {{ user.username }}
-        <div
+            <div id="actionsButton"
-          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"
+                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-        >
+                                     aria-haspopup="true" aria-expanded="false"><span
-          <a
+                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-            href="#"
+                    style="padding-right:1em"></span></a>
-            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/user.html" %}
@@ -41,54 +28,33 @@
             </div>
         </div>
         <div class="panel-body">
-        <p>
+            <p> On this page you can modify your account or set preferences such as prediction settings.</p>
-          On this page you can modify your account or set preferences such as
-          prediction settings.
-        </p>
         </div>
     </div>
     <!-- Default Package -->
-    <div
+    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-      class="panel panel-default panel-heading list-group-item"
-      style="background-color:silver"
-    >
         <h4 class="panel-title">
-        <a
+            <a id="default-package-link" data-toggle="collapse" data-parent="#user-detail"
-          id="default-package-link"
+               href="#default-package">Default Package</a>
-          data-toggle="collapse"
-          data-parent="#user-detail"
-          href="#default-package"
-          >Default Package</a
-        >
         </h4>
     </div>
-    <div id="default-package" class="panel-collapse in collapse">
+    <div id="default-package" class="panel-collapse collapse in">
         <div class="panel-body list-group-item">
             <li class="list-group-item">
-          <a href="{{ user.default_package.url }}">
+                <a href="{{ user.default_package.url }}"> {{ user.default_package.name|safe }}</a>
-            {{ user.default_package.name|safe }}</a
-          >
             </li>
         </div>
     </div>
 
     <!-- Groups -->
     {% if meta.available_groups|length > 0 %}
-      <div
+    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
         <h4 class="panel-title">
-          <a
+            <a id="group-links" data-toggle="collapse" data-parent="#user-detail"
-            id="group-links"
+               href="#groups">Groups</a>
-            data-toggle="collapse"
-            data-parent="#user-detail"
-            href="#groups"
-            >Groups</a
-          >
         </h4>
     </div>
-      <div id="groups" class="panel-collapse in collapse">
+    <div id="groups" class="panel-collapse collapse in">
         <div class="panel-body list-group-item">
             {% for g in meta.available_groups %}
             <li class="list-group-item">
@@ -100,23 +66,15 @@
     {% endif %}
 
     <!-- Current Prediction Settings -->
-    <div
+    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-      class="panel panel-default panel-heading list-group-item"
-      style="background-color:silver"
-    >
         <h4 class="panel-title">
-        <a
+            <a id="current-prediction-setting-links" data-toggle="collapse" data-parent="#user-detail"
-          id="current-prediction-setting-links"
+               href="#current-prediction-setting">Current Prediction Setting</a>
-          data-toggle="collapse"
-          data-parent="#user-detail"
-          href="#current-prediction-setting"
-          >Current Prediction Setting</a
-        >
         </h4>
     </div>
-    <div id="current-prediction-setting" class="panel-collapse in collapse">
+    <div id="current-prediction-setting" class="panel-collapse collapse in">
         <div class="panel-body list-group-item">
-        <table class="table-bordered table-hover table">
+            <table class="table table-bordered table-hover">
                 <tr style="background-color: rgba(0, 0, 0, 0.08);">
                     <th scope="col" width="20%">Parameter</th>
                     <th scope="col" width="80%">Value</th>
@@ -126,12 +84,12 @@
                 <tr>
                     <td width="20%">Model</td>
                     <td width="80%">
-                  <table width="100%" class="table-bordered table-hover table">
+                        <table width="100%" class="table table-bordered table-hover">
                             <tbody>
                             <tr>
                                 <td colspan="2">
                                     <li class="list-group-item">
-                            <a href="{{ user.default_setting.model.url }}">
+                                        <a href="{{user.default_setting.model.url}}">
                                             {{ user.default_setting.model.name|safe }}
                                         </a>
                                     </li>
@@ -142,7 +100,9 @@
                                 <th width="80%">Parameter Value</th>
                             </tr>
                             <tr>
-                        <td width="20%">Threshold</td>
+                                <td width="20%">
+                                    Threshold
+                                </td>
                                 <td width="80%">
                                     {{ user.default_setting.model_threshold }}
                                 </td>
@@ -156,13 +116,15 @@
                 <tr>
                     <td width="20%">Rule Packages</td>
                     <td width="80%">
-                  <table width="100%" class="table-bordered table-hover table">
+                        <table width="100%" class="table table-bordered table-hover">
                             <tbody>
                             <tr>
                                 <td colspan="2">
                                     {% for p in user.default_setting.rule_packages.all %}
                                     <li class="list-group-item">
-                              <a href="{{ p.url }}"> {{ p.name|safe }} </a>
+                                        <a href="{{p.url}}">
+                                            {{ p.name|safe }}
+                                        </a>
                                     </li>
                                     {% endfor %}
                                 </td>
@@ -192,5 +154,5 @@
             </table>
         </div>
     </div>
-  </div>
+</div>
 {% endblock content %}

templates/pathway_playground.html

@@ -1,15 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 
     <title>Title</title>
-  </head>
+</head>
-  <body>
+<body>
-    <div id="viz"></div>
+<div id="viz"></div>
-  </body>
+</body>
-  {# prettier-ignore-start #}
 <script>
 data = {
   "aliases" : [ ] ,
@@ -854,5 +853,5 @@ function drawGraph(pathway) {
 
 drawGraph(data);
 </script>
-{# prettier-ignore-end #}
+
 </html>

templates/pathway_playground2.html

@@ -1,71 +1,38 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Force-Directed Tree</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
-      svg {
+        svg { width: 100%; height: 600px; }
-        width: 100%;
+        .link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
-        height: 600px;
+        .link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
-      }
+        .node image { cursor: pointer; }
-      .link {
+        .node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
-        stroke: #999;
+        .highlighted { stroke: red; stroke-width: 3px; }
-        stroke-opacity: 0.6;
+        .tooltip { position: absolute; background: lightgray; padding: 5px; border-radius: 5px; visibility: hidden; }
-        marker-end: url(#arrow);
+
-      }
-      .link_no_arrow {
-        stroke: #999;
-        stroke-opacity: 0.6;
-      }
-      .node image {
-        cursor: pointer;
-      }
-      .node circle {
-        fill: lightblue;
-        stroke: steelblue;
-        stroke-width: 1.5px;
-      }
-      .highlighted {
-        stroke: red;
-        stroke-width: 3px;
-      }
-      .tooltip {
-        position: absolute;
-        background: lightgray;
-        padding: 5px;
-        border-radius: 5px;
-        visibility: hidden;
-      }
     </style>
-  </head>
+</head>
-  <body>
+<body>
-    <p></p>
+<p></p>
-    {{ pathway.name|safe }}
+{{ pathway.name|safe }}
-    <div id="viz">
+<div id="viz">
-      <svg width="2000" height="2000">
+    <svg width="2000" height="2000"> <!-- Sehr großes SVG für Zoom -->
-        <!-- Sehr großes SVG für Zoom -->
         <defs>
-          <marker
+            <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
-            id="arrow"
+                    orient="auto-start-reverse">
-            viewBox="0 0 10 10"
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
-            refX="43"
-            refY="5"
-            markerWidth="6"
-            markerHeight="6"
-            orient="auto-start-reverse"
-          >
-            <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
             </marker>
         </defs>
         <g id="zoomable"></g>
     </svg>
-    </div>
+</div>
-    <div id="tooltip" class="tooltip"></div>
+<div id="tooltip" class="tooltip"></div>
-
-    {# prettier-ignore-start #}
 <script>
+
 function assignPositions(nodes) {
     const levelSpacing = 75; // Vertikaler Abstand zwischen den Tiefen
     const horizontalSpacing = 75; // Abstand zwischen Knoten auf gleicher Tiefe
@@ -211,27 +178,17 @@ function nodeClick(event, node, t) {
         }
 
 </script>
-{# prettier-ignore-end #}
+<svg width="400" height="300">
-    <svg width="400" height="300">
+    <path d="M200,50 C200,100 150,150 150,200" stroke="black" fill="none" stroke-width="2"/>
-      <path
+    <path d="M200,50 C200,100 250,150 250,200" stroke="black" fill="none" stroke-width="2"/>
-        d="M200,50 C200,100 150,150 150,200"
-        stroke="black"
-        fill="none"
-        stroke-width="2"
-      />
-      <path
-        d="M200,50 C200,100 250,150 250,200"
-        stroke="black"
-        fill="none"
-        stroke-width="2"
-      />
 
     <!-- Knoten -->
-      <circle cx="200" cy="50" r="5" fill="blue" />
+    <circle cx="200" cy="50" r="5" fill="blue"/>
-      <circle cx="150" cy="200" r="5" fill="red" />
+    <circle cx="150" cy="200" r="5" fill="red"/>
-      <circle cx="250" cy="200" r="5" fill="red" />
+    <circle cx="250" cy="200" r="5" fill="red"/>
-    </svg>
+</svg>
-  </body>
+</body>
-  {% load static %}
+{% load static %}
-  <script src="{% static 'js/pw.js' %}"></script>
+<script src="{% static 'js/pw.js' %}"></script>
+
 </html>

templates/predict_pathway.html

@@ -135,7 +135,7 @@
       </div>
     </form>
   </div>
-  {# prettier-ignore-start #}
+
   <script>
     function predictKetcherToTextInput() {
       $("#predict-smiles").val(this.ketcher.getSmiles());
@@ -191,5 +191,4 @@
       });
     });
   </script>
-  {# prettier-ignore-end #}
 {% endblock content %}