Merge branch 'develop' into fix/frontpage_predict

Modal now opens on badge click.
Modal now closes on random click around

Reviewed-on: enviPath/enviPy#192
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

epdb/admin.py

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

epdb/management/commands/bootstrap.py

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

epdb/migrations/0010_license_cc_string.py

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

epdb/migrations/0011_auto_20251111_1413.py

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

epdb/models.py

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

epdb/tasks.py

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

epdb/views.py

@@ -955,6 +955,12 @@ def package_model(request, package_uuid, model_uuid):
                 ]
                 dispatch(current_user, evaluate_model, current_model.pk, multigen, eval_package_ids)
 
+                return redirect(current_model.url)
+            elif hidden == "retrain":
+                from .tasks import dispatch, retrain
+
+                dispatch(current_user, retrain, current_model.pk)
+
                 return redirect(current_model.url)
             else:
                 return HttpResponseBadRequest()
@@ -1084,9 +1090,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
@@ -1114,24 +1118,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)

templates/framework_modern.html

@@ -178,6 +178,23 @@
         }
       });
 
+      // Open search modal function
+      function openSearchModal() {
+        const searchModal = document.getElementById("search_modal");
+        if (searchModal) {
+          searchModal.showModal();
+        }
+      }
+
+      // Click handler for search badge
+      const searchTrigger = document.getElementById("search-trigger");
+      if (searchTrigger) {
+        searchTrigger.addEventListener("click", function (event) {
+          event.preventDefault();
+          openSearchModal();
+        });
+      }
+
       // Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
       document.addEventListener("keydown", function (event) {
         // Check if user is typing in an input field
@@ -198,7 +215,7 @@
 
         if (isCorrectModifier && event.key === "k") {
           event.preventDefault();
-          search_modal.showModal();
+          openSearchModal();
         }
       });
     </script>

templates/includes/navbar.html

@@ -57,7 +57,7 @@
 
   <div class="navbar-end">
     {% if not public_mode %}
-      <a href="/search" role="button">
+      <a id="search-trigger" role="button" class="cursor-pointer">
         <div
           class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
         >

templates/index/index.html

@@ -2,36 +2,38 @@
 {% load static %}
 {% block main_content %}
   <!-- Hero Section with Logo and Search -->
-  <section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
+  <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
     <div
-      class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
+      class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
       style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
     >
       <div class="hero-overlay"></div>
       <!-- Predict Pathway text over the image -->
-      <div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
-        <h2 class="text-3xl text-base-100 text-shadow-lg text-left">
+      <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 "
+      class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
     >
       <div
-        class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out"
+        class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
       >
         <div class="card-body">
-          <!-- Input Mode Toggle - Fixed position outside fieldset -->
-          <div class="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" />
+                <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"
@@ -52,6 +54,13 @@
                         />
                       </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"
@@ -64,12 +73,15 @@
                         d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
                       />
                     </svg>
+                  </div>
+                  <span class="text-base/50 text-xs">Draw</span>
+                </span>
               </label>
             </div>
           </div>
 
           <fieldset
-            class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
+            class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
           >
             <form
               id="index-form"
@@ -79,29 +91,29 @@
               {% csrf_token %}
               <div
                 id="text-input-container"
-                class="transition-all duration-300 ease-in-out opacity-100 transform scale-100"
+                class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
               >
-                <div class="join w-full mx-auto">
+                <div class="join mx-auto w-full">
                   <input
                     type="text"
                     id="index-form-text-input"
                     placeholder="canonical SMILES string"
-                    class="input grow input-md join-item"
+                    class="input input-md join-item grow"
                   />
                   <button class="btn btn-neutral join-item">Predict!</button>
                 </div>
-                <div class="label relative w-full mt-1">
+                <div class="label relative mt-1 w-full">
                   <div class="flex gap-2">
                     <a
                       href="#"
-                      class="example-link cursor-pointer hover:text-primary"
+                      class="example-link hover:text-primary cursor-pointer"
                       data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
                       title="load example"
                       >Caffeine</a
                     >
                     <a
                       href="#"
