linny-r 2.0.12 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linny-r",
-  "version": "2.0.12",
+  "version": "2.1.1",
   "description": "Executable graphical language with WYSIWYG editor for MILP models",
   "main": "server.js",
   "scripts": {

package/static/index.html

@@ -914,6 +914,8 @@ NOTE: Products directly linked to such processes should have a proportional unit
              title="Include module in current model">
         <img id="repo-load-btn" class="btn disab" src="images/open.png"
              title="Load model from repository">
+        <img id="repo-update-btn" class="btn disab" src="images/update.png"
+             title="Update clusters that have been included in the model">
         <img id="repo-store-btn" class="btn enab" src="images/store.png"
              title="Store model as module in repository">
         <img id="repo-black-box-btn" class="btn enab" src="images/black-box.png"
@@ -1061,9 +1063,6 @@ NOTE: Products directly linked to such processes should have a proportional unit
         <img class="cancel-btn" src="images/cancel.png">
         <img class="ok-btn" src="images/ok.png">
       </div>
-      <div style="margin:2px; background-color: Yellow">
-        <strong>NOTE:</strong> <em>This action cannot be undone!</em>
-      </div>
       <div style="margin:2px">
         <label>Cluster:</label>
         <input id="include-prefix" type="text"
@@ -1082,6 +1081,38 @@ NOTE: Products directly linked to such processes should have a proportional unit
     </div>
   </div>  
 
+  <!-- the UPDATE dialog prompts for a module name -->
+  <div id="update-modal" class="modal">
+    <div id="update-dlg" class="inp-dlg" style="min-width: 320px">
+      <div class="dlg-title">
+        Update clusters previously included from a module
+        <img class="cancel-btn" src="images/cancel.png">
+        <img class="ok-btn" src="images/ok.png">
+      </div>
+      <div style="padding: 2px">
+        <div>
+          Update using module: <span id="update-name"></span>
+        </div>
+        <div>
+          <label>Clusters based on:</label>
+          <select id="update-module">
+          </select>
+          <div id="update-count" class="update-cc"></div>
+        </div>
+        <div id="update-issues">
+          <div id="update-issues-header"></div>
+          <div id="update-issues-area"></div>
+        </div>
+        <div id="update-remove">
+          <div id="update-remove-header">
+            <span id="update-remove-count"></span> will be removed
+          </div>
+          <div id="update-remove-area"></div>
+        </div>
+      </div>
+    </div>
+  </div>  
+
   <!-- the CONFIRM LOAD modal asks to confirm to load model from repository -->
   <div id="confirm-load-from-repo-modal" class="modal">
     <div id="confirm-load-from-repo-dlg" class="inp-dlg">

package/static/linny-r.css

@@ -607,6 +607,11 @@ span.node-details {
   margin-left: 15px;
 }
 
+span.mod-name {
+  font-style: normal;
+  color: #403080;  
+}
+
 #issue-panel {
   display: none;
   background-color: Yellow;
@@ -707,6 +712,11 @@ img.inline-cancel-btn:hover {
   filter: brightness(120%);
 }
 
+img.ok-btn.disab {
+  filter: saturate(0%) brightness(150%) contrast(70%);
+  pointer-events: none;
+}
+
 #actor-group,
 #constraint-group,
 #cluster-group,
@@ -4152,8 +4162,9 @@ td.sa-not-run {
 
 #xp-ignore-count {
   position: absolute;
-  right: 14px;
+  right: 2px;
   bottom: 3px;
+  width: 18px;
   height: 16px;
   font-size: 9px;
   color: #806070;
@@ -4882,6 +4893,7 @@ span.sd-clear {
 }
 
 #paste-dlg,
+#update-dlg,
 #include-dlg {
   width: 320px;
   height: min-content;
@@ -4907,9 +4919,29 @@ span.sd-clear {
   margin-left: 9px;
 }
 
+#update-name {
+  font-family: monospace;
+  font-size: 14px;
+}
+
+div.update-cc {
+  display: inline-block;
+  margin-left: 6px;
+  font-style: italic;
+  color: Gray;
+}
+
+#update-remove-header,
+#update-issues-header {
+  font-weight: bold;
+  margin: 4px 2px 2px 2px;
+}
+
 #paste-scroll-area,
