linny-r 1.4.3 → 1.4.4

package/README.md

@@ -1,9 +1,13 @@
 <img src="https://sysmod.tbm.tudelft.nl/linny-r/images/logo.png" height="55px" alt="Linny-R">
 
-<p>Linny-R is an executable graphical specification language for mixed integer 
-<a href="https://en.wikipedia.org/wiki/Linear_programming" target="_blank">linear programming</a> (MILP) problems, especially
-<a href="https://en.wikipedia.org/wiki/Unit_commitment_problem_in_electrical_power_production" target="_blank">unit commitment problems</a> (UCP) and
-<a href="https://en.wikipedia.org/wiki/Generation_expansion_planning" target="_blank">generation expansion planning</a> (GEP).</p>
+Linny-R is an executable graphical specification language for mixed integer 
+<a href="https://en.wikipedia.org/wiki/Linear_programming" target="_blank">linear programming</a>
+(MILP) problems, especially
+<a href="https://en.wikipedia.org/wiki/Unit_commitment_problem_in_electrical_power_production"
+   target="_blank">unit commitment problems</a>
+(UCP) and
+<a href="https://en.wikipedia.org/wiki/Generation_expansion_planning"
+   target="_blank">generation expansion planning</a> (GEP).
 
 The graphical language and WYSIWYG model editor are developed by **Pieter Bots** at
 <a href="https://tudelft.nl" target="_blank">Delft University of Technology</a>.
@@ -16,8 +20,9 @@ and a graphical user interface (GUI) that runs in any modern browser.
 These <a href="https://sysmod.tbm.tudelft.nl/linny-r/docs/?68" target="_blank">instruction videos</a>
 published on YouTube give an idea of what Linny-R can do.
 
-User documentation for Linny-R is still scant, but it is growing. You can contribute yourself (in "wiki fashion")
-via the official user documentation site <a href="https://linny-r.info" target="_blank">https://linny-r.info</a>.
+User documentation for Linny-R is still scant, but it is growing. You can contribute yourself
+(in "wiki fashion") via the official user documentation site
+<a href="https://linny-r.info" target="_blank">https://linny-r.info</a>.
 Technical documentation will be developed on GitHub: https://github.com/pwgbots/linny-r/wiki
 
 ## Installing Node.js
@@ -45,7 +50,11 @@ so in all commands you should replace this with the actual directory path.
 On a Windows machine the suggested path is `C:\Users\(your user name)\Documents\Linny-R`,
 and on a macOS machine `/Users/(your user name)/Linny-R`.
 
-To install Linny-R in this directory, first create it:
+To install Linny-R in this directory, first change to the parent directory like so:
+
+``cd /Users/(your user name)``
+
+Then create the `Linny-R` directory:
 
 ``mkdir Linny-R``
 
@@ -57,7 +66,8 @@ and then type at the command line prompt:
 
 ``npm install --prefix . linny-r``
 
-**NOTE:** The spacing around the dot is important. Type the command in lower case.
+> **Important**
+> The spacing around the dot is essential. Type the command in lower case.
 
 After installation has completed, `Linny-R` should have this directory tree structure:
 
@@ -88,11 +98,12 @@ on a Windows machine the batch script `linny-r.bat`. By default, this script fil
 two commands: first change to the Linny-R directory and then tell Node.js to launch the
 start the Linny-R server.
 
-**NOTE:** When configuring Linny-R for a network environment where individual users
-each have their personal work space (e.g., a virtual drive U:), you must edit this script file,
-adding the argument `workspace=path/to/workspace` to the `node` command.
-This will instruct Linny-R to create the `user` directory in this workspace directory
-instead of the Linny-R directory.
+> **Note**
+> When configuring Linny-R for a network environment where individual users
+> each have their personal work space (e.g., a virtual drive U:), you must edit this script file,
+> adding the argument `workspace=path/to/workspace` to the `node` command.
+> This will instruct Linny-R to create the `user` directory in this workspace directory
+> instead of the Linny-R directory.
 
 The `linny-r` directory should contain this file `README.md`,
 the files `server.js` and `console.js` that will be run by Node.js,
