Expand documentation

index.html

@@ -237,11 +237,19 @@ function fill_select(elem, options) {
   }
 }
 
+/*
+ * Forces redraw of the Molstar Viewer by issuing a dummy resize event.
+ */
 function redraw_molstar() {
   window.dispatchEvent(new Event('resize'));
 }
 
-// Show only the active tab content (hide content of the other tabs), color the tab button green
+/*
+ * Set the tab given by the tabName as visible and the previously active tab as hidden.
+ *
+ * @param {object} evt - Event object that triggered the tab change
+ * @param {string} tabName - Name of the tab to be set as visible
+ */
 function openTabNA(evt, tabName) {
   openNavTab(evt, tabName);
   CURRENT_ACTIVE_TAB = tabName;
@@ -253,7 +261,16 @@ function openTabNA(evt, tabName) {
   set_scroll_listeners(tabName);
 }
 
-async function structural_in_table_clicked(elem, appId, viewerId, handler) {
+/*
+ * Handler for a click on a structural element (fragment, predicted structure, etc.)
+ *
+ * @param {object} evt - The click event object
+ * @param {string} appId - ID of the Molstar Viewer
+ * @param {string} viewerCanvasId - ID of the element of the Molstar Viewer canvas.
+ *                                  This is used to display errors in the area of the canvas
+ * @params @function} handler - Function that calls the Molstar Viewer API to display the structure
+ */
+async function structural_in_table_clicked(elem, appId, viewerCanvasId, handler) {
   function onError(msg) {
     const viewer = document.getElementById(viewerId);
     const errorElem = document.createElement('div');
@@ -272,6 +289,9 @@ async function structural_in_table_clicked(elem, appId, viewerId, handler) {
   redraw_molstar();
 }
 
+/*
+ * Handles a click on a fragment in the Home tab
+ */
 function home_fragment_clicked(elem, ntc, seq) {
   const handler = (appId, onError) => {
     watna_fragment_clicked(elem, appId, ntc, seq, REF_DINU_NAME, onError);
@@ -279,6 +299,9 @@ function home_fragment_clicked(elem, ntc, seq) {
   structural_in_table_clicked(elem, 'wva-app-home', 'wva-app-home-viewer', handler);
 }
 
+/*
+ * Handles a click on a fragment in the Atlas tab
+ */
 async function atlas_fragment_clicked(elem, ntc, seq) {
   const handler = (appId, onError) => {
     watna_fragment_clicked(elem, appId, ntc, seq, REF_DINU_NAME, onError);
@@ -286,6 +309,9 @@ async function atlas_fragment_clicked(elem, ntc, seq) {
   structural_in_table_clicked(elem, 'wva-app-atlas', 'wva-app-atlas-viewer', handler);
 }
 
+/*
+ * Handles a click on a structure in the Predictions tab
+ */
 async function predictions_structure_clicked(elem, structId, referenceName) {
   const handler = (appId, onError) => {
     watna_structure_clicked(elem, appId, structId, referenceName, onError);
@@ -293,12 +319,23 @@ async function predictions_structure_clicked(elem, structId, referenceName) {
   structural_in_table_clicked(elem, 'wva-app-predictions', 'wva-app-predictions-viewer', handler);
 }
 
+/*
+ * Hides a "tooltip" element with NtC description
+ *
+ * @param {string} ntc - NtC code of the fragment
+ */
 function hide_ntc_description(ntc) {
   const descElem = document.querySelector(`#ntc-description-${ntc}`);
   if (descElem)
     setTimeout(() => descElem.remove(), 222);
 }
 
+/*
+ * Displays a "tooltip" element with NtC description
+ *
+ * @param {HTMLElement} elem - Element to use as the parent element for the toolip
+ * @param {string} ntc - NtC code of the fragment
+ */
 function show_ntc_description(elem, ntc) {
   document.querySelectorAll('.ntc-description').forEach(elem => elem.__hider());
 
@@ -565,9 +602,16 @@ function fill_predictions_table() {
   document.querySelector('#predicted-structures-table').innerHTML = code;
 }
 
+/*
+ * Registes an event handler for the "scroll" event to update floating table headers
+ *
+ * @param {string} tableSel - Selection query to get the table
+ * @param {string} tainerSel - Selection query to get the table container
+ * @param {string[]} hdrs - List of  table headers
+ */
 function listen_to_table_scrolled(tableSel, tainerSel, hdrs) {
-  let FLOATING_TBLHDRS_CAPTIONS = {};
-  let ZERO_FLOATING_TBLHDRS_TOPS = {};
+  let FLOATING_TBLHDRS_CAPTIONS = {};  // Maps elements to captions
+  let ZERO_FLOATING_TBLHDRS_TOPS = {}; // Initial positions of the floating table headers
 
   const table = document.querySelector(tableSel);
   const tainer = document.querySelector(tainerSel);