forked from enviPath/enviPy
319 lines
16 KiB
HTML
319 lines
16 KiB
HTML
{% extends "framework_modern.html" %}
|
|
{% load static %}
|
|
{% block main_content %}
|
|
|
|
<!-- Hero Section with Logo and Search -->
|
|
<section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
|
|
|
|
<div class="hero min-h-[calc(100vh*0.4)]"
|
|
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;">
|
|
<div class="hero-overlay"></div>
|
|
<!-- Predict Pathway text over the image -->
|
|
<div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
|
|
<h2 class="text-3xl text-base-100 text-shadow-lg text-left">Predict Your Pathway</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="shadow-md max-w-5xl mx-auto bg-base-200">
|
|
|
|
<!-- Predict Pathway Section -->
|
|
<div class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 ">
|
|
<div class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out">
|
|
<div class="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">
|
|
<input type="checkbox" />
|
|
<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>
|
|
<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 transition-all duration-300 ease-in-out overflow-hidden">
|
|
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
|
{% csrf_token %}
|
|
<div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
|
|
<div class="join w-full mx-auto">
|
|
<input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-md join-item" />
|
|
<button class="btn btn-neutral join-item">Predict!</button>
|
|
</div>
|
|
<div class="label relative w-full mt-1" >
|
|
<div class="flex gap-2">
|
|
<a href="#">Example 1</a>
|
|
<a href="#">Example 2</a>
|
|
</div>
|
|
<a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#">Advanced</a>
|
|
</div>
|
|
</div>
|
|
<div id="ketcher-container" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95">
|
|
<iframe id="index-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}"
|
|
width="100%" height="400" class="rounded-lg"></iframe>
|
|
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2">Predict!</button>
|
|
<a class="label mx-auto w-full mt-1" href="#">Advanced</a>
|
|
</div>
|
|
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
|
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
|
<input type="hidden" id="current-action" value="predict">
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Community News Section -->
|
|
<section class="py-16 bg-base-200 z-10 mx-8">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
|
|
|
|
<div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- News cards will be populated here -->
|
|
<div id="loading" class="col-span-full flex justify-center">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fallback for discourse widget -->
|
|
<div class="hidden">
|
|
<d-topics-list discourse-url="https://community.envipath.org"
|
|
per-page="10"
|
|
category="10"
|
|
template="complete"
|
|
id="discourse-topics">
|
|
</d-topics-list>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="py-14 sm:py-12 from-base-200 to-base-100 bg-gradient-to-b">
|
|
<div class="mx-auto px-6 lg:px-8">
|
|
<div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
|
|
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
|
<img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
|
|
<img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
|
|
<img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Mission Statement Section -->
|
|
<section class="py-16 bg-base-100">
|
|
<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" />
|
|
</div>
|
|
<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
|
|
database provides the possibility to store and view experimentally
|
|
observed biotransformation pathways.
|
|
</p>
|
|
<p class="">
|
|
The pathway prediction system provides different relative reasoning models
|
|
to predict likely biotransformation pathways and products. Explore our tools
|
|
and contribute to advancing environmental biotransformation research.
|
|
</p>
|
|
<a href="/about" class="float-right btn btn-ghost-neutral">Read More</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script language="javascript">
|
|
var currentPackage = "{{ meta.current_package.url }}";
|
|
|
|
// Process discourse topics into individual cards
|
|
function processDiscourseTopics(retryCount = 0) {
|
|
setTimeout(function() {
|
|
const topicsList = $('#discourse-topics');
|
|
if (topicsList.length && topicsList.find('li').length > 0) {
|
|
$('#loading').hide();
|
|
|
|
topicsList.find('li').each(function(index) {
|
|
if (index >= 6) return false; // Limit to 6 cards
|
|
|
|
const $item = $(this);
|
|
const $link = $item.find('a').first();
|
|
const title = $link.text().trim();
|
|
const url = $link.attr('href');
|
|
const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';
|
|
|
|
const card = `
|
|
<div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg line-clamp-2">
|
|
<a href="${url}" target="_blank" class="hover:text-primary">
|
|
${title}
|
|
</a>
|
|
</h3>
|
|
<p class="text-gray-600 line-clamp-3">${excerpt}</p>
|
|
<div class="card-actions justify-end mt-4">
|
|
<a href="${url}" target="_blank" class="btn btn-sm btn-primary">
|
|
Read More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#community-news-container').append(card);
|
|
});
|
|
} else {
|
|
// Retry if not loaded yet
|
|
if (retryCount < 10) {
|
|
processDiscourseTopics(retryCount + 1);
|
|
} else {
|
|
$('#loading').html('<p class="text-neutral">No updates found. Head over to the <a href="https://community.envipath.org" target="_blank" class="link link-primary">community</a> to see the latest discussions.</p>');
|
|
}
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
// Toggle functionality with smooth animations
|
|
function toggleInputMode() {
|
|
const toggle = $('input[type="checkbox"]');
|
|
const textContainer = $('#text-input-container');
|
|
const ketcherContainer = $('#ketcher-container');
|
|
const formCard = $('.card');
|
|
const fieldset = $('.fieldset');
|
|
|
|
if (toggle.is(':checked')) {
|
|
// Draw mode - show Ketcher, hide text input
|
|
textContainer.addClass('opacity-0 transform scale-95');
|
|
textContainer.removeClass('opacity-100 transform scale-100');
|
|
|
|
// Adjust fieldset padding for Ketcher mode - reduce padding and make more compact
|
|
fieldset.removeClass('p-8');
|
|
fieldset.addClass('p-4');
|
|
|
|
// Wait for fade out to complete, then hide and show new content
|
|
setTimeout(() => {
|
|
textContainer.addClass('hidden');
|
|
ketcherContainer.removeClass('hidden opacity-0 transform scale-95');
|
|
ketcherContainer.addClass('opacity-100 transform scale-100');
|
|
|
|
// Force re-evaluation of iframe size
|
|
const iframe = document.getElementById('index-ketcher');
|
|
if (iframe) {
|
|
iframe.style.height = '400px';
|
|
}
|
|
}, 300);
|
|
} else {
|
|
// SMILES mode - show text input, hide Ketcher
|
|
ketcherContainer.addClass('opacity-0 transform scale-95');
|
|
ketcherContainer.removeClass('opacity-100 transform scale-100');
|
|
|
|
// Restore fieldset padding for text input mode
|
|
fieldset.removeClass('p-4');
|
|
fieldset.addClass('p-8');
|
|
|
|
// Wait for fade out to complete, then hide and show new content
|
|
setTimeout(() => {
|
|
ketcherContainer.addClass('hidden');
|
|
textContainer.removeClass('hidden opacity-0 transform scale-95');
|
|
textContainer.addClass('opacity-100 transform scale-100');
|
|
}, 300);
|
|
|
|
// Transfer SMILES from Ketcher to text input if available
|
|
if (window.indexKetcher && window.indexKetcher.getSmiles) {
|
|
const smiles = window.indexKetcher.getSmiles();
|
|
if (smiles && smiles.trim() !== '') {
|
|
$('#index-form-text-input').val(smiles);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ketcher integration
|
|
function indexKetcherToTextInput() {
|
|
$('#index-form-smiles').val(this.ketcher.getSmiles());
|
|
}
|
|
|
|
$(function () {
|
|
// Initialize fieldset with proper padding
|
|
$('.fieldset').addClass('p-8');
|
|
|
|
// Toggle event listener
|
|
$('input[type="checkbox"]').on('change', toggleInputMode);
|
|
|
|
// Ketcher iframe load handler
|
|
$('#index-ketcher').on('load', function() {
|
|
const checkKetcherReady = () => {
|
|
const win = this.contentWindow;
|
|
if (win.ketcher && 'editor' in win.ketcher) {
|
|
window.indexKetcher = win.ketcher;
|
|
win.ketcher.editor.event.change.handlers.push({
|
|
once: false,
|
|
priority: 0,
|
|
f: indexKetcherToTextInput,
|
|
ketcher: win.ketcher
|
|
});
|
|
} else {
|
|
setTimeout(checkKetcherReady, 100);
|
|
}
|
|
};
|
|
checkKetcherReady();
|
|
});
|
|
|
|
// Handle form submission on Enter
|
|
$('#index-form').on("submit", function (e) {
|
|
e.preventDefault();
|
|
|
|
var textSmiles = '';
|
|
|
|
// Check if we're in Ketcher mode and extract SMILES
|
|
if ($('input[type="checkbox"]').is(':checked') && window.indexKetcher) {
|
|
textSmiles = window.indexKetcher.getSmiles().trim();
|
|
} else {
|
|
textSmiles = $('#index-form-text-input').val().trim();
|
|
}
|
|
|
|
if (textSmiles === '') {
|
|
return;
|
|
}
|
|
|
|
$('#index-form-smiles').val(textSmiles);
|
|
$("#index-form").attr("action", currentPackage + "/pathway");
|
|
$("#index-form").attr("method", 'POST');
|
|
this.submit();
|
|
});
|
|
|
|
// Process discourse topics into cards
|
|
processDiscourseTopics();
|
|
});
|
|
</script>
|
|
{% endblock main_content %}
|