-                      class="example-link cursor-pointer hover:text-primary"
+                      class="example-link hover:text-primary cursor-pointer"
                       data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
                       title="load example"
                       >Ibuprofen</a
@@ -114,7 +126,7 @@
               </div>
               <div
                 id="ketcher-container"
-                class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95"
+                class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
               >
                 <iframe
                   id="index-ketcher"
@@ -124,11 +136,13 @@
                   class="rounded-lg"
                 ></iframe>
                 <button
-                  class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2"
+                  class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
                 >
                   Predict!
                 </button>
-                <a class="label mx-auto w-full mt-1" href="#">Advanced</a>
+                <div class="mt-1 flex w-full justify-end">
+                  <a class="label justify-end" href="/predict">Advanced</a>
+                </div>
               </div>
               <input
                 type="hidden"
@@ -150,18 +164,18 @@
     </div>
 
     <!-- Community News Section -->
-    <section class="py-16 bg-base-200 z-10 mx-8">
-      <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">
+        <div class="mt-6 text-right">
           <a
             href="https://community.envipath.org/c/announcements/10"
             target="_blank"
@@ -177,18 +191,18 @@
     </section>
 
     <!-- Mission Statement Section -->
-    <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
+    <section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
       <div class="mx-auto px-8 md:px-12">
         <div class="flex flex-row gap-4">
           <div class="w-1/3">
             <img
               src="{% static "/images/ep-rule-artwork.png" %}"
               alt="rule-based iterative tree greneration"
-              class="w-full h-full object-contain"
+              class="h-full w-full object-contain"
             />
           </div>
-          <div class="space-y-4 text-left w-2/3 mr-8">
-            <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
@@ -201,7 +215,7 @@
               products. Explore our tools and contribute to advancing
               environmental biotransformation research.
             </p>
-            <div class="flex flex-row gap-4 float-right">
+            <div class="float-right flex flex-row gap-4">
               <a href="/about" class="btn btn-ghost-neutral">Read More</a>
               <a href="/about" class="btn btn-neutral">Publications</a>
             </div>
@@ -211,7 +225,7 @@
     </section>
 
     <!-- Partners Section -->
-    <section class="py-14 sm:py-12 bg-base-100">
+    <section class="bg-base-100 py-14 sm:py-12">
       <div class="mx-auto px-6 lg:px-8">
         <div class="divider">
           <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
@@ -222,12 +236,12 @@
           <img
             src="{% static "/images/uoa-logo-small.png" %}"
             alt="The University of Auckland"
-            class=" max-h-20 w-full object-contain lg:col-span-1"
+            class="max-h-20 w-full object-contain lg:col-span-1"
           />
           <img
             src="{% static "/images/logo-eawag.svg" %}"
             alt="Eawag"
-            class=" max-h-12 w-full object-contain lg:col-span-1"
+            class="max-h-12 w-full object-contain lg:col-span-1"
           />
           <img
             src="{% static "/images/uzh-logo.svg" %}"

templates/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

@@ -52,8 +52,6 @@
                         </div>
                     </div>
                     <input type="hidden" id="license" name="license">
-                    <input type="hidden" id="license-link" name="license-link">
-                    <input type="hidden" id="license-image-link" name="license-image-link">
                 </form>
             </div>
             <div class="modal-footer">
