[Fix] Ketcher submission now recognized (#213)

This will hack the ketcher submission to work again (see #207).
The problem seems to be that the iframe loads slower than the script tag so the reference is not available on page load.

Registering from within the code to poll until ketcher is ready is a bit messy.
Tracked the introduced dept in #212.

Reviewed-on: enviPath/enviPy#213
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

.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

envipath/settings.py

@@ -87,6 +87,7 @@ TEMPLATES = [
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "epdb.context_processors.package_context",
             ],
         },
     },

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/context_processors.py

@@ -0,0 +1,32 @@
+"""
+Context processors for enviPy application.
+
+Context processors automatically make variables available to all templates.
+"""
+
+from .logic import PackageManager
+from .models import Package
+
+
+def package_context(request):
+    """
+    Provides package data for the search modal which is included globally
+    in framework_modern.html.
+
+    Returns:
+        dict: Context dictionary with reviewed and unreviewed packages
+    """
+    current_user = request.user
+
+    reviewed_package_qs = PackageManager.get_reviewed_packages()
+
+    unreviewed_package_qs = Package.objects.none()
+
+    # Only get user-specific packages if user is authenticated
+    if current_user.is_authenticated:
+        unreviewed_package_qs = PackageManager.get_all_readable_packages(current_user)
+
+    return {
+        "reviewed_packages": reviewed_package_qs,
+        "unreviewed_packages": unreviewed_package_qs,
+    }

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

@@ -48,6 +48,7 @@ urlpatterns = [
     re_path(r"^user$", v.users, name="users"),
     re_path(r"^group$", v.groups, name="groups"),
     re_path(r"^search$", v.search, name="search"),
+    re_path(r"^predict$", v.predict_pathway, name="predict_pathway"),
     # User Detail
     re_path(rf"^user/(?P<user_uuid>{UUID})", v.user, name="user"),
     # Group Detail
@@ -141,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

@@ -362,6 +362,34 @@ def index(request):
     return render(request, "index/index.html", context)
 
 
+def predict_pathway(request):
+    """Top-level predict pathway view using user's default package."""
+    if request.method != "GET":
+        return HttpResponseNotAllowed(["GET"])
+
+    context = get_base_context(request)
+    context["title"] = "enviPath - Predict Pathway"
+    context["meta"]["current_package"] = context["meta"]["user"].default_package
+
+    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)
 
@@ -682,7 +710,6 @@ def search(request):
     if request.method == "GET":
         package_urls = request.GET.getlist("packages")
         searchterm = request.GET.get("search", "").strip()
-
         mode = request.GET.get("mode")
 
         # add HTTP_ACCEPT check to differentiate between index and ajax call
@@ -783,6 +810,7 @@ def package_models(request, package_uuid):
 
     elif request.method == "POST":
         log_post_params(request)
+
         name = request.POST.get("model-name")
         description = request.POST.get("model-description")
 
@@ -943,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()
@@ -1072,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")
-        license_link = request.POST.get("license-link")
-        license_image_link = request.POST.get("license-image-link")
+        cc_string = request.POST.get("license")
 
         if new_package_name:
             current_package.name = new_package_name
@@ -1102,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:
-                if current_package.license is not None:
-                    current_package.license.delete()
-
-                license = License()
-                license.link = license_link
-                license.image_link = license_image_link
-                license.save()
-
-                current_package.license = license
+            else:  # Get the license and assign it to the package
+                current_package.license = License.objects.get(cc_string=cc_string)
                 current_package.save()
 
                 return redirect(current_package.url)
@@ -1174,7 +1197,7 @@ def package_compounds(request, package_uuid):
 
     elif request.method == "POST":
         compound_name = request.POST.get("compound-name")
-        compound_smiles = request.POST.get("compound-smiles").strip()
+        compound_smiles = request.POST.get("compound-smiles")
         compound_description = request.POST.get("compound-description")
 
         c = Compound.create(current_package, compound_smiles, compound_name, compound_description)
@@ -1301,7 +1324,7 @@ def package_compound_structures(request, package_uuid, compound_uuid):
 
     elif request.method == "POST":
         structure_name = request.POST.get("structure-name")
-        structure_smiles = request.POST.get("structure-smiles").strip()
+        structure_smiles = request.POST.get("structure-smiles")
         structure_description = request.POST.get("structure-description")
 
         try:
@@ -1483,11 +1506,11 @@ def package_rules(request, package_uuid):
 
         # Obtain parameters as required by rule type
         if rule_type == "SimpleAmbitRule":
-            params["smirks"] = request.POST.get("rule-smirks").strip()
+            params["smirks"] = request.POST.get("rule-smirks")
             params["reactant_filter_smarts"] = request.POST.get("rule-reactant-smarts")
             params["product_filter_smarts"] = request.POST.get("rule-product-smarts")
         elif rule_type == "SimpleRDKitRule":
-            params["reaction_smarts"] = request.POST.get("rule-reaction-smarts").strip()
+            params["reaction_smarts"] = request.POST.get("rule-reaction-smarts")
         elif rule_type == "ParallelRule":
             pass
         elif rule_type == "SequentialRule":
@@ -1684,8 +1707,7 @@ def package_reactions(request, package_uuid):
     elif request.method == "POST":
         reaction_name = request.POST.get("reaction-name")
         reaction_description = request.POST.get("reaction-description")
-
-        reactions_smirks = request.POST.get("reaction-smirks").strip()
+        reactions_smirks = request.POST.get("reaction-smirks")
         educts = reactions_smirks.split(">>")[0].split(".")
         products = reactions_smirks.split(">>")[1].split(".")
 
@@ -2259,6 +2281,7 @@ def package_pathway_edges(request, package_uuid, pathway_uuid):
 
     elif request.method == "POST":
         log_post_params(request)
+
         edge_name = request.POST.get("edge-name")
         edge_description = request.POST.get("edge-description")
 

static/css/input.css

@@ -30,6 +30,7 @@
 /* Import DaisyUI plugin */
 @plugin "daisyui" {
   logs: true;
+  exclude: rootscrollgutter;
 }
 
 @import "./daisyui-theme.css";

templates/actions/collections/compound.html

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

templates/actions/collections/compound_structure.html

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

templates/actions/collections/group.html

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

templates/actions/collections/model.html

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

templates/actions/collections/node.html

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

templates/actions/collections/package.html

@@ -1,12 +1,20 @@
 <li>
   <a role="button" data-toggle="modal" data-target="#new_package_modal">
-        <span class="glyphicon glyphicon-plus"></span> New Package</a>
+    <span class="glyphicon glyphicon-plus"></span> New Package</a
+  >
 </li>
 <li>
   <a role="button" data-toggle="modal" data-target="#import_package_modal">
-        <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a>
+    <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a
+  >
 </li>
 <li>
-    <a role="button" data-toggle="modal" data-target="#import_legacy_package_modal">
-        <span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a>
+  <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>
-        <a role="button" data-toggle="modal" data-target="#predict_modal">
-            <span class="glyphicon glyphicon-plus"></span> New Pathway</a>
+    <a
+      href="{% if meta.current_package %}{{ meta.current_package.url }}/predict{% else %}{{ meta.server_url }}/predict{% endif %}"
+    >
+      <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>
     <a role="button" data-toggle="modal" data-target="#new_reaction_modal">
-            <span class="glyphicon glyphicon-plus"></span> New Reaction</a>
+      <span class="glyphicon glyphicon-plus"></span> New Reaction</a
+    >
   </li>
 {% endif %}

templates/actions/collections/rule.html

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

templates/actions/collections/scenario.html

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

templates/actions/collections/setting.html

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

templates/actions/objects/compound.html

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

templates/actions/objects/compound_structure.html

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

templates/actions/objects/edge.html

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

templates/actions/objects/group.html

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

templates/actions/objects/model.html

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

templates/actions/objects/node.html

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

templates/actions/objects/package.html

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

templates/actions/objects/pathway.html

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

templates/actions/objects/rule.html

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

templates/actions/objects/scenario.html

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

templates/actions/objects/user.html

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

templates/admin.html

@@ -1,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">
         <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>
     </form>
     <p></p>
   </div>
-<div id="results">
-</div>
+  <div id="results"></div>
   <div id="loading"></div>
-</div>
   <script>
     $(function () {
-    $('#submit').on('click', 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) {
           $("#loading").empty();
           queryResultToTable("results", result);
-        })
         });
-})
+      });
+    });
   </script>
-
 {% endblock content %}

templates/collections/joblog.html

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

templates/collections/objects_list.html

@@ -6,14 +6,22 @@
     <div>
       <div id="load-all-error" style="display: none;">
         <div class="alert alert-danger" role="alert">
-                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+          <span
+            class="glyphicon glyphicon-exclamation-sign"
+            aria-hidden="true"
+          ></span>
           <span class="sr-only">Error:</span>
           Getting objects failed!
         </div>
       </div>
 
-            <input type="text" id="object-search" class="form-control" placeholder="Search by name"
-                   style="display: none;">
+      <input
+        type="text"
+        id="object-search"
+        class="form-control"
+        placeholder="Search by name"
+        style="display: none;"
+      />
       <p></p>
     </div>
   {% endif %}
@@ -50,7 +58,11 @@
 
   <div class="panel-group" id="reviewListAccordion">
     <div class="panel panel-default">
-        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+      <div
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
         {% if object_type == 'package' %}
           Packages
         {% elif object_type == 'compound' %}
@@ -78,12 +90,21 @@
         {% elif object_type == 'group' %}
           Groups
         {% endif %}
-            <div id="actionsButton"
+        <div
+          id="actionsButton"
           style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
-                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                     aria-haspopup="true" aria-expanded="false"><span
-                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
-                    style="padding-right:1em"></span></a>
+          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 %}
               {% if object_type == 'package' %}
@@ -118,93 +139,204 @@
       <div class="panel-body">
         <!-- Set Text above links -->
         {% if object_type == 'package' %}
-            <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>
+          <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>
         {% elif object_type == 'compound' %}
-            <p>A compound stores the structure of a molecule and can include meta-information.
-                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
-                    &gt;&gt;</a></p>
+          <p>
+            A compound stores the structure of a molecule and can include
+            meta-information.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/compounds"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
         {% elif object_type == 'structure' %}
-            <p>The structures stored in this compound
-                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
-                    &gt;&gt;</a></p>
+          <p>
+            The structures stored in this compound
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/compounds"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
         {% elif object_type == 'rule' %}
-            <p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
-                <a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
-                    &gt;&gt;</a></p>
+          <p>
+            A rule describes a biotransformation reaction template that is
+            defined as SMIRKS.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/Rules"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </p>
         {% elif object_type == 'reaction' %}
