fix: add extra styles

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#201

.gitea/workflows/ci.yaml

@@ -105,7 +105,7 @@ jobs:
           until pg_isready -h postgres -U postgres; do sleep 2; done
           # until redis-cli -h redis ping; do sleep 2; done
 
-      - name: Run Django migrations
+      - name: Run Django Migrations
         run: |
           source .venv/bin/activate
           python manage.py migrate --noinput

epdb/admin.py

@@ -21,6 +21,7 @@ from .models import (
     ExternalDatabase,
     ExternalIdentifier,
     JobLog,
+    License,
 )
 
 
@@ -62,6 +63,10 @@ class EnviFormerAdmin(EPAdmin):
     pass
 
 
+class LicenseAdmin(admin.ModelAdmin):
+    list_display = ["cc_string", "link", "image_link"]
+
+
 class CompoundAdmin(EPAdmin):
     pass
 
@@ -118,6 +123,7 @@ admin.site.register(JobLog, JobLogAdmin)
 admin.site.register(Package, PackageAdmin)
 admin.site.register(MLRelativeReasoning, MLRelativeReasoningAdmin)
 admin.site.register(EnviFormer, EnviFormerAdmin)
+admin.site.register(License, LicenseAdmin)
 admin.site.register(Compound, CompoundAdmin)
 admin.site.register(CompoundStructure, CompoundStructureAdmin)
 admin.site.register(SimpleAmbitRule, SimpleAmbitRuleAdmin)

epdb/management/commands/bootstrap.py

@@ -12,10 +12,16 @@ from epdb.models import (
     Permission,
     User,
     ExternalDatabase,
+    License,
 )
 
 
 class Command(BaseCommand):
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "-ol", "--only-licenses", action="store_true", help="Only create licenses."
+        )
+
     def create_users(self):
         # Anonymous User
         if not User.objects.filter(email="anon@envipath.com").exists():
@@ -83,6 +89,17 @@ class Command(BaseCommand):
 
         return anon, admin, g, user0
 
+    def create_licenses(self):
+        """Create the six default licenses supported by enviPath"""
+        cc_strings = ["by", "by-nc", "by-nc-nd", "by-nc-sa", "by-nd", "by-sa"]
+        for cc_string in cc_strings:
+            if not License.objects.filter(cc_string=cc_string).exists():
+                new_license = License()
+                new_license.cc_string = cc_string
+                new_license.link = f"https://creativecommons.org/licenses/{cc_string}/4.0/"
+                new_license.image_link = f"https://licensebuttons.net/l/{cc_string}/4.0/88x31.png"
+                new_license.save()
+
     def import_package(self, data, owner):
         return PackageManager.import_legacy_package(
             data, owner, keep_ids=True, add_import_timestamp=False, trust_reviewed=True
@@ -157,6 +174,10 @@ class Command(BaseCommand):
 
     @transaction.atomic
     def handle(self, *args, **options):
+        # Create licenses
+        self.create_licenses()
+        if options.get("only_licenses", False):
+            return
         # Create users
         anon, admin, g, user0 = self.create_users()
 

epdb/migrations/0010_license_cc_string.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.7 on 2025-11-11 14:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("epdb", "0009_joblog"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="license",
+            name="cc_string",
+            field=models.TextField(default="by-nc-sa", verbose_name="CC string"),
+            preserve_default=False,
+        ),
+    ]

epdb/migrations/0011_auto_20251111_1413.py

@@ -0,0 +1,59 @@
+# Generated by Django 5.2.7 on 2025-11-11 14:13
+
+import re
+
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.db import migrations
+from django.db.models import Min
+
+
+def set_cc(apps, schema_editor):
+    License = apps.get_model("epdb", "License")
+
+    # For all existing licenses extract cc_string from link
+    for license in License.objects.all():
+        pattern = r"/licenses/([^/]+)/4\.0"
+        match = re.search(pattern, license.link)
+        if match:
+            license.cc_string = match.group(1)
+            license.save()
+        else:
+            raise ValueError(f"Could not find license for {license.link}")
+
+    # Ensure we have all licenses
+    cc_strings = ["by", "by-nc", "by-nc-nd", "by-nc-sa", "by-nd", "by-sa"]
+    for cc_string in cc_strings:
+        if not License.objects.filter(cc_string=cc_string).exists():
+            new_license = License()
+            new_license.cc_string = cc_string
+            new_license.link = f"https://creativecommons.org/licenses/{cc_string}/4.0/"
+            new_license.image_link = f"https://licensebuttons.net/l/{cc_string}/4.0/88x31.png"
+            new_license.save()
+
+    # As we might have existing Licenses representing the same License,
+    # get min pk and all pks as a list
+    license_lookup_qs = License.objects.values("cc_string").annotate(
+        lowest_pk=Min("id"), all_pks=ArrayAgg("id", order_by=("id",))
+    )
+
+    license_lookup = {
+        row["cc_string"]: (row["lowest_pk"], row["all_pks"]) for row in license_lookup_qs
+    }
+
+    Packages = apps.get_model("epdb", "Package")
+
+    for k, v in license_lookup.items():
+        # Set min pk to all packages pointing to any of the duplicates
+        Packages.objects.filter(pk__in=v[1]).update(license_id=v[0])
+        # remove the min pk from "other" pks as we use them for deletion
+        v[1].remove(v[0])
+        # Delete redundant License objects
+        License.objects.filter(pk__in=v[1]).delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("epdb", "0010_license_cc_string"),
+    ]
+
+    operations = [migrations.RunPython(set_cc)]

epdb/models.py

@@ -655,6 +655,7 @@ class ScenarioMixin(models.Model):
 
 
 class License(models.Model):
+    cc_string = models.TextField(blank=False, null=False, verbose_name="CC string")
     link = models.URLField(blank=False, null=False, verbose_name="link")
     image_link = models.URLField(blank=False, null=False, verbose_name="Image link")
 

epdb/tasks.py

@@ -1,15 +1,15 @@
 import csv
 import io
 import logging
-from datetime import datetime
 from typing import Any, Callable, List, Optional
 from uuid import uuid4
 
 from celery import shared_task
 from celery.utils.functional import LRUCache
+from django.utils import timezone
 
 from epdb.logic import SPathway
-from epdb.models import EPModel, JobLog, Node, Package, Pathway, Rule, Setting, User, Edge
+from epdb.models import Edge, EPModel, JobLog, Node, Package, Pathway, Rule, Setting, User
 
 logger = logging.getLogger(__name__)
 ML_CACHE = LRUCache(3)  # Cache the three most recent ML models to reduce load times.
@@ -29,7 +29,7 @@ def dispatch_eager(user: "User", job: Callable, *args, **kwargs):
         log.task_id = uuid4()
         log.job_name = job.__name__
         log.status = "SUCCESS"
-        log.done_at = datetime.now()
+        log.done_at = timezone.now()
         log.task_result = str(x) if x else None
         log.save()
 

epdb/urls.py

@@ -142,6 +142,11 @@ urlpatterns = [
         v.package_pathway,
         name="package pathway detail",
     ),
+    re_path(
+        rf"^package/(?P<package_uuid>{UUID})/predict$",
+        v.package_predict_pathway,
+        name="package predict pathway",
+    ),
     # Pathway Nodes
     re_path(
         rf"^package/(?P<package_uuid>{UUID})/pathway/(?P<pathway_uuid>{UUID})/node$",

epdb/views.py

@@ -374,6 +374,22 @@ def predict_pathway(request):
     return render(request, "predict_pathway.html", context)
 
 
+@package_permission_required()
+def package_predict_pathway(request, package_uuid):
+    """Package-specific predict pathway view."""
+    if request.method != "GET":
+        return HttpResponseNotAllowed(["GET"])
+
+    current_user = _anonymous_or_real(request)
+    current_package = PackageManager.get_package_by_id(current_user, package_uuid)
+
+    context = get_base_context(request)
+    context["title"] = f"enviPath - {current_package.name} - Predict Pathway"
+    context["meta"]["current_package"] = current_package
+
+    return render(request, "predict_pathway.html", context)
+
+
 def packages(request):
     current_user = _anonymous_or_real(request)
 
@@ -955,6 +971,12 @@ def package_model(request, package_uuid, model_uuid):
                 ]
                 dispatch(current_user, evaluate_model, current_model.pk, multigen, eval_package_ids)
 
+                return redirect(current_model.url)
+            elif hidden == "retrain":
+                from .tasks import dispatch, retrain
+
+                dispatch(current_user, retrain, current_model.pk)
+
                 return redirect(current_model.url)
             else:
                 return HttpResponseBadRequest()
@@ -1084,9 +1106,7 @@ def package(request, package_uuid):
         write = request.POST.get("write") == "on"
         owner = request.POST.get("owner") == "on"
 
-        license = request.POST.get("license")
+        cc_string = request.POST.get("license")
-        license_link = request.POST.get("license-link")
-        license_image_link = request.POST.get("license-image-link")
 
         if new_package_name:
             current_package.name = new_package_name
@@ -1114,24 +1134,15 @@ def package(request, package_uuid):
 
             PackageManager.update_permissions(current_user, current_package, grantee, max_perm)
             return redirect(current_package.url)
-        elif license is not None:
-            if license == "no-license":
-                if current_package.license is not None:
-                    current_package.license.delete()
 
+        elif cc_string is not None:
+            cc_string = cc_string.strip()
+            if cc_string == "no-license":  # Reset the package's license
                 current_package.license = None
                 current_package.save()
                 return redirect(current_package.url)
-            else:
+            else:  # Get the license and assign it to the package
-                if current_package.license is not None:
+                current_package.license = License.objects.get(cc_string=cc_string)
-                    current_package.license.delete()
-
-                license = License()
-                license.link = license_link
-                license.image_link = license_image_link
-                license.save()
-
-                current_package.license = license
                 current_package.save()
 
                 return redirect(current_package.url)

templates/actions/collections/compound.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_compound_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/compound_structure.html

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

templates/actions/collections/group.html

@@ -1,4 +1,5 @@
 <li>
