linny-r 1.4.2 → 1.4.4

package/static/scripts/linny-r-gui-model-autosaver.js

@@ -0,0 +1,230 @@
+/*
+Linny-R is an executable graphical specification language for (mixed integer)
+linear programming (MILP) problems, especially unit commitment problems (UCP).
+The Linny-R language and tool have been developed by Pieter Bots at Delft
+University of Technology, starting in 2009. The project to develop a browser-
+based version started in 2017. See https://linny-r.org for more information.
+
+This JavaScript file (linny-r-gui.js) provides the GUI functionality
+for the Linny-R model editor: buttons on the main tool bars, the associated
+dialogs, the main drawing canvas, and event handler functions.
+
+*/
+
+/*
+Copyright (c) 2017-2023 Delft University of Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+// CLASS ModelAutoSaver automatically saves the current model at regular
+// time intervals in the user's `autosave` directory.
+class ModelAutoSaver {
+  constructor() {
+    // Keep track of time-out interval of auto-saving feature.
+    this.timeout_id = 0;
+    this.interval = 10; // auto-save every 10 minutes
+    this.period = 24; // delete models older than 24 hours
+    this.model_list = [];
+    // Overwite defaults if settings still in local storage of browser.
+    this.getSettings();
+    // Purge files that have "expired".
+    this.getAutoSavedModels();
+    // Start the interval timer.
+    this.setAutoSaveInterval();
+    // Add listeners to GUI elements.
+    this.confirm_dialog = document.getElementById('confirm-remove-models');
+    document.getElementById('auto-save-clear-btn').addEventListener('click',
+        () => AUTO_SAVE.confirm_dialog.style.display = 'block');
+    document.getElementById('autosave-do-remove').addEventListener('click',
+        // NOTE: File name parameter /*ALL*/ indicates: delete all.
+        () => AUTO_SAVE.getAutoSavedModels(true, '/*ALL*/'));
+    document.getElementById('autosave-cancel').addEventListener('click',
+        () => AUTO_SAVE.confirm_dialog.style.display = 'none');
+    document.getElementById('restore-cancel').addEventListener('click',
+        () => AUTO_SAVE.hideRestoreDialog(false));
+    document.getElementById('restore-confirm').addEventListener('click',
+        () => AUTO_SAVE.hideRestoreDialog(true));
+  }
+  
+  getSettings() {
+    // Reads custom auto-save settings from local storage.
+    try {
+      const item = window.localStorage.getItem('Linny-R-autosave');
+      if(item) {
+        const
+            mh = item.split('|'),
+            m = parseFloat(mh[0]),
+            h = parseFloat(mh[1]);
+        if(isNaN(m) || isNaN(h)) {
+          UI.warn('Ignored invalid local auto-save settings');
+        } else {
+          this.interval = m;
+          this.period = h;
+        }
+      }
+    } catch(err) {
+      console.log('Local storage failed:', err);
+    }  
+  }
+  
+  setSettings() {
+    // Writes custom auto-save settings to local storage.
+    try {
+      window.localStorage.setItem('Linny-R-autosave',
+          this.interval + '|' + this.period);
+      UI.notify('New auto-save settings stored in browser');
+    } catch(err) {
+      UI.warn('Failed to write auto-save settings to local storage');
+      console.log(err);
+    }  
+  }
+  
+  saveModel() {
+    document.getElementById('autosave-btn').classList.add('stay-activ');
+    // Use setTimeout to let browser always briefly show the active color
+    // even when the model file is small and storing hardly takes time.
+    setTimeout(() => FILE_MANAGER.storeAutoSavedModel(), 300);
+  }
+  
+  setAutoSaveInterval() {
+    // Activate the auto-save feature (if interval is configured).
+    if(this.timeout_id) clearInterval(this.timeout_id);
+    // NOTE: Interval = 0 indicates "do not auto-save".
+    if(this.interval) {
+      // Interval is in minutes, so multiply by 60 thousand to get msec.
+      this.timeout_id = setInterval(
+          () => AUTO_SAVE.saveModel(), this.interval * 60000);
+    }
+  }
+
+  getAutoSavedModels(show_dialog=false, file_to_delete='') {
+    // Get list of auto-saved models from server (after deleting those that
+    // have been stored beyond the set period AND the specified file to
+    // delete (where /*ALL*/ indicates "delete all auto-saved files").
+    const pd = {action: 'purge', period: this.period};
+    if(file_to_delete) pd.to_delete = file_to_delete;
+    fetch('autosave/', postData(pd))
+      .then((response) => {
+          if(!response.ok) {
+            UI.alert(`ERROR ${response.status}: ${response.statusText}`);
+          }
+          return response.text();
+        })
+      .then((data) => {
+          if(UI.postResponseOK(data)) {
+            try {
+              AUTO_SAVE.model_list = JSON.parse(data);
+            } catch(err) {
+              AUTO_SAVE.model_list = [];
+              UI.warn('Data on auto-saved models is not valid');
+            }
+          }
+          // Update auto-save-related dialog elements.
+          const
+              n = this.model_list.length,
+              ttl = pluralS(n, 'auto-saved model'),
+              rbtn = document.getElementById('load-autosaved-btn');
+          document.getElementById('autosave-btn').title = ttl;
+          rbtn.title = ttl;
+          rbtn.style.display = (n > 0 ? 'block' : 'none');
+          if(show_dialog) AUTO_SAVE.showRestoreDialog();
+        })
+      .catch((err) => {console.log(err); UI.warn(UI.WARNING.NO_CONNECTION, err);});
+  }
+
+  showRestoreDialog() {
+    // Shows list of auto-saved models; clicking on one will load it
+    // NOTE: hide "Load model" dialog in case it was showing.
+    document.getElementById('load-modal').style.display = 'none';
+    // Contruct the table to select from.
+    let html = '';
+    for(let i = 0; i < this.model_list.length; i++) {
+      const
+          m = this.model_list[i],
+          bytes = UI.sizeInBytes(m.size).split(' ');
+      html += ['<tr class="dataset" style="color: gray" ',
+          'onclick="FILE_MANAGER.loadAutoSavedModel(\'',
+          m.name,'\');"><td class="restore-name">', m.name, '</td><td>',
+          m.date.substring(1, 16).replace('T', ' '),
+          '</td><td style="text-align: right">',
+          bytes[0], '</td><td>', bytes[1], '</td><td style="width:15px">',
+          '<img class="del-asm-btn" src="images/delete.png" ',
+          'onclick="event.stopPropagation(); ',
+          'AUTO_SAVE.getAutoSavedModels(true, \'', m.name,
+          '\')"></td></tr>'].join('');
+    }
+    document.getElementById('restore-table').innerHTML = html;
+    // Adjust dialog height (max-height will limit list to 10 lines).
+    document.getElementById('restore-dlg').style.height =
+        (48 + 19 * this.model_list.length) + 'px';
+    document.getElementById('confirm-remove-models').style.display = 'none';
+    // Fill text input fields with present settings.
+    document.getElementById('auto-save-minutes').value = this.interval;
+    document.getElementById('auto-save-hours').value = this.period;
+    // Show remove button only if restorable files exits.
+    const
+      ttl = document.getElementById('restore-dlg-title'),
+      sa = document.getElementById('restore-scroll-area'),
+      btn = document.getElementById('auto-save-clear-btn');
+    if(this.model_list.length) {
+      ttl.innerHTML = 'Restore auto-saved model';
+      sa.style.display = 'block';
+      btn.style.display = 'block';
+    } else {
+      ttl.innerHTML = 'Auto-save settings (for this browser)';
+      sa.style.display = 'none';
+      btn.style.display = 'none';
+    }
+    document.getElementById('restore-modal').style.display = 'block';
+  }
+  
+  hideRestoreDialog(save=true) {
+    // Close the restore auto-save model dialog.
+    document.getElementById('confirm-remove-models').style.display = 'none';
+    // NOTE: Cancel button or ESC will pass `cancel` as FALSE => do not save.
+    if(!save) {
+      document.getElementById('restore-modal').style.display = 'none';
+      return;
+    }
+    // Validate settings.
+    let m = this.interval,
+        h = this.period,
+        e = document.getElementById('auto-save-minutes');
+    m = parseInt(e.value);
+    if(!isNaN(m)) {
+      e = document.getElementById('auto-save-hours');
+      h = parseInt(e.value);
+      if(!isNaN(h)) {
+        // If valid, store in local storage of browser.
+        if(m !== this.interval || h !== this.period) {
+          this.interval = m;
+          this.period = h;
+          this.setSettings();
+          this.setAutoSaveInterval();
+        }
+        document.getElementById('restore-modal').style.display = 'none';
+        return;
+      }
+    }
+    UI.warn('Invalid auto-save settings');
+    e.focus();
+  }
+
+} // END of class ModelAutoSaver

