Allowing direct update of annotations on case annotations details (#344)

varfish-org · Feb 9, 2022 · b96e3c6 · stolpeo · Feb 9, 2022 · b96e3c6
1 parent 3938fdb
commit b96e3c6
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 31 deletions.
diff --git a/HISTORY.rst b/HISTORY.rst
@@ -44,6 +44,7 @@ End-User Summary
 - Fixing CADD annotation (#319)
 - Adding mitochondrial inheritance to case phenotype annotation (#325)
 - Fix issue with variant annotation export (#328)
+- Allowing direct update of annotations on case annotations details (#344)
 
 Full Change List
 ================
@@ -96,6 +97,7 @@ Full Change List
 - Make migrations compatible with Postgres 14 (#338)
 - DgvSvs and DgvGoldStandardSvs are two different data sources now
 - Adding deep linking into case details tab (#344)
+- Allowing direct update of annotations on case annotations details (#344)
 
 -------
 v0.23.9

diff --git a/svs/templates/svs/filter_result/table.html b/svs/templates/svs/filter_result/table.html
@@ -36,7 +36,7 @@ <h2>
           <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Multi-Variant Options
         </button>
         <div class="dropdown-menu dropdown-menu-left" style="z-index: 1031;">
-          <a class="dropdown-item" id="multivar-bookmark-comment" data-toggle="modal" data-target="#multiVarBookmarkCommentModal">
+          <a class="dropdown-item" id="multivar-bookmark-comment" data-selector=".multivar-selector:checked" data-toggle="modal" data-target="#multiVarBookmarkCommentModal">
             <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Flag & Comment
           </a>
         </div>

diff --git a/varfish/static/js/flags_comments.js b/varfish/static/js/flags_comments.js
@@ -221,16 +221,21 @@ $('body').on('click', function (e) {
     });
 });
 
-function clickMultiVariantBookmark() {
+function clickMultiVariantBookmark(event) {
   // Compile template.
   var bookmarkModalTpl = $.templates("#multi-bookmark-flags-modal");
-  var multiVars = $(".multivar-selector:checked");
-  var variantList = [];
-  var rowIds = [];
+
+  let selector = $(event.target).data('selector')
+  if (!selector) {
+    selector = $(event.target).closest('.btn').data('selector')
+  }
+  const multiVars = $(selector);
+  const variantList = [];
+  const rowIds = [];
   multiVars.each(function(i, e) {
     if (structural_or_small == "small") {
-      var dataVariant = $(e).val();
-      var arrVariant = dataVariant.split("-");
+      const dataVariant = $(e).val();
+      const arrVariant = dataVariant.split("-");
       variantList.push({
         case: $(e).data("case"),
         release: arrVariant[0],
@@ -576,5 +581,6 @@ function toggleMultiVarOptionsDropdown() {
 $(document).on("click", ".variant-bookmark-comment-group", clickVariantBookmark);
 $(document).on("click", ".variant-acmg", clickVariantAcmgRating);
 $(document).on("click", "#multivar-bookmark-comment", clickMultiVariantBookmark);
+$(document).on("click", ".singlevar-bookmark-comment", clickMultiVariantBookmark);
 $(document).on("click", ".multivar-selector", toggleMultiVarOptionsDropdown);
 
diff --git a/variants/templates/variants/case/detail_annotation.html b/variants/templates/variants/case/detail_annotation.html
@@ -13,30 +13,32 @@ <h4>
         Annotated Variants
 
         <div class="float-right">
-          <div class="dropdown">
-            <button type="button" id="multiVarButton" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Multi-Variant Options
-            </button>
-            <div class="dropdown-menu dropdown-menu-left" style="z-index: 1031;">
-              <a class="dropdown-item" id="multivar-bookmark-comment" data-toggle="modal" data-target="#multiVarBookmarkCommentModal">
-                <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Flag & Comment
-              </a>
+          <div class="btn-group btn-sm" role="group">
+            <div class="btn-group">
+              <button type="button" id="multiVarButton" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Multi-Variant Options
+              </button>
+              <div class="dropdown-menu dropdown-menu-left" style="z-index: 1031;">
+                <a class="dropdown-item" id="multivar-bookmark-comment" data-selector=".multivar-selector:checked" data-toggle="modal" data-target="#multiVarBookmarkCommentModal">
+                  <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i> Flag & Comment
+                </a>
+              </div>
             </div>
-          </div>
-          <div class="dropdown pl-2">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-              <i class="iconify" data-icon="fa-solid:cloud-download-alt"></i>
-              Download
-            </button>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="{% url 'variants:case-download-annotations' project=project.sodar_uuid case=case.sodar_uuid %}?format=xlsx">
-                <i class="iconify" data-icon="fa-regular:file-excel"></i>
-                Excel Format
-              </a>
-              <a class="dropdown-item" href="{% url 'variants:case-download-annotations' project=project.sodar_uuid case=case.sodar_uuid %}?format=txt">
-                <i class="iconify" data-icon="fa-regular:file-alt"></i>
-                TSV Format
-              </a>
+            <div class="btn-group">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+                <i class="iconify" data-icon="fa-solid:cloud-download-alt"></i>
+                Download
+              </button>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="{% url 'variants:case-download-annotations' project=project.sodar_uuid case=case.sodar_uuid %}?format=xlsx">
+                  <i class="iconify" data-icon="fa-regular:file-excel"></i>
+                  Excel Format
+                </a>
+                <a class="dropdown-item" href="{% url 'variants:case-download-annotations' project=project.sodar_uuid case=case.sodar_uuid %}?format=txt">
+                  <i class="iconify" data-icon="fa-regular:file-alt"></i>
+                  TSV Format
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -66,7 +68,7 @@ <h4>
         {% for data in commentsflags.values %}
           <tr id="flags-{{ data.variants.0|smallvar_description }}">
             <td>
-              <input type="checkbox" value="{{ data.variants.0|smallvar_description }}" class="multivar-selector" data-case="{{ case.sodar_uuid }}">
+              <input type="checkbox" value="{{ data.variants.0|smallvar_description }}" class="multivar-selector" data-case="{{ case.sodar_uuid }}" id="checkbox-{{ forloop.counter }}">
             </td>
             <td style="max-width: 100px;">
               <div class="sodar-overflow-container sodar-overflow-hover">
@@ -172,6 +174,12 @@ <h4>
               <p id="small-variant-comment-{{ data.variants.0.chromosome }}-{{ data.variants.0.start }}-{{ data.variants.0.reference }}-{{ data.variants.0.alternative }}-empty" class="text-muted font-italic text-center"{% if data.comments %} style="display: none;"{% endif %}>No comments.</p>
             </td>
             <td>
+              <div class="btn-group" role="group">
+                <span class="btn btn-sm btn-outline-primary" style="pointer-events: none">Update</span>
+                <a class="btn btn-sm btn-primary singlevar-bookmark-comment" data-selector="#checkbox-{{ forloop.counter }}" data-toggle="modal" data-target="#multiVarBookmarkCommentModal">
+                  <i class="iconify" data-icon="fluent:bookmark-multiple-16-filled"></i>
+                </a>
+              </div>
               <a
                 onclick="javascript:$.ajax({url: 'http://127.0.0.1:60151/goto?locus=chr{{ data.variants.0.chromosome }}:{{ data.variants.0.start }}-{{ data.variants.0.end }}'})"
                 href="#"