Skip to content

Commit

Permalink
Genome cards genome details modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@neoformit
neoformit committed Dec 7, 2023
1 parent 3fbd8ee commit 73ef1f9
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 14 deletions.
18 changes: 18 additions & 0 deletions apollo_portal/tracks/migrations/0012_alter_genome_ncbi_bioproject.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Generated by Django 4.2 on 2023-12-07 20:33

from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
('tracks', '0011_rename_description_genome_description_html'),
]

operations = [
migrations.AlterField(
model_name='genome',
name='ncbi_bioproject',
field=models.CharField(blank=True, max_length=12, null=True),
),
]
6 changes: 5 additions & 1 deletion apollo_portal/tracks/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ class Genome(models.Model):
apollo_url = models.URLField(null=True, blank=True)
description_html = models.TextField(null=True, blank=True)
reference = models.TextField(null=True, blank=True)
ncbi_bioproject = models.TextField(null=True, blank=True)
doi = models.CharField(max_length=255, null=True, blank=True)
ncbi_bioproject = models.CharField(max_length=12, null=True, blank=True)
_metadata_yaml = models.TextField(null=True, blank=True)

def __str__(self):
Expand Down Expand Up @@ -114,6 +114,10 @@ def as_json(self):
"condition": self.condition,
"thumbnail": self.img_path_or_placeholder,
"apollo_url": self.apollo_url,
"description_html": self.description_html,
"reference": self.reference,
"doi": self.doi,
"ncbi_bioproject": self.ncbi_bioproject,
"metadata": self.metadata,
}

