Skip to content

Update navigation, isolates table, and homepage content #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ulthran merged 4 commits into from
Oct 24, 2025
Merged

Update navigation, isolates table, and homepage content #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e57498f
Update navigation and homepage content
Ulthran Oct 22, 2025
358c6e6
Adjust homepage banners placement
Ulthran Oct 22, 2025
20f631a
Update app/templates/index.html
Ulthran Oct 24, 2025
7660595
Update app/templates/browse_isolates.html
Ulthran Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions app/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<body class="container-fluid">
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('index') }}">mARC Query</a>
<a class="navbar-brand" href="{{ url_for('index') }}">microbialARC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Expand All @@ -37,11 +37,6 @@
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index') }}"><i class="bi bi-house-fill"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('browse_aliquots') }}">
<i class="bi bi-eyedropper"></i> Aliquots
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('browse_isolates') }}"><i class="bi bi-bug-fill"></i> Isolates</a>
</li>
Expand All @@ -56,6 +51,11 @@
<li><a class="dropdown-item" href="{{ url_for('browse_antimicrobials') }}">Antimicrobials</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('browse_aliquots') }}">
<i class="bi bi-eyedropper"></i> Aliquots
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('query') }}"><i class="bi bi-search"></i> Custom Query</a>
</li>
Expand Down
40 changes: 32 additions & 8 deletions app/templates/browse_isolates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,55 @@ <h2>Isolates</h2>
<thead>
<tr>
<th>Sample ID</th>
<th>Received Date</th>
<th>Cryobanking Date</th>
<th>Collection</th>
<th>Collection Year</th>
<th>Subject ID</th>
<th>Specimen ID</th>
<th>Suspected Organism</th>
<th>Special Collection</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
/* Initialize the DataTable with server-side processing */
const isolateUrl = "{{ url_for('show_isolate', isolate_id='') }}";
const renderCollectionYear = (value, type) => {
if (!value) {
return type === 'sort' || type === 'type' ? null : '';
}

let year = '';
const parsedDate = new Date(value);
if (parsedDate.toString() !== 'Invalid Date') {
year = parsedDate.getUTCFullYear().toString();
} else {
const match = /^(\d{4})/.exec(value);
if (match) {
year = match[1];
}
}

if (!year) {
return type === 'sort' || type === 'type' ? null : '';
}

if (type === 'sort' || type === 'type') {
return parseInt(year, 10);
}

return year;
};
const oTable = createServerDataTable('#isolates', '{{ url_for('api_isolates') }}', [
{ data: 'sample_id', render: function(d, type, row) { return '<a href="' + isolateUrl + d + '">' + d + '</a>'; } },
{ data: 'received_date' },
{ data: 'cryobanking_date' },
{ data: 'special_collection' },
{ data: 'received_date', render: function(value, type) { return renderCollectionYear(value, type); } },
{ data: 'subject_id' },
{ data: 'specimen_id' },
{ data: 'suspected_organism' },
{ data: 'special_collection' }
{ data: 'suspected_organism' }
]);

/* Move search box to bottom of summary area */
Expand Down
48 changes: 35 additions & 13 deletions app/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,46 @@

{% block body %}
<div class="container py-5">
<h2 class="mb-3 text-center">Welcome to the microbial ARC isolate database!</h2>
<h2 class="mb-3 text-center">Welcome to the Microbial ARchive and Cryo-collection!</h2>
<p>
This initiative within the umbrella of Center for Microbial Medicine aims to
sequence the genome of every clinically relevant isolate collected at
Children’s Hospital of Philadelphia. The database currently holds, {{ isolate_count }} isolates from
{{ patient_count }} patients.
The microbial ARchive and Cryo-collection (microbialARC) at the Children’s Hospital of Philadelphia is a
biorepository and research platform dedicated to preserving and studying both pathogenic and commensal microorganisms. We are building a meticulously curated strain library that advances the field of microbial genomics by integrating advanced cryo-preservation with genomic and phenotypic characterization.
</p>
<p>
We collaborate closely with clinicians and basic researchers to collect, culture, and sequence microorganisms that shape human health and disease. Through the systematic preservation and genomic characterization of these isolates, microbialARC supports precision surveillance for infection prevention, outbreak response, and mechanistic studies of the microbiome.
</p>
<p>
Our mission is to transform microbial collections into a dynamic resource for discovery—bridging clinical microbiology, genomics, and bioinformatics to accelerate the development of innovative live biotherapeutics and next-generation tools for understanding microbial evolution and antibiotic resistance. By linking clinical, environmental, and genomic data, microbialARC empowers precision medicine and global health initiatives aimed at improving outcomes for children and communities worldwide.
</p>
<p>
The database currently holds {{ isolate_count }} isolates from {{ patient_count }} patients.
</p>

<p>The efforts to curate the isolates include:</p>
<ol>
<ul class="list-unstyled">
{% for collection, val in special_collection_counts.items() %}
<li>{{ collection }} ({{ val[0] }} isolates) {% if val[1] %} - {{ val[1] }} {% endif %}</li>
<li class="mb-2"><strong>{{ collection }}</strong> ({{ val[0] }} isolates){% if val[1] %} - {{ val[1] }}{% endif %}</li>
{% endfor %}
</ol>
<p>
Searching through the database you will find information on the specimens
the bacteria were isolated from, clinical information on subjects, assembled
genomes and their annotations.
</p>
</ul>

<div class="row g-4 mt-5">
<div class="col-md-6 text-center">
<img
src="{{ url_for('static', filename='CHOP_Center_for_Microbial_Medicine.jpg') }}"
class="img-fluid rounded shadow-sm"
style="width: 100%; height: 220px; object-fit: cover;"
alt="Center for Microbial Medicine banner"
>
</div>
<div class="col-md-6 text-center">
<img
src="{{ url_for('static', filename='CHOP_Microbiome_Center.jpg') }}"
class="img-fluid rounded shadow-sm"
style="width: 100%; height: 220px; object-fit: cover;"
alt="CHOP Microbiome Center banner"
>
</div>
</div>
</div>

<div>
Expand Down