linny-r 1.2.1 → 1.3.1

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

@@ -12,7 +12,7 @@ dialogs, the main drawing canvas, and event handler functions.
 */
 
 /*
-Copyright (c) 2017-2022 Delft University of Technology
+Copyright (c) 2017-2023 Delft University of Technology
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -2877,7 +2877,7 @@ class GUIController extends Controller {
     this.shortcuts = {
       'A': 'actors',
       'B': 'repository', // B for "Browse"
-      'C': 'clone',
+      'C': 'clone', // button and Ctrl-C now copies; Alt-C clones
       'D': 'dataset',
       'E': 'equation',
       'F': 'finder',
@@ -2887,7 +2887,7 @@ class GUIController extends Controller {
       'J': 'sensitivity', // J for "Jitter"
       'K': 'reset', // reset model and clear results from graph
       'L': 'load',
-      'M': 'monitor',
+      'M': 'monitor', // Alt-M will open the model settings dialog
       // Ctrl-N will still open a new browser window
       'O': 'chart',  // O for "Output", as it can be charts as wel as data 
       'P': 'diagram', // P for PNG (Portable Network Graphics image)
@@ -2896,7 +2896,7 @@ class GUIController extends Controller {
       'S': 'save',
       // Ctrl-T will still open a new browser tab
       'U': 'parent',  // U for "move UP in cluster hierarchy"
-      'V': 'settings',
+      'V': 'paste',
       // Ctrl-W will still close the browser window
       'X': 'experiment',
       'Y': 'redo',
@@ -2906,7 +2906,7 @@ class GUIController extends Controller {
     // Initialize controller buttons
     this.node_btns = ['process', 'product', 'link', 'constraint',
         'cluster', 'module', 'note'];
-    this.edit_btns = ['clone', 'delete', 'undo', 'redo'];
+    this.edit_btns = ['clone', 'paste', 'delete', 'undo', 'redo'];
     this.model_btns = ['settings', 'save', 'repository', 'actors', 'dataset',
         'equation', 'chart', 'sensitivity', 'experiment', 'diagram',
         'savediagram', 'finder', 'monitor', 'solve'];
@@ -3026,7 +3026,15 @@ class GUIController extends Controller {
     }
     // Vertical tool bar buttons
     this.buttons.clone.addEventListener('click',
-        () => UI.promptForCloning());
+        (event) => {
+          if(event.altKey) {
+            UI.promptForCloning();
+          } else {
+            UI.copySelection();
+          }
+        });
+    this.buttons.paste.addEventListener('click',
+        () => UI.pasteSelection());
     this.buttons['delete'].addEventListener('click',
         () => {
           UNDO_STACK.push('delete');
@@ -3057,6 +3065,12 @@ class GUIController extends Controller {
         (event) => UI.stepBack(event));
     this.buttons.stepforward.addEventListener('click',
         (event) => UI.stepForward(event));
+    document.getElementById('prev-issue').addEventListener('click',
+        () => UI.updateIssuePanel(-1));
+    document.getElementById('issue-nr').addEventListener('click',
+        () => UI.jumpToIssue());
+    document.getElementById('next-issue').addEventListener('click',
+        () => UI.updateIssuePanel(1));
     this.buttons.recall.addEventListener('click',
         // Recall button toggles the documentation dialog
         () => UI.buttons.documentation.dispatchEvent(new Event('click')));
@@ -3448,6 +3462,62 @@ class GUIController extends Controller {
     this.start_sel_y = -1;
   }
 
+  updateIssuePanel(change=0) {
+    const
+        count = VM.issue_list.length,
+        panel = document.getElementById('issue-panel');
+    if(count > 0) {
+      const
+         prev = document.getElementById('prev-issue'),
+         next = document.getElementById('next-issue'),
+         nr = document.getElementById('issue-nr');
+      panel.title = pluralS(count, 'issue') +
+          ' occurred - click on number, \u25C1 or \u25B7 to view what and when';
+      if(VM.issue_index === -1) {
+        VM.issue_index = 0;
+      } else if(change) {
+        VM.issue_index += change;
+        setTimeout(() => UI.jumpToIssue(), 10);
+      }
+      nr.innerText = VM.issue_index + 1;
+      if(VM.issue_index <= 0) {
+        prev.classList.add('disab');
+      } else {
+        prev.classList.remove('disab');
+      }
+      if(this.issue_index >= count - 1) {
+        next.classList.add('disab');
+      } else {
+        next.classList.remove('disab');
+      }
+      panel.style.display = 'table-cell';
+    } else {
+      panel.style.display = 'none';
+      VM.issue_index = -1;
+    }
+  }
+  
+  jumpToIssue() {
+    // Set time step to the one of the warning message for the issue
+    // index, redraw the diagram if needed, and display the message
+    // on the infoline
+    if(VM.issue_index >= 0) {
+      const
+          issue = VM.issue_list[VM.issue_index],
+          po = issue.indexOf('(t='),
+          pc = issue.indexOf(')', po),
+          t = parseInt(issue.substring(po + 3, pc - 1));
+      if(MODEL.t !== t) {
+        MODEL.t = t;
+        this.updateTimeStep();
+        this.drawDiagram(MODEL);
+      }
+      this.info_line.classList.remove('error', 'notification');
+      this.info_line.classList.add('warning');
+      this.info_line.innerHTML = issue.substring(pc + 2);
+    }
+  }
+
   get doubleClicked() {
     // Return TRUE when a "double-click" occurred
     const
@@ -3485,81 +3555,6 @@ class GUIController extends Controller {
   // Methods related to draggable & resizable dialogs
   //
   
-  toggleDialog(e) {
-    e = e || window.event;
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    // Infer dialog identifier from target element
-    const
-        dlg = e.target.id.split('-')[0],
-        tde = document.getElementById(dlg + '-dlg'),
-        was_hidden = this.hidden(tde.id);
-    let mgr = tde.getAttribute('data-manager');
-    if(mgr) mgr = window[mgr];
-    // NOTE: prevent modeler from viewing charts while an experiment is running
-    if(dlg === 'chart' && was_hidden && MODEL.running_experiment) {
-      UI.notify(UI.NOTICE.NO_CHARTS);
-      mgr.visible = false;
-      return;
-    }
-    this.toggle(tde.id);
-    if(mgr) mgr.visible = was_hidden;
-    // Open at position after last drag (recorded in DOM data attributes)
-    let t = tde.getAttribute('data-top'),
-        l = tde.getAttribute('data-left');
-    // Make dialog appear in screen center the first time it is shown
-    if(t === null || l === null) {
-      const cs = window.getComputedStyle(tde);
-      t = ((window.innerHeight - parseFloat(cs.height)) / 2) + 'px';
-      l = ((window.innerWidth - parseFloat(cs.width)) / 2) + 'px';
-      tde.style.top = t;
-      tde.style.left = l;
-    }
-    if(!this.hidden(tde.id)) {
-      // Add dialog to "showing" list, and adjust z-indices
-      this.dr_dialog_order.push(tde);
-      this.reorderDialogs();
-      // Update the diagram if its manager has been specified
-      if(mgr) {
-        mgr.visible = true;
-        mgr.updateDialog();
-        if(mgr === DOCUMENTATION_MANAGER) {
-          if(this.info_line.innerHTML.length === 0) {
-            mgr.title.innerHTML = 'About Linny-R';
-            mgr.viewer.innerHTML = mgr.about_linny_r;
-            mgr.edit_btn.classList.remove('enab');
-            mgr.edit_btn.classList.add('disab');
-          }
-          UI.drawDiagram(MODEL);
-        }
-      }
-    } else {
-      const doi = this.dr_dialog_order.indexOf(tde);
-      // NOTE: doi should ALWAYS be >= 0 because dialog WAS showing
-      if(doi >= 0) {
-        this.dr_dialog_order.splice(doi, 1);
-        this.reorderDialogs();
-      }
-      if(mgr) {
-        mgr.visible = true;
-        if(mgr === DOCUMENTATION_MANAGER) {
-          mgr.visible = false;
-          mgr.title.innerHTML = 'Documentation';
-          UI.drawDiagram(MODEL);
-        }
-      }
-    }
-    UI.buttons[dlg].classList.toggle('stay-activ');
-  }
-  
-  reorderDialogs() {
-    let z = 10;
-    for(let i = 0; i < this.dr_dialog_order.length; i++) {
-      this.dr_dialog_order[i].style.zIndex = z;
-      z += 5;
-    }
-  }
-  
   draggableDialog(d) {
     // Make dialog draggable
     const
@@ -3685,7 +3680,7 @@ class GUIController extends Controller {
       UI.dr_dialog.style.width = Math.max(minw, w + dw) + 'px';
       UI.dr_dialog.style.height = Math.max(minh, h + dh) + 'px';
       // Update the dialog if its manager has been specified
-      const mgr = UI.dr_dialog.getAttribute('data-manager');
+      const mgr = UI.dr_dialog.dataset.manager;
       if(mgr) window[mgr].updateDialog();
     }
   
@@ -3696,6 +3691,90 @@ class GUIController extends Controller {
     }
   }
   
+  toggleDialog(e) {
+    // Hide dialog if visible, or show it if not, and update the
+    // order of appearance so that this dialog appears on top
+    e = e || window.event;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    // Infer dialog identifier from target element
+    const
+        dlg = e.target.id.split('-')[0],
+        tde = document.getElementById(dlg + '-dlg');
+    // NOTE: manager attribute is a string, e.g. 'MONITOR' or 'CHART_MANAGER'
+    let mgr = tde.dataset.manager,
+        was_hidden = this.hidden(tde.id);
+    if(mgr) {
+      // Dialog has a manager object => let `mgr` point to it
+      mgr = window[mgr];
+      // Manager object attributes are more reliable than DOM element
+      // style attributes, so update the visibility status
+      was_hidden = !mgr.visible;
+    }
+    // NOTE: modeler should not view charts while an experiment is
+    // running, so do NOT toggle when the Chart Manager is NOT visible 
+    if(dlg === 'chart' && was_hidden && MODEL.running_experiment) {
+      UI.notify(UI.NOTICE.NO_CHARTS);
+      return;
+    }
+    // Otherwise, toggle the dialog visibility
+    this.toggle(tde.id);
+    UI.buttons[dlg].classList.toggle('stay-activ');
+    if(mgr) mgr.visible = was_hidden;
+    let t, l;
+    if(top in tde.dataset && left in tde.dataset) {
+      // Open at position after last drag (recorded in DOM data attributes)
+      t = tde.dataset.top;
+      l = tde.dataset.left;
+    } else {
+      // Make dialog appear in screen center the first time it is shown
+      const cs = window.getComputedStyle(tde);
+      t = ((window.innerHeight - parseFloat(cs.height)) / 2) + 'px';
+      l = ((window.innerWidth - parseFloat(cs.width)) / 2) + 'px';
+      tde.style.top = t;
+      tde.style.left = l;
+    }
+    if(was_hidden) {
+      // Add activated dialog to "showing" list, and adjust z-indices
+      this.dr_dialog_order.push(tde);
+      this.reorderDialogs();
+      // Update the diagram if its manager has been specified
+      if(mgr) {
+        mgr.updateDialog();
+        if(mgr === DOCUMENTATION_MANAGER) {
+          if(this.info_line.innerHTML.length === 0) {
+            mgr.title.innerHTML = 'About Linny-R';
+            mgr.viewer.innerHTML = mgr.about_linny_r;
+            mgr.edit_btn.classList.remove('enab');
+            mgr.edit_btn.classList.add('disab');
+          }
+          UI.drawDiagram(MODEL);
+        }
+      }
+    } else {
+      const doi = this.dr_dialog_order.indexOf(tde);
+      // NOTE: doi should ALWAYS be >= 0 because dialog WAS showing
+      if(doi >= 0) {
+        this.dr_dialog_order.splice(doi, 1);
+        this.reorderDialogs();
+      }
+      if(mgr === DOCUMENTATION_MANAGER) {
+        mgr.title.innerHTML = 'Documentation';
+        UI.drawDiagram(MODEL);
+      }
+    }
+  }
+  
+  reorderDialogs() {
+    // Set z-index of draggable dialogs according to their order
+    // (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;
+      z += 5;
+    }
+  }
+  
   //
   // Button functionality
   //
@@ -3722,7 +3801,7 @@ class GUIController extends Controller {
     // Updates the buttons on the main GUI toolbars
     const
         node_btns = 'process product link constraint cluster note ',
-        edit_btns = 'clone delete undo redo ',
+        edit_btns = 'clone paste delete undo redo ',
         model_btns = 'settings save actors dataset equation chart ' +
             'diagram savediagram finder monitor solve';
     if(MODEL === null) {
@@ -3749,6 +3828,7 @@ class GUIController extends Controller {
     this.active_button = this.stayActiveButton;
     this.disableButtons(edit_btns);
     if(MODEL.selection.length > 0) this.enableButtons('clone delete');
+    if(this.canPaste) this.enableButtons('paste');
     // Only allow target seeking when some target or process constraint is defined
     if(MODEL.hasTargets) this.enableButtons('solve');
     var u = UNDO_STACK.canUndo;
@@ -4424,6 +4504,15 @@ class GUIController extends Controller {
         this.stepBack(e);
       } else if(e.keyCode === 39) {
         this.stepForward(e);
+      } else if(e.altKey && [67, 77].indexOf(e.keyCode) >= 0) {
+        // Special shortcut keys for "clone selection" and "model settings"
+        const be = new Event('click');
+        be.altKey = true;
+        if(e.keyCode === 67) {
+          this.buttons.clone.dispatchEvent(be);
+        } else {
+          this.buttons.settings.dispatchEvent(be);
+        }
       } else if(!e.shiftKey && !e.altKey &&
           (!topmod || [65, 67, 86].indexOf(e.keyCode) < 0)) {
         // Interpret special keys as shortcuts unless a modal dialog is open
@@ -5137,7 +5226,42 @@ class GUIController extends Controller {
   cancelCloneSelection() {
     this.modals.clone.hide();
     this.updateButtons();
-  }  
+  }
+  
+  copySelection() {
+    // Save selection as XML in local storage of the browser
+    const xml = MODEL.selectionAsXML;
+//console.log('HERE copy xml', xml);
+    if(xml) {
+      window.localStorage.setItem('Linny-R-selection-XML', xml);
+      this.updateButtons();
+      this.notify('Selection copied, but cannot be pasted yet -- Use Alt-C to clone');
+    }
+  }
+  
+  get canPaste() {
+    const xml = window.localStorage.getItem('Linny-R-selection-XML');
+    if(xml) {
+      const timestamp = xml.match(/<copy timestamp="(\d+)"/);
+      if(timestamp) { 
+        if(Date.now() - parseInt(timestamp[1]) < 8*3600000) return true;
+      }
+      // Remove XML from local storage if older than 8 hours
+      window.localStorage.removeItem('Linny-R-selection-XML');
+    }
+    return false;
+  }
+  
+  pasteSelection() {
+    // If selection has been saved as XML in local storage, test to
+    // see whether PASTE would result in name conflicts, and if so,
+    // open the name conflict resolution window
+    const xml = window.localStorage.getItem('Linny-R-selection-XML');
+    if(xml) {
+      // @@ TO DO!
+      this.notify('Paste not implemented yet -- WORK IN PROGRESS!');
+    }
+  }
   
   //
   // Interaction with modal dialogs to modify model or entity properties
@@ -5346,17 +5470,20 @@ class GUIController extends Controller {
     if(!this.updateExpressionInput(
         'process-IL', 'initial level', p.initial_level)) return false;
     // Store original expression string
-    const pxt = p.pace_expression.text;
+    const
+        px = p.pace_expression,
+        pxt = p.pace_expression.text;
     // Validate expression
     if(!this.updateExpressionInput('process-pace', 'level change frequency',
-        p.pace_expression)) return false;
+        px)) return false;
     // NOTE: pace expression must be *static* and >= 1
-    n = p.pace_expression.result(1);
-    if(!p.pace_expression.isStatic || n < 1) {
+    n = px.result(1);
+    if(!px.isStatic || n < 1) {
       md.element('pace').focus();
       this.warn('Level change frequency must be static and &ge; 1');
       // Restore original expression string
-      p.pace_expression.text = pxt;
+      px.text = pxt;
+      px.code = null;
       return false;
     }
     // Ignore fraction if a real number was entered.
@@ -5857,7 +5984,7 @@ class GUIMonitor {
         (event) => {
             const el = event.target;
             el.classList.add('sel-pb');
-            MONITOR.showBlock(el.getAttribute('data-blk'));
+            MONITOR.showBlock(el.dataset.blk);
           },
         false);
     this.progress_bar.appendChild(n);
@@ -6466,7 +6593,7 @@ class GUIFileManager {
   }
 
   renderDiagramAsPNG() {
-    localStorage.removeItem('png-url');
+    window.localStorage.removeItem('png-url');
     UI.paper.fitToSize();
     MODEL.alignToGrid();
     this.renderSVGAsPNG(UI.paper.svg.outerHTML);
@@ -6492,7 +6619,7 @@ class GUIFileManager {
         })
       .then((data) => {
           // Pass URL of image to the newly opened browser window
-          localStorage.setItem('png-url', data);
+          window.localStorage.setItem('png-url', data);
         })
       .catch((err) => UI.warn(UI.WARNING.NO_CONNECTION, err));
   }
@@ -9080,7 +9207,9 @@ class GUIDatasetManager extends DatasetManager {
     this.close_btn.addEventListener(
         'click', (event) => UI.toggleDialog(event));
     document.getElementById('ds-new-btn').addEventListener(
-        'click', () => DATASET_MANAGER.promptForDataset());
+         // Shift-click on New button => add prefix of selected dataset
+         // (if any) to the name field of the dialog
+        'click', () => DATASET_MANAGER.promptForDataset(event.shiftKey));
     document.getElementById('ds-data-btn').addEventListener(
         'click', () => DATASET_MANAGER.editData());
     document.getElementById('ds-rename-btn').addEventListener(
@@ -9117,6 +9246,8 @@ class GUIDatasetManager extends DatasetManager {
         'click', () => DATASET_MANAGER.editExpression());
     document.getElementById('ds-delete-modif-btn').addEventListener(
         'click', () => DATASET_MANAGER.deleteModifier());
+    document.getElementById('ds-convert-modif-btn').addEventListener(
+        'click', () => DATASET_MANAGER.promptToConvertModifiers());
     // Modifier table
     this.modifier_table = document.getElementById('dataset-modif-table');
     // Modal dialogs
@@ -9130,6 +9261,11 @@ class GUIDatasetManager extends DatasetManager {
         'click', () => DATASET_MANAGER.renameDataset());
     this.rename_modal.cancel.addEventListener(
         'click', () => DATASET_MANAGER.rename_modal.hide());
+    this.conversion_modal = new ModalDialog('convert-modifiers');
+    this.conversion_modal.ok.addEventListener(
+        'click', () => DATASET_MANAGER.convertModifiers());
+    this.conversion_modal.cancel.addEventListener(
+        'click', () => DATASET_MANAGER.conversion_modal.hide());
     this.new_selector_modal = new ModalDialog('new-selector');
     this.new_selector_modal.ok.addEventListener(
         'click', () => DATASET_MANAGER.newModifier());
@@ -9164,12 +9300,14 @@ class GUIDatasetManager extends DatasetManager {
 
   reset() {
     super.reset();
+    this.selected_prefix_row = null;
     this.selected_modifier = null;
     this.edited_expression = null;
     this.filter_pattern = null;
     this.clicked_object = null;
     this.last_time_clicked = 0;
     this.focal_table = null;
+    this.expanded_rows = [];
   }
   
   doubleClicked(obj) {
@@ -9213,6 +9351,9 @@ class GUIDatasetManager extends DatasetManager {
     const srl = this.focal_table.getElementsByClassName('sel-set');
     if(srl.length > 0) {
       let r = this.focal_table.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
@@ -9222,14 +9363,118 @@ class GUIDatasetManager extends DatasetManager {
     }
   }
   
+  hideCollapsedRows() {
+    // Hides all rows except top level and immediate children of expanded
+    for(let i = 0; i < this.dataset_table.rows.length; i++) {
+      const
+          row = this.dataset_table.rows[i],
+          // Get the first DIV in the first TD of this row
+          first_div = row.firstChild.firstElementChild,
+          btn = first_div.dataset.prefix === 'x';
+      let p = row.dataset.prefix,
+          x = this.expanded_rows.indexOf(p) >= 0, 
+          show = !p || x;
+      if(btn) {
+        const btn_div = row.getElementsByClassName('tree-btn')[0];
+        // Special expand/collapse row
+        if(show) {
+          // Set triangle to point down 
+          btn_div.innerText = '\u25BC';
+        } else {
+          // Set triangle to point right 
+          btn_div.innerText = '\u25BA';
+          // See whether "parent prefix" is expanded
+          p = p.split(UI.PREFIXER);
+          p.pop();
+          p = p.join(UI.PREFIXER);
+          // If so, then also show the row
+          show = (!p || this.expanded_rows.indexOf(p) >= 0);
+        }
+      }
+      row.style.display = (show ? 'block' : 'none');
+    }
+  }
+  
+  togglePrefixRow(e) {
+    // Shows list items of the next prefix level
+    let r = e.target;
+    while(r.tagName !== 'TR') r = r.parentNode;
+    const
+        p = r.dataset.prefix,
+        i = this.expanded_rows.indexOf(p);
+    if(i >= 0) {
+      this.expanded_rows.splice(i, 1);
+      // Also remove all prefixes that have `p` as prefix
+      for(let j = this.expanded_rows.length - 1; j >= 0; j--) {
+        if(this.expanded_rows[j].startsWith(p + UI.PREFIXER)) {
+          this.expanded_rows.splice(j, 1);
+        }
+      }
+    } else {
+      addDistinct(p, this.expanded_rows);
+    }
+    this.hideCollapsedRows();
+  }
+  
+  rowByPrefix(prefix) {
+    // Returns first table row with the specified prefix
+    if(!prefix) return null;
+    let lcp = prefix.toLowerCase(),
+        pl = lcp.split(': ');
+    // Remove trailing ': '
+    if(lcp.endsWith(': ')) {
+      pl.pop();
+      lcp = pl.join(': ');
+    }
+    while(pl.length > 0) {
+      addDistinct(pl.join(': '), this.expanded_rows);
+      pl.pop();
+    }
+    this.hideCollapsedRows();
+    for(let i = 0; i < this.dataset_table.rows.length; i++) {
+      const r = this.dataset_table.rows[i];
+      if(r.dataset.prefix === lcp) return r;
+    }
+    return null;
+  }
+
+  selectPrefixRow(e) {
+    // Selects expand/collapse prefix row
+    this.focal_table = this.dataset_table;
+    // NOTE: `e` can also be a string specifying the prefix to select
+    let r = e.target || this.rowByPrefix(e);
+    if(!r) return;
+    // Modeler may have clicked on the expand/collapse triangle;
+    const toggle = r.classList.contains('tree-btn');
+    while(r.tagName !== 'TR') r = r.parentNode;
+    this.selected_prefix_row = r;
+    const sel = this.dataset_table.getElementsByClassName('sel-set');
+    this.selected_dataset = null;
+    if(sel.length > 0) {
+      sel[0].classList.remove('sel-set');
+      this.updatePanes();
+    }
+    r.classList.add('sel-set');
+    if(!e.target) r.scrollIntoView({block: 'center'});
+    if(toggle || e.altKey || this.doubleClicked(r)) this.togglePrefixRow(e);
+    UI.enableButtons('ds-rename');      
+  }
+  
   updateDialog() {
     const
+        indent_px = 14,
         dl = [],
         dnl = [],
         sd = this.selected_dataset,
-        ioclass = ['', 'import', 'export'];
+        ioclass = ['', 'import', 'export'],
+        ciPrefixCompare = (a, b) => {
+            const
+                pa = a.split(':_').join('  '),
+                pb = b.split(':_').join('  ');
+            return ciCompare(pa, pb);
+          };
     for(let d in MODEL.datasets) if(MODEL.datasets.hasOwnProperty(d) &&
-        // NOTE: do not list "black-boxed" entities
+         // NOTE: do not list "black-boxed" entities
         !d.startsWith(UI.BLACK_BOX) &&
         // NOTE: do not list the equations dataset
         MODEL.datasets[d] !== MODEL.equations_dataset) {
@@ -9238,10 +9483,76 @@ class GUIDatasetManager extends DatasetManager {
         dnl.push(d);
       }
     }
-    dnl.sort(ciCompare);
-    let sdid = 'dstr';
+    dnl.sort(ciPrefixCompare);
+    // First determine indentation levels, prefixes and names 
+    const
+        indent = [],
+        pref_ids = [],
+        names = [],
+        pref_names = {},
+        xids = [];
+    for(let i = 0; i < dnl.length; i++) {
+      const pref = UI.prefixesAndName(MODEL.datasets[dnl[i]].name);
+      // NOTE: only the name part (so no prefixes at all) will be shown
+      names.push(pref.pop());
+      indent.push(pref.length);
+      // NOTE: ignore case but join again with ": " because prefixes
+      // can contain any character; only the prefixer is "reserved"
+      const pref_id = pref.join(UI.PREFIXER).toLowerCase();
+      pref_ids.push(pref_id);
+      pref_names[pref_id] = pref;
+    }
+    let sdid = 'dstr',
+        prev_id = '',
+        ind_div = '';
     for(let i = 0; i < dnl.length; i++) {
-      const d = MODEL.datasets[dnl[i]];
+      const
+          d = MODEL.datasets[dnl[i]],
+          pid = pref_ids[i];
+      if(indent[i]) {
+        ind_div = '<div class="ds-indent" style="width: ' +
+            indent[i] * indent_px + 'px">\u25B9</div>';
+      } else {
+        ind_div = '';
+      }
+      // NOTE: empty string should not add a collapse/expand row
+      if(pid && pid != prev_id && xids.indexOf(pid) < 0) {
+        // NOTE: XX: aa may be followed by XX: YY: ZZ: bb, which requires
+        // *two* collapsable lines: XX: YY and XX: YY: ZZ: before adding
+        // XX: YY: ZZ: bb
+        const
+            ps = pid.split(UI.PREFIXER),
+            pps = prev_id.split(UI.PREFIXER),
+            pn = pref_names[pid],
+            lpl = [];
+        let lindent = 0;
+        // Ignore identical leading prefixes
+        while(ps.length > 0 && pps.length > 0 && ps[0] === pps[0]) {
+          lpl.push(ps.shift());
+          pps.shift();
+          pn.shift();
+          lindent++;
+        }
+        // Add a "collapse" row for each new prefix
+        while(ps.length > 0) {
+          lpl.push(ps.shift());
+          lindent++;
+          const lpid = lpl.join(UI.PREFIXER);
+          dl.push(['<tr data-prefix="', lpid, '" class="dataset',
+              '" onclick="DATASET_MANAGER.selectPrefixRow(event);"><td>',
+              // NOTE: data-prefix="x" signals that this is an extra row
+              (lindent > 0 ?
+                  '<div data-prefix="x" style="width: ' + lindent * indent_px +
+                  'px"></div>' :
+                  ''),
+              '<div data-prefix="x" class="tree-btn">',
+              (this.expanded_rows.indexOf(lpid) >= 0 ? '\u25BC' : '\u25BA'),
+              '</div>', pn.shift(), '</td></tr>'].join(''));
+          // Add to the list to prevent multiple c/x-rows for the same prefix
+          xids.push(lpid);
+        }
+      }
+      prev_id = pid;
       let cls = ioclass[MODEL.ioType(d)];
       if(d.outcome) {
         cls += ' outcome';
@@ -9253,20 +9564,29 @@ class GUIDatasetManager extends DatasetManager {
       if(Object.keys(d.modifiers).length > 0) cls += ' modif';
       if(d.black_box) cls += ' blackbox';
       cls = cls.trim();
-      if(cls) cls = ' class="'+ cls + '"';
+      if(cls) cls = ' class="' + cls + '"';
       if(d === sd) sdid += i;
       dl.push(['<tr id="dstr', i, '" class="dataset',
           (d === sd ? ' sel-set' : ''),
           (d.default_selector ? ' def-sel' : ''),
+          '" data-prefix="', pid,
           '" onclick="DATASET_MANAGER.selectDataset(event, \'',
           dnl[i], '\');" onmouseover="DATASET_MANAGER.showInfo(\'', dnl[i],
-          '\', event.shiftKey);"><td', cls, '>', d.displayName,
-          '</td></tr>'].join(''));
+          '\', event.shiftKey);"><td>', ind_div, '<div', cls, '>',
+          names[i], '</td></tr>'].join(''));
     }
     this.dataset_table.innerHTML = dl.join('');
-    const btns = 'ds-data ds-rename ds-clone ds-delete';
+    this.hideCollapsedRows();
+    const e = document.getElementById(sdid);
+    if(e) UI.scrollIntoView(e);
+    this.updatePanes();
+  }
+  
+  updatePanes() {
+    const
+        sd = this.selected_dataset,
+        btns = 'ds-data ds-clone ds-delete ds-rename';
     if(sd) {
-      this.dataset_table.innerHTML = dl.join('');
       this.properties.style.display = 'block';
       document.getElementById('dataset-default').innerHTML =
           VM.sig4Dig(sd.default_value) +
@@ -9296,12 +9616,11 @@ class GUIDatasetManager extends DatasetManager {
         this.outcome.classList.add('not-selected');
       }
       UI.setImportExportBox('dataset', MODEL.ioType(sd));
-      const e = document.getElementById(sdid);
-      UI.scrollIntoView(e);
       UI.enableButtons(btns);
     } else {
       this.properties.style.display = 'none';
       UI.disableButtons(btns);
+      if(this.selected_prefix_row) UI.enableButtons('ds-rename');
     }
     this.updateModifiers();
   }
@@ -9360,6 +9679,17 @@ class GUIDatasetManager extends DatasetManager {
     } else {
       UI.disableButtons(btns);
     }
+    // Check if dataset appears to "misuse" dataset modifiers
+    const
+        pml = sd.inferPrefixableModifiers,
+        e = document.getElementById('ds-convert-modif-btn');
+    if(pml.length > 0) {
+      e.style.display = 'inline-block';
+      e.title = 'Convert '+ pluralS(pml.length, 'modifier') +
+          ' to prefixed dataset(s)';
+    } else {
+      e.style.display = 'none'; 
+    }
   }
   
   showInfo(id, shift) {
@@ -9442,8 +9772,36 @@ class GUIDatasetManager extends DatasetManager {
     this.updateModifiers();
   }
   
-  promptForDataset() {
-    this.new_modal.element('name').value = '';
+  get selectedPrefix() {
+    // Returns the selected prefix (with its trailing colon-space)
+    let prefix = '',
+        tr = this.selected_prefix_row;
+    while(tr) {
+      const td = tr.firstElementChild;
+      if(td && td.firstElementChild.dataset.prefix === 'x') {
+        prefix = td.lastChild.textContent + UI.PREFIXER + prefix;
+        tr = tr.previousSibling;
+      } else {
+        tr = null;
+      }
+    }
+    return prefix;
+  }
+  
+  promptForDataset(shift=false) {
+    // Shift signifies: add prefix of selected dataset (if any) to
+    // the name field of the dialog
+    let prefix = '';
+    if(shift) {
+      if(this.selected_dataset) {
+        const p = UI.prefixesAndName(this.selected_dataset.name);
+        p[p.length - 1] = '';
+        prefix = p.join(UI.PREFIXER);
+      } else if(this.selected_prefix) {
+        prefix = this.selectedPrefix;
+      }
+    }
+    this.new_modal.element('name').value = prefix;
     this.new_modal.show('name');
   }
   
@@ -9460,9 +9818,14 @@ class GUIDatasetManager extends DatasetManager {
   promptForName() {
     // Prompts the modeler for a new name for the selected dataset (if any)
     if(this.selected_dataset) {
+      this.rename_modal.element('title').innerText = 'Rename dataset';
       this.rename_modal.element('name').value =
           this.selected_dataset.displayName;
       this.rename_modal.show('name');
+    } else if(this.selected_prefix_row) {
+      this.rename_modal.element('title').innerText = 'Rename datasets by prefix';
+      this.rename_modal.element('name').value = this.selectedPrefix.slice(0, -2);
+      this.rename_modal.show('name');
     }
   }
   
@@ -9477,16 +9840,67 @@ class GUIDatasetManager extends DatasetManager {
       // Then try to rename -- this may generate a warning
       if(this.selected_dataset.rename(n)) {
         this.rename_modal.hide();
-        this.updateDialog();
-        // Also update Chart manager and Experiment viewer, as these may
-        // display a variable name for this dataset
-        CHART_MANAGER.updateDialog();
         if(EXPERIMENT_MANAGER.selected_experiment) {
           EXPERIMENT_MANAGER.selected_experiment.inferVariables();
         }
-        EXPERIMENT_MANAGER.updateDialog();
+        UI.updateControllerDialogs('CDEFJX');
+      }
+    } else if(this.selected_prefix_row) {
+      // Create a list of datasets to be renamed
+      let e = this.rename_modal.element('name'),
+          prefix = e.value.trim();
+      e.focus();
+      while(prefix.endsWith(':')) prefix = prefix.slice(0, -1);
+      // NOTE: prefix may be empty string, but otherwise should be a valid name
+      if(prefix && !UI.validName(prefix)) {
+        UI.warn('Invalid prefix');
+        return;
+      }
+      prefix += UI.PREFIXER;
+      const
+          oldpref = this.selectedPrefix,
+          key = oldpref.toLowerCase().split(UI.PREFIXER).join(':_'),
+          newkey = prefix.toLowerCase().split(UI.PREFIXER).join(':_'),
+          dsl = [];
+      // No change if new prefix is identical to old prefix
+      if(oldpref !== prefix) { 
+        for(let k in MODEL.datasets) if(MODEL.datasets.hasOwnProperty(k)) {
+          if(k.startsWith(key)) dsl.push(k);
+        }
+        // NOTE: no check needed for mere upper/lower case changes
+        if(newkey !== key) {
+          let nc = 0;
+          for(let i = 0; i < dsl.length; i++) {
+            let nk = newkey + dsl[i].substring(key.length);
+            if(MODEL.datasets[nk]) nc++;
+          }
+          if(nc) {
+            UI.warn('Renaming ' + pluralS(dsl.length, 'dataset') +
+                ' would cause ' + pluralS(nc, 'name conflict'));
+            return;
+          }
+        }
+        // Reset counts of effects of a rename operation
+        this.entity_count = 0;
+        this.expression_count = 0;
+        // Rename datasets one by one, suppressing notifications
+        for(let i = 0; i < dsl.length; i++) {
+          const d = MODEL.datasets[dsl[i]];
+          d.rename(d.displayName.replace(oldpref, prefix), false);
+        }
+        let msg = 'Renamed ' + pluralS(dsl.length, 'dataset');
+        if(MODEL.variable_count) msg += ', and updated ' +
+            pluralS(MODEL.variable_count, 'variable') + ' in ' +
+            pluralS(MODEL.expression_count, 'expression');
+        UI.notify(msg);
+        if(EXPERIMENT_MANAGER.selected_experiment) {
+          EXPERIMENT_MANAGER.selected_experiment.inferVariables();
+        }
+        UI.updateControllerDialogs('CDEFJX');
+        this.selectPrefixRow(prefix);
       }
     }
+    this.rename_modal.hide();
   }
 
   cloneDataset() {
@@ -9626,16 +10040,13 @@ class GUIDatasetManager extends DatasetManager {
     this.deleteModifier();
     this.selected_modifier = m;
     // Update all chartvariables referencing this dataset + old selector
+    const vl = MODEL.datasetChartVariables;
     let cv_cnt = 0;
-    for(let i = 0; i < MODEL.charts.length; i++) {
-      const c = MODEL.charts[i];
-      for(let j = 0; j < c.variables.length; j++) {
-        const v = c.variables[j];
-        if(v.object === this.selected_dataset &&
-            v.attribute === oldm.selector) {
-          v.attribute = m.selector;
-          cv_cnt++;
-        }
+    for(let i = 0; i < vl.length; i++) {
+      if(v.object === this.selected_dataset &&
+          v.attribute === oldm.selector) {
+        v.attribute = m.selector;
+        cv_cnt++;
       }
     }
     // Also replace old selector in all expressions (count these as well)
@@ -9649,7 +10060,7 @@ class GUIDatasetManager extends DatasetManager {
       UI.notify('Updated ' +  msg.join(' and '));
       // Also update these stay-on-top dialogs, as they may display a
       // variable name for this dataset + modifier
-      UI.updateControllerDialogs('CDEFX');
+      UI.updateControllerDialogs('CDEFJX');
     }
     // NOTE: update dimensions only if dataset now has 2 or more modifiers
     // (ignoring those with wildcards)
@@ -9701,6 +10112,138 @@ class GUIDatasetManager extends DatasetManager {
     }
   }
 
+  promptToConvertModifiers() {
+    // Convert modifiers of selected dataset to new prefixed datasets
+    const
+        ds = this.selected_dataset,
+        md = this.conversion_modal;
+    if(ds) {
+      md.element('prefix').value = ds.displayName;
+      md.show('prefix');
+    }
+  }
+  
+  convertModifiers() {
+    // Convert modifiers of selected dataset to new prefixed datasets
+    if(!this.selected_dataset) return;
+    const
+        ds = this.selected_dataset,
+        md = this.conversion_modal,
+        e = md.element('prefix');
+    let prefix = e.value.trim(),
+        vcount = 0;
+    e.focus();
+    while(prefix.endsWith(':')) prefix = prefix.slice(0, -1);
+    // NOTE: prefix may be empty string, but otherwise should be a valid name
+    if(!UI.validName(prefix)) {
+      UI.warn('Invalid prefix');
+      return;
+    }
+    prefix += UI.PREFIXER;
+    const
+        dsn = ds.displayName,
+        pml = ds.inferPrefixableModifiers,
+        xl = MODEL.allExpressions,
+        vl = MODEL.datasetVariables,
+        nl = MODEL.notesWithTags;
+    for(let i = 0; i < pml.length; i++) {
+      // Create prefixed dataset with correct default value
+      const
+          m = pml[i],
+          sel = m.selector,
+          newds = MODEL.addDataset(prefix + sel);
+      if(newds) {
+        // Retain properties of the "parent" dataset
+        newds.scale_unit = ds.scale_unit;
+        newds.time_scale = ds.time_scale;
+        newds.time_unit = ds.time_unit;
+        // Set modifier's expression result as default value
+        newds.default_value = m.expression.result(1);
+        // Remove the modifier from the dataset
+        delete ds.modifiers[UI.nameToID(sel)];
+        // If it was the dataset default modifier, clear this default
+        if(sel === ds.default_selector) ds.default_selector = '';
+        // Rename variable in charts
+        const
+            from = dsn + UI.OA_SEPARATOR + sel,
+            to = newds.displayName;
+        for(let j = 0; j < vl.length; j++) {
+          const v = vl[j];
+          // NOTE: variable should match original dataset + selector
+          if(v.displayName === from) {
+            // Change to new dataset WITHOUT selector
+            v.object = newds;
+            v.attribute = '';
+            vcount++;
+          }
+        }
+        // Rename variable in the Sensitivity Analysis
+        for(let j = 0; j < MODEL.sensitivity_parameters.length; j++) {
+          if(MODEL.sensitivity_parameters[j] === from) {
+            MODEL.sensitivity_parameters[j] = to;
+            vcount++;
+          }
+        }
+        for(let j = 0; j < MODEL.sensitivity_outcomes.length; j++) {
+          if(MODEL.sensitivity_outcomes[j] === from) {
+            MODEL.sensitivity_outcomes[j] = to;
+            vcount++;
+          }
+        }
+        // Rename variable in expressions and notes
+        const re = new RegExp(
+            // Handle multiple spaces between words
+            '\\[\\s*' + escapeRegex(from).replace(/\s+/g, '\\s+')
+            // Handle spaces around the separator |
+            .replace('\\|', '\\s*\\|\\s*') +
+            // Pattern ends at any character that is invalid for a
+            // dataset modifier selector (unlike equation names)
+            '\\s*[^a-zA-Z0-9\\+\\-\\%\\_]', 'gi');
+        for(let j = 0; j < xl.length; j++) {
+          const
+              x = xl[j],
+              matches = x.text.match(re);
+          if(matches) {
+            for(let k = 0; k < matches.length; k++) {
+              // NOTE: each match will start with the opening bracket,
+              // but end with the first "non-selector" character, which
+              // will typically be ']', but may also be '@' (and now that
+              // units can be converted, also the '>' of the arrow '->')
+              x.text = x.text.replace(matches[k], '[' + to + matches[k].slice(-1));
+              vcount ++;
+            }
+            // Force recompilation
+            x.code = null;
+          }
+        }
+        for(let j = 0; j < nl.length; j++) {
+          const
+              n = nl[j],
+              matches = n.contents.match(re);
+          if(matches) {
+            for(let k = 0; k < matches.length; k++) {
+              // See NOTE above for the use of `slice` here
+              n.contents = n.contents.replace(matches[k], '[' + to + matches[k].slice(-1));
+              vcount ++;
+            }
+            // Note fields must be parsed again
+            n.parsed = false;
+          }
+        }
+      }
+    }
+    if(vcount) UI.notify('Renamed ' + pluralS(vcount, 'variable') +
+        ' throughout the model');
+    // Delete the original dataset unless it has series data
+    if(ds.data.length === 0) this.deleteDataset();
+    MODEL.updateDimensions();
+    this.selected_dataset = null;
+    this.selected_prefix_row = null;
+    this.updateDialog();
+    md.hide();
+    this.selectPrefixRow(prefix);
+  }
+
   updateLine() {
     const
         ln =  document.getElementById('series-line-number'),
@@ -10061,7 +10604,7 @@ class EquationManager {
       UI.notify('Updated ' +  msg.join(' and '));
       // Also update these stay-on-top dialogs, as they may display a
       // variable name for this dataset + modifier
-      UI.updateControllerDialogs('CDEFX');
+      UI.updateControllerDialogs('CDEFJX');
     }
     // Always close the name prompt dialog, and update the equation manager
     this.rename_modal.hide();
@@ -10182,6 +10725,12 @@ class GUIChartManager extends ChartManager {
         'click', () => CHART_MANAGER.renameEquation());
     document.getElementById('chart-edit-equation-btn').addEventListener(
         'click', () => CHART_MANAGER.editEquation());
+    document.getElementById('variable-color').addEventListener(
+        'mouseenter', () => CHART_MANAGER.showPasteColor());
+    document.getElementById('variable-color').addEventListener(
+        'mouseleave', () => CHART_MANAGER.hidePasteColor());
+    document.getElementById('variable-color').addEventListener(
+        'click', (event) => CHART_MANAGER.copyPasteColor(event));
     // NOTE: uses the color picker developed by James Daniel
     this.color_picker = new iro.ColorPicker("#color-picker", {
         width: 92,
@@ -10229,6 +10778,7 @@ class GUIChartManager extends ChartManager {
     this.options_shown = true;
     this.setRunsChart(false);
     this.last_time_selected = 0;
+    this.paste_color = '';
   }
   
   enterKey() {
@@ -10283,14 +10833,13 @@ class GUIChartManager extends ChartManager {
     const
         n = ev.dataTransfer.getData('text'),
         obj = MODEL.objectByID(n);
+    ev.preventDefault();
     if(!obj) {
       UI.alert(`Unknown entity ID "${n}"`);
     } else if(this.chart_index >= 0) {
-      // Only accept when all conditions are met
-      ev.preventDefault();
       if(obj instanceof DatasetModifier) {
         // Equations can be added directly as chart variable
-        this.addVariable(obj.name);
+        this.addVariable(obj.selector);
         return;
       }
       // For other entities, the attribute must be specified
@@ -10670,7 +11219,16 @@ class GUIChartManager extends ChartManager {
     this.variable_index = vi;
     this.updateDialog();
   }
-    
+  
+  setColorPicker(color) {
+    // Robust way to set iro color picker color
+    try {
+      this.color_picker.color.hexString = color;
+    } catch(e) {
+      this.color_picker.color.rgbString = color;
+    }
+  }
+  
   editVariable() {
     // Shows the edit (or rather: format) variable dialog
     if(this.chart_index >= 0 && this.variable_index >= 0) {
@@ -10680,11 +11238,7 @@ class GUIChartManager extends ChartManager {
       this.variable_modal.element('scale').value = VM.sig4Dig(cv.scale_factor);
       this.variable_modal.element('width').value = VM.sig4Dig(cv.line_width);
       this.variable_modal.element('color').style.backgroundColor = cv.color;
-      try {
-        this.color_picker.color.hexString = cv.color;
-      } catch(e) {
-        this.color_picker.color.rgbString = cv.color;
-      }
+      this.setColorPicker(cv.color);
       // Show change equation buttons only for equation variables
       if(cv.object === MODEL.equations_dataset) {
         this.change_equation_btns.style.display = 'block';
@@ -10695,6 +11249,34 @@ class GUIChartManager extends ChartManager {
     }
   }
   
+  showPasteColor() {
+    // Show last copied color (if any) as smaller square next to color box
+    if(this.paste_color) {
+      const pc = this.variable_modal.element('paste-color');
+      pc.style.backgroundColor = this.paste_color;
+      pc.style.display = 'inline-block';
+    }
+  }
+  
+  hidePasteColor() {
+    // Hide paste color box
+    this.variable_modal.element('paste-color').style.display = 'none';
+  }
+  
+  copyPasteColor(event) {
+    // Store the current color as past color, or set it to the current
+    // paste color if this is defined and the Shift key was pressed
+    event.stopPropagation();
+    const cbox = this.variable_modal.element('color');
+    if(event.shiftKey && this.paste_color) {
+      cbox.style.backgroundColor = this.paste_color;
+      this.setColorPicker(this.paste_color);
+    } else {
+      this.paste_color = cbox.style.backgroundColor;
+      this.showPasteColor();
+    }
+  }
+  
   toggleVariable(vi) {
     window.event.stopPropagation();
     if(vi >= 0 && this.chart_index >= 0) {
@@ -10925,7 +11507,7 @@ class GUIChartManager extends ChartManager {
   }
   
   renderChartAsPNG() {
-    localStorage.removeItem('png-url');
+    window.localStorage.removeItem('png-url');
     FILE_MANAGER.renderSVGAsPNG(MODEL.charts[this.chart_index].svg);
   }
 
@@ -12050,7 +12632,8 @@ class GUIExperimentManager extends ExperimentManager {
           x.charts[i].title, '</td></tr>'].join(''));
     }
     this.chart_table.innerHTML = tr.join('');
-    if(x.charts.length === 0) canview = false;
+    // Do not show viewer unless at least 1 dependent variable has been defined
+    if(x.charts.length === 0 && MODEL.outcomeNames.length === 0) canview = false;
     if(tr.length >= this.suitable_charts.length) {
       document.getElementById('xp-c-add-btn').classList.add('v-disab');
     } else {
@@ -12070,7 +12653,7 @@ class GUIExperimentManager extends ExperimentManager {
       dbtn.classList.add('v-disab');
       cbtn.classList.add('v-disab');
     }
-    // Enable viewing only if > 1 dimensions and > 1 charts
+    // Enable viewing only if > 1 dimensions and > 1 outcome variables
     if(canview) {
       UI.enableButtons('xp-view');
     } else {
@@ -12155,14 +12738,11 @@ class GUIExperimentManager extends ExperimentManager {
     const x = this.selected_experiment;
     if(x) {
       x.inferVariables();
-      if(x.selected_variable === '') {
-        x.selected_variable = x.variables[0].displayName;
-      }
       const
           ol = [],
           vl = MODEL.outcomeNames;
       for(let i = 0; i < x.variables.length; i++) {
-        vl.push(x.variables[i].displayName); 
+        addDistinct(x.variables[i].displayName, vl); 
       }
       vl.sort(ciCompare);
       for(let i = 0; i < vl.length; i++) {
@@ -12171,6 +12751,9 @@ class GUIExperimentManager extends ExperimentManager {
             '>', vl[i], '</option>'].join(''));
       }
       document.getElementById('viewer-variable').innerHTML = ol.join('');
+      if(x.selected_variable === '') {
+        x.selected_variable = vl[0];
+      }
     }
   }
   
@@ -14592,7 +15175,7 @@ class Finder {
       const
           raw = escapeRegex(se.displayName),
           re = new RegExp(
-              '\\[\\s*' + raw.replace(/\s+/g, '\\s+') + '\\s*[\\|\\@\\]]');
+              '\\[\\s*!?' + raw.replace(/\s+/g, '\\s+') + '\\s*[\\|\\@\\]]');
       // Check actor weight expressions
       for(let k in MODEL.actors) if(MODEL.actors.hasOwnProperty(k)) {
         const a = MODEL.actors[k];