@@ -128,8 +126,6 @@ function cc() {
 
         $('#ccfig').append(img_tpl);
         $('#license').val(ccstr);
-        $('#license-link').val(link);
-        $('#license-image-link').val(imageLink);
     } else {
         $('#ccfig').empty();
         $('#set_license_form_submit').prop('disabled', true);

templates/modals/search_modal.html

@@ -1,105 +1,184 @@
 {% load static %}
 <dialog id="search_modal" class="modal @max-sm:modal-top justify-center">
-    <div class="modal-box w-lvw sm:w-[85vw] sm:max-w-5xl h-full sm:h-8/12 p-1" >
-
+  <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 flex-shrink-0 w-full">
-            <div class="join w-full m-0 p-3 items-center">
+    <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
+          <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" />
+            class="grow"
+            aria-label="Search"
+          />
         </label>
 
         <!-- Mode Dropdown -->
         <div>
-                    <button type="button"
+          <button
+            type="button"
             tabindex="0"
             id="modal_mode_button"
-                            popovertarget="search_dropdown_menu" style="anchor-name:--anchor-1"
-                            class="btn join-item btn-ghost">
+            popovertarget="search_dropdown_menu"
+            style="anchor-name:--1"
+            class="btn join-item btn-ghost"
+          >
             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
+              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  z-[100] w-64 p-2 shadow-lg" popover id="search_dropdown_menu" style="position-anchor:--anchor-1">
+          <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"
+              <a
+                id="modal_dropdown_text"
                 class="tooltip tooltip-left"
-                               data-tip="Search on object names and descriptions">
+                data-tip="Search on object names and descriptions"
+              >
                 Text
               </a>
             </li>
             <li class="menu-title">SMILES</li>
             <li>
-                            <a id="modal_dropdown_smiles_default"
+              <a
+                id="modal_dropdown_smiles_default"
                 class="tooltip tooltip-left"
-                               data-tip="Ignores stereochemistry and charge">
+                data-tip="Ignores stereochemistry and charge"
+              >
                 Default
               </a>
             </li>
             <li>
-                            <a id="modal_dropdown_smiles_canonical"
+              <a
+                id="modal_dropdown_smiles_canonical"
                 class="tooltip tooltip-left"
-                               data-tip="Ignores stereochemistry, preserves charge">
+                data-tip="Ignores stereochemistry, preserves charge"
+              >
                 Canonical
               </a>
             </li>
             <li>
-                            <a id="modal_dropdown_smiles_exact"
+              <a
+                id="modal_dropdown_smiles_exact"
                 class="tooltip tooltip-left"
-                               data-tip="Exact match for stereochemistry and charge">
+                data-tip="Exact match for stereochemistry and charge"
+              >
                 Exact
               </a>
             </li>
             <li class="menu-title">InChI</li>
             <li>
-                            <a id="modal_dropdown_inchikey"
+              <a
+                id="modal_dropdown_inchikey"
                 class="tooltip tooltip-left"
-                               data-tip="Search by InChIKey">
+                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 p-1 text-base-content/50">
-                        <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>
+        <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 flex-shrink-0">
+    <div class="form-control mb-4 shrink-0">
       <!-- Pills Container -->
-            <div id="modal_package_pills_container"
-                 class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-base-300 rounded-lg m-3 min-h-[3rem] items-center">
+      <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-end menu bg-base-200 rounded-box z-[100] w-80 max-h-96 overflow-y-auto p-2 shadow-lg"
+      <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">
+        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 justify-between items-center"
+              <a
+                class="package-option flex items-center justify-between"
                 data-package-url="{{ obj.url }}"
-                           data-package-name="{{ obj.name }}">
+                data-package-name="{{ obj.name }}"
+              >
                 <span>{{ obj.name }}</span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" 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
+                  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>
@@ -107,12 +186,25 @@
           <li class="menu-title">Unreviewed Packages</li>
           {% for obj in unreviewed_packages %}
             <li>
-                        <a class="package-option flex justify-between items-center"
+              <a
+                class="package-option flex items-center justify-between"
                 data-package-url="{{ obj.url }}"
-                           data-package-name="{{ obj.name }}">
+                data-package-name="{{ obj.name }}"
+              >
                 <span>{{ obj.name }}</span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" 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
+                  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>
@@ -121,12 +213,25 @@
           <li class="menu-title">Reviewed Packages</li>
           {% for obj in reviewed_packages %}
             <li>
-                        <a class="package-option flex justify-between items-center"
+              <a
+                class="package-option flex items-center justify-between"
                 data-package-url="{{ obj.url }}"
-                           data-package-name="{{ obj.name }}">
+                data-package-name="{{ obj.name }}"
+              >
                 <span>{{ obj.name }}</span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 package-checkmark hidden" 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
+                  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>
@@ -136,12 +241,12 @@
     </div>
 
     <!-- Loading Indicator -->
-        <div id="search_loading" class="hidden justify-center py-8 flex-shrink-0">
+    <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="flex-1 overflow-y-auto min-h-0 p-2"></div>
+    <div id="search_results" class="min-h-0 flex-1 overflow-y-auto p-2"></div>
   </div>
 
   <!-- Backdrop to close -->
@@ -151,7 +256,7 @@
 </dialog>
 
 <script>
-(function() {
+  (function () {
     // Package Selector Module - Data-driven multiselect package selection
     const PackageSelector = {
       // Single source of truth: array of selected packages
@@ -160,7 +265,7 @@
       elements: {
         pillsContainer: null,
         packageDropdown: null,
-            packageOptions: null
+        packageOptions: null,
       },
 
       init() {
@@ -171,39 +276,48 @@
       },
 
       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');
+        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 => {
+        const existingPills =
+          this.elements.pillsContainer.querySelectorAll(".badge");
+        existingPills.forEach((pill) => {
           this.selectedPackages.push({
             url: pill.dataset.packageUrl,
-                    name: pill.dataset.packageName
+            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');
+          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') {
+            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');
+            const packageOption = item.querySelector(".package-option");
             if (packageOption) {
               this.selectedPackages.push({
                 url: packageOption.dataset.packageUrl,
-                            name: packageOption.dataset.packageName
+                name: packageOption.dataset.packageName,
               });
             }
           }
@@ -212,8 +326,8 @@
 
       attachEventListeners() {
         // Toggle package selection on dropdown item click
-            this.elements.packageOptions.forEach(option => {
-                option.addEventListener('click', (e) => {
+        this.elements.packageOptions.forEach((option) => {
+          option.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation(); // Prevent dropdown from closing
             const packageUrl = option.dataset.packageUrl;
@@ -223,9 +337,12 @@
         });
 
         // 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');
+        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);
@@ -235,7 +352,9 @@
       },
 
       togglePackageSelection(packageUrl, packageName) {
-            const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
+        const index = this.selectedPackages.findIndex(
+          (pkg) => pkg.url === packageUrl,
+        );
 
         if (index !== -1) {
           // Remove from selection
@@ -249,7 +368,9 @@
       },
 
       removePackage(packageUrl) {
-            const index = this.selectedPackages.findIndex(pkg => pkg.url === packageUrl);
+        const index = this.selectedPackages.findIndex(
+          (pkg) => pkg.url === packageUrl,
+        );
         if (index !== -1) {
           this.selectedPackages.splice(index, 1);
           this.render();
@@ -264,16 +385,18 @@
 
       renderPills() {
         // Clear existing pills and button (except placeholder)
-            const pills = this.elements.pillsContainer.querySelectorAll('.badge');
-            pills.forEach(pill => pill.remove());
+        const pills = this.elements.pillsContainer.querySelectorAll(".badge");
+        pills.forEach((pill) => pill.remove());
 
-            const existingButton = this.elements.pillsContainer.querySelector('#modal_package_add_button');
+        const existingButton = this.elements.pillsContainer.querySelector(
+          "#modal_package_add_button",
+        );
         if (existingButton) {
           existingButton.remove();
         }
 
         // Create pills from data
-            this.selectedPackages.forEach(pkg => {
+        this.selectedPackages.forEach((pkg) => {
           const pill = this.createPillElement(pkg.url, pkg.name);
           this.elements.pillsContainer.appendChild(pill);
         });
@@ -285,12 +408,12 @@
           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';
+        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>
@@ -301,8 +424,8 @@
       },
 
       createPillElement(packageUrl, packageName) {
-            const pill = document.createElement('span');
-            pill.className = 'badge badge-outline gap-2 max-w-xs';
+        const pill = document.createElement("span");
+        pill.className = "badge badge-outline gap-2 max-w-xs";
         pill.dataset.packageUrl = packageUrl;
         pill.dataset.packageName = packageName;
 
@@ -326,35 +449,36 @@
 
       renderCheckmarks() {
         // Update all checkmarks based on selected packages
-            this.elements.packageOptions.forEach(option => {
+        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');
+          const isSelected = this.selectedPackages.some(
+            (pkg) => pkg.url === packageUrl,
+          );
+          const checkmark = option.querySelector(".package-checkmark");
 
           if (checkmark) {
-                    checkmark.classList.toggle('hidden', !isSelected);
+            checkmark.classList.toggle("hidden", !isSelected);
           }
         });
       },
 
-
       getSelectedPackages() {
-            return this.selectedPackages.map(pkg => pkg.url);
-        }
+        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');
+    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) {
+        if (mutation.attributeName === "open" && modal.open) {
           PackageSelector.render();
           // Delay focus to allow CSS transitions to complete (modal has 0.3s transition)
           setTimeout(() => {
@@ -366,33 +490,54 @@
 
     observer.observe(modal, { attributes: true });
 
-    // Clear results when modal closes
-    modal.addEventListener('close', function() {
-        resultsDiv.innerHTML = '';
-        loadingDiv.classList.add('hidden');
-        searchbar.value = '';
+    // 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 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' }
+      { 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) {
+      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">
+        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') {
+        if (dropdownMenu && typeof dropdownMenu.hidePopover === "function") {
           dropdownMenu.hidePopover();
         }
       });
@@ -403,23 +548,29 @@
 
     // Search Response Handler
     function handleSearchResponse(data) {
-        resultsDiv.innerHTML = '';
+      resultsDiv.innerHTML = "";
 
       function makeContent(objs) {
-            let links = '';
-            objs.forEach(obj => {
+        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 = '';
+      let content = "";
 
       // Category order for better UX
-        const categoryOrder = ['Compounds', 'Compound Structures', 'Rules', 'Reactions', 'Pathways'];
+      const categoryOrder = [
+        "Compounds",
+        "Compound Structures",
+        "Rules",
+        "Reactions",
+        "Pathways",
+      ];
 
-        categoryOrder.forEach(key => {
+      categoryOrder.forEach((key) => {
         if (!data[key] || data[key].length < 1) {
           return;
         }
@@ -464,14 +615,14 @@
       const query = searchbar.value.trim();
 
       if (!query) {
-            console.log('Search phrase empty, won\'t do search');
+        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');
+        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">
@@ -486,33 +637,33 @@
       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);
+      selPacks.forEach((pack) => params.append("packages", pack));
+      params.append("search", query);
+      params.append("mode", mode);
 
       // Show loading
-        loadingDiv.classList.remove('hidden');
-        resultsDiv.innerHTML = '';
+      loadingDiv.classList.remove("hidden");
+      resultsDiv.innerHTML = "";
 
       fetch(`{{ SERVER_BASE }}/search?${params.toString()}`, {
-            method: 'GET',
+        method: "GET",
         headers: {
-                'Accept': 'application/json'
-            }
+          Accept: "application/json",
+        },
       })
-        .then(response => {
+        .then((response) => {
           if (!response.ok) {
-                throw new Error('Search request failed');
+            throw new Error("Search request failed");
           }
           return response.json();
         })
-        .then(result => {
-            loadingDiv.classList.add('hidden');
+        .then((result) => {
+          loadingDiv.classList.add("hidden");
           handleSearchResponse(result);
         })
-        .catch(error => {
-            loadingDiv.classList.add('hidden');
-            console.error('Search error:', error);
+        .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">
@@ -525,11 +676,11 @@
     }
 
     // Event listeners for search
-    searchButton.addEventListener('click', performSearch);
-    searchbar.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter') {
+    searchButton.addEventListener("click", performSearch);
+    searchbar.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
         performSearch(e);
       }
     });
-})();
+  })();
 </script>

templates/search.html

@@ -1,197 +0,0 @@
-{% extends "framework.html" %}
-{% load static %}
-{% block content %}
-
-    <div id=searchContent>
-        <div id="packSelector">
-            <label>Select Packages</label><br>
-            <select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
-                    data-width='100%'>
-                {% if unreviewed_objects %}
-                    <option disabled>Reviewed Packages</option>
-                {% endif %}
-                {% for obj in reviewed_objects %}
-                    <option value="{{ obj.url }}" selected>{{ obj.name|safe }}</option>
-                {% endfor %}
-                {% if unreviewed_objects %}
-                    <option disabled>Unreviewed Packages</option>
-                {% endif %}
-                {% for obj in unreviewed_objects %}
-                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <p></p>
-        <div>
-            <label>Search Term</label><br>
-            <div class="input-group" id="index-form-bar">
-                <input type="text" class="form-control" id='searchbar' placeholder="Benfuracarb">
-                <div class="input-group-btn">
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                            id="mode-button"
-                            aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
-                    <ul class="dropdown-menu">
-                        <li class="dropdown-header">Text</li>
-                        <li><a id="dropdown-predict-text-text">Text</a></li>
-                        <li class="dropdown-header">SMILES</li>
-                        <li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
-                        <li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
-                        <li><a id="dropdown-search-smiles-exact">Exact</a></li>
-                        <li class="dropdown-header">InChI</li>
-                        <li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
-                    </ul>
-                    <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="search-button">
-                        Go!
-                    </button>
-                </div>
-            </div>
-            <p></p>
-            <div id="results"></div>
-            <p></p>
-            <div id="loading"></div>
-        </div>
-    </div>
-    <script>
-        function modeDropdownClicked() {
-            var suffix = ' <span class="caret"></span>';
-            var dropdownVal = $(this).text();
-            $('#mode-button').html(dropdownVal + suffix);
-        }
-
-        function handleSearchResponse(id, data) {
-            content = `
-                <div class='panel-group' id='search-accordion'>
-                    <div class='panel panel-default'>
-                        <div class='panel-heading' id='headingPanel' style='font-size:2rem;height: 46px'>
-                        Results
-                        </div>
-                        <div id='descDiv'></div>
-                    </div>`;
-
-            function makeContent(objs) {
-                links = "";
-                for (idx in objs) {
-                    obj = objs[idx];
-                    links += `<a class='list-group-item' href='${obj.url}'>${obj.name}</a>`
-                }
-                return links;
-            }
-
-            allEmpty = true;
-            for (key in data) {
-                if (key === 'searchterm') {
-                    continue;
-                }
-
-                if (data[key].length < 1) {
-                    continue;
-                }
-                allEmpty = false;
-                content += `
-                    <div class='panel panel-default panel-heading list-group-item' style='background-color:silver'>
-                        <h4 class='panel-title'>
-                            <a id='${key}_link' data-toggle='collapse' data-parent='#search-accordion' href='#${key}_panel'>
-                                ${key}
-                            </a>
-                        </h4>
-                    </div>
-                    <div id='${key}_panel' class='panel-collapse collapse in'>
-                        <div class='panel-body list-group-item'>
-                        ${makeContent(data[key])}
-                        </div>
-                    </div>
-
-        `;
-            }
-            if (allEmpty) {
-                $('#' + id).append('<div class="alert alert-danger" role="alert"><p>' + "No results..." + '</p></div>');
-            } else {
-                $('#' + id).append(content);
-            }
-        }
-
-        function search(e) {
-            e.preventDefault();
-
-            query = $("#searchbar").val()
-
-            if (!query) {
-                // Nothing to search...
-                console.log("Search phrase empty, won't do search")
-                return;
-            }
-
-            var selPacks = [];
-            $("#selPackages :selected").each(function () {
-                var id = this.value;
-                selPacks.push(id);
-            });
-
-            if (selPacks.length < 1) {
-                console.log("No package selected, won't do search")
-                return;
-            }
-
-            var mode = $('#mode-button').text().trim().toLowerCase();
-
-            var par = {};
-            par['packages'] = selPacks;
-            par['search'] = query;
-            par['mode'] = mode;
-
-            console.log(par);
-
-            var queryString = $.param(par, true);
-
-            makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
-
-            $("#results").empty();
-
-            $.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
-                handleSearchResponse("results", result);
-                $("#loading").empty();
-            }).fail(function (d) {
-                $("#loading").empty();
-                console.log(d.responseText);
-                handleError(JSON.parse(d.responseText));
-            });
-        }
-
-
-        $(function () {
-
-            tooltips = {
-                'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
-                'dropdown-search-smiles-default': 'Search by SMILES, stereochemistry and charge are ignored',
-                'dropdown-search-smiles-canonical': 'Search by SMILES, stereochemistry is ignored but charge is preserved',
-                'dropdown-search-smiles-exact': 'Search by SMILES, exact match for stereochemistry and charge',
-                'dropdown-search-inchi-inchikey': 'Search by InChIKey',
-            }
-
-            Object.keys(tooltips).forEach(key => {
-                $('#' + key).tooltip({
-                    placement: "top",
-                    title: tooltips[key]
-                });
-
-                $('#' + key).on('click', modeDropdownClicked);
-            });
-
-            $("#selPackages").selectpicker();
-            $("#search-button").on("click", search);
-
-            $("#searchbar").on("keydown", function (e) {
-                if (e.key === "Enter") {
-                    e.preventDefault();
-                    search(e);
-                }
-            });
-
-        });
-        {% if search_result %}
-            $('#searchbar').val('{{ search_result.searchterm }}')
-            handleSearchResponse("results", {{ search_result|safe }});
-        {% endif %}
-    </script>
-
-{% endblock content %}

tests/views/test_package_views.py

@@ -4,7 +4,14 @@ from django.test import TestCase, tag
 from django.urls import reverse
 
 from epdb.logic import UserManager
-from epdb.models import Package, UserPackagePermission, Permission, GroupPackagePermission, Group
+from epdb.models import (
+    Package,
+    UserPackagePermission,
+    Permission,
+    GroupPackagePermission,
+    Group,
+    License,
+)
 
 
 class PackageViewTest(TestCase):
@@ -29,6 +36,15 @@ class PackageViewTest(TestCase):
             add_to_group=True,
             is_active=True,
         )
+        # Create the default license set.
+        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 setUp(self):
         self.client.force_login(self.user1)
@@ -188,7 +204,28 @@ class PackageViewTest(TestCase):
         self.client.post(package_url, {"license": "no-license"})
 
         self.assertIsNone(p.license)
-        # TODO test others
+
+        # Test other possible licenses
+        cc_strings = ["by", "by-nc", "by-nc-nd", "by-nc-sa", "by-nd", "by-sa"]
+        for cc_string in cc_strings:
+            self.client.post(package_url, {"license": cc_string})
+            # Without this, the instance of p doesn't have the license. However, the one retrieved with get does
+            p = Package.objects.get(url=package_url)
+            self.assertEqual(
+                p.license.link, f"https://creativecommons.org/licenses/{cc_string}/4.0/"
+            )
+
+        # Test again to ensure that Licenses are reused
+        cc_strings = ["by", "by-nc", "by-nc-nd", "by-nc-sa", "by-nd", "by-sa"]
+        for cc_string in cc_strings:
+            self.client.post(package_url, {"license": cc_string})
+            # Without this, the instance of p doesn't have the license. However, the one retrieved with get does
+            p = Package.objects.get(url=package_url)
+            self.assertEqual(
+                p.license.link, f"https://creativecommons.org/licenses/{cc_string}/4.0/"
+            )
+
+        self.assertEqual(License.objects.count(), len(cc_strings))
 
     def test_delete_package(self):
         response = self.client.post(

utilities/misc.py

@@ -714,6 +714,7 @@ class PackageImporter:
             license_obj, _ = License.objects.get_or_create(
                 name=license_data["name"],
                 defaults={
+                    "cc_string": license_data.get("cc_string", ""),
                     "link": license_data.get("link", ""),
                     "image_link": license_data.get("image_link", ""),
                 },