linny-r 2.0.8 → 2.0.9

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

@@ -47,13 +47,11 @@ class GUIFileManager {
   // buttons on the top menu.
 
   getRemoteData(dataset, url) {
-    // Gets data from a URL, or from a file on the local host 
+    // Gets data from a URL, or from a file on the local host.
     if(url === '') return;
     if(url.indexOf('%') >= 0) {
       // Expand %i, %j and %k if used in the URL.
-      const letters = ['i', 'j', 'k'];
-      for(let i = 0; i < letters.length; i++) {
-        const l = letters[i];
+      for(const l of ['i', 'j', 'k']) {
         url = url.replaceAll('%' + l, valueOfIndexVariable(l));
       }
     }
@@ -361,9 +359,8 @@ class GUIFileManager {
     }
     fetch('autosave/', postData({
           action: 'store',
-          file: REPOSITORY_BROWSER.asFileName(
-              (MODEL.name || 'no-name') + '_by_' +
-                  (MODEL.author || 'no-author')),
+          file: asFileName((MODEL.name || 'no-name') +
+              '_by_' + (MODEL.author || 'no-author')),
           xml: MODEL.asXML,
           wsd: workspace
         }))
@@ -404,10 +401,9 @@ class GUIFileManager {
     }
   }
   
-  renderDiagramAsPNG(tight) {
-    // When `tight` is TRUE, add no whitespace around the diagram.
-    window.localStorage.removeItem('png-url');
-    if(tight) {
+  saveDiagramAsSVG(event) {
+    // Output SVG as string with nodes and arrows 100% opaque.
+    if(event.altKey) {
       // First align to grid and then fit to size.
       MODEL.alignToGrid();      
       UI.paper.fitToSize(1);
@@ -415,48 +411,15 @@ class GUIFileManager {
       UI.paper.fitToSize();
       MODEL.alignToGrid();      
     }
-    this.renderSVGAsPNG(UI.paper.opaqueSVG);
-  }
-  
-  renderSVGAsPNG(svg) {
-    // Sends SVG to the server, which will convert it to PNG using Inkscape;
-    // if successful, the server will return the URL to the PNG file location;
-    // this URL is passed via the browser's local storage to the newly opened
-    // browser tab that awaits this URL and then loads it
-    const form = {
-            action: 'png',
-            user: VM.solver_user,
-            token: VM.solver_token,
-            data: btoa(encodeURI(svg))
-          };
-    fetch('solver/', postData(form))
-      .then((response) => {
-          if(!response.ok) {
-            UI.alert(`ERROR ${response.status}: ${response.statusText}`);
-          }
-          return response.text();
-        })
-      .then((data) => {
-          // Pass URL of image to the newly opened browser window
-          window.localStorage.setItem('png-url', data);
-        })
-      .catch((err) => UI.warn(UI.WARNING.NO_CONNECTION, err));
-  }
-  
-  saveDiagramAsSVG(tight) {
-    // Output SVG as string with nodes and arrows 100% opaque.
-    if(tight) {
-      // First align to grid and then fit to size.
-      MODEL.alignToGrid();      
-      UI.paper.fitToSize(1);
+    if(event.shiftKey) {
+      this.pushOutSVG(UI.paper.opaqueSVG);
     } else {
-      UI.paper.fitToSize();
-      MODEL.alignToGrid();      
+      this.pushOutPNG(UI.paper.opaqueSVG);
     }
-    this.pushOutSVG(UI.paper.opaqueSVG);
   }
   
   pushOutSVG(svg) {
+    // Output SVG to browser as SVG image file download.
     const blob = new Blob([svg], {'type': 'image/svg+xml'});
     const e = document.getElementById('svg-saver');
     e.download = 'model.svg';
@@ -464,5 +427,36 @@ class GUIFileManager {
     e.href = (window.URL || webkitURL).createObjectURL(blob);
     e.click();
   }  
+
+  pushOutPNG(svg) {
+    // Output SVG to browser as PNG image file download.
+    const
+        bytes = new TextEncoder().encode(svg),
+        binstr = Array.from(bytes, (b) => String.fromCodePoint(b)).join(''),
+        uri = 'data:image/svg+xml;base64,' + window.btoa(binstr),
+        img = new Image();
+    img.onload = () => {
+        const
+            cvs = document.createElement('canvas'),
+            ctx = cvs.getContext('2d');
+        cvs.width = img.width * 4;
+        cvs.height = img.height * 4;
+        ctx.scale(4, 4);
+        ctx.drawImage(img, 0, 0);
+        cvs.toBlob(blob => {
+            const
+                e = document.getElementById('svg-saver'),
+                url = (window.URL || webkitURL).createObjectURL(blob),
+                name = asFileName(MODEL.focal_cluster.parent ?
+                    MODEL.focal_cluster.displayName : MODEL.name) ||
+                'Linny-R-model';
+            e.download = name + '.png';
+            e.type = 'image/png';
+            e.href = url;
+            e.click();
+          });
+    };
+    img.src = uri;      
+  }
  
 } // END of class GUIFileManager

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

@@ -46,7 +46,10 @@ class Finder {
     this.filter_input.addEventListener('input', () => FINDER.changeFilter());
     this.edit_btn = document.getElementById('finder-edit-btn');
     this.edit_btn.addEventListener(
-        'click', (event) => FINDER.editAttributes());
+        'click', () => FINDER.editAttributes());
+    this.chart_btn = document.getElementById('finder-chart-btn');
+    this.chart_btn.addEventListener(
+        'click', () => FINDER.confirmAddChartVariables());
     this.copy_btn = document.getElementById('finder-copy-btn');
     this.copy_btn.addEventListener(
         'click', (event) => FINDER.copyAttributesToClipboard(event.shiftKey));
@@ -54,6 +57,13 @@ class Finder {
     this.item_table = document.getElementById('finder-item-table');
     this.expression_table = document.getElementById('finder-expression-table');
         
+    // The Confirm add chart variables modal.
+    this.add_chart_variables_modal = new ModalDialog('confirm-add-chart-variables');
+    this.add_chart_variables_modal.ok.addEventListener(
+        'click', () => FINDER.addVariablesToChart());
+    this.add_chart_variables_modal.cancel.addEventListener(
+        'click', () => FINDER.add_chart_variables_modal.hide());
+
     // Attribute headers are used by Finder to output entity attribute values.
     this.attribute_headers = {
         A: 'ACTORS:\tWeight\tCash IN\tCash OUT\tCash FLOW',
@@ -301,41 +311,100 @@ class Finder {
     this.edit_btn.style.display = 'none';
     this.copy_btn.style.display = 'none';
     if(n > 0) {
-      this.copy_btn.style.display = 'block';
+      this.copy_btn.style.display = 'inline-block';
+      if(CHART_MANAGER.visible && CHART_MANAGER.chart_index >= 0) {
+        const ca = this.commonAttributes;
+        if(ca.length) {
+          this.chart_btn.title = 'Add ' + pluralS(n, 'variable') +
+              ' to selected chart';
+          this.chart_btn.style.display = 'inline-block';
+        }
+      }
       n = this.entityGroup.length;
       if(n > 0) {
         this.edit_btn.title = 'Edit attributes of ' +
             pluralS(n, this.entities[0].type.toLowerCase());
-        this.edit_btn.style.display = 'block';
+        this.edit_btn.style.display = 'inline-block';
       }
     }
     this.updateRightPane();
   }
   
+  get commonAttributes() {
+    // Returns list of attributes that all filtered entities have in common.
+    let ca = Object.keys(VM.attribute_names);
+    for(const et of this.filtered_types) {
+      ca = intersection(ca, VM.attribute_codes[et]);
+    }
+    return ca;
+  }
+  
   get entityGroup() {
     // Returns the list of filtered entities if all are of the same type,
     // while excluding (no actor), (top cluster), datasets and equations.
     const
         eg = [],
-        n = this.entities.length;
-    if(n > 0) {
-      const ft = this.filtered_types[0];
-      if(this.filtered_types.length === 1 && 'DE'.indexOf(ft) < 0) {
-        for(let i = 0; i < n; i++) {
-          const e = this.entities[i];
-          // Exclude "no actor" and top cluster.
-          if(e.name && e.name !== '(no_actor)' && e.name !== '(top_cluster)' &&
-              // Also exclude actor cash flow data products because
-              // many of their properties should not be changed.
-              !e.name.startsWith('$')) {
-            eg.push(e);
-          }
+        ft = this.filtered_types[0];
+    if(this.filtered_types.length === 1 && 'DE'.indexOf(ft) < 0) {
+      for(const e of this.entities) {
+        // Exclude "no actor" and top cluster.
+        if(e.name && e.name !== '(no_actor)' && e.name !== '(top_cluster)' &&
+            // Also exclude actor cash flow data products because
+            // many of their properties should not be changed.
+            !e.name.startsWith('$')) {
+          eg.push(e);
         }
       }
     }
     return eg;
   }
   
+  confirmAddChartVariables() {
+    // Show confirmation dialog to add variables to chart.
+    const
+        md = this.add_chart_variables_modal,
+        n = this.entities.length,
+        ca = this.commonAttributes;
+    let html,
+        et = '1 entity';
+    if(this.filtered_types.length === 1) {
+      et = pluralS(n, this.entities[0].type.toLowerCase());
+    } else if(n !== 1) {
+      et = `${n} entities`;
+    }
+    for(const a of ca) {
+      html += `<option value="${a}">${VM.attribute_names[a]}</option>`;
+    }
+    md.element('attribute').innerHTML = html;
+    md.element('count').innerText = et;
+    md.show();
+  }
+  
+  addVariablesToChart() {
+    // Add selected attribute for each filtered entity as chart variable
+    // to the selected chart.
+    const
+        md = this.add_chart_variables_modal,
+        ci = CHART_MANAGER.chart_index;
+    // Double-check whether chart exists.
+    if(ci < 0 || ci >= MODEL.charts.length) {
+      console.log('ANOMALY: No chart for index', ci);
+    }
+    const
+        c = MODEL.charts[ci],
+        a = md.element('attribute').value,
+        s = UI.boxChecked('confirm-add-chart-variables-stacked'),
+        enl = [];
+    for(const e of this.entities) enl.push(e.name);
+    enl.sort((a, b) => UI.compareFullNames(a, b, true));
+    for(const en of enl) {
+      const vi = c.addVariable(en, a);
+      if(vi !== null) c.variables[vi].stacked = s;
+    }
+    CHART_MANAGER.updateDialog();
+    md.hide();
+  }
+  
   updateRightPane() {
     const
         se = this.selected_entity,
@@ -352,10 +421,7 @@ class Finder {
         if(se.cluster) occ.push(se.cluster.identifier);
       } else if(se instanceof Product) {
         // Products "occur" in clusters where they have a position.
-        const cl = se.productPositionClusters;
-        for(let i = 0; i < cl.length; i++) {
-          occ.push(cl[i].identifier);
-        }
+        for(const c of se.productPositionClusters) occ.push(c.identifier);
       } else if(se instanceof Actor) {
         // Actors "occur" in clusters where they "own" processes or clusters.
         for(let k in MODEL.processes) if(MODEL.processes.hasOwnProperty(k)) {
@@ -374,13 +440,12 @@ class Finder {
       // NOTE: No "occurrence" of datasets or equations.
       // @@TO DO: identify MODULES (?)
       // All entities can also occur as chart variables.
-      for(let j = 0; j < MODEL.charts.length; j++) {
-        const c = MODEL.charts[j];
-        for(let k = 0; k < c.variables.length; k++) {
-          const v = c.variables[k];
+      for(let ci = 0; ci < MODEL.charts.length; ci++) {
+        const c = MODEL.charts[ci];
+        for(const v of c.variables) {
           if(v.object === se || (se instanceof DatasetModifier &&
               se.identifier === UI.nameToID(v.attribute))) {
-            occ.push(MODEL.chart_id_prefix + j);
+            occ.push(MODEL.chart_id_prefix + ci);
             break;
           }
         }
@@ -437,9 +502,8 @@ class Finder {
       // Check all notes in clusters for their color expressions and field.
       for(let k in MODEL.clusters) if(MODEL.clusters.hasOwnProperty(k)) {
         const c = MODEL.clusters[k];
-        for(let i = 0; i < c.notes.length; i++) {
-          const n = c.notes[i];
-          // Look for entity in both note contents and note color expression
+        for(const n of c.notes) {
+          // Look for entity in both note contents and note color expression.
           if(re.test(n.color.text) || re.test(n.contents)) {
             xal.push('NOTE');
             xol.push(n.identifier);
@@ -463,11 +527,9 @@ class Finder {
         const c = MODEL.constraints[k];
         for(let i = 0; i < c.bound_lines.length; i++) {
           const bl = c.bound_lines[i];
-          for(let j = 0; j < bl.selectors.length; j++) {
-            if(re.test(bl.selectors[j].expression.text)) {
-              xal.push('I' + (i + 1));
-              xol.push(c.identifier);
-            }
+          for(const sel of bl.selectors) if(re.test(sel.expression.text)) {
+            xal.push('I' + (i + 1));
+            xol.push(c.identifier);
           }
         }
       }
@@ -720,28 +782,25 @@ class Finder {
   
   copyAttributesToClipboard(shift) {
     // Copy relevant entity attributes as tab-separated text to clipboard.
-    // NOTE: All entity types have "get" `attributes` that returns an
+    // NOTE: All entity types have "get" method `attributes` that returns an
     // object that for each defined attribute (and if model has been
     // solved also each inferred attribute) has a property with its value.
-    // For dynamic expressions, the expression text is used
+    // For dynamic expressions, the expression text is used.
     const ea_dict = {A: [], B: [], C: [], D: [], E: [], L: [], P: [], Q: []};
-    let e = this.selected_entity;
+    const e = this.selected_entity;
     if(shift && e) {
       ea_dict[e.typeLetter].push(e.attributes);
     } else {
-      for(let i = 0; i < this.entities.length; i++) {
-        e = this.entities[i];
-        ea_dict[e.typeLetter].push(e.attributes);
-      }
+      for(const e of this.entities) ea_dict[e.typeLetter].push(e.attributes);
     }
     const
       seq = ['A', 'B', 'C', 'D', 'E', 'P', 'Q', 'L'],
       text = [],
       attr = [];
-    for(let i = 0; i < seq.length; i++) {
+    for(const etl of seq) {
       const
-          etl = seq[i],
-          ead = ea_dict[etl];
+          ead = ea_dict[etl],
+          atcodes = VM.attribute_codes[etl];
       if(ead && ead.length > 0) {
         // No blank line before first entity type.
         if(text.length > 0) text.push('');
@@ -755,14 +814,9 @@ class Finder {
         }
         text.push(ah);
         attr.length = 0;
-        for(let i = 0; i < ead.length; i++) {
-          const
-              ea = ead[i],
-              ac = VM.attribute_codes[etl],
-              al = [ea.name];
-          for(let j = 0; j < ac.length; j++) {
-            if(ea.hasOwnProperty(ac[j])) al.push(ea[ac[j]]);
-          }
+        for(const ea of ead) {
+          const al = [ea.name];
+          for(const ac of atcodes) if(ea.hasOwnProperty(ac)) al.push(ea[ac]);
           attr.push(al.join('\t'));
         }
         attr.sort();

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

@@ -158,10 +158,8 @@ class ModelAutoSaver {
     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(' ');
+    for(const m of this.model_list) {
+      const 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>',

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

@@ -122,9 +122,7 @@ class GUIMonitor {
   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];
-    }
+    for(let i = 0; i < b; i++) total_time += VM.solver_times[i];
     const
         n = document.createElement('div'),
         ssecs = VM.solver_secs[b - 1];
@@ -158,15 +156,13 @@ class GUIMonitor {
   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');
-    }
+    for(const n of cn) n.classList.remove('sel-pb');
     cn[b - 1].classList.add('sel-pb');
     this.updateContent(this.tab);
   }
 
   updateDialog() {
-    // Implements default behavior for a draggable/resizable dialog
+    // Implements default behavior for a draggable/resizable dialog.
     this.updateContent(this.tab);
   }
   
@@ -199,33 +195,31 @@ class GUIMonitor {
   }
 
   showCallStack(t) {
-    // Show the error message in the dialog header
-    // NOTE: prevent showing again when VM detects multiple errors
+    // 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
+        // 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 + '|');
+    for(const x of VM.call_stack) {
+      // For equations, only show the attribute.
+      const ons = (x.object === MODEL.equations_dataset ? '' :
+          x.object.displayName + '|');
       vlist.push(ons + x.attribute);
-      // Trim spaces around all object-attribute separators in the expression
+      // 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
+    // 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
+        // Ignore selectors, as these may be different per experiment.
         const
             vnl = vlist[j].split('|'),
             sel = (vnl.length > 1 ? vnl.pop() : ''),
@@ -236,26 +230,26 @@ class GUIMonitor {
         xlist[i] = xlist[i].split(vn).join(vnc);
       }
     }
-    // Then also color the variables
+    // 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
+    // Start without indentation.
     let pad = 0;
-    // First show the variable being computed
+    // First show the variable being computed.
     const tbl = ['<div>', vlist[0], '</div>'];
-    // Then iterate upwards over the call stack
+    // 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
+      // 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 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)
+    // 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) {
@@ -265,14 +259,14 @@ class GUIMonitor {
     }
     tbl.push('<div class="call-stack-expr" style="padding-left: ' +
         `${pad}px">${last_x}</div>`);
-    // Add index-out-of-bounds message if appropriate
+    // 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
+    // Dump the code for the last expression to the console.
     console.log('Code for', top.text, top.code);
-    // Show the call stack dialog
+    // 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;    
@@ -284,19 +278,19 @@ class GUIMonitor {
   }
 
   logMessage(block, msg) {
-    // Appends a solver message to the monitor's messages textarea
+    // Append a solver message to the monitor's messages textarea
     if(this.messages_text.value === VM.no_messages) {
-      // Erase the "(no messages)" if still showing
+      // 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
+      // 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
+    // selected block.
     if(this.shown_block === 0 || this.shown_block === block) {
       this.messages_text.value += msg + '\n';
     }
@@ -347,8 +341,8 @@ class GUIMonitor {
   }
 
   connectToServer() {
-    // Prompts for credentials if not connected yet.
-    // NOTE: No authentication prompt if SOLVER.user_id in `linny-r-config.js`
+    // Prompt 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.connected = false;
@@ -414,7 +408,7 @@ UI.logHeapSize(`BEFORE creating post data`);
             mipgap: MODEL.MIP_gap
           });
 UI.logHeapSize(`AFTER creating post data`);
-    // Immediately free the memory taken up by VM.lines
+    // Immediately free the memory taken up by VM.lines.
     VM.lines = '';
     UI.logHeapSize(`BEFORE submitting block #${bwr} to solver`);
     fetch('solver/', pd)
@@ -430,15 +424,15 @@ UI.logHeapSize(`AFTER creating post 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
+            // 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
+            // Log details on the console.
             console.log('ERROR while parsing JSON:', err);
             console.log(data);
-            // Pass summary on to the browser
+            // Pass summary on to the browser.
             const msg = 'ERROR: Unexpected data from server: ' +
                 ellipsedText(data);
             this.logMessage(this.block_count, msg);