@@ -107,6 +118,33 @@ It should also contain the style sheet `linny-r.css` required by the GUI.
 The sub-directories of `static` contain files that are served to the browser by the script
 `server.js` when it is running in Node.js. 
 
+#### Installing and using an earlier version of Linny-R
+
+By default, **npm** will install the latest release of the Linny-R software.
+As this software is developed as part of academic research, new features are added 
+without rigorous testing. Although much effort is dedicated to maintaining upward
+and downward compatibility, you may find that the latest version does not work as
+well for you as some earlier version. To re-install an earlier release, for example
+version 1.4.0, open the CLI, change to your `Linny-R` directory, and then type:
+
+``npm install linny-r@1.4.0``
+
+> **Note**
+> This will overwrite the contents of the `node_modules` directory, but
+> it will not affect the files in your user space.
+
+If you prefer to have different versions of Linny-R on your computer, you can
+create a separate directory for a specific version, then change to this
+directory and type:
+
+``npm install --prefix . linny-r@1.4.0``
+
+> **Note**
+> To run a specific version in your browser, you must start the server from
+> the directory where you installed this version.
+> Should you wish to run two different versions concurrently, you must use
+> the `port=[number]` option when you start the server for the second version.
+
 ## Configuring the MILP solver
 
 Linny-R presently supports four MILP solvers: Gurobi, CPLEX, SCIP and LP_solve. 
@@ -114,6 +152,12 @@ Gurobi and CPLEX are _considerably_ more powerful than the open source solvers S
 but they require a license.
 Academic licenses can be obtained by students and staff of eligible institutions. 
 
+> **Important**
+> When installing a solver, it is advisable to accept the default file
+> locations that are proposed by the installer.
+> After installation, do **not** move files to some other directory,
+> as this is bound to cause problems.
+
 #### Installing Gurobi
 
 The software you need to install is **Gurobi Optimizer**.
@@ -125,9 +169,6 @@ Gurobi on your computer can be obtained via this URL:
 When running a model, Linny-R will try to execute the command line application `gurobi_cl`.
 It will look for this application in the directory specified in the environment variable PATH on your computer.
 
-When installing Gurobi, please accept the default file locations that are proposed by the installer.
-Then do **not** move Gurobi files to some other directory, as this is bound to cause problems.
-
 #### Installing CPLEX
 
 The software you need to install is **CPLEX**.
@@ -141,9 +182,6 @@ It will look for this application in the directory specified in the environment
 or more specifically in the environment variable CPLEX_STUDIO_BINARIES<em>nnnn</em>
 (where _nnnn_ denotes the CPLEX version number) on your computer.
 
-When installing CPLEX, please accept the default file locations that are proposed by the installer.
-Then do **not** move CPLEX files to some other directory, as this is bound to cause problems.
-
 #### Installing SCIP
 
 The SCIP software is open source. Instructions for installation can be found via this URL:
@@ -152,9 +190,6 @@ The SCIP software is open source. Instructions for installation can be found via
 When running a model, Linny-R will try to execute the command line application `scip`.
 It will look for this application in the directory specified in the environment variable PATH on your computer.
 
-When installing SCIP, please accept the default file locations that are proposed by the installer.
-Then do **not** move SCIP files to some other directory, as this is bound to cause problems.
-
 #### Installing LP_solve
 
 The LP_solve software is open source and can be downloaded via this URL:
@@ -216,15 +251,23 @@ while in the CLI you should see a long series of server log messages like:
 ... etc.
 </pre>
 
+> **Important**
+> Do **not** close the CLI. If you do, the Linny-R GUI may still be
+> visible in your browser, but you will be warned that it cannot connect
+> to the server (at 127.0.0.1:5050). This means that you have to restart
+> Linny-R from a new CLI.
+
 After loading into the browser, Linny-R will try to connect to the solver.
