Skip to content

GitLab

Commit a9756a47 authored by isillitoe's avatar isillitoe
Browse files

Merge branch 'master' of github.com:CATH-SWISSMODEL/cathsm-server

parents 0c5738c2 dfdb7bbc
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ a9756a47
...@@ -57,6 +57,7 @@ coverage.xml ...@@ -57,6 +57,7 @@ coverage.xml
*.log *.log
local_settings.py local_settings.py
db.sqlite3 db.sqlite3
/static
# Flask stuff: # Flask stuff:
instance/ instance/
......
Docker/cathapi/Dockerfile
View file @ a9756a47
...@@ -35,15 +35,15 @@ ONBUILD RUN apt-get update && \ ...@@ -35,15 +35,15 @@ ONBUILD RUN apt-get update && \
apt-get install -y --no-install-recommends \ apt-get install -y --no-install-recommends \
git && \ git && \
/bin/rm -rf /var/lib/apt/lists/* && \ /bin/rm -rf /var/lib/apt/lists/* && \
/usr/bin/git clone https://github.com/bienchen/cath-swissmodel-api.git \ /usr/bin/git clone https://github.com/CATH-SWISSMODEL/cathsm-server.git \
/tmp/cath-swissmodel-api.git && \ /tmp/cathsm-server.git && \
if test -z "$CATHSMAPI_GITTAG"; then \ if test -z "$CATHSMAPI_GITTAG"; then \
cd /tmp/cath-swissmodel-api.git/cathapi && \ cd /tmp/cathsm-server.git/cathapi && \
git checkout $CATHSMAPI_GITTAG && \ git checkout $CATHSMAPI_GITTAG && \
cd /; \ cd /; \
fi && \ fi && \
/bin/mv /tmp/cath-swissmodel-api.git/cathapi $SRC_DIR && \ /bin/mv /tmp/cathsm-server.git $SRC_DIR && \
/bin/rm -rf rm /tmp/cath-swissmodel-api.git && \ /bin/rm -rf rm /tmp/cathsm-server.git && \
apt-get purge -y --auto-remove git apt-get purge -y --auto-remove git
FROM build_${CATHSMAPI_CODEBASE} FROM build_${CATHSMAPI_CODEBASE}
......
cathapi/static/cathapi/css/local.css 0 → 100644
View file @ a9756a47
.subheading {
font-size: 1.25rem;
}
\ No newline at end of file
cathapi/static/cathapi/js/pipeline.js
View file @ a9756a47
...@@ -6,7 +6,8 @@ var QUERY = { ...@@ -6,7 +6,8 @@ var QUERY = {
(function ($) { (function ($) {
"use strict"; // Start of use strict "use strict"; // Start of use strict
var stepper = new Stepper($(".bs-stepper")[0], { var stepperEl = document.getElementById('cathsm-stepper');
var stepper = new Stepper(stepperEl, {
linear: false, linear: false,
animation: true, animation: true,
}); });
...@@ -63,19 +64,62 @@ var QUERY = { ...@@ -63,19 +64,62 @@ var QUERY = {
// Do whatever with pasteddata // Do whatever with pasteddata
}; };
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission // https://stackoverflow.com/a/21311717/821642
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) { function validateTextarea() {
console.log('checking form for validity: ', form, event, form.checkValidity()); console.log("validateTextarea", this);
if (form.checkValidity() === false) { var errorMsg = "Please match the format requested.";
event.preventDefault(); var textarea = this;
event.stopPropagation(); var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$');
// check each line of text
$.each($(this).val().split("\n"), function () {
// check if the line matches the pattern
var hasError = !this.match(pattern);
console.log("match: ", this, pattern, this.match(pattern), hasError);
if (typeof textarea.setCustomValidity === 'function') {
textarea.setCustomValidity(hasError ? errorMsg : '');
} else {
// Not supported by the browser, fallback to manual error display...
$(textarea).toggleClass('error', !!hasError);
$(textarea).toggleClass('ok', !hasError);
if (hasError) {
$(textarea).attr('title', errorMsg);
} else {
$(textarea).removeAttr('title');
}
} }
form.classList.add('was-validated'); return !hasError;
});
}
$('.example-sequence').on('click', function (event) {
var seq = $(this).data('sequence');
var seq_id = $(this).data('sequenceId');
$input_sequence.val(seq);
$input_sequence_id.val(seq_id);
})
// Loop over forms and apply our own validation (prevent auto submission)
var validateForm = function (event) {
var $form = $(this);
var formEl = $form[0];
console.log('checking form for validity: ', formEl, $form.find('textarea'), event, formEl.checkValidity());
$form.find('textarea[pattern]').each(validateTextarea);
if (formEl.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
$form.addClass('was-validated');
};
$('form.needs-validation').each(function (idx, form) {
$(form).on('submit', function (event) {
validateForm(event);
}, false); }, false);
}); });
$input_sequence.on('change keyup', validateForm);
$input_sequence.on('paste', handleSequencePaste); $input_sequence.on('paste', handleSequencePaste);
$('.bs-stepper form').submit(function (event) { $('.bs-stepper form').submit(function (event) {
...@@ -93,7 +137,7 @@ var QUERY = { ...@@ -93,7 +137,7 @@ var QUERY = {
}; };
stepper.addEventListener('shown.bs-stepper', function (event) { stepperEl.addEventListener('shown.bs-stepper', function (event) {
console.warn('step shown') console.warn('step shown')
switch (event.detail.indexStep) { switch (event.detail.indexStep) {
......
cathapi/templates/base.html
View file @ a9756a47
...@@ -19,8 +19,7 @@ ...@@ -19,8 +19,7 @@
<!-- Theme CSS --> <!-- Theme CSS -->
<link href="{% static 'cathapi/css/freelancer.min.css' %}" rel="stylesheet"> <link href="{% static 'cathapi/css/freelancer.min.css' %}" rel="stylesheet">
<link href="{% static 'cathapi/css/bs-stepper.min.css' %}" rel="stylesheet"> <link href="{% static 'cathapi/css/local.css' %}" ref="stylesheet">
</head> </head>
<body id="page-top"> <body id="page-top">
...@@ -38,175 +37,18 @@ ...@@ -38,175 +37,18 @@
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1"> <li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#model">Model</a> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#pipeline">Pipeline</a>
</li> </li>
<li class="nav-item mx-0 mx-lg-1"> <li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li> </li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Masthead --> {% block content %}
<header class="masthead bg-primary text-white text-center"> {% endblock %}
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Heading -->
<h1 class="masthead-heading text-uppercase mb-0">CathSM</h1>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading -->
<p class="masthead-subheading font-weight-light mb-0">
Connecting web services from CATH and SWISS-MODEL <br> to generate model 3D structures from protein
sequences
</p>
<!-- About Section Button -->
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light js-scroll-trigger" href="#model">
<i class="fas fa-play mr-2"></i>
Try it out
</a>
<a class="btn btn-xl btn-outline-light js-scroll-trigger" href="#about">
<i class="fas fa-question mr-2"></i>
Find out more
</a>
</div>
</div>
</header>
<!-- Model Section -->
<section class="page-section model" id="model">
<div class="container">
<!-- Model Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Model</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
</div>
<!-- Model Grid Items -->
{% block content %}
{% endblock %}
<!-- /.row -->
</div>
</section>
<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content -->
<div class="row">
<div class="col-lg-4 ml-auto">
<h4>CATH</h4>
<p>CATH is a classification of protein structures that groups
protein domains into superfamilies when there is sufficient evidence
they have diverged from a common ancestor. This
information can be used to provide unique insights into relationships
between protein sequence, structure and function.</p>
</div>
<div class="col-lg-4 mr-auto">
<h4>SWISS-MODEL</h4>
<p>SWISS-MODEL is a fully automated protein structure homology-modelling
server, accessible via the ExPASy web server, or from the program
DeepView (Swiss Pdb-Viewer). The purpose of this server is to make
protein modelling accessible to all life science researchers
worldwide.</p>
</div>
<div class="col-lg-4 ml-auto">
<h4>CATHSM</h4>
<p>Foo</p>
</div>
</div>
<!-- About Section Button -->
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="https://github.com/CATH-SWISSMODEL/cath-swissmodel-api">
<i class="fas fa-download mr-2"></i>
View code on GitHub
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="page-section" id="contact">
<div class="container">
<!-- Contact Section Heading -->
<h2 class="page-section-heading text-center text-uppercase mb-0">Contact Us</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
</div>
<!-- Contact Section Form -->
<div class="row">
<div class="col-lg-8 mx-auto">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<form name="sentMessage" id="contactForm" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" required="required"
data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Email Address</label>
<input class="form-control" id="email" type="email" placeholder="Email Address" required="required"
data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Message" required="required"
data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer --> <!-- Footer -->
<footer class="footer text-center"> <footer class="footer text-center">
...@@ -215,17 +57,14 @@ ...@@ -215,17 +57,14 @@
<!-- Footer Location --> <!-- Footer Location -->
<div class="col-lg-4 mb-5 mb-lg-0"> <div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">References</h4> <h4 class="text-uppercase mb-4">Funding</h4>
<p class="mb-0"><strong>CATH</strong> <img width="150" src="{% static 'cathapi/img/elixir-logo.png' %}">
<br>Foo</p>
<p class="mb-0"><strong>SWISS-MODEL</strong>
<br>Bar</p>
</div> </div>
<!-- Footer Social Icons --> <!-- Footer Social Icons -->
<div class="col-lg-4 mb-5 mb-lg-0"> <div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4> <h4 class="text-uppercase mb-4">Around the Web</h4>
<a class="btn btn-outline-light btn-social mx-1" href="#"> <a class="btn btn-outline-light btn-social mx-1" href="">
<i class="fab fa-fw fa-github"></i> <i class="fab fa-fw fa-github"></i>
</a> </a>
</div> </div>
......
cathapi/templates/index.html
View file @ a9756a47
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static %}
{% block content %} {% block content %}
<div class="d-flex justify-content-center">
<div class="bs-stepper">
<div class="bs-stepper-header" role="tablist"> <!-- Masthead -->
<!-- your steps here --> <header class="masthead bg-primary text-white text-center">
<div class="step" data-target="#submit-sequence-part"> <div class="container d-flex align-items-center flex-column">
<button type="button" class="step-trigger" role="tab" aria-controls="submit-sequence-part"
id="submit-sequence-part-trigger"> <!-- Masthead Heading -->
<span class="bs-stepper-circle">1</span> <h1 class="masthead-heading text-uppercase mb-0">CathSM</h1>
<span class="bs-stepper-label">Submit Sequence</span>
</button> <!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading -->
<p class="masthead-subheading font-weight-light mb-0">
Connecting web services from CATH and SWISS-MODEL <br>
to generate 3D models from protein sequences.
</p>
<!-- About Section Button -->
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light js-scroll-trigger" href="#model">
<i class="fas fa-play mr-2"></i>
Try it out
</a>
<a class="btn btn-xl btn-outline-light js-scroll-trigger" href="#about">
<i class="fas fa-question mr-2"></i>
Find out more
</a>
</div>
</div>
</header>
<!-- Model Section -->
<section class="page-section pipeline" id="pipeline">
<div class="container">
<!-- Model Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Pipeline</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
</div>
<!-- Model Grid Items -->
<!-- Masthead Subheading -->
<h4 class="font-weight-light text-center mb-4">
The <span class="code">cathsm</span> modelling pipeline can be accessed via:
</h4>
<div class="row">
<div class="col-lg-6 align-content-center ml-auto">
<h4>CLI (Python script and libraries)</h4>
<a href="https://github.com/CATH-SWISSMODEL/cathsm-client"><img
src="{% static 'cathapi/img/cathsm-client-cli.gif' %}" class="img-thumbnail"></a>
<a class="btn" href="https://github.com/CATH-SWISSMODEL/cathsm-client"><i class="fab fa-fw fa-github"></i>
CATH-SWISSMODEL/cathsm-client</a>
</div>
<div class="col-lg-6 justify-content-center ml-auto">
<h4>Web (ReactJS) <small>(under development)</small></h4>
<img src="{% static 'cathapi/img/cathsm-reactjs.png' %}" class="img-thumbnail">
<a class="btn" href="https://github.com/CATH-SWISSMODEL/cathsm-reactjs"><i class="fab fa-fw fa-github"></i>
CATH-SWISSMODEL/cathsm-reactjs</a>
</div> </div>
<div class="line"></div> </div>
<div class="step" data-target="#select-template-part">
<button type="button" class="step-trigger" role="tab" aria-controls="select-template-part" <!-- /.row -->
id="select-template-part-trigger">
<span class="bs-stepper-circle">2</span> </div>
<span class="bs-stepper-label">Select Template</span> </section>
</button>
<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content -->
<div class="row mb-4">
<div class="col-lg-6 ml-auto">
<h4>CATH</h4>
<p>CATH is a classification of protein structures that groups
protein domains into superfamilies when there is sufficient evidence
they have diverged from a common ancestor. This
information can be used to provide unique insights into relationships
between protein sequence, structure and function.</p>
<a class="btn btn-sm btn-outline-light" href="https://cathdb.info">
<i class="fas fa-external-link-alt mr-2"></i>
Visit CATH
</a>
</div> </div>
<div class="line"></div> <div class="col-lg-6 mr-auto">
<div class="step" data-target="#view-model-part"> <h4>SWISS-MODEL</h4>
<button type="button" class="step-trigger" role="tab" aria-controls="view-model-part" <p>SWISS-MODEL is a fully automated protein structure homology-modelling
id="view-model-part-trigger"> server, accessible via the ExPASy web server, or from the program
<span class="bs-stepper-circle">3</span> DeepView (Swiss Pdb-Viewer). The purpose of this server is to make
<span class="bs-stepper-label">View Model</span> protein modelling accessible to all life science researchers
</button> worldwide.</p>
<a class="btn btn-sm btn-outline-light" href="https://swissmodel.expasy.org">
<i class="fas fa-external-link-alt mr-2"></i>
Visit SWISS-MODEL
</a>
</div> </div>
</div> </div>
<div class="bs-stepper-content"> <div class="row mb-4">
<div class="col-lg-6 ml-auto">
<!-- Submit Sequence --> <h4>InterPro</h4>
<div id="submit-sequence-part" class="content fade" role="tabpanel" <p>InterPro provides functional analysis of proteins by classifying them into families and predicting domains
aria-labelledby="submit-sequence-part-trigger"> and important sites. To classify proteins in this way, InterPro uses predictive models, known as signatures,
<form class="needs-validation" novalidate> provided by several different databases (referred to as member databases) that make up the InterPro
<div class="form-group"> consortium. We combine protein signatures from these member databases into a single searchable resource,
<label for="input-sequence-id">Sequence ID</label> capitalising on their individual strengths to produce a powerful integrated database and diagnostic tool.</p>
<input type="text" class="form-control" id="input-sequence-id" <a class="btn btn-sm btn-outline-light" href="https://www.ebi.ac.uk/interpro">
placeholder="Enter a name/id for your sequence" required> <i class="fas fa-external-link-alt mr-2"></i>
<div class="invalid-feedback">Please enter a name for your sequence</div> Visit InterPro
<small id="input-sequence-id-help" class="form-text text-muted"> </a>
If you copy/paste a FASTA formatted sequence in the box below, this field will be filled in
automatically.</small>
</div>
<div class="form-group">
<label for="input-sequence">Sequence</label>
<textarea rows="10" class="form-control" id="input-sequence"
placeholder="Enter the sequence as a string of amino acids" required
pattern="[^GPAVLIMCFYWHKRQNEDST\s]"></textarea>
<div class="invalid-feedback">Please enter a valid amino-acid sequence</div>
<small id="input-sequence-help" class="form-text text-muted">Copy and paste sequence as a string of
amino-acids (or FASTA format).</small>
</div>
<div class="step-actions d-flex justify-content-center">
<button class="btn btn-lg btn-inactive" data-action="clear">Clear</button>
<button class="btn btn-lg btn-primary btn-inactive" data-action="next" type="submit">Next</button>
</div>
</form>
</div> </div>
<div class="col-lg-6 ml-auto">
<!-- Select Template --> <h4>PDBe</h4>
<div id="select-template-part" class="content fade" role="tabpanel" <p>PDBe is a founding member of the Worldwide Protein Data Bank which collects, organises and disseminates data
aria-labelledby="select-template-part-trigger"> on biological macromolecular structures. In collaboration with the other Worldwide Protein Data Bank (wwPDB)
<div class="step-content"> partners, we work to collate, maintain and provide access to the global repository of macromolecular structure
Select template content models, the Protein Data Bank (PDB).</p>
</div> <a class="btn btn-sm btn-outline-light" href="https://www.ebi.ac.uk/pdbe">
<div class="step-actions d-flex justify-content-center"> <i class="fas fa-external-link-alt mr-2"></i>
<button class="btn btn-lg btn-inactive" data-action="back">Back</button> Visit PDBe
<button class="btn btn-lg btn-inactive" data-action="next">Next</button> </a>
</div>
</div> </div>
</div>
<!-- View Model --> <!-- About Section Button -->
<div id="view-model-part" class="content fade" role="tabpanel" aria-labelledby="view-model-part-trigger"> <div class="text-center mt-4">
<div class="step-content">
View model content
</div>
<div class="step-actions d-flex justify-content-center">
<button class="btn btn-lg btn-inactive" data-action="back">Back</button>
</div>
</div>
</div> </div>
</div>
</div>