-            <p>A reaction is a specific biotransformation from educt compounds to product compounds.
-                <a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
-                    &gt;&gt;</a></p>
+          <p>
+            A reaction is a specific biotransformation from educt compounds to
+            product compounds.
+            <a
+              target="_blank"
+              href="https://wiki.envipath.org/index.php/reactions"
+              role="button"
+              >Learn more &gt;&gt;</a
+            >
+          </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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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 reviewed_objects and unreviewed_objects %}
           {% 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
-                reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
+            <p>
+              Nothing found. There are two possible reasons: <br /><br />1.
+              There is no content yet.<br />2. You have no reading
+              permissions.<br /><br />Please be sure you have at least reading
+              permissions.
+            </p>
           {% endif %}
         {% endif %}
       </div>
       {% if reviewed_objects %}
         {% if reviewed_objects|length > 0 %}
-        <div 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"
-                   href="#Reviewed">Reviewed</a>
+              <a
+                id="ReviewedLink"
+                data-toggle="collapse"
+                data-parent="#reviewListAccordion"
+                href="#Reviewed"
+                >Reviewed</a
+              >
             </h4>
           </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' %}
                 {% for obj in reviewed_objects %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}
-                    <span class="glyphicon glyphicon-star" aria-hidden="true"
-                          style="float:right" data-toggle="tooltip"
-                          data-placement="top" title="" data-original-title="Reviewed">
+                  <a class="list-group-item" href="{{ obj.url }}"
+                    >{{ obj.name|safe }}
+                    <span
+                      class="glyphicon glyphicon-star"
+                      aria-hidden="true"
+                      style="float:right"
+                      data-toggle="tooltip"
+                      data-placement="top"
+                      title=""
+                      data-original-title="Reviewed"
+                    >
                     </span>
                   </a>
                 {% endfor %}
               {% else %}
                 {% for obj in reviewed_objects|slice:":50" %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
-                    <span class="glyphicon glyphicon-star" aria-hidden="true"
-                          style="float:right" data-toggle="tooltip"
-                          data-placement="top" title="" data-original-title="Reviewed">
+                  <a class="list-group-item" href="{{ obj.url }}"
+                    >{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
+                    <span
+                      class="glyphicon glyphicon-star"
+                      aria-hidden="true"
+                      style="float:right"
+                      data-toggle="tooltip"
+                      data-placement="top"
+                      title=""
+                      data-original-title="Reviewed"
+                    >
                     </span>
                   </a>
                 {% endfor %}
@@ -214,18 +346,36 @@
         {% 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>
-        <div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
+        <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>
+        <div
+          id="Unreviewed"
+          class="panel-collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %} collapse"
+        >
           <div class="panel-body list-group-item" id="UnreviewedContent">
             {% if object_type == 'package' %}
               {% for obj in unreviewed_objects %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
+                <a class="list-group-item" href="{{ obj.url }}"
+                  >{{ obj.name|safe }}</a
+                >
               {% endfor %}
             {% else %}
               {% for obj in unreviewed_objects|slice:":50" %}
-                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
+                <a class="list-group-item" href="{{ obj.url }}"
+                  >{{ obj.name|safe }}</a
+                >
               {% endfor %}
             {% endif %}
           </div>
@@ -233,12 +383,16 @@
       {% endif %}
       {% if objects %}
         <!-- Unreviewable objects such as User / Group / Setting -->
-        <ul class='list-group'>
+        <ul class="list-group">
           {% for obj in objects %}
             {% if object_type == 'user' %}
-            <a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
+              <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>
+              <a class="list-group-item" href="{{ obj.url }}"
+                >{{ obj.name|safe }}</a
+              >
             {% endif %}
           {% endfor %}
         </ul>
@@ -261,10 +415,14 @@
     </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>
+  {# prettier-ignore-start #}
     <script>
         $(function () {
 
@@ -316,4 +474,5 @@
 
         });
     </script>
+    {# prettier-ignore-end #}
 {% endblock content %}

templates/compare.html

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

templates/errors/400_bad_request.html

@@ -1,15 +1,18 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-
   <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
+      <a
+        target="_blank"
         href="https://wiki.envipath.org/index.php/packages"
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        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">
     <h4 class="alert-heading">Access Denied!</h4>
     <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
+      <a
+        target="_blank"
         href="https://wiki.envipath.org/index.php/packages"
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        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">
     <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
+      <a
+        target="_blank"
         href="https://wiki.envipath.org/index.php/packages"
-                                                          role="button">Wiki &gt;&gt;</a></p>
+        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">
     <h4 class="alert-heading">{{ error_message }}</h4>
-        <hr>
-        <p class="mb-0">
-            {{ error_detail }}
-        </p>
+    <hr />
+    <p class="mb-0">{{ 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">
     <h4 class="alert-heading">Your account has not been activated yet!</h4>
-        <p>Your account has not been activated yet. If you have questions <a href="mailto:admin@envipath.org">contact
-            us.</a>
+    <p>
+      Your account has not been activated yet. If you have questions
+      <a href="mailto:admin@envipath.org">contact us.</a>
     </p>
   </div>
-
 {% endblock content %}

templates/framework.html

@@ -1,11 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html data-theme="envipath">
   {% load static %}
   <head>
     <title>{{ title }}</title>
-    <meta name="csrf-token" content="{{ csrf_token }}">
+    <meta name="csrf-token" content="{{ csrf_token }}" />
     {# Favicon #}
-    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="{% static 'images/favicon.ico' %}"
+    />
 
     {# Tailwind CSS disabled for legacy Bootstrap framework #}
     {# Pages using this framework will be migrated to framework_modern.html incrementally #}
@@ -13,12 +17,20 @@
 
     {# Legacy Bootstrap 3.3.7 - scoped to .legacy-bootstrap #}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    />
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
-    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
+    <link
+      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css"
+    />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
     <script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
     <!-- CDN END -->
@@ -26,14 +38,15 @@
     {# Bootstrap compatibility styles #}
     <style>
       /* Ensure proper viewport behavior */
-        html, body {
+      html,
+      body {
         height: 100%; /* ensure body fills viewport */
         overflow-x: hidden; /* prevent horizontal scroll */
       }
     </style>
 
     <script>
-        const csrftoken = document.querySelector('[name=csrf-token]').content;
+      const csrftoken = document.querySelector("[name=csrf-token]").content;
 
       // Setup CSRF header for all jQuery AJAX requests
       $.ajaxSetup({
@@ -41,7 +54,7 @@
           if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
             xhr.setRequestHeader("X-CSRFToken", csrftoken);
           }
-            }
+        },
       });
     </script>
 
@@ -50,7 +63,6 @@
     <!--    {# EP CSS #}-->
     <!--    <link id="css-pps_white_general" href="{% static 'css/epp.css' %}" rel="stylesheet" type="text/css"/>-->
 
-
     {# General EP JS #}
     <script src="{% static 'js/pps.js' %}"></script>
     {# Modal Steps for Stepwise Modal Wizards #}
@@ -59,28 +71,33 @@
     {% if not debug %}
       <!-- Matomo -->
       <script>
-            var _paq = window._paq = window._paq || [];
+        var _paq = (window._paq = window._paq || []);
         /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            _paq.push(['trackPageView']);
-            _paq.push(['enableLinkTracking']);
+        _paq.push(["trackPageView"]);
+        _paq.push(["enableLinkTracking"]);
         (function () {
           var u = "//matomo.envipath.com/";
-                _paq.push(['setTrackerUrl', u + 'matomo.php']);
-                _paq.push(['setSiteId', '{{ meta.site_id }}']);
-                var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+          _paq.push(["setTrackerUrl", u + "matomo.php"]);
+          _paq.push(["setSiteId", "{{ meta.site_id }}"]);
+          var d = document,
+            g = d.createElement("script"),
+            s = d.getElementsByTagName("script")[0];
           g.async = true;
-                g.src = u + 'matomo.js';
+          g.src = u + "matomo.js";
           s.parentNode.insertBefore(g, s);
         })();
       </script>
       <!-- End Matomo Code -->
     {% endif %}
-
   </head>
   <body>
     <!-- Legacy Bootstrap navbar - isolated from Tailwind -->
     <div class="legacy-bootstrap">
-<nav class="navbar navbar-default navbar-inverse" style="border-radius:0px;" role="navigation">
+      <nav
+        class="navbar navbar-default navbar-inverse"
+        style="border-radius:0px;"
+        role="navigation"
+      >
         <div class="container-fluid">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header navbar-header-framework">
@@ -91,19 +108,28 @@
             <!--                <span class="icon-bar"></span>-->
             <!--                <span class="icon-bar"></span>-->
             <!--            </button>-->
-            <a id="pictureLink" href="{{ meta.server_url }}" class="navbar-brand">
-                <img id="image-logo-short-white.svg" src='{% static "/images/logo-short-white.svg" %}' width="100"
-                     alt="enviPath">
+            <a
+              id="pictureLink"
+              href="{{ meta.server_url }}"
+              class="navbar-brand"
+            >
+              <img
+                id="image-logo-short-white.svg"
+                src="{% static "/images/logo-short-white.svg" %}"
+                width="100"
+                alt="enviPath"
+              />
             </a>
           </div>
 
           <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse collapse-framework navbar-collapse-framework" id="navbarCollapse">
+          <div
+            class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
+            id="navbarCollapse"
+          >
             <ul class="nav navbar-nav navbar-nav-framework">
               <li>
-                    <a href="#" data-toggle="modal" data-target="#predict_modal">
-                        Predict Pathway
-                    </a>
+                <a href="{{ meta.server_url }}/predict"> Predict Pathway </a>
               </li>
               {#                <li class="dropdown">#}
               {#                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Predict Pathway<b class="caret"></b></a>#}
@@ -120,66 +146,143 @@
               {#                        </li>#}
               {#                    </ul>#}
               {#                </li>#}
-                <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li>
-                <li><a href="{{ meta.server_url }}/search" id="searchLink">Search</a></li>
-                <li><a href="{{ meta.server_url }}/model" id="modelLink">Modelling</a></li>
+              <li>
+                <a href="{{ meta.server_url }}/package" id="packageLink"
+                  >Package</a
+                >
+              </li>
+              <li>
+                <a href="{{ meta.server_url }}/model" id="modelLink"
+                  >Modelling</a
+                >
+              </li>
               <li class="dropdown">
-                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Browse Data<b class="caret"></b></a>
+                <a data-toggle="dropdown" class="dropdown-toggle" href="#"
+                  >Browse Data<b class="caret"></b
+                ></a>
                 <ul role="menu" class="dropdown-menu">
-                        <li><a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a></li>
-                        <li><a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a></li>
-                        <li><a href="{{ meta.server_url }}/compound" id="compoundLink">Compound</a></li>
-                        <li><a href="{{ meta.server_url }}/reaction" id="reactionLink">Reaction</a></li>
-                        <li><a href="{{ meta.server_url }}/model" id="relative-reasoningLink">Model</a></li>
-                        <li><a href="{{ meta.server_url }}/scenario" id="scenarioLink">Scenario</a></li>
+                  <li>
+                    <a href="{{ meta.server_url }}/pathway" id="pathwayLink"
+                      >Pathway</a
+                    >
+                  </li>
+                  <li>
+                    <a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a>
+                  </li>
+                  <li>
+                    <a href="{{ meta.server_url }}/compound" id="compoundLink"
+                      >Compound</a
+                    >
+                  </li>
+                  <li>
+                    <a href="{{ meta.server_url }}/reaction" id="reactionLink"
+                      >Reaction</a
+                    >
+                  </li>
+                  <li>
+                    <a
+                      href="{{ meta.server_url }}/model"
+                      id="relative-reasoningLink"
+                      >Model</a
+                    >
+                  </li>
+                  <li>
+                    <a href="{{ meta.server_url }}/scenario" id="scenarioLink"
+                      >Scenario</a
+                    >
+                  </li>
                   {#                        <li><a href="{{ meta.server_url }}/setting" id="settingLink">Setting</a></li>#}
                   {#                        <li><a href="{{ meta.server_url }}/user" id="userLink">User</a></li>#}
                   {#                        <li><a href="{{ meta.server_url }}/group" id="groupLink">Group</a></li>#}
                 </ul>
               </li>
-
             </ul>
 
-            <ul class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework">
-                <li><a href="https://community.envipath.org/" id="communityLink">Community</a></li>
+            <ul
+              class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework"
+            >
+              <li>
+                <a href="https://community.envipath.org/" id="communityLink"
+                  >Community</a
+                >
+              </li>
               <li class="dropdown">
-                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Info <b class="caret"></b></a>
+                <a data-toggle="dropdown" class="dropdown-toggle" href="#"
+                  >Info <b class="caret"></b
+                ></a>
                 <ul role="menu" class="dropdown-menu">
                   <!--<li><a href="{{ meta.server_url }}/funding" id="fundingLink">Funding</a></li>-->
-                        <li><a href="https://community.envipath.org/t/envipath-license/109" id="licenceLink">Licences</a></li>
-                        <li class="divider"></li>
-                        <li><a target="_blank" href="https://wiki.envipath.org/" id="wikiLink">Documentation Wiki</a>
+                  <li>
+                    <a
+                      href="https://community.envipath.org/t/envipath-license/109"
+                      id="licenceLink"
+                      >Licences</a
+                    >
+                  </li>
+                  <li class="divider"></li>
+                  <li>
+                    <a
+                      target="_blank"
+                      href="https://wiki.envipath.org/"
+                      id="wikiLink"
+                      >Documentation Wiki</a
+                    >
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      id="citeButton"
+                      data-toggle="modal"
+                      data-target="#citemodal"
+                      >How to cite enviPath</a
+                    >
                   </li>
-                        <li><a href="#" id="citeButton" data-toggle="modal" data-target="#citemodal">How to cite
-                            enviPath</a></li>
                   <li class="divider"></li>
                   <li><a>Version: {{ meta.version }}</a></li>
                 </ul>
               </li>
               {% if meta.user.username == 'anonymous' %}
                 <li>
-                        <a href="{% url 'login' %}" id="loginButton" style="margin-right:10px">Login</a>
+                  <a
+                    href="{% url 'login' %}"
+                    id="loginButton"
+                    style="margin-right:10px"
+                    >Login</a
+                  >
                 </li>
               {% else %}
                 <li class="dropdown">
-                        <a data-toggle="dropdown" id="loggedInButton" class="dropdown-toggle" id="logedInButton"
-                           href="#">
+                  <a
+                    data-toggle="dropdown"
+                    id="loggedInButton"
+                    class="dropdown-toggle"
+                    id="logedInButton"
+                    href="#"
+                  >
                     <div id="username">
                       {{ user.username }}<b class="caret"></b>
                     </div>
                   </a>
                   <ul role="menu" class="dropdown-menu">
                     <li>
-                                <a href="{{ meta.user.url }}" id="accountbutton">My Account</a>
+                      <a href="{{ meta.user.url }}" id="accountbutton"
+                        >My Account</a
+                      >
                     </li>
                     <li class="divider"></li>
-                            <form class="navbar-form navbar-left navbar-left-framework" role="logout"
-                                  action="{% url 'logout' %}" method="post">
+                    <form
+                      class="navbar-form navbar-left navbar-left-framework"
+                      role="logout"
+                      action="{% url 'logout' %}"
+                      method="post"
+                    >
                       {% csrf_token %}
                       <div class="form-group">
-                                    <input type="hidden" name="logout" value="true">
+                        <input type="hidden" name="logout" value="true" />
                       </div>
-                                <button type="submit" class="btn btn-default">Logout</button>
+                      <button type="submit" class="btn btn-default">
+                        Logout
+                      </button>
                     </form>
                   </ul>
                 </li>
@@ -210,24 +313,30 @@
         </div>
       {% endif %}
       {% if message %}
-        <div id="message">
-            {{ message }}
-        </div>
+        <div id="message">{{ message }}</div>
       {% endif %}
       {% block content %}
       {% endblock content %}
       {% if meta.url_contains_package and meta.current_package.license %}
         <p></p>
         <div class="panel-group" id="license_accordion">
-            <div class="panel panel-default list-group-item" style="background-color:#f5f5f5">
+          <div
+            class="panel panel-default list-group-item"
+            style="background-color:#f5f5f5"
+          >
             <div class="panel-title">
-                    <a data-toggle="collapse" data-parent="#licence_accordion" href="#license">License</a>
+              <a
+                data-toggle="collapse"
+                data-parent="#licence_accordion"
+                href="#license"
+                >License</a
+              >
             </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 }}">
+                <img src="{{ meta.current_package.license.image_link }}" />
               </a>
             </div>
           </div>
@@ -244,19 +353,32 @@
             <ul class="nav nav-pills nav-justified">
               <li>
                 <a href="http://ml.auckland.ac.nz" target="_blank">
-                        <img id="image-uoalogo" height="60" src='{% static "/images/UoA-Logo-Primary-RGB-Small.png" %}'
-                             alt="The Univserity of Auckland"/>
+                  <img
+                    id="image-uoalogo"
+                    height="60"
+                    src="{% static "/images/UoA-Logo-Primary-RGB-Small.png" %}"
+                    alt="The Univserity of Auckland"
+                  />
                 </a>
               </li>
               <li>
                 <a href="https://eawag.ch" target="_blank">
-                        <img id="image-ealogo" height="60" src='{% static "/images/ealogo.gif" %}' alt="Eawag"/>
+                  <img
+                    id="image-ealogo"
+                    height="60"
+                    src="{% static "/images/ealogo.gif" %}"
+                    alt="Eawag"
+                  />
                 </a>
               </li>
               <li>
                 <a href="https://www.uzh.ch/" target="_blank">
-                        <img id="image-ufzlogo" height="60" src='{% static "/images/uzh-logo.svg" %}'
-                             alt="University of Zurich"/>
+                  <img
+                    id="image-ufzlogo"
+                    height="60"
+                    src="{% static "/images/uzh-logo.svg" %}"
+                    alt="University of Zurich"
+                  />
                 </a>
               </li>
             </ul>
@@ -267,7 +389,9 @@
         <div class="col-lg-12">
           <ul class="nav nav-pills nav-justified">
             <!--            <li><a href="https://envipath.com/imprint/" target="_blank">Impressum/Imprint</a></li>-->
-            <li><a href="mailto:admin@envipath.org" target="_blank">Contact</a></li>
+            <li>
+              <a href="mailto:admin@envipath.org" target="_blank">Contact</a>
+            </li>
             <!--            <li><a href="http://envipath.com" target="_blank"> enviPath UG (haftungsbeschr&auml;nkt) &amp; Co. KG &copy;-->
             <!--                {{ YEAR }}</a></li>-->
           </ul>
@@ -279,14 +403,13 @@
     <script>
       $(function () {
         // Hide actionsbutton if theres no action defined
-        if ($('#actionsButton ul').children().length > 0) {
-            $('#actionsButton').show();
+        if ($("#actionsButton ul").children().length > 0) {
+          $("#actionsButton").show();
         }
       });
     </script>
     {% block modals %}
       {% include "modals/cite_modal.html" %}
-    {% include "modals/signup_modal.html" %}
       {% include "modals/predict_modal.html" %}
       {% include "modals/batch_predict_modal.html" %}
     {% endblock %}

templates/framework_modern.html

@@ -1,29 +1,40 @@
-<!DOCTYPE html>
+<!doctype html>
 <html data-theme="envipath" lang="en">
   {% load static %}
   <head>
     <title>{{ title }}</title>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="csrf-token" content="{{ csrf_token }}">
+    <meta name="csrf-token" content="{{ csrf_token }}" />
 
     {# Favicon #}
-    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="{% static 'images/favicon.ico' %}"
+    />
 
     {# Tailwind CSS + DaisyUI Output #}
-    <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/>
+    <link
+      href="{% static 'css/output.css' %}"
+      rel="stylesheet"
+      type="text/css"
+    />
 
     {# jQuery - Keep for compatibility with existing JS #}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
     {# Font Awesome #}
-    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+    <link
+      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
+      rel="stylesheet"
+    />
 
     {# Discourse embed for community #}
     <script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
 
     <script>
-        const csrftoken = document.querySelector('[name=csrf-token]').content;
+      const csrftoken = document.querySelector("[name=csrf-token]").content;
 
       // Setup CSRF header for all jQuery AJAX requests
       $.ajaxSetup({
@@ -31,7 +42,7 @@
           if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
             xhr.setRequestHeader("X-CSRFToken", csrftoken);
           }
-            }
+        },
       });
     </script>
 
@@ -43,23 +54,25 @@
     {% if not debug %}
       <!-- Matomo -->
       <script>
-            var _paq = window._paq = window._paq || [];
-            _paq.push(['trackPageView']);
-            _paq.push(['enableLinkTracking']);
+        var _paq = (window._paq = window._paq || []);
+        _paq.push(["trackPageView"]);
+        _paq.push(["enableLinkTracking"]);
         (function () {
           var u = "//matomo.envipath.com/";
-                _paq.push(['setTrackerUrl', u + 'matomo.php']);
-                _paq.push(['setSiteId', '{{ meta.site_id }}']);
-                var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+          _paq.push(["setTrackerUrl", u + "matomo.php"]);
+          _paq.push(["setSiteId", "{{ meta.site_id }}"]);
+          var d = document,
+            g = d.createElement("script"),
+            s = d.getElementsByTagName("script")[0];
           g.async = true;
-                g.src = u + 'matomo.js';
+          g.src = u + "matomo.js";
           s.parentNode.insertBefore(g, s);
         })();
       </script>
       <!-- End Matomo Code -->
     {% endif %}
   </head>
-<body class="min-h-screen bg-base-300">
+  <body class="bg-base-300 min-h-screen">
     {% include "includes/navbar.html" %}
 
     {# Main Content Area #}
@@ -67,8 +80,8 @@
       {% block main_content %}
         {# Breadcrumbs - outside main content, optional #}
         {% if breadcrumbs %}
-                <div id="bread" class="max-w-7xl mx-auto px-4 py-4">
-                    <div class="text-sm breadcrumbs">
+          <div id="bread" class="mx-auto max-w-7xl px-4 py-4">
+            <div class="breadcrumbs text-sm">
               <ul>
                 {% for elem in breadcrumbs %}
                   {% for name, url in elem.items %}
@@ -85,12 +98,13 @@
         {% endif %}
 
         {# Main content container - paper effect on medium+ screens #}
-            <div id="docContent" class="w-full xl:w-xl md:mx-auto md:my-8 bg-base-100 md:shadow-2xl md:rounded-lg border-2">
+        <div
+          id="docContent"
+          class="bg-base-100 mx-auto md:my-8 md:max-w-6xl md:rounded-lg md:shadow-xl"
+        >
           {# Messages - inside paper #}
           {% if message %}
-                    <div id="message" class="alert alert-info m-4">
-                        {{ message }}
-                    </div>
+            <div id="message" class="alert alert-info m-4">{{ message }}</div>
           {% endif %}
 
           {# Page content - no enforced styles #}
@@ -99,14 +113,18 @@
 
           {# 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-title text-xl font-medium">License</div>
               <div class="collapse-content">
-                            <a target="_blank" href="{{ meta.current_package.license.link }}">
-                                <img src="{{ meta.current_package.license.image_link }}" alt="License">
+                <a
+                  target="_blank"
+                  href="{{ meta.current_package.license.link }}"
+                >
+                  <img
+                    src="{{ meta.current_package.license.image_link }}"
+                    alt="License"
+                  />
                 </a>
               </div>
             </div>
@@ -119,44 +137,73 @@
 
     {# Floating Help Tab #}
     {% if not public_mode %}
-    <div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
-        <a href="https://community.envipath.org/" target="_blank"
-           class="flex items-center justify-center btn btn-secondary hover:btn-secondary-focus text-secondary-content text-sm shadow-lg transition-all duration-300 hover:scale-105 hover:-translate-x-1"
-           title="Get Help from the Community">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+      <div class="fixed top-1/2 right-0 z-50 -translate-y-1/2">
+        <a
+          href="https://community.envipath.org/"
+          target="_blank"
+          class="btn btn-secondary hover:btn-secondary-focus text-secondary-content flex items-center justify-center text-sm shadow-lg transition-all duration-300 hover:-translate-x-1 hover:scale-105"
+          title="Get Help from the Community"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"
+          >
+            <path
+              d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+            />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
             <path d="M12 17h.01" />
           </svg>
         </a>
       </div>
     {% endif %}
 
-    {# Modals - TODO: Convert these to DaisyUI modals #}
     {% block modals %}
-        {# Note: These modals still use Bootstrap markup and will need conversion #}
-        {% include "modals/cite_modal.html" %}
-        {% include "modals/signup_modal.html" %}
-        {% include "modals/predict_modal.html" %}
-        {% include "modals/batch_predict_modal.html" %}
+      {% include "modals/search_modal.html" %}
     {% endblock %}
 
     <script>
       $(function () {
         // Hide actionsbutton if there's no action defined
-            if ($('#actionsButton ul').children().length > 0) {
-                $('#actionsButton').show();
+        if ($("#actionsButton ul").children().length > 0) {
+          $("#actionsButton").show();
         }
-
       });
 
+      // 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) {
+      document.addEventListener("keydown", function (event) {
         // Check if user is typing in an input field
         const activeElement = document.activeElement;
-            const isInputField = activeElement && (
-                activeElement.tagName === 'INPUT' ||
-                activeElement.tagName === 'TEXTAREA' ||
-                activeElement.contentEditable === 'true'
-            );
+        const isInputField =
+          activeElement &&
+          (activeElement.tagName === "INPUT" ||
+            activeElement.tagName === "TEXTAREA" ||
+            activeElement.contentEditable === "true");
 
         if (isInputField) {
           return; // Don't trigger shortcut when typing in input fields
@@ -166,9 +213,9 @@
         const isMac = /Mac/.test(navigator.platform);
         const isCorrectModifier = isMac ? event.metaKey : event.ctrlKey;
 
-            if (isCorrectModifier && event.key === 'k') {
+        if (isCorrectModifier && event.key === "k") {
           event.preventDefault();
-                window.location.href = '/search';
+          openSearchModal();
         }
       });
     </script>

templates/includes/footer.html

@@ -1,17 +1,20 @@
 {% 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">
     {% if not public_mode %}
       <nav>
         <h6 class="footer-title">Services</h6>
-            <a class="link link-hover" href="/">Predict</a>
-            <a class="link link-hover" href="/search">Search</a>
-            <a class="link link-hover" href="/package">Browse</a>
+        <a class="link link-hover" href="/predict">Predict</a>
+        <a class="link link-hover" href="/package">Packages</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>
+        <a
+          href="https://wiki.envipath.org/"
+          target="_blank"
+          class="link link-hover"
+          >Documentation</a
+        >
       </nav>
     {% endif %}
     <nav>
@@ -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">
-    <div class="flex flex-row justify-between w-full items-start">
+  <footer class="footer border-t-2 border-neutral-300 px-10 py-4">
+    <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
+          class="fill-neutral-content m-2 h-14 flex-shrink-0"
+          viewbox="0 0 65 65"
+        >
           <use
             href="{% static "/images/logo-square.svg" %}#ep-logo-square"
-              >
-              </use>
+          ></use>
         </svg>
 
         enviPath Ltd.
         <br />
         Biodegredation prediction since 2015.
-        </p>
       </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>
+      <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>
     </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
+            role="img"
+            viewBox="0 0 24 24"
+            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"/>
+            <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
+            role="img"
+            viewBox="0 0 24 24"
+            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"/>
+            <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,28 +1,58 @@
 {% 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">
-            <svg class="h-8 fill-base-content" viewBox="0 0 104 26"  role="img">
-                <use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
+    <a href="{{ meta.server_url }}" class="btn btn-ghost text-xl normal-case">
+      <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>
   </div>
 
   {% if not public_mode %}
     <div class="navbar-center hidden lg:flex">
-        <a href="#" role="button" class="btn btn-ghost" id="predictLink">Predict</a>
+      <a
+        href="{{ meta.server_url }}/predict"
+        role="button"
+        class="btn btn-ghost"
+        id="predictLink"
+        >Predict</a
+      >
       <!-- <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li> -->
       <!--<li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>-->
       <div class="dropdown dropdown-center">
         <div tabindex="0" role="button" class="btn btn-ghost">Browse</div>
-            <ul 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 }}/pathway" id="pathwayLink">Pathway</a></li>
+        <ul
+          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>
           <li><a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a></li>
-                <li><a href="{{ meta.server_url }}/compound" id="compoundLink">Compound</a></li>
-                <li><a href="{{ meta.server_url }}/reaction" id="reactionLink">Reaction</a></li>
-                <li><a href="{{ meta.server_url }}/model" id="relative-reasoningLink">Model</a></li>
-                <li><a href="{{ meta.server_url }}/scenario" id="scenarioLink">Scenario</a></li>
+          <li>
+            <a href="{{ meta.server_url }}/compound" id="compoundLink"
+              >Compound</a
+            >
+          </li>
+          <li>
+            <a href="{{ meta.server_url }}/reaction" id="reactionLink"
+              >Reaction</a
+            >
+          </li>
+          <li>
+            <a href="{{ meta.server_url }}/model" id="relative-reasoningLink"
+              >Model</a
+            >
+          </li>
+          <li>
+            <a href="{{ meta.server_url }}/scenario" id="scenarioLink"
+              >Scenario</a
+            >
+          </li>
         </ul>
       </div>
     </div>
@@ -30,9 +60,25 @@
 
   <div class="navbar-end">
     {% if not public_mode %}
-        <a href="/search" role="button" >
-            <div class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
+      <a id="search-trigger" role="button" class="cursor-pointer">
+        <div
+          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"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-search-icon lucide-search"
+          >
+            <path d="m21 21-4.34-4.34" />
+            <circle cx="11" cy="11" r="8" />
+          </svg>
           <span id="search-shortcut">⌘K</span>
         </div>
       </a>
@@ -41,17 +87,50 @@
       <a href="{% url 'login' %}" id="loginButton" class="p-2">Login</a>
     {% else %}
       <div class="dropdown dropdown-end">
-                <div tabindex="0" role="button" class="btn btn-ghost m-1 btn-circle" id="loggedInButton">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
+        <div
+          tabindex="0"
+          role="button"
+          class="btn btn-ghost btn-circle m-1"
+          id="loggedInButton"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-circle-user-icon lucide-circle-user"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <circle cx="12" cy="10" r="3" />
+            <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
+          </svg>
         </div>
-                <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm">
+        <ul
+          tabindex="-1"
+          class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm"
+        >
           <li><a href="{{ meta.user.url }}" id="accountbutton">Settings</a></li>
           <li>
-                        <form id="logoutForm" action="{% url 'logout' %}" method="post" style="display: none;">
+            <form
+              id="logoutForm"
+              action="{% url 'logout' %}"
+              method="post"
+              style="display: none;"
+            >
               {% csrf_token %}
-                            <input type="hidden" name="logout" value="true">
+              <input type="hidden" name="logout" value="true" />
             </form>
-                        <a href="#" id="logoutButton" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();">Logout</a>
+            <a
+              href="#"
+              id="logoutButton"
+              onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"
+              >Logout</a
+            >
           </li>
         </ul>
       </div>
@@ -63,9 +142,9 @@
   // OS-aware search shortcut display
   (function () {
     const isMac = /Mac/.test(navigator.platform);
-        const shortcutElement = document.getElementById('search-shortcut');
+    const shortcutElement = document.getElementById("search-shortcut");
     if (shortcutElement) {
-            shortcutElement.textContent = isMac ? '⌘K' : 'Ctrl+K';
+      shortcutElement.textContent = isMac ? "⌘K" : "Ctrl+K";
     }
   })();
 </script>

templates/index/index.html

@@ -1,34 +1,45 @@
 {% extends "framework_modern.html" %}
 {% 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">
-
-        <div class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
+  <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
+    <div
+      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">
-                <h2 class="text-3xl text-base-100 text-shadow-lg text-left">Predict Your Pathway</h2>
+      <div class="absolute bottom-40 left-1/8 z-10 -translate-x-8">
+        <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 ">
-        <div class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out">
+    <div
+      class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
+    >
+      <div
+        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="flex flex-row justify-start items-center h-fit ml-8 my-4">
-                    <div class="flex items-center gap-2">
-                        <!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
-                        <label class="toggle text-base-content toggle-md">
+          <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
+            <div class="flex items-center gap-1">
+              <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
                 <input type="checkbox" />
-                            <svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
+                <span class="swap-on 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="smiles mode"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      class="size-5"
+                    >
                       <g
                         stroke-linejoin="round"
                         stroke-linecap="round"
@@ -36,9 +47,20 @@
                         fill="currentColor"
                         stroke="none"
                       >
-                                    <path fill-rule="evenodd" 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" clip-rule="evenodd" />
+                        <path
+                          fill-rule="evenodd"
+                          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"
+                          clip-rule="evenodd"
+                        />
                       </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"
@@ -47,63 +69,120 @@
                       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" />
-
+                      <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">
-                    <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
+          <fieldset
+            class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
+          >
+            <form
+              id="index-form"
+              action="{{ meta.current_package.url }}/pathway"
+              method="POST"
+            >
               {% csrf_token %}
-                            <div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
-                                <div class="join w-full mx-auto">
-                                    <input type="text" id="index-form-text-input" placeholder="canonical SMILES string" class="input grow input-md join-item" />
+              <div
+                id="text-input-container"
+                class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
+              >
+                <div class="join mx-auto w-full">
+                  <input
+                    type="text"
+                    id="index-form-text-input"
+                    placeholder="canonical SMILES string"
+                    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"
+                    <a
+                      href="#"
+                      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"
+                      title="load example"
+                      >Caffeine</a
+                    >
+                    <a
+                      href="#"
+                      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>
+                      title="load example"
+                      >Ibuprofen</a
+                    >
                   </div>
-                                    <a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#">Advanced</a>
+                  <a
+                    class="absolute top-0 left-[calc(100%-5.4rem)]"
+                    href="/predict"
+                    >Advanced</a
+                  >
                 </div>
               </div>
-                             <div id="ketcher-container" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95">
-                                 <iframe id="index-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}"
-                                 width="100%" height="400" class="rounded-lg"></iframe>
-                                 <button class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2">Predict!</button>
-                                 <a class="label mx-auto w-full mt-1" href="#">Advanced</a>
+              <div
+                id="ketcher-container"
+                class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
+              >
+                <iframe
+                  id="index-ketcher"
+                  src="{% static '/js/ketcher2/ketcher.html' %}"
+                  width="100%"
+                  height="400"
+                  class="rounded-lg"
+                ></iframe>
+                <button
+                  class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
+                >
+                  Predict!
+                </button>
+                <div class="mt-1 flex w-full justify-end">
+                  <a class="label justify-end" href="/predict">Advanced</a>
                 </div>
-                        <input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
-                        <input type="hidden" id="index-form-predict" name="predict" value="predict">
-                        <input type="hidden" id="current-action" value="predict">
+              </div>
+              <input
+                type="hidden"
+                id="index-form-smiles"
+                name="smiles"
+                value="smiles"
+              />
+              <input
+                type="hidden"
+                id="index-form-predict"
+                name="predict"
+                value="predict"
+              />
+              <input type="hidden" id="current-action" value="predict" />
             </form>
           </fieldset>
         </div>
       </div>
     </div>
 
-
     <!-- Community News Section -->
-    <section class="py-16 bg-base-200 z-10 mx-8">
-        <div class="max-w-7xl mx-auto px-4">
-            <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
+    <section class="bg-base-200 z-10 mx-8 py-16">
+      <div class="mx-auto max-w-7xl px-4">
+        <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">
-                <a href="https://community.envipath.org/c/announcements/10" target="_blank" class="btn btn-ghost btn-sm">
+        <div class="mt-6 text-right">
+          <a
+            href="https://community.envipath.org/c/announcements/10"
+            target="_blank"
+            class="btn btn-ghost btn-sm"
+          >
             Read More Announcements
           </a>
         </div>
@@ -114,14 +193,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" />
+            <img
+              src="{% static "/images/ep-rule-artwork.png" %}"
+              alt="rule-based iterative tree greneration"
+              class="h-full w-full object-contain"
+            />
           </div>
-                <div class="space-y-4 text-left w-2/3 mr-8">
-                    <h2 class="h2 font-bold mb-8">About enviPath</h2>
+          <div class="mr-8 w-2/3 space-y-4 text-left">
+            <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
@@ -129,54 +212,91 @@
               observed biotransformation pathways.
             </p>
             <p class="">
-                        The pathway prediction system provides different relative reasoning models
-                        to predict likely biotransformation pathways and products. Explore our tools
-                        and contribute to advancing environmental biotransformation research.
+              The pathway prediction system provides different relative
+              reasoning models to predict likely biotransformation pathways and
+              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>
           </div>
         </div>
-
       </div>
     </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></div>
-            <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-                <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" />
-                <img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
-                <img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
+        <div class="divider">
+          <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
+        </div>
+        <div
+          class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+        >
+          <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"
+          />
+          <img
+            src="{% static "/images/logo-eawag.svg" %}"
+            alt="Eawag"
+            class="max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            src="{% static "/images/uzh-logo.svg" %}"
+            alt="University of Zurich"
+            class="2 max-h-16 w-full object-contain lg:col-span-1"
+          />
         </div>
       </div>
     </section>
-
-
-
-
   </div>
 
   <script language="javascript">
     var currentPackage = "{{ meta.current_package.url }}";
 
+    // Helper function to safely get Ketcher instance from iframe
+    function getKetcherInstance(iframeId) {
+      const ketcherFrame = document.getElementById(iframeId);
+      if (!ketcherFrame) {
+        console.error("Ketcher iframe not found:", iframeId);
+        return null;
+      }
+
+      try {
+        if (
+          "contentWindow" in ketcherFrame &&
+          ketcherFrame.contentWindow.ketcher
+        ) {
+          return ketcherFrame.contentWindow.ketcher;
+        }
+      } catch (err) {
+        console.error(
+          "Cannot access Ketcher iframe - possible CORS issue:",
+          err,
+        );
+      }
+
+      return null;
+    }
+
     // Discourse API integration is now handled by discourse-api.js
 
     // Function to render Discourse topics into cards
     function renderDiscourseTopics(topics) {
-            const container = document.getElementById('community-news-container');
+      const container = document.getElementById("community-news-container");
       if (!container) return;
 
       // Clear container
-            container.innerHTML = '';
+      container.innerHTML = "";
 
       // Create cards for each topic
-            topics.forEach(topic => {
+      topics.forEach((topic) => {
         const card = createDiscourseCard(topic);
-                container.insertAdjacentHTML('beforeend', card);
+        container.insertAdjacentHTML("beforeend", card);
       });
     }
 
@@ -223,53 +343,59 @@
     // Toggle functionality with smooth animations
     function toggleInputMode() {
       const toggle = $('input[type="checkbox"]');
-            const textContainer = $('#text-input-container');
-            const ketcherContainer = $('#ketcher-container');
-            const formCard = $('.card');
-            const fieldset = $('.fieldset');
+      const textContainer = $("#text-input-container");
+      const ketcherContainer = $("#ketcher-container");
+      const formCard = $(".card");
+      const fieldset = $(".fieldset");
 
-            if (toggle.is(':checked')) {
+      if (toggle.is(":checked")) {
         // Draw mode - show Ketcher, hide text input
-                textContainer.addClass('opacity-0 transform scale-95');
-                textContainer.removeClass('opacity-100 transform scale-100');
+        textContainer.addClass("opacity-0 transform scale-95");
+        textContainer.removeClass("opacity-100 transform scale-100");
 
         // Adjust fieldset padding for Ketcher mode - reduce padding and make more compact
-                fieldset.removeClass('p-8');
-                fieldset.addClass('p-4');
+        fieldset.removeClass("p-8");
+        fieldset.addClass("p-4");
 
         // Wait for fade out to complete, then hide and show new content
         setTimeout(() => {
-                    textContainer.addClass('hidden');
-                    ketcherContainer.removeClass('hidden opacity-0 transform scale-95');
-                    ketcherContainer.addClass('opacity-100 transform scale-100');
+          textContainer.addClass("hidden");
+          ketcherContainer.removeClass("hidden opacity-0 transform scale-95");
+          ketcherContainer.addClass("opacity-100 transform scale-100");
 
           // Force re-evaluation of iframe size
-                    const iframe = document.getElementById('index-ketcher');
+          const iframe = document.getElementById("index-ketcher");
           if (iframe) {
-                        iframe.style.height = '400px';
+            iframe.style.height = "400px";
           }
         }, 300);
       } else {
         // SMILES mode - show text input, hide Ketcher
-                ketcherContainer.addClass('opacity-0 transform scale-95');
-                ketcherContainer.removeClass('opacity-100 transform scale-100');
+        ketcherContainer.addClass("opacity-0 transform scale-95");
+        ketcherContainer.removeClass("opacity-100 transform scale-100");
 
         // Restore fieldset padding for text input mode
-                fieldset.removeClass('p-4');
-                fieldset.addClass('p-8');
+        fieldset.removeClass("p-4");
+        fieldset.addClass("p-8");
 
         // Wait for fade out to complete, then hide and show new content
         setTimeout(() => {
-                    ketcherContainer.addClass('hidden');
-                    textContainer.removeClass('hidden opacity-0 transform scale-95');
-                    textContainer.addClass('opacity-100 transform scale-100');
+          ketcherContainer.addClass("hidden");
+          textContainer.removeClass("hidden opacity-0 transform scale-95");
+          textContainer.addClass("opacity-100 transform scale-100");
         }, 300);
 
         // Transfer SMILES from Ketcher to text input if available
-                if (window.indexKetcher && window.indexKetcher.getSmiles) {
-                    const smiles = window.indexKetcher.getSmiles();
-                    if (smiles && smiles.trim() !== '') {
-                        $('#index-form-text-input').val(smiles);
+        const ketcher = getKetcherInstance("index-ketcher");
+        if (ketcher && ketcher.getSmiles) {
+          try {
+            const smiles = ketcher.getSmiles();
+            if (smiles && smiles.trim() !== "") {
+              $("#index-form-text-input").val(smiles);
+            }
+          } catch (err) {
+            console.error("Failed to sync Ketcher to text input:", err);
+            // Non-critical error, just log it
           }
         }
       }
@@ -277,27 +403,27 @@
 
     // Ketcher integration
     function indexKetcherToTextInput() {
-            $('#index-form-smiles').val(this.ketcher.getSmiles());
+      $("#index-form-smiles").val(this.ketcher.getSmiles());
     }
 
     $(function () {
       // Initialize fieldset with proper padding
-            $('.fieldset').addClass('p-8');
+      $(".fieldset").addClass("p-8");
 
       // Toggle event listener
-            $('input[type="checkbox"]').on('change', toggleInputMode);
+      $('input[type="checkbox"]').on("change", toggleInputMode);
 
       // Ketcher iframe load handler
-            $('#index-ketcher').on('load', function() {
+      $("#index-ketcher").on("load", function () {
         const checkKetcherReady = () => {
           const win = this.contentWindow;
-                    if (win.ketcher && 'editor' in win.ketcher) {
+          if (win.ketcher && "editor" in win.ketcher) {
             window.indexKetcher = win.ketcher;
             win.ketcher.editor.event.change.handlers.push({
               once: false,
               priority: 0,
               f: indexKetcherToTextInput,
-                            ketcher: win.ketcher
+              ketcher: win.ketcher,
             });
           } else {
             setTimeout(checkKetcherReady, 100);
@@ -307,20 +433,20 @@
       });
 
       // Handle example link clicks
-            $('.example-link').on('click', function(e) {
+      $(".example-link").on("click", function (e) {
         e.preventDefault();
-                const smiles = $(this).data('smiles');
-                const title = $(this).attr('title');
+        const smiles = $(this).data("smiles");
+        const title = $(this).attr("title");
 
         // Check if we're in Ketcher mode or text input mode
-                if ($('input[type="checkbox"]').is(':checked')) {
+        if ($('input[type="checkbox"]').is(":checked")) {
           // In Ketcher mode - set the SMILES in Ketcher
           if (window.indexKetcher && window.indexKetcher.setMolecule) {
             window.indexKetcher.setMolecule(smiles);
           }
         } else {
           // In text input mode - set the SMILES in the text input
-                    $('#index-form-text-input').val(smiles);
+          $("#index-form-text-input").val(smiles);
         }
 
         // Show a brief feedback
@@ -332,25 +458,44 @@
       });
 
       // Handle form submission on Enter
-            $('#index-form').on("submit", function (e) {
+      $("#index-form").on("submit", function (e) {
         e.preventDefault();
 
-                var textSmiles = '';
+        var textSmiles = "";
 
         // Check if we're in Ketcher mode and extract SMILES
-                if ($('input[type="checkbox"]').is(':checked') && window.indexKetcher) {
-                    textSmiles = window.indexKetcher.getSmiles().trim();
+        if ($('input[type="checkbox"]').is(":checked")) {
+          // Use the robust getter function
+          const ketcher = getKetcherInstance("index-ketcher");
+          if (ketcher && ketcher.getSmiles) {
+            try {
+              textSmiles = ketcher.getSmiles().trim();
+            } catch (err) {
+              console.error("Failed to get SMILES from Ketcher:", err);
+              alert(
+                "Unable to extract structure from the drawing editor. Please try again or switch to SMILES input mode.",
+              );
+              return;
+            }
           } else {
-                    textSmiles = $('#index-form-text-input').val().trim();
+            console.warn("Ketcher not available, possibly still loading");
+            alert(
+              "The drawing editor is still loading. Please wait a moment and try again.",
+            );
+            return;
+          }
+        } else {
+          textSmiles = $("#index-form-text-input").val().trim();
         }
 
-                if (textSmiles === '') {
+        if (textSmiles === "") {
+          alert("Please enter a SMILES string or draw a structure.");
           return;
         }
 
-                $('#index-form-smiles').val(textSmiles);
+        $("#index-form-smiles").val(textSmiles);
         $("#index-form").attr("action", currentPackage + "/pathway");
-                $("#index-form").attr("method", 'POST');
+        $("#index-form").attr("method", "POST");
         this.submit();
       });
 

templates/migration.html

@@ -3,7 +3,11 @@
 {% block content %}
   <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
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
         Migration Status BT Rules
       </div>
       <div class="panel-body">
@@ -12,33 +16,56 @@
       </div>
 
       {% for obj in results %}
-        <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"
+        >
           {% 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
+              class="glyphicon glyphicon-ok"
+              aria-hidden="true"
+              style="float:right"
+              data-toggle="tooltip"
+              data-placement="top"
+              title=""
+              data-original-title="Reviewed"
+            >
             </span>
           {% else %}
-            <span class="glyphicon glyphicon-remove" aria-hidden="true"
-                  style="float:right" data-toggle="tooltip"
-                  data-placement="top" title="" data-original-title="Reviewed">
+            <span
+              class="glyphicon glyphicon-remove"
+              aria-hidden="true"
+              style="float:right"
+              data-toggle="tooltip"
+              data-placement="top"
+              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>
+            <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 collapse {% if not obj.status %}in{% endif %}">
+        <div
+          id="{{ obj.id }}"
+          class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
+        >
           <div class="panel-body list-group-item">
-                <a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a>
+            <a class="list-group-item" href="{{ obj.detail_url }}"
+              >{{ obj.name|safe }} Migration Detail Page</a
+            >
           </div>
         </div>
       {% endfor %}
     </div>
   </div>
 
-<script>
-
-</script>
+  <script></script>
 {% endblock content %}

templates/migration_detail.html

@@ -3,34 +3,68 @@
 {% block content %}
   <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
+        class="panel-heading"
+        id="headingPanel"
+        style="font-size:2rem;height: 46px"
+      >
         Migration Status for {{ bt_rule_name }}
       </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>
+        <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 %}
-                <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"
+        >
           {% 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
+              class="glyphicon glyphicon-ok"
+              aria-hidden="true"
+              style="float:right"
+              data-toggle="tooltip"
+              data-placement="top"
+              title=""
+              data-original-title="Reviewed"
+            >
             </span>
           {% else %}
-                        <span class="glyphicon glyphicon-remove" aria-hidden="true"
-                              style="float:right" data-toggle="tooltip"
-                              data-placement="top" title="" data-original-title="Reviewed">
+            <span
+              class="glyphicon glyphicon-remove"
+              aria-hidden="true"
+              style="float:right"
+              data-toggle="tooltip"
+              data-placement="top"
+              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>
+            <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 collapse {% if not obj.status %}in{% endif %}">
+        <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>
@@ -39,7 +73,5 @@
     </div>
   </div>
 
-    <script>
-
-    </script>
+  <script></script>
 {% endblock content %}

templates/modals/cite_modal.html

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

templates/modals/collections/import_legacy_package_modal.html

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

templates/modals/collections/import_package_modal.html

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

templates/modals/collections/new_compound_modal.html

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

templates/modals/collections/new_group_modal.html

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

templates/modals/collections/new_model_modal.html

@@ -1,6 +1,11 @@
-
-<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
-     aria-hidden="true">
+<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">
@@ -11,29 +16,52 @@
         <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">
+        <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 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"/>
+          <input
+            id="model-name"
+            name="model-name"
+            class="form-control"
+            placeholder="Name"
+          />
 
           <!-- Description -->
           <label for="model-description">Description</label>
-                    <input id="model-description" name="model-description" class="form-control"
-                           placeholder="Description"/>
+          <input
+            id="model-description"
+            name="model-description"
+            class="form-control"
+            placeholder="Description"
+          />
 
           <!-- Model Type -->
           <label for="model-type">Model Type</label>
-                    <select id="model-type" name="model-type" class="form-control" data-width='100%'>
+          <select
+            id="model-type"
+            name="model-type"
+            class="form-control"
+            data-width="100%"
+          >
             <option disabled selected>Select Model Type</option>
             {% for k, v in model_types.items %}
               <option value="{{ v }}">{{ k }}</option>
@@ -43,8 +71,14 @@
           <!-- Rule Packages -->
           <div id="rule-packages" class="ep-model-param mlrr rbrr">
             <label for="model-rule-packages">Rule Packages</label>
-                        <select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
-                                class="form-control" multiple data-width='100%'>
+            <select
+              id="model-rule-packages"
+              name="model-rule-packages"
+              data-actions-box="true"
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
               <option disabled>Reviewed Packages</option>
               {% for obj in meta.readable_packages %}
                 {% if obj.reviewed %}
@@ -64,8 +98,14 @@
           <!-- Data Packages -->
           <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
             <label for="model-data-packages">Data Packages</label>
-                        <select id="model-data-packages" name="model-data-packages" data-actions-box='true'
-                                class="form-control" multiple data-width='100%'>
+            <select
+              id="model-data-packages"
+              name="model-data-packages"
+              data-actions-box="true"
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
               <option disabled>Reviewed Packages</option>
               {% for obj in meta.readable_packages %}
                 {% if obj.reviewed %}
@@ -85,11 +125,19 @@
           <!-- Fingerprinter -->
           <div id="fingerprinter" class="ep-model-param mlrr">
             <label for="model-fingerprinter">Fingerprinter</label>
-                        <select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
-                                class="form-control" multiple data-width='100%'>
+            <select
+              id="model-fingerprinter"
+              name="model-fingerprinter"
+              data-actions-box="true"
+              class="form-control"
+              multiple
+              data-width="100%"
+            >
               <option value="MACCS" selected>MACCS Fingerprinter</option>
               {% if meta.enabled_features.PLUGINS and additional_descriptors %}
-                                <option disabled selected>Select Additional Fingerprinter / Descriptor</option>
+                <option disabled selected>
+                  Select Additional Fingerprinter / Descriptor
+                </option>
                 {% for k, v in additional_descriptors.items %}
                   <option value="{{ v }}">{{ k }}</option>
                 {% endfor %}
@@ -100,8 +148,16 @@
           <!-- Threshold -->
           <div id="threshold" class="ep-model-param mlrr enviformer">
             <label for="model-threshold">Threshold</label>
-                        <input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
-                               name="model-threshold" class="form-control">
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              value="0.5"
+              id="model-threshold"
+              name="model-threshold"
+              class="form-control"
+            />
           </div>
 
           <div id="appdomain" class="ep-model-param mlrr">
@@ -109,33 +165,64 @@
               <!-- Build AD? -->
               <div class="checkbox">
                 <label>
-                                    <input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
-                                    Applicability Domain?
+                  <input
+                    type="checkbox"
+                    id="build-app-domain"
+                    name="build-app-domain"
+                  />Also build an Applicability Domain?
                 </label>
               </div>
               <div id="ad-params" style="display:none">
                 <!-- Num Neighbors -->
                 <label for="num-neighbors">Number of Neighbors</label>
-                                <input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
-                                       value="5"
-                                       step="1" min="0" max="10">
-                                <!-- Local Compatibility -->
-                                <label for="local-compatibility-threshold">Local Compatibility Threshold</label>
-                                <input id="local-compatibility-threshold" name="local-compatibility-threshold"
+                <input
+                  id="num-neighbors"
+                  name="num-neighbors"
                   type="number"
-                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
+                  class="form-control"
+                  value="5"
+                  step="1"
+                  min="0"
+                  max="10"
+                />
+                <!-- Local Compatibility -->
+                <label for="local-compatibility-threshold"
+                  >Local Compatibility Threshold</label
+                >
+                <input
+                  id="local-compatibility-threshold"
+                  name="local-compatibility-threshold"
+                  type="number"
+                  class="form-control"
+                  value="0.5"
+                  step="0.01"
+                  min="0"
+                  max="1"
+                />
                 <!-- Reliability -->
                 <label for="reliability-threshold">Reliability Threshold</label>
-                                <input id="reliability-threshold" name="reliability-threshold" type="number"
-                                       class="form-control" value="0.5" step="0.01" min="0" max="1">
+                <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>
+        <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>
@@ -144,45 +231,40 @@
 <script>
   $(function () {
     // Built in Model Types
-        var nativeModelTypes = [
-            "mlrr",
-            "rbrr",
-            "enviformer",
-        ]
+    var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
 
     // Initially hide all "specific" forms
     $(".ep-model-param").each(function () {
       $(this).hide();
     });
 
-        $('#model-type').selectpicker();
+    $("#model-type").selectpicker();
     $("#model-fingerprinter").selectpicker();
     $("#model-rule-packages").selectpicker();
     $("#model-data-packages").selectpicker();
 
     $("#build-app-domain").change(function () {
       if ($(this).is(":checked")) {
-                $('#ad-params').show();
+        $("#ad-params").show();
       } else {
-                $('#ad-params').hide();
+        $("#ad-params").hide();
       }
     });
 
     // On change hide all and show only selected
     $("#model-type").change(function () {
-            $('.ep-model-param').hide();
-            var modelType = $('#model-type').val();
+      $(".ep-model-param").hide();
+      var modelType = $("#model-type").val();
       if (nativeModelTypes.indexOf(modelType) !== -1) {
-                $('.' + modelType).show();
+        $("." + modelType).show();
       } else {
         // do nothing
       }
     });
 
-        $('#new_model_modal_form_submit').on('click', function (e) {
+    $("#new_model_modal_form_submit").on("click", function (e) {
       e.preventDefault();
-            $('#new_model_form').submit();
+      $("#new_model_form").submit();
     });
-
   });
 </script>

templates/modals/collections/new_package_modal.html

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

templates/modals/collections/new_pathway_modal.html

@@ -1,40 +1,57 @@
-
 {% load static %}
-<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
-     aria-hidden="true" style="overflow-y: auto;">
+<div
+  class="modal fade"
+  tabindex="-1"
+  id="new_pathway_modal"
+  role="dialog"
+  aria-labelledby="new_pathway_modal"
+  aria-hidden="true"
+  style="overflow-y: auto;"
+>
   <!-- FIXME: make width dynamic-->
   <div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">
-                    <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span>
+          <span aria-hidden="true">&times;</span>
+          <span class="sr-only">Close</span>
         </button>
         <h4 class="js-title-step"></h4>
       </div>
       <div class="modal-body hide" data-step="1" data-title="New Pathway">
-                <div class="jumbotron">Create a new pathway by entering
-                    the root compound and a name. Then select if you want to
-                    use the prediction engine to generate a predicted pathway or
-                    create an empty pathway that you fill in by yourself. If
-                    you choose to predict a pathway, you can modify the
-                    settings for the prediction, or use the default settings
-                    and just click Submit.
+        <div class="jumbotron">
+          Create a new pathway by entering the root compound and a name. Then
+          select if you want to use the prediction engine to generate a
+          predicted pathway or create an empty pathway that you fill in by
+          yourself. If you choose to predict a pathway, you can modify the
+          settings for the prediction, or use the default settings and just
+          click Submit.
         </div>
         <div class="modal-body">
           {% if current_user.name == 'anonymous' %}
             <div class="alert alert-warning">
-                        You are currently logged in as Anonymous. Please note:
-                        Pathways entered or predicted as anonymous user will be deleted after 30 days.
-                        Please log in to save your results.
+              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"/>
+            <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"/>
+            <input
+              id="description"
+              class="form-control"
+              name="description"
+              placeholder="no description"
+            />
           </div>
 
           <div class="col-md-6">
@@ -42,17 +59,33 @@
             <div class="radio" id="predict">
               <p>
                 <label>
-                                    <input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
+                  <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
+                  <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
+                  <input
+                    type="radio"
+                    name="predict"
+                    id="radioBuild"
+                    value="build"
+                  />Build pathway
                 </label>
               </p>
             </div>
@@ -61,13 +94,18 @@
         <label for="smilesinput">SMILES</label>
         <table style="width: 100%">
           <colgroup>
-                        <col span="1" style="width: 90%;">
-                        <col span="1" style="width: 10%;">
+            <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"/>
+              <input
+                id="smilesinput"
+                class="form-control"
+                name="smilesinput"
+                placeholder="C1CCCCC1"
+                autocapitalize="none"
+              />
             </td>
             <td>
               <button type="button" class="btn btn-default" id="render-button">
@@ -78,33 +116,57 @@
         </table>
         <p id="ketcher_container"></p>
         <div>
-                    <iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
-                            height="510"></iframe>
+          <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
+        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/>
+                <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"/>
+                <input
+                  type="radio"
+                  name="existing"
+                  id="radioExists"
+                  value="exisiting"
+                />
                 Select Existing
               </label>
             </p>
             <p>
               <label>
-                                <input type="radio" name="existing" id="radioNew" value="temporary"/>
+                <input
+                  type="radio"
+                  name="existing"
+                  id="radioNew"
+                  value="temporary"
+                />
                 Create New
               </label>
             </p>
@@ -122,12 +184,25 @@
         {% 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>
+        <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>
@@ -136,86 +211,86 @@
 
 <script>
   s = new Setting(
-    'settingName',
-    'package_multi_select',
-    'modelSelect',
-    'cutoff',
-    'evalType',
-    'availableTS',
-    'forms',
-    'truncatorTable',
-    'summaryTable',
+    "settingName",
+    "package_multi_select",
+    "modelSelect",
+    "cutoff",
+    "evalType",
+    "availableTS",
+    "forms",
+    "truncatorTable",
+    "summaryTable",
   );
 
   $(function () {
     // hide all forms
-    $('#forms').children().hide()
+    $("#forms").children().hide();
 
     $("#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() {
-        syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
+    $("#smilesinput").on("input", function () {
+      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
     });
 
     // If theres an update in ketcher sync it to textinput
     setInterval(function () {
-        syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
+      syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
     }, 250);
 
     $("#smilesinput").on("blur", function () {
-        syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
+      syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
     });
 
     $("#smilesinput").on("keypress", function (event) {
       if (event.keyCode == 13) {
-            syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
+        syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
       }
     });
 
     // Show forms depending on the selected TS
-    $('#availableTS').on('change', function(e) {
+    $("#availableTS").on("change", function (e) {
       e.preventDefault();
 
       var type = $(this).val();
       // hide current content
-        $('#forms').children().hide()
+      $("#forms").children().hide();
 
-        if(type === '') {
+      if (type === "") {
         return;
       }
 
-        $('#' + type + '_form').show()
+      $("#" + type + "_form").show();
     });
 
     $("#modelSelect").on("change", function () {
       setCutoff = function (thresh) {
         $("#cutoff").val(thresh);
-        }
+      };
 
       var modelUri = $("#modelSelect :selected").val();
       fillPRCurve(modelUri, setCutoff);
     });
 
     // Add a TS to the setting
-    $('#add-ts-button').on('click', function(e) {
+    $("#add-ts-button").on("click", function (e) {
       e.preventDefault();
       s.addTruncator();
     });
 
-    $('input[type=radio][name=predict]').change(function() {
-        if (this.id == 'radioBuild') {
+    $("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') {
+    $("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);
@@ -231,72 +306,71 @@ $(function() {
     var pwStep1 = function () {
       console.log("pw step 1");
       // Make "Next" to "Advanced"
-        $('#nextbutton').val("Advanced");
-    }
+      $("#nextbutton").val("Advanced");
+    };
 
     var pwStep2 = function () {
       console.log("pw step 2");
       // Make "Advanced" to "Next"
-        $('#nextbutton').val("Next");
+      $("#nextbutton").val("Next");
       // As "Use default is preselected" disable "Next" button
       $("#nextbutton").prop("disabled", true);
       // 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',
+    $("#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,
-      }
+        1: pwStep1,
+        2: pwStep2,
+        3: dummy,
+        4: settingStep1,
+        5: settingStep2,
+        6: settingStep3,
+      },
     });
 
-   $('#modal-form-submit').on('click', function() {
+    $("#modal-form-submit").on("click", function () {
       e.preventDefault();
       postPathway();
     });
   });
-
 </script>

templates/modals/collections/new_prediction_setting_modal.html

@@ -1,4 +1,3 @@
-
 {% load static %}
 
 <div id="new_prediction_setting_modal" class="modal" tabindex="-1">
@@ -6,38 +5,88 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Create a Prediction Setting</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </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">
+        <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>
-                    <input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/>
+          <input
+            id="prediction-setting-name"
+            name="prediction-setting-name"
+            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"/>
+          <input
+            id="prediction-setting-description"
+            name="prediction-setting-description"
+            class="form-control"
+            placeholder="Description"
+          />
 
           <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
+            id="prediction-setting-max-nodes"
+            type="number"
+            class="form-control"
+            name="prediction-setting-max-nodes"
+            value="30"
+            min="1"
+            max="50"
+            step="1"
+          />
           <label for="prediction-setting-max-depth">Max Depth</label>
-                    <input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1">
+          <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>
-                    <select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'>
+          <select
+            id="tp-generation-method"
+            name="tp-generation-method"
+            class="form-control"
+            data-width="100%"
+          >
             <option disabled selected>Select how TPs are generated</option>
             <option value="rule-based-prediction-setting">Rule Based</option>
             <option value="model-based-prediction-setting">Model Based</option>
           </select>
           <div id="rule-based-prediction-setting-specific-form">
             <!-- Rule Packages -->
-                        <label>Rule Packages</label><br>
-                        <select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages"
-                                data-actions-box='true' class="form-control" multiple data-width='100%'>
+            <label>Rule Packages</label><br />
+            <select
+              id="rule-based-prediction-setting-packages"
+              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 %}
@@ -54,32 +103,59 @@
             </select>
           </div>
           <div id="model-based-prediction-setting-specific-form">
-                        <label>Select Model</label><br>
-                        <select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
+            <label>Select Model</label><br />
+            <select
+              id="model-based-prediction-setting-model"
+              name="model-based-prediction-setting-model"
+              class="form-control"
+              data-width="100%"
+            >
               <option disabled selected>Select the model</option>
               {% for m in models %}
                 <option value="{{ m.url }}">{{ m.name|safe }}</option>
               {% endfor %}
             </select>
-                        <label for="model-based-prediction-setting-threshold">Threshold</label>
-                        <input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/>
+            <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">
-                    <label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label>
-
+          <input
+            class="form-check-input"
+            type="checkbox"
+            value="on"
+            id="prediction-setting-new-default"
+            name="prediction-setting-new-default"
+          />
+          <label class="form-check-label" for="prediction-setting-new-default"
+            >Set this setting as new default</label
+          >
         </form>
       </div>
       <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" id="new-prediction-setting-modal-submit">Create</button>
+        <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 () {
-
     // Initially hide all "specific" forms
     $("div[id$='-specific-form']").each(function () {
       $(this).hide();
@@ -92,18 +168,18 @@
       $("div[id$='-specific-form']").each(function () {
         $(this).hide();
       });
-            val = $('option:selected', this).val();
+      val = $("option:selected", this).val();
       $("#" + val + "-specific-form").show();
     });
 
-        $('#new-prediction-setting-modal-submit').click(function(e){
+    $("#new-prediction-setting-modal-submit").click(function (e) {
       e.preventDefault();
       // $('#new-prediction-setting-modal-form').submit();
 
-            const formData = $('#new-prediction-setting-modal-form').serialize();
-            $.post('/setting', formData, function(response) {
+      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"
-     role="dialog">
+<div
+  class="modal fade bs-modal-lg"
+  id="new_reaction_modal"
+  tabindex="-1"
+  aria-labelledby="new_reaction_modal"
+  aria-modal="true"
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">×</span>
         </button>
         <h4 class="modal-title">Create a new Reaction</h4>
       </div>
       <div class="modal-body">
-                <form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post">
+        <form
+          id="new_reaction_modal_form"
+          accept-charset="UTF-8"
+          action="{% url 'package reaction list' meta.current_package.uuid %}"
+          data-remote="true"
+          method="post"
+        >
           {% csrf_token %}
           <label for="reaction-name">Name</label>
-                    <input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/>
+          <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"/>
+          <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>
+            <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">
+          <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
+          type="button"
+          class="btn btn-secondary pull-left"
+          data-dismiss="modal"
+        >
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="new_reaction_modal_form_submit"
+        >
+          Submit
         </button>
-                <button type="button" class="btn btn-primary" id="new_reaction_modal_form_submit">Submit</button>
       </div>
     </div>
   </div>
-
 </div>
 <script>
   $(function () {
-    $('#new_reaction_modal_form_submit').on('click', function(e) {
+    $("#new_reaction_modal_form_submit").on("click", function (e) {
       e.preventDefault();
       $(this).prop("disabled", true);
 
-        k = getKetcher('new_reaction_ketcher');
-        $('#reaction-smirks').val(k.getSmiles());
+      k = getKetcher("new_reaction_ketcher");
+      $("#reaction-smirks").val(k.getSmiles());
 
       // submit form
-        $('#new_reaction_modal_form').submit();
+      $("#new_reaction_modal_form").submit();
     });
   });
 </script>

templates/modals/collections/new_rule_modal.html

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

templates/modals/collections/new_scenario_modal.html

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

templates/modals/objects/add_additional_information_modal.html

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

templates/modals/objects/add_pathway_edge_modal.html

@@ -1,95 +1,150 @@
-
 {% load static %}
-<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
+<div
+  class="modal fade bs-modal-lg"
+  id="add_pathway_edge_modal"
+  tabindex="-1"
+  aria-labelledby="add_pathway_edge_modal"
   aria-modal="true"
-     role="dialog">
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <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"
+        <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">
+          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"/>
+          <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"/>
+          <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-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%'>
+              <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>
+                  <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;">
+            <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%'>
+              <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>
+                  <option
+                    data-smiles="{{ n.default_node_label.smiles }}"
+                    value="{{ n.url }}"
+                  >
+                    {{ n.default_node_label.name|safe }}
+                  </option>
                 {% endfor %}
               </select>
             </div>
           </div>
           <div class="row">
             <p></p>
-                        <div class="col-xs-12" id="reaction_image">
-
-                        </div>
+            <div class="col-xs-12" id="reaction_image"></div>
           </div>
         </form>
       </div>
       <div class="modal-footer">
-                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
+        <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>
-                <button type="button" class="btn btn-primary" id="add_pathway_edge_modal_form_submit">Submit</button>
       </div>
     </div>
   </div>
-
 </div>
 <script>
-
   function reactionImage() {
     var substrates = [];
-        $('#add_pathway_edge_substrates option:selected').each(function () {
-          var smiles = $(this).data('smiles'); // read data-smiles attribute
+    $("#add_pathway_edge_substrates option:selected").each(function () {
+      var smiles = $(this).data("smiles"); // read data-smiles attribute
       substrates.push(smiles);
     });
 
-        var products = []
-        $('#add_pathway_edge_products option:selected').each(function () {
-          var smiles = $(this).data('smiles'); // read data-smiles attribute
+    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) +"'>"
+      reaction = substrates.join(".") + ">>" + products.join(".");
+      $("#reaction_image").empty();
+      $("#reaction_image").append(
+        "<img width='100%' src='{% url 'depict' %}?smirks=" +
+          encodeURIComponent(reaction) +
+          "'>",
       );
     }
   }
@@ -98,30 +153,22 @@
     $("#add_pathway_edge_substrates").selectpicker();
     $("#add_pathway_edge_products").selectpicker();
 
-        $("#add_pathway_edge_substrates").on('change', function (e) {
+    $("#add_pathway_edge_substrates").on("change", function (e) {
       reactionImage();
-        })
+    });
 
-        $("#add_pathway_edge_products").on('change', function (e) {
+    $("#add_pathway_edge_products").on("change", function (e) {
       reactionImage();
-        })
+    });
 
     $(function () {
-            $('#add_pathway_edge_modal_form_submit').on('click', function (e) {
+      $("#add_pathway_edge_modal_form_submit").on("click", function (e) {
         e.preventDefault();
         $(this).prop("disabled", true);
 
-
         // submit form
-                $('#add_pathway_edge_modal_form').submit();
+        $("#add_pathway_edge_modal_form").submit();
       });
     });
-
   });
-
 </script>
-
-
-
-
-

templates/modals/objects/add_pathway_node_modal.html

@@ -1,57 +1,102 @@
 {% 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"
-     role="dialog">
+<div
+  class="modal fade bs-modal-lg"
+  id="add_pathway_node_modal"
+  tabindex="-1"
+  aria-labelledby="add_pathway_node_modal"
+  aria-modal="true"
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
         <h4 class="modal-title">Add a Node</h4>
       </div>
       <div class="modal-body">
-                <form 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">
+        <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"
+        >
           {% csrf_token %}
           <label for="node-name">Name</label>
-                    <input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
+          <input
+            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"/>
+          <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">
+          <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>
+            <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
+          type="button"
+          class="btn btn-secondary pull-left"
+          data-dismiss="modal"
+        >
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="add_pathway_node_modal_form_submit"
+        >
+          Submit
         </button>
-                <button type="button" class="btn btn-primary" id="add_pathway_node_modal_form_submit">Submit</button>
       </div>
     </div>
   </div>
-
 </div>
 <script>
-
   function newStructureModalketcherToNewStructureModalTextInput() {
-    $('#node-smiles').val(this.ketcher.getSmiles());
+    $("#node-smiles").val(this.ketcher.getSmiles());
   }
 
   $(function () {
-
-    $('#add_node_ketcher').on('load', function() {
+    $("#add_node_ketcher").on("load", function () {
       const checkKetcherReady = () => {
-            win = this.contentWindow
-            if (win.ketcher && 'editor' in win.ketcher) {
+        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
+            ketcher: win.ketcher,
           });
         } else {
           setTimeout(checkKetcherReady, 100);
@@ -59,20 +104,16 @@ $(function() {
       };
 
       checkKetcherReady();
-    })
+    });
 
     $(function () {
-        $('#add_pathway_node_modal_form_submit').on('click', function(e) {
+      $("#add_pathway_node_modal_form_submit").on("click", function (e) {
         e.preventDefault();
         $(this).prop("disabled", true);
 
-
-
         // submit form
-            $('#add_pathway_node_modal_form').submit();
+        $("#add_pathway_node_modal_form").submit();
       });
     });
-
   });
-
 </script>

templates/modals/objects/add_structure_modal.html

@@ -1,57 +1,102 @@
 {% load static %}
-<div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_modal" aria-modal="true"
-     role="dialog">
+<div
+  class="modal fade bs-modal-lg"
+  id="add_structure_modal"
+  tabindex="-1"
+  aria-labelledby="add_structure_modal"
+  aria-modal="true"
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">×</span>
         </button>
         <h4 class="modal-title">Create a new Structure</h4>
       </div>
       <div class="modal-body">
-                <form 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">
+        <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"
+        >
           {% csrf_token %}
           <label for="structure-name">Name</label>
-                    <input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/>
+          <input
+            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"/>
+          <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">
+          <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>
+            <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
+          type="button"
+          class="btn btn-secondary pull-left"
+          data-dismiss="modal"
+        >
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="add_structure_modal_form_submit"
+        >
+          Submit
         </button>
-                <button type="button" class="btn btn-primary" id="add_structure_modal_form_submit">Submit</button>
       </div>
     </div>
   </div>
-
 </div>
 <script>
-
   function newStructureModalketcherToNewStructureModalTextInput() {
-    $('#structure-smiles').val(this.ketcher.getSmiles());
+    $("#structure-smiles").val(this.ketcher.getSmiles());
   }
 
   $(function () {
-
-    $('#add_structure_ketcher').on('load', function() {
+    $("#add_structure_ketcher").on("load", function () {
       const checkKetcherReady = () => {
-            win = this.contentWindow
-            if (win.ketcher && 'editor' in win.ketcher) {
+        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
+            ketcher: win.ketcher,
           });
         } else {
           setTimeout(checkKetcherReady, 100);
@@ -59,20 +104,16 @@ $(function() {
       };
 
       checkKetcherReady();
-    })
+    });
 
     $(function () {
-        $('#add_structure_modal_form_submit').on('click', function(e) {
+      $("#add_structure_modal_form_submit").on("click", function (e) {
         e.preventDefault();
         $(this).prop("disabled", true);
 
-
-
         // submit form
-            $('#add_structure_modal_form').submit();
+        $("#add_structure_modal_form").submit();
       });
     });
-
   });
-
 </script>

templates/modals/objects/delete_pathway_edge_modal.html

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

templates/modals/objects/delete_pathway_node_modal.html

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

templates/modals/objects/download_pathway_csv_modal.html

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

templates/modals/objects/download_pathway_image_modal.html

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

templates/modals/objects/edit_compound_modal.html

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

templates/modals/objects/edit_compound_structure_modal.html

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

templates/modals/objects/edit_group_member_modal.html

@@ -1,4 +1,3 @@
-
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_group_member_modal" class="modal" tabindex="-1">
@@ -6,15 +5,20 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Add or Remove Group Member</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <p>
-                    To add member (either User or entire Groups) to this group select the entity you want to add below
-                    and click the check mark.
-                    <br>
+          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>
 
@@ -28,12 +32,24 @@
         </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">
+          <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%'>
+              <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>
@@ -43,10 +59,9 @@
                   <option value="{{ g.url }}">{{ g.name|safe }}</option>
                 {% endfor %}
               </select>
-                            <input type="hidden" name="action" value="add">
-                        </div>
-                        <div class="col-xs-2">
+              <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>
@@ -57,16 +72,22 @@
         <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">
+            <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">
+                <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>
@@ -78,16 +99,22 @@
         <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">
+            <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">
+                <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>
@@ -96,26 +123,29 @@
             </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>
+        <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){
+    $("#edit-package-modal-submit").click(function (e) {
       e.preventDefault();
-        $('#edit-package-modal-form').submit();
+      $("#edit-package-modal-form").submit();
     });
 
     $("#select_member").selectpicker();
-
-})
+  });
 </script>

templates/modals/objects/edit_model_modal.html

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

templates/modals/objects/edit_node_modal.html

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

templates/modals/objects/edit_package_modal.html

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

templates/modals/objects/edit_package_permissions_modal.html

@@ -1,4 +1,3 @@
-
 {% load static %}
 <!-- Edit Package Permission -->
 <div id="edit_package_permissions_modal" class="modal" tabindex="-1">
@@ -6,16 +5,23 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Grant or Revoke Permissions</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <p>
-                    Modify permissions for this package. Note that if you give <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>
+          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>
 
@@ -35,12 +41,24 @@
         </div>
 
         <div class="row">
-                    <form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
-                          data-remote="true" method="post">
+          <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%'>
+              <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>
@@ -61,7 +79,11 @@
               <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">
+              <button
+                type="submit"
+                style="width:60%;"
+                class="btn col-xs-2 modify-perm-button"
+              >
                 <span class="glyphicon glyphicon-plus"></span>
               </button>
             </div>
@@ -70,24 +92,50 @@
         <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">
+            <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 %}/>
+                <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 %}/>
+                <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 %}/>
+                <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">
+                <button
+                  type="submit"
+                  style="width:60%;"
+                  class="btn col-xs-2 modify-perm-button"
+                >
                   <span class="glyphicon glyphicon-ok"></span>
                 </button>
               </div>
@@ -97,58 +145,93 @@
         <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">
+            <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 }}"/>
+                <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 %}/>
+                <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 %}/>
+                <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 %}/>
+                <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">
+                <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>
+        <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() {
     // 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;
-    writebox = '#write_' + id;
-    ownerbox = '#owner_' + id;
+    readbox = "#read_" + id;
+    writebox = "#write_" + id;
+    ownerbox = "#owner_" + id;
 
-
-    if (perm == 'read' && !$(readbox).prop("checked")) {
+    if (perm == "read" && !$(readbox).prop("checked")) {
       $(writebox).prop("checked", false);
       $(ownerbox).prop("checked", false);
     }
 
-    if (perm == 'write') {
+    if (perm == "write") {
       if ($(writebox).prop("checked")) {
         $(readbox).prop("checked", true);
       }
@@ -157,7 +240,7 @@ function checkboxClick() {
       }
     }
 
-    if (perm == 'owner') {
+    if (perm == "owner") {
       if ($(ownerbox).prop("checked")) {
         $(readbox).prop("checked", true);
         $(writebox).prop("checked", true);
@@ -166,18 +249,16 @@ function checkboxClick() {
   }
 
   $(function () {
-
-    $('#edit-package-modal-submit').click(function(e){
+    $("#edit-package-modal-submit").click(function (e) {
       e.preventDefault();
-        $('#edit-package-modal-form').submit();
+      $("#edit-package-modal-form").submit();
     });
 
     $("#select_grantee").selectpicker();
 
     // Add click functions to permission checkboxes
-    $('[id^="read_"]').on('click', checkboxClick);
-    $('[id^="write_"]').on('click', checkboxClick);
-    $('[id^="owner_"]').on('click', checkboxClick);
-
-})
+    $('[id^="read_"]').on("click", checkboxClick);
+    $('[id^="write_"]').on("click", checkboxClick);
+    $('[id^="owner_"]').on("click", checkboxClick);
+  });
 </script>

templates/modals/objects/edit_password_modal.html

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

templates/modals/objects/edit_pathway_modal.html

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

templates/modals/objects/edit_prediction_setting_modal.html

@@ -5,18 +5,31 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Update Prediction Setting</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="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">
+        <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 collapse in">
+          <div id="prediction-setting" class="panel-collapse in collapse">
             <div class="panel-body list-group-item">
-
-                            <table class="table table-bordered table-hover">
+              <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>
@@ -26,13 +39,26 @@
                     <tr>
                       <td width="20%">Model</td>
                       <td width="80%">
-                                        <table width="100%" class="table table-bordered table-hover">
+                        <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%'>
+                                <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>
+                                    <option
+                                      value="{{ m.id }}"
+                                      {% if user.prediction_settings.model.url == m.url %}selected{% endif %}
+                                    >
+                                      {{ m.name|safe }}
+                                    </option>
                                   {% endfor %}
                                 </select>
                               </td>
@@ -50,8 +76,15 @@
                                 </td>
                                 <td width="80%">
                                   {% if k == 'threshold' %}
-                                                    <input type="number" class="form-control" name="{{k}}" value="{{v}}"
-                                                           min="0" max="1" step="0.05">
+                                    <input
+                                      type="number"
+                                      class="form-control"
+                                      name="{{ k }}"
+                                      value="{{ v }}"
+                                      min="0"
+                                      max="1"
+                                      step="0.05"
+                                    />
                                   {% endif %}
                                 </td>
                               </tr>
@@ -63,22 +96,40 @@
                   {% endif %}
                   {% for k, v in user.prediction_settings.truncator.items %}
                     <tr>
-                                    <td><p>
+                      <td>
+                        <p>
                           {% if k == 'max_nodes' %}
                             Max Nodes
                           {% elif k == 'max_depth' %}
                             Max Depth
                           {% endif %}
-                                    </p></td>
-                                    <td><p>
+                        </p>
+                      </td>
+                      <td>
+                        <p>
                           {% if k == 'max_nodes' %}
-                                        <input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
-                                               max="50" step="1">
+                            <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">
+                            <input
+                              type="number"
+                              class="form-control"
+                              name="{{ k }}"
+                              value="{{ v }}"
+                              min="1"
+                              max="8"
+                              step="1"
+                            />
                           {% endif %}
-                                    </p></td>
+                        </p>
+                      </td>
                     </tr>
                   {% endfor %}
                 </tbody>
@@ -88,19 +139,25 @@
         </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>
+        <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>
 <script>
   $(function () {
-
-        $('#edit-prediction-setting-modal-submit').click(function(e){
+    $("#edit-prediction-setting-modal-submit").click(function (e) {
       e.preventDefault();
-            $('#edit-prediction-setting-modal-form').submit();
+      $("#edit-prediction-setting-modal-form").submit();
+    });
   });
-
-    })
 </script>

templates/modals/objects/edit_reaction_modal.html

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

templates/modals/objects/edit_rule_modal.html

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

templates/modals/objects/edit_user_modal.html

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

templates/modals/objects/evaluate_model_modal.html

@@ -1,6 +1,11 @@
-
-<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
-     aria-hidden="true">
+<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">
@@ -11,17 +16,29 @@
         <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">
+        <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.
+            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%'>
+          <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 %}
@@ -39,35 +56,38 @@
 
           <!-- Eval Type -->
           <label for="model-evaluation-type">Evaluation Type</label>
-                    <select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
+          <select
+            id="model-evaluation-type"
+            name="model-evaluation-type"
+            class="form-control"
+          >
             <option disabled selected>Select evaluation type</option>
             <option value="sg">Single Generation</option>
             <option value="mg">Multiple Generations</option>
           </select>
 
-                    <input type="hidden" name="hidden" value="evaluate">
+          <input type="hidden" name="hidden" value="evaluate" />
         </form>
       </div>
       <div class="modal-footer">
-                <a id="evaluate_model_form_submit" class="btn btn-primary" href="#">Evaluate</a>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <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>
 
 <script>
-
   $(function () {
-
     $("#model-evaluation-packages").selectpicker();
 
-        $('#evaluate_model_form_submit').on('click', function (e) {
+    $("#evaluate_model_form_submit").on("click", function (e) {
       e.preventDefault();
-            $('#evaluate_model_form').submit();
+      $("#evaluate_model_form").submit();
     });
-
   });
-
-
 </script>

templates/modals/objects/export_package_modal.html

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

templates/modals/objects/generic_copy_object_modal.html

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

templates/modals/objects/generic_delete_modal.html

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

templates/modals/objects/generic_set_aliases_modal.html

@@ -1,4 +1,3 @@
-
 {% load static %}
 
 <style>
@@ -48,66 +47,110 @@
   }
 </style>
 
-<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
-     aria-modal="true" role="dialog">
+<div
+  class="modal fade bs-modal-lg"
+  id="set_aliases_modal"
+  tabindex="-1"
+  aria-labelledby="set_aliases_modal"
+  aria-modal="true"
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">×</span>
         </button>
-                <h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4>
+        <h4 class="modal-title">
+          Set Aliases for {{ current_object.name|safe }}
+        </h4>
       </div>
       <div class="modal-body">
-                <form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
-                      data-remote="true" method="post">
+        <form
+          id="set_aliases_modal_form"
+          accept-charset="UTF-8"
+          action="{{ current_object.url }}"
+          data-remote="true"
+          method="post"
+        >
           {% csrf_token %}
           <label for="alias-input">Aliases:</label>
           <div class="form-control alias-container" id="alias-box">
             {% for alias in current_object.aliases %}
-                        <span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
+              <span class="alias"
+                >{{ alias|escape }}<span class="remove">&times;</span></span
+              >
             {% endfor %}
-                        <input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
+            <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
+          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>
+        <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 addAlias(aliasText) {
       aliasText = aliasText.trim();
-            if (aliasText === '') return;
+      if (aliasText === "") return;
 
       // Avoid duplicate aliass
       var exists = false;
-            $('#alias-box .alias').each(function () {
-                if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
+      $("#alias-box .alias").each(function () {
+        if (
+          $(this).text().replace("×", "").trim().toLowerCase() ===
+          aliasText.toLowerCase()
+        ) {
           exists = true;
           return false;
         }
       });
 
       if (!exists) {
-                var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
+        var aliasHtml =
+          '<span class="alias">' +
+          $("<div>").text(aliasText).html() +
           '<span class="remove">&times;</span></span>';
-                $(aliasHtml).insertBefore('#alias-input');
+        $(aliasHtml).insertBefore("#alias-input");
       }
 
-            $('#alias-input').val('');
+      $("#alias-input").val("");
     }
 
     // Add alias when Enter is pressed
-        $('#alias-input').on('keypress', function (e) {
+    $("#alias-input").on("keypress", function (e) {
       if (e.which === 13) {
         e.preventDefault();
         addAlias($(this).val());
@@ -115,56 +158,56 @@
     });
 
     // Add alias when input loses focus
-        $('#alias-input').on('blur', function () {
+    $("#alias-input").on("blur", function () {
       var val = $(this).val();
-            if (val.trim() !== '') {
+      if (val.trim() !== "") {
         addAlias(val);
       }
     });
 
     // Remove alias when clicking ×
-        $('#alias-box').on('click', '.remove', function () {
-            $(this).closest('.alias').remove();
+    $("#alias-box").on("click", ".remove", function () {
+      $(this).closest(".alias").remove();
     });
 
     // Focus input when clicking the container
-        $('#alias-box').on('click', function () {
-            $('#alias-input').focus();
+    $("#alias-box").on("click", function () {
+      $("#alias-input").focus();
     });
 
-
-        $('#set_aliases_modal_form_submit').on('click', function (e) {
+    $("#set_aliases_modal_form_submit").on("click", function (e) {
       e.preventDefault();
 
       let aliases = [];
-            $('#alias-box .alias').each(function () {
-                aliases.push($(this).text().replace('×', '').trim())
+      $("#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 = ['']
+        aliases = [""];
       }
 
       formData = {
-                'aliases': aliases
-            }
+        aliases: aliases,
+      };
 
       $.ajax({
-                type: 'post',
+        type: "post",
         data: formData,
-                url: '{{ current_object.url }}',
+        url: "{{ current_object.url }}",
         traditional: true,
         success: function (data, textStatus) {
           window.location.href = data.success;
         },
         error: function (jqXHR, textStatus, errorThrown) {
-                    $('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
-                    $('#add-alias-error-message').show();                }
+          $("#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,4 +1,3 @@
-
 {% load static %}
 <!-- Delete Object -->
 <div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
@@ -6,25 +5,47 @@
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Add External References</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-                <form id="generic-set-external-reference-modal-form" accept-charset="UTF-8"
+        <form
+          id="generic-set-external-reference-modal-form"
+          accept-charset="UTF-8"
           action="{{ current_object.url }}"
-                      data-remote="true" method="post">
+          data-remote="true"
+          method="post"
+        >
           {% csrf_token %}
-                    <label for="database-select">Select the Database you want to attach an External Reference
-                        for</label>
-                    <select id="database-select" name="selected-database" data-actions-box='true' class="form-control"
-                            data-width='100%'>
+          <label for="database-select"
+            >Select the Database you want to attach an External Reference
+            for</label
+          >
+          <select
+            id="database-select"
+            name="selected-database"
+            data-actions-box="true"
+            class="form-control"
+            data-width="100%"
+          >
             <option disabled selected>Select Database</option>
             {% for entity, databases in meta.external_databases.items %}
               {% if entity == object_type %}
                 {% for db in databases %}
-                                    <option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
-                                            value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
+                  <option
+                    id="db-select-{{ db.database.pk }}"
+                    data-input-placeholder="{{ db.placeholder }}"
+                    value="{{ db.database.id }}"
+                  >
+                    {{ db.database.name|safe }}
+                  </option>
+                  `
                 {% endfor %}
               {% endif %}
             {% endfor %}
@@ -32,30 +53,45 @@
           <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="">
+            <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>
+        <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 () {
-
     $("#database-select").on("change", function () {
       let selected = $(this).val();
-            $("#identifier").attr("placeholder", $('#db-select-' + selected).data('input-placeholder'));
+      $("#identifier").attr(
+        "placeholder",
+        $("#db-select-" + selected).data("input-placeholder"),
+      );
       $("#input-div").show();
     });
 
-        $('#generic-set-external-reference-modal-form-submit').click(function (e) {
+    $("#generic-set-external-reference-modal-form-submit").click(function (e) {
       e.preventDefault();
-            $('#generic-set-external-reference-modal-form').submit();
+      $("#generic-set-external-reference-modal-form").submit();
+    });
   });
-
-    })
 </script>

templates/modals/objects/generic_set_scenario_modal.html

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

templates/modals/objects/identify_missing_rules_modal.html

@@ -5,18 +5,33 @@
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Identify Missing Rules</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-                By clicking on Download we'll search the Pathway for Reactions that are not backed by
-                a Rule or which can be assembled by chaining two rules.
-                <form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
-                      data-remote="true" method="GET">
+        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.
+        <form
+          id="identify-missing-rules-modal-form"
+          accept-charset="UTF-8"
+          action="{{ pathway.url }}"
+          data-remote="true"
+          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%'>
+          <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 %}
@@ -35,20 +50,26 @@
         </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="identify-missing-rules-modal-submit">Download</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          id="identify-missing-rules-modal-submit"
+        >
+          Download
+        </button>
       </div>
     </div>
   </div>
 </div>
 <script>
   $(function () {
-
-        $('#identify-missing-rules-modal-submit').click(function (e) {
+    $("#identify-missing-rules-modal-submit").click(function (e) {
       e.preventDefault();
-            $('#identify-missing-rules-modal-form').submit();
-            $('#identify_missing_rules_modal').modal('hide');
+      $("#identify-missing-rules-modal-form").submit();
+      $("#identify_missing_rules_modal").modal("hide");
+    });
   });
-
-    })
 </script>

templates/modals/objects/manage_api_token_modal.html

@@ -1,35 +1,52 @@
-
-<div class="modal fade"
+<div
+  class="modal fade"
   tabindex="-1"
   id="manage_api_token_modal"
   role="dialog"
   aria-labelledby="manage_api_token_modal"
-     aria-hidden="true">
+  aria-hidden="true"
+>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button"
-                        class="close"
-                        data-dismiss="modal">
+        <button type="button" class="close" data-dismiss="modal">
           <span aria-hidden="true">&times;</span>
           <span class="sr-only">Close</span>
         </button>
         <h3 class="modal-title">Manage API Token</h3>
       </div>
       <div class="modal-body">
-                <p>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>
-                <form id="request_api_token_form"
+        <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>
+        <form
+          id="request_api_token_form"
           accept-charset="UTF-8"
           action=""
           data-remote="true"
-                      method="post">
+          method="post"
+        >
           {% csrf_token %}
           <p>
             <label for="token-name">Name</label>
-                        <input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
+            <input
+              type="text"
+              id="token-name"
+              class="form-control"
+              name="name"
+              placeholder="Generic Token for {{ meta.user.username }}"
+            />
             <label for="valid-for">Valid for (in days)</label>
-                        <input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
-                        <input type="hidden" name="hidden" value="request-api-token">
+            <input
+              type="number"
+              id="valid-for"
+              class="form-control"
+              name="valid-for"
+              value="90"
+            />
+            <input type="hidden" name="hidden" value="request-api-token" />
           </p>
         </form>
         <div id="new-token">
@@ -37,12 +54,23 @@
         </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">
+            <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>
+                <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>
@@ -52,12 +80,11 @@
         </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
+        <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>
@@ -65,15 +92,15 @@
 </div>
 <script>
   $(function () {
-    $('#new-token').hide()
+    $("#new-token").hide();
 
-    $('#manage_api_token_form_submit').on('click', function (e) {
+    $("#manage_api_token_form_submit").on("click", function (e) {
       e.preventDefault();
 
-        const formData = $('#request_api_token_form').serialize();
-        $.post('', formData, function(response) {
-            $('#new-token-pre').text(response.raw_token);
-            $('#new-token').show();
+      const formData = $("#request_api_token_form").serialize();
+      $.post("", formData, function (response) {
+        $("#new-token-pre").text(response.raw_token);
+        $("#new-token").show();
       });
     });
 
@@ -87,6 +114,5 @@ $(function() {
         form.remove();
       });
     });
-
   });
 </script>

templates/modals/objects/publish_package_modal.html

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

templates/modals/objects/retrain_model_modal.html

@@ -1,5 +1,11 @@
-<div class="modal fade" tabindex="-1" id="retrain_model_modal" role="dialog" aria-labelledby="retrain_model_modal"
-     aria-hidden="true">
+<div
+  class="modal fade"
+  tabindex="-1"
+  id="retrain_model_modal"
+  role="dialog"
+  aria-labelledby="retrain_model_modal"
+  aria-hidden="true"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
@@ -10,34 +16,40 @@
         <h4 class="modal-title">Retrain Model</h4>
       </div>
       <div class="modal-body">
-                <form id="retrain_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
-                      data-remote="true" method="post">
+        <form
+          id="retrain_model_form"
+          accept-charset="UTF-8"
+          action="{{ meta.current_object.url }}"
+          data-remote="true"
+          method="post"
+        >
           <div class="jumbotron">
-                        To reflect changes in the rule or data packages, you can use the "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.
+            To reflect changes in the rule or data packages, you can use the
+            "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="action" value="retrain">
+          <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>
+        <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 () {
-
-        $('#retrain_model_form_submit').on('click', function (e) {
+    $("#retrain_model_form_submit").on("click", function (e) {
       e.preventDefault();
-            $('#retrain_model_form').submit();
+      $("#retrain_model_form").submit();
     });
-
   });
-
 </script>

templates/modals/objects/set_license_modal.html

@@ -1,15 +1,15 @@
-<div class="modal fade"
+<div
+  class="modal fade"
   tabindex="-1"
   id="set_license_modal"
   role="dialog"
   aria-labelledby="set_license_modal"
-     aria-hidden="true">
+  aria-hidden="true"
+>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button"
-                        class="close"
-                        data-dismiss="modal">
+        <button type="button" class="close" data-dismiss="modal">
           <span aria-hidden="true">&times;</span>
           <span class="sr-only">Close</span>
         </button>
@@ -21,50 +21,99 @@
           <div class="col-md-9">
             <p>
               Set the license for all data in this package:
-                            <br> <br>
-                            (For more information please visit our <a target="#"
-                                                                      href="https://wiki.envipath.org/index.php/License">wiki</a>.)
+              <br />
+              <br />
+              (For more information please visit our
+              <a target="#" href="https://wiki.envipath.org/index.php/License"
+                >wiki</a
+              >.)
             </p>
           </div>
           <div class="col-md-3">
             <div id="ccfig"></div>
           </div>
         </div>
-                <form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
+        <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>
+              <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>
+                <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>
+                <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>
+                <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>
+              <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">
+          <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>
+        <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) {
     var ccstring = "by";
 
@@ -83,41 +132,41 @@ function ccstring(ccremix, ccnocom, ccalike){
   }
 
   function cc() {
-    var nocc = $('#noccradio').prop('checked')
-    var iscc = $('#ccradio').prop('checked');
+    var nocc = $("#noccradio").prop("checked");
+    var iscc = $("#ccradio").prop("checked");
 
     if (nocc) {
-        $('#ccradio').prop('checked', false);
-        $('#ccremix').prop('checked', false);
-        $('#ccnocom').prop('checked', false);
-        $('#ccalike').prop('checked', false);
+      $("#ccradio").prop("checked", false);
+      $("#ccremix").prop("checked", false);
+      $("#ccnocom").prop("checked", false);
+      $("#ccalike").prop("checked", false);
 
-        $('#ccremix').prop('disabled', true);
-        $('#ccnocom').prop('disabled', true);
-        $('#ccalike').prop('disabled', true);
+      $("#ccremix").prop("disabled", true);
+      $("#ccnocom").prop("disabled", true);
+      $("#ccalike").prop("disabled", true);
     } else if (iscc) {
-        $('#ccremix').prop('disabled', false);
-        $('#ccnocom').prop('disabled', false);
+      $("#ccremix").prop("disabled", false);
+      $("#ccnocom").prop("disabled", false);
 
-        if ($('#ccremix').prop('checked')) {
-            $('#ccalike').prop('disabled', false);
+      if ($("#ccremix").prop("checked")) {
+        $("#ccalike").prop("disabled", false);
       } else {
-            $('#ccalike').prop('disabled', true);
+        $("#ccalike").prop("disabled", true);
       }
     }
 
-    var remix = $('#ccremix').prop('checked');
-    var nocom = $('#ccnocom').prop('checked');
-    var alike = $('#ccalike').prop('checked');
+    var remix = $("#ccremix").prop("checked");
+    var nocom = $("#ccnocom").prop("checked");
+    var alike = $("#ccalike").prop("checked");
 
     if (nocc) {
-        $('#set_license_form_submit').prop('disabled', false);
-        $('#ccfig').empty();
-        $('#license').val('no-license')
+      $("#set_license_form_submit").prop("disabled", false);
+      $("#ccfig").empty();
+      $("#license").val("no-license");
     } else if (iscc) {
-        $('#set_license_form_submit').prop('disabled', false);
-        $('#ccfig').empty();
-        var ccstr = ccstring(remix, nocom, alike)
+      $("#set_license_form_submit").prop("disabled", false);
+      $("#ccfig").empty();
+      var ccstr = ccstring(remix, nocom, alike);
 
       var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
       var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
@@ -126,28 +175,24 @@ function cc() {
                        <img src='${imageLink}'>
                        </a>`;
 
-        $('#ccfig').append(img_tpl);
-        $('#license').val(ccstr);
-        $('#license-link').val(link);
-        $('#license-image-link').val(imageLink);
+      $("#ccfig").append(img_tpl);
+      $("#license").val(ccstr);
     } else {
-        $('#ccfig').empty();
-        $('#set_license_form_submit').prop('disabled', true);
-        $('#license').val('no-license')
+      $("#ccfig").empty();
+      $("#set_license_form_submit").prop("disabled", true);
+      $("#license").val("no-license");
     }
-
   }
 
   $(function () {
     // Disable by default as nothing is selected
 
     cc();
-    $('#set_license_form_submit').prop('disabled', true);
+    $("#set_license_form_submit").prop("disabled", true);
 
-     $('#set_license_form_submit').on('click', function (e) {
+    $("#set_license_form_submit").on("click", function (e) {
       e.preventDefault();
-        $('#set_license_form').submit();
+      $("#set_license_form").submit();
     });
   });
-
 </script>

templates/modals/objects/update_scenario_additional_information_modal.html

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

templates/modals/predict_modal.html

@@ -1,94 +1,157 @@
 {% load static %}
-<div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
-     role="dialog">
+<div
+  class="modal fade bs-modal-lg"
+  id="predict_modal"
+  tabindex="-1"
+  aria-labelledby="predict_modal"
+  aria-modal="true"
+  role="dialog"
+>
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <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">
+        <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"/>
+              <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"/>
+              <input
+                id="description"
+                class="form-control"
+                name="description"
+                placeholder="Description"
+              />
             </div>
             <div class="col-md-6">
               <label for="predict">Predict pathway or build yourself?</label>
               <div class="radio" id="predict">
                 <p>
                   <label>
-                                        <input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
-                                        pathway
+                    <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
+                    <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
+                    <input
+                      type="radio"
+                      name="predict"
+                      id="radioBuild"
+                      value="build"
+                    />Build pathway
                   </label>
                 </p>
               </div>
             </div>
           </div>
           <label for="predict-modal-smiles">SMILES</label>
-                    <input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
+          <input
+            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>
+            <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>
-                    <select id="prediction-setting" name="prediction-setting" class="form-control"
-                            data-width='100%'>
+          <select
+            id="prediction-setting"
+            name="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 }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
+              <option
+                value="{{ s.url }}"
+                {% if s.id == meta.user.default_setting.id %}selected{% endif %}
+              >
+                {{ s.name|safe }}{% if s.id == meta.user.default_setting.id %}
+                  <i>(User default)</i>
+                {% endif %}
               </option>
             {% endfor %}
           </select>
-
         </form>
       </div>
       <div class="modal-footer">
-                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
+        <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>
-                <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());
+    $("#predict-modal-smiles").val(this.ketcher.getSmiles());
   }
 
   $(function () {
-
-    $('#predict-modal-ketcher').on('load', function() {
+    $("#predict-modal-ketcher").on("load", function () {
       const checkKetcherReady = () => {
-            win = this.contentWindow
-            if (win.ketcher && 'editor' in win.ketcher) {
+        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
+            ketcher: win.ketcher,
           });
         } else {
           setTimeout(checkKetcherReady, 100);
@@ -96,9 +159,9 @@ $(function() {
       };
 
       checkKetcherReady();
-    })
+    });
 
-    $('#predictButton').on('click', function(e) {
+    $("#predictButton").on("click", function (e) {
       e.preventDefault();
       $(this).prop("disabled", true);
 
@@ -109,7 +172,7 @@ $(function() {
       // existing pws...
 
       // submit form
-        $('#predict_modal_form').submit();
+      $("#predict_modal_form").submit();
     });
   });
 </script>

templates/modals/search_modal.html

@@ -0,0 +1,686 @@
+{% load static %}
+<dialog id="search_modal" class="modal @max-sm:modal-top justify-center">
+  <div class="modal-box h-full w-lvw p-1 sm:h-8/12 sm:w-[85vw] sm:max-w-5xl">
+    <!-- Search Input and Mode Selector -->
+    <div class="form-control mb-4 w-full shrink-0">
+      <div class="join m-0 w-full items-center p-3">
+        <label class="input join-item input-ghost grow">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-search-icon lucide-search"
+          >
+            <path d="m21 21-4.34-4.34" />
+            <circle cx="11" cy="11" r="8" />
+          </svg>
+          <input
+            type="text"
+            autofocus
+            id="modal_searchbar"
+            placeholder="Benfuracarb"
+            class="grow"
+            aria-label="Search"
+          />
+        </label>
+
+        <!-- Mode Dropdown -->
+        <div>
+          <button
+            type="button"
+            tabindex="0"
+            id="modal_mode_button"
+            popovertarget="search_dropdown_menu"
+            style="anchor-name:--1"
+            class="btn join-item btn-ghost"
+          >
+            Text
+            <svg
+              class="ml-1 h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+          <ul
+            tabindex="0"
+            class="dropdown dropdown-end menu bg-base-200 rounded-box w-64 p-2 shadow-lg"
+            popover
+            id="search_dropdown_menu"
+            style="position-anchor:--anchor-2"
+          >
+            <li class="menu-title">Text</li>
+            <li>
+              <a
+                id="modal_dropdown_text"
+                class="tooltip tooltip-left"
+                data-tip="Search on object names and descriptions"
+              >
+                Text
+              </a>
+            </li>
+            <li class="menu-title">SMILES</li>
+            <li>
+              <a
+                id="modal_dropdown_smiles_default"
+                class="tooltip tooltip-left"
+                data-tip="Ignores stereochemistry and charge"
+              >
+                Default
+              </a>
+            </li>
+            <li>
+              <a
+                id="modal_dropdown_smiles_canonical"
+                class="tooltip tooltip-left"
+                data-tip="Ignores stereochemistry, preserves charge"
+              >
+                Canonical
+              </a>
+            </li>
+            <li>
+              <a
+                id="modal_dropdown_smiles_exact"
+                class="tooltip tooltip-left"
+                data-tip="Exact match for stereochemistry and charge"
+              >
+                Exact
+              </a>
+            </li>
+            <li class="menu-title">InChI</li>
+            <li>
+              <a
+                id="modal_dropdown_inchikey"
+                class="tooltip tooltip-left"
+                data-tip="Search by InChIKey"
+              >
+                InChIKey
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <button
+          type="button"
+          id="modal_search_button"
+          class="btn btn-xs btn-ghost join-item"
+        >
+          <kbd class="kbd kbd-sm text-base-content/50 p-1">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-corner-down-left-icon lucide-corner-down-left"
+            >
+              <path d="M20 4v7a4 4 0 0 1-4 4H4" />
+              <path d="m9 10-5 5 5 5" />
+            </svg>
+          </kbd>
+        </button>
+      </div>
+    </div>
+
+    <!-- Package Selector with Pills -->
+    <div class="form-control mb-4 shrink-0">
+      <!-- Pills Container -->
+      <div
+        id="modal_package_pills_container"
+        class="border-base-300 m-3 flex min-h-12 flex-wrap items-center gap-2 rounded-lg border-2 border-dashed p-3"
+      >
+        <!-- Pills will be added here dynamically -->
+      </div>
+
+      <!-- Package Dropdown Menu -->
+      <ul
+        class="dropdown dropdown-center menu bg-base-200 rounded-box max-h-96 w-80 overflow-y-auto p-2 shadow-lg"
+        popover
+        id="package_dropdown_menu"
+        style="position-anchor:--anchor-packages"
+      >
+        {% if unreviewed_packages %}
+          <li class="menu-title">Reviewed Packages</li>
+          {% for obj in reviewed_packages %}
+            <li>
+              <a
+                class="package-option flex items-center justify-between"
+                data-package-url="{{ obj.url }}"
+                data-package-name="{{ obj.name }}"
+              >
+                <span>{{ obj.name }}</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="package-checkmark hidden h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </a>
+            </li>
+          {% endfor %}
+          <li class="menu-title">Unreviewed Packages</li>
+          {% for obj in unreviewed_packages %}
+            <li>
+              <a
+                class="package-option flex items-center justify-between"
+                data-package-url="{{ obj.url }}"
+                data-package-name="{{ obj.name }}"
+              >
+                <span>{{ obj.name }}</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="package-checkmark hidden h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </a>
+            </li>
+          {% endfor %}
+        {% else %}
+          <li class="menu-title">Reviewed Packages</li>
+          {% for obj in reviewed_packages %}
+            <li>
+              <a
+                class="package-option flex items-center justify-between"
+                data-package-url="{{ obj.url }}"
+                data-package-name="{{ obj.name }}"
+              >
+                <span>{{ obj.name }}</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="package-checkmark hidden h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </a>
+            </li>
+          {% endfor %}
+        {% endif %}
+      </ul>
+    </div>
+
+    <!-- Loading Indicator -->
+    <div id="search_loading" class="hidden shrink-0 justify-center py-8">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+
+    <!-- Results Container - scrollable -->
+    <div id="search_results" class="min-h-0 flex-1 overflow-y-auto p-2"></div>
+  </div>
+
+  <!-- Backdrop to close -->
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+
+<script>
+  (function () {
+    // Package Selector Module - Data-driven multiselect package selection
+    const PackageSelector = {
+      // Single source of truth: array of selected packages
+      selectedPackages: [],
+
+      elements: {
+        pillsContainer: null,
+        packageDropdown: null,
+        packageOptions: null,
+      },
+
+      init() {
+        this.cacheElements();
+        this.loadInitialSelection();
+        this.attachEventListeners();
+        this.render();
+      },
+
+      cacheElements() {
+        this.elements.pillsContainer = document.getElementById(
+          "modal_package_pills_container",
+        );
+        this.elements.packageDropdown = document.getElementById(
+          "package_dropdown_menu",
+        );
+        this.elements.packageOptions =
+          document.querySelectorAll(".package-option");
+      },
+
+      loadInitialSelection() {
+        // Load pre-selected packages from server-rendered pills
+        const existingPills =
+          this.elements.pillsContainer.querySelectorAll(".badge");
+        existingPills.forEach((pill) => {
+          this.selectedPackages.push({
+            url: pill.dataset.packageUrl,
+            name: pill.dataset.packageName,
+          });
+        });
+
+        // If no pills found, select all reviewed packages by default
+        if (this.selectedPackages.length === 0) {
+          // Iterate through all menu items and collect reviewed packages
+          const menuItems =
+            this.elements.packageDropdown.querySelectorAll("li");
+
+          for (const item of menuItems) {
+            // Check if this is the "Unreviewed Packages" menu title
+            if (
+              item.classList.contains("menu-title") &&
+              item.textContent.trim() === "Unreviewed Packages"
+            ) {
+              break; // Stop processing after this point
+            }
+
+            // Check for package options (only reviewed packages reach here)
+            const packageOption = item.querySelector(".package-option");
+            if (packageOption) {
+              this.selectedPackages.push({
+                url: packageOption.dataset.packageUrl,
+                name: packageOption.dataset.packageName,
+              });
+            }
+          }
+        }
+      },
+
+      attachEventListeners() {
+        // Toggle package selection on dropdown item click
+        this.elements.packageOptions.forEach((option) => {
+          option.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation(); // Prevent dropdown from closing
+            const packageUrl = option.dataset.packageUrl;
+            const packageName = option.dataset.packageName;
+            this.togglePackageSelection(packageUrl, packageName);
+          });
+        });
+
+        // Remove package when X is clicked (using event delegation)
+        this.elements.pillsContainer.addEventListener("click", (e) => {
+          if (
+            e.target.classList.contains("package-remove-btn") ||
+            e.target.closest(".package-remove-btn")
+          ) {
+            const pill = e.target.closest(".badge");
+            if (pill) {
+              const packageUrl = pill.dataset.packageUrl;
+              this.removePackage(packageUrl);
+            }
+          }
+        });
+      },
+
+      togglePackageSelection(packageUrl, packageName) {
+        const index = this.selectedPackages.findIndex(
+          (pkg) => pkg.url === packageUrl,
+        );
+
+        if (index !== -1) {
+          // Remove from selection
+          this.selectedPackages.splice(index, 1);
+        } else {
+          // Add to selection
+          this.selectedPackages.push({ url: packageUrl, name: packageName });
+        }
+
+        this.render();
+      },
+
+      removePackage(packageUrl) {
+        const index = this.selectedPackages.findIndex(
+          (pkg) => pkg.url === packageUrl,
+        );
+        if (index !== -1) {
+          this.selectedPackages.splice(index, 1);
+          this.render();
+        }
+      },
+
+      render() {
+        this.renderPills();
+        this.renderAddButton();
+        this.renderCheckmarks();
+      },
+
+      renderPills() {
+        // Clear existing pills and button (except placeholder)
+        const pills = this.elements.pillsContainer.querySelectorAll(".badge");
+        pills.forEach((pill) => pill.remove());
+
+        const existingButton = this.elements.pillsContainer.querySelector(
+          "#modal_package_add_button",
+        );
+        if (existingButton) {
+          existingButton.remove();
+        }
+
+        // Create pills from data
+        this.selectedPackages.forEach((pkg) => {
+          const pill = this.createPillElement(pkg.url, pkg.name);
+          this.elements.pillsContainer.appendChild(pill);
+        });
+      },
+
+      renderAddButton() {
+        // Only render button if there are packages available
+        if (this.elements.packageOptions.length === 0) {
+          return;
+        }
+
+        const button = document.createElement("button");
+        button.type = "button";
+        button.id = "modal_package_add_button";
+        button.setAttribute("popovertarget", "package_dropdown_menu");
+        button.style.cssText = "anchor-name:--anchor-packages";
+        button.className = "btn btn-sm btn-ghost gap-2 text-base-content/50";
+
+        button.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+                Add Package
+            `;
+
+        this.elements.pillsContainer.appendChild(button);
+      },
+
+      createPillElement(packageUrl, packageName) {
+        const pill = document.createElement("span");
+        pill.className = "badge badge-outline gap-2 max-w-xs";
+        pill.dataset.packageUrl = packageUrl;
+        pill.dataset.packageName = packageName;
+
+        pill.innerHTML = `
+                <span class="truncate" title="${packageName}">${packageName}</span>
+
+                <svg xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 cursor-pointer hover:text-error package-remove-btn flex-shrink-0 rotate-45"
+                viewBox="0 0 24 24"
+                fill="none" stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                >
+                <path d="M5 12h14"/><path d="M12 5v14"/>
+                </svg>
+            `;
+
+        return pill;
+      },
+
+      renderCheckmarks() {
+        // Update all checkmarks based on selected packages
+        this.elements.packageOptions.forEach((option) => {
+          const packageUrl = option.dataset.packageUrl;
+          const isSelected = this.selectedPackages.some(
+            (pkg) => pkg.url === packageUrl,
+          );
+          const checkmark = option.querySelector(".package-checkmark");
+
+          if (checkmark) {
+            checkmark.classList.toggle("hidden", !isSelected);
+          }
+        });
+      },
+
+      getSelectedPackages() {
+        return this.selectedPackages.map((pkg) => pkg.url);
+      },
+    };
+
+    // Modal and Search Management
+    const modal = document.getElementById("search_modal");
+    const searchbar = document.getElementById("modal_searchbar");
+    const searchButton = document.getElementById("modal_search_button");
+    const modeButton = document.getElementById("modal_mode_button");
+    const resultsDiv = document.getElementById("search_results");
+    const loadingDiv = document.getElementById("search_loading");
+
+    // MutationObserver to detect when modal opens
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "open" && modal.open) {
+          PackageSelector.render();
+          // Delay focus to allow CSS transitions to complete (modal has 0.3s transition)
+          setTimeout(() => {
+            searchbar.focus();
+          }, 320);
+        }
+      });
+    });
+
+    observer.observe(modal, { attributes: true });
+
+    // Close modal when clicking outside (on the backdrop)
+    // According to DaisyUI docs: https://daisyui.com/components/modal/
+    // The backdrop form with method="dialog" should handle closing automatically when its button is clicked.
+    // We also handle clicks directly on the dialog element (backdrop area) or the backdrop form.
+    modal.addEventListener("click", function (event) {
+      const backdrop = modal.querySelector(".modal-backdrop");
+      const modalBox = modal.querySelector(".modal-box");
+
+      // Close if clicking directly on the dialog element (backdrop area)
+      // or on the backdrop form (but ensure we're not clicking on modal-box content)
+      if (
+        event.target === modal ||
+        (backdrop &&
+          (event.target === backdrop || backdrop.contains(event.target)) &&
+          !modalBox.contains(event.target))
+      ) {
+        modal.close();
+      }
+    });
+
+    // Clear results when modal closes
+    modal.addEventListener("close", function () {
+      resultsDiv.innerHTML = "";
+      loadingDiv.classList.add("hidden");
+      searchbar.value = "";
+    });
+
+    // Mode dropdown handlers
+    const dropdownMenu = document.getElementById("search_dropdown_menu");
+
+    const modeButtons = [
+      { id: "modal_dropdown_text", text: "Text" },
+      { id: "modal_dropdown_smiles_default", text: "Default" },
+      { id: "modal_dropdown_smiles_canonical", text: "Canonical" },
+      { id: "modal_dropdown_smiles_exact", text: "Exact" },
+      { id: "modal_dropdown_inchikey", text: "InChIKey" },
+    ];
+
+    modeButtons.forEach(({ id, text }) => {
+      document.getElementById(id).addEventListener("click", function (e) {
+        e.preventDefault();
+        modeButton.innerHTML =
+          text +
+          ` <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>`;
+        // Close dropdown using popover API
+        if (dropdownMenu && typeof dropdownMenu.hidePopover === "function") {
+          dropdownMenu.hidePopover();
+        }
+      });
+    });
+
+    // Initialize Package Selector
+    PackageSelector.init();
+
+    // Search Response Handler
+    function handleSearchResponse(data) {
+      resultsDiv.innerHTML = "";
+
+      function makeContent(objs) {
+        let links = "";
+        objs.forEach((obj) => {
+          links += `<a href="${obj.url}" class="block px-4 py-2 hover:bg-base-300 rounded-lg transition-colors">${obj.name}</a>`;
+        });
+        return links;
+      }
+
+      let allEmpty = true;
+      let content = "";
+
+      // Category order for better UX
+      const categoryOrder = [
+        "Compounds",
+        "Compound Structures",
+        "Rules",
+        "Reactions",
+        "Pathways",
+      ];
+
+      categoryOrder.forEach((key) => {
+        if (!data[key] || data[key].length < 1) {
+          return;
+        }
+        allEmpty = false;
+
+        content += `
+                <div class="collapse collapse-arrow bg-base-200 mb-2">
+                    <input type="checkbox" checked />
+                    <div class="collapse-title font-medium">
+                        ${key} <span class="badge badge-neutral badge-sm ml-2">${data[key].length}</span>
+                    </div>
+                    <div class="collapse-content">
+                        ${makeContent(data[key])}
+                    </div>
+                </div>
+            `;
+      });
+
+      if (allEmpty) {
+        resultsDiv.innerHTML = `
+                <div class="alert alert-warning">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                    </svg>
+                    <span>No results found</span>
+                </div>
+            `;
+      } else {
+        resultsDiv.innerHTML = `
+                <div class="mb-2">
+                    <div class="text-sm font-semibold text-base-content/70 mb-2">Results</div>
+                    ${content}
+                </div>
+            `;
+      }
+    }
+
+    // Search Execution
+    function performSearch(e) {
+      e.preventDefault();
+
+      const query = searchbar.value.trim();
+
+      if (!query) {
+        console.log("Search phrase empty, won't do search");
+        return;
+      }
+
+      const selPacks = PackageSelector.getSelectedPackages();
+
+      if (selPacks.length < 1) {
+        console.log("No package selected, won't do search");
+        resultsDiv.innerHTML = `
+                <div class="alert alert-info">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <span>Please select at least one package</span>
+                </div>
+            `;
+        return;
+      }
+
+      const mode = modeButton.textContent.trim().toLowerCase();
+
+      const params = new URLSearchParams();
+      selPacks.forEach((pack) => params.append("packages", pack));
+      params.append("search", query);
+      params.append("mode", mode);
+
+      // Show loading
+      loadingDiv.classList.remove("hidden");
+      resultsDiv.innerHTML = "";
+
+      fetch(`{{ SERVER_BASE }}/search?${params.toString()}`, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Search request failed");
+          }
+          return response.json();
+        })
+        .then((result) => {
+          loadingDiv.classList.add("hidden");
+          handleSearchResponse(result);
+        })
+        .catch((error) => {
+          loadingDiv.classList.add("hidden");
+          console.error("Search error:", error);
+          resultsDiv.innerHTML = `
+                <div class="alert alert-error">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <span>Search failed. Please try again.</span>
+                </div>
+            `;
+        });
+    }
+
+    // Event listeners for search
+    searchButton.addEventListener("click", performSearch);
+    searchbar.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        performSearch(e);
+      }
+    });
+  })();
+</script>