redesign sequence page

proost · Oct 26, 2016 · 39354af · 39354af
1 parent 02e442c
commit 39354af
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 deletions.
diff --git a/planet/controllers/sequence.py b/planet/controllers/sequence.py
@@ -45,7 +45,7 @@ def sequence_view(sequence_id):
 
     :param sequence_id: ID of the sequence
     """
-    current_sequence = Sequence.query.options(undefer('coding_sequence')).get_or_404(sequence_id)
+    current_sequence = Sequence.query.get_or_404(sequence_id)
 
     return render_template('sequence.html',
                            sequence=current_sequence,
@@ -58,6 +58,38 @@ def sequence_view(sequence_id):
                            )
 
 
+@sequence.route('/modal/coding/<sequence_id>')
+def sequence_modal_coding(sequence_id):
+    """
+    Returns the coding sequence in a modal
+
+    :param sequence_id: ID of the sequence
+    :return: Response with the fasta file
+    """
+    current_sequence = Sequence.query\
+        .options(undefer('coding_sequence'))\
+        .options(noload('xrefs'))\
+        .get_or_404(sequence_id)
+
+    return render_template('modals/sequence.html', sequence=current_sequence, coding=True)
+
+
+@sequence.route('/modal/protein/<sequence_id>')
+def sequence_modal_protein(sequence_id):
+    """
+    Returns the protein sequence in a modal
+
+    :param sequence_id: ID of the sequence
+    :return: Response with the fasta file
+    """
+    current_sequence = Sequence.query\
+        .options(undefer('coding_sequence'))\
+        .options(noload('xrefs'))\
+        .get_or_404(sequence_id)
+
+    return render_template('modals/sequence.html', sequence=current_sequence, coding=False)
+
+
 @sequence.route('/fasta/coding/<sequence_id>')
 def sequence_fasta_coding(sequence_id):
     """

diff --git a/planet/static/css/main.css b/planet/static/css/main.css
@@ -305,4 +305,8 @@ submenu
 #legend {
     display:none;
     margin-top:800px;
+}
+
+.breadcrumb {
+    margin-top:15px
 }
diff --git a/planet/templates/modals/sequence.html b/planet/templates/modals/sequence.html
@@ -0,0 +1,14 @@
+<div class="modal-header">
+    {% if  coding %}
+    <h4 class="modal-title" id="myModalLabel"><strong>{{ sequence.name }}</strong> coding sequence<small>(length: {{ sequence.coding_sequence|length }} bp)</small></h4>
+    {% else %}
+    <h4 class="modal-title" id="myModalLabel"><strong>{{ sequence.name }}</strong> protein sequence<small>(length: {{ sequence.protein_sequence|length }} aa)</small></h4>
+    {% endif %}
+
+</div>
+<div class="modal-body" syle="width:400px">
+    <div class="well sequence">{%- if coding -%}{{ sequence.coding_sequence }}{% else %}{{ sequence.protein_sequence }}{% endif %}</div>
+</div>
+<div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+</div>
diff --git a/planet/templates/sequence.html b/planet/templates/sequence.html
@@ -5,33 +5,26 @@
 <div class="top-pad">
 
     {% if sequence %}
-    <h1>Sequence: <strong>{{ sequence.name }}</strong> <small>({{ sequence.type }})</small></h1>
-
-    Species: <em><a href="{{ url_for('species.species_view', species_id=sequence.species.id) }}">{{ sequence.species.name }}</a></em>
+    <ol class="breadcrumb">
+        <li><a href="{{ url_for('main.screen') }}">Home</a></li>
+        <li><a href="{{ url_for('species.species_view', species_id=sequence.species.id) }}"><em>{{ sequence.species.name }}</em></a></li>
+        <li class="active">Sequence: <strong>{{ sequence.name }}</strong></li>
+    </ol>
+    <h1><strong>{{ sequence.name }}</strong> <small>({{ sequence.type }})</small></h1>
     <br />
 
     {% if sequence.description %}
 
     <strong>Description: </strong> {{sequence.description}}
 
-    {% endif %}
+    {% else %}
 
-    <h3>Coding Sequence <small>(length: {{ sequence.coding_sequence|length }} bp)
-        <a href="{{ url_for('sequence.sequence_fasta_coding', sequence_id=sequence.id) }}" data-toggle="tooltip" data-placement="top" title="Download coding sequence">
-            <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
-        </a></small></h3>
-    <div class="well sequence">{{ sequence.coding_sequence }}</div>
+    <span class="text-muted"><em>No description available</em></span>
 
+    {% endif %}
     <br />
-    {% if sequence.type == 'protein_coding' %}
-    <h3>Protein Sequence <small>(length: {{ sequence.protein_sequence|length }} aa)
-            <a href="{{ url_for('sequence.sequence_fasta_protein', sequence_id=sequence.id) }}" data-toggle="tooltip" data-placement="top" title="Download protein sequence">
-            <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
-        </a></small></h3>
-    <div class="well sequence">{{ sequence.protein_sequence }}</div>
+    <p>Sequence: <a href="{{ url_for('sequence.sequence_modal_coding', sequence_id=sequence.id) }}" data-target="#profileModal">coding</a> (<a href="{{ url_for('sequence.sequence_fasta_coding', sequence_id=sequence.id) }}">download</a>) {%- if sequence.type == 'protein_coding' -%}, <a href="{{ url_for('sequence.sequence_modal_protein', sequence_id=sequence.id) }}" data-target="#profileModal">protein</a> (<a href="{{ url_for('sequence.sequence_fasta_protein', sequence_id=sequence.id) }}">download</a>) {% endif %}</p>
 
-    <br />
-    {% endif %}
     <h3>Sequence details</h3>
     <div class="row">
         <div class="col-lg-4 col-md-6 col-sm-12">