Re-mark all cells of selected fragments in the Browse table when the

table is expanded

index.html

@@ -345,6 +345,23 @@ async function browse_fragment_clicked(elem, ntc, seq) {
   structural_in_table_clicked(elem, 'wva-app-browse', 'wva-app-browse-viewer', handler);
 }
 
+/*
+ * Walks the Browse table and marks all cells of selected fragments with the appropriate color.
+ *
+ * This has to be done when the Browse table is collapsed and then expanded again.
+ */
+function mark_selected_in_browse() {
+  for (const ntc of WATNA_NTCS) {
+    for (const seq of watna_sequences()) {
+      const fragId = mkFragId(ntc, seq);
+      const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
+      if (elem) {
+        watna_set_elem_color(elem, 'wva-app-browse', fragId);
+      }
+    }
+  }
+}
+
 /*
  * Handles a click on a structure in the Predictions tab
  */
@@ -476,14 +493,17 @@ function mk_ntc_seq_table_code(ntcs, titleHTML) {
 }
 
 /* Sequences horizontal, NtC classes vertical */
-function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_id, coll_expd_callback) {
+function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_id, coll_expd_callbacks) {
   let has_unreliable = false;
   let code = '';
   let code_collapsed = '';
 
   COLL_EXPD_CALLBACKS[tainer_id] = (state) => {
-    if (coll_expd_callback)
-      coll_expd_callback(state);
+    if (coll_expd_callbacks) {
+      for (const callback of coll_expd_callbacks) {
+        callback(state);
+      }
+    }
   };
 
   code += '<table class="ntc-seq-table">';
@@ -492,10 +512,11 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
   if (tainer_id) {
     code += '<div class="collapsible-table-header">'
     code += title;
-      code += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].collapsed; COLL_EXPD_CALLBACKS['${tainer_id}']('collapsed'); redraw_molstar();"><img src="assets/imgs/triangle-down.svg" /></div>`;
+    code += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].collapsed; COLL_EXPD_CALLBACKS['${tainer_id}']('collapsed'); redraw_molstar();"><img src="assets/imgs/triangle-down.svg" /></div>`;
     code += '</div>';
-  } else
+  } else {
     code = `<div class="ntc-seq-title-text">${title}</div>`;
+  }
   code += '</td></tr>';
 
   /* Make table header */
@@ -526,9 +547,11 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
           ast = '<span class="asterisk">*</span>';
           has_unreliable = true;
         }
+        const fragId = mkFragId(ntc, seq);
         row += `<td class="clickable" id="${fragment_cell_id(mkFragId(ntc, seq), 'browse')}" onClick='browse_fragment_clicked(this, "${ntc}", "${seq}");'>${waterCnt}${ast}</td>`;
-      } else
+      } else {
         row += `<td class="disabled">${waterCnt}</td>`;
+      }
     }
     row += '</tr>';
     if (row_has_nonzero) {
@@ -583,8 +606,6 @@ function fill_zee_table() {
 
 function fill_browse_table() {
   const change_responsive_width = (state) => {
-    console.log(state);
-
     const states = [ 'collapsed', 'expanded' ];
     const classes = {
       'collapsed': [
@@ -621,7 +642,7 @@ function fill_browse_table() {
     '<div><strong>Table 3:</strong> Number of water molecules for each NtC/sequence category.</div>',
     '<div class="dont-wrap"><strong>Table 3:</strong> ...</div>',
     'browse-fragments-table',
-    change_responsive_width
+    [ change_responsive_width, mark_selected_in_browse ]
   );
 
   PREGENERATED_TABLES['browse-fragments-table'] = {

molstar @ 8616af76

-Subproject commit 88b8e7451fa6887c800befd6beab2bc7e017c499
+Subproject commit 8616af76c0d7d0a5a186d500e9afb4d33adf8863