mrg

epdb/urls.py

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

epdb/views.py

@@ -374,6 +374,22 @@ def predict_pathway(request):
     return render(request, "predict_pathway.html", context)
 
 
+@package_permission_required()
+def package_predict_pathway(request, package_uuid):
+    """Package-specific predict pathway view."""
+    if request.method != "GET":
+        return HttpResponseNotAllowed(["GET"])
+
+    current_user = _anonymous_or_real(request)
+    current_package = PackageManager.get_package_by_id(current_user, package_uuid)
+
+    context = get_base_context(request)
+    context["title"] = f"enviPath - {current_package.name} - Predict Pathway"
+    context["meta"]["current_package"] = current_package
+
+    return render(request, "predict_pathway.html", context)
+
+
 def packages(request):
     current_user = _anonymous_or_real(request)
 

templates/actions/collections/pathway.html

@@ -1,6 +1,8 @@
 {% if meta.can_edit %}
   <li>
-    <a href="{{ meta.server_url }}/predict">
+    <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>

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/footer.html

@@ -4,9 +4,8 @@
     {% 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="/predict">Predict</a>
-        <a class="link link-hover" href="/search">Search</a>
+        <a class="link link-hover" href="/package">Packages</a>
-        <a class="link link-hover" href="/package">Browse</a>
         {% if user.is_authenticated %}
           <a class="link link-hover" href="/model">Your Collections</a>
         {% endif %}
@@ -36,7 +35,10 @@
   <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 m-2 h-14 shrink-0" 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>

templates/includes/navbar.html

@@ -26,6 +26,9 @@
           tabindex="-1"
           class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
         >
+          <li>
+            <a href="{{ meta.server_url }}/Package" id="packageLink">Package</a>
+          </li>
           <li>
             <a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a>
           </li>
@@ -57,7 +60,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="badge badge-dash bg-base-200 text-base-content/50 m-1 flex items-center space-x-1 p-2"
         >

templates/index/index.html

@@ -26,12 +26,14 @@
         class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
       >
         <div class="card-body">
-          <!-- Input Mode Toggle - Fixed position outside fieldset -->
           <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-1">
-              <!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
+              <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
-              <label class="toggle text-base-content toggle-md">
                 <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,6 +73,9 @@
                         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>
@@ -128,7 +140,9 @@
                 >
                   Predict!
                 </button>
-                <a class="label mx-auto mt-1 w-full" 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"

templates/modals/search_modal.html

@@ -2,7 +2,7 @@
 <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 flex-shrink-0">
+    <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
@@ -37,7 +37,7 @@
             tabindex="0"
             id="modal_mode_button"
             popovertarget="search_dropdown_menu"
-            style="anchor-name:--anchor-1"
+            style="anchor-name:--1"
             class="btn join-item btn-ghost"
           >
             Text
@@ -57,10 +57,10 @@
           </button>
           <ul
             tabindex="0"
-            class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-64 p-2 shadow-lg"
+            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-1"
+            style="position-anchor:--anchor-2"
           >
             <li class="menu-title">Text</li>
             <li>
@@ -140,18 +140,18 @@
     </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="border-base-300 m-3 flex min-h-[3rem] flex-wrap items-center gap-2 rounded-lg border-2 border-dashed p-3"
+        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] max-h-96 w-80 overflow-y-auto p-2 shadow-lg"
+        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"
@@ -241,7 +241,7 @@
     </div>
 
     <!-- Loading Indicator -->
-    <div id="search_loading" class="hidden flex-shrink-0 justify-center py-8">
+    <div id="search_loading" class="hidden shrink-0 justify-center py-8">
       <span class="loading loading-spinner loading-lg text-primary"></span>
     </div>
 
@@ -490,6 +490,26 @@
 
     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 = "";

templates/predict_pathway.html

@@ -2,7 +2,13 @@
 {% load static %}
 {% block content %}
   <div class="mx-auto w-full p-8">
-    <h1 class="h1 mb-4 text-3xl font-bold">Predict a Pathway</h1>
+    <h1 class="h1 mb-4 text-3xl font-bold">
+      Predict a Pathway
+
+      <span class="text-base-content/50 text-xs"
+        >in <strong>{{ meta.current_package.name|safe }}</strong>
+      </span>
+    </h1>
 
     <form
       id="predict_form"

templates/search.html

@@ -1,224 +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>
-  {# prettier-ignore-start #}
-    <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>
-    {# prettier-ignore-end #}
-{% endblock content %}