-    <a role="button" data-toggle="modal" data-target="#new_group_modal">
+  <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,6 +1,7 @@
 {% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_model_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/node.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_node_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/package.html

@@ -1,12 +1,20 @@
 <li>
-    <a role="button" data-toggle="modal" data-target="#new_package_modal">
+  <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">
+  <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 role="button" data-toggle="modal" data-target="#import_legacy_package_modal">
+  <a
-        <span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a>
+    role="button"
+    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/pathway.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a href="{{ meta.server_url }}/predict">
+    <a
-            <span class="glyphicon glyphicon-plus"></span> New Pathway</a>
+      href="{% if meta.current_package %}{{ meta.current_package.url }}/predict{% else %}{{ meta.server_url }}/predict{% endif %}"
-    </li>
+    >
+      <span class="glyphicon glyphicon-plus"></span> New Pathway</a
+    >
+  </li>
 {% endif %}

templates/actions/collections/reaction.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_reaction_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/rule.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_rule_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/scenario.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_scenario_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/collections/setting.html

@@ -1,6 +1,7 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#new_setting_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/objects/compound.html

@@ -1,32 +1,43 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#edit_compound_modal">
+    <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>
+  </li>
-        <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
+  <li>
-            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
+    <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-    </li>
+      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
-    <li>
+    >
-        <a role="button" data-toggle="modal" data-target="#add_structure_modal">
+  </li>
-            <i class="glyphicon glyphicon-plus"></i> Add Structure</a>
+  <li>
-    </li>
+    <a role="button" data-toggle="modal" data-target="#add_structure_modal">
-    <li>
+      <i class="glyphicon glyphicon-plus"></i> Add Structure</a
-        <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
+    >
-            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
+  </li>
-    </li>
+  <li>
-    <li>
+    <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-        <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
+      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
-            <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
+    >
-    </li>
+  </li>
+  <li>
+    <a
+      role="button"
+      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">
+  <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>
+  <li>
-        <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/objects/compound_structure.html

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

templates/actions/objects/edge.html

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

templates/actions/objects/group.html

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

templates/actions/objects/model.html

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

templates/actions/objects/node.html

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

templates/actions/objects/package.html

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

templates/actions/objects/pathway.html

@@ -1,59 +1,92 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a class="button" data-toggle="modal" data-target="#add_pathway_node_modal">
+    <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>
+  </li>
-        <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
+  <li>
-            <i class="glyphicon glyphicon-plus"></i> Add Reaction</a>
+    <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
-    </li>
+      <i class="glyphicon glyphicon-plus"></i> Add Reaction</a
-    <li role="separator" class="divider"></li>
+    >
+  </li>
+  <li role="separator" class="divider"></li>
 {% endif %}
-    <li>
+<li>
-        <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
+  <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>
-        <a class="button" data-toggle="modal" data-target="#download_pathway_csv_modal">
+<li>
-            <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a>
+  <a
-    </li>
+    class="button"
-    <li>
+    data-toggle="modal"
-        <a class="button" data-toggle="modal" data-target="#download_pathway_image_modal">
+    data-target="#download_pathway_csv_modal"
-            <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a>
+  >
-    </li>
+    <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a
+  >
+</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>
+  <li>
-        <a class="button" data-toggle="modal" data-target="#identify_missing_rules_modal">
+    <a
-            <i class="glyphicon glyphicon-question-sign"></i> Identify Missing Rules</a>
+      class="button"
-    </li>
+      data-toggle="modal"
-    <li role="separator" class="divider"></li>
+      data-target="#identify_missing_rules_modal"
-    <li>
+    >
-        <a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
+      <i class="glyphicon glyphicon-question-sign"></i> Identify Missing
-            <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a>
+      Rules</a
-    </li>
+    >
-    <li>
+  </li>
-        <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
+  <li role="separator" class="divider"></li>
-            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
+  <li>
-    </li>
+    <a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
-    <li>
+      <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a
-        <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
+    >
-            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
+  </li>
-    </li>
+  <li>
-    {#    <li>#}
+    <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-    {#        <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
+      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
-    {#            <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#}
+    >
-    {#    </li>#}
+  </li>
-    <li role="separator" class="divider"></li>
+  <li>
-    <li>
+    <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-        <a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal">
+      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
-            <i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
+    >
-    </li>
+  </li>
-    <li>
+  {#    <li>#}
-        <a class="button" data-toggle="modal" data-target="#delete_pathway_edge_modal">
+  {#        <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
-            <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
+  {#            <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#}
-    </li>
+  {#    </li>#}
-    <li>
+  <li role="separator" class="divider"></li>
-        <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
+  <li>
-            <i class="glyphicon glyphicon-trash"></i> Delete Pathway</a>
+    <a
-    </li>
+      class="button"
+      data-toggle="modal"
+      data-target="#delete_pathway_node_modal"
+    >
+      <i class="glyphicon glyphicon-trash"></i> Delete Compound</a
+    >
+  </li>
+  <li>
+    <a
+      class="button"
+      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
+    >
+  </li>
 {% endif %}

templates/actions/objects/reaction.html

@@ -1,28 +1,38 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#edit_reaction_modal">
+    <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>
+  </li>
-        <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
+  <li>
-            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
+    <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-    </li>
+      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
-    <li>
+    >
-        <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
+  </li>
-            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
+  <li>
-    </li>
+    <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
-    <li>
+      <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
-        <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
+    >
-            <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
+  </li>
-    </li>
+  <li>
+    <a
+      role="button"
+      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">
+  <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>
+  <li>
-        <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/objects/rule.html

@@ -1,24 +1,29 @@
 {% if meta.can_edit %}
-    <li>
+  <li>
-        <a role="button" data-toggle="modal" data-target="#edit_rule_modal">
+    <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>
+  </li>
-        <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
+  <li>
-            <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
+    <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
-    </li>
+      <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
-    <li>
+    >
-        <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
+  </li>
-            <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
+  <li>
-    </li>
+    <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
+      <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">
+  <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>
+  <li>
-        <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
+    <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>
+    >
+  </li>
 {% endif %}

templates/actions/objects/scenario.html

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

templates/actions/objects/user.html

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

templates/admin.html

@@ -1,12 +1,17 @@
 {% 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">
+      <div class="form-group">
-            <label for="textarea">Query</label>
+        <label for="textarea">Query</label>
-            <textarea id="textarea" class="form-control" rows="10" placeholder="Paste query here" required>
+        <textarea
+          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 {
@@ -15,32 +20,29 @@ 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>
+      </div>
+      <button id="submit" type="button" class="btn btn-primary">Submit</button>
     </form>
     <p></p>
-</div>
+  </div>
-<div id="results">
+  <div id="results"></div>
-</div>
+  <div id="loading"></div>
-<div id="loading"></div>
+  <script>
-</div>
+    $(function () {
-<script>
+      $("#submit").on("click", function () {
-$(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();
+          $("#loading").empty();
-            queryResultToTable("results", result);
+          queryResultToTable("results", result);
-        })
+        });
+      });
     });
-})
+  </script>
-</script>
-
 {% endblock content %}

templates/collections/joblog.html

@@ -1,70 +1,80 @@
 {% extends "framework.html" %}
 {% load static %}
+{% load envipytags %}
 {% block content %}
+  <div class="panel-group" id="reviewListAccordion">
+    <div class="panel panel-default">
+      <div
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
+        Jobs
+      </div>
+      <div class="panel-body">
+        <p>Job Logs Desc</p>
+      </div>
 
-    <div class="panel-group" id="reviewListAccordion">
+      <div
-        <div class="panel panel-default">
+        class="panel panel-default panel-heading list-group-item"
-            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+        style="background-color:silver"
-                Jobs
+      >
-            </div>
+        <h4 class="panel-title">
-            <div class="panel-body">
+          <a
-                <p>
+            id="job-accordion-link"
-                    Job Logs Desc
+            data-toggle="collapse"
-                </p>
+            data-parent="#job-accordion"
-
+            href="#jobs"
-            </div>
+          >
-
+            Jobs
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+          </a>
-                <h4 class="panel-title">
+        </h4>
-                    <a id="job-accordion-link" data-toggle="collapse" data-parent="#job-accordion" href="#jobs">
+      </div>
-                        Jobs
+      <div id="jobs" class="panel-collapse in collapse">
-                    </a>
+        <div class="panel-body list-group-item" id="job-content">
-                </h4>
+          <table class="table-bordered table-hover table">
-            </div>
+            <tr style="background-color: rgba(0, 0, 0, 0.08);">
-            <div id="jobs"
+              <th scope="col">ID</th>
-                 class="panel-collapse collapse in">
+              <th scope="col">Name</th>
-                <div class="panel-body list-group-item" id="job-content">
+              <th scope="col">Status</th>
-                    <table class="table table-bordered table-hover">
+              <th scope="col">Queued</th>
-                        <tr style="background-color: rgba(0, 0, 0, 0.08);">
+              <th scope="col">Done</th>
-                            <th scope="col">ID</th>
+              <th scope="col">Result</th>
-                            <th scope="col">Name</th>
+            </tr>
-                            <th scope="col">Status</th>
+            <tbody>
-                            <th scope="col">Queued</th>
+              {% for job in jobs %}
-                            <th scope="col">Done</th>
+                <tr>
-                            <th scope="col">Result</th>
+                  <td>{{ job.task_id }}</td>
-                        </tr>
+                  <td>{{ job.job_name }}</td>
-                        <tbody>
+                  <td>{{ job.status }}</td>
-                        {% for job in jobs %}
+                  <td>{{ job.created }}</td>
-                            <tr>
+                  <td>{{ job.done_at }}</td>
-                                <td>{{ job.task_id }}</td>
+                  {% if job.task_result and job.task_result|is_url == True %}
-                                <td>{{ job.job_name }}</td>
+                    <td><a href="{{ job.task_result }}">Result</a></td>
-                                <td>{{ job.status }}</td>
+                  {% elif job.task_result %}
-                                <td>{{ job.created }}</td>
+                    <td>{{ job.task_result|slice:"40" }}...</td>
-                                <td>{{ job.done_at }}</td>
+                  {% else %}
-                                {% if job.task_result and job.task_result|is_url == True %}
+                    <td>Empty</td>
-                                    <td><a href="{{ job.task_result }}">Result</a></td>
+                  {% endif %}
-                                {% elif job.task_result %}
+                </tr>
-                                    <td>{{ job.task_result|slice:"40" }}...</td>
+              {% endfor %}
-                                {% else %}
+            </tbody>
-                                    <td>Empty</td>
+          </table>
-                                {% endif %}
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <!-- Unreviewable objects such as User / Group / Setting -->
-            <ul class='list-group'>
-                {% for obj in objects %}
-                    {% if object_type == 'user' %}
-                        <a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
-                    {% else %}
-                        <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
-                    {% endif %}
-                {% endfor %}
-            </ul>
         </div>
+      </div>
+
+      <!-- Unreviewable objects such as User / Group / Setting -->
+      <ul class="list-group">
+        {% for obj in objects %}
+          {% if object_type == 'user' %}
+            <a class="list-group-item" href="{{ obj.url }}"
+              >{{ obj.username }}</a
+            >
+          {% else %}
+            <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
+          {% endif %}
+        {% endfor %}
+      </ul>
     </div>
+  </div>
 {% endblock content %}

templates/collections/objects_list.html

@@ -2,269 +2,427 @@
 {% load static %}
 {% block content %}
 
-    {% if object_type != 'package' %}
+  {% if object_type != 'package' %}
-        <div>
+    <div>
-            <div id="load-all-error" style="display: none;">
+      <div id="load-all-error" style="display: none;">
-                <div class="alert alert-danger" role="alert">
+        <div class="alert alert-danger" role="alert">
-                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+          <span
-                    <span class="sr-only">Error:</span>
+            class="glyphicon glyphicon-exclamation-sign"
-                    Getting objects failed!
+            aria-hidden="true"
-                </div>
+          ></span>
-            </div>
+          <span class="sr-only">Error:</span>
-
+          Getting objects failed!
-            <input type="text" id="object-search" class="form-control" placeholder="Search by name"
-                   style="display: none;">
-            <p></p>
         </div>
+      </div>
+
+      <input
+        type="text"
+        id="object-search"
+        class="form-control"
+        placeholder="Search by name"
+        style="display: none;"
+      />
+      <p></p>
+    </div>
+  {% endif %}
+
+  {% block action_modals %}
+    {% if object_type == 'package' %}
+      {% include "modals/collections/new_package_modal.html" %}
+      {% include "modals/collections/import_package_modal.html" %}
+      {% include "modals/collections/import_legacy_package_modal.html" %}
+    {% elif object_type == 'compound' %}
+      {% include "modals/collections/new_compound_modal.html" %}
+    {% elif object_type == 'rule' %}
+      {% include "modals/collections/new_rule_modal.html" %}
+    {% elif object_type == 'reaction' %}
+      {% include "modals/collections/new_reaction_modal.html" %}
+    {% elif object_type == 'pathway' %}
+      {# {% include "modals/collections/new_pathway_modal.html" %} #}
+    {% elif object_type == 'node' %}
+      {% include "modals/collections/new_node_modal.html" %}
+    {% elif object_type == 'edge' %}
+      {% include "modals/collections/new_edge_modal.html" %}
+    {% elif object_type == 'scenario' %}
+      {% include "modals/collections/new_scenario_modal.html" %}
+    {% elif object_type == 'model' %}
+      {% include "modals/collections/new_model_modal.html" %}
+    {% elif object_type == 'setting' %}
+      {#{% include "modals/collections/new_setting_modal.html" %}#}
+    {% elif object_type == 'user' %}
+      <div></div>
+    {% elif object_type == 'group' %}
+      {% include "modals/collections/new_group_modal.html" %}
     {% endif %}
+  {% endblock action_modals %}
 
-    {% block action_modals %}
+  <div class="panel-group" id="reviewListAccordion">
-        {% if object_type == 'package' %}
-            {% include "modals/collections/new_package_modal.html" %}
-            {% include "modals/collections/import_package_modal.html" %}
-            {% include "modals/collections/import_legacy_package_modal.html" %}
-        {% elif object_type == 'compound' %}
-            {% include "modals/collections/new_compound_modal.html" %}
-        {% elif object_type == 'rule' %}
-            {% include "modals/collections/new_rule_modal.html" %}
-        {% elif object_type == 'reaction' %}
-            {% include "modals/collections/new_reaction_modal.html" %}
-        {% elif object_type == 'pathway' %}
-            {# {% include "modals/collections/new_pathway_modal.html" %} #}
-        {% elif object_type == 'node' %}
-            {% include "modals/collections/new_node_modal.html" %}
-        {% elif object_type == 'edge' %}
-            {% include "modals/collections/new_edge_modal.html" %}
-        {% elif object_type == 'scenario' %}
-            {% include "modals/collections/new_scenario_modal.html" %}
-        {% elif object_type == 'model' %}
-            {% include "modals/collections/new_model_modal.html" %}
-        {% elif object_type == 'setting' %}
-            {#{% include "modals/collections/new_setting_modal.html" %}#}
-        {% elif object_type == 'user' %}
-            <div></div>
-        {% elif object_type == 'group' %}
-            {% include "modals/collections/new_group_modal.html" %}
-        {% endif %}
-    {% endblock action_modals %}
-
-<div class="panel-group" id="reviewListAccordion">
     <div class="panel panel-default">
-        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+      <div
-            {% if object_type == 'package' %}
+        class="panel-heading"
-            Packages
+        id="headingPanel"
-            {% elif object_type == 'compound' %}
+        style="font-size:2rem;height: 46px"
-            Compounds
+      >
-            {% elif object_type == 'structure' %}
+        {% if object_type == 'package' %}
-            Compound structures
+          Packages
-            {% elif object_type == 'rule' %}
+        {% elif object_type == 'compound' %}
-            Rules
+          Compounds
-            {% elif object_type == 'reaction' %}
+        {% elif object_type == 'structure' %}
-            Reactions
+          Compound structures
-            {% elif object_type == 'pathway' %}
+        {% elif object_type == 'rule' %}
-            Pathways
+          Rules
-            {% elif object_type == 'node' %}
+        {% elif object_type == 'reaction' %}
-            Nodes
+          Reactions
-            {% elif object_type == 'edge' %}
+        {% elif object_type == 'pathway' %}
-            Edges
+          Pathways
-            {% elif object_type == 'scenario' %}
+        {% elif object_type == 'node' %}
-            Scenarios
+          Nodes
-            {% elif object_type == 'model' %}
+        {% elif object_type == 'edge' %}
-            Model
+          Edges
-            {% elif object_type == 'setting' %}
+        {% elif object_type == 'scenario' %}
-            Settings
+          Scenarios
-            {% elif object_type == 'user' %}
+        {% elif object_type == 'model' %}
-            Users
+          Model
-            {% elif object_type == 'group' %}
+        {% elif object_type == 'setting' %}
-            Groups
+          Settings
-            {% endif %}
+        {% elif object_type == 'user' %}
-            <div id="actionsButton"
+          Users
-                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
+        {% elif object_type == 'group' %}
-                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+          Groups
-                                     aria-haspopup="true" aria-expanded="false"><span
+        {% endif %}
-                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
+        <div
-                    style="padding-right:1em"></span></a>
+          id="actionsButton"
-                <ul id="actionsList" class="dropdown-menu">
+          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                    {% block actions %}
+          class="dropdown"
-                        {% if object_type == 'package' %}
+        >
-                            {% include "actions/collections/package.html" %}
+          <a
-                        {% elif object_type == 'compound' %}
+            href="#"
-                            {% include "actions/collections/compound.html" %}
+            class="dropdown-toggle"
-                        {% elif object_type == 'structure' %}
+            data-toggle="dropdown"
-                            {% include "actions/collections/compound_structure.html" %}
+            role="button"
-                        {% elif object_type == 'rule' %}
+            aria-haspopup="true"
-                            {% include "actions/collections/rule.html" %}
+            aria-expanded="false"
-                        {% elif object_type == 'reaction' %}
+            ><span class="glyphicon glyphicon-wrench"></span> Actions
-                            {% include "actions/collections/reaction.html" %}
+            <span class="caret"></span><span style="padding-right:1em"></span
-                        {% elif object_type == 'setting' %}
+          ></a>
-                            {% include "actions/collections/setting.html" %}
+          <ul id="actionsList" class="dropdown-menu">
-                        {% elif object_type == 'scenario' %}
+            {% block actions %}
-                            {% include "actions/collections/scenario.html" %}
+              {% if object_type == 'package' %}
-                        {% elif object_type == 'model' %}
+                {% include "actions/collections/package.html" %}
-                            {% include "actions/collections/model.html" %}
+              {% elif object_type == 'compound' %}
-                        {% elif object_type == 'pathway' %}
+                {% include "actions/collections/compound.html" %}
-                            {% include "actions/collections/pathway.html" %}
+              {% elif object_type == 'structure' %}
-                        {% elif object_type == 'node' %}
+                {% include "actions/collections/compound_structure.html" %}
-                            {% include "actions/collections/node.html" %}
+              {% elif object_type == 'rule' %}
-                        {% elif object_type == 'edge' %}
+                {% include "actions/collections/rule.html" %}
-                            {% include "actions/collections/edge.html" %}
+              {% elif object_type == 'reaction' %}
-                        {% elif object_type == 'group' %}
+                {% include "actions/collections/reaction.html" %}
-                            {% include "actions/collections/group.html" %}
+              {% elif object_type == 'setting' %}
-                        {% endif %}
+                {% include "actions/collections/setting.html" %}
-                    {% endblock %}
+              {% elif object_type == 'scenario' %}
-                </ul>
+                {% include "actions/collections/scenario.html" %}
-            </div>
+              {% elif object_type == 'model' %}
+                {% include "actions/collections/model.html" %}
+              {% elif object_type == 'pathway' %}
+                {% include "actions/collections/pathway.html" %}
+              {% elif object_type == 'node' %}
+                {% include "actions/collections/node.html" %}
+              {% elif object_type == 'edge' %}
+                {% include "actions/collections/edge.html" %}
+              {% elif object_type == 'group' %}
+                {% include "actions/collections/group.html" %}
+              {% endif %}
+            {% endblock %}
+          </ul>
         </div>
-        <div class="panel-body">
+      </div>
-            <!-- Set Text above links -->
+      <div class="panel-body">
-            {% if object_type == 'package' %}
+        <!-- Set Text above links -->
-            <p>A package contains pathways, rules, etc. and can reflect specific experimental
+        {% if object_type == 'package' %}
-                conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
+          <p>
-                    more &gt;&gt;</a></p>
+            A package contains pathways, rules, etc. and can reflect specific
-            {% elif object_type == 'compound' %}
+            experimental conditions.
-            <p>A compound stores the structure of a molecule and can include meta-information.
+            <a
-                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
+              target="_blank"
-                    &gt;&gt;</a></p>
+              href="https://wiki.envipath.org/index.php/packages"
-            {% elif object_type == 'structure' %}
+              role="button"
-            <p>The structures stored in this compound
+              >Learn more &gt;&gt;</a
-                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
+            >
-                    &gt;&gt;</a></p>
+          </p>
-            {% elif object_type == 'rule' %}
+        {% elif object_type == 'compound' %}
-            <p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
+          <p>
-                <a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
+            A compound stores the structure of a molecule and can include
-                    &gt;&gt;</a></p>
+            meta-information.
-            {% elif object_type == 'reaction' %}
+            <a
-            <p>A reaction is a specific biotransformation from educt compounds to product compounds.
+              target="_blank"
-                <a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
+              href="https://wiki.envipath.org/index.php/compounds"
-                    &gt;&gt;</a></p>
+              role="button"
-            {% elif object_type == 'pathway' %}
+              >Learn more &gt;&gt;</a
-            <p>A pathway displays the (predicted) biodegradation of a compound as graph.
+            >
-                <a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more
+          </p>
-                    &gt;&gt;</a></p>
+        {% elif object_type == 'structure' %}
-            {% elif object_type == 'node' %}
+          <p>
-            <p>Nodes represent the (predicted) compounds in a graph.
+            The structures stored in this compound
-                <a target="_blank" href="https://wiki.envipath.org/index.php/nodes" role="button">Learn more
+            <a
-                    &gt;&gt;</a></p>
+              target="_blank"
-            {% elif object_type == 'edge' %}
+              href="https://wiki.envipath.org/index.php/compounds"
-            <p>Edges represent the links between Nodes in a graph
+              role="button"
-                <a target="_blank" href="https://wiki.envipath.org/index.php/edges" role="button">Learn more
+              >Learn more &gt;&gt;</a
-                    &gt;&gt;</a></p>
+            >
-            {% elif object_type == 'scenario' %}
+          </p>
-            <p>A scenario contains meta-information that can be attached to other data (compounds, rules, ..).
+        {% elif object_type == 'rule' %}
-                <a target="_blank" href="https://wiki.envipath.org/index.php/scenarios" role="button">Learn more
+          <p>
-                    &gt;&gt;</a></p>
+            A rule describes a biotransformation reaction template that is
-            {% elif object_type == 'model' %}
+            defined as SMIRKS.
-            <p>A model applies machine learning to limit the combinatorial explosion.
+            <a
-                <a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn
+              target="_blank"
-                    more
+              href="https://wiki.envipath.org/index.php/Rules"
-                    &gt;&gt;</a></p>
+              role="button"
-            {% elif object_type == 'setting' %}
+              >Learn more &gt;&gt;</a
-            <p>A setting includes configuration parameters for pathway predictions.
+            >
-                <a target="_blank" href="https://wiki.envipath.org/index.php/settings" role="button">Learn more
+          </p>
-                    &gt;&gt;</a></p>
+        {% elif object_type == 'reaction' %}
-            {% elif object_type == 'user' %}
+          <p>
-            <p>Register now to create own packages and to submit and manage your data.
+            A reaction is a specific biotransformation from educt compounds to
-                <a target="_blank" href="https://wiki.envipath.org/index.php/users" role="button">Learn more
+            product compounds.
-                    &gt;&gt;</a></p>
+            <a
-            {% elif object_type == 'group' %}
+              target="_blank"
-            <p>Users can team up in groups to share packages.
+              href="https://wiki.envipath.org/index.php/reactions"
-                <a target="_blank" href="https://wiki.envipath.org/index.php/groups" role="button">Learn more
+              role="button"
-                    &gt;&gt;</a></p>
+              >Learn more &gt;&gt;</a
-            {% endif %}
+            >
+          </p>
+        {% elif object_type == 'pathway' %}
+          <p>
+            A pathway displays the (predicted) biodegradation of a compound as
+            graph.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/pathways"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'node' %}
+          <p>
+            Nodes represent the (predicted) compounds in a graph.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/nodes"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'edge' %}
+          <p>
+            Edges represent the links between Nodes in a graph
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/edges"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'scenario' %}
+          <p>
+            A scenario contains meta-information that can be attached to other
+            data (compounds, rules, ..).
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/scenarios"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'model' %}
+          <p>
+            A model applies machine learning to limit the combinatorial
+            explosion.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/relative_reasoning"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'setting' %}
+          <p>
+            A setting includes configuration parameters for pathway predictions.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/settings"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'user' %}
+          <p>
+            Register now to create own packages and to submit and manage your
+            data.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/users"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
+        {% elif object_type == 'group' %}
+          <p>
+            Users can team up in groups to share packages.
+            <a
+              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 theres nothing to show extend the text above -->
-            {% if reviewed_objects and unreviewed_objects %}
+        {% if reviewed_objects and unreviewed_objects %}
-            {% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
+          {% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
-            <p>Nothing found. There are two possible reasons: <br><br>1. There is no content yet.<br>2. You have no
+            <p>
-                reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
+              Nothing found. There are two possible reasons: <br /><br />1.
-            {% endif %}
+              There is no content yet.<br />2. You have no reading
-            {% endif %}
+              permissions.<br /><br />Please be sure you have at least reading
-        </div>
+              permissions.
-        {% if reviewed_objects %}
+            </p>
+          {% endif %}
+        {% endif %}
+      </div>
+      {% if reviewed_objects %}
         {% if reviewed_objects|length > 0 %}
-        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+          <div
+            class="panel panel-default panel-heading list-group-item"
+            style="background-color:silver"
+          >
             <h4 class="panel-title">
-                <a id="ReviewedLink" data-toggle="collapse" data-parent="#reviewListAccordion"
+              <a
-                   href="#Reviewed">Reviewed</a>
+                id="ReviewedLink"
+                data-toggle="collapse"
+                data-parent="#reviewListAccordion"
+                href="#Reviewed"
+                >Reviewed</a
+              >
             </h4>
-        </div>
+          </div>
-        <div id="Reviewed" class="panel-collapse collapse in">
+          <div id="Reviewed" class="panel-collapse in collapse">
             <div class="panel-body list-group-item" id="ReviewedContent">
-                {% if object_type == 'package' %}
+              {% if object_type == 'package' %}
                 {% for obj in reviewed_objects %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}
+                  <a class="list-group-item" href="{{ obj.url }}"
-                    <span class="glyphicon glyphicon-star" aria-hidden="true"
+                    >{{ obj.name|safe }}
-                          style="float:right" data-toggle="tooltip"
+                    <span
-                          data-placement="top" title="" data-original-title="Reviewed">
+                      class="glyphicon glyphicon-star"
-                        </span>
+                      aria-hidden="true"
-                </a>
+                      style="float:right"
+                      data-toggle="tooltip"
+                      data-placement="top"
+                      title=""
+                      data-original-title="Reviewed"
+                    >
+                    </span>
+                  </a>
                 {% endfor %}
-                {% else %}
+              {% else %}
                 {% for obj in reviewed_objects|slice:":50" %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
+                  <a class="list-group-item" href="{{ obj.url }}"
-                    <span class="glyphicon glyphicon-star" aria-hidden="true"
+                    >{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
-                          style="float:right" data-toggle="tooltip"
+                    <span
-                          data-placement="top" title="" data-original-title="Reviewed">
+                      class="glyphicon glyphicon-star"
-                        </span>
+                      aria-hidden="true"
-                </a>
+                      style="float:right"
+                      data-toggle="tooltip"
+                      data-placement="top"
+                      title=""
+                      data-original-title="Reviewed"
+                    >
+                    </span>
+                  </a>
                 {% endfor %}
-                {% endif %}
+              {% endif %}
             </div>
+          </div>
+        {% endif %}
+      {% endif %}
+      {% if unreviewed_objects %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="UnreviewedLink"
+              data-toggle="collapse"
+              data-parent="#unReviewListAccordion"
+              href="#Unreviewed"
+              >Unreviewed</a
+            >
+          </h4>
         </div>
-        {% endif %}
+        <div
-        {% endif %}
+          id="Unreviewed"
-        {% if unreviewed_objects %}
+          class="panel-collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %} collapse"
-        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver"><h4
+        >
-                class="panel-title"><a id="UnreviewedLink" data-toggle="collapse" data-parent="#unReviewListAccordion"
+          <div class="panel-body list-group-item" id="UnreviewedContent">
-                                       href="#Unreviewed">Unreviewed</a></h4></div>
+            {% if object_type == 'package' %}
-        <div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
+              {% for obj in unreviewed_objects %}
-            <div class="panel-body list-group-item" id="UnreviewedContent">
+                <a class="list-group-item" href="{{ obj.url }}"
-                {% if object_type == 'package' %}
+                  >{{ obj.name|safe }}</a
-                {% for obj in unreviewed_objects %}
+                >
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
+              {% endfor %}
-                {% endfor %}
-                {% else %}
-                {% for obj in unreviewed_objects|slice:":50" %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
-                {% endfor %}
-                {% endif %}
-            </div>
-        </div>
-        {% endif %}
-        {% if objects %}
-        <!-- Unreviewable objects such as User / Group / Setting -->
-        <ul class='list-group'>
-            {% for obj in objects %}
-            {% if object_type == 'user' %}
-            <a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
             {% else %}
-            <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
+              {% for obj in unreviewed_objects|slice:":50" %}
+                <a class="list-group-item" href="{{ obj.url }}"
+                  >{{ obj.name|safe }}</a
+                >
+              {% endfor %}
             {% endif %}
-            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+      {% if objects %}
+        <!-- Unreviewable objects such as User / Group / Setting -->
+        <ul class="list-group">
+          {% for obj in objects %}
+            {% if object_type == 'user' %}
+              <a class="list-group-item" href="{{ obj.url }}"
+                >{{ obj.username|safe }}</a
+              >
+            {% else %}
+              <a class="list-group-item" href="{{ obj.url }}"
+                >{{ obj.name|safe }}</a
+              >
+            {% endif %}
+          {% endfor %}
         </ul>
-        {% endif %}
+      {% endif %}
     </div>
     <style>
-        .spinner-widget {
+      .spinner-widget {
-            position: fixed; /* stays in place on scroll */
+        position: fixed; /* stays in place on scroll */
-            bottom: 20px; /* distance from bottom */
+        bottom: 20px; /* distance from bottom */
-            right: 20px; /* distance from right */
+        right: 20px; /* distance from right */
-            z-index: 9999; /* above most elements */
+        z-index: 9999; /* above most elements */
-            width: 60px; /* adjust to gif size */
+        width: 60px; /* adjust to gif size */
-            height: 60px;
+        height: 60px;
-        }
+      }
 
-        .spinner-widget img {
+      .spinner-widget img {
-            width: 100%;
+        width: 100%;
-            height: auto;
+        height: auto;
-        }
+      }
     </style>
 
     <div id="load-all-loading" class="spinner-widget" style="display: none">
-        <img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
+      <img
+        id="loading-gif"
+        src="{% static '/images/wait.gif' %}"
+        alt="Loading..."
+      />
     </div>
-
+  </div>
-</div>
+  {# prettier-ignore-start #}
     <script>
         $(function () {
 
@@ -316,4 +474,5 @@
 
         });
     </script>
+    {# prettier-ignore-end #}
 {% endblock content %}

templates/compare.html

@@ -1,55 +1,75 @@
 {% extends "framework.html" %}
 
 {% block content %}
-    <div>
+  <div>
-        <form action="" method="post">
+    <form action="" method="post">
-            {% csrf_token %}
+      {% csrf_token %}
-            <input type="text" class="form-control" id="smiles" name="smiles" placeholder="SMILES"
+      <input
-                   value="{{ smiles }}"/>
+        type="text"
-            <input type="text" class="form-control" id="smiles" name="smirks" placeholder="SMIRKS"
+        class="form-control"
-                   value="{{ smirks }}"/>
+        id="smiles"
-            <button type="submit" class="btn btn-primary">Test</button>
+        name="smiles"
-        </form>
+        placeholder="SMILES"
-    </div>
+        value="{{ smiles }}"
-    {% if result %}
+      />
-        {{ smiles }}<p></p>
+      <input
-        <img width='400' src='{% url 'depict' %}?smiles={{ smiles|urlencode }}'><br>
+        type="text"
-        <p></p>
+        class="form-control"
-        {% if rule %}
+        id="smiles"
-            {{ smirks }}
+        name="smirks"
-            <p></p>
+        placeholder="SMIRKS"
-            {{ rule.reactants_smarts }}
+        value="{{ smirks }}"
-            <p></p>
+      />
-            {{ rule.products_smarts }}
+      <button type="submit" class="btn btn-primary">Test</button>
-            <p></p>
+    </form>
-            <div>
+  </div>
-                {{ rule.as_svg|safe }}
+  {% if result %}
-            </div>
+    {{ smiles }}
-        {% endif %}
+    <p></p>
-        <h2>Diff</h2>
+    <img
-        {% if diff %}
+      width="400"
-            {% for d in diff %}
+      src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
-                {{ d }}
+    /><br />
-            {% endfor %}
+    <p></p>
-        {% else %}
+    {% if rule %}
-            {{ "No diff" }}
+      {{ smirks }}
-        {% endif %}
+      <p></p>
-        <div>
+      {{ rule.reactants_smarts }}
-            <div class="col-md-6">
+      <p></p>
-                <h2>Ambit</h2>
+      {{ rule.products_smarts }}
-                {% for p in ambit_res %}
+      <p></p>
-                    {{ p }}<br>
+      <div>{{ rule.as_svg|safe }}</div>
-                    <img 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>
-                    <img width='400' src='{% url 'depict' %}?smiles={{ p|urlencode }}'><br>
-                {% endfor %}
-            </div>
-        </div>
     {% endif %}
+    <h2>Diff</h2>
+    {% if diff %}
+      {% for d in diff %}
+        {{ d }}
+      {% endfor %}
+    {% else %}
+      {{ "No diff" }}
+    {% endif %}
+    <div>
+      <div class="col-md-6">
+        <h2>Ambit</h2>
+        {% for p in ambit_res %}
+          {{ p }}<br />
+          <img
+            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 />
+          <img
+            width="400"
+            src="{% url 'depict' %}?smiles={{ p|urlencode }}"
+          /><br />
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
 {% endblock content %}

templates/errors/400_bad_request.html

@@ -1,15 +1,18 @@
 {% 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 <a target="_blank"
+      You can find out more about permissions in our
-                                                          href="https://wiki.envipath.org/index.php/packages"
+      <a
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        target="_blank"
-</div>
+        href="https://wiki.envipath.org/index.php/packages"
-
+        role="button"
+        >Wiki &gt;&gt;</a
+      >
+    </p>
+  </div>
 {% endblock content %}

templates/errors/403_access_denied.html

@@ -1,15 +1,18 @@
 {% 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 <a target="_blank"
+      You can find out more about permissions in our
-                                                          href="https://wiki.envipath.org/index.php/packages"
+      <a
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        target="_blank"
-</div>
+        href="https://wiki.envipath.org/index.php/packages"
-
+        role="button"
+        >Wiki &gt;&gt;</a
+      >
+    </p>
+  </div>
 {% endblock content %}

templates/errors/404_not_found.html

@@ -1,15 +1,18 @@
 {% 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 <a target="_blank"
+      You can find out more about permissions in our
-                                                          href="https://wiki.envipath.org/index.php/packages"
+      <a
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        target="_blank"
-</div>
+        href="https://wiki.envipath.org/index.php/packages"
-
+        role="button"
+        >Wiki &gt;&gt;</a
+      >
+    </p>
+  </div>
 {% endblock content %}

templates/errors/error.html

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

templates/errors/user_account_inactive.html

@@ -1,12 +1,11 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-
+  <div class="alert alert-danger" role="alert">
-    <div class="alert alert-danger" role="alert">
+    <h4 class="alert-heading">Your account has not been activated yet!</h4>
-        <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>
+    </p>
-    </div>
+  </div>
-
 {% endblock content %}

templates/framework.html

@@ -124,7 +124,7 @@
 
           <!-- Collect the nav links, forms, and other content for toggling -->
           <div
-            class="collapse navbar-collapse collapse-framework navbar-collapse-framework"
+            class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
             id="navbarCollapse"
           >
             <ul class="nav navbar-nav navbar-nav-framework">
@@ -338,7 +338,7 @@
               >
             </div>
           </div>
-          <div id="license" class="panel-collapse collapse in">
+          <div id="license" class="panel-collapse in collapse">
             <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="max-w-7xl mx-auto px-4 py-4">
+          <div id="bread" class="mx-auto max-w-7xl 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 collapse-arrow bg-base-200 m-8">
+            <div class="collapse-arrow bg-base-200 collapse p-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 right-0 top-1/2 -translate-y-1/2 z-50">
+      <div class="fixed top-1/2 right-0 z-50 -translate-y-1/2">
         <a
           href="https://community.envipath.org/"
           target="_blank"
@@ -178,6 +178,23 @@
         }
       });
 
+      // Open search modal function
+      function openSearchModal() {
+        const searchModal = document.getElementById("search_modal");
+        if (searchModal) {
+          searchModal.showModal();
+        }
+      }
+
+      // Click handler for search badge
+      const searchTrigger = document.getElementById("search-trigger");
+      if (searchTrigger) {
+        searchTrigger.addEventListener("click", function (event) {
+          event.preventDefault();
+          openSearchModal();
+        });
+      }
+
       // Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
       document.addEventListener("keydown", function (event) {
         // Check if user is typing in an input field
@@ -198,7 +215,7 @@
 
         if (isCorrectModifier && event.key === "k") {
           event.preventDefault();
-          search_modal.showModal();
+          openSearchModal();
         }
       });
     </script>

templates/includes/footer.html

@@ -1,19 +1,22 @@
 {% load static %}
-<div class="lg:max-w-5xl mt-10 mx-auto bg-base-300 text-base-content">
+<div class="bg-base-300 text-base-content mx-auto mt-10 lg:max-w-5xl">
-
+  <footer class="footer sm:footer-horizontal p-10">
-    <footer class="footer sm:footer-horizontal p-10">
+    {% if not public_mode %}
-        {% if not public_mode %}
+      <nav>
-        <nav>
+        <h6 class="footer-title">Services</h6>
-            <h6 class="footer-title">Services</h6>
+        <a class="link link-hover" href="/predict">Predict</a>
-            <a class="link link-hover" href="/">Predict</a>
+        <a class="link link-hover" href="/package">Packages</a>
-            <a class="link link-hover" href="/search">Search</a>
+        {% if user.is_authenticated %}
-            <a class="link link-hover" href="/package">Browse</a>
+          <a class="link link-hover" href="/model">Your Collections</a>
-            {% if user.is_authenticated %}
-            <a class="link link-hover" href="/model">Your Collections</a>
-            {% endif %}
-            <a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
-    </nav>
         {% endif %}
+        <a
+          href="https://wiki.envipath.org/"
+          target="_blank"
+          class="link link-hover"
+          >Documentation</a
+        >
+      </nav>
+    {% endif %}
     <nav>
       <h6 class="footer-title">Company</h6>
       <a class="link link-hover" href="/about">About us</a>
@@ -29,39 +32,61 @@
       <a class="link link-hover" href="/cite">Cite enviPath</a>
     </nav>
   </footer>
-  <footer class="footer border-neutral-300 border-t-2 px-10 py-4">
+  <footer class="footer border-t-2 border-neutral-300 px-10 py-4">
-    <div class="flex flex-row justify-between w-full items-start">
+    <div class="flex w-full flex-row items-start justify-between">
       <aside class="grid-flow-col items-center">
-          <svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" >
+        <svg
-              <use
+          class="fill-neutral-content m-2 h-14 flex-shrink-0"
-                href="{% static "/images/logo-square.svg" %}#ep-logo-square"
+          viewbox="0 0 65 65"
-              >
+        >
-              </use>
+          <use
-            </svg>
+            href="{% static "/images/logo-square.svg" %}#ep-logo-square"
+          ></use>
+        </svg>
 
-          enviPath Ltd.
+        enviPath Ltd.
-          <br />
+        <br />
-          Biodegredation prediction since 2015.
+        Biodegredation prediction since 2015.
-        </p>
+      </aside>
+      <aside class="text-base-200 mt-2 text-sm">
+        <span class="text-xs tracking-tight">Version</span>
+        <span class="text-base font-bold">{{ meta.version }}</span>
       </aside>
-      <aside class="text-sm text-base-200 mt-2"><span class="text-xs tracking-tight">Version</span> <span class="text-base font-bold">{{ meta.version }}</span></aside>
     </div>
     <nav class="md:place-self-center md:justify-self-end">
       <div class="grid grid-flow-col gap-4">
         <a href="https://www.youtube.com/@envipath7231" target="_blank">
-            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
+          <svg
-                <title>YouTube</title>
+            role="img"
-                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+            viewBox="0 0 24 24"
-            </svg>
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6 fill-current"
+          >
+            <title>YouTube</title>
+            <path
+              d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+            />
+          </svg>
         </a>
         <a href="https://community.envipath.org/" target="_blank">
-            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
+          <svg
-                <title>Discourse</title>
+            role="img"
-                <path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/>
+            viewBox="0 0 24 24"
-            </svg>
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6 fill-current"
+          >
+            <title>Discourse</title>
+            <path
+              d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"
+            />
+          </svg>
         </a>
         <a href="https://www.linkedin.com/company/envipath/" target="_blank">
-            <img src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6">
+          <img
+            src="{% static "/images/linkedin.png" %}"
+            alt="LinkedIn"
+            class="h-6 w-6"
+          />
         </a>
       </div>
     </nav>

templates/includes/navbar.html

@@ -1,9 +1,9 @@
 {% load static %}
 {# Modern DaisyUI Navbar #}
-<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50">
+<div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg">
   <div class="navbar-start">
-    <a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
+    <a href="{{ meta.server_url }}" class="btn btn-ghost text-xl normal-case">
-      <svg class="h-8 fill-base-content" viewBox="0 0 104 26" role="img">
+      <svg class="fill-base-content h-8" viewBox="0 0 104 26" role="img">
         <use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
       </svg>
     </a>
@@ -26,6 +26,9 @@
           tabindex="-1"
           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>
+          </li>
           <li>
             <a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a>
           </li>
@@ -57,9 +60,9 @@
 
   <div class="navbar-end">
     {% if not public_mode %}
-      <a href="/search" role="button">
+      <a id="search-trigger" role="button" class="cursor-pointer">
         <div
-          class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
+          class="badge badge-dash bg-base-200 text-base-content/50 m-1 flex items-center space-x-1 p-2"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -87,7 +90,7 @@
         <div
           tabindex="0"
           role="button"
-          class="btn btn-ghost m-1 btn-circle"
+          class="btn btn-ghost btn-circle m-1"
           id="loggedInButton"
         >
           <svg

templates/index/index.html

@@ -2,74 +2,86 @@
 {% load static %}
 {% block main_content %}
   <!-- Hero Section with Logo and Search -->
-  <section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
+  <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
     <div
-      class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
+      class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
       style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
     >
       <div class="hero-overlay"></div>
       <!-- Predict Pathway text over the image -->
-      <div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
+      <div class="absolute bottom-40 left-1/8 z-10 -translate-x-8">
-        <h2 class="text-3xl text-base-100 text-shadow-lg text-left">
+        <h2 class="text-base-100 text-left text-3xl text-shadow-lg">
           Predict Your Pathway
         </h2>
       </div>
     </div>
   </section>
 
-  <div class="shadow-md max-w-5xl mx-auto bg-base-200">
+  <div class="bg-base-200 mx-auto max-w-5xl shadow-md">
     <!-- Predict Pathway Section -->
     <div
-      class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 "
+      class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
     >
       <div
-        class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out"
+        class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
       >
         <div class="card-body">
-          <!-- Input Mode Toggle - Fixed position outside fieldset -->
+          <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
-          <div class="flex flex-row justify-start items-center h-fit ml-8 my-4">
+            <div class="flex items-center gap-1">
-            <div class="flex items-center gap-2">
+              <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
-              <!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
-              <label class="toggle text-base-content toggle-md">
                 <input type="checkbox" />
-                <svg
+                <span class="swap-on flex items-center gap-1">
-                  aria-label="smiles mode"
+                  <div
-                  xmlns="http://www.w3.org/2000/svg"
+                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
-                  viewBox="0 0 20 20"
-                  class="size-5"
-                >
-                  <g
-                    stroke-linejoin="round"
-                    stroke-linecap="round"
-                    stroke-width="2"
-                    fill="currentColor"
-                    stroke="none"
                   >
-                    <path
+                    <svg
-                      fill-rule="evenodd"
+                      aria-label="smiles mode"
-                      d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z"
+                      xmlns="http://www.w3.org/2000/svg"
-                      clip-rule="evenodd"
+                      viewBox="0 0 20 20"
-                    />
+                      class="size-5"
-                  </g>
+                    >
-                </svg>
+                      <g
-                <svg
+                        stroke-linejoin="round"
-                  aria-label="draw mode"
+                        stroke-linecap="round"
-                  xmlns="http://www.w3.org/2000/svg"
+                        stroke-width="2"
-                  viewBox="0 0 20 20"
+                        fill="currentColor"
-                  fill="currentColor"
+                        stroke="none"
-                  stroke="none"
+                      >
-                  class="size-5"
+                        <path
-                >
+                          fill-rule="evenodd"
-                  <path
+                          d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z"
-                    d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
+                          clip-rule="evenodd"
-                  />
+                        />
-                </svg>
+                      </g>
+                    </svg>
+                  </div>
+                  <span class="ext-xs">SMILES</span>
+                </span>
+                <span class="swap-off flex items-center gap-1">
+                  <div
+                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
+                  >
+                    <svg
+                      aria-label="draw mode"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      stroke="none"
+                      class="size-5"
+                    >
+                      <path
+                        d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
+                      />
+                    </svg>
+                  </div>
+                  <span class="text-base/50 text-xs">Draw</span>
+                </span>
               </label>
             </div>
           </div>
 
           <fieldset
-            class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
+            class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
           >
             <form
               id="index-form"
@@ -79,29 +91,29 @@
               {% csrf_token %}
               <div
                 id="text-input-container"
-                class="transition-all duration-300 ease-in-out opacity-100 transform scale-100"
+                class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
               >
-                <div class="join w-full mx-auto">
+                <div class="join mx-auto w-full">
                   <input
                     type="text"
                     id="index-form-text-input"
                     placeholder="canonical SMILES string"
-                    class="input grow input-md join-item"
+                    class="input input-md join-item grow"
                   />
                   <button class="btn btn-neutral join-item">Predict!</button>
                 </div>
-                <div class="label relative w-full mt-1">
+                <div class="label relative mt-1 w-full">
                   <div class="flex gap-2">
                     <a
                       href="#"
-                      class="example-link cursor-pointer hover:text-primary"
+                      class="example-link hover:text-primary cursor-pointer"
                       data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
                       title="load example"
                       >Caffeine</a
                     >
                     <a
                       href="#"
-                      class="example-link cursor-pointer hover:text-primary"
+                      class="example-link hover:text-primary cursor-pointer"
                       data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
                       title="load example"
                       >Ibuprofen</a
@@ -114,7 +126,7 @@
               </div>
               <div
                 id="ketcher-container"
-                class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95"
+                class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
               >
                 <iframe
                   id="index-ketcher"
@@ -124,11 +136,13 @@
                   class="rounded-lg"
                 ></iframe>
                 <button
-                  class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2"
+                  class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
                 >
                   Predict!
                 </button>
-                <a class="label mx-auto w-full mt-1" href="#">Advanced</a>
+                <div class="mt-1 flex w-full justify-end">
+                  <a class="label justify-end" href="/predict">Advanced</a>
+                </div>
               </div>
               <input
                 type="hidden"
@@ -150,18 +164,18 @@
     </div>
 
     <!-- Community News Section -->
-    <section class="py-16 bg-base-200 z-10 mx-8">
+    <section class="bg-base-200 z-10 mx-8 py-16">
-      <div class="max-w-7xl mx-auto px-4">
+      <div class="mx-auto max-w-7xl px-4">
-        <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
+        <h2 class="h2 mb-8 text-left font-bold">Community Updates</h2>
 
-        <div id="community-news-container" class="flex gap-4 justify-center">
+        <div id="community-news-container" class="flex justify-center gap-4">
           <!-- News cards will be populated here -->
-          <div id="loading" class="flex justify-center w-full">
+          <div id="loading" class="flex w-full justify-center">
             <span class="loading loading-spinner loading-lg"></span>
           </div>
         </div>
 
-        <div class="text-right mt-6">
+        <div class="mt-6 text-right">
           <a
             href="https://community.envipath.org/c/announcements/10"
             target="_blank"
@@ -177,18 +191,18 @@
     </section>
 
     <!-- Mission Statement Section -->
-    <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
+    <section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
       <div class="mx-auto px-8 md:px-12">
         <div class="flex flex-row gap-4">
           <div class="w-1/3">
             <img
               src="{% static "/images/ep-rule-artwork.png" %}"
               alt="rule-based iterative tree greneration"
-              class="w-full h-full object-contain"
+              class="h-full w-full object-contain"
             />
           </div>
-          <div class="space-y-4 text-left w-2/3 mr-8">
+          <div class="mr-8 w-2/3 space-y-4 text-left">
-            <h2 class="h2 font-bold mb-8">About enviPath</h2>
+            <h2 class="h2 mb-8 font-bold">About enviPath</h2>
             <p class="">
               enviPath is a database and prediction system for the microbial
               biotransformation of organic environmental contaminants. The
@@ -201,7 +215,7 @@
               products. Explore our tools and contribute to advancing
               environmental biotransformation research.
             </p>
-            <div class="flex flex-row gap-4 float-right">
+            <div class="float-right flex flex-row gap-4">
               <a href="/about" class="btn btn-ghost-neutral">Read More</a>
               <a href="/about" class="btn btn-neutral">Publications</a>
             </div>
@@ -211,7 +225,7 @@
     </section>
 
     <!-- Partners Section -->
-    <section class="py-14 sm:py-12 bg-base-100">
+    <section class="bg-base-100 py-14 sm:py-12">
       <div class="mx-auto px-6 lg:px-8">
         <div class="divider">
           <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
@@ -222,12 +236,12 @@
           <img
             src="{% static "/images/uoa-logo-small.png" %}"
             alt="The University of Auckland"
-            class=" max-h-20 w-full object-contain lg:col-span-1"
+            class="max-h-20 w-full object-contain lg:col-span-1"
           />
           <img
             src="{% static "/images/logo-eawag.svg" %}"
             alt="Eawag"
-            class=" max-h-12 w-full object-contain lg:col-span-1"
+            class="max-h-12 w-full object-contain lg:col-span-1"
           />
           <img
             src="{% static "/images/uzh-logo.svg" %}"

templates/migration.html

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

templates/migration_detail.html

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

templates/modals/cite_modal.html

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

templates/modals/collections/import_legacy_package_modal.html

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

templates/modals/collections/import_package_modal.html

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

templates/modals/collections/new_compound_modal.html

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

templates/modals/collections/new_group_modal.html

@@ -1,45 +1,70 @@
-<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
+<div
-     aria-hidden="true">
+  class="modal fade"
-    <div class="modal-dialog">
+  tabindex="-1"
-        <div class="modal-content">
+  id="new_group_modal"
-            <div class="modal-header">
+  role="dialog"
-                <button type="button" class="close" data-dismiss="modal">
+  aria-labelledby="new_group_modal"
-                    <span aria-hidden="true">&times;</span>
+  aria-hidden="true"
-                    <span class="sr-only">Close</span>
+>
-                </button>
+  <div class="modal-dialog">
-                <h4 class="modal-title">New Group</h4>
+    <div class="modal-content">
-            </div>
+      <div class="modal-header">
-            <div class="modal-body">
+        <button type="button" class="close" data-dismiss="modal">
-                <p>Create new Group. You can assign users to the group once
+          <span aria-hidden="true">&times;</span>
-                    it is created. Description can be changed after creation.</p>
+          <span class="sr-only">Close</span>
-                <form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
+        </button>
-                      data-remote="true"
+        <h4 class="modal-title">New Group</h4>
-                      method="post">
+      </div>
-                    {% csrf_token %}
+      <div class="modal-body">
-                    <p>
+        <p>
-                        <label for="name">Name</label>
+          Create new Group. You can assign users to the group once it is
-                        <input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
+          created. Description can be changed after creation.
-                    </p>
+        </p>
-                    <p>
+        <form
-                        <label for="description">Description</label>
+          id="new_group_modal_form"
-                        <input id="description" type="text" class="form-control" placeholder="Description..."
+          accept-charset="UTF-8"
-                               name="group-description"/>
+          action="{{ SERVER_BASE }}/group"
-                    </p>
+          data-remote="true"
-                </form>
+          method="post"
-            </div>
+        >
-            <div class="modal-footer">
+          {% csrf_token %}
-                <a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
+          <p>
-                <button type="button" class="btn btn-default" data-dismiss="modal">
+            <label for="name">Name</label>
-                    Cancel
+            <input
-                </button>
+              id="name"
-            </div>
+              type="text"
-        </div>
+              name="group-name"
+              class="form-control"
+              placeholder="Name"
+            />
+          </p>
+          <p>
+            <label for="description">Description</label>
+            <input
+              id="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="#"
+          >Submit</a
+        >
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Cancel
+        </button>
+      </div>
     </div>
+  </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,188 +1,270 @@
+<div
+  class="modal fade"
+  tabindex="-1"
+  id="new_model_modal"
+  role="dialog"
+  aria-labelledby="new_model_modal"
+  aria-hidden="true"
+>
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">&times;</span>
+          <span class="sr-only">Close</span>
+        </button>
+        <h4 class="modal-title">New Model</h4>
+      </div>
+      <div class="modal-body">
+        <form
+          id="new_model_form"
+          accept-charset="UTF-8"
+          action="{{ meta.current_package.url }}/model"
+          data-remote="true"
+          method="post"
+        >
+          {% csrf_token %}
+          <div class="jumbotron">
+            Create a new Model to limit the number of degradation products in
+            the prediction. You just need to set a name and the packages you
+            want the object to be based on. There are multiple types of models
+            available. For additional information have a look at our
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/relative-reasoning"
+              role="button"
+              >wiki &gt;&gt;</a
+            >
+          </div>
+          <!-- Name -->
+          <label for="model-name">Name</label>
+          <input
+            id="model-name"
+            name="model-name"
+            class="form-control"
+            placeholder="Name"
+          />
 
-<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
+          <!-- Description -->
-     aria-hidden="true">
+          <label for="model-description">Description</label>
-    <div class="modal-dialog modal-lg">
+          <input
-        <div class="modal-content">
+            id="model-description"
-            <div class="modal-header">
+            name="model-description"
-                <button type="button" class="close" data-dismiss="modal">
+            class="form-control"
-                    <span aria-hidden="true">&times;</span>
+            placeholder="Description"
-                    <span class="sr-only">Close</span>
+          />
-                </button>
-                <h4 class="modal-title">New Model</h4>
-            </div>
-            <div class="modal-body">
-                <form id="new_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
-                      data-remote="true" method="post">
-                    {% csrf_token %}
-                    <div class="jumbotron">Create a new Model to
-                        limit the number of degradation products in the
-                        prediction. You just need to set a name and the packages
-                        you want the object to be based on. There are multiple types of models available.
-                        For additional information have a look at our
-                        <a target="_blank" href="https://wiki.envipath.org/index.php/relative-reasoning" role="button">wiki
-                            &gt;&gt;</a>
-                    </div>
-                    <!-- Name -->
-                    <label for="model-name">Name</label>
-                    <input id="model-name" name="model-name" class="form-control" placeholder="Name"/>
 
-                    <!-- Description -->
+          <!-- Model Type -->
-                    <label for="model-description">Description</label>
+          <label for="model-type">Model Type</label>
-                    <input id="model-description" name="model-description" class="form-control"
+          <select
-                           placeholder="Description"/>
+            id="model-type"
+            name="model-type"
+            class="form-control"
+            data-width="100%"
+          >
+            <option disabled selected>Select Model Type</option>
+            {% for k, v in model_types.items %}
+              <option value="{{ v }}">{{ k }}</option>
+            {% endfor %}
+          </select>
 
-                    <!-- Model Type -->
+          <!-- Rule Packages -->
-                    <label for="model-type">Model Type</label>
+          <div id="rule-packages" class="ep-model-param mlrr rbrr">
-                    <select id="model-type" name="model-type" class="form-control" data-width='100%'>
+            <label for="model-rule-packages">Rule Packages</label>
-                        <option disabled selected>Select Model Type</option>
+            <select
-                        {% for k, v in model_types.items %}
+              id="model-rule-packages"
-                            <option value="{{ v }}">{{ k }}</option>
+              name="model-rule-packages"
-                        {% endfor %}
+              data-actions-box="true"
-                    </select>
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
+              <option disabled>Reviewed Packages</option>
+              {% for obj in meta.readable_packages %}
+                {% if obj.reviewed %}
+                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+                {% endif %}
+              {% endfor %}
 
-                    <!-- Rule Packages -->
+              <option disabled>Unreviewed Packages</option>
-                    <div id="rule-packages" class="ep-model-param mlrr rbrr">
+              {% for obj in meta.readable_packages %}
-                        <label for="model-rule-packages">Rule Packages</label>
+                {% if not obj.reviewed %}
-                        <select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
+                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                                class="form-control" multiple data-width='100%'>
+                {% endif %}
-                            <option disabled>Reviewed Packages</option>
+              {% endfor %}
-                            {% for obj in meta.readable_packages %}
+            </select>
-                                {% if obj.reviewed %}
+          </div>
-                                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                                {% endif %}
-                            {% endfor %}
 
-                            <option disabled>Unreviewed Packages</option>
+          <!-- Data Packages -->
-                            {% for obj in meta.readable_packages %}
+          <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
-                                {% if not obj.reviewed %}
+            <label for="model-data-packages">Data Packages</label>
-                                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+            <select
-                                {% endif %}
+              id="model-data-packages"
-                            {% endfor %}
+              name="model-data-packages"
-                        </select>
+              data-actions-box="true"
-                    </div>
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
+              <option disabled>Reviewed Packages</option>
+              {% for obj in meta.readable_packages %}
+                {% if obj.reviewed %}
+                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+                {% endif %}
+              {% endfor %}
 
-                    <!-- Data Packages -->
+              <option disabled>Unreviewed Packages</option>
-                    <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
+              {% for obj in meta.readable_packages %}
-                        <label for="model-data-packages">Data Packages</label>
+                {% if not obj.reviewed %}
-                        <select id="model-data-packages" name="model-data-packages" data-actions-box='true'
+                  <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                                class="form-control" multiple data-width='100%'>
+                {% endif %}
-                            <option disabled>Reviewed Packages</option>
+              {% endfor %}
-                            {% for obj in meta.readable_packages %}
+            </select>
-                                {% if obj.reviewed %}
+          </div>
-                                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                                {% endif %}
-                            {% endfor %}
 
-                            <option disabled>Unreviewed Packages</option>
+          <!-- Fingerprinter -->
-                            {% for obj in meta.readable_packages %}
+          <div id="fingerprinter" class="ep-model-param mlrr">
-                                {% if not obj.reviewed %}
+            <label for="model-fingerprinter">Fingerprinter</label>
-                                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+            <select
-                                {% endif %}
+              id="model-fingerprinter"
-                            {% endfor %}
+              name="model-fingerprinter"
-                        </select>
+              data-actions-box="true"
-                    </div>
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
+              <option value="MACCS" selected>MACCS Fingerprinter</option>
+              {% if meta.enabled_features.PLUGINS and additional_descriptors %}
+                <option disabled selected>
+                  Select Additional Fingerprinter / Descriptor
+                </option>
+                {% for k, v in additional_descriptors.items %}
+                  <option value="{{ v }}">{{ k }}</option>
+                {% endfor %}
+              {% endif %}
+            </select>
+          </div>
 
-                    <!-- Fingerprinter -->
+          <!-- Threshold -->
-                    <div id="fingerprinter" class="ep-model-param mlrr">
+          <div id="threshold" class="ep-model-param mlrr enviformer">
-                        <label for="model-fingerprinter">Fingerprinter</label>
+            <label for="model-threshold">Threshold</label>
-                        <select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
+            <input
-                                class="form-control" multiple data-width='100%'>
+              type="number"
-                            <option value="MACCS" selected>MACCS Fingerprinter</option>
+              min="0"
-                            {% if meta.enabled_features.PLUGINS and additional_descriptors %}
+              max="1"
-                                <option disabled selected>Select Additional Fingerprinter / Descriptor</option>
+              step="0.05"
-                                {% for k, v in additional_descriptors.items %}
+              value="0.5"
-                                    <option value="{{ v }}">{{ k }}</option>
+              id="model-threshold"
-                                {% endfor %}
+              name="model-threshold"
-                            {% endif %}
+              class="form-control"
-                        </select>
+            />
-                    </div>
+          </div>
 
-                    <!-- Threshold -->
+          <div id="appdomain" class="ep-model-param mlrr">
-                    <div id="threshold" class="ep-model-param mlrr enviformer">
+            {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
-                        <label for="model-threshold">Threshold</label>
+              <!-- Build AD? -->
-                        <input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
+              <div class="checkbox">
-                               name="model-threshold" class="form-control">
+                <label>
-                    </div>
+                  <input
-
+                    type="checkbox"
-                    <div id="appdomain" class="ep-model-param mlrr">
+                    id="build-app-domain"
-                        {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
+                    name="build-app-domain"
-                            <!-- Build AD? -->
+                  />Also build an Applicability Domain?
-                            <div class="checkbox">
+                </label>
-                                <label>
+              </div>
-                                    <input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
+              <div id="ad-params" style="display:none">
-                                    Applicability Domain?
+                <!-- Num Neighbors -->
-                                </label>
+                <label for="num-neighbors">Number of Neighbors</label>
-                            </div>
+                <input
-                            <div id="ad-params" style="display:none">
+                  id="num-neighbors"
-                                <!-- Num Neighbors -->
+                  name="num-neighbors"
-                                <label for="num-neighbors">Number of Neighbors</label>
+                  type="number"
-                                <input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
+                  class="form-control"
-                                       value="5"
+                  value="5"
-                                       step="1" min="0" max="10">
+                  step="1"
-                                <!-- Local Compatibility -->
+                  min="0"
-                                <label for="local-compatibility-threshold">Local Compatibility Threshold</label>
+                  max="10"
-                                <input id="local-compatibility-threshold" name="local-compatibility-threshold"
+                />
-                                       type="number"
+                <!-- Local Compatibility -->
-                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
+                <label for="local-compatibility-threshold"
-                                <!-- Reliability -->
+                  >Local Compatibility Threshold</label
-                                <label for="reliability-threshold">Reliability Threshold</label>
+                >
-                                <input id="reliability-threshold" name="reliability-threshold" type="number"
+                <input
-                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
+                  id="local-compatibility-threshold"
-                            </div>
+                  name="local-compatibility-threshold"
-                        {% endif %}
+                  type="number"
-                    </div>
+                  class="form-control"
-                </form>
+                  value="0.5"
-            </div>
+                  step="0.01"
-            <div class="modal-footer">
+                  min="0"
-                <a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
+                  max="1"
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                />
-            </div>
+                <!-- Reliability -->
-        </div>
+                <label for="reliability-threshold">Reliability Threshold</label>
+                <input
+                  id="reliability-threshold"
+                  name="reliability-threshold"
+                  type="number"
+                  class="form-control"
+                  value="0.5"
+                  step="0.01"
+                  min="0"
+                  max="1"
+                />
+              </div>
+            {% endif %}
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <a id="new_model_modal_form_submit" class="btn btn-primary" href="#"
+          >Submit</a
+        >
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Cancel
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 
 <script>
-    $(function () {
+  $(function () {
-        // Built in Model Types
+    // Built in Model Types
-        var nativeModelTypes = [
+    var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
-            "mlrr",
-            "rbrr",
-            "enviformer",
-        ]
-
-        // Initially hide all "specific" forms
-        $(".ep-model-param").each(function () {
-            $(this).hide();
-        });
-
-        $('#model-type').selectpicker();
-        $("#model-fingerprinter").selectpicker();
-        $("#model-rule-packages").selectpicker();
-        $("#model-data-packages").selectpicker();
-
-        $("#build-app-domain").change(function () {
-            if ($(this).is(":checked")) {
-                $('#ad-params').show();
-            } else {
-                $('#ad-params').hide();
-            }
-        });
-
-        // On change hide all and show only selected
-        $("#model-type").change(function () {
-            $('.ep-model-param').hide();
-            var modelType = $('#model-type').val();
-            if (nativeModelTypes.indexOf(modelType) !== -1) {
-                $('.' + modelType).show();
-            } else {
-                // do nothing
-            }
-        });
-
-        $('#new_model_modal_form_submit').on('click', function (e) {
-            e.preventDefault();
-            $('#new_model_form').submit();
-        });
 
+    // Initially hide all "specific" forms
+    $(".ep-model-param").each(function () {
+      $(this).hide();
     });
+
+    $("#model-type").selectpicker();
+    $("#model-fingerprinter").selectpicker();
+    $("#model-rule-packages").selectpicker();
+    $("#model-data-packages").selectpicker();
+
+    $("#build-app-domain").change(function () {
+      if ($(this).is(":checked")) {
+        $("#ad-params").show();
+      } else {
+        $("#ad-params").hide();
+      }
+    });
+
+    // On change hide all and show only selected
+    $("#model-type").change(function () {
+      $(".ep-model-param").hide();
+      var modelType = $("#model-type").val();
+      if (nativeModelTypes.indexOf(modelType) !== -1) {
+        $("." + modelType).show();
+      } else {
+        // do nothing
+      }
+    });
+
+    $("#new_model_modal_form_submit").on("click", function (e) {
+      e.preventDefault();
+      $("#new_model_form").submit();
+    });
+  });
 </script>

templates/modals/collections/new_package_modal.html

@@ -1,62 +1,68 @@
-<div class="modal fade"
+<div
-     tabindex="-1"
+  class="modal fade"
-     id="new_package_modal"
+  tabindex="-1"
-     role="dialog"
+  id="new_package_modal"
-     aria-labelledby="new_package_modal"
+  role="dialog"
-     aria-hidden="true">
+  aria-labelledby="new_package_modal"
-    <div class="modal-dialog">
+  aria-hidden="true"
-        <div class="modal-content">
+>
-            <div class="modal-header">
+  <div class="modal-dialog">
-                <button type="button"
+    <div class="modal-content">
-                        class="close"
+      <div class="modal-header">
-                        data-dismiss="modal">
+        <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>
+        </button>
-                <h4 class="modal-title">New Package</h4>
+        <h4 class="modal-title">New Package</h4>
-            </div>
+      </div>
-            <div class="modal-body">
+      <div class="modal-body">
-                <p>Create new package. Description can be changed later.</p>
+        <p>Create new package. Description can be changed later.</p>
-                <form id="new_package_modal_form"
+        <form
-                      accept-charset="UTF-8"
+          id="new_package_modal_form"
-                      action=""
+          accept-charset="UTF-8"
-                      data-remote="true"
+          action=""
-                      method="post">
+          data-remote="true"
-                    {% csrf_token %}
+          method="post"
-                    <p>
+        >
-                        <label for="name">Name</label>
+          {% csrf_token %}
-                        <input id="name" class="form-control"
+          <p>
-                               name="package-name"
+            <label for="name">Name</label>
-                               placeholder="Name"/>
+            <input
-                    </p>
+              id="name"
-                    <p>
+              class="form-control"
-                        <label for="description">Description</label>
+              name="package-name"
-                        <input id="description"
+              placeholder="Name"
-                               type="text"
+            />
-                               rows="3"
+          </p>
-                               class="form-control"
+          <p>
-                               placeholder="Description..."
+            <label for="description">Description</label>
-                               name="package-description"/>
+            <input
-                    </p>
+              id="description"
-                </form>
+              type="text"
-            </div>
+              rows="3"
-            <div class="modal-footer">
+              class="form-control"
-                <a id="new_package_modal_form_submit"
+              placeholder="Description..."
-                   class="btn btn-primary"
+              name="package-description"
-                   href="#">Submit</a>
+            />
-                <button type="button"
+          </p>
-                        class="btn btn-default"
+        </form>
-                        data-dismiss="modal">Cancel
+      </div>
-                </button>
+      <div class="modal-footer">
-            </div>
+        <a id="new_package_modal_form_submit" class="btn btn-primary" href="#"
-        </div>
+          >Submit</a
+        >
+        <button type="button" 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();
+      e.preventDefault();
-        $('#new_package_modal_form').submit();
+      $("#new_package_modal_form").submit();
     });
-});
+  });
 </script>

templates/modals/collections/new_pathway_modal.html

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

templates/modals/collections/new_prediction_setting_modal.html

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

templates/modals/collections/new_reaction_modal.html

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

templates/modals/collections/new_rule_modal.html

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

templates/modals/collections/new_scenario_modal.html

@@ -1,102 +1,153 @@
-<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
+<div
-     aria-hidden="true">
+  class="modal fade"
-    <div class="modal-dialog modal-lg">
+  tabindex="-1"
-        <div class="modal-content">
+  id="new_scenario_modal"
-            <div class="modal-header">
+  role="dialog"
-                <button type="button" class="close" data-dismiss="modal">
+  aria-labelledby="new_scenario_modal"
-                    <span aria-hidden="true">&times;</span>
+  aria-hidden="true"
-                    <span class="sr-only">Close</span>
+>
-                </button>
+  <div class="modal-dialog modal-lg">
-                <h4 class="modal-title">New Scenario</h4>
+    <div class="modal-content">
-            </div>
+      <div class="modal-header">
-            <div class="modal-body">
+        <button type="button" class="close" data-dismiss="modal">
-                <form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
+          <span aria-hidden="true">&times;</span>
-                      data-remote="true" method="post">
+          <span class="sr-only">Close</span>
-                    {% csrf_token %}
+        </button>
-                    <div class="jumbotron">Please enter name, description, and date of scenario. Date should be
+        <h4 class="modal-title">New Scenario</h4>
-                        associated to the data, not the current date. For example, this could reflect the publishing
+      </div>
-                        date of a study. You can leave all fields but the name empty and fill them in later.
+      <div class="modal-body">
-                        <a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
+        <form
-                            &gt;&gt;</a>
+          id="new_scenario_form"
-                    </div>
+          accept-charset="UTF-8"
-                    <label for="scenario-name">Name</label>
+          action="{{ meta.current_package.url }}/scenario"
-                    <input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
+          data-remote="true"
-                    <label for="scenario-description">Description</label>
+          method="post"
-                    <input id="scenario-description" name="scenario-description" class="form-control"
+        >
-                           placeholder="Description"/>
+          {% csrf_token %}
-                    <label id="dateField" for="dateYear">Date</label>
+          <div class="jumbotron">
-                    <table>
+            Please enter name, description, and date of scenario. Date should be
-                        <tr>
+            associated to the data, not the current date. For example, this
-                            <th>
+            could reflect the publishing date of a study. You can leave all
-                                <input type="number" id="dateYear" name="scenario-date-year" class="form-control"
+            fields but the name empty and fill them in later.
-                                       placeholder="YYYY" max="{% now "Y" %}">
+            <a
-                            </th>
+              target="_blank"
-                            <th>
+              href="https://wiki.envipath.org/index.php/scenario"
-                                <input type="number" id="dateMonth" name="scenario-date-month" min="1" max="12"
+              role="button"
-                                       class="form-control" placeholder="MM" >
+              >wiki &gt;&gt;</a
-                            </th>
+            >
-                            <th>
+          </div>
-                                <input type="number" id="dateDay" name="scenario-date-day" min="1" max="31" class="form-control"
+          <label for="scenario-name">Name</label>
-                                       placeholder="DD">
+          <input
-                            </th>
+            id="scenario-name"
-                        </tr>
+            name="scenario-name"
-                    </table>
+            class="form-control"
-                    <label for="scenario-type">Scenario Type</label>
+            placeholder="Name"
-                    <select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
+          />
-                        <option value="empty" selected>Empty Scenario</option>
+          <label for="scenario-description">Description</label>
-                        {% for k, v in scenario_types.items %}
+          <input
-                            <option value="{{ v.name }}">{{ k }}</option>
+            id="scenario-description"
-                        {% endfor %}
+            name="scenario-description"
-                    </select>
+            class="form-control"
+            placeholder="Description"
+          />
+          <label id="dateField" for="dateYear">Date</label>
+          <table>
+            <tr>
+              <th>
+                <input
+                  type="number"
+                  id="dateYear"
+                  name="scenario-date-year"
+                  class="form-control"
+                  placeholder="YYYY"
+                  max="{% now "Y" %}"
+                />
+              </th>
+              <th>
+                <input
+                  type="number"
+                  id="dateMonth"
+                  name="scenario-date-month"
+                  min="1"
+                  max="12"
+                  class="form-control"
+                  placeholder="MM"
+                />
+              </th>
+              <th>
+                <input
+                  type="number"
+                  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
+            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>
+            {% endfor %}
+          </select>
 
-                    {% for type in scenario_types.values %}
+          {% for type in scenario_types.values %}
-                        <div id="{{ type.name }}-specific-inputs">
+            <div id="{{ type.name }}-specific-inputs">
-                            {% for widget in type.widgets %}
+              {% for widget in type.widgets %}
-                                {{ widget|safe }}
+                {{ widget|safe }}
-                            {% endfor %}
+              {% endfor %}
-                        </div>
-                    {% endfor %}
-
-                </form>
             </div>
-            <div class="modal-footer">
+          {% endfor %}
-                <a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
+        </form>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+      </div>
-            </div>
+      <div class="modal-footer">
-        </div>
+        <a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#"
+          >Submit</a
+        >
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Cancel
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 
 <script>
-    $(function () {
+  $(function () {
-        // Initially hide all "specific" forms
+    // Initially hide all "specific" forms
-        $("div[id$='-specific-inputs']").each(function () {
+    $("div[id$='-specific-inputs']").each(function () {
-            $(this).hide();
+      $(this).hide();
-        });
-
-        // On change hide all and show only selected
-        $("#scenario-type").change(function () {
-            $("div[id$='-specific-inputs']").each(function () {
-                $(this).hide();
-            });
-            val = $('option:selected', this).val();
-            $("#" + val + "-specific-inputs").show();
-        });
-
-        $('#new_scenario_modal_form_submit').on('click', function (e) {
-            e.preventDefault();
-            $('#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 = {% now "Y" %};
-            }
-        });
-
     });
 
-</script>
+    // On change hide all and show only selected
+    $("#scenario-type").change(function () {
+      $("div[id$='-specific-inputs']").each(function () {
+        $(this).hide();
+      });
+      val = $("option:selected", this).val();
+      $("#" + val + "-specific-inputs").show();
+    });
 
+    $("#new_scenario_modal_form_submit").on("click", function (e) {
+      e.preventDefault();
+      $("#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();
+      }
+    });
+  });
+</script>

templates/modals/objects/add_additional_information_modal.html

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

templates/modals/objects/add_pathway_edge_modal.html

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

templates/modals/objects/add_pathway_node_modal.html

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

templates/modals/objects/add_structure_modal.html

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

templates/modals/objects/delete_pathway_edge_modal.html

@@ -1,66 +1,89 @@
-
 {% load static %}
 <!-- Delete Edge -->
 <div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h3 class="modal-title">Delete Edge</h3>
+        <h3 class="modal-title">Delete Edge</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                Deletes the Edge. Nodes referenced by this edge will remain.
+        >
-                <p></p>
+          <span aria-hidden="true">&times;</span>
-                <form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
+        </button>
-                      method="post">
+      </div>
-                    {% csrf_token %}
+      <div class="modal-body">
-                    <select id="delete_pathway_edge_edges" name="edge-url"
+        Deletes the Edge. Nodes referenced by this edge will remain.
-                            data-actions-box='true' class="form-control" data-width='100%'>
+        <p></p>
-                        <option value="" disabled selected>Select Reaction to delete</option>
+        <form
-                        {% for e in pathway.edges %}
+          id="delete-pathway-edge-modal-form"
-                            <option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
+          accept-charset="UTF-8"
-                        {% endfor %}
+          action=""
-                    </select>
+          data-remote="true"
-                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
+          method="post"
-                </form>
+        >
-                <p></p>
+          {% csrf_token %}
-                <div id="delete_pathway_edge_image"></div>
+          <select
-            </div>
+            id="delete_pathway_edge_edges"
-            <div class="modal-footer">
+            name="edge-url"
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            data-actions-box="true"
-                <button type="button" class="btn btn-primary" id="delete-pathway-edge-modal-submit">Delete</button>
+            class="form-control"
-            </div>
+            data-width="100%"
-        </div>
+          >
+            <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" />
+        </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">
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="delete-pathway-edge-modal-submit"
+        >
+          Delete
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
+  $(function () {
-        $("#delete_pathway_edge_edges").selectpicker();
+    $("#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 !== "") {
+      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();
+      e.preventDefault();
-            edge_url = $('#delete_pathway_edge_edges option:selected').val()
+      edge_url = $("#delete_pathway_edge_edges option:selected").val();
 
-            if (edge_url === "") {
+      if (edge_url === "") {
-                return;
+        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

@@ -2,65 +2,92 @@
 
 <!-- Delete Node -->
 <div id="delete_pathway_node_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h3 class="modal-title">Delete Node</h3>
+        <h3 class="modal-title">Delete Node</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
+        >
-                <p></p>
+          <span aria-hidden="true">&times;</span>
-                <form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
+        </button>
-                      method="post">
+      </div>
-                    {% csrf_token %}
+      <div class="modal-body">
-                    <select id="delete_pathway_node_nodes" name="node-url"
+        Deletes the Node. Edges having this Node as Substrate or Product will be
-                            data-actions-box='true' class="form-control" data-width='100%'>
+        removed as well.
-                        <option value="" disabled selected>Select Compound to delete</option>
+        <p></p>
-                        {% for n in pathway.nodes %}
+        <form
-                            <option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
+          id="delete-pathway-node-modal-form"
-                        {% endfor %}
+          accept-charset="UTF-8"
-                    </select>
+          action=""
-                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
+          data-remote="true"
-                </form>
+          method="post"
-                <p></p>
+        >
-                <div id="delete_pathway_node_image"></div>
+          {% csrf_token %}
-            </div>
+          <select
-            <div class="modal-footer">
+            id="delete_pathway_node_nodes"
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            name="node-url"
-                <button type="button" class="btn btn-primary" id="delete-pathway-node-modal-submit">Delete</button>
+            data-actions-box="true"
-            </div>
+            class="form-control"
-        </div>
+            data-width="100%"
+          >
+            <option value="" disabled selected>
+              Select Compound to delete
+            </option>
+            {% for n in pathway.nodes %}
+              <option value="{{ n.url }}">
+                {{ n.default_node_label.name|safe }}
+              </option>
+            {% endfor %}
+          </select>
+          <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">
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="delete-pathway-node-modal-submit"
+        >
+          Delete
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
+  $(function () {
-        $("#delete_pathway_node_nodes").selectpicker();
+    $("#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 !== "") {
+      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();
+      e.preventDefault();
-            node_url = $('#delete_pathway_node_nodes option:selected').val()
+      node_url = $("#delete_pathway_node_nodes option:selected").val();
 
-            if (node_url === "") {
+      if (node_url === "") {
-                return;
+        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

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

@@ -1,32 +1,43 @@
 {% load static %}
 <!-- Download Pathway -->
 <div id="download_pathway_image_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h3 class="modal-title">Download Pathway as Image</h3>
+        <h3 class="modal-title">Download Pathway as Image</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                By clicking on Download the Pathway will be saved as SVG.
+        >
-            </div>
+          <span aria-hidden="true">&times;</span>
-            <div class="modal-footer">
+        </button>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
-                <button type="button" class="btn btn-primary" id="download-pathway-image-modal-submit">Download</button>
+      <div class="modal-body">
-            </div>
+        By clicking on Download the Pathway will be saved as SVG.
-        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="download-pathway-image-modal-submit"
+        >
+          Download
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
+  $(function () {
-
+    $("#download-pathway-image-modal-submit").click(function (e) {
-        $('#download-pathway-image-modal-submit').click(function (e) {
+      e.preventDefault();
-            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,47 +1,70 @@
-
 {% load static %}
 <!-- Edit Compound -->
 <div id="edit_compound_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h5 class="modal-title">Edit Compound</h5>
+        <h5 class="modal-title">Edit Compound</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                <p>Edit Compound.</p>
+        >
-                <form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
+          <span aria-hidden="true">&times;</span>
-                    {% csrf_token %}
+        </button>
-                    <p>
+      </div>
-                        <label for="compound-name">Name</label>
+      <div class="modal-body">
-                        <input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name|safe}}">
+        <p>Edit Compound.</p>
-                    </p>
+        <form
-                    <p>
+          id="edit-compound-modal-form"
-                        <label for="compound-description">Description</label>
+          accept-charset="UTF-8"
-                        <input id="compound-description" type="text" class="form-control"
+          action=""
-                               value="{{ compound.description|safe }}"
+          data-remote="true"
-                               name="compound-description">
+          method="post"
-                    </p>
+        >
-                </form>
+          {% csrf_token %}
-            </div>
+          <p>
-            <div class="modal-footer">
+            <label for="compound-name">Name</label>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <input
-                <button type="button" class="btn btn-primary" id="edit-compound-modal-submit">Update</button>
+              id="compound-name"
-            </div>
+              class="form-control"
-        </div>
+              name="compound-name"
+              value="{{ compound.name|safe }}"
+            />
+          </p>
+          <p>
+            <label for="compound-description">Description</label>
+            <input
+              id="compound-description"
+              type="text"
+              class="form-control"
+              value="{{ compound.description|safe }}"
+              name="compound-description"
+            />
+          </p>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </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();
-        e.preventDefault();
+      $("#edit-compound-modal-form").submit();
-        $('#edit-compound-modal-form').submit();
     });
-
+  });
-});
-
-
 </script>

templates/modals/objects/edit_compound_structure_modal.html

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

templates/modals/objects/edit_group_member_modal.html

@@ -1,121 +1,151 @@
-
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_group_member_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h5 class="modal-title">Add or Remove Group Member</h5>
+        <h5 class="modal-title">Add or Remove Group Member</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                <p>
+        >
-                    To add member (either User or entire Groups) to this group select the entity you want to add below
+          <span aria-hidden="true">&times;</span>
-                    and click the check mark.
+        </button>
-                    <br>
+      </div>
-                    To remove member simply click the <code>X</code> next to the member.
+      <div class="modal-body">
-                </p>
+        <p>
+          To add member (either User or entire Groups) to this group select the
+          entity you want to add below and click the check mark.
+          <br />
+          To remove member simply click the <code>X</code> next to the member.
+        </p>
 
-                <div class="row">
+        <div class="row">
-					<div class="col-xs-8">
+          <div class="col-xs-8">
-						<legend>User or Group</legend>
+            <legend>User or Group</legend>
-					</div>
+          </div>
-					<div class="col-xs-4">
+          <div class="col-xs-4">
-						<legend>Add/Remove</legend>
+            <legend>Add/Remove</legend>
-					</div>
+          </div>
-				</div>
-
-                <div class="row">
-                    <form id="modal-form-group-member" class="form-inline" role="form" accept-charset="UTF-8" action=""
-                          data-remote="true" method="post">
-                        {% csrf_token %}
-                        <div class="col-xs-8">
-                            <select id="select_member" 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>
-                                {% endfor %}
-                                <option disabled>Groups</option>
-                                {% for g in groups %}
-                                <option value="{{ g.url }}">{{ g.name|safe }}</option>
-                                {% endfor %}
-                            </select>
-                            <input type="hidden" name="action" value="add">
-                        </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>
-                            </button>
-                        </div>
-                    </form>
-                </div>
-                <p></p>
-                {% for u in group.user_member.all %}
-                <div class="row">
-                    <form id="modal-form-group-member_{{ u.uuid }}" 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="action" value="remove">
-                        </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>
-                            </button>
-                        </div>
-                    </form>
-                </div>
-                {% endfor %}
-                <p></p>
-                {% for g in group.group_member.all %}
-                <div class="row">
-                    <form id="modal-form-group-member_{{ g.uuid }}" 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="action" value="remove">
-                        </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>
-                            </button>
-                        </div>
-                    </form>
-                </div>
-                {% endfor %}
-
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
-            </div>
         </div>
+
+        <div class="row">
+          <form
+            id="modal-form-group-member"
+            class="form-inline"
+            role="form"
+            accept-charset="UTF-8"
+            action=""
+            data-remote="true"
+            method="post"
+          >
+            {% csrf_token %}
+            <div class="col-xs-8">
+              <select
+                id="select_member"
+                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>
+                {% endfor %}
+                <option disabled>Groups</option>
+                {% for g in groups %}
+                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
+                {% endfor %}
+              </select>
+              <input type="hidden" name="action" value="add" />
+            </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>
+              </button>
+            </div>
+          </form>
+        </div>
+        <p></p>
+        {% for u in group.user_member.all %}
+          <div class="row">
+            <form
+              id="modal-form-group-member_{{ u.uuid }}"
+              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="action" value="remove" />
+              </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>
+                </button>
+              </div>
+            </form>
+          </div>
+        {% endfor %}
+        <p></p>
+        {% for g in group.group_member.all %}
+          <div class="row">
+            <form
+              id="modal-form-group-member_{{ g.uuid }}"
+              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="action" value="remove" />
+              </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>
+                </button>
+              </div>
+            </form>
+          </div>
+        {% endfor %}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </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() {
+      e.preventDefault();
-
+      $("#edit-package-modal-form").submit();
-    $('#edit-package-modal-submit').click(function(e){
-        e.preventDefault();
-        $('#edit-package-modal-form').submit();
     });
 
     $("#select_member").selectpicker();
-
+  });
-})
 </script>

templates/modals/objects/edit_model_modal.html

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

templates/modals/objects/edit_node_modal.html

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

templates/modals/objects/edit_package_modal.html

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

templates/modals/objects/edit_package_permissions_modal.html

@@ -1,183 +1,264 @@
-
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_package_permissions_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h5 class="modal-title">Grant or Revoke Permissions</h5>
+        <h5 class="modal-title">Grant or Revoke Permissions</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                <p>
+        >
-                    Modify permissions for this package. Note that if you give <code>write</code>
+          <span aria-hidden="true">&times;</span>
-                    permissions to a user or group, <code>read</code> permissions will be granted automatically.
+        </button>
-                    <br>
+      </div>
-                    To allow users to perform destructive actions, such as deleting the package, <code>owner</code>
+      <div class="modal-body">
-                    permissions must be granted.
+        <p>
-                </p>
+          Modify permissions for this package. Note that if you give
+          <code>write</code> permissions to a user or group,
+          <code>read</code> permissions will be granted automatically.
+          <br />
+          To allow users to perform destructive actions, such as deleting the
+          package, <code>owner</code>
+          permissions must be granted.
+        </p>
 
-                <div class="row">
+        <div class="row">
-					<div class="col-xs-4">
+          <div class="col-xs-4">
-						<legend>User or Group</legend>
+            <legend>User or Group</legend>
-					</div>
+          </div>
-					<div class="col-xs-2">
+          <div class="col-xs-2">
-						<legend>Read</legend>
+            <legend>Read</legend>
-					</div>
+          </div>
-					<div class="col-xs-2">
+          <div class="col-xs-2">
-						<legend>Write</legend>
+            <legend>Write</legend>
-					</div>
+          </div>
-					<div class="col-xs-2">
+          <div class="col-xs-2">
-						<legend>Owner</legend>
+            <legend>Owner</legend>
-					</div>
+          </div>
-				</div>
-
-                <div class="row">
-                    <form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
-                          data-remote="true" method="post">
-                        {% csrf_token %}
-                        <div class="col-xs-4">
-                            <select id="select_grantee" 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>
-                                {% endfor %}
-                                <option disabled>Groups</option>
-                                {% for g in groups %}
-                                <option value="{{ g.url }}">{{ g.name|safe }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="read" id="read_new"/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="write" id="write_new"/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="owner" id="owner_new"/>
-                        </div>
-                        <div class="col-xs-2">
-                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
-                                <span class="glyphicon glyphicon-plus"></span>
-                            </button>
-                        </div>
-                    </form>
-                </div>
-                <p></p>
-                {% for up in user_permissions %}
-                <div class="row">
-                    <form id="modal-form-permissions_{{ up.user.uuid }}" 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 }}"/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="read" id="read_{{ up.user.uuid }}" {% if up.has_read %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="write" id="write_{{ up.user.uuid }}" {% if up.has_write %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="owner" id="owner_{{ up.user.uuid }}" {% if up.has_all %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <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 %}
-                <p></p>
-                {% for gp in group_permissions %}
-                <div class="row">
-                    <form id="modal-form-permissions_{{ gp.user.uuid }}" 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 type="hidden" name="grantee" value="{{ gp.group.url }}"/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="read" id="read_{{ gp.group.uuid }}" {% if gp.has_read %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="write" id="write_{{ gp.group.uuid }}" {% if gp.has_write %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <input type="checkbox" name="owner" id="owner_{{ gp.group.uuid }}" {% if gp.has_all %} checked {% endif %}/>
-                        </div>
-                        <div class="col-xs-2">
-                            <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">Close</button>
-                <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
-            </div>
         </div>
+
+        <div class="row">
+          <form
+            id="modal-form-permissions"
+            class="form-inline"
+            role="form"
+            accept-charset="UTF-8"
+            action=""
+            data-remote="true"
+            method="post"
+          >
+            {% csrf_token %}
+            <div class="col-xs-4">
+              <select
+                id="select_grantee"
+                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>
+                {% endfor %}
+                <option disabled>Groups</option>
+                {% for g in groups %}
+                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
+                {% endfor %}
+              </select>
+            </div>
+            <div class="col-xs-2">
+              <input type="checkbox" name="read" id="read_new" />
+            </div>
+            <div class="col-xs-2">
+              <input type="checkbox" name="write" id="write_new" />
+            </div>
+            <div class="col-xs-2">
+              <input type="checkbox" name="owner" id="owner_new" />
+            </div>
+            <div class="col-xs-2">
+              <button
+                type="submit"
+                style="width:60%;"
+                class="btn col-xs-2 modify-perm-button"
+              >
+                <span class="glyphicon glyphicon-plus"></span>
+              </button>
+            </div>
+          </form>
+        </div>
+        <p></p>
+        {% for up in user_permissions %}
+          <div class="row">
+            <form
+              id="modal-form-permissions_{{ up.user.uuid }}"
+              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 }}" />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="read"
+                  id="read_{{ up.user.uuid }}"
+                  {% if up.has_read %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="write"
+                  id="write_{{ up.user.uuid }}"
+                  {% if up.has_write %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="owner"
+                  id="owner_{{ up.user.uuid }}"
+                  {% if up.has_all %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <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 %}
+        <p></p>
+        {% for gp in group_permissions %}
+          <div class="row">
+            <form
+              id="modal-form-permissions_{{ gp.user.uuid }}"
+              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
+                  type="hidden"
+                  name="grantee"
+                  value="{{ gp.group.url }}"
+                />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="read"
+                  id="read_{{ gp.group.uuid }}"
+                  {% if gp.has_read %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="write"
+                  id="write_{{ gp.group.uuid }}"
+                  {% if gp.has_write %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <input
+                  type="checkbox"
+                  name="owner"
+                  id="owner_{{ gp.group.uuid }}"
+                  {% if gp.has_all %}checked{% endif %}
+                />
+              </div>
+              <div class="col-xs-2">
+                <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">
+          Close
+        </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")) {
+      $(writebox).prop("checked", false);
+      $(ownerbox).prop("checked", false);
+    }
 
-    if (perm == 'read' && !$(readbox).prop("checked")) {
+    if (perm == "write") {
-        $(writebox).prop("checked", false);
+      if ($(writebox).prop("checked")) {
+        $(readbox).prop("checked", true);
+      }
+      if (!$(writebox).prop("checked")) {
         $(ownerbox).prop("checked", false);
+      }
     }
 
-    if (perm == 'write') {
+    if (perm == "owner") {
-        if ($(writebox).prop("checked")) {
+      if ($(ownerbox).prop("checked")) {
-            $(readbox).prop("checked", true);
+        $(readbox).prop("checked", true);
-        }
+        $(writebox).prop("checked", true);
-        if (!$(writebox).prop("checked")) {
+      }
-            $(ownerbox).prop("checked", false);
-        }
     }
+  }
 
-    if (perm == 'owner') {
+  $(function () {
-        if ($(ownerbox).prop("checked")) {
+    $("#edit-package-modal-submit").click(function (e) {
-            $(readbox).prop("checked", true);
+      e.preventDefault();
-            $(writebox).prop("checked", true);
+      $("#edit-package-modal-form").submit();
-        }
-    }
-}
-
-$(function() {
-
-    $('#edit-package-modal-submit').click(function(e){
-        e.preventDefault();
-        $('#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

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

templates/modals/objects/edit_pathway_modal.html

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

templates/modals/objects/edit_prediction_setting_modal.html

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

templates/modals/objects/edit_reaction_modal.html

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

templates/modals/objects/edit_rule_modal.html

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

templates/modals/objects/edit_user_modal.html

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

templates/modals/objects/evaluate_model_modal.html

@@ -1,73 +1,93 @@
+<div
+  class="modal fade"
+  tabindex="-1"
+  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">
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">&times;</span>
+          <span class="sr-only">Close</span>
+        </button>
+        <h4 class="modal-title">Evaluate Model</h4>
+      </div>
+      <div class="modal-body">
+        <form
+          id="evaluate_model_form"
+          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
+            predictions.
+          </div>
+          <!-- Evaluation Packages -->
+          <label for="model-evaluation-packages">Evaluation Packages</label>
+          <select
+            id="model-evaluation-packages"
+            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 %}
+                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+              {% endif %}
+            {% endfor %}
 
-<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
+            <option disabled>Unreviewed Packages</option>
-     aria-hidden="true">
+            {% for obj in meta.readable_packages %}
-    <div class="modal-dialog modal-lg">
+              {% if not obj.reviewed %}
-        <div class="modal-content">
+                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-            <div class="modal-header">
+              {% endif %}
-                <button type="button" class="close" data-dismiss="modal">
+            {% endfor %}
-                    <span aria-hidden="true">&times;</span>
+          </select>
-                    <span class="sr-only">Close</span>
-                </button>
-                <h4 class="modal-title">Evaluate Model</h4>
-            </div>
-            <div class="modal-body">
-                <form id="evaluate_model_form" 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 predictions.
-                    </div>
-                    <!-- Evaluation Packages -->
-                    <label for="model-evaluation-packages">Evaluation Packages</label>
-                    <select id="model-evaluation-packages" 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 %}
-                                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                            {% endif %}
-                        {% endfor %}
 
-                        <option disabled>Unreviewed Packages</option>
+          <!-- Eval Type -->
-                        {% for obj in meta.readable_packages %}
+          <label for="model-evaluation-type">Evaluation Type</label>
-                            {% if not obj.reviewed %}
+          <select
-                                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
+            id="model-evaluation-type"
-                            {% endif %}
+            name="model-evaluation-type"
-                        {% endfor %}
+            class="form-control"
-                    </select>
+          >
+            <option disabled selected>Select evaluation type</option>
+            <option value="sg">Single Generation</option>
+            <option value="mg">Multiple Generations</option>
+          </select>
 
-                    <!-- Eval Type -->
+          <input type="hidden" name="hidden" value="evaluate" />
-                    <label for="model-evaluation-type">Evaluation Type</label>
+        </form>
-                    <select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
+      </div>
-                        <option disabled selected>Select evaluation type</option>
+      <div class="modal-footer">
-                        <option value="sg">Single Generation</option>
+        <a id="evaluate_model_form_submit" class="btn btn-primary" href="#"
-                        <option value="mg">Multiple Generations</option>
+          >Evaluate</a
-                    </select>
+        >
-
+        <button type="button" class="btn btn-default" data-dismiss="modal">
-                    <input type="hidden" name="hidden" value="evaluate">
+          Cancel
-                </form>
+        </button>
-            </div>
+      </div>
-            <div class="modal-footer">
-                <a id="evaluate_model_form_submit" class="btn btn-primary" href="#">Evaluate</a>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-            </div>
-        </div>
     </div>
+  </div>
 </div>
 
 <script>
+  $(function () {
+    $("#model-evaluation-packages").selectpicker();
 
-    $(function () {
+    $("#evaluate_model_form_submit").on("click", function (e) {
-
+      e.preventDefault();
-        $("#model-evaluation-packages").selectpicker();
+      $("#evaluate_model_form").submit();
-
-        $('#evaluate_model_form_submit').on('click', function (e) {
-            e.preventDefault();
-            $('#evaluate_model_form').submit();
-        });
-
     });
-
+  });
-
 </script>

templates/modals/objects/export_package_modal.html

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

templates/modals/objects/generic_delete_modal.html

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

templates/modals/objects/generic_set_aliases_modal.html

@@ -1,170 +1,213 @@
-
 {% load static %}
 
 <style>
-    .alias-container {
+  .alias-container {
-        display: flex;
+    display: flex;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
-        align-items: center;
+    align-items: center;
-        border: 1px solid #ccc;
+    border: 1px solid #ccc;
-        border-radius: 4px;
+    border-radius: 4px;
-        padding: 4px 6px;
+    padding: 4px 6px;
-        cursor: text;
+    cursor: text;
-        min-height: 38px;
+    min-height: 38px;
-        background-color: #fff;
+    background-color: #fff;
-    }
+  }
 
-    .alias {
+  .alias {
-        display: inline-flex;
+    display: inline-flex;
-        align-items: center;
+    align-items: center;
-        background-color: #5bc0de;
+    background-color: #5bc0de;
-        color: white;
+    color: white;
-        padding: 4px 8px;
+    padding: 4px 8px;
-        margin: 3px 3px;
+    margin: 3px 3px;
-        border-radius: 4px;
+    border-radius: 4px;
-        font-size: 13px;
+    font-size: 13px;
-        line-height: 1.4;
+    line-height: 1.4;
-    }
+  }
 
-    .alias .remove {
+  .alias .remove {
-        margin-left: 6px;
+    margin-left: 6px;
-        cursor: pointer;
+    cursor: pointer;
-        font-weight: bold;
+    font-weight: bold;
-        line-height: 1;
+    line-height: 1;
-    }
+  }
 
-    .alias-input {
+  .alias-input {
-        flex: 1;
+    flex: 1;
-        min-width: 120px;
+    min-width: 120px;
-        border: none;
+    border: none;
-        outline: none;
+    outline: none;
-        margin: 3px 3px;
+    margin: 3px 3px;
-        font-size: 14px;
+    font-size: 14px;
-    }
+  }
 
-    .form-control.alias-container {
+  .form-control.alias-container {
-        height: auto;
+    height: auto;
-        box-shadow: none;
+    box-shadow: none;
-    }
+  }
 </style>
 
-<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
+<div
-     aria-modal="true" role="dialog">
+  class="modal fade bs-modal-lg"
-    <div class="modal-dialog modal-lg">
+  id="set_aliases_modal"
-        <div class="modal-content">
+  tabindex="-1"
-            <div class="modal-header">
+  aria-labelledby="set_aliases_modal"
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+  aria-modal="true"
-                    <span aria-hidden="true">×</span>
+  role="dialog"
-                </button>
+>
-                <h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4>
+  <div class="modal-dialog modal-lg">
-            </div>
+    <div class="modal-content">
-            <div class="modal-body">
+      <div class="modal-header">
-                <form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
+        <button
-                      data-remote="true" method="post">
+          type="button"
-                    {% csrf_token %}
+          class="close"
-                    <label for="alias-input">Aliases:</label>
+          data-dismiss="modal"
-                    <div class="form-control alias-container" id="alias-box">
+          aria-label="Close"
-                        {% for alias in current_object.aliases %}
+        >
-                        <span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
+          <span aria-hidden="true">×</span>
-                        {% endfor %}
+        </button>
-                        <input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
+        <h4 class="modal-title">
-                    </div>
+          Set Aliases for {{ current_object.name|safe }}
-                </form>
+        </h4>
-                <div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
+      </div>
-                </div>
+      <div class="modal-body">
-            </div>
+        <form
-            <div class="modal-footer">
+          id="set_aliases_modal_form"
-                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
+          accept-charset="UTF-8"
-                <button type="button" class="btn btn-primary" id="set_aliases_modal_form_submit">Submit</button>
+          action="{{ current_object.url }}"
-            </div>
+          data-remote="true"
-        </div>
+          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"
+                >{{ alias|escape }}<span class="remove">&times;</span></span
+              >
+            {% endfor %}
+            <input
+              type="text"
+              id="alias-input"
+              class="alias-input"
+              placeholder="Add Alias..."
+            />
+          </div>
+        </form>
+        <div
+          id="add-alias-error-message"
+          class="alert alert-danger"
+          role="alert"
+          style="display: none"
+        ></div>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="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 () {
+    function addAlias(aliasText) {
+      aliasText = aliasText.trim();
+      if (aliasText === "") return;
 
-        function addAlias(aliasText) {
+      // Avoid duplicate aliass
-            aliasText = aliasText.trim();
+      var exists = false;
-            if (aliasText === '') return;
+      $("#alias-box .alias").each(function () {
-
+        if (
-            // Avoid duplicate aliass
+          $(this).text().replace("×", "").trim().toLowerCase() ===
-            var exists = false;
+          aliasText.toLowerCase()
-            $('#alias-box .alias').each(function () {
+        ) {
-                if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
+          exists = true;
-                    exists = true;
+          return false;
-                    return false;
-                }
-            });
-
-            if (!exists) {
-                var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
-                    '<span class="remove">&times;</span></span>';
-                $(aliasHtml).insertBefore('#alias-input');
-            }
-
-            $('#alias-input').val('');
         }
+      });
 
-        // Add alias when Enter is pressed
+      if (!exists) {
-        $('#alias-input').on('keypress', function (e) {
+        var aliasHtml =
-            if (e.which === 13) {
+          '<span class="alias">' +
-                e.preventDefault();
+          $("<div>").text(aliasText).html() +
-                addAlias($(this).val());
+          '<span class="remove">&times;</span></span>';
-            }
+        $(aliasHtml).insertBefore("#alias-input");
-        });
+      }
 
-        // Add alias when input loses focus
+      $("#alias-input").val("");
-        $('#alias-input').on('blur', function () {
+    }
-            var val = $(this).val();
-            if (val.trim() !== '') {
-                addAlias(val);
-            }
-        });
-
-        // Remove alias when clicking ×
-        $('#alias-box').on('click', '.remove', function () {
-            $(this).closest('.alias').remove();
-        });
-
-        // Focus input when clicking the container
-        $('#alias-box').on('click', function () {
-            $('#alias-input').focus();
-        });
-
-
-        $('#set_aliases_modal_form_submit').on('click', function (e) {
-            e.preventDefault();
-
-            let aliases = [];
-            $('#alias-box .alias').each(function () {
-                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 = ['']
-            }
-
-            formData = {
-                'aliases': aliases
-            }
-
-            $.ajax({
-                type: 'post',
-                data: formData,
-                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('<p>Setting aliases failed!</p>');
-                    $('#add-alias-error-message').show();                }
-            });
-
-        });
 
+    // Add alias when Enter is pressed
+    $("#alias-input").on("keypress", function (e) {
+      if (e.which === 13) {
+        e.preventDefault();
+        addAlias($(this).val());
+      }
     });
+
+    // Add alias when input loses focus
+    $("#alias-input").on("blur", function () {
+      var val = $(this).val();
+      if (val.trim() !== "") {
+        addAlias(val);
+      }
+    });
+
+    // Remove alias when clicking ×
+    $("#alias-box").on("click", ".remove", function () {
+      $(this).closest(".alias").remove();
+    });
+
+    // Focus input when clicking the container
+    $("#alias-box").on("click", function () {
+      $("#alias-input").focus();
+    });
+
+    $("#set_aliases_modal_form_submit").on("click", function (e) {
+      e.preventDefault();
+
+      let aliases = [];
+      $("#alias-box .alias").each(function () {
+        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 = [""];
+      }
+
+      formData = {
+        aliases: aliases,
+      };
+
+      $.ajax({
+        type: "post",
+        data: formData,
+        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(
+            "<p>Setting aliases failed!</p>",
+          );
+          $("#add-alias-error-message").show();
+        },
+      });
+    });
+  });
 </script>

templates/modals/objects/generic_set_external_reference_modal.html

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

templates/modals/objects/generic_set_scenario_modal.html

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

templates/modals/objects/identify_missing_rules_modal.html

@@ -1,54 +1,75 @@
 {% load static %}
 <!-- Identify Missing Rules -->
 <div id="identify_missing_rules_modal" class="modal" tabindex="-1">
-    <div class="modal-dialog">
+  <div class="modal-dialog">
-        <div class="modal-content">
+    <div class="modal-content">
-            <div class="modal-header">
+      <div class="modal-header">
-                <h3 class="modal-title">Identify Missing Rules</h3>
+        <h3 class="modal-title">Identify Missing Rules</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
-                    <span aria-hidden="true">&times;</span>
+          type="button"
-                </button>
+          class="close"
-            </div>
+          data-dismiss="modal"
-            <div class="modal-body">
+          aria-label="Close"
-                By clicking on Download we'll search the Pathway for Reactions that are not backed by
+        >
-                a Rule or which can be assembled by chaining two rules.
+          <span aria-hidden="true">&times;</span>
-                <form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
+        </button>
-                      data-remote="true" method="GET">
+      </div>
-                    <label for="rule-package">Select the Rule Package</label>
+      <div class="modal-body">
-                    <select id="rule-package" name="rule-package" data-actions-box='true' class="form-control"
+        By clicking on Download we'll search the Pathway for Reactions that are
-                            data-width='100%'>
+        not backed by a Rule or which can be assembled by chaining two rules.
-                        <option disabled>Reviewed Packages</option>
+        <form
-                        {% for obj in meta.readable_packages %}
+          id="identify-missing-rules-modal-form"
-                            {% if obj.reviewed %}
+          accept-charset="UTF-8"
-                                <option value="{{ obj.url }}">{{ obj.name }}</option>
+          action="{{ pathway.url }}"
-                            {% endif %}
+          data-remote="true"
-                        {% endfor %}
+          method="GET"
+        >
+          <label for="rule-package">Select the Rule Package</label>
+          <select
+            id="rule-package"
+            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 %}
+                <option value="{{ obj.url }}">{{ obj.name }}</option>
+              {% endif %}
+            {% endfor %}
 
-                        <option disabled>Unreviewed Packages</option>
+            <option disabled>Unreviewed Packages</option>
-                        {% for obj in meta.readable_packages %}
+            {% for obj in meta.readable_packages %}
-                            {% if not obj.reviewed %}
+              {% if not obj.reviewed %}
-                                <option value="{{ obj.url }}">{{ obj.name }}</option>
+                <option value="{{ obj.url }}">{{ obj.name }}</option>
-                            {% endif %}
+              {% endif %}
-                        {% endfor %}
+            {% endfor %}
-                    </select>
+          </select>
-                    <input type="hidden" name="identify-missing-rules" value="true"/>
+          <input type="hidden" name="identify-missing-rules" value="true" />
-                </form>
+        </form>
-            </div>
+      </div>
-            <div class="modal-footer">
+      <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                <button type="button" class="btn btn-primary" id="identify-missing-rules-modal-submit">Download</button>
+          Close
-            </div>
+        </button>
-        </div>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="identify-missing-rules-modal-submit"
+        >
+          Download
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
+  $(function () {
-
+    $("#identify-missing-rules-modal-submit").click(function (e) {
-        $('#identify-missing-rules-modal-submit').click(function (e) {
+      e.preventDefault();
-            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,92 +1,118 @@
-
+<div
-<div class="modal fade"
+  class="modal fade"
-     tabindex="-1"
+  tabindex="-1"
-     id="manage_api_token_modal"
+  id="manage_api_token_modal"
-     role="dialog"
+  role="dialog"
-     aria-labelledby="manage_api_token_modal"
+  aria-labelledby="manage_api_token_modal"
-     aria-hidden="true">
+  aria-hidden="true"
-    <div class="modal-dialog">
+>
-        <div class="modal-content">
+  <div class="modal-dialog">
-            <div class="modal-header">
+    <div class="modal-content">
-                <button type="button"
+      <div class="modal-header">
-                        class="close"
+        <button type="button" class="close" data-dismiss="modal">
-                        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>
-                </button>
+        <h3 class="modal-title">Manage API Token</h3>
-                <h3 class="modal-title">Manage API Token</h3>
+      </div>
-            </div>
+      <div class="modal-body">
-            <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
-                      accept-charset="UTF-8"
+          place
-                      action=""
+        </p>
-                      data-remote="true"
+        <form
-                      method="post">
+          id="request_api_token_form"
-                    {% csrf_token %}
+          accept-charset="UTF-8"
-                    <p>
+          action=""
-                        <label for="token-name">Name</label>
+          data-remote="true"
-                        <input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
+          method="post"
-                        <label for="valid-for">Valid for (in days)</label>
+        >
-                        <input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
+          {% csrf_token %}
-                        <input type="hidden" name="hidden" value="request-api-token">
+          <p>
-                    </p>
+            <label for="token-name">Name</label>
-                </form>
+            <input
-                <div id="new-token">
+              type="text"
-                    <pre id="new-token-pre"></pre>
+              id="token-name"
-                </div>
+              class="form-control"
-                <div id="existing-tokens">
+              name="name"
-                    {% for t in tokens %}
+              placeholder="Generic Token for {{ meta.user.username }}"
-                    <form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
+            />
-                        {% csrf_token %}
+            <label for="valid-for">Valid for (in days)</label>
-                        <div class="input-group">
+            <input
-                            <input type="hidden" name="hidden" value="delete">
+              type="number"
-                            <input type="hidden" name="token-id" value="{{ t.pk }}">
+              id="valid-for"
-                            <input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
+              class="form-control"
-                            <span class="input-group-btn">
+              name="valid-for"
-                                <button type="submit" class="btn btn-danger">Delete</button>
+              value="90"
-                            </span>
+            />
-                        </div>
+            <input type="hidden" name="hidden" value="request-api-token" />
-                    </form>
+          </p>
-                    {% endfor %}
+        </form>
-                </div>
+        <div id="new-token">
-            </div>
+          <pre id="new-token-pre"></pre>
-            <div class="modal-footer">
-                <a id="manage_api_token_form_submit"
-                   class="btn btn-primary"
-                   href="#">Submit</a>
-                <button type="button"
-                        class="btn btn-default"
-                        data-dismiss="modal">Cancel
-                </button>
-            </div>
         </div>
+        <div id="existing-tokens">
+          {% for t in tokens %}
+            <form
+              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="token-id" value="{{ t.pk }}" />
+                <input
+                  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>
+              </div>
+            </form>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a id="manage_api_token_form_submit" class="btn btn-primary" href="#"
+          >Submit</a
+        >
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Cancel
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-$(function() {
+  $(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();
+      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();
+      e.preventDefault();
-        const formData = $(this).serialize();
+      const formData = $(this).serialize();
-        const form = $(this);
+      const form = $(this);
-        $.post(this.action, formData, function(response) {
+      $.post(this.action, formData, function (response) {
-            console.log(this);
+        console.log(this);
-            form.remove();
+        form.remove();
-        });
+      });
     });
-
+  });
-});
 </script>

templates/modals/objects/publish_package_modal.html

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

templates/modals/objects/retrain_model_modal.html

@@ -1,43 +1,55 @@
-<div class="modal fade" tabindex="-1" id="retrain_model_modal" role="dialog" aria-labelledby="retrain_model_modal"
+<div
-     aria-hidden="true">
+  class="modal fade"
-    <div class="modal-dialog modal-lg">
+  tabindex="-1"
-        <div class="modal-content">
+  id="retrain_model_modal"
-            <div class="modal-header">
+  role="dialog"
-                <button type="button" class="close" data-dismiss="modal">
+  aria-labelledby="retrain_model_modal"
-                    <span aria-hidden="true">&times;</span>
+  aria-hidden="true"
-                    <span class="sr-only">Close</span>
+>
-                </button>
+  <div class="modal-dialog modal-lg">
-                <h4 class="modal-title">Retrain Model</h4>
+    <div class="modal-content">
-            </div>
+      <div class="modal-header">
-            <div class="modal-body">
+        <button type="button" class="close" data-dismiss="modal">
-                <form id="retrain_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
+          <span aria-hidden="true">&times;</span>
-                      data-remote="true" method="post">
+          <span class="sr-only">Close</span>
-                    <div class="jumbotron">
+        </button>
-                        To reflect changes in the rule or data packages, you can use the "Retrain" button,
+        <h4 class="modal-title">Retrain Model</h4>
-                        to let the model reflect the changes without creating a new model.
+      </div>
-                        While the model is retraining, it will be unavailable for prediction.
+      <div class="modal-body">
-                    </div>
+        <form
-                    {% csrf_token %}
+          id="retrain_model_form"
-                    <input type="hidden" name="action" value="retrain">
+          accept-charset="UTF-8"
-                </form>
+          action="{{ meta.current_object.url }}"
-            </div>
+          data-remote="true"
-            <div class="modal-footer">
+          method="post"
-                <a id="retrain_model_form_submit" class="btn btn-primary" href="#">Retrain</a>
+        >
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <div class="jumbotron">
-            </div>
+            To reflect changes in the rule or data packages, you can use the
-        </div>
+            "Retrain" button, to let the model reflect the changes without
+            creating a new model. While the model is retraining, it will be
+            unavailable for prediction.
+          </div>
+          {% csrf_token %}
+          <input type="hidden" name="hidden" value="retrain" />
+        </form>
+      </div>
+      <div class="modal-footer">
+        <a id="retrain_model_form_submit" class="btn btn-primary" href="#"
+          >Retrain</a
+        >
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          Cancel
+        </button>
+      </div>
     </div>
+  </div>
 </div>
 
 <script>
-
+  $(function () {
-    $(function () {
+    $("#retrain_model_form_submit").on("click", function (e) {
-
+      e.preventDefault();
-        $('#retrain_model_form_submit').on('click', function (e) {
+      $("#retrain_model_form").submit();
-            e.preventDefault();
-            $('#retrain_model_form').submit();
-        });
-
     });
-
+  });
 </script>

templates/modals/objects/set_license_modal.html

@@ -1,153 +1,198 @@
-<div class="modal fade"
+<div
-     tabindex="-1"
+  class="modal fade"
-     id="set_license_modal"
+  tabindex="-1"
-     role="dialog"
+  id="set_license_modal"
-     aria-labelledby="set_license_modal"
+  role="dialog"
-     aria-hidden="true">
+  aria-labelledby="set_license_modal"
-    <div class="modal-dialog">
+  aria-hidden="true"
-        <div class="modal-content">
+>
-            <div class="modal-header">
+  <div class="modal-dialog">
-                <button type="button"
+    <div class="modal-content">
-                        class="close"
+      <div class="modal-header">
-                        data-dismiss="modal">
+        <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>
+        </button>
-                <h3 class="modal-title">Set License</h3>
+        <h3 class="modal-title">Set License</h3>
-            </div>
+      </div>
 
-            <div class="modal-body">
+      <div class="modal-body">
-                <div class="row">
+        <div class="row">
-                    <div class="col-md-9">
+          <div class="col-md-9">
-                        <p>
+            <p>
-                            Set the license for all data in this package:
+              Set the license for all data in this package:
-                            <br> <br>
+              <br />
-                            (For more information please visit our <a target="#"
+              <br />
-                                                                      href="https://wiki.envipath.org/index.php/License">wiki</a>.)
+              (For more information please visit our
-                        </p>
+              <a target="#" href="https://wiki.envipath.org/index.php/License"
-                    </div>
+                >wiki</a
-                    <div class="col-md-3">
+              >.)
-                        <div id="ccfig"></div>
+            </p>
-                    </div>
+          </div>
-                </div>
+          <div class="col-md-3">
-                <form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
+            <div id="ccfig"></div>
-                    {% csrf_token %}
+          </div>
-                    <div class="input-group">
-                        <div class="radio">
-                            <label><input type="radio" name="optlicense" onclick="cc()" id="ccradio">Creative commons license</label>
-                        </div>
-                        <div>
-                            <div class="checkbox">
-                                <label><input type="checkbox" value="" onclick="cc()" id="ccremix" disabled>Allow adaptations of your work to be shared</label>
-                            </div>
-                            <div class="checkbox">
-                                <label><input type="checkbox" value="" onclick="cc()" id="ccnocom" disabled>Prohibit commercial use</label>
-                            </div>
-                            <div class="checkbox">
-                                <label><input type="checkbox" value="" onclick="cc()" id="ccalike" disabled>Share only if others share alike</label>
-                            </div>
-                        </div>
-                        <div class="radio">
-                            <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-link" name="license-link">
-                    <input type="hidden" id="license-image-link" name="license-image-link">
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button id="set_license_form_submit" class="btn btn-primary">Submit</button>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-            </div>
         </div>
+        <form
+          id="set_license_form"
+          accept-charset="UTF-8"
+          action=""
+          data-remote="true"
+          method="post"
+        >
+          {% csrf_token %}
+          <div class="input-group">
+            <div class="radio">
+              <label
+                ><input
+                  type="radio"
+                  name="optlicense"
+                  onclick="cc()"
+                  id="ccradio"
+                />Creative commons license</label
+              >
+            </div>
+            <div>
+              <div class="checkbox">
+                <label
+                  ><input
+                    type="checkbox"
+                    value=""
+                    onclick="cc()"
+                    id="ccremix"
+                    disabled
+                  />Allow adaptations of your work to be shared</label
+                >
+              </div>
+              <div class="checkbox">
+                <label
+                  ><input
+                    type="checkbox"
+                    value=""
+                    onclick="cc()"
+                    id="ccnocom"
+                    disabled
+                  />Prohibit commercial use</label
+                >
+              </div>
+              <div class="checkbox">
+                <label
+                  ><input
+                    type="checkbox"
+                    value=""
+                    onclick="cc()"
+                    id="ccalike"
+                    disabled
+                  />Share only if others share alike</label
+                >
+              </div>
+            </div>
+            <div class="radio">
+              <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" />
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button id="set_license_form_submit" class="btn btn-primary">
+          Submit
+        </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 {
+      } 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 link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
-        var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
+      var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
 
-        var img_tpl = `<a href='${link}' target="_blank">
+      var img_tpl = `<a href='${link}' target="_blank">
                        <img src='${imageLink}'>
                        </a>`;
 
-        $('#ccfig').append(img_tpl);
+      $("#ccfig").append(img_tpl);
-        $('#license').val(ccstr);
+      $("#license").val(ccstr);
-        $('#license-link').val(link);
-        $('#license-image-link').val(imageLink);
     } 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();
+      e.preventDefault();
-        $('#set_license_form').submit();
+      $("#set_license_form").submit();
     });
-});
+  });
-
 </script>

templates/modals/objects/update_scenario_additional_information_modal.html

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

templates/modals/predict_modal.html

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

templates/objects/composite_rule.html

@@ -2,126 +2,179 @@
 
 {% block content %}
 
-    {% block action_modals %}
+  {% block action_modals %}
-        {% include "modals/objects/edit_rule_modal.html" %}
+    {% include "modals/objects/edit_rule_modal.html" %}
-        {% include "modals/objects/generic_set_aliases_modal.html" %}
+    {% include "modals/objects/generic_set_aliases_modal.html" %}
-        {% include "modals/objects/generic_set_scenario_modal.html" %}
+    {% include "modals/objects/generic_set_scenario_modal.html" %}
-        {% include "modals/objects/generic_copy_object_modal.html" %}
+    {% include "modals/objects/generic_copy_object_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="rule-detail">
+  <div class="panel-group" id="rule-detail">
     <div class="panel panel-default">
-        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+      <div
-            {{ rule.name|safe }}
+        class="panel-heading"
-            <div id="actionsButton"
+        id="headingPanel"
-                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
+        style="font-size:2rem;height: 46px"
-                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+      >
-                                     aria-haspopup="true" aria-expanded="false"><span
+        {{ rule.name|safe }}
-                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
+        <div
-                    style="padding-right:1em"></span></a>
+          id="actionsButton"
-                <ul id="actionsList" class="dropdown-menu">
+          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                    {% block actions %}
+          class="dropdown"
-                    {% include "actions/objects/rule.html" %}
+        >
-                    {% endblock %}
+          <a
-                </ul>
+            href="#"
-            </div>
+            class="dropdown-toggle"
-        </div>
+            data-toggle="dropdown"
-        <div class="panel-body">
+            role="button"
-            <p>
+            aria-haspopup="true"
-                {{ rule.description|safe }}
+            aria-expanded="false"
-            </p>
+            ><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" %}
+            {% endblock %}
+          </ul>
         </div>
+      </div>
+      <div class="panel-body">
+        <p>{{ rule.description|safe }}</p>
+      </div>
 
-        {% if rule.aliases %}
+      {% if rule.aliases %}
-            <!-- Aliases -->
+        <!-- Aliases -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="rule-aliases-link"
+              data-toggle="collapse"
+              data-parent="#rule-detail"
+              href="#rule-aliases"
+              >Aliases</a
+            >
+          </h4>
+        </div>
+        <div id="rule-aliases" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for alias in rule.aliases %}
+              <a class="list-group-item">{{ alias }}</a>
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      <!-- Reaction Patterns -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="rule-reaction-patterns-link"
+            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 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>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+
+      <!-- Scenarios -->
+      {% if rule.scenarios.all %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="rule-scenario-link"
+              data-toggle="collapse"
+              data-parent="#rule-detail"
+              href="#rule-scenario"
+              >Scenarios</a
+            >
+          </h4>
+        </div>
+        <div id="rule-scenario" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for s in rule.scenarios.all %}
+              <a class="list-group-item" href="{{ s.url }}"
+                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
+              >
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      {% if rule.enzymelinks %}
+        <!-- EC Numbers -->
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="rule-ec-numbers-link"
+              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 class="panel-body list-group-item">
+            {% for k, v in rule.get_grouped_enzymelinks.items %}
+              <div
+                class="panel panel-default panel-heading list-group-item"
+                style="background-color:silver"
+              >
                 <h4 class="panel-title">
-                    <a id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail"
+                  <a
-                       href="#rule-aliases">Aliases</a>
+                    id="{{ k|slugify }}_Link"
+                    data-toggle="collapse"
+                    data-parent="#{{ k|slugify }}_Accordion"
+                    href="#{{ k|slugify }}"
+                  >
+                    {{ k }}
+                  </a>
                 </h4>
-            </div>
+              </div>
-            <div id="rule-aliases" class="panel-collapse collapse in">
+              <div id="{{ k|slugify }}" class="panel-collapse in collapse">
                 <div class="panel-body list-group-item">
-                    {% for alias in rule.aliases %}
+                  {% for enzyme in v %}
-                        <a class="list-group-item">{{ alias }}</a>
+                    <a class="list-group-item" href="{{ enzyme.url }}">
-                    {% endfor %}
+                      {{ enzyme.ec_number }}
+                      <div style="position:absolute;bottom:10px;left:100px;">
+                        {{ enzyme.name }}
+                      </div>
+                      <div style="float:right;">
+                        {{ enzyme.linking_method }}
+                      </div>
+                    </a>
+                  {% endfor %}
                 </div>
-            </div>
+              </div>
-        {% endif %}
+            {% endfor %}
-
+          </div>
-        <!-- Reaction Patterns -->
-        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-            <h4 class="panel-title">
-                <a id="rule-reaction-patterns-link" data-toggle="collapse" data-parent="#rule-detail"
-                   href="#rule-reaction-patterns">Reaction Patterns</a>
-            </h4>
         </div>
-        <div id="rule-reaction-patterns" class="panel-collapse collapse in">
+      {% endif %}
-            <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>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <!-- Scenarios -->
-        {% if rule.scenarios.all %}
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
-                       href="#rule-scenario">Scenarios</a>
-                </h4>
-            </div>
-            <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 }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
-
-        {% if rule.enzymelinks %}
-            <!-- EC Numbers -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
-                       href="#rule-ec-numbers">EC Numbers</a>
-                </h4>
-            </div>
-            <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 class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                            <h4 class="panel-title">
-                                <a id="{{ k|slugify }}_Link" data-toggle="collapse"
-                                   data-parent="#{{ k|slugify }}_Accordion"
-                                   href="#{{ k|slugify }}">
-                                    {{ k }}
-                                </a>
-                            </h4>
-                        </div>
-                        <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;">{{ enzyme.name }}</div>
-                                        <div style="float:right;">{{ enzyme.linking_method }}</div>
-                                    </a>
-                                {% endfor %}
-                            </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
     </div>
-</div>
+  </div>
 {% endblock content %}

templates/objects/compound.html

@@ -2,240 +2,370 @@
 
 {% block content %}
 
-    {% block action_modals %}
+  {% block action_modals %}
-        {% include "modals/objects/edit_compound_modal.html" %}
+    {% include "modals/objects/edit_compound_modal.html" %}
-        {% include "modals/objects/generic_set_aliases_modal.html" %}
+    {% include "modals/objects/generic_set_aliases_modal.html" %}
-        {% include "modals/objects/add_structure_modal.html" %}
+    {% include "modals/objects/add_structure_modal.html" %}
-        {% include "modals/objects/generic_set_scenario_modal.html" %}
+    {% include "modals/objects/generic_set_scenario_modal.html" %}
-        {% include "modals/objects/generic_set_external_reference_modal.html" %}
+    {% include "modals/objects/generic_set_external_reference_modal.html" %}
-        {% include "modals/objects/generic_copy_object_modal.html" %}
+    {% include "modals/objects/generic_copy_object_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="compound-detail">
-        <div class="panel panel-default">
-            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
-                {{ compound.name|safe }}
-                <div id="actionsButton"
-                     style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                         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" %}
-                        {% endblock %}
-                    </ul>
-                </div>
-            </div>
-            <div class="panel-body">
-                <p>
-                    The structures stored in this compound can be found at <a target="_blank"
-                                                                              href="{{ compound.url }}/structure"
-                                                                              role="button">Compound structures
-                    &gt;&gt;</a>
-                </p>
-            </div>
-
-            {% if compound.aliases %}
-                <!-- Aliases -->
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                    <h4 class="panel-title">
-                        <a id="compound-aliases-link" data-toggle="collapse" data-parent="#compound-detail"
-                           href="#compound-aliases">Aliases</a>
-                    </h4>
-                </div>
-                <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>
-                        {% endfor %}
-                    </div>
-                </div>
-            {% endif %}
-
-            <!-- Description -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-desc-link" data-toggle="collapse" data-parent="#compound-detail"
-                       href="#compound-desc">Description</a>
-                </h4>
-            </div>
-            <div id="compound-desc" class="panel-collapse collapse in">
-                <div class="panel-body list-group-item">
-                    {{ compound.description|safe }}
-                </div>
-            </div>
-
-            <!-- Image -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-image-link" data-toggle="collapse" data-parent="#compound-detail"
-                       href="#compound-image">Image Representation</a>
-                </h4>
-            </div>
-            <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 }}
-                    </div>
-                </div>
-            </div>
-
-            <!-- SMILES -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
-                       href="#compound-smiles">SMILES Representation</a>
-                </h4>
-            </div>
-            <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 class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-canonical-smiles-link" 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 collapse in">
-                <div class="panel-body list-group-item">
-                    {{ compound.default_structure.canonical_smiles }}
-                </div>
-            </div>
-
-            <!-- InChiKey -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-inchi-link" data-toggle="collapse" data-parent="#compound-detail"
-                       href="#compound-inchi">InChIKey</a>
-                </h4>
-            </div>
-            <div id="compound-inchi" class="panel-collapse collapse in">
-                <div class="panel-body list-group-item">
-                    {{ compound.default_structure.inchikey }}
-                </div>
-            </div>
-
-            <!-- Reactions -->
-            {% if compound.related_reactions %}
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                    <h4 class="panel-title">
-                        <a id="compound-reaction-link" data-toggle="collapse" data-parent="#compound-detail"
-                           href="#compound-reaction">Reactions</a>
-                    </h4>
-                </div>
-                <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 }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
-                        {% endfor %}
-                    </div>
-                </div>
-            {% endif %}
-
-            <!-- Pathways -->
-            {% if compound.related_pathways %}
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                    <h4 class="panel-title">
-                        <a id="compound-pathway-link" data-toggle="collapse" data-parent="#compound-detail"
-                           href="#compound-pathway">Pathways</a>
-                    </h4>
-                </div>
-                <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 }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
-                        {% endfor %}
-                    </div>
-                </div>
-            {% endif %}
-
-            <!-- Scenarios -->
-            {% if compound.scenarios.all %}
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                    <h4 class="panel-title">
-                        <a id="compound-scenario-link" data-toggle="collapse" data-parent="#compound-detail"
-                           href="#compound-scenario">Scenarios</a>
-                    </h4>
-                </div>
-                <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 }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                        {% endfor %}
-                    </div>
-                </div>
-            {% endif %}
-
-            <!-- External Identifiers -->
-            {% if compound.get_external_identifiers %}
-                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                    <h4 class="panel-title">
-                        <a id="compound-external-identifier-link" data-toggle="collapse" data-parent="#compound-detail"
-                           href="#compound-external-identifier">External Identifier</a>
-                    </h4>
-                </div>
-                <div id="compound-external-identifier" class="panel-collapse collapse in">
-                    <div class="panel-body list-group-item">
-                        {% if compound.get_pubchem_compound_identifiers %}
-                            <div class="panel panel-default panel-heading list-group-item"
-                                 style="background-color:silver">
-                                <h4 class="panel-title">
-                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
-                                       data-parent="#compound-external-identifier"
-                                       href="#compound-pubchem-identifier">PubChem Compound Identifier</a>
-                                </h4>
-                            </div>
-                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
-                                {% for eid in compound.get_pubchem_compound_identifiers %}
-                                    <a class="list-group-item"
-                                       href="{{ eid.external_url }}">CID{{ eid.identifier_value }}</a>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                        {% if compound.get_pubchem_substance_identifiers %}
-                            <div class="panel panel-default panel-heading list-group-item"
-                                 style="background-color:silver">
-                                <h4 class="panel-title">
-                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
-                                       data-parent="#compound-external-identifier"
-                                       href="#compound-pubchem-identifier">PubChem Substance Identifier</a>
-                                </h4>
-                            </div>
-                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
-                                {% for eid in compound.get_pubchem_substance_identifiers %}
-                                    <a class="list-group-item"
-                                       href="{{ eid.external_url }}">SID{{ eid.identifier_value }}</a>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                        {% if compound.get_chebi_identifiers %}
-                            <div class="panel panel-default panel-heading list-group-item"
-                                 style="background-color:silver">
-                                <h4 class="panel-title">
-                                    <a id="compound-chebi-identifier-link" data-toggle="collapse"
-                                       data-parent="#compound-external-identifier"
-                                       href="#compound-chebi-identifier">ChEBI Identifier</a>
-                                </h4>
-                            </div>
-                            <div id="compound-chebi-identifier" class="panel-collapse collapse in">
-                                {% for eid in compound.get_chebi_identifiers %}
-                                    <a class="list-group-item"
-                                       href="{{ eid.external_url }}">CHEBI:{{ eid.identifier_value }}</a>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
-                </div>
-            {% endif %}
 
+  <div class="panel-group" id="compound-detail">
+    <div class="panel panel-default">
+      <div
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
+        {{ compound.name|safe }}
+        <div
+          id="actionsButton"
+          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
+          class="dropdown"
+        >
+          <a
+            href="#"
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            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" %}
+            {% endblock %}
+          </ul>
         </div>
+      </div>
+      <div class="panel-body">
+        <p>
+          The structures stored in this compound can be found at
+          <a target="_blank" href="{{ compound.url }}/structure" role="button"
+            >Compound structures &gt;&gt;</a
+          >
+        </p>
+      </div>
 
+      {% if compound.aliases %}
+        <!-- Aliases -->
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-aliases-link"
+              data-toggle="collapse"
+              data-parent="#compound-detail"
+              href="#compound-aliases"
+              >Aliases</a
+            >
+          </h4>
+        </div>
+        <div id="compound-aliases" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for alias in compound.aliases %}
+              <a class="list-group-item">{{ alias }}</a>
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      <!-- Description -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-desc-link"
+            data-toggle="collapse"
+            data-parent="#compound-detail"
+            href="#compound-desc"
+            >Description</a
+          >
+        </h4>
+      </div>
+      <div id="compound-desc" class="panel-collapse in collapse">
+        <div class="panel-body list-group-item">
+          {{ compound.description|safe }}
+        </div>
+      </div>
+
+      <!-- Image -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-image-link"
+            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 class="panel-body list-group-item">
+          <div id="image-div" align="center">
+            {{ compound.default_structure.as_svg|safe }}
+          </div>
+        </div>
+      </div>
+
+      <!-- SMILES -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-smiles-link"
+            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 class="panel-body list-group-item">
+          {{ compound.default_structure.smiles }}
+        </div>
+      </div>
+
+      <!-- Canonical SMILES -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-canonical-smiles-link"
+            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 class="panel-body list-group-item">
+          {{ compound.default_structure.canonical_smiles }}
+        </div>
+      </div>
+
+      <!-- InChiKey -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-inchi-link"
+            data-toggle="collapse"
+            data-parent="#compound-detail"
+            href="#compound-inchi"
+            >InChIKey</a
+          >
+        </h4>
+      </div>
+      <div id="compound-inchi" class="panel-collapse in collapse">
+        <div class="panel-body list-group-item">
+          {{ compound.default_structure.inchikey }}
+        </div>
+      </div>
+
+      <!-- Reactions -->
+      {% if compound.related_reactions %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-reaction-link"
+              data-toggle="collapse"
+              data-parent="#compound-detail"
+              href="#compound-reaction"
+              >Reactions</a
+            >
+          </h4>
+        </div>
+        <div id="compound-reaction" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for r in compound.related_reactions %}
+              <a class="list-group-item" href="{{ r.url }}"
+                >{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
+              >
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      <!-- Pathways -->
+      {% if compound.related_pathways %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-pathway-link"
+              data-toggle="collapse"
+              data-parent="#compound-detail"
+              href="#compound-pathway"
+              >Pathways</a
+            >
+          </h4>
+        </div>
+        <div id="compound-pathway" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for r in compound.related_pathways %}
+              <a class="list-group-item" href="{{ r.url }}"
+                >{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
+              >
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      <!-- Scenarios -->
+      {% if compound.scenarios.all %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-scenario-link"
+              data-toggle="collapse"
+              data-parent="#compound-detail"
+              href="#compound-scenario"
+              >Scenarios</a
+            >
+          </h4>
+        </div>
+        <div id="compound-scenario" class="panel-collapse in collapse">
+          <div class="panel-body list-group-item">
+            {% for s in compound.scenarios.all %}
+              <a class="list-group-item" href="{{ s.url }}"
+                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
+              >
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
+      <!-- External Identifiers -->
+      {% if compound.get_external_identifiers %}
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-external-identifier-link"
+              data-toggle="collapse"
+              data-parent="#compound-detail"
+              href="#compound-external-identifier"
+              >External Identifier</a
+            >
+          </h4>
+        </div>
+        <div
+          id="compound-external-identifier"
+          class="panel-collapse in collapse"
+        >
+          <div class="panel-body list-group-item">
+            {% if compound.get_pubchem_compound_identifiers %}
+              <div
+                class="panel panel-default panel-heading list-group-item"
+                style="background-color:silver"
+              >
+                <h4 class="panel-title">
+                  <a
+                    id="compound-pubchem-identifier-link"
+                    data-toggle="collapse"
+                    data-parent="#compound-external-identifier"
+                    href="#compound-pubchem-identifier"
+                    >PubChem Compound Identifier</a
+                  >
+                </h4>
+              </div>
+              <div
+                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 }}"
+                    >CID{{ eid.identifier_value }}</a
+                  >
+                {% endfor %}
+              </div>
+            {% endif %}
+            {% if compound.get_pubchem_substance_identifiers %}
+              <div
+                class="panel panel-default panel-heading list-group-item"
+                style="background-color:silver"
+              >
+                <h4 class="panel-title">
+                  <a
+                    id="compound-pubchem-identifier-link"
+                    data-toggle="collapse"
+                    data-parent="#compound-external-identifier"
+                    href="#compound-pubchem-identifier"
+                    >PubChem Substance Identifier</a
+                  >
+                </h4>
+              </div>
+              <div
+                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 }}"
+                    >SID{{ eid.identifier_value }}</a
+                  >
+                {% endfor %}
+              </div>
+            {% endif %}
+            {% if compound.get_chebi_identifiers %}
+              <div
+                class="panel panel-default panel-heading list-group-item"
+                style="background-color:silver"
+              >
+                <h4 class="panel-title">
+                  <a
+                    id="compound-chebi-identifier-link"
+                    data-toggle="collapse"
+                    data-parent="#compound-external-identifier"
+                    href="#compound-chebi-identifier"
+                    >ChEBI Identifier</a
+                  >
+                </h4>
+              </div>
+              <div
+                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 }}"
+                    >CHEBI:{{ eid.identifier_value }}</a
+                  >
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+        </div>
+      {% endif %}
     </div>
+  </div>
 {% endblock content %}

templates/objects/compound_structure.html

@@ -2,101 +2,149 @@
 
 {% block content %}
 
-    {% block action_modals %}
+  {% block action_modals %}
-        {% include "modals/objects/edit_compound_structure_modal.html" %}
+    {% include "modals/objects/edit_compound_structure_modal.html" %}
-        {% include "modals/objects/generic_set_aliases_modal.html" %}
+    {% include "modals/objects/generic_set_aliases_modal.html" %}
-        {% include "modals/objects/generic_set_scenario_modal.html" %}
+    {% include "modals/objects/generic_set_scenario_modal.html" %}
-        {% include "modals/objects/generic_set_external_reference_modal.html" %}
+    {% include "modals/objects/generic_set_external_reference_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="compound-structure-detail">
+  <div class="panel-group" id="compound-structure-detail">
     <div class="panel panel-default">
-        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+      <div
-            {{ compound_structure.name|safe }}
+        class="panel-heading"
-            <div id="actionsButton"
+        id="headingPanel"
-                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
+        style="font-size:2rem;height: 46px"
-                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+      >
-                                     aria-haspopup="true" aria-expanded="false"><span
+        {{ compound_structure.name|safe }}
-                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
+        <div
-                    style="padding-right:1em"></span></a>
+          id="actionsButton"
-                <ul id="actionsList" class="dropdown-menu">
+          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                    {% block actions %}
+          class="dropdown"
-                    {% include "actions/objects/compound_structure.html" %}
+        >
-                    {% endblock %}
+          <a
-                </ul>
+            href="#"
-            </div>
+            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" %}
+            {% endblock %}
+          </ul>
         </div>
-        <div class="panel-body">
+      </div>
-            <p> {{ compound_structure.description|safe }} </p>
+      <div class="panel-body">
+        <p>{{ compound_structure.description|safe }}</p>
+      </div>
+
+      <!-- Image -->
+      <div
+        class="panel panel-default panel-heading list-group-item"
+        style="background-color:silver"
+      >
+        <h4 class="panel-title">
+          <a
+            id="compound-structure-image-link"
+            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 class="panel-body list-group-item">
+          <div id="image-div" align="center">
+            {{ compound_structure.as_svg|safe }}
+          </div>
         </div>
+      </div>
 
-        <!-- Image -->
+      <!-- SMILES -->
-        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+      <div
-            <h4 class="panel-title">
+        class="panel panel-default panel-heading list-group-item"
-                <a id="compound-structure-image-link" data-toggle="collapse" data-parent="#compound-structure-detail"
+        style="background-color:silver"
-                   href="#compound-structure-image">Image Representation</a>
+      >
-            </h4>
+        <h4 class="panel-title">
+          <a
+            id="compound-structure-smiles-link"
+            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 class="panel-body list-group-item">
+          {{ compound_structure.smiles }}
         </div>
-        <div id="compound-structure-image" class="panel-collapse collapse in">
+      </div>
-            <div class="panel-body list-group-item">
+
-                <div id="image-div" align="center">
+      {% if compound_structure.aliases %}
-                    {{ compound_structure.as_svg|safe }}
+        <!-- Aliases -->
-                </div>
+        <div
-            </div>
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-structure-aliases-link"
+              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">
-        <!-- SMILES -->
+          <div class="panel-body list-group-item">
-        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            {% for alias in compound_structure.aliases %}
-            <h4 class="panel-title">
+              <a class="list-group-item">{{ alias }}</a>
-                <a id="compound-structure-smiles-link" data-toggle="collapse" data-parent="#compound-structure-detail"
+            {% endfor %}
-                   href="#compound-structure-smiles">SMILES Representation</a>
+          </div>
-            </h4>
         </div>
-        <div id="compound-structure-smiles" class="panel-collapse collapse in">
+      {% endif %}
-            <div class="panel-body list-group-item">
+
-                {{ compound_structure.smiles }}
+      {% if compound_structure.scenarios.all %}
-            </div>
+        <div
+          class="panel panel-default panel-heading list-group-item"
+          style="background-color:silver"
+        >
+          <h4 class="panel-title">
+            <a
+              id="compound-structure-scenario-link"
+              data-toggle="collapse"
+              data-parent="#compound-structure-detail"
+              href="#compound-structure-scenario"
+              >Scenarios</a
+            >
+          </h4>
         </div>
+        <div
+          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 }}"
+                >{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
+              >
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
 
-        {% if compound_structure.aliases %}
+      <!-- Reactions -->
-            <!-- Aliases -->
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-structure-aliases-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-                       href="#compound-structure-aliases">Aliases</a>
-                </h4>
-            </div>
-            <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>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
-
-        {% if compound_structure.scenarios.all %}
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="compound-structure-scenario-link" data-toggle="collapse" data-parent="#compound-structure-detail"
-                       href="#compound-structure-scenario">Scenarios</a>
-                </h4>
-            </div>
-            <div id="compound-structure-scenario" class="panel-collapse collapse in">
-                <div class="panel-body list-group-item">
-                    {% for s in compound_structure.scenarios.all %}
-                        <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
-
-        <!-- Reactions -->
-
-        <!-- Pathways -->
 
+      <!-- Pathways -->
     </div>
-
+  </div>
-</div>
 {% endblock content %}