forked from enviPath/enviPy
New Layout for parallel styling
Signed-off-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
{% extends "framework.html" %}
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<!-- Modal for Found Matching Pathways - TODO: Convert to DaisyUI modal -->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
@ -30,157 +30,154 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>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. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
|
||||
<!-- Hero Section with Logo and Search -->
|
||||
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
|
||||
<!-- Blurred Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-teal-50 backdrop-blur-3xl"></div>
|
||||
|
||||
<!-- Logo - Full width, centered -->
|
||||
<div class="relative z-10 w-full max-w-5xl px-4 mb-12 text-center">
|
||||
<img id="image-logo-long"
|
||||
class="w-full h-auto"
|
||||
alt="enviPath"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</div>
|
||||
|
||||
<!-- Search Component - Center of Hero -->
|
||||
<div class="relative z-10 w-full max-w-4xl px-4">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="text" placeholder="Type here" class="input" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Learn More Link -->
|
||||
<div class="relative z-10 mt-8">
|
||||
<a class="btn btn-ghost btn-lg" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">
|
||||
Learn more »
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community News Section -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">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>
|
||||
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
<div class="col-xs-4">
|
||||
<d-topics-list discourse-url="https://community.envipath.org" per-page="10" category="10"
|
||||
template="complete"></d-topics-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input'
|
||||
placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
|
||||
</button>
|
||||
</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>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
</form>
|
||||
</div>
|
||||
<p></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
<div class="prose prose-lg mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold mb-8">About enviPath</h2>
|
||||
<p class="text-xl text-gray-700 leading-relaxed mb-6">
|
||||
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="text-xl text-gray-700 leading-relaxed">
|
||||
The pathway prediction system provides different relative reasoning models
|
||||
to predict likely biotransformation pathways and products. Explore our tools
|
||||
and contribute to advancing environmental biotransformation research.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script language="javascript">
|
||||
var currentPackage = "{{ meta.current_package.url }}";
|
||||
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
// Process discourse topics into individual cards
|
||||
function processDiscourseTopics() {
|
||||
setTimeout(function() {
|
||||
const topicsList = $('#discourse-topics');
|
||||
if (topicsList.length && topicsList.find('li').length > 0) {
|
||||
$('#loading').hide();
|
||||
|
||||
var action = $('#action-button').text().trim();
|
||||
topicsList.find('li').each(function(index) {
|
||||
if (index >= 6) return false; // Limit to 6 cards
|
||||
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
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...';
|
||||
|
||||
if (textSmiles === '') {
|
||||
$(this).prop("disabled", false);
|
||||
return;
|
||||
}
|
||||
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>
|
||||
`;
|
||||
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
|
||||
if (action !== 'Search' && ketcherSmiles !== '' && textSmiles !== ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
}
|
||||
|
||||
if (action === 'Search') {
|
||||
var par = {};
|
||||
par['search'] = textSmiles;
|
||||
par['mode'] = 'text';
|
||||
var queryString = $.param(par, true);
|
||||
window.location.href = "/search?" + queryString;
|
||||
} else {
|
||||
$('#index-form-smiles').val(textSmiles);
|
||||
$('#index-form').submit();
|
||||
}
|
||||
}
|
||||
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
|
||||
if (dropdownVal === 'Search') {
|
||||
$("#index-form").attr("action", '/search');
|
||||
$("#index-form").attr("method", 'GET');
|
||||
} else {
|
||||
$("#index-form").attr("action", currentPackage + "/pathway");
|
||||
}
|
||||
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
$('#community-news-container').append(card);
|
||||
});
|
||||
} else {
|
||||
// Retry if not loaded yet
|
||||
if (index < 10) {
|
||||
processDiscourseTopics();
|
||||
} else {
|
||||
$('#loading').html('<p class="text-gray-500">Unable to load community updates</p>');
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
// Handle form submission on Enter
|
||||
$('#index-form').on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('#index-form').on("keydown", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
goButtonClicked();
|
||||
var 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();
|
||||
});
|
||||
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-ketcher').on('load', function () {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: ketcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
// Process discourse topics into cards
|
||||
processDiscourseTopics();
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user