Use different flow switching threshold when the table of all NtCs is

collapsed

index.html

@@ -93,12 +93,12 @@
 
 <!-- ATLAS tab -->
 <div id="browse_tab" class="tabcontent">
-  <div class="proportional-layout proportional-layout-responsive-flow-wide shadowed-block">
-    <div id="browse-layout-first">
+  <div id="browse-layout-container" class="proportional-layout proportional-layout-responsive-flow-wide shadowed-block">
+    <div id="browse-layout-first" class="browse-layout-first-expanded">
       <div id='browse-fragments-table'></div>
       <p id="wva-browse-status"></p>
     </div>
-    <div id="browse-layout-second">
+    <div id="browse-layout-second" class="browse-layout-second-expanded">
       <div id="wva-app-browse"></div>
     </div>
   </div>
@@ -257,7 +257,8 @@ const WATNA_PRELOAD_ABZ = true;
 
 let SCROLL_EVT_HANDLERS = [];
 let CURRENT_ACTIVE_TAB = null;
-let PREGENERATED_TABLES = {}
+let PREGENERATED_TABLES = {};
+let COLL_EXPD_CALLBACKS = {};
 
 function fragment_cell_id(fragId, tag) {
   return `fragment-cell-${fragId}-${tag}`;
@@ -475,12 +476,15 @@ 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) {
+function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_id, coll_expd_callback) {
   let has_unreliable = false;
   let code = '';
   let code_collapsed = '';
 
-  const toggle_func = (c) => toggler(c);
+  COLL_EXPD_CALLBACKS[tainer_id] = (state) => {
+    if (coll_expd_callback)
+      coll_expd_callback(state);
+  };
 
   code += '<table class="ntc-seq-table">';
   /* Make table caption */
@@ -488,7 +492,7 @@ 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; 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
     code = `<div class="ntc-seq-title-text">${title}</div>`;
@@ -539,7 +543,7 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
     code_collapsed += '<tr><td>';
     code_collapsed += '<div class="collapsible-table-header">'
     code_collapsed += title_collapsed;
-    code_collapsed += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].expanded; redraw_molstar();"><img src="assets/imgs/triangle-left.svg" /></div>`;
+    code_collapsed += `<div class="wva-pushbutton wva-pushbutton-border wva-symbolic-pushbutton" onclick="document.querySelector('#${tainer_id}').innerHTML = PREGENERATED_TABLES['${tainer_id}'].expanded; COLL_EXPD_CALLBACKS['${tainer_id}']('expanded'); redraw_molstar();"><img src="assets/imgs/triangle-left.svg" /></div>`;
     code_collapsed += '</div>';
     code_collapsed += '</td></tr>';
     code_collapsed += '<tr><td>...</td></tr>';
@@ -578,11 +582,46 @@ function fill_zee_table() {
 }
 
 function fill_browse_table() {
+  const change_responsive_width = (state) => {
+    console.log(state);
+
+    const states = [ 'collapsed', 'expanded' ];
+    const classes = {
+      'collapsed': [
+        'browse-layout-first-collapsed',
+        'browse-layout-second-collapsed',
+        'proportional-layout-responsive-flow-narrow',
+      ],
+      'expanded': [
+        'browse-layout-first-expanded',
+        'browse-layout-second-expanded',
+        'proportional-layout-responsive-flow-wide',
+      ],
+    };
+
+    const elems = [
+      document.querySelector('#browse-layout-first'),
+      document.querySelector('#browse-layout-second'),
+      document.querySelector('#browse-layout-container'),
+    ];
+
+    if (!elems[0] || !elems[1])
+      return;
+
+    const switchingOrder = state === 'collapsed' ? [ states[1], states[0] ] : [ states[0], states[1] ];
+
+    for (let idx = 0; idx < elems.length; idx++)
+      elems[idx].classList.remove(classes[switchingOrder[0]][idx]);
+    for (let idx = 0; idx < elems.length; idx++)
+      elems[idx].classList.add(classes[switchingOrder[1]][idx]);
+  };
+
   const { code, code_collapsed, has_unreliable } = mk_seq_ntc_table_code(
     WATNA_NTCS, watna_sequences(),
     '<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'
+    'browse-fragments-table',
+    change_responsive_width
   );
 
   PREGENERATED_TABLES['browse-fragments-table'] = {

watna.css

@@ -43,7 +43,16 @@ td.disabled {
 }
 
 @media screen and (min-width: 100em) {
-  #browse-layout-first {
+  .browse-layout-first-expanded {
+    width: min-content;
+    overflow: scroll;
+    position: relative;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+@media screen and (min-width: 50em) {
+  .browse-layout-first-collapsed {
     width: min-content;
     overflow: scroll;
     position: relative;
@@ -53,7 +62,17 @@ td.disabled {
 }
 
 @media screen and (max-width: 100em) {
-  #browse-layout-first {
+  .browse-layout-first-expanded {
+    flex: 1;
+    min-height: 6em;
+    overflow: scroll;
+    position: relative;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+@media screen and (max-width: 50em) {
+  .browse-layout-first-collapsed {
     flex: 1;
     min-height: 6em;
     overflow: scroll;
@@ -68,14 +87,27 @@ td.disabled {
 }
 
 @media screen and (min-width: 100em) {
-  #browse-layout-second {
+  .browse-layout-second-expanded {
+    display: flex;
+    flex: 1;
+  }
+}
+@media screen and (min-width: 50em) {
+  .browse-layout-second-collapsed {
     display: flex;
     flex: 1;
   }
 }
 
 @media screen and (max-width: 100em) {
-  #browse-layout-second {
+  .browse-layout-second-expanded {
+    display: flex;
+    flex: 3;
+    overflow: auto;
+  }
+}
+@media screen and (max-width: 50em) {
+  .browse-layout-second-collapsed {
     display: flex;
     flex: 3;
     overflow: auto;
@@ -319,6 +351,18 @@ td.disabled {
   }
 }
 
+@media screen and (min-width: 50em) {
+  .proportional-layout-responsive-flow-narrow {
+    flex-direction: row;
+  }
+}
+
+@media screen and (max-width: 50em) {
+  .proportional-layout-responsive-flow-narrow {
+    flex-direction: column;
+  }
+}
+
 .pushbutton {
   -moz-appearance: none;
   -webkit-appearance: none;