-If successful, a notification (blue background) will appear on the status bar at the bottom of the window,
-stating the name of the solver.
+If successful, a notification (blue background) will appear on the status bar
+at the bottom of the window, stating the name of the solver.
 
 You can then test the GUI by creating a simple model.
 Make one that has at least one process that outputs a product, 
-and this product must have a price or a set lower bound, otherwise the model will have no objective function.
+and this product must have a price or a set lower bound, otherwise the model
+will have no objective function.
 Then click on the _Solve_ button at the bottom of the left-hand tool bar.
-The Linny-R icon in the upper left corner should start rotating, while the status bar at the bottom should display:
+The Linny-R icon in the upper left corner should start rotating, while the
+status bar at the bottom should display:
 
 <pre>
 Solving block 1 of 1
@@ -238,10 +281,11 @@ Meanwhile, in the CLI, you should see a server log message like:
 Solve block 1 a
 </pre>
 
-To end a modeling session, you can shut down the server by clickicng on the local host icon
-in the upper right corner of the Linny-R GUI in your browser, confirm that you want to leave,
-and then close your browser (tab). If you do not shut down the server from the browser,
-you can also stop the server by repeatedly pressing ``Ctrl+C`` in the CLI box.
+To end a modeling session, you can shut down the server by clicking on the
+local host icon in the upper right corner of the Linny-R GUI in your browser,
+confirming that you want to leave, and then closing your browser (tab).
+If you do not shut down the server from the browser, you can also stop the
+server by repeatedly pressing ``Ctrl+C`` in the CLI.
 
 ## Command line options
 
@@ -262,8 +306,8 @@ To facilitate start-up, you can create a shortcut icon for Linny-R on your deskt
 On a Windows machine, open the _File Explorer_, select your Linny-R folder,
 right-click on the batch file `linny-r.bat`, and select the _Create shortcut_ option. 
 Then right-click on the shortcut file to edit its properties, and click the _Change Icon_ button.
-The dialog that then appears will allow you to go to the sub-folder `node_modules\linny-r\static\images`,
-where you should select the file `linny-r.ico`.
+The dialog that then appears will allow you to go to the sub-folder
+`node_modules\linny-r\static\images`, where you should select the file `linny-r.ico`.
 Finally, rename the shortcut to `Linny-R` and move or copy it to your desktop.
 
 On a macOS machine, open Terminal and change to your Linny-R directory, and then type:
@@ -293,35 +337,43 @@ The sub-directories of this directory `user` are used by Linny-R to store files.
 * `solver` will contain the files that are exchanged with the Mixed Integer Linear Programming (MILP) solver
   (the names of the files that will appear in this directory may vary, depending on the MILP-solver you use)
 
-By default, the `user` directory is created in your `Linny-R` directory.
-You can overrule this by specifying the path to another directory when you start the server.
-Note that doing this will create a new, empty workspace (the directories listed above)
-in the specified path. It will **not** affect or duplicate information from existing workspaces.
+> **Note**
+> By default, the `user` directory is created in your `Linny-R` directory.
+> You can overrule this by starting the server with the `workspace=[path]` option.
+> This will create a new, empty workspace (the directories listed above) in the specified path.
+> It will **not** affect or duplicate information from existing workspaces.
 
 ## Installing Inkscape
 
 Linny-R creates its diagrams and charts as SVG images. 
 When you download a diagram, it will be saved as a .svg file.
-These files can be viewed and edited using Inkscape, an open source vector graphics editor. 
+These files can be viewed and edited using Inkscape, an open source
+vector graphics editor. 
 
-As it may be tedious to first save a diagram as SVG and then render it manually as a bitmap image, 
-Linny-R features a *Render diagram as bitmap* button on the top toolbar, and on the bottom toolbar of the _Chart manager_.
+As it may be tedious to first save a diagram as SVG and then render it
+manually as a bitmap image, Linny-R features a *Render diagram as bitmap* button
+on the top toolbar, and on the bottom toolbar of the _Chart manager_.
 When you click it, Linny-R will send the image as SVG to the server. 
 The server script will save the SVG in the `user/diagrams` sub-directory, 