Expand Down
13 changes: 12 additions & 1 deletion apollo_portal/tracks/static/tracks/css/genome-cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,22 @@
width: 100%;
margin: 0 auto;
}
.lab-img {
.modal-header-img {
height: 300px;
width: auto;
margin: 0 auto;
}
#genomeDetailsModalBody table {
font-size: .8rem;
}
#genomeDetailsModalBody tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#genomeDetailsModalBody td {
padding: .2rem .5rem;
border: none;
}
.view-select-buttons button:last-child {
margin-left: -3px;
border-top-left-radius: 0;
Expand Down
130 changes: 118 additions & 12 deletions apollo_portal/tracks/templates/tracks/snippets/genome-cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
{% verbatim %}
<div id="app">
<!-- View selector -->
<div class="row justify-content-between">
<div class="row justify-content-between py-1">
<div class="col">
<input class="form-control" type="text" placeholder="Search" @input="(e) => this.textSearch = e.target.value" style="max-width: 450px;">
</div>
Expand Down Expand Up @@ -195,7 +195,7 @@
</button>
</p>
<div>
<strong>Species:</strong> {{ genome.species }}
<strong>Species:</strong> <i>{{ genome.species }}</i>
</div>
<div v-if="genome.strain">
<strong>Strain:</strong> {{ genome.strain }}
Expand All @@ -216,9 +216,16 @@
data-title="View public genome tracks on Apollo"
data-placement="bottom"
>
View
Browser
</button>
</a>

<button
class="btn btn-primary"
@click="showGenome(genome)"
>
Info
</button>
</div>
</div>
</div>
Expand All @@ -245,6 +252,7 @@
<th>Strain</th>
<th>Condition</th>
<th></th>
<th></th>
</thead>
<tr
v-for="genome in filteredGenomes"
Expand All @@ -256,19 +264,30 @@
{{ genome.lab }} Lab
</button>
</td>
<td>{{ genome.species }}</td>
<td><i>{{ genome.species }}</i></td>
<td>{{ genome.strain }}</td>
<td>{{ genome.condition }}</td>
<td>
<button
class="btn btn-primary"
<a
:href="genome.apollo_url"
target="_blank"
data-toggle="tooltip"
data-title="View genome tracks on Apollo"
data-placement="top"
>
View
<button
class="btn btn-primary"
data-toggle="tooltip"
data-title="View genome tracks on Apollo"
data-placement="bottom"
>
Browser
</button>
</a>
</td>
<td>
<button
class="btn btn-primary"
@click="showGenome(genome)"
>
Info
</button>
</td>
</tr>
Expand All @@ -290,7 +309,7 @@ <h5 id="labDetailsModalTitle" class="modal-title">Lab Details</h5>

<div v-else>
<img
class="lab-img"
class="modal-header-img"
:src="labDetails.image"
:alt="labDetails.name"
/>
Expand Down Expand Up @@ -347,6 +366,85 @@ <h3 class="text-center">{{ labDetails.name }} Lab</h3>
</div>
</div>

<div class="modal fade" id="genomeDetailsModal">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 id="genomeDetailsModalTitle" class="modal-title">Genome details</h5>
<span class="close" data-dismiss="modal" @click="resetGenomeDetails">&times;</span>
</div>

<div v-if="genomeDetails" id="genomeDetailsModalBody" class="modal-body">
<img
class="modal-header-img"
:src="genomeDetails.thumbnail"
:alt="genomeDetails.name"
/>

<h3 class="text-center">{{ genomeDetails.name }}</h3>

<p v-html="genomeDetails.description_html || '<i>No description</i>'"></p>

<table class="table my-3">
<tr>
<td>
<strong>Species</strong>
</td>
<td><i>{{ genomeDetails.species }}</i></td>
</tr>
<tr>
<td>
<strong>Strain</strong>
</td>
<td>{{ genomeDetails.strain }}</td>
</tr>
<tr>
<td>
<strong>Condition</strong>
</td>
<td>{{ genomeDetails.condition }}</td>
</tr>
<tr v-if="genomeDetails.reference || genomeDetails.doi">
<td>
<strong>Reference</strong>
</td>
<td>
{{ genomeDetails.reference }}
<a v-if="genomeDetails.doi" :href="'https://doi.org/' + genomeDetails.doi" target="_blank">
{{ genomeDetails.doi }}
</a>
</td>
</tr>
<tr v-if="genomeDetails.ncbi_bioproject">
<td>
<strong>NCBI BioProject</strong>
</td>
<td>
<a :href="'https://ncbi.nlm.nih.gov/bioproject/' + genomeDetails.ncbi_bioproject" target="_blank">
{{ genomeDetails.ncbi_bioproject }}
</a>
</td>
</tr>
<tr v-for="key in Object.keys(genomeDetails.metadata)" :key="key">
<td>
<strong>{{ key }}</strong>
</td>
<td>
{{ genomeDetails.metadata[key] }}
</td>
</tr>
</table>
</div>

<div class="modal-footer justify-content-center">
<button class="btn btn-primary" data-dismiss="modal" @click="resetGenomeDetails">
Close
</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="filterHelpModal">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
Expand All @@ -371,7 +469,7 @@ <h5 id="filterHelpTitle" class="modal-title">Filtering genome records</h5>
</tr>
<tr>
<td style="border-bottom: 1px solid #ddd; background: #eee;">Condition <small>(optional)</small></td>
<td style="border-bottom: 1px solid #ddd;">Environmental or experimental condition that resulted in this genome (e.g. genetic manipulation, mutagen exposure, cancer).</td>
<td style="border-bottom: 1px solid #ddd;">Environmental or experimental condition that resulted in this genome (e.g. genetic manipulation, chemical exposure, cancer).</td>
</tr>
<!-- TBC: -->
<!-- <tr>
Expand Down Expand Up @@ -433,6 +531,7 @@ <h5 id="filterHelpTitle" class="modal-title">Filtering genome records</h5>
},
},
labDetails: null,
genomeDetails: null,
views: {
CARDVIEW: 0,
LISTVIEW: 1,
Expand Down Expand Up @@ -507,12 +606,19 @@ <h5 id="filterHelpTitle" class="modal-title">Filtering genome records</h5>
this.labDetails = labData;
});
},
showGenome (data) {
this.genomeDetails = data;
$('#genomeDetailsModal').modal('show');
},
showFilterHelpModal () {
$('#filterHelpModal').modal('show');
},
resetLabDetails () {
this.labDetails = null;
},
resetGenomeDetails () {
this.GenomeDetails = null;
},
setFilterOptions () {
Object.keys(this.filters).forEach(field => {
this.filters[field].options = this.getFilterOptions(field);
Expand Down

0 comments on commit 73ef1f9

Please sign in to comment.