-#include-scroll-area {
-  margin: 2px;
+#include-scroll-area,
+#update-remove-area,
+#update-issues-area {
+  margin: 0 2px;
   height: min-content;
   max-height: 350px !important;
   width: calc(100% - 4px);
@@ -4918,6 +4950,13 @@ span.sd-clear {
   overflow-y: auto;
 }
 
+#update-remove-area,
+#update-issues-area {
+  max-height: 150px !important;
+  background-color: white;
+  border: 1px solid Silver;
+}
+
 div.paste-tactic {
   display: inline-block;
   vertical-align: top;

package/static/scripts/linny-r-ctrl.js

@@ -311,6 +311,12 @@ class Controller {
         (name.startsWith(this.BLACK_BOX) || name[0].match(/[\w]/));
   }
   
+  realActorName(name) {
+    // Return `name` unless it is '(no actor)'; then return empty string.
+    if(name === this.NO_ACTOR) return '';
+    return name;
+  }
+  
   prefixesAndName(name, key=false) {
     // Returns name split exclusively at '[non-space]: [non-space]'
     let sep = this.PREFIXER,

package/static/scripts/linny-r-gui-actor-manager.js

@@ -224,10 +224,10 @@ class ActorManager {
   }
   
   showEditActorDialog(name, expr) {
-    // Display modal for editing properties of one actor
+    // Display modal for editing properties of one actor.
     this.actor_span.innerHTML = name;
     this.actor_name.value = name;
-    // Do not allow modification of the name '(no actor)'
+    // Do not allow modification of the name '(no actor)'.
     if(name === UI.NO_ACTOR) {
       this.actor_name.disabled = true;
       this.actor_io.style.display = 'none';
@@ -242,22 +242,22 @@ class ActorManager {
   
   modifyActorEntry() {
     // This method is called when the modeler submits the "actor properties"
-    // dialog
+    // dialog.
     let n = this.actor_span.innerHTML,
         nn = UI.NO_ACTOR,
         x = this.actor_weight.value.trim(),
         xp = new ExpressionParser(x);
     if(n !== UI.NO_ACTOR) {
       nn = this.actor_name.value.trim();
-      // NOTE: prohibit colons in actor names to avoid confusion with
-      // prefixed entities
+      // NOTE: Prohibit colons in actor names to avoid confusion with
+      // prefixed entities.
       if(!UI.validName(nn) || nn.indexOf(':') >= 0) {
         UI.warn(UI.WARNING.INVALID_ACTOR_NAME);
         return false;
       }
     }
     if(xp.error) {
-      // NOTE: do not pass the actor, as its name is being edited as well
+      // NOTE: Do not pass the actor, as its name is being edited as well.
       UI.warningInvalidWeightExpression(null, xp.error);
       return false;
     }

package/static/scripts/linny-r-gui-chart-manager.js

@@ -112,6 +112,10 @@ class GUIChartManager extends ChartManager {
     this.svg_container.addEventListener(
         'mouseleave', (event) => CHART_MANAGER.updateTimeStep(event, false));
     this.time_step = document.getElementById('chart-time-step');
+    this.prefix_div = document.getElementById('chart-prefix-div');
+    this.prefix_selector = document.getElementById('chart-prefix');
+    this.prefix_selector.addEventListener(
+        'change', () => CHART_MANAGER.selectPrefix());
     document.getElementById('chart-toggle-chevron').addEventListener(
         'click', () => CHART_MANAGER.toggleControlPanel());
     document.getElementById('chart-stats-btn').addEventListener(
@@ -354,8 +358,9 @@ class GUIChartManager extends ChartManager {
   }
   
   updateDialog() {
-    // Refreshe all dialog fields to display actual MODEL chart properties.
+    // Refresh all dialog fields to display actual MODEL chart properties.
     this.updateSelector();
+    this.prefix_div.style.display = 'none';
     let c = null;
     if(this.chart_index >= 0) {
       c = MODEL.charts[this.chart_index];
@@ -390,6 +395,19 @@ class GUIChartManager extends ChartManager {
           '</td></tr>'].join(''));
       }
       this.variables_table.innerHTML = ol.join('');
+      const
+          cp = c.prefix,
+          pp = c.possiblePrefixes,
+          html = [];
+      if(pp.length) {
+        for(const p of pp) {
+          const cap = capitalized(p);
+          html.push('<option value="', cap, '"', (cap === cp ? ' selected' : ''), '>',
+              cap, '</option>');
+        }
+        this.prefix_div.style.display = 'inline-block';
+      }
+      this.prefix_selector.innerHTML = html.join('');
     } else {
       this.variable_index = -1;
     }
@@ -439,6 +457,15 @@ class GUIChartManager extends ChartManager {
     this.stretchChart(0);
   }
   
+  selectPrefix() {
+    // Set the preferred prefix for this chart. This will override the
+    // title prefix (if any).
+    if(this.chart_index >= 0) {
+      MODEL.charts[this.chart_index].preferred_prefix = this.prefix_selector.value;
+    }
+    this.updateDialog();
+  }
+  
   showSortingMenu() {
     // Show the pane with sort type buttons only if variable is selected.
     this.sorting_menu.style.display =
@@ -594,27 +621,31 @@ class GUIChartManager extends ChartManager {
   
   cloneChart() {
     // Create a new chart that is identical to the current one.
-    if(this.chart_index >= 0) {
-      let c = MODEL.charts[this.chart_index],
-          nt = c.title + '-copy';
-      while(MODEL.indexOfChart(nt) >= 0) {
-        nt += '-copy';
-      }
-      const nc = MODEL.addChart(nt);
-      // Copy properties of `c` to `nc`;
-      nc.histogram = c.histogram;
-      nc.bins = c.bins;
-      nc.show_title = c.show_title;
-      nc.legend_position = c.legend_position;
-      for(const cv of c.variables) {
-        const nv = new ChartVariable(nc);
-        nv.setProperties(cv.object, cv.attribute, cv.stacked,
-            cv.color, cv.scale_factor, cv.line_width, cv.sorted);
-        nc.variables.push(nv);
-      }
-      this.chart_index = MODEL.indexOfChart(nc.title);
-      this.updateDialog();
-    }    
+    if(this.chart_index < 0) return;
+    const
+        c = MODEL.charts[this.chart_index],
+        pp = c.possiblePrefixes;
+    let nt = c.title;
+    if(pp) {
+      // Remove title prefix (if any), and add selected one.
+      nt = c.prefix + UI.PREFIXER + nt.split(UI.PREFIXER).pop();
+    }
+    // If title is not new, keep adding a suffix until it is new.
+    while(MODEL.indexOfChart(nt) >= 0) nt += '-copy';
+    const nc = MODEL.addChart(nt);
+    // Copy properties of `c` to `nc`;
+    nc.histogram = c.histogram;
+    nc.bins = c.bins;
+    nc.show_title = c.show_title;
+    nc.legend_position = c.legend_position;
+    for(const cv of c.variables) {
+      const nv = new ChartVariable(nc);
+      nv.setProperties(cv.object, cv.attribute, cv.stacked,
+          cv.color, cv.scale_factor, cv.line_width, cv.sorted);
+      nc.variables.push(nv);
+    }
+    this.chart_index = MODEL.indexOfChart(nc.title);
+    this.updateDialog();
   }
 
   toggleRunResults() {
@@ -637,13 +668,7 @@ class GUIChartManager extends ChartManager {
   deleteChart() {
     // Delete the shown chart (if any).
     if(this.chart_index >= 0) {
-      // NOTE: Do not delete the default chart, but clear it instead.
-      if(MODEL.charts[this.chart_index].title === this.new_chart_title) {
-        MODEL.charts[this.chart_index].reset();
-      } else {
-        MODEL.charts.splice(this.chart_index, 1);
-        this.chart_index = -1;
-      }
+      MODEL.deleteChart(this.chart_index);
       // Also update the experiment viewer, because this chart may be
       // one of the output charts of the selected experiment.
       UI.updateControllerDialogs('CFX');
@@ -742,9 +767,6 @@ class GUIChartManager extends ChartManager {
     if(indices.length < 2) {
       if(indices.length) {
         chart.addWildcardVariables(dsm, indices);
-      } else if(dsm.selector.startsWith(':')) {
-        UI.notify('Plotting methods is work-in-progress!');
-        console.log('HERE dsm', dsm, 'expr', dsm.expression.text, 'indices', indices);
       } else {
         UI.notify(`Variable "${dsm.displayName}" cannot be plotted`);
       }

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

@@ -726,7 +726,7 @@ class GUIController extends Controller {
     this.dbl_clicked_node = null;
     this.target_cluster = null;
     this.constraint_under_cursor = null;
-    this.last_up_down_without_move = Date.now();
+    this.last_up_down_without_move = {up: 0, down: 0};
     // Keyboard shortcuts: Ctrl-x associates with menu button ID.
     this.shortcuts = {
       'A': 'actors',
@@ -1672,15 +1672,15 @@ class GUIController extends Controller {
     }
   }
 
-  get doubleClicked() {
-    // Return TRUE when a "double-click" occurred
+  doubleClicked(ud) {
+    // Return TRUE when a "double-click" occurred.
     const
         now = Date.now(),
-        dt = now - this.last_up_down_without_move;
-    this.last_up_down_without_move = now;
+        dt = now - this.last_up_down_without_move[ud];
+    this.last_up_down_without_move[ud] = now;
     // Consider click to be "double" if it occurred less than 300 ms ago
     if(dt < 300) {
-      this.last_up_down_without_move = 0;
+      this.last_up_down_without_move[ud] = 0;
       return true;
     }
     return false;
@@ -2230,7 +2230,9 @@ class GUIController extends Controller {
       }
       // 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) {
+      // NOTE: Do not do this when the dragged selection is just a single note!
+      if(this.dragged_node &&
+          !(this.dragged_node instanceof Note && MODEL.selection.length < 2)) {
         // 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) {
@@ -2312,14 +2314,8 @@ class GUIController extends Controller {
       return;
     } // END IF Ctrl
   
-    // Clear selection unless SHIFT pressed or mouseDown while hovering
-    // over a SELECTED node or link.
-    if(!(e.shiftKey ||
-        (this.on_node && MODEL.selection.indexOf(this.on_node) >= 0) ||
-        (this.on_cluster && MODEL.selection.indexOf(this.on_cluster) >= 0) ||
-        (this.on_note && MODEL.selection.indexOf(this.on_note) >= 0) ||
-        (this.on_link && MODEL.selection.indexOf(this.on_link) >= 0) ||
-        (this.on_constraint && MODEL.selection.indexOf(this.on_constraint) >= 0))) {
+    // Clear selection unless SHIFT pressed or double-clicking.
+    if(!(this.doubleClicked('down') || e.shiftKey)) {
       MODEL.clearSelection();
       UI.drawDiagram(MODEL);
     }
@@ -2538,7 +2534,7 @@ class GUIController extends Controller {
           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) {
+      if(this.doubleClicked('up')) {
         // Ignore insignificant move.
         if(absdx < sigmv && absdy < sigmv) {
           // Undo the move and remove the action from the UNDO-stack.
@@ -2584,13 +2580,15 @@ class GUIController extends Controller {
         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);
+          if(!(this.dragged_node instanceof Note && MODEL.selection.length < 2)) {
+            UNDO_STACK.push('drop', this.on_cluster);
+            MODEL.dropSelectionIntoCluster(this.on_cluster);
+            // Redraw cluster to erase its orange "target corona".
+            UI.paper.drawCluster(this.on_cluster);
+            this.on_node = null;
+            this.on_note = null;
+            this.target_cluster = null;
+          }
         }
         // Only now align to grid.
         MODEL.alignToGrid();
@@ -2599,11 +2597,11 @@ class GUIController extends Controller {
   
     // Then check whether the user is clicking on a link.
     } else if(this.on_link) {
-      if(this.doubleClicked) {
+      if(this.doubleClicked('up')) {
         this.showLinkPropertiesDialog(this.on_link);
       }
     } else if(this.on_constraint) {
-      if(this.doubleClicked) {
+      if(this.doubleClicked('up')) {
         this.showConstraintPropertiesDialog(this.on_constraint);
       }
     }
@@ -2979,7 +2977,7 @@ class GUIController extends Controller {
   // 
 
   validNames(nn, an='') {
-    // Check whether names meet conventions; if not, warn user
+    // Check whether names meet conventions. If not, warn user.
     if(!UI.validName(nn) || nn.indexOf(UI.BLACK_BOX) >= 0) {
       this.warningInvalidName(nn);
       return false;
@@ -3148,10 +3146,10 @@ class GUIController extends Controller {
     UI.info_line.classList.remove(...UI.info_line.classList);
   }
 
-  setMessage(msg, type=null) {
+  setMessage(msg, type=null, cause=null) {
     // Display `msg` on infoline unless no type (= plain text) and some
     // info, warning or error message is already displayed.
-    super.setMessage(msg, type);
+    super.setMessage(msg, type, cause);
     const types = ['notification', 'warning', 'error'];
     let d = new Date(),
         t = d.getTime(),
@@ -3666,7 +3664,7 @@ class GUIController extends Controller {
     // proceed to paste.
     const
         md = this.paste_modal,
-        mapping = Object.assign(md.mapping, {}),
+        mapping = Object.assign({}, md.mapping),
         tc = (mapping.top_clusters ?
             Object.keys(mapping.top_clusters).sort(ciCompare) : []),
         ft = (mapping.from_to ?
@@ -3713,6 +3711,14 @@ class GUIController extends Controller {
             
     // AUXILIARY FUNCTIONS
     
+    function namedObjects() {
+      // Return TRUE iff XML contains named objects.
+      for(const cn of entities_node.childNodes) {
+        if(cn.nodeName !== 'note') return true;
+      }
+      return false;
+    }
+    
     function fullName(node) {
       // Return full entity name inferred from XML node data.
       if(node.nodeName === 'from-to' || node.nodeName === 'selc') {
@@ -3848,7 +3854,18 @@ class GUIController extends Controller {
           fn = fullName(node),
           mn = mappedName(fn);
       let obj;
-      if(et === 'process' && !MODEL.processByID(UI.nameToID(mn))) {
+      if(et === 'note') {
+        // Ensure that copy had new time stamp.
+        let cn = childNodeByTag(node, 'timestamp').firstChild;
+        cn.nodeValue = new Date().getTime().toString();
+        cn = childNodeByTag(node, 'x-coord').firstChild;
+        // Move note a bit right and down.
+        cn.nodeValue = (safeStrToInt(cn.nodeValue, 0) + 12).toString();
+        cn = childNodeByTag(node, 'y-coord').firstChild;
+        cn.nodeValue = (safeStrToInt(cn.nodeValue, 0) + 12).toString();
+        obj = MODEL.addNote(node);
+        if(obj) new_entities.push(obj);
+      } else if(et === 'process' && !MODEL.processByID(UI.nameToID(mn))) {
         const
            na = nameAndActor(mn),
            new_actor = !MODEL.actorByID(UI.nameToID(na[1]));
@@ -3908,12 +3925,13 @@ class GUIController extends Controller {
     mapping.shared_prefix = sp;
     mapping.from_prefix = (fpn ? sp + fpn + UI.PREFIXER : sp);
     mapping.to_prefix = (tpn ? sp + tpn + UI.PREFIXER : sp);
-    mapping.from_actor = (ca === UI.NO_ACTOR ? '' : ca);
-    mapping.to_actor = (fca === UI.NO_ACTOR ? '' : fca);
+    mapping.from_actor = UI.realActorName(ca);
+    mapping.to_actor = UI.realActorName(fca);
     // Prompt for mapping when pasting to the same model and cluster.
     if(parseInt(mts) === MODEL.time_created.getTime() &&
         ca === fca && mapping.from_prefix === mapping.to_prefix &&
-        !(mapping.prefix || mapping.actor || mapping.increment)) {
+        !(mapping.prefix || mapping.actor || mapping.increment) &&
+        namedObjects()) {
       // Prompt for names of selected cluster nodes.
       if(selc_node.childNodes.length && !mapping.prefix) {
         mapping.top_clusters = {};
@@ -4546,8 +4564,7 @@ console.log('HERE name conflicts', name_conflicts, mapping);
     md.group = group;
     md.element('action').innerText = 'Edit';
     md.element('name').value = c.name;
-    md.element('actor').value = (c.actor.name == UI.NO_ACTOR ?
-        '' : c.actor.name);
+    md.element('actor').value = UI.realActorName(c.actor.name);
     md.element('options').style.display = 'block';
     this.setBox('cluster-collapsed', c.collapsed);
     this.setBox('cluster-ignore', c.ignore);

package/static/scripts/linny-r-gui-dataset-manager.js

@@ -289,17 +289,6 @@ class GUIDatasetManager extends DatasetManager {
     return null;
   }
   
-  datasetsByPrefix(prefix) {
-    // Return the list of datasets having the specified prefix.
-    const
-        pid = UI.nameToID(prefix + UI.PREFIXER),
-        dsl = [];
-    for(const k of Object.keys(MODEL.datasets)) {
-      if(k.startsWith(pid)) dsl.push(k);
-    }
-    return dsl;
-  }
-
   selectPrefixRow(e) {
     // Select expand/collapse prefix row.
     this.focal_table = this.dataset_table;
@@ -310,7 +299,7 @@ class GUIDatasetManager extends DatasetManager {
     const toggle = r.classList.contains('tree-btn');
     while(r.tagName !== 'TR') r = r.parentNode;
     this.selected_prefix_row = r;
-    this.prefixed_datasets = this.datasetsByPrefix(r.dataset.prefix);
+    this.prefixed_datasets = MODEL.datasetKeysByPrefix(r.dataset.prefix);
     const sel = this.dataset_table.getElementsByClassName('sel-set');
     this.selected_dataset = null;
     if(sel.length > 0) {
@@ -746,7 +735,7 @@ class GUIDatasetManager extends DatasetManager {
   }
   
   get selectedAsList() {
-  // Return list of datasets selected directly or by prefix.
+    // Return list of datasets selected directly or by prefix.
     const dsl = [];
     // Prevent including the equations dataset (just in case).
     if(this.selected_dataset && this.selected_dataset !== MODEL.equations_dataset) {
@@ -1243,12 +1232,14 @@ class GUIDatasetManager extends DatasetManager {
       for(let j = 0; j < ncol; j++) {
         const
             v = dsv[j].trim(),
-            sf = safeStrToFloat(v, '');
-        if(sf === '' && v !== '') {
+            sf = safeStrToFloat(v, NaN);
+        // NOTE: Ignore empty strings, but this may "shift up" numerical values on later rows.
+        if(isNaN(sf) && v !== '') {
           UI.warn(`Invalid numerical value "${v}" for <strong>${dsn[j]}</strong> on line ${i}`);
           return false;
+        } else if(!isNaN(sf)) {
+          dsa[j].push(sf);
         }
-        dsa[j].push(sf);
       }
     }
     // Add or update datasets.

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

@@ -209,8 +209,9 @@ class GUIMonitor {
         `ERROR at t=${t}: ` + VM.errorMessage(err);
     for(const x of VM.call_stack) {
       // For equations, only show the attribute.
-      const ons = (x.object === MODEL.equations_dataset ? '' :
-          x.object.displayName + '|');
+      const ons = (x.object === MODEL.equations_dataset ?
+          (x.attribute.startsWith(':') ? x.method_object_prefix : '') :
+              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, '|'));

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

@@ -1955,7 +1955,7 @@ class Paper {
     let l = (MODEL.solved ? proc.actualLevel(MODEL.t) : VM.NOT_COMPUTED),
         lb = proc.lower_bound.result(MODEL.t),
         ub = (proc.equal_bounds ? lb : proc.upper_bound.result(MODEL.t));
-    // NOTE: by default, lower bound = 0 (but do show exceptional values)
+    // NOTE: By default, lower bound = 0 (but do show exceptional values).
     if(lb === VM.UNDEFINED && !proc.lower_bound.defined) lb = 0;
     let hw,
         hh,
@@ -2766,6 +2766,15 @@ class Paper {
         'h-', w - shadow_width, 'v-', shadow_width,
         'h', w - 2*shadow_width, 'z'],
         {fill:stroke_color, stroke:stroke_color, 'stroke-width':stroke_width});
+    if(clstr.module) {
+      // Add three white dots at middle of bottom shade.
+      const
+          ely = y + hh - shadow_width / 2,
+          elfill = {fill: 'white'};
+      clstr.shape.addEllipse(x - 4, ely, 1, 1, elfill);
+      clstr.shape.addEllipse(x, ely, 1, 1, elfill);
+      clstr.shape.addEllipse(x + 4, ely, 1, 1, elfill);
+    }
     // Set fill color if slack used by some product contained by this cluster
     if(MODEL.t in clstr.slack_info) {
       const s = clstr.slack_info[MODEL.t];