-and then try to execute an Inkscape command that will convert this SVG to a PNG image file in the same directory.
+and then try to execute an Inkscape command that will convert this SVG to
+a PNG image file in the same directory.
 The file name will be `diagram-(date and time).png`. 
-Meanwhile, the browser will have opened a new tab that will be "waiting" for this PNG image to become available. 
+Meanwhile, the browser will have opened a new tab that will be "waiting"
+for this PNG image to become available. 
 If rendering was successful, the image will appear in this browser tab; 
 if rendering failed, the original SVG image will be shown.
 
 To install Inkscape, please look here:
 <a href="https://inkscape.org/release" target="_blank">https://inkscape.org/release</a>
 
-Linny-R will automatically detect whether Inkscape is installed by searching for it in the environment variable PATH on your computer.
-On a macOS computer, Linny-R will look for Inkscape in /Applications/Inkscape.app/Contents/MacOS.
+Linny-R will automatically detect whether Inkscape is installed by searching
+for it in the environment variable PATH on your computer. On a macOS computer,
+Linny-R will look for Inkscape in `/Applications/Inkscape.app/Contents/MacOS`.
 
-**NOTE:** The current installation wizard for Inkscape (version 1.2.2) may **not** add the application to the PATH variable.
-Please check whether you need to do this yourself.
+> **Note**
+> The installation wizard for Inkscape (version 1.3) may **not**
+> add the application to the PATH variable. Please check whether you need to
+> do this yourself.
 
 ## Using Linny-R console
 
@@ -333,7 +385,8 @@ If you open a CLI box, change to your `Linny-R` directory, and then type:
 
 you will see the command line options that allow you to run models in various ways.
 
-**NOTE: The console-only version is still in development, and does not provide all functions yet.**
+> **Note**
+> The console-only version is still in development, and does not provide all functions yet.
 
 ## Troubleshooting problems
 
@@ -341,8 +394,9 @@ If during any of the steps above you encounter problems, please try to diagnose
 You can find a lot of useful information on the Linny-R user documentation website:
 <a href="https://linny-r.info" target="_blank">https://linny-r.info</a>.
 
-To diagnose a problem, always look in the CLI box where Node.js is running, 
-as informative server-side error messages will appear there.
+> **Important**
+> To diagnose a problem, always look in the CLI box where Node.js is running, 
+> as informative server-side error messages will appear there.
 
 Then also look at the console window of your browser. 
 Most browsers offer a _Web Developer Tools_ option via their application menu.

package/package.json

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

package/server.js