package/static/scripts/linny-r-gui-monitor.js

@@ -0,0 +1,448 @@
+/*
+Linny-R is an executable graphical specification language for (mixed integer)
+linear programming (MILP) problems, especially unit commitment problems (UCP).
+The Linny-R language and tool have been developed by Pieter Bots at Delft
+University of Technology, starting in 2009. The project to develop a browser-
+based version started in 2017. See https://linny-r.org for more information.
+
+This JavaScript file (linny-r-gui-monitor.js) provides the GUI functionality
+for the Linny-R Monitor dialog.
+
+*/
+
+/*
+Copyright (c) 2017-2023 Delft University of Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+// CLASS GUIMonitor provides the GUI for the Virtual Machine, and handles
+// the interaction with the MILP solver via POST requests to the server.
+// NOTE: because the console-only monitor requires Node.js modules, this
+// GUI class does NOT extend its console-only counterpart
+class GUIMonitor {
+  constructor() {
+    this.console = false;
+    this.visible = false;
+    // The "shown" flag is used to prevent re-display of the call stack
+    this.call_stack_shown = false;
+    // Initialize related DOM elements
+    this.dialog = UI.draggableDialog('monitor');
+    UI.resizableDialog('monitor', 'MONITOR');
+    this.close_btn = document.getElementById('monitor-close-btn');
+    this.timer = document.getElementById('monitor-timer');
+    this.messages_tab = document.getElementById('monitor-msg-tab');
+    this.messages_text = document.getElementById('monitor-msg');
+    this.variables_tab = document.getElementById('monitor-vbl-tab');
+    this.variables_text = document.getElementById('monitor-vbl');
+    this.equations_tab = document.getElementById('monitor-eqs-tab');
+    this.equations_text = document.getElementById('monitor-eqs');
+    this.progress_bar = document.getElementById('monitor-progress-bar');
+
+    // Make toolbar buttons responsive
+    this.close_btn.addEventListener(
+        'click', (event) => UI.toggleDialog(event));
+    this.messages_tab.addEventListener(
+        'click', () => MONITOR.updateContent('msg'));
+    this.variables_tab.addEventListener(
+        'click', () => MONITOR.updateContent('vbl'));
+    this.equations_tab.addEventListener(
+        'click', () => MONITOR.updateContent('eqs'));
+
+    // Make close button of call stack dialog responsive
+    document.getElementById('call-stack-close-btn').addEventListener(
+      'click', () => MONITOR.hideCallStack());
+    
+    this.shown_block = 0;
+    // Initially show the messages textarea
+    this.tab = 'vbl';
+    this.updateContent('msg');
+  }
+  
+  reset() {
+    this.shown_block = 0;
+    this.last_message_block = 0;
+    // Clear monitor's text areas
+    this.messages_text.value = '';
+    this.variables_text.value = '';
+    this.equations_text.value = '';
+    // Clear the progress bar
+    while(this.progress_bar.firstChild) {
+      this.progress_bar.removeChild(this.progress_bar.lastChild);
+    }
+    this.updateContent('msg');
+  }
+
+  updateMonitorTime() {
+    // Displays the elapsed time since last reset as (hrs:)mins:secs
+    let td = (new Date().getTime() - VM.reset_time) / 1000,
+        hrs = Math.floor(td / 3600);
+    if(hrs > 0) {
+      td -= hrs * 3600;
+      hrs += ':';
+    } else {
+      hrs = '';
+    }
+    const
+        min = Math.floor(td / 60),
+        sec = Math.round(td - 60*min),
+        t = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2);
+    this.timer.textContent = hrs + t;
+  }
+  
+  updateBlockNumber(bwr) {
+    // Display progres as block number (with round) / number of blocks
+    document.getElementById('monitor-blocks').innerText =
+        bwr + '/' + VM.nr_of_blocks;
+  }
+  
+  clearProgressBar() {
+    // Clear the progress bar
+    while(this.progress_bar.firstChild) {
+      this.progress_bar.removeChild(this.progress_bar.lastChild);
+    }
+  }
+
+  addProgressBlock(b, err, time) {
+    // Adds a block to the progress bar, and updates the relative block lengths
+    let total_time = 0;
+    for(let i = 0; i < b; i++) {
+      total_time += VM.solver_times[i];
+    }
+    const n = document.createElement('div');
+    n.classList.add('progress-block');
+    if(err) n.classList.add('error-pb');
+    if(b % 2 == 0) n.classList.add('even-pb');
+    n.setAttribute('title',
+        `Block #${b} took ${time.toPrecision(3)} seconds
+(solver: ${VM.solver_secs[b - 1]} seconds)`);
+    n.setAttribute('data-blk', b); 
+    n.addEventListener('click',
+        (event) => {
+            const el = event.target;
+            el.classList.add('sel-pb');
+            MONITOR.showBlock(el.dataset.blk);
+          },
+        false);
+    this.progress_bar.appendChild(n);
+    this.progress_bar.style.width =
+        Math.floor(100 * b / VM.nr_of_blocks) + '%';
+    const cn = this.progress_bar.childNodes;
+    if(cn && this.shown_block > 0 && this.shown_block <= cn.length) {
+      cn[this.shown_block - 1].classList.add('sel-pb');
+    }
+    for(let i = 0; i < cn.length; i++) {
+      cn[i].style.width =
+          (Math.floor(10000 * VM.solver_times[i] / total_time) / 100) + '%';
+    }
+  }
+  
+  showBlock(b) {
+    this.shown_block = b;
+    const cn = this.progress_bar.childNodes;
+    for(let i = 0; i < cn.length; i++) {
+      cn[i].classList.remove('sel-pb');
+    }
+    cn[b - 1].classList.add('sel-pb');
+    this.updateContent(this.tab);
+  }
+
+  updateDialog() {
+    // Implements default behavior for a draggable/resizable dialog
+    this.updateContent(this.tab);
+  }
+  
+  updateContent(tab) {
+    // Get the block being computed
+    this.block_count = VM.block_count;
+    // Shows the appropriate text in the monitor's textarea
+    let b = this.shown_block;
+    // By default, show information on the block being calculated
+    if(b === 0) b = this.block_count;
+    if(this.block_count === 0) {
+      this.messages_text.value = VM.no_messages;
+      this.equations_text.value = VM.no_equations;
+    } else if(b <= VM.messages.length) {
+      this.messages_text.value = VM.messages[b - 1];
+      this.equations_text.value = VM.equations[b - 1];
+    }
+    // Legend to variables is not block-dependent
+    this.variables_text.value = VM.variablesLegend(b);
+    // Show the text area for the selected tab
+    if(this.tab !== tab) {
+      let mt = 'monitor-' + this.tab;
+      document.getElementById(mt).style.display = 'none';
+      document.getElementById(mt + '-tab').classList.remove('sel-tab');
+      this.tab = tab;
+      mt = 'monitor-' + this.tab;
+      document.getElementById(mt).style.display = 'block';
+      document.getElementById(mt + '-tab').classList.add('sel-tab');
+    }
+  }
+
+  showCallStack(t) {
+    // Show the error message in the dialog header
+    // NOTE: prevent showing again when VM detects multiple errors
+    if(this.call_stack_shown) return;
+    const
+        csl = VM.call_stack.length,
+        top = VM.call_stack[csl - 1],
+        err = top.vector[t],
+        // Make separate lists of variable names and their expressions
+        vlist = [],
+        xlist = [];
+    document.getElementById('call-stack-error').innerHTML =
+        `ERROR at t=${t}: ` + VM.errorMessage(err);
+    for(let i = 0; i < csl; i++) {
+      const
+          x = VM.call_stack[i],
+          // For equations, only show the attribute
+          ons = (x.object === MODEL.equations_dataset ? '' :
+              x.object.displayName + '|');
+      vlist.push(ons + x.attribute);
+      // Trim spaces around all object-attribute separators in the expression
+      xlist.push(x.text.replace(/\s*\|\s*/g, '|'));
+    }
+    // Highlight variables where they are used in the expressions
+    const vcc = UI.chart_colors.length;
+    for(let i = 0; i < xlist.length; i++) {
+      for(let j = 0; j < vlist.length; j++) {
+        // Ignore selectors, as these may be different per experiment
+        const
+            vnl = vlist[j].split('|'),
+            sel = (vnl.length > 1 ? vnl.pop() : ''),
+            attr = (VM.attribute_names[sel] ? '|' + sel : ''),
+            vn = vnl.join() + attr,
+            vnc = '<span style="font-weight: 600; color: ' +
+                `${UI.chart_colors[j % vcc]}">${vn}</span>`;
+        xlist[i] = xlist[i].split(vn).join(vnc);
+      }
+    }
+    // Then also color the variables
+    for(let i = 0; i < vlist.length; i++) {
+      vlist[i] = '<span style="font-weight: 600; color: ' +
+        `${UI.chart_colors[i % vcc]}">${vlist[i]}</span>`;
+    }
+    // Start without indentation
+    let pad = 0;
+    // First show the variable being computed
+    const tbl = ['<div>', vlist[0], '</div>'];
+    // Then iterate upwards over the call stack
+    for(let i = 0; i < vlist.length - 1; i++) {
+      // Show the expression, followed by the next computed variable
+      tbl.push(['<div class="call-stack-row" style="padding-left: ',
+        pad, 'px"><div class="call-stack-expr">', xlist[i],
+        '</div><div class="call-stack-vbl">&nbsp;\u2937', vlist[i+1],
+        '</div></div>'].join(''));
+      // Increase indentation
+      pad += 8;
+    }
+    // Show the last expression, highlighting the array-out-of-bounds (if any)
+    let last_x = xlist[xlist.length - 1],
+        anc = '';
+    if(VM.out_of_bounds_array) {
+      anc = '<span style="font-weight: 600; color: red">' +
+          VM.out_of_bounds_array + '</span>';
+      last_x = last_x.split(VM.out_of_bounds_array).join(anc);
+    }
+    tbl.push('<div class="call-stack-expr" style="padding-left: ' +
+        `${pad}px">${last_x}</div>`);
+    // Add index-out-of-bounds message if appropriate
+    if(anc) {
+      tbl.push('<div style="color: gray; margin-top: 8px; font-size: 10px">',
+          VM.out_of_bounds_msg.replace(VM.out_of_bounds_array, anc), '</div>');
+    }
+    // Dump the code for the last expression to the console
+    console.log('Code for', top.text, top.code);
+    // Show the call stack dialog
+    document.getElementById('call-stack-table').innerHTML = tbl.join('');
+    document.getElementById('call-stack-modal').style.display = 'block';
+    this.call_stack_shown = true;    
+  }
+
+  hideCallStack() {
+    document.getElementById('call-stack-modal').style.display = 'none';
+  }
+
+  logMessage(block, msg) {
+    // Appends a solver message to the monitor's messages textarea
+    if(this.messages_text.value === VM.no_messages) {
+      // Erase the "(no messages)" if still showing
+      this.messages_text.value = '';
+    }
+    if(this.shown_block === 0 && block !== this.last_message_block) {
+      // Clear text area when starting with new block while no block selected
+      this.last_message_block = block;
+      this.messages_text.value = '';      
+    }
+    // NOTE: `msg` is appended only if no block has been selected by
+    // clicking on the progress bar, or if the message belongs to the
+    // selected block
+    if(this.shown_block === 0 || this.shown_block === block) {
+      this.messages_text.value += msg + '\n';
+    }
+  }
+  
+  logOnToServer(usr, pwd) {
+    VM.solver_user = usr;
+    fetch('solver/', postData({action: 'logon', user: usr, password: pwd}))
+      .then((response) => {
+          if(!response.ok) {
+            UI.alert(`ERROR ${response.status}: ${response.statusText}`);
+          }
+          return response.text();
+        })
+      .then((data) => {
+          let jsr;
+          try {
+            jsr = JSON.parse(data);
+          } catch(err) {
+            console.log('ERROR while parsing JSON:', err);
+            UI.alert('ERROR: Unexpected data from server: ' +
+                ellipsedText(data));
+            return;
+          }
+          if(jsr.error) {
+            UI.alert(jsr.error);
+          } else if(jsr.server) {
+            VM.solver_token = jsr.token;
+            VM.solver_name = jsr.solver;
+            // Remote solver may indicate user-specific solver time limit
+            let utl = '';
+            if(jsr.time_limit) {
+              VM.max_solver_time = jsr.time_limit;
+              utl = ` -- ${VM.solver_name} solver: ` +
+                  `max. ${VM.max_solver_time} seconds per block`;
+              // If user has a set time limit, no restrictions on tableau size
+              VM.max_tableau_size = 0;
+            }
+            UI.notify('Logged on to ' + jsr.server + utl);
+          } else {
+            UI.warn('Authentication failed -- NOT logged on to server -- ' +
+                'Click <a href="solver/?action=password">' +
+                '<strong>here</strong></a> to change password');
+          }
+        })
+      .catch((err) => UI.warn(UI.WARNING.NO_CONNECTION, err));
+  }
+
+  connectToServer() {
+    // Prompts for credentials if not connected yet
+    // NOTE: no authentication prompt if SOLVER.user_id in `linny-r-config.js`
+    // is left blank
+    if(!VM.solver_user) {
+      VM.solver_token = 'local host';
+      fetch('solver/', postData({action: 'logon'}))
+        .then((response) => {
+            if(!response.ok) {
+              UI.alert(`ERROR ${response.status}: ${response.statusText}`);
+            }
+            return response.text();
+          })
+        .then((data) => {
+            try {
+              const
+                  jsr = JSON.parse(data),
+                  svr = `Solver on ${jsr.server} is ${jsr.solver}`;
+              if(jsr.solver !== VM.solver_name) UI.notify(svr);              
+              VM.solver_name = jsr.solver;
+              document.getElementById('host-logo').title  = svr;
+            } catch(err) {
+              console.log(err, data);
+              UI.alert('ERROR: Unexpected data from server: ' +
+                  ellipsedText(data));
+              return;
+            }
+          })
+        .catch((err) => UI.warn(UI.WARNING.NO_CONNECTION, err));
+    }
+    if(VM.solver_token) return true;
+    UI.loginPrompt();
+    return false;
+  }
+
+  submitBlockToSolver() {
+    let top = MODEL.timeout_period;
+    if(VM.max_solver_time && top > VM.max_solver_time) {
+      top = VM.max_solver_time;
+      UI.notify('Solver time limit for this server is ' +
+          VM.max_solver_time + ' seconds');
+    }
+UI.logHeapSize(`BEFORE creating post data`);
+    const
+        bwr = VM.blockWithRound,
+        pd = postData({
+            action: 'solve',
+            user: VM.solver_user,
+            token: VM.solver_token,
+            block: VM.block_count,
+            round: VM.round_sequence[VM.current_round],
+            columns: VM.columnsInBlock,
+            data: VM.lines,
+            timeout: top
+          });
+UI.logHeapSize(`AFTER creating post data`);
+    // Immediately free the memory taken up by VM.lines
+    VM.lines = '';
+    UI.logHeapSize(`BEFORE submitting block #${bwr} to solver`);
+    fetch('solver/', pd)
+      .then((response) => {
+          if(!response.ok) {
+            const msg = `ERROR ${response.status}: ${response.statusText}`;
+            VM.logMessage(VM.block_count, msg);
+            UI.alert(msg);
+          }
+          return response.text();
+        })
+      .then((data) => {
+          try {
+            VM.processServerResponse(JSON.parse(data));
+            UI.logHeapSize('After processing results for block #' + this.block_count);
+            // If no errors, solve next block (if any)
+            // NOTE: use setTimeout so that this calling function returns,
+            // and browser can update its DOM to display progress
+            setTimeout(() => VM.solveBlocks(), 1);
+          } catch(err) {
+            // Log details on the console
+            console.log('ERROR while parsing JSON:', err);
+            console.log(data);
+            // Pass summary on to the browser
+            const msg = 'ERROR: Unexpected data from server: ' +
+                ellipsedText(data);
+            this.logMessage(this.block_count, msg);
+            UI.alert(msg);
+            VM.stopSolving();
+            return;
+          }
+        })
+      .catch((err) => {
+          console.log('ERROR on POST:', err);
+          const msg = 'SERVER ERROR: ' + ellipsedText(err.toString());
+          VM.logMessage(VM.block_count, msg);
+          UI.alert(msg);
+          VM.stopSolving();
+        });
+    pd.body = '';
+UI.logHeapSize(`after calling FETCH and clearing POST data body`);
+    VM.logMessage(VM.block_count,
+        `POSTing block #${bwr} took ${VM.elapsedTime} seconds.`);
+    UI.logHeapSize(`AFTER posting block #${bwr} to solver`);
+  }
+  
+} // END of class GUIMonitor