1 Commits

Author SHA1 Message Date
eb6c5ade29 fix: open and close search modal
Modal now opens on badge click.
Modal now closes on random click around
2025-11-12 15:37:35 +13:00
7 changed files with 113 additions and 185 deletions

View File

@ -142,11 +142,6 @@ 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$",

View File

@ -374,22 +374,6 @@ 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)

View File

@ -1,9 +1,6 @@
{% if meta.can_edit %}
<li>
<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>
<li>
<a href="{{ meta.server_url }}/predict">
<span class="glyphicon glyphicon-plus"></span> New Pathway</a>
</li>
{% endif %}

View File

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

View File

@ -1,9 +1,9 @@
{% load static %}
{# Modern DaisyUI Navbar #}
<div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg">
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50">
<div class="navbar-start">
<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">
<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" />
</svg>
</a>
@ -26,9 +26,6 @@
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>
@ -62,7 +59,7 @@
{% if not public_mode %}
<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"
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"
@ -90,7 +87,7 @@
<div
tabindex="0"
role="button"
class="btn btn-ghost btn-circle m-1"
class="btn btn-ghost m-1 btn-circle"
id="loggedInButton"
>
<svg

View File

@ -2,86 +2,74 @@
{% load static %}
{% block main_content %}
<!-- Hero Section with Logo and Search -->
<section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
<section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
<div
class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
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 z-10 -translate-x-8">
<h2 class="text-base-100 text-left text-3xl text-shadow-lg">
<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>
</div>
</section>
<div class="bg-base-200 mx-auto max-w-5xl shadow-md">
<div class="shadow-md max-w-5xl mx-auto bg-base-200">
<!-- Predict Pathway Section -->
<div
class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 "
>
<div
class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out"
>
<div class="card-body">
<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 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">
<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"
viewBox="0 0 20 20"
class="size-5"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
fill="currentColor"
stroke="none"
>
<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"
stroke-width="2"
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"
/>
</g>
</svg>
</div>
<span class="ext-xs">SMILES</span>
</span>
<span class="swap-off flex items-center gap-1">
<div
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
>
<svg
aria-label="draw mode"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
stroke="none"
class="size-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</div>
<span class="text-base/50 text-xs">Draw</span>
</span>
<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>
<svg
aria-label="draw mode"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
stroke="none"
class="size-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</label>
</div>
</div>
<fieldset
class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
>
<form
id="index-form"
@ -91,29 +79,29 @@
{% csrf_token %}
<div
id="text-input-container"
class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
class="transition-all duration-300 ease-in-out opacity-100 transform scale-100"
>
<div class="join mx-auto w-full">
<div class="join w-full mx-auto">
<input
type="text"
id="index-form-text-input"
placeholder="canonical SMILES string"
class="input input-md join-item grow"
class="input grow input-md join-item"
/>
<button class="btn btn-neutral join-item">Predict!</button>
</div>
<div class="label relative mt-1 w-full">
<div class="label relative w-full mt-1">
<div class="flex gap-2">
<a
href="#"
class="example-link hover:text-primary cursor-pointer"
class="example-link cursor-pointer hover:text-primary"
data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
title="load example"
>Caffeine</a
>
<a
href="#"
class="example-link hover:text-primary cursor-pointer"
class="example-link cursor-pointer hover:text-primary"
data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
title="load example"
>Ibuprofen</a
@ -126,7 +114,7 @@
</div>
<div
id="ketcher-container"
class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95"
>
<iframe
id="index-ketcher"
@ -136,13 +124,11 @@
class="rounded-lg"
></iframe>
<button
class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2"
>
Predict!
</button>
<div class="mt-1 flex w-full justify-end">
<a class="label justify-end" href="/predict">Advanced</a>
</div>
<a class="label mx-auto w-full mt-1" href="#">Advanced</a>
</div>
<input
type="hidden"
@ -164,18 +150,18 @@
</div>
<!-- Community News Section -->
<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>
<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>
<div id="community-news-container" class="flex justify-center gap-4">
<div id="community-news-container" class="flex gap-4 justify-center">
<!-- News cards will be populated here -->
<div id="loading" class="flex w-full justify-center">
<div id="loading" class="flex justify-center w-full">
<span class="loading loading-spinner loading-lg"></span>
</div>
</div>
<div class="mt-6 text-right">
<div class="text-right mt-6">
<a
href="https://community.envipath.org/c/announcements/10"
target="_blank"
@ -191,18 +177,18 @@
</section>
<!-- Mission Statement Section -->
<section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
<section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
<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="h-full w-full object-contain"
class="w-full h-full object-contain"
/>
</div>
<div class="mr-8 w-2/3 space-y-4 text-left">
<h2 class="h2 mb-8 font-bold">About enviPath</h2>
<div class="space-y-4 text-left w-2/3 mr-8">
<h2 class="h2 font-bold mb-8">About enviPath</h2>
<p class="">
enviPath is a database and prediction system for the microbial
biotransformation of organic environmental contaminants. The
@ -215,7 +201,7 @@
products. Explore our tools and contribute to advancing
environmental biotransformation research.
</p>
<div class="float-right flex flex-row gap-4">
<div class="flex flex-row gap-4 float-right">
<a href="/about" class="btn btn-ghost-neutral">Read More</a>
<a href="/about" class="btn btn-neutral">Publications</a>
</div>
@ -225,7 +211,7 @@
</section>
<!-- Partners Section -->
<section class="bg-base-100 py-14 sm:py-12">
<section class="py-14 sm:py-12 bg-base-100">
<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>
@ -236,12 +222,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" %}"

View File

@ -2,13 +2,7 @@
{% load static %}
{% block content %}
<div class="mx-auto w-full p-8">
<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>
<h1 class="h1 mb-4 text-3xl font-bold">Predict a Pathway</h1>
<form
id="predict_form"