@@ -1380,8 +1380,9 @@ function convertSVGtoPNG(req, res, sp) {
     // Enclose paths in double quotes if they contain spaces
     if(cmd.indexOf(' ') >= 0) cmd = `"${cmd}"`;
     if(svg.indexOf(' ') >= 0) svg = `"${svg}"`;
-    child_process.exec(cmd + ' --export-type=png --export-dpi=' +
-        SETTINGS.dpi + ' ' + svg,
+    cmd += ` --export-type=png --export-dpi=${SETTINGS.dpi} ${svg}`;
+    console.log(cmd);
+    child_process.exec(cmd,
         (error, stdout, stderr) => {
             let ext = '.svg';
             console.log(stdout);
@@ -1389,8 +1390,24 @@ function convertSVGtoPNG(req, res, sp) {
               console.log('WARNING: Failed to run Inkscape --', error);
               console.log(stderr);
             } else {
-              ext = '.png';
-              // Delete the SVG
+              // Look for the PNG file.
+              const mode = fs.constants.R_OK | fs.constants.W_O;
+              try {
+                fs.accessSync(fp + '.png', mode);
+                ext = '.png';
+              } catch(err) {
+                // NOTE: Inkscape 1.3 adds ".png" to the original file name,
+                // so this may end on ".svg.png"
+                try {
+                  fs.accessSync(fp + '.svg.png', mode);
+                  // If found, rename the PNG file.
+                  fs.renameSync(fp + '.svg.png', fp + '.png');
+                  ext = '.png';
+                } catch(err) {
+                  console.log('WARNING: Inkscape did not output a PNG file');
+                }
+              }
+              // Delete the SVG file.
               try {
                 fs.unlinkSync(fp + '.svg');
               } catch(error) {
@@ -1669,9 +1686,17 @@ function commandLineSettings() {
   }
   // Verify that Inkscape is installed
   if(settings.inkscape) {
-    // NOTE: on Windows, the command line version is a .com file
-    const ip = path.join(settings.inkscape,
+    // NOTE: On Windows, the command line version is a .com file
+    let ip = path.join(settings.inkscape,
         'inkscape' + (PLATFORM.startsWith('win') ? '.com' : ''));
+    try {
+      fs.accessSync(ip, fs.constants.X_OK);
+    } catch(err) {
+      // NOTE: As of Inkscape version 1.3, the command line executable
+      // is called inkscapecom(.com)
+      ip = path.join(settings.inkscape,
+          'inkscapecom' + (PLATFORM.startsWith('win') ? '.com' : ''));
+    }
     try {
       fs.accessSync(ip, fs.constants.X_OK);
       console.log('Path to Inkscape:', settings.inkscape);

package/static/index.html

@@ -121,7 +121,16 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
         document.getElementById('doc-head').appendChild(link);
         // Reload the scripts in their proper sequence, i.e., such that all
         // classes are initialized before their instances are created
-        loadScripts(['-config', '-model', '-ctrl', '-gui', '-vm', '-utils'], t);
+        loadScripts(['-config', '-model', '-ctrl',
+            '-gui-paper', '-gui-controller', '-gui-monitor',
+            '-gui-file-manager', '-gui-expression-editor',
+            '-gui-model-autosaver', '-gui-scale-unit-manager',
+            '-gui-actor-manager', '-gui-constraint-editor',
+            '-gui-repository-browser', '-gui-dataset-manager',
+            '-gui-equation-manager', '-gui-chart-manager',
+            '-gui-sensitivity-analysis', '-gui-experiment-manager',
+            '-gui-documentation-manager', '-gui-finder', '-gui-receiver',
+            '-gui-undo-redo', '-vm', '-utils'], t);
       }
     }
 
@@ -877,9 +886,9 @@ NOTE: Unit symbols are case-sensitive, so BTU ≠ Btu">
         will discard changes you made to the current model. Continue?
       </div>
       <div id="confirm-load-from-repo-buttons">
-        <img class="ok-btn big-btn" src="images/ok.png">
+        <img class="ok-btn" src="images/ok.png">
         Yes
-        <img class="cancel-btn big-btn" src="images/cancel.png">
+        <img class="cancel-btn" src="images/cancel.png">
         No
       </div>
     </div>
@@ -898,9 +907,9 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
         <span id="confirm-delete-from-repo-name"></span>?
       </div>
       <div id="confirm-delete-from-repo-buttons">
-        <img class="ok-btn big-btn" src="images/ok.png">
+        <img class="ok-btn" src="images/ok.png">
         Yes
-        <img class="cancel-btn big-btn" src="images/cancel.png">
+        <img class="cancel-btn" src="images/cancel.png">
         No
       </div>
     </div>
@@ -1016,7 +1025,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
         <tr>
           <td>Actor:</td>
           <td>
-            <input id="add-process-actor-name" style="width:223px" type="text"
+            <input id="add-process-actor" style="width:223px" type="text"
                    autocomplete="off">
           </td>
         </tr>
@@ -1065,6 +1074,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
     <div id="cluster-dlg" class="inp-dlg">
       <div class="dlg-title">
         <span id="cluster-action">Add</span> cluster
+        <span id="cluster-group"></span>
         <img class="cancel-btn" src="images/cancel.png">
         <img class="ok-btn" src="images/ok.png">
       </div>
@@ -1076,7 +1086,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
         </tr>
         <tr>
           <td>Actor:</td>
-          <td><input id="cluster-actor-name" style="width:270px"
+          <td><input id="cluster-actor" style="width:270px"
                      type="text" autocomplete="off"></td>
         </tr>
       </table>
@@ -1136,11 +1146,14 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
   <div id="link-modal" class="modal">
     <div id="link-dlg" class="inp-dlg">
       <div class="dlg-title">
-        <!-- link arrow symbol depends on type of link: product => solid, data => dashed -->
-        Link X <span id="link-arrow-1">&#x279D;</span> Y:
-        <div id="link-from-name" title="FROM"></div>
-        <span id="link-arrow-2">&#x279D;</span>
-        <div id="link-to-name" title="TO"></div>
+        <!-- link arrow symbol depends on type of link: product => solid,
+             data => dashed; no spacing between <span> elements, as these
+             elements have left and right padding. -->
+        <div id="link-x-y">Link X<span id="link-arrow-1">&#x279D;</span>Y:</div>
+        <div id="link-from-name" title="FROM">
+        </div><span id="link-arrow-2">&#x279D;</span><div id="link-to-name" title="TO">
+        </div>
+        <span id="link-group"></span>
         <img class="cancel-btn" src="images/cancel.png">
         <img class="ok-btn" src="images/ok.png">
       </div>
@@ -1231,13 +1244,14 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
   <div id="constraint-modal" class="modal">
     <div id="constraint-dlg" class="inp-dlg">
       <div class="dlg-title">Constraint X &DDotrahd; Y
+        <span id="constraint-group"></span>
         <div style="display: inline-block; margin-left: 219px; margin-bottom: -7px">
           <img class="cancel-btn" src="images/cancel.png">
           <img class="ok-btn" src="images/ok.png"
                style="margin-left: 4px; margin-bottom: 3px">
         </div>
       </div>
-      <div id="ce-button-bar">
+      <div id="constraint-button-bar">
         <img id="add-point-btn" class="mbtn enab" src="images/add.png"
              title="Add new point to selected bound line">
         <img id="del-point-btn" class="mbtn disab"
@@ -1256,27 +1270,27 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
         <input id="bl-selectors" type="text" placeholder="(any)"
                title="When specified, bound line will constrain only in matching experiment runs">
       </div>
-      <div id="ce-y-label">% range of <span id="ce-to-name"></span></div>
+      <div id="constraint-y-label">% range of <span id="constraint-to-name"></span></div>
       <!-- NOTE: this is the div that will contain the chart's SVG image -->
-      <div id="ce-container"></div>
-      <div id="ce-x-label">% range of <span id="ce-from-name"></span></div>
-      <div id="ce-pos-x">X = 0</div>
-      <div id="ce-pos-y">Y = 0</div>
-      <div id="ce-point" title="Selected point"></div>
-      <div id="ce-equation" title="Equation for line segment"></div>
-      <div id="ce-bottom-div">
-        <div id="ce-no-slack-div"
+      <div id="constraint-container"></div>
+      <div id="constraint-x-label">% range of <span id="constraint-from-name"></span></div>
+      <div id="constraint-pos-x">X = 0</div>
+      <div id="constraint-pos-y">Y = 0</div>
+      <div id="constraint-point" title="Selected point"></div>
+      <div id="constraint-equation" title="Equation for line segment"></div>
+      <div id="constraint-bottom-div">
+        <div id="constraint-no-slack-div"
              title="Check to enforce bounds (Caution: this may make model infeasible)">
-          <div id="ce-no-slack" class="box clear"></div>
-          <div id="ce-no-slack-lbl">No slack</div>
+          <div id="constraint-no-slack" class="box clear"></div>
+          <div id="constraint-no-slack-lbl">No slack</div>
         </div>
-        <div id="ce-soc">
+        <div id="constraint-soc">
           <label>Attributed share of cost:</label>
-          <select id="ce-soc-direct">
+          <select id="constraint-soc-direct">
             <option value="1">X&rarr;Y</option>
             <option value="-1">Y&rarr;X</option>
           </selector>
-          <input id="ce-share-of-cost" type="text" autocomplete="off"><label>%</label>
+          <input id="constraint-share-of-cost" type="text" autocomplete="off"><label>%</label>
         </div>
       </div>
     </div>
@@ -1287,6 +1301,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
     <div id="process-dlg" class="inp-dlg">
       <div class="dlg-title">
         Process properties
+        <span id="process-group"></span>
         <img class="cancel-btn" src="images/cancel.png">
         <img class="ok-btn" src="images/ok.png">
       </div>
@@ -1303,7 +1318,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
       <img id="process-UB-x" class="sbtn enab" src="images/edit.png"
            title="Edit expression for upper process bound">
       <!-- "equal bounds" button is displayed middle-left of the two input fields -->
-      <div id="process-UB-equal" class="nebtn" title="Set equal bounds"></div>
+      <div id="process-UB-equal" class="bbtn ne" title="Set equal bounds"></div>
       <div id="process-IL-lbl">Initial level:</div>
       <input id="process-IL" type="text" autocomplete="off">
       <img id="process-IL-x" class="sbtn enab" src="images/edit.png"
@@ -1320,9 +1335,9 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
       </div>
       <div id="process-pace-div">
         Level change frequency: 1/
-        <input id="process-pace" type="text" autocomplete="off">
+        <input id="process-LCF" type="text" autocomplete="off">
         time step(s)
-        <img id="process-pace-x" class="sbtn enab" src="images/edit.png"
+        <img id="process-LCF-x" class="sbtn enab" src="images/edit.png"
              title="Edit expression for level change frequency">
       </div>
       <div id="process-collapsed-div">
@@ -1337,6 +1352,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
     <div id="product-dlg" class="inp-dlg">
       <div class="dlg-title">
         Product properties
+        <span id="product-group"></span>
         <img class="cancel-btn" src="images/cancel.png">
         <img class="ok-btn" src="images/ok.png">
       </div>
@@ -1371,7 +1387,7 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
       <img id="product-UB-x" class="sbtn enab" src="images/edit.png"
            title="Edit expression for upper product bound">
       <!-- "equal bounds" button is displayed middle-left of the two input fields -->
-      <div id="product-UB-equal" class="nebtn" title="Set equal bounds"></div>
+      <div id="product-UB-equal" class="bbtn ne" title="Set equal bounds"></div>
       <div id="product-IL-lbl">Initial level:</div>
       <input id="product-IL" type="text" autocomplete="off">
       <img id="product-IL-x" class="sbtn enab" src="images/edit.png"
@@ -1456,9 +1472,9 @@ NOTE: Unit symbols are case-sensitive, so BTU &ne; Btu">
         to this cluster?
       </div>
       <div id="move-buttons">
-        <img class="ok-btn big-btn" src="images/ok.png">
+        <img class="ok-btn" src="images/ok.png">
         Yes
-        <img class="cancel-btn big-btn" src="images/cancel.png">
+        <img class="cancel-btn" src="images/cancel.png">
         No
       </div>
     </div>
@@ -2807,9 +2823,9 @@ where X can be one or several of these letters: ABCDELPQ">
       </div>
       <div id="check-update-msg"></div>
       <div id="check-update-buttons">
-        <img class="ok-btn big-btn" src="images/ok.png">
+        <img class="ok-btn" src="images/ok.png">
         Shut down server to install new version
-        <img class="cancel-btn big-btn" src="images/cancel.png">
+        <img class="cancel-btn" src="images/cancel.png">
         Continue using current version
       </div>
     </div>