Move genome card/list buttons to modal

AU-Biocommons · Dec 13, 2023 · c64aae4 · c64aae4
1 parent 945fabd
commit c64aae4
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 87 deletions.
diff --git a/apollo_portal/genomes/templates/genomes/snippets/genome-cards.html b/apollo_portal/genomes/templates/genomes/snippets/genome-cards.html
@@ -206,20 +206,6 @@
         </div>
 
         <div class="card-footer text-center">
-          <a
-            :href="genome.apollo_url"
-            target="_blank"
-          >
-            <button
-              class="btn btn-primary"
-              data-toggle="tooltip"
-              data-title="View public genome tracks on Apollo"
-              data-placement="bottom"
-            >
-              Browser
-            </button>
-          </a>
-
           <button
             class="btn btn-primary"
             @click="showGenome(genome)"
@@ -252,7 +238,6 @@
         <th>Strain</th>
         <th>Condition</th>
         <th></th>
-        <th></th>
       </thead>
       <tr
         v-for="genome in filteredGenomes"
@@ -267,21 +252,6 @@
         <td><i>{{ genome.species }}</i></td>
         <td>{{ genome.strain }}</td>
         <td>{{ genome.condition }}</td>
-        <td>
-          <a
-            :href="genome.apollo_url"
-            target="_blank"
-          >
-            <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"
@@ -438,7 +408,26 @@ <h3 class="text-center">{{ genomeDetails.name }}</h3>
           </table>
         </div>
 
-        <div class="modal-footer justify-content-center">
+        <div v-if="genomeDetails" class="modal-footer justify-content-center">
+          <a
+            :href="genomeDetails.apollo_url"
+            target="_blank"
+            class="btn btn-primary"
+            data-toggle="tooltip"
+            data-title="View public genome tracks on Apollo"
+            data-placement="bottom"
+          >
+            Apollo browser
+          </a>
+          <a
+            :href="'/genome/' + genomeDetails.id + '/tracks/'"
+            class="btn btn-primary"
+            data-toggle="tooltip"
+            data-title="View available tracks for this genome"
+            data-placement="bottom"
+          >
+            View tracks
+          </a>
           <button class="btn btn-primary" data-dismiss="modal" @click="resetGenomeDetails">
             Close
           </button>

diff --git a/apollo_portal/genomes/templates/genomes/tracks.html b/apollo_portal/genomes/templates/genomes/tracks.html
@@ -7,67 +7,75 @@
 
 {% block content %}
 <div class="container">
-  <h1>Genome tracks: {{ genome.name }}</h1>
+  <h1 class="mb-3">Genome tracks: {{ genome.name }}</h1>
 
   <hr class="my-3">
 
-  <table>
-    {% if genome.description_html %}
-    <tr>
-      <td>
-        <strong>Genome description</strong>
-      </td>
-      <td>
-        {{ genome.description_html|safe }}
-      </td>
-    </tr>
-    {% endif %}
-    <tr>
-      <td>
-        <strong>Species</strong>
-      </td>
-      <td><i>{{ genome.species }}</i></td>
-    </tr>
-    <tr>
-      <td>
-        <strong>Strain</strong>
-      </td>
-      <td>{{ genome.strain }}</td>
-    </tr>
-    <tr>
-      <td>
-        <strong>Condition</strong>
-      </td>
-      <td>{{ genome.condition }}</td>
-    </tr>
-    {% if genome.reference or genome.doi %}
-    <tr>
-      <td>
-        <strong>Reference</strong>
-      </td>
-      <td>
-        {% if genome.reference %}
-        {{ genome.reference }}
+  <div class="row">
+    <div class="col">
+
+      <table>
+        {% if genome.description_html %}
+        <tr>
+          <td>
+            <strong>Genome description</strong>
+          </td>
+          <td>
+            {{ genome.description_html|safe }}
+          </td>
+        </tr>
+        {% endif %}
+        <tr>
+          <td>
+            <strong>Species</strong>
+          </td>
+          <td><i>{{ genome.species }}</i></td>
+        </tr>
+        <tr>
+          <td>
+            <strong>Strain</strong>
+          </td>
+          <td>{{ genome.strain }}</td>
+        </tr>
+        <tr>
+          <td>
+            <strong>Condition</strong>
+          </td>
+          <td>{{ genome.condition }}</td>
+        </tr>
+        {% if genome.reference or genome.doi %}
+        <tr>
+          <td>
+            <strong>Reference</strong>
+          </td>
+          <td>
+            {% if genome.reference %}
+            {{ genome.reference }}
+            {% endif %}
+            {% if genome.doi %}
+            <a href="https://doi.org/{{ genome.doi }}" target="_blank">{{ genome.doi }}</a>
+            {% endif %}
+          </td>
+        </tr>
         {% endif %}
-        {% if genome.doi %}
-        <a href="https://doi.org/{{ genome.doi }}" target="_blank">{{ genome.doi }}</a>
+        {% if genome.ncbi_bioproject %}
+        <tr>
+          <td>
+            <strong>NCBI BioProject</strong>
+          </td>
+          <td>
+            <a href="https://ncbi.nlm.nih.gov/bioproject/{{ genome.ncbi_bioproject }}" target="_blank">
+              {{ genome.ncbi_bioproject }}
+            </a>
+          </td>
+        </tr>
         {% endif %}
-      </td>
-    </tr>
-    {% endif %}
-    {% if genome.ncbi_bioproject %}
-    <tr>
-      <td>
-        <strong>NCBI BioProject</strong>
-      </td>
-      <td>
-        <a href="https://ncbi.nlm.nih.gov/bioproject/{{ genome.ncbi_bioproject }}" target="_blank">
-          {{ genome.ncbi_bioproject }}
-        </a>
-      </td>
-    </tr>
-    {% endif %}
-  </table>
+      </table>
+    </div>
+    <div class="col-auto">
+      <img style="height: 250px;" src="{{ genome.thumbnail }}" alt="{{ genome.species }} image">
+    </div>
+  </div>
 
   <hr class="my-3">