Rename Atlas tab back to Browse

index.html

@@ -27,9 +27,9 @@
     <img src="../imgs/icons/home.svg" class="navtab-icon">
     <span class="tab-caption">A- B- Z-</span>
   </div>
-  <div class="navtab-pushbutton flex-item-samedim" onclick="openTabNA(event, 'atlas_tab')">
+  <div class="navtab-pushbutton flex-item-samedim" onclick="openTabNA(event, 'browse_tab')">
     <img src="../imgs/icons/globe.svg" class="navtab-icon">
-    <span class="tab-caption">Atlas</span>
+    <span class="tab-caption">Browse</span>
   </div>
   <div class="navtab-pushbutton flex-item-samedim" onclick="openTabNA(event, 'predictions_tab')">
     <img src="../imgs/icons/calculator.svg" class="navtab-icon">
@@ -84,14 +84,14 @@
 
 
 <!-- ATLAS tab -->
-<div id="atlas_tab" class="tabcontent">
+<div id="browse_tab" class="tabcontent">
   <div class="proportional-layout proportional-layout-responsive-flow-wide shadowed-block">
-    <div id="atlas-layout-first">
-      <div id='atlas-fragments-table'></div>
-      <p id="wva-atlas-status"></p>
+    <div id="browse-layout-first">
+      <div id='browse-fragments-table'></div>
+      <p id="wva-browse-status"></p>
     </div>
-    <div id="atlas-layout-second">
-      <div id="wva-app-atlas"></div>
+    <div id="browse-layout-second">
+      <div id="wva-app-browse"></div>
     </div>
   </div>
 </div>
