linny-r 2.0.8 → 2.0.10

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

@@ -75,6 +75,11 @@ class ModalDialog {
     // Make this modal dialog invisible.
     this.modal.style.display = 'none';
   }
+  
+  get showing() {
+    // Return TRUE iff this modal dialog is visible.
+    return this.modal.style.display === 'block';
+  }
 
 } // END of class ModalDialog
 
@@ -85,15 +90,19 @@ class ModalDialog {
 // such that fields[name] is the entity property name that corresponds
 // with the DOM input element for that property. For example, for the
 // process group properties dialog, fields['LB'] = 'lower_bound' to
-// indicate that the DOM element having id="process_LB" corresponds to
+// indicate that the DOM element having id="process-LB" corresponds to
 // the property `p.lower_bound` of process `p`.
 class GroupPropertiesDialog extends ModalDialog {
   constructor(id, fields) {
     super(id);
+    // `fields` is the object that relates HTML elements to properties.
     this.fields = fields;
     // `group` holds the entities (all of the same type) that should be
     // updated when the OK-button of the dialog is clicked.
     this.group = [];
+    // `selected_ds` is the dataset that was selected in the Finder when
+    // opening this dialog, or the first dataset in the group list.
+    this.selected_ds = null;
     // `initial_values` is a "dictionary" with (field name, value) entries
     // that hold the initial values of the group-editable properties.
     this.initial = {};
@@ -123,28 +132,58 @@ class GroupPropertiesDialog extends ModalDialog {
         e.addEventListener('keydown', fnc);
       }
     }
+    const spe = this.element('prefix');
+    if(spe) {
+      spe.addEventListener('keydown', fnc);
+      document.getElementById('dsg-add-modif-btn').addEventListener(
+          'click', () => UI.modals.datasetgroup.promptForSelector('Add'));
+      document.getElementById('dsg-rename-modif-btn').addEventListener(
+          'click', () => UI.modals.datasetgroup.promptForSelector('Rename'));
+      document.getElementById('dsg-edit-modif-btn').addEventListener(
+          'click', () => UI.modals.datasetgroup.editExpression());
+      document.getElementById('dsg-delete-modif-btn').addEventListener(
+          'click', () => UI.modals.datasetgroup.deleteModifier());
+      this.selector_modal = new ModalDialog('group-selector');
+      this.selector_modal.ok.addEventListener(
+          'click', () => UI.modals.datasetgroup.selectorAction());
+      this.selector_modal.cancel.addEventListener(
+          'click', () => UI.modals.datasetgroup.selector_modal.hide());
+    }
   }
 
   resetFields() {
     // Remove all class names from fields that relate to their "same"
     // and "changed status, and reset group-related properties.
-    for(let name in this.fields) if(this.initial.hasOwnProperty(name)) {
-      const cl = this.element(name).classList;
-      while(cl.length > 0 && cl.item(cl.length - 1).indexOf('same-') >= 0) {
-        cl.remove(cl.item(cl.length - 1));
+    function stripClassList(e) {
+      if(e) {
+        const cl = e.classList;
+        while(cl.length > 0 && cl.item(cl.length - 1).indexOf('same-') >= 0) {
+          cl.remove(cl.item(cl.length - 1));
+        }
       }
     }
+    for(let name in this.fields) if(this.initial.hasOwnProperty(name)) {
+      stripClassList(this.element(name));
+    }
+    stripClassList(this.element('prefix'));
     this.element('group').innerText = '';
-    let e = this.element('name');
-    if(e) e.disabled = false;
-    e = this.element('actor');
-    if(e) e.disabled = false;
-    e = this.element('cluster');
-    if(e) e.disabled = false;
+    for(const id of ['name', 'actor', 'cluster']) {
+      const e = this.element(id);
+      if(e) e.disabled = false;
+    }
+    const e = this.element('io');
+    if(e) e.style.display = 'block';
     this.group.length = 0;
     this.initial = {};
     this.same = {};
     this.changed = {};
+    this.shared_prefix = '';
+    this.selectors = {};
+    this.selected_selector = '';
+    this.default_selectors = [];
+    this.new_defsel = false;
+    this.same_defsel = true;
+    this.last_time_clicked = 0;
   }
   
   setFields(obj) {
@@ -196,23 +235,212 @@ class GroupPropertiesDialog extends ModalDialog {
         this.same[name] = same;
       }
     }
+    // For the dataset group dialog, more fields must be determined.
+    if(obj instanceof Dataset) {
+      // Determine the longest prefix shared by ALL datasets in the group.
+      this.shared_prefix = UI.sharedPrefix(obj.name, obj.name);
+      for(const ds of this.group) {
+        const sp = UI.sharedPrefix(obj.name, ds.name);
+        if(sp && this.shared_prefix.startsWith(sp)) {
+          this.shared_prefix = sp;
+        } else if(!sp.startsWith(this.shared_prefix)) {
+          this.shared_prefix = '';
+          break;
+        }
+      }
+      this.element('prefix').value = this.shared_prefix;
+      // Determine the set of all dataset modifier selectors while counting
+      // the number of occurrences of each selector and checking whether
+      // the modifier expressions are identical.
+      // NOTE: Here, too, take `obj` as the reference object.
+      this.selectors = {};
+      this.selected_selector = '';
+      this.default_selectors = [];
+      this.new_defsel = false;
+      this.same_defsel = true;
+      if(obj.default_selector) {
+        this.default_selectors.push(UI.nameToID(obj.default_selector));
+      }
+      for(const k of Object.keys(obj.modifiers)) {
+        const dsm = obj.modifiers[k];
+        this.selectors[k] = {
+            count: 1,
+            sel: dsm.selector,
+            expr: dsm.expression.text,
+            same_x: true,
+            new_s: false,
+            new_x: false,
+            deleted: false
+          };
+      }
+      // Then iterate over all datasets, excluding `obj`.
+      for(const ds of this.group) if(ds !== obj) {
+        const defsel = UI.nameToID(ds.default_selector);
+        if(this.default_selectors.indexOf(defsel) < 0) this.same_defsel = false;
+        if(defsel) addDistinct(defsel, this.default_selectors);
+        for(const k of Object.keys(ds.modifiers)) {
+          const
+              dsm = ds.modifiers[k],
+              s = this.selectors[k];
+          if(s) {
+            s.count++;
+            s.same_x = s.same_x && dsm.expression.text === s.expr;
+          } else {
+            this.selectors[k] = {
+                count: 1,
+                sel: dsm.selector,
+                expr: dsm.expression.text,
+                same_x: true,
+                new_s: false,
+                new_x: false,
+                deleted: false
+              };
+          }
+        }
+      }
+      // Selectors are not "same" when they do not apply to all datasets
+      // in the group.
+      const n = this.group.length;
+      for(const k of Object.keys(this.selectors)) {
+        const s = this.selectors[k];
+        s.same_s = s.count === n;
+      }
+      this.updateModifierList();
+    }
+  }
+  
+  updateModifierList() {
+    // Display the modifier set for a dataset group.
+    const
+        trl = [],
+        not = (x) => { return (x === false ? 'not-' : ''); },
+        mdef = (this.new_defsel !== false ? this.new_defsel :
+            (this.default_selectors.length ? this.default_selectors[0] : '')),
+        sdef = not(this.same_defsel),
+        cdef = not(this.new_defsel);
+    for(const k of Object.keys(this.selectors)) {
+      const
+          s = this.selectors[k],
+          ms = (s.new_s === false ? s.sel : s.new_s),
+          mx = (s.new_x === false ? s.expr : s.new_x),
+          wild = (ms.indexOf('*') >= 0 || ms.indexOf('?') >= 0),
+          clk = `" onclick="UI.modals.datasetgroup.selectGroupSelector(event, \'${k}\'`;
+      // Do not display deleted modifiers.
+      if(s.deleted) continue;
+      trl.push(['<tr id="dsgs-', k, '" class="dataset-modif',
+          (k === this.selected_selector ? ' sel-set' : ''),
+          '"><td class="dataset-selector',
+          ` ${not(s.same_s)}same-${not(s.new_s)}changed`,
+          (wild ? ' wildcard' : ''),
+          '" title="Shift-click to ', (s.defsel ? 'clear' : 'set as'),
+          ' default modifier', clk, ', false);">',
+          (k === mdef ||
+              (this.new_defsel === false && this.default_selectors.indexOf(k) >= 0) ?
+                  `<img src="images/solve-${sdef}same-${cdef}changed.png" ` +
+                  'style="height: 14px; width: 14px; margin: 0 1px -3px -1px;">' : ''),
+          (wild ? wildcardFormat(ms, true) : ms),
+          '</td><td class="dataset-expression',
+          ` ${not(s.same_x)}same-${not(s.new_x)}changed`, clk,
+          ', true);">', mx, '</td></tr>'
+        ].join(''));
+    }
+    this.element('modif-table').innerHTML = trl.join('');
+    if(this.selected_selector) UI.scrollIntoView(
+        document.getElementById('dsg-' + this.selected_selector));
+    const btns = 'dsg-rename-modif dsg-edit-modif dsg-delete-modif';
+    if(this.selected_selector) {
+      UI.enableButtons(btns);
+    } else {
+      UI.disableButtons(btns);
+    }
   }
 
+  selectGroupSelector(event, id, x=true) {
+    // Select modifier selector, or when double-clicked, edit its expression when
+    // x = TRUE, or the name of the modifier when x = FALSE.
+    const edit = event.altKey || this.doubleClicked(id);
+    this.selected_selector = id;
+    if(edit) {
+      this.last_time_clicked = 0;
+      if(x) {
+        this.editExpression();
+      } else {
+        this.promptForSelector('Rename');
+      }
+      return;
+    }
+    if(event.shiftKey) {
+      // Toggle new default selector.
+      this.new_defsel = (this.new_defsel === id ? '' : id);
+    }
+    this.updateModifierList();
+  }
+  
+  doubleClicked(s) {
+    const
+        now = Date.now(),
+        dt = now - this.last_time_clicked;
+    this.last_time_clicked = now;
+    if(s === this.selected_selector) {
+      // Consider click to be "double" if it occurred less than 300 ms ago.
+      if(dt < 300) {
+        this.last_time_clicked = 0;
+        return true;
+      }
+    }
+    this.clicked_selector = s;
+    return false;
+  }
+  
+  enterKey() {
+    // Open "edit" dialog for the selected modifier.
+    const
+        tbl = this.element('modif-table'),
+        srl = tbl.getElementsByClassName('sel-set');
+    if(srl.length > 0) {
+      const r = tbl.rows[srl[0].rowIndex];
+      if(r) {
+        // Emulate a double-click on the second cell to edit the expression.
+        this.last_time_clicked = Date.now();
+        r.cells[1].dispatchEvent(new Event('click'));
+      }
+    }
+  }
+  
+  upDownKey(dir) {
+    // Select row above or below the selected one (if possible).
+    const
+        tbl = this.element('modif-table'),
+        srl = tbl.getElementsByClassName('sel-set');
+    if(srl.length > 0) {
+      let r = tbl.rows[srl[0].rowIndex + dir];
+      while(r && r.style.display === 'none') {
+        r = (dir > 0 ? r.nextSibling : r.previousSibling);
+      }
+      if(r) {
+        UI.scrollIntoView(r);
+        // NOTE: Cell, not row, listens for onclick event.
+        r.cells[1].dispatchEvent(new Event('click'));
+      }
+    }
+  }
+  
   show(attr, obj) {
     // Make dialog visible with same/changed status and disabled name,
     // actor and cluster fields.
     // NOTE: Cluster dialog is also used to *add* a new cluster, and in
-    // that case no fields should be set
+    // that case no fields should be set.
     if(obj) this.setFields(obj);
     if(obj && this.group.length > 0) {
       this.element('group').innerText = `(N=${this.group.length})`;
-      // Disable name, actor and cluster fields if they exist.
-      let e = this.element('name');
-      if(e) e.disabled = true;
-      e = this.element('actor');
-      if(e) e.disabled = true;
-      e = this.element('cluster');
-      if(e) e.disabled = true;
+      // Disable name, actor, and cluster fields if they exist.
+      for(const id of ['name', 'actor', 'cluster']) {
+        const e = this.element(id);
+        if(e) e.disabled = true;
+      }
+      // Hide io field if it exists.
+      const e = this.element('io');
+      if(e) e.style.display = 'none';
       // Set the right colors to reflect same and changed status.
       this.highlightModifiedFields();
     }
@@ -231,6 +459,7 @@ class GroupPropertiesDialog extends ModalDialog {
     // Set the CSS classes of fields so that they reflect their "same"
     // and "changed" status.
     if(this.group.length === 0) return;
+    const not = {false: 'not-', true: ''};
     for(let name in this.initial) if(this.initial.hasOwnProperty(name)) {
       const
           iv = this.initial[name],
@@ -238,7 +467,6 @@ class GroupPropertiesDialog extends ModalDialog {
           // for which `same[name]` is TRUE iff all entities had identical
           // values for the property identified by `name` when the dialog
           // was opened.
-          not = {false: 'not-', true: ''},
           same = `${not[this.same[name]]}same`,
           el = this.element(name);
       let changed = false,
@@ -261,10 +489,20 @@ class GroupPropertiesDialog extends ModalDialog {
         // Compute current value as Boolean.
         const v = (type === 'box' ? state ==='checked' : state === 'eq');
         changed = (v !== iv);
+        // When array box for dataset group is (un)checked, the time aspects
+        // cover div must be hidden (shown).
+        if(name === 'array') {
+          this.element('no-time-msg').style.display = (v ? 'block' : 'none');
+        }
       }
       this.changed[name] = changed;
       el.className = `${type} ${state} ${same}-${not[changed]}changed`.trim();
     }
+    const spe = this.element('prefix');
+    if(spe) {
+      const changed = spe.value !== this.shared_prefix;
+      spe.className = `same-${not[changed]}changed`;
+    }
   }
   
   validLinkProperty(link, property, value=0) {
@@ -298,8 +536,7 @@ class GroupPropertiesDialog extends ModalDialog {
       const
           propname = this.fields[name],
           prop = obj[propname];
-      for(let i = 0; i < this.group.length; i++) {
-        const ge = this.group[i];
+      for(const ge of this.group) {
         // NOTE: For links, special care must be taken.
         if(!(ge instanceof Link) ||
             this.validLinkProperty(ge, propname, prop)) {
@@ -314,7 +551,105 @@ class GroupPropertiesDialog extends ModalDialog {
       }
     }
   }
+
+  promptForSelector(action) {
+    // Open the group selector modal for the specified action.
+    let ms = '',
+        md = this.selector_modal;
+    if(action === 'Rename') {
+      ms = this.selectors[this.selected_selector].sel;
+    }
+    md.element('action').innerText = action;
+    md.element('name').value = ms;
+    md.show('name');
+  }
+  
+  selectorAction() {
+    // Perform the specified selector action.
+    const
+        md = this.selector_modal,
+        action = md.element('action').innerText,
+        ne = md.element('name'),
+        ms = MODEL.validSelector(ne.value);
+    if(!ms) {
+      ne.focus();
+      return;
+    }
+    const ok = (action === 'Add' ? this.addSelector(ms) : this.renameSelector(ms));
+    if(ok) {
+      md.hide();
+      this.updateModifierList();
+    }
+  }
+
+  addSelector(ms) {
+    // Create a new selector and adds it to the list.
+    const k = UI.nameToID(ms);
+    if(!this.selectors.hasOwnProperty(k)) {
+      this.selectors[k] = {
+          count: 1,
+          sel: ms,
+          expr: '',
+          same_x: true,
+          new_s: ms,
+          new_x: '',
+          deleted: false
+        };
+    }
+    this.selected_selector = k;
+    return true;
+  }
+  
+  renameSelector(ms) {
+    // Record the new name for this selector as property `new_s`.
+    if(this.selected_selector) {
+      const sel = this.selectors[this.selected_selector];
+      // NOTES:
+      // (1) When renaming, the old name is be preserved.
+      // (2) Name changes do not affect the key of the selector.
+      // (3) When the new name is identical to the original, record this
+      //     by setting `new_s` to FALSE.
+      sel.new_s = (ms === sel.sel ? false : ms);
+    }
+    return true;
+  }
   
+  editExpression() {
+    // Open the Expression editor for the selected expression.
+    const sel = this.selectors[this.selected_selector];
+    if(sel) {
+      const md = UI.modals.expression;
+      md.element('property').innerHTML = '(dataset group)' +
+          UI.OA_SEPARATOR + sel.sel;
+      md.element('text').value = sel.new_x || sel.expr;
+      document.getElementById('variable-obj').value = 0;
+      X_EDIT.updateVariableBar();
+      X_EDIT.clearStatusBar();
+      X_EDIT.showPrefix(this.shared_prefix);
+      md.show('text');
+    }
+  }
+
+  modifyExpression(x) {
+    // Record the new expression for the selected selector.
+    // NOTE: Expressions are compiled when changes are saved.
+    const sel = this.selectors[this.selected_selector];
+    // NOTE: When the new expression is identical to the original,
+    // record this by setting `new_x` to FALSE.
+    if(sel) sel.new_x = (x === sel.expr ? false : x);
+    this.updateModifierList();
+  }
+
+  deleteModifier() {
+    // Record that the selected modifier should be deleted.
+    const sel = this.selectors[this.selected_selector];
+    if(sel) {
+      sel.deleted = true;
+      this.selected_selector = '';
+      this.updateModifierList();
+    }
+  }
+
 } // END of class GroupPropertiesDialog
 
 
@@ -332,12 +667,9 @@ class GUIController extends Controller {
             ['chrome', 'Chrome'],
             ['firefox', 'Firefox'],
             ['safari', 'Safari']];
-    for(let i = 0; i < browsers.length; i++) {
-      const b = browsers[i];
-      if(ua.indexOf(b[0]) >= 0) {
-        this.browser_name = b[1];
-        break;
-      }
+    for(const b of browsers) if(ua.indexOf(b[0]) >= 0) {
+      this.browser_name = b[1];
+      break;
     }
     // Display version number as clickable link just below the Linny-R logo.
     this.version_number = LINNY_R_VERSION;
@@ -363,12 +695,22 @@ class GUIController extends Controller {
     this.mouse_y = 0;
     this.mouse_down_x = 0;
     this.mouse_down_y = 0;
+    // When clicking on a node, difference between cursor coordinates
+    // and node coordinates is recorded.
     this.move_dx = 0;
     this.move_dy = 0;
-    this.start_sel_x = -1;
-    this.start_sel_y = -1;
+    // When moving the cursor, the cumulative movement since the last
+    // mouse DOWN or UP event is recorded.
+    this.net_move_x = 0;
+    this.net_move_y = 0;
+    // When mouse button is pressed while some add button is active,
+    // the coordinates of the cursor are recorded.
     this.add_x = 0;
     this.add_y = 0;
+    // When mouse button is pressed while no node is under the cursor,
+    // cursor coordinates are recorded as origin of the drag rectangle. 
+    this.start_sel_x = -1;
+    this.start_sel_y = -1;
     this.on_node = null;
     this.on_arrow = null;
     this.on_link = null;
@@ -393,7 +735,6 @@ class GUIController extends Controller {
       'D': 'dataset',
       'E': 'equation',
       'F': 'finder',
-      'G': 'savediagram', // G for "Graph" (as Scalable Vector Graphics image)
       'H': 'receiver',  // activate receiver (H for "Host")
       'I': 'documentation',
       'J': 'sensitivity', // J for "Jitter"
@@ -421,7 +762,7 @@ class GUIController extends Controller {
     this.edit_btns = ['replace', 'clone', 'paste', 'delete', 'undo', 'redo'];
     this.model_btns = ['settings', 'save', 'repository', 'actors',
         'dataset', 'equation', 'chart', 'sensitivity', 'experiment',
-        'diagram', 'savediagram', 'finder', 'monitor', 'tex', 'solve'];
+        'savediagram', 'finder', 'monitor', 'tex', 'solve'];
     this.other_btns = ['new', 'load', 'receiver', 'documentation',
         'parent', 'lift', 'solve', 'stop', 'reset', 'zoomin', 'zoomout',
         'stepback', 'stepforward', 'autosave', 'recall'];
@@ -429,8 +770,7 @@ class GUIController extends Controller {
         this.edit_btns, this.model_btns, this.other_btns);
 
     // Add all button DOM elements as controller properties.
-    for(let i = 0; i < this.all_btns.length; i++) {
-      const b = this.all_btns[i];
+    for(const b of this.all_btns) {
       this.buttons[b] = document.getElementById(b + '-btn');
     }
     this.active_button = null;
@@ -450,10 +790,9 @@ class GUIController extends Controller {
     const main_modals = ['logon', 'model', 'load', 'password', 'settings',
         'actors', 'add-process', 'add-product', 'move', 'note', 'clone', 
         'replace', 'expression', 'server', 'solver'];
-    for(let i = 0; i < main_modals.length; i++) {
-      this.modals[main_modals[i]] = new ModalDialog(main_modals[i]);
-    }
+    for(const m of main_modals) this.modals[m] = new ModalDialog(m);
     
+    // Property dialogs for entities may permit group editing.
     this.modals.cluster = new GroupPropertiesDialog('cluster', {
         'collapsed': 'collapsed',
         'ignore': 'ignore',
@@ -496,6 +835,17 @@ class GUIController extends Controller {
         'no-links': 'no_links'
       });
     
+    // The Dataset group modal.
+    this.modals.datasetgroup = new GroupPropertiesDialog('datasetgroup', {
+        'default': 'default_value',
+        'unit': 'scale_unit',
+        'periodic': 'periodic',
+        'array': 'array',
+        'time-scale': 'time_scale',
+        'time-unit': 'time_unit',
+        'method': 'method'
+      });
+  
     // Initially, no dialog being dragged or resized.
     this.dr_dialog = null;
     
@@ -534,12 +884,18 @@ class GUIController extends Controller {
     this.cc.addEventListener('drop', (event) => UI.drop(event));
 
     // Disable dragging on all images.
-    const
-        imgs = document.getElementsByTagName('img'),
-        nodrag = (event) => { event.preventDefault(); return false; };
-    for(let i = 0; i < imgs.length; i++) {          
-      imgs[i].addEventListener('dragstart', nodrag);
+    const nodrag = (event) => { event.preventDefault(); return false; };
+    for(const img of document.getElementsByTagName('img')) {          
+      img.addEventListener('dragstart', nodrag);
     }
+    
+    // Moving cursor over Linny-R logo etc. should display information
+    // in Information & Documentation manager.
+    const lrf = () => DOCUMENTATION_MANAGER.clearEntity(true);
+    document.getElementById('static-icon').addEventListener('mousemove', lrf);
+    document.getElementById('linny-r-name').addEventListener('mousemove', lrf);
+    document.getElementById('linny-r-version-number')
+        .addEventListener('mousemove', lrf);
 
     // Make all buttons respond to a mouse click.
     this.buttons['new'].addEventListener('click',
@@ -552,10 +908,8 @@ class GUIController extends Controller {
         () => FILE_MANAGER.saveModel(event.shiftKey));
     this.buttons.actors.addEventListener('click',
         () => ACTOR_MANAGER.showDialog());
-    this.buttons.diagram.addEventListener('click',
-        () => FILE_MANAGER.renderDiagramAsPNG(event.shiftKey));
     this.buttons.savediagram.addEventListener('click',
-        () => FILE_MANAGER.saveDiagramAsSVG(event.shiftKey));
+        () => FILE_MANAGER.saveDiagramAsSVG(event));
     this.buttons.receiver.addEventListener('click',
         () => RECEIVER.toggle());
     // NOTE: All draggable & resizable dialogs "toggle" show/hide.
@@ -651,11 +1005,9 @@ class GUIController extends Controller {
         () => AUTO_SAVE.getAutoSavedModels());
 
     // Make "stay active" buttons respond to Shift-click.
-    const
-        tbs = document.getElementsByClassName('toggle'),
-        tf = (event) => UI.toggleButton(event);
-    for(let i = 0; i < tbs.length; i++) {          
-      tbs[i].addEventListener('click', tf);
+    const tf = (event) => UI.toggleButton(event);
+    for(const tb of document.getElementsByClassName('toggle')) {          
+      tb.addEventListener('click', tf);
     }
 
     // Add listeners to OK and CANCEL buttons on main modal dialogs.
@@ -805,6 +1157,11 @@ class GUIController extends Controller {
     this.modals.product.element('io').addEventListener('click',
         () => UI.toggleImportExportBox('product'));
 
+    this.modals.datasetgroup.ok.addEventListener('click',
+        () => FINDER.updateDatasetGroupProperties());
+    this.modals.datasetgroup.cancel.addEventListener('click',
+        () => UI.modals.datasetgroup.hide());
+
     this.modals.link.ok.addEventListener('click',
         () => UI.updateLinkProperties());
     this.modals.link.cancel.addEventListener('click',
@@ -857,18 +1214,16 @@ class GUIController extends Controller {
     
     // Make checkboxes respond to click.
     // NOTE: Checkbox-specific events must be bound AFTER this general setting.
-    const
-        cbs = document.getElementsByClassName('box'),
-        cbf = (event) => UI.toggleBox(event);
-    for(let i = 0; i < cbs.length; i++) {          
-      cbs[i].addEventListener('click', cbf);
+    const cbf = (event) => UI.toggleBox(event);
+    for(const cb of document.getElementsByClassName('box')) {          
+      cb.addEventListener('click', cbf);
     }
-    // Make infoline respond to `mouseenter`
+    // Make infoline respond to `mouseenter`.
     this.info_line = document.getElementById('info-line');
     this.info_line.addEventListener('mouseenter',
         (event) => DOCUMENTATION_MANAGER.showInfoMessages(event.shiftKey));
     // Ensure that all modal windows respond to ESCape
-    // (and more in general to other special keys)
+    // (and more in general to other special keys).
     document.addEventListener('keydown', (event) => UI.checkModals(event));
   }
   
@@ -993,8 +1348,7 @@ class GUIController extends Controller {
 
   drawLinkArrows(cluster, link) {
     // Draw all arrows in `cluster` that represent `link`.
-    for(let i = 0; i < cluster.arrows.length; i++) {
-      const a = cluster.arrows[i];
+    for(const a of cluster.arrows) {
       if(a.links.indexOf(link) >= 0) this.paper.drawArrow(a);
     }    
   }
@@ -1011,8 +1365,7 @@ class GUIController extends Controller {
     if(VM.server === 'local host') {
       host.title = 'Linny-R directory is ' + VM.working_directory;
     }
-    for(let i = 0; i < VM.solver_list.length; i++) {
-      const s = VM.solver_list[i];
+    for(const s of VM.solver_list) {
       html.push(['<option value="', s,
           (s === VM.solver_id ? '"selected="selected' : ''),
           '">', VM.solver_names[s], '</option>'].join(''));
@@ -1562,10 +1915,10 @@ class GUIController extends Controller {
   
   reorderDialogs() {
     // Set z-index of draggable dialogs according to their order
-    // (most recently shown or clicked on top)
+    // (most recently shown or clicked on top).
     let z = 10;
-    for(let i = 0; i < this.dr_dialog_order.length; i++) {
-      this.dr_dialog_order[i].style.zIndex = z;
+    for(const dd of this.dr_dialog_order) {
+      dd.style.zIndex = z;
       z += 5;
     }
   }
@@ -1575,18 +1928,16 @@ class GUIController extends Controller {
   //
   
   enableButtons(btns) {
-    btns = btns.trim().split(/\s+/);
-    for(let i = 0; i < btns.length; i++) {
-      const b = document.getElementById(btns[i] + '-btn');
+    for(const btn of btns.trim().split(/\s+/)) {
+      const b = document.getElementById(btn + '-btn');
       b.classList.remove('disab', 'activ');
       b.classList.add('enab');
     }
   }
   
   disableButtons(btns) {
-    btns = btns.trim().split(/\s+/);
-    for(let i = 0; i < btns.length; i++) {
-      const b = document.getElementById(btns[i] + '-btn'); 
+    for(const btn of btns.trim().split(/\s+/)) {
+      const b = document.getElementById(btn + '-btn'); 
       b.classList.remove('enab', 'activ', 'stay-activ');
       b.classList.add('disab');
     }
@@ -1598,7 +1949,7 @@ class GUIController extends Controller {
         node_btns = 'process product link constraint cluster note ',
         edit_btns = 'replace clone paste delete undo redo ',
         model_btns = 'settings save actors dataset equation chart ' +
-            'diagram savediagram finder monitor solve';
+            'savediagram finder monitor solve';
     if(MODEL === null) {
       this.disableButtons(node_btns + edit_btns + model_btns);
       return;
@@ -1680,10 +2031,9 @@ class GUIController extends Controller {
   }
   
   get stayActiveButton() {
-    // Return the button that is "stay active", or NULL if none 
-    const btns = ['process', 'product', 'link', 'constraint', 'cluster', 'note'];
-    for(let i = 0; i < btns.length; i++) {
-      const b = document.getElementById(btns[i] + '-btn');
+    // Return the button that is "stay active", or NULL if none .
+    for(const btn of ['process', 'product', 'link', 'constraint', 'cluster', 'note']) {
+      const b = document.getElementById(btn + '-btn');
       if(b.classList.contains('stay-activ')) return b;
     }
     return null;
@@ -1707,12 +2057,20 @@ class GUIController extends Controller {
   //
   
   updateCursorPosition(e) {
-    // Updates the cursor coordinates and displays them on the status bar
+    // Update the cursor coordinates, and display them on the status bar.
     const cp = this.paper.cursorPosition(e.pageX, e.pageY);
+    // Keep track of the cumulative relative movement since the last
+    // mousedown event.
+    this.net_move_x += cp[0] - this.mouse_x;
+    this.net_move_y += cp[1] - this.mouse_y;
+    // Only now update the mouse coordinates.
     this.mouse_x = cp[0];
     this.mouse_y = cp[1];
+    // Show the coordinates on the status bar.
     document.getElementById('pos-x').innerHTML = 'X = ' + this.mouse_x;
-    document.getElementById('pos-y').innerHTML = 'Y = ' + this.mouse_y;    
+    document.getElementById('pos-y').innerHTML = 'Y = ' + this.mouse_y;
+    // Reset all "object under cursor detection variables" so that they
+    // will be re-established correctly by mouseMove.
     this.on_note = null;
     this.on_node = null;
     this.on_cluster = null;
@@ -1723,76 +2081,82 @@ class GUIController extends Controller {
   }
 
   mouseMove(e) {
-    // Responds to mouse cursor moving over Linny-R diagram area
+    // Respond to mouse cursor moving over Linny-R diagram area.
+    // First translate browser cursor coordinates to diagram coordinates.
     this.updateCursorPosition(e);
     
-    // NOTE: check, as MODEL might still be undefined
+    // NOTE: Prevent errors in case MODEL is still undefined.
     if(!MODEL) return;
     
     //console.log(e);
     const fc = MODEL.focal_cluster;
+    // NOTE: Proceed from last added to first added node.
     for(let i = fc.processes.length-1; i >= 0; i--) {
-      const obj = fc.processes[i];
-      if(obj.containsPoint(this.mouse_x, this.mouse_y)) {
-        this.on_node = obj;
+      const p = fc.processes[i];
+      if(p.containsPoint(this.mouse_x, this.mouse_y)) {
+        this.on_node = p;
         break;
       }
     }
     if(!this.on_node) {
       for(let i = fc.product_positions.length-1; i >= 0; i--) {
-        const obj = fc.product_positions[i].product.setPositionInFocalCluster();
-        if(obj.product.containsPoint(this.mouse_x, this.mouse_y)) {
-          this.on_node = obj.product;
+        // NOTE: Set product coordinates to its position in focal cluster.
+        const p = fc.product_positions[i].product.setPositionInFocalCluster();
+        if(p.product.containsPoint(this.mouse_x, this.mouse_y)) {
+          this.on_node = p.product;
           break;
         }
       }
     }
-    for(let i = 0; i < fc.arrows.length; i++) {
-      const arr = fc.arrows[i];
+    for(const arr of fc.arrows) {
       if(arr) {
         this.on_arrow = arr;
-        // NOTE: arrow may represent multiple links, so find out which one
-        const obj = arr.containsPoint(this.mouse_x, this.mouse_y);
-        if(obj) {
-          this.on_link = obj;
+        // NOTE: Arrow may represent multiple links, and `containsPoint`
+        // returns the link if this can be established unambiguously, or
+        // NULL otherwise.
+        const l = arr.containsPoint(this.mouse_x, this.mouse_y);
+        if(l) {
+          this.on_link = l;
           break;
         }
       }
     }
     this.on_constraint = this.constraintStillUnderCursor();
     if(fc.related_constraints != null) {
-      for(let i = 0; i < fc.related_constraints.length; i++) {
-        const obj = fc.related_constraints[i];
-        if(obj.containsPoint(this.mouse_x, this.mouse_y)) {
-          this.on_constraint = obj;
+      for(const c of fc.related_constraints) {
+        if(c.containsPoint(this.mouse_x, this.mouse_y)) {
+          this.on_constraint = c;
           break;
         }
       }
     }
     for(let i = fc.sub_clusters.length-1; i >= 0; i--) {
-      const obj = fc.sub_clusters[i];
-      // NOTE: Ignore cluster that is being dragged, so that a cluster
-      // it is being dragged over will be detected instead.
-      if(obj != this.dragged_node &&
-          obj.containsPoint(this.mouse_x, this.mouse_y)) {
-        this.on_cluster = obj;
-        this.on_cluster_edge = obj.onEdge(this.mouse_x, this.mouse_y);
-        break;
+      const c = fc.sub_clusters[i];
+      if(c.containsPoint(this.mouse_x, this.mouse_y)) {
+        // NOTE: Cluster that is being dragged is superseded by other clusters
+        // so that a cluster it is being dragged over will be detected instead.
+        if(!this.on_cluster || c !== this.dragged_node) {
+          this.on_cluster = c;
+          // NOTE: Cluster edge responds differently to doubble-click.
+          this.on_cluster_edge = c.onEdge(this.mouse_x, this.mouse_y);
+        }
       }
     }
     // Unset and redraw target cluster if cursor no longer over it.
-    if(!this.on_cluster && this.target_cluster) {
+    if(this.on_cluster !== this.target_cluster) {
       const c = this.target_cluster;
       this.target_cluster = null;
-      UI.paper.drawCluster(c);
-      // NOTE: Element is persistent, so semi-transparency must also be
-      // undone.
-      c.shape.element.setAttribute('opacity', 1);
+      if(c) {
+        UI.paper.drawCluster(c);
+        // NOTE: Element is persistent, so semi-transparency must also be
+        // undone.
+        c.shape.element.setAttribute('opacity', 1);
+      }
     }
     for(let i = fc.notes.length-1; i >= 0; i--) {
-      const obj = fc.notes[i];
-      if(obj.containsPoint(this.mouse_x, this.mouse_y)) {
-        this.on_note = obj;
+      const n = fc.notes[i];
+      if(n.containsPoint(this.mouse_x, this.mouse_y)) {
+        this.on_note = n;
         break;
       }
     }
@@ -1857,10 +2221,12 @@ class GUIController extends Controller {
           this.setMessage('');
         }
       }
-      // When dragging selection that contains a process, change cursor to
+      // When dragging a selection over a cluster, change cursor to "cell" to
       // indicate that selected process(es) will be moved into the cluster.
       if(this.dragged_node) {
-        if(this.on_cluster) {
+        // NOTE: Cursor will always be over the dragged node, so do not indicate
+        // "drop here?" unless dragged over a different cluster.
+        if(this.on_cluster &&  this.on_cluster !== this.dragged_node) {
           cr = 'cell';
           this.target_cluster = this.on_cluster;
           // Redraw the target cluster so it will appear on top (and highlighted).
@@ -1874,10 +2240,16 @@ class GUIController extends Controller {
   }
 
   mouseDown(e) {
-    // Responds to mousedown event in model diagram area.
-    // In case mouseup event occurred outside drawing area,ignore this
-    // mousedown event, so that only the mouseup will be processed.
+    // Respond to mousedown event in model diagram area.
+    // NOTE: While dragging the selection rectangle, the mouseup event will
+    // not be observed when it occurred outside the drawing area. In such
+    // cases, the mousedown event must be ignored so that only the mouseup
+    // will be processed.
     if(this.start_sel_x >= 0 && this.start_sel_y >= 0) return;
+    // Reset the cumulative movement since mousedown.
+    this.net_move_x = 0;
+    this.net_move_y = 0;
+    // Get the paper coordinates indicated by the cursor.
     const cp = this.paper.cursorPosition(e.pageX, e.pageY);
     this.mouse_down_x = cp[0];
     this.mouse_down_y = cp[1];
@@ -1891,7 +2263,7 @@ class GUIController extends Controller {
     }
     // NOTE: Only left button is detected (browser catches right menu button).
     if(e.ctrlKey) {
-      // Remove clicked item from selection
+      // Remove clicked item from selection.
       if(MODEL.selection) {
         // NOTE: First check constraints -- see mouseMove() for motivation.
         if(this.on_constraint) {
@@ -1943,37 +2315,15 @@ class GUIController extends Controller {
       UI.drawDiagram(MODEL);
     }
   
-    // If one of the top six sidebar buttons is active, prompt for new node
-    // (not link or constraint).
+    // If one of the top six sidebar buttons is active, prompt for new node.
+    // Note that this does not apply for links or constraints.
     if(this.active_button && this.active_button !== this.buttons.link &&
         this.active_button !== this.buttons.constraint) {
       this.add_x = this.mouse_x;
       this.add_y = this.mouse_y;
-      const obj = this.active_button.id.split('-')[0];
+      const ot = this.active_button.id.split('-')[0];
       if(!this.stayActive) this.resetActiveButton();
-      if(obj === 'process') {
-        setTimeout(() => {
-              const md = UI.modals['add-process'];
-              md.element('name').value = '';
-              md.element('actor').value = '';
-              md.show('name');
-            });
-      } else if(obj === 'product') {
-        setTimeout(() => {
-              const md = UI.modals['add-product'];
-              md.element('name').value = '';
-              md.element('unit').value = MODEL.default_unit;
-              UI.setBox('add-product-data', false);
-              md.show('name');
-            });            
-      } else if(obj === 'cluster') {
-        setTimeout(() => {
-              const md = UI.modals.cluster;
-              md.element('name').value = '';
-              md.element('actor').value = '';
-              md.show('name');
-            });            
-      } else if(obj === 'note') {
+      if(ot === 'note') {
         setTimeout(() => {
               const md = UI.modals.note;
               md.element('action').innerHTML = 'Add';
@@ -1981,6 +2331,33 @@ class GUIController extends Controller {
               md.element('text').value = '';
               md.show('text');
             });
+      } else {
+        // Align position to the grid.
+        this.add_x = MODEL.aligned(this.add_x);
+        this.add_y = MODEL.aligned(this.add_y);
+        if(ot === 'process') {
+          setTimeout(() => {
+                const md = UI.modals['add-process'];
+                md.element('name').value = '';
+                md.element('actor').value = '';
+                md.show('name');
+              });
+        } else if(ot === 'product') {
+          setTimeout(() => {
+                const md = UI.modals['add-product'];
+                md.element('name').value = '';
+                md.element('unit').value = MODEL.default_unit;
+                UI.setBox('add-product-data', false);
+                md.show('name');
+              });            
+        } else if(ot === 'cluster') {
+          setTimeout(() => {
+                const md = UI.modals.cluster;
+                md.element('name').value = '';
+                md.element('actor').value = '';
+                md.show('name');
+              });            
+        }
       }
       return;
     }
@@ -2020,7 +2397,7 @@ class GUIController extends Controller {
     } else if(this.on_node) {
       if(this.active_button === this.buttons.link) {
         this.linking_node = this.on_node;
-        // NOTE: return without updating buttons
+        // NOTE: Return without updating buttons.
         return;
       } else if(this.active_button === this.buttons.constraint) {
         // Allow constraints only on nodes having upper bounds defined.
@@ -2031,6 +2408,7 @@ class GUIController extends Controller {
         }
       } else {
         this.dragged_node = this.on_node;
+        // NOTE: Keep track of relative movement of the dragged node.
         this.move_dx = this.mouse_x - this.on_node.x;
         this.move_dy = this.mouse_y - this.on_node.y;
         if(MODEL.selection.indexOf(this.on_node) < 0) MODEL.select(this.on_node);
@@ -2055,6 +2433,10 @@ class GUIController extends Controller {
   mouseUp(e) {
     // Responds to mouseup event.
     const cp = this.paper.cursorPosition(e.pageX, e.pageY);
+    // Keep track of the cumulative relative movement since the last
+    // mousedown event.
+    this.net_move_x += cp[0] - this.mouse_x;
+    this.net_move_y += cp[1] - this.mouse_y;
     this.mouse_up_x = cp[0];
     this.mouse_up_y = cp[1];
     // First check whether user is selecting a rectangle.
@@ -2071,44 +2453,32 @@ class GUIController extends Controller {
       // If rectangle has size greater than 2x2 pixels, select all elements
       // having their center inside the selection rectangle.
       if(brx - tlx > 2 && bry - tly > 2) {
-        const ol = [], fc = MODEL.focal_cluster;
-        for(let i = 0; i < fc.processes.length; i++) {
-          const obj = fc.processes[i];
-          if(obj.x >= tlx && obj.x <= brx && obj.y >= tly && obj.y < bry) {
-            ol.push(obj);
-          }
+        const
+            ol = [],
+            fc = MODEL.focal_cluster;
+        for(const p of fc.processes) {
+          if(p.x >= tlx && p.x <= brx && p.y >= tly && p.y < bry) ol.push(p);
         }
-        for(let i = 0; i < fc.product_positions.length; i++) {
-          const obj = fc.product_positions[i];
-          if(obj.x >= tlx && obj.x <= brx && obj.y >= tly && obj.y < bry) {
-            ol.push(obj.product);
+        for(const pp of fc.product_positions) {
+          if(pp.x >= tlx && pp.x <= brx && pp.y >= tly && pp.y < bry) {
+            ol.push(pp.product);
           }
         }
-        for(let i = 0; i < fc.sub_clusters.length; i++) {
-          const obj = fc.sub_clusters[i];
-          if(obj.x >= tlx && obj.x <= brx && obj.y >= tly && obj.y < bry) {
-            ol.push(obj);
-          }
+        for(const c of fc.sub_clusters) {
+          if(c.x >= tlx && c.x <= brx && c.y >= tly && c.y < bry) ol.push(c);
         }
-        for(let i = 0; i < fc.notes.length; i++) {
-          const obj = fc.notes[i];
-          if(obj.x >= tlx && obj.x <= brx && obj.y >= tly && obj.y < bry) {
-            ol.push(obj);
-          }
+        for(const n of fc.notes) {
+          if(n.x >= tlx && n.x <= brx && n.y >= tly && n.y < bry) ol.push(n);
         }
-        for(let i in MODEL.links) if(MODEL.links.hasOwnProperty(i)) {
-          const obj = MODEL.links[i];
+        for(let k in MODEL.links) if(MODEL.links.hasOwnProperty(k)) {
+          const l = MODEL.links[k];
           // Only add a link if both its nodes are selected as well.
-          if(fc.linkInList(obj, ol)) {
-            ol.push(obj);
-          }
+          if(fc.linkInList(l, ol)) ol.push(l);
         }
-        for(let i in MODEL.constraints) if(MODEL.constraints.hasOwnProperty(i)) {
-          const obj = MODEL.constraints[i];
+        for(let k in MODEL.constraints) if(MODEL.constraints.hasOwnProperty(k)) {
+          const c = MODEL.constraints[k];
           // Only add a constraint if both its nodes are selected as well.
-          if(fc.linkInList(obj, ol)) {
-            ol.push(obj);
-          }
+          if(fc.linkInList(c, ol)) ol.push(c);
         }
         // Having compiled the object list, actually select them.
         MODEL.selectList(ol);
@@ -2123,9 +2493,9 @@ class GUIController extends Controller {
     } else if(this.linking_node) {
       // If so, check whether the cursor is over a node of the appropriate type.
       if(this.on_node && MODEL.canLink(this.linking_node, this.on_node)) {
-        const obj = MODEL.addLink(this.linking_node, this.on_node);
-        UNDO_STACK.push('add', obj);
-        MODEL.select(obj);
+        const l = MODEL.addLink(this.linking_node, this.on_node);
+        UNDO_STACK.push('add', l);
+        MODEL.select(l);
         this.paper.drawModel(MODEL);
       }
       this.linking_node = null;
@@ -2136,9 +2506,9 @@ class GUIController extends Controller {
     // dragging its endpoint).
     } else if(this.constraining_node) {
       if(this.on_node && this.constraining_node.canConstrain(this.on_node)) {
-        // display constraint editor
-        CONSTRAINT_EDITOR.from_name.innerHTML = this.constraining_node.displayName;
-        CONSTRAINT_EDITOR.to_name.innerHTML = this.on_node.displayName;
+        // Display constraint editor.
+        CONSTRAINT_EDITOR.from_name.innerText = this.constraining_node.displayName;
+        CONSTRAINT_EDITOR.to_name.innerText = this.on_node.displayName;
         CONSTRAINT_EDITOR.showDialog();
       }
       this.linking_node = null;
@@ -2149,31 +2519,25 @@ class GUIController extends Controller {
     // Then check whether the user is moving a node (possibly part of a
     // larger selection).
     } else if(this.dragged_node) {
-      // Always perform the move operation (this will do nothing if the
-      // cursor did not move).
-      MODEL.moveSelection(
-          this.mouse_up_x - this.mouse_x, this.mouse_up_y - this.mouse_y);
-      // Set cursor to pointer, as it should be on some node while dragging.
-      this.paper.container.style.cursor = 'pointer';
-      // @@TO DO: if on top of a cluster, move it there.
-      // NOTE: Cursor will always be over the selected cluster (while dragging).
-      if(this.on_cluster && !this.on_cluster.selected) {
-        UNDO_STACK.push('drop', this.on_cluster);
-        MODEL.dropSelectionIntoCluster(this.on_cluster);
-        this.on_node = null;
-        this.on_note = null;
-        this.target_cluster = null;
-        // Redraw cluster to erase its orange "target corona".
-        UI.paper.drawCluster(this.on_cluster);
-      }
-  
-      // Check wether the cursor has been moved.
+      // NOTE: When double-clicking with a sensitive mouse, the cursor
+      // may move a few pixels, and then this should NOT be considered
+      // as an intentional move. Hence, check wether the cursor has been
+      // moved *significantly* since the mouseDown event.
       const
-          absdx = Math.abs(this.mouse_down_x - this.mouse_x),
-          absdy = Math.abs(this.mouse_down_y - this.mouse_y);
-      // If no *significant* move made, remove the move undo.
-      if(absdx + absdy === 0) UNDO_STACK.pop('move');
-      if(this.doubleClicked && absdx + absdy < 3) {
+          mdx = this.mouse_down_x - this.mouse_x,
+          mdy = this.mouse_down_y - this.mouse_y,
+          absdx = Math.abs(this.net_move_x),
+          absdy = Math.abs(this.net_move_y),
+          sigmv = (MODEL.align_to_grid ? MODEL.grid_pixels / 4 : 2.5);
+      if(this.doubleClicked) {
+        // Ignore insignificant move.
+        if(absdx < sigmv && absdy < sigmv) {
+          // Undo the move and remove the action from the UNDO-stack.
+          // NOTE: Do not use the regular `undo` routine as this would
+          // make the action redoable.
+          MODEL.moveSelection(mdx, mdy);
+          UNDO_STACK.pop('move');
+        }
         // Double-clicking opens properties dialog, except for clusters;
         // then "drill down", i.e., make the double-clicked cluster focal.
         if(this.dragged_node instanceof Cluster) {
@@ -2197,6 +2561,30 @@ class GUIController extends Controller {
         } else {
           this.showNotePropertiesDialog(this.dragged_node);
         }
+      } else {
+        // Move the selection, even if the movement is very small, because the
+        // final movement since last mouse event may make the *cumulative*
+        // movement since the last mouseDown significant.
+        MODEL.moveSelection(
+            this.mouse_up_x - this.mouse_x, this.mouse_up_y - this.mouse_y);
+        if(this.net_move_x < 0.5 && this.net_move_y < 0.5) {
+          // No effective move of the selection => remove the UNDO.
+          UNDO_STACK.pop('move');
+        }
+        // Set cursor to pointer, as it should be on some node while dragging.
+        this.paper.container.style.cursor = 'pointer';
+        // NOTE: Cursor will always be over the selected cluster (while dragging).
+        if(this.on_cluster && !this.on_cluster.selected) {
+          UNDO_STACK.push('drop', this.on_cluster);
+          MODEL.dropSelectionIntoCluster(this.on_cluster);
+          this.on_node = null;
+          this.on_note = null;
+          this.target_cluster = null;
+          // Redraw cluster to erase its orange "target corona".
+          UI.paper.drawCluster(this.on_cluster);
+        }
+        // Only now align to grid.
+        MODEL.alignToGrid();
       }
       this.dragged_node = null;
   
@@ -2210,6 +2598,8 @@ class GUIController extends Controller {
         this.showConstraintPropertiesDialog(this.on_constraint);
       }
     }
+    // Finally, reset "selecting with rectangle" (just to be sure), and
+    // update the UI button states.
     this.start_sel_x = -1;
     this.start_sel_y = -1;
     this.updateButtons();
@@ -2253,9 +2643,8 @@ class GUIController extends Controller {
         topmod = null,
         code = e.code,
         alt = e.altKey;
-    for(let i = 0; i < modals.length; i++) {
+    for(const m of modals) {
       const
-          m = modals[i],
           cs = window.getComputedStyle(m),
           z = parseInt(cs.zIndex);
       if(cs.display !== 'none' && z > maxz) {
@@ -2275,15 +2664,16 @@ class GUIController extends Controller {
         while(i < inp.length && inp[i].disabled) i++;
         if(i < inp.length) {
           inp[i].focus();
-        } else if(['constraint-modal', 'boundline-data-modal',
+        } else if(['datasetgroup-modal', 'constraint-modal', 'boundline-data-modal',
             'xp-clusters-modal'].indexOf(topmod.id) >= 0) {
-          // NOTE: Constraint modal, boundline data modal and "ignore clusters" modal must NOT close
-          // when Enter is pressed, but only de-focus the input field.
+          // NOTE: These modals must NOT close when Enter is pressed, but only
+          // de-focus the input field.
           e.target.blur();
         } else {
           const btns = topmod.getElementsByClassName('ok-btn');
           if(btns.length > 0) btns[0].dispatchEvent(new Event('click'));
         }
+        if(topmod.id === 'datasetgroup-modal') UI.modals.datasetgroup.enterKey();
       } else if(this.dr_dialog_order.length > 0) {
         // Send ENTER key event to the top draggable dialog.
         const last = this.dr_dialog_order.length - 1;
@@ -2297,15 +2687,22 @@ class GUIController extends Controller {
       // Prevent backspace to be interpreted (by FireFox) as "go back in browser".
       e.preventDefault();
     } else if(ttag === 'BODY') {
-      // Constraint Editor accepts arrow keys.
-      if(topmod && topmod.id === 'constraint-modal') {
-        if(code.startsWith('Arrow')) {
+      // Dataset group modal and Constraint Editor accept arrow keys.
+      if(topmod) {
+        if(topmod.id === 'constraint-modal' && code.startsWith('Arrow')) {
           e.preventDefault();
           CONSTRAINT_EDITOR.arrowKey(e);
           return;
         }
+        if(topmod.id === 'datasetgroup-modal' &&
+            (code === 'ArrowUp' || code === 'ArrowDown')) {
+          e.preventDefault();
+          // NOTE: Pass key direction as -1 for UP and +1 for DOWN.
+          UI.modals.datasetgroup.upDownKey(e.keyCode - 39);
+          return;
+        }
       }
-      // Up and down arrow keys.
+      // Lists in draggable dialogs respond to up and down arrow keys.
       if(code === 'ArrowUp' || code === 'ArrowDown') {
         e.preventDefault();
         // Send event to the top draggable dialog.
@@ -2569,7 +2966,7 @@ class GUIController extends Controller {
   validNames(nn, an='') {
     // Check whether names meet conventions; if not, warn user
     if(!UI.validName(nn) || nn.indexOf(UI.BLACK_BOX) >= 0) {
-      UI.warn(`Invalid name "${nn}"`);
+      this.warningInvalidName(nn);
       return false;
     }
     if(an === '' || an === UI.NO_ACTOR) return true;
@@ -2627,12 +3024,12 @@ class GUIController extends Controller {
   }
   
   updateScaleUnitList() {
-    // Update the HTML datalist element to reflect all scale units
+    // Update the HTML datalist element to reflect all scale units.
     const
         ul = [],
         keys = Object.keys(MODEL.scale_units).sort(ciCompare);
-    for(let i = 0; i < keys.length; i++) {
-      ul.push(`<option value="${MODEL.scale_units[keys[i]].name}">`);
+    for(const k of keys) {
+      ul.push(`<option value="${MODEL.scale_units[k].name}">`);
     }
     document.getElementById('units-data').innerHTML = ul.join('');
   }
@@ -3001,6 +3398,7 @@ class GUIController extends Controller {
           const vn = this.validName(nn);
           if(!vn) {
             UNDO_STACK.pop();
+            this.warningInvalidName(nn);
             return false;
           }
           // NOTE: Pre-check if product exists.
@@ -3229,8 +3627,8 @@ class GUIController extends Controller {
           if(elig.length) {
             sl.push('<div class="paste-select"><select id="paste-ft-', i,
               '" style="font-size: 12px">');
-            for(let j = 0; j < elig.length; j++) {
-              const dn = elig[j].displayName;
+            for(const e of elig) {
+              const dn = e.displayName;
               sl.push('<option value="', dn, '">', dn, '</option>');
             }
             sl.push('</select></div>');
@@ -3404,8 +3802,7 @@ class GUIController extends Controller {
     function nameConflicts(node) {
       // Maps names of entities defined by the child nodes of `node`
       // while detecting name conflicts.
-      for(let i = 0; i < node.childNodes.length; i++) {
-        const c = node.childNodes[i];
+      for(const c of node.childNodes) {
         if(c.nodeName !== 'link' && c.nodeName !== 'constraint') {
           const
               fn = fullName(c),
@@ -3505,9 +3902,8 @@ class GUIController extends Controller {
       // Prompt for names of selected cluster nodes.
       if(selc_node.childNodes.length && !mapping.prefix) {
         mapping.top_clusters = {};
-        for(let i = 0; i < selc_node.childNodes.length; i++) {
+        for(const c of selc_node.childNodes) {
           const
-              c = selc_node.childNodes[i],
               fn = fullName(c),
               mn = mappedName(fn);
           mapping.top_clusters[fn] = mn;
@@ -3522,9 +3918,8 @@ class GUIController extends Controller {
       const
           ft_map = {},
           ft_type = {};
-      for(let i = 0; i < from_tos_node.childNodes.length; i++) {
+      for(const c of from_tos_node.childNodes) {
         const
-            c = from_tos_node.childNodes[i],
             fn = fullName(c),
             mn = mappedName(fn);
         if(MODEL.objectByName(mn)) {
@@ -3554,20 +3949,14 @@ console.log('HERE name conflicts', name_conflicts, mapping);
     }
     
     // No conflicts => add all
-    for(let i = 0; i < extras_node.childNodes.length; i++) {
-      addEntityFromNode(extras_node.childNodes[i]);
-    }
-    for(let i = 0; i < from_tos_node.childNodes.length; i++) {
-      addEntityFromNode(from_tos_node.childNodes[i]);
-    }
-    for(let i = 0; i < entities_node.childNodes.length; i++) {
-      addEntityFromNode(entities_node.childNodes[i]);
-    }
+    for(const c of extras_node.childNodes) addEntityFromNode(c);
+    for(const c of from_tos_node.childNodes) addEntityFromNode(c);
+    for(const c of entities_node.childNodes) addEntityFromNode(c);
     // Update diagram, showing newly added nodes as selection.
     MODEL.clearSelection();
-    for(let i = 0; i < selection_node.childNodes.length; i++) {
+    for(const c of selection_node.childNodes) {
       const
-          n = xmlDecoded(nodeContent(selection_node.childNodes[i])),
+          n = xmlDecoded(nodeContent(c)),
           obj = MODEL.objectByName(mappedName(n));
       if(obj) {
         // NOTE: Selected products must be positioned.
@@ -3681,6 +4070,12 @@ console.log('HERE name conflicts', name_conflicts, mapping);
     cb = UI.boxChecked('settings-power');
     redraw = redraw || cb !== model.with_power_flow;
     model.with_power_flow = cb;
+    // NOTE: Clear the "ignore" options if no power flow constraints.
+    if(!model.with_power_flow) {
+      model.ignore_grid_capacity = false;
+      model.ignore_KVL = false;
+      model.ignore_power_losses = false;
+    }
     cb = UI.boxChecked('settings-cost-prices');
     redraw = redraw || cb !== model.infer_cost_prices;
     model.infer_cost_prices = cb;
@@ -3749,8 +4144,7 @@ console.log('HERE name conflicts', name_conflicts, mapping);
     const
         md = this.modals.solver,
         html = ['<option value="">(default)</option>'];
-    for(let i = 0; i < VM.solver_list.length; i++) {
-      const s = VM.solver_list[i];
+    for(const s of VM.solver_list) {
       html.push(['<option value="', s,
           (s === MODEL.preferred_solver ? '"selected="selected' : ''),
           '">', VM.solver_names[s], '</option>'].join(''));
@@ -3885,17 +4279,13 @@ console.log('HERE name conflicts', name_conflicts, mapping);
       plate.innerHTML = pg.voltage;
       overlay.style.display = 'block';
       // Disable tab stop for the properties that are now not shown.
-      for(let i = 0; i < notab.length; i++) {
-        md.element(notab[i]).tabIndex = -1;
-      }
+      for(const nt of notab) md.element(nt).tabIndex = -1;
     } else {
       plate.innerHTML = '(&#x21AF;)';
       plate.className = 'no-grid-plate';
       overlay.style.display = 'none';
       // Enable tab stop for the properties that are now not shown.
-      for(let i = 0; i < notab.length; i++) {
-        md.element(notab[i]).tabIndex = 0;
-      }
+      for(const nt of notab) md.element(nt).tabIndex = 0;
     }
     this.hideGridPlateMenu('process');
     // Show plate "button" only when power grids option is set for model.
@@ -4131,9 +4521,7 @@ console.log('HERE name conflicts', name_conflicts, mapping);
 
   showClusterPropertiesDialog(c, group=[]) {
     let bb = false;
-    for(let i = 0; !bb && i < group.length; i++) {
-      bb = group[i].is_black_boxed;
-    }
+    for(const g of group) bb = bb || g.is_black_boxed;
     if(bb || c.is_black_boxed) {
       this.notify('Black-boxed clusters cannot be edited');
       return;
@@ -4375,31 +4763,27 @@ console.log('HERE name conflicts', name_conflicts, mapping);
       this.drawObject(p);
       // Make list of nodes related to P by links
       const rel_nodes = [];
-      for(let i = 0; i < p.inputs.length; i++) {
-        rel_nodes.push(p.inputs[i].from_node);
-      }
-      for(let i = 0; i < p.outputs.length; i++) {
-        rel_nodes.push(p.outputs[i].to_node);
-      }
+      for(const l of p.inputs) rel_nodes.push(l.from_node);
+      for(const l of p.outputs) rel_nodes.push(l.to_node);
       const options = [];
-      for(let i in MODEL.products) if(MODEL.products.hasOwnProperty(i) &&
+      for(let k in MODEL.products) if(MODEL.products.hasOwnProperty(k) &&
           // NOTE: do not show "black-boxed" products
-          !i.startsWith(UI.BLACK_BOX)) {
-        const po = MODEL.products[i];
+          !k.startsWith(UI.BLACK_BOX)) {
+        const po = MODEL.products[k];
         // Skip the product that is to be replaced, an also products having a
         // different type (regular product or data product) 
         if(po !== p && po.is_data === p.is_data) {
           // NOTE: also skip products PO that are linked to a node Q that is
           // already linked to P (as replacing would then create a two-way link)
           let no_rel = true; 
-          for(let j = 0; j < po.inputs.length; j++) {
-            if(rel_nodes.indexOf(po.inputs[j].from_node) >= 0) {
+          for(const l of po.inputs) {
+            if(rel_nodes.indexOf(l.from_node) >= 0) {
               no_rel = false;
               break;
             }
           }
-          for(let j = 0; j < po.outputs.length; j++) {
-            if(rel_nodes.indexOf(po.outputs[j].to_node) >= 0) {
+          for(const l of po.outputs) {
+            if(rel_nodes.indexOf(l.to_node) >= 0) {
               no_rel = false;
               break;
             }