@@ -255,7 +255,7 @@ function openTabNA(evt, tabName) {
   openNavTab(evt, tabName);
   CURRENT_ACTIVE_TAB = tabName;
 
-  if ([ 'abz_tab', 'atlas_tab', 'predictions_tab' ].includes(tabName)) {
+  if ([ 'abz_tab', 'browse_tab', 'predictions_tab' ].includes(tabName)) {
     redraw_molstar();
   }
 
@@ -303,11 +303,11 @@ function abz_fragment_clicked(elem, ntc, seq) {
 /*
  * Handles a click on a fragment in the Atlas tab
  */
-async function atlas_fragment_clicked(elem, ntc, seq) {
+async function browse_fragment_clicked(elem, ntc, seq) {
   const handler = (appId, onError) => {
     watna_fragment_clicked(elem, appId, ntc, seq, REF_DINU_NAME, onError);
   };
-  structural_in_table_clicked(elem, 'wva-app-atlas', 'wva-app-atlas-viewer', handler);
+  structural_in_table_clicked(elem, 'wva-app-browse', 'wva-app-browse-viewer', handler);
 }
 
 /*
@@ -476,7 +476,7 @@ function mk_seq_ntc_table_code(ntcs, sequences, title, title_collapsed, tainer_i
           ast = '<span class="asterisk">*</span>';
           has_unreliable = true;
         }
-        row += `<td class="clickable" id="${fragment_cell_id(mkFragId(ntc, seq), 'atlas')}" onClick='atlas_fragment_clicked(this, "${ntc}", "${seq}");'>${waterCnt}${ast}</td>`;
+        row += `<td class="clickable" id="${fragment_cell_id(mkFragId(ntc, seq), 'browse')}" onClick='browse_fragment_clicked(this, "${ntc}", "${seq}");'>${waterCnt}${ast}</td>`;
       } else
         row += `<td class="disabled">${waterCnt}</td>`;
     }
@@ -531,20 +531,20 @@ function fill_zee_table() {
   }
 }
 
-function fill_atlas_table() {
+function fill_browse_table() {
   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>',
-    'atlas-fragments-table'
+    'browse-fragments-table'
   );
 
-  PREGENERATED_TABLES['atlas-fragments-table'] = {
+  PREGENERATED_TABLES['browse-fragments-table'] = {
     collapsed: code_collapsed,
     expanded: code,
   };
 
-  document.querySelector('#atlas-fragments-table').innerHTML = code;
+  document.querySelector('#browse-fragments-table').innerHTML = code;
 }
 
 function fill_predictions_table() {
@@ -716,8 +716,8 @@ function set_scroll_listeners(tabName) {
   if (tabName === 'abz_tab') {
     listen_to_table_scrolled('#primary-fragments-table > .ntc-seq-table', '#abz-layout-first', PRIMARY_NTCS);
     listen_to_table_scrolled('#zee-fragments-table > .ntc-seq-table', '#abz-layout-first', ZEE_NTCS);
-  } else if (tabName === 'atlas_tab') {
-    listen_to_table_scrolled('#atlas-fragments-table', '#atlas-layout-first', watna_sequences());
+  } else if (tabName === 'browse_tab') {
+    listen_to_table_scrolled('#browse-fragments-table', '#browse-layout-first', watna_sequences());
   } else if (tabName === 'predictions_tab') {
       listen_to_table_scrolled('#predicted-structures-table', '#predictions-layout-first', PRED_TBL_HDRS);
   }
@@ -727,13 +727,13 @@ function init_all() {
   watna_fetch_data().then(_ => {
     fill_primary_table();
     fill_zee_table();
-    fill_atlas_table();
+    fill_browse_table();
     fill_predictions_table();
 
     set_scroll_listeners('abz_tab');
 
     watna_init(
-      'wva-app-atlas',
+      'wva-app-browse',
       {
         extraStructurePartsName: 'Other structure parts',
         hydrationSitesName: 'Hydration sites',
@@ -773,7 +773,7 @@ function init_all() {
     );
 
     window.addEventListener('resize', () => {
-      if ([ 'abz_tab', 'atlas_tab', 'predictions_tab' ].includes(CURRENT_ACTIVE_TAB)) {
+      if ([ 'abz_tab', 'browse_tab', 'predictions_tab' ].includes(CURRENT_ACTIVE_TAB)) {
         set_scroll_listeners(CURRENT_ACTIVE_TAB);
         for (const sh of SCROLL_EVT_HANDLERS)
           sh.handler();
@@ -831,18 +831,18 @@ function init_all() {
       throw e;
     });
 
-    watna_set_on_removed_callback("wva-app-atlas", fragId => {
-      const elem = document.getElementById(fragment_cell_id(fragId, 'atlas'));
+    watna_set_on_removed_callback("wva-app-browse", fragId => {
+      const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
       if (elem) {
         elem.style.removeProperty("background-color");
         elem.style.removeProperty("color");
       }
       redraw_molstar();
     });
-    watna_set_on_colors_changed_callback('wva-app-atlas', fragId => {
-      const elem = document.getElementById(fragment_cell_id(fragId, 'atlas'));
+    watna_set_on_colors_changed_callback('wva-app-browse', fragId => {
+      const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
       if (elem) {
-        watna_set_elem_color(elem, 'wva-app-atlas', fragId);
+        watna_set_elem_color(elem, 'wva-app-browse', fragId);
       }
     });
 

watna.css

@@ -43,7 +43,7 @@ td.disabled {
 }
 
 @media screen and (min-width: 100em) {
-  #atlas-layout-first {
+  #browse-layout-first {
     width: min-content;
     overflow: scroll;
     position: relative;
@@ -53,7 +53,7 @@ td.disabled {
 }
 
 @media screen and (max-width: 100em) {
-  #atlas-layout-first {
+  #browse-layout-first {
     flex: 1;
     min-height: 6em;
     overflow: scroll;
@@ -63,29 +63,29 @@ td.disabled {
   }
 }
 
-#atlas-layout-first::-webkit-scrollbar {
+#browse-layout-first::-webkit-scrollbar {
     display: none;
 }
 
 @media screen and (min-width: 100em) {
-  #atlas-layout-second {
+  #browse-layout-second {
     display: flex;
     flex: 1;
   }
 }
 
 @media screen and (max-width: 100em) {
-  #atlas-layout-second {
+  #browse-layout-second {
     display: flex;
     flex: 3;
   }
 }
 
-#atlas-ntc-select {
+#browse-ntc-select {
   flex: 1;
 }
 
-#atlas-seq-select {
+#browse-seq-select {
   flex: 1;
 }
 
@@ -186,7 +186,7 @@ td.disabled {
   flex: 1;
 }
 
-#wva-app-atlas {
+#wva-app-browse {
   flex: 1;
 }