linny-r 1.9.2 → 2.0.1

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

@@ -11,7 +11,7 @@ dialog for the Linny-R constraint editor.
 */
 
 /*
-Copyright (c) 2017-2023 Delft University of Technology
+Copyright (c) 2017-2024 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
@@ -40,7 +40,6 @@ class ConstraintEditor {
     this.from_name = document.getElementById('constraint-from-name');
     this.to_name = document.getElementById('constraint-to-name');
     this.bl_type = document.getElementById('bl-type');
-    this.bl_selectors = document.getElementById('bl-selectors');
     this.soc_direct = document.getElementById('constraint-soc-direct');
     this.soc = document.getElementById('constraint-share-of-cost');
     this.soc_div = document.getElementById('constraint-soc');
@@ -78,25 +77,69 @@ class ConstraintEditor {
         () => CONSTRAINT_EDITOR.addBoundLine());
     this.bl_type.addEventListener('change',
         () => CONSTRAINT_EDITOR.changeLineType());
-    this.bl_selectors.addEventListener('blur',
-        () => CONSTRAINT_EDITOR.changeLineSelectors());
     this.soc.addEventListener('blur',
         () => CONSTRAINT_EDITOR.changeShareOfCost());
+    this.bl_data_btn = document.getElementById('bl-data-btn');
+    this.bl_data_btn.addEventListener('click',
+        () => CONSTRAINT_EDITOR.showBoundLineModal());
     this.delete_bl_btn = document.getElementById('del-bl-btn');
     this.delete_bl_btn.addEventListener('click',
         () => CONSTRAINT_EDITOR.deleteBoundLine());
+    // Prepare the "precise point" dialog.
     this.point_modal = new ModalDialog('boundline-point');
     this.point_modal.ok.addEventListener(
         'click', () => CONSTRAINT_EDITOR.setPointPosition());
     this.point_modal.cancel.addEventListener(
         'click', () => CONSTRAINT_EDITOR.point_modal.hide());
-    // The chart is stored as an SVG string
+    // Also prepare the boundline modal.
+    this.boundline_modal = new ModalDialog('boundline-data');
+    this.boundline_modal.close.addEventListener(
+        'click', () => CONSTRAINT_EDITOR.updateBoundLineProperties());
+    this.boundline_modal.element('edit-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.startEditing());
+    this.boundline_modal.element('save-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.stopEditing(true));
+    this.boundline_modal.element('cancel-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.stopEditing(false));
+    this.boundline_modal.element('url').addEventListener(
+        'blur', () => CONSTRAINT_EDITOR.loadPointData());
+    const bls = this.boundline_modal.element('series');
+    bls.addEventListener('keyup', () => CONSTRAINT_EDITOR.updateLine());
+    bls.addEventListener('click', () => CONSTRAINT_EDITOR.updateLine());
+    // NOTE: Chart should show default line when cursor is not over data.
+    this.boundline_modal.element('series-table').addEventListener(
+        'mouseout', () => CONSTRAINT_EDITOR.showDefaultBoundLine());
+    // Make boundline selector buttons responsive.
+    this.selector_btns = 'bl-rename-sel bl-edit-sel bl-delete-sel';
+    document.getElementById('bl-add-sel-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.promptForSelector());
+    document.getElementById('bl-rename-sel-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.promptForSelector('rename'));
+    document.getElementById('bl-edit-sel-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.editExpression());
+    document.getElementById('bl-delete-sel-btn').addEventListener(
+        'click', () => CONSTRAINT_EDITOR.deleteSelector());
+    // Prepare boundline selector modals.
+    this.new_selector_modal = new ModalDialog('new-selector');
+    this.new_selector_modal.ok.addEventListener(
+        'click', () => CONSTRAINT_EDITOR.newSelector());
+    this.new_selector_modal.cancel.addEventListener(
+        'click', () => CONSTRAINT_EDITOR.new_selector_modal.hide());
+    this.rename_selector_modal = new ModalDialog('rename-selector');
+    this.rename_selector_modal.ok.addEventListener(
+        'click', () => CONSTRAINT_EDITOR.renameSelector());
+    this.rename_selector_modal.cancel.addEventListener(
+        'click', () => CONSTRAINT_EDITOR.rename_selector_modal.hide());
+    // The chart is stored as an SVG string.
     this.svg = '';
-    // Scale, origin X and Y assume a 300x300 px square chart area
+    // The line path and contour path SVG.
+    this.line_path_svg = '';
+    this.contour_path_svg = '';
+    // Scale, origin X and Y assume a 300x300 px square chart area.
     this.scale = 3;
     this.oX = 25;
     this.oY = 315;
-    // 0 => silver, LE => orange/red, GE => cyan/blue, EQ => purple
+    // 0 => silver, LE => orange/red, GE => cyan/blue, EQ => purple.
     this.line_color = ['#a0a0a0', '#c04000', '#0040c0', '#9000a0'];
     // Use brighter shades if selected (darker for gray) 
     this.selected_color = ['#808080', '#ff8040', '#00b0d0', '#a800ff'];
@@ -105,37 +148,41 @@ class ConstraintEditor {
     // Cursor position in chart coordinates (100 x 100 grid)
     this.pos_x = 0;
     this.pos_y = 0;
-    // `on_line`: the first bound line object detected under the cursor
+    // `on_line`: the first bound line object detected under the cursor.
     this.on_line = null;
-    // `on_point`: index of point under the cursor
+    // `on_point`: index of point under the cursor.
     this.on_point = -1;
     this.dragged_point = -1;
     this.selected_point = -1;
+    this.selected_selector = false;
     this.last_time_clicked = 0;
     this.cursor = 'default';
+    // Start in data viewing mode.
+    this.stopEditing(false);
     // Properties for tracking which constraint is being edited.
-    this.edited_constraint = null;
     this.from_node = null;
     this.to_node = null;
-    // The constraint object being edited (either a new instance, or a
-    // copy of edited_constraint).
+    // The constraint (model entity) being added or modified.
+    this.edited_constraint = null;
+    // The constraint object that is being modified: either a new instance,
+    // or a *copy* of edited_constraint so changes can be ignored on "canel".
     this.constraint = null;
     // List of constraints when multiple constraints are edited.
     this.group = [];
+    // Boundline selector expression being edited.
+    this.edited_expression = null;
     // NOTE: All edits will be ignored unless the modeler clicks OK.
   }
   
-  get doubleClicked() {
+  get twoClicks() {
+    // Return TRUE iff two mouse clicks occurred within 300 ms.
     const
         now = Date.now(),
         dt = now - this.last_time_clicked;
     this.last_time_clicked = now;
-    if(this.on_point === this.selected_point) {
-      // Consider click to be "double" if it occurred less than 300 ms ago
-      if(dt < 300) {
-        this.last_time_clicked = 0;
-        return true;
-      }
+    if(dt < 300) {
+      this.last_time_clicked = 0;
+      return true;
     }
     return false;
   }
@@ -162,14 +209,21 @@ class ConstraintEditor {
   
   mouseDown(e) {
     // The onMouseDown response of the constraint editor's graph area.
+    const two = this.twoClicks;
     if(this.adding_point) {
       this.doAddPointToLine();
-    } else if((e.altKey || this.doubleClicked) && this.on_point >= 0) {
-      this.positionPoint();
     } else if(this.on_line) {
+      const
+          same_line = two && this.selected === this.on_line,
+          same_point = two && this.selected_point === this.on_point;
       this.selectBoundLine(this.on_line);
       this.dragged_point = this.on_point;
       this.selected_point = this.on_point;
+      if(this.on_point >= 0 && (e.altKey || same_point)) {
+        this.positionPoint();
+      } else if(this.on_line && (e.altKey || same_line)) {
+        this.showBoundLineModal();
+      }
     } else {
       this.selected = null;
       this.dragged_point = -1;
@@ -334,7 +388,7 @@ class ConstraintEditor {
   }
   
   doAddPointToLine() {
-    // Actually add point to selected line
+    // Actually add point to selected line.
     if(!this.selected) return;
     const
         p = [this.pos_x, this.pos_y],
@@ -342,6 +396,7 @@ class ConstraintEditor {
     let i = 0;
     while(i < lp.length && lp[i][0] < p[0]) i++;
     lp.splice(i, 0, p);
+    this.selected.storePoints();
     this.selected_point = i;
     this.dragged_point = i;
     this.draw();
@@ -355,31 +410,330 @@ class ConstraintEditor {
     if(this.selected && this.selected_point > 0 &&
         this.selected_point < this.selected.points.length - 1) {
       this.selected.points.splice(this.selected_point, 1);
+      this.selected.storePoints();
       this.selected_point = -1;
       this.draw();
     }
   }
     
   changeLineType() {
-    // Changes type of selected boundline
+    // Change type of selected boundline.
     if(this.selected) {
       this.selected.type = parseInt(this.bl_type.value);
       this.draw();
     }
   }
   
-  changeLineSelectors() {
-    // Changes experiment run selectors of selected boundline
+  loadPointData() {
+    const md = this.boundline_modal;
+    let url = md.element('url').value.trim();
+    if(this.selected && url) {
+      FILE_MANAGER.getRemoteData(this.selected, url);
+    }
+  }
+
+  startEditing() {
+    const
+        md = this.boundline_modal,
+        edit_btn = md.element('edit-btn'),
+        save_btn = md.element('save-btn'),
+        cancel_btn = md.element('cancel-btn'),
+        tbl = md.element('series-table'),
+        txt = md.element('series');
+    edit_btn.classList.add('off');
+    save_btn.classList.remove('off');
+    cancel_btn.classList.remove('off');
+    tbl.style.display = 'none';
+    txt.value = this.selected.pointDataString;
+    txt.style.display = 'block';
+    txt.focus();
+    txt.selectionStart = 0;
+    txt.selectionEnd = 0;
+    md.element('line').style.display = 'block';
+    this.updateLine();
+    UI.disableButtons(this.selector_btns);
+  }
+
+  stopEditing(save=false) {
+    if(!this.selected) return;
+    const
+        bl = this.selected,
+        md = this.boundline_modal,
+        edit_btn = md.element('edit-btn'),
+        save_btn = md.element('save-btn'),
+        cancel_btn = md.element('cancel-btn'),
+        tbl = md.element('series-table'),
+        txt = md.element('series');
+    if(save) {
+      bl.unpackPointDataString(txt.value);
+    }
+    edit_btn.classList.remove('off');
+    save_btn.classList.add('off');
+    cancel_btn.classList.add('off');
+    txt.style.display = 'none';
+    md.element('line').style.display = 'none';
+    tbl.innerHTML = this.boundLineDataTable;
+    tbl.style.display = 'block';
+    if(this.selected_selector) {
+      UI.enableButtons(this.selector_btns);
+    } else {
+      UI.disableButtons(this.selector_btns);
+    }
+  }  
+
+  updateLine() {
+    const
+        md = this.boundline_modal,
+        txt = md.element('series'),
+        ln = md.element('line-number'),
+        lc = md.element('line-count');
+    ln.innerHTML = 'line ' + txt.value.substring(0, txt.selectionStart)
+        .split(';').length;
+    lc.innerHTML = 'of ' + txt.value.split(';').length;
+  }
+  
+  get boundLineDataTable() {
+    // Return *inner* HTML for point coordinates table.
+    if(!this.selected) return ;
+    const
+        bl = this.selected,
+        tr = '<tr class="dataset" onmouseover="CONSTRAINT_EDITOR.' +
+         'showDataBoundLine(%N)"><td class="bl-odnr">%N.</td>' +
+         '<td class="bl-od">%D</td></tr>',
+        lines = [tr.replaceAll('%N', 0).replace('%D',
+            bl.pointsDataString + '<span class="grit">(default)</span>')];
+    for(let i = 0; i < bl.point_data.length; i++) {
+      lines.push(tr.replaceAll('%N', i + 1)
+          .replace('%D', bl.point_data[i].join(' ')));
+    }
+    return lines.join('');
+  }
+  
+  get boundLineSelectorTable() {
+    // Return *inner* HTML for the boundline selector table.
+    if(!this.selected) return '';
+    const
+        bl = this.selected,
+        html = [],
+        onclk = ` onclick="CONSTRAINT_EDITOR.selectSelector(event, '');"`;
+    for(let i = 0; i < bl.selectors.length; i++) {
+      const
+          sel = bl.selectors[i],
+          ocr = onclk.replace("''", `'${sel.selector}'`),
+          ss = (sel.selector === this.selected_selector ? ' sel-set' : '');
+      html.push(`<tr id="blstr${i}" class="dataset-modif${ss}">`,
+          '<td class="dataset-selector"');
+      if(i === 0) {
+        html.push(' style="background-color: #e0e0e0; font-style: italic" ',
+            'title="Default line index will be used when no experiment is running"');
+      }
+      let ls = '',
+          rs = '';
+      if(sel.grouping) {
+        ls = '<span class="blpoints">';
+        rs = '</span>';
+      }
+      if(!sel.expression.isStatic) {
+        ls += '<em>';
+        rs = '</em>' + rs;
+      }
+      html.push(ocr.replace("');", "', false);"), '>', sel.selector,
+          '</td><td class="dataset-expression"', ocr, '>',
+          ls, sel.expression.text, rs, '</td></tr>');
+    }
+    return html.join('');
+  }
+  
+  selectSelector(event, id, x=true) {
+    // Select selector, or when double-clicked, edit its expression when
+    // x = TRUE, or the name of the selector when x = FALSE.
+    if(!this.selected) return;
+    const edit = (event.altKey ||
+        (this.twoClicks && id === this.selected_selector));
+    this.selected_selector = id;
+    if(edit) {
+      if(x) {
+        this.editExpression();
+      } else {
+        this.promptForSelector('rename');
+      }
+      return;
+    }
+    this.updateSelectorTable();
+    UI.enableButtons(this.selector_btns);
+    // Do not permit deleting the default selector. 
+    if(id === '(default)') UI.disableButtons('bl-delete-sel');
+  }
+  
+  promptForSelector(dlg) {
+    let ms = '',
+        md = this.new_selector_modal;
+    if(dlg === 'rename') {
+      if(this.selected_selector) ms = this.selected_selector;
+      md = this.rename_selector_modal;
+    }
+    md.element('type').innerText = 'boundline selector';
+    md.element('name').value = ms;
+    md.show('name');
+  }
+
+  newSelector() {
+    if(!this.selected) return;
+    const md = this.new_selector_modal;
+    // NOTE: Selector modal is also used by constraint editor.
+    if(md.element('type').innerText !== 'boundline selector') return;
+    const
+        bl = this.selected,
+        sel = md.element('name').value.trim(),
+        bls = bl.addSelector(sel);
+    if(bls) {
+      this.selected_selector = bls.selector;
+      // NOTE: Update dimensions only if boundline now has 2 or more
+      // selectors.
+      const sl = bl.selectorList;
+      if(sl.length > 1) MODEL.expandDimension(sl);
+      md.hide();
+      this.updateSelectorTable();
+    }
+  }
+  
+  renameSelector() {
+    if(!this.selected) return;
+    const md = this.rename_selector_modal;
+    // NOTE: Selector modal is also used by constraint editor.
+    if(md.element('type').innerText !== 'boundline selector') return;
+    const
+        bl = this.selected,
+        sel = MODEL.validSelector(md.element('name').value.trim()),
+        bls = bl.selectorByName(this.selected_selector);
+    if(bls && sel) {
+      bls.selector = sel;
+      bl.selectors.sort((a, b) => compareSelectors(a.selector, b.selector));
+    }
+    md.hide();
+    this.updateSelectorTable();
+  }
+  
+  editExpression() {
+    if(!this.selected) return;
+    const
+        bl = this.selected,
+        bls = bl.selectorByName(this.selected_selector);
+    if(bls) {
+      this.edited_expression = bls.expression;
+      const md = UI.modals.expression;
+      md.element('property').innerHTML = 'boundline selector';
+      md.element('text').value = bls.expression.text;
+      document.getElementById('variable-obj').value = 0;
+      X_EDIT.updateVariableBar();
+      X_EDIT.clearStatusBar();
+      md.show('text');
+    }
+  }
+
+  modifyExpression(x, grouping) {
+    // Update boundline index expression.
+    if(!this.selected) return;
+    const
+        bl = this.selected,
+        bls = bl.selectorByName(this.selected_selector);
+    if(!bls) return;
+    const blsx = bls.expression;
+    // Double-check that selector expression is indeed being edited.
+    if(blsx !== this.edited_expression) {
+      console.log('ERROR: boundline selector expression mismatch',
+          x, bls, this.edited_expression);
+      return;
+    }
+    bls.grouping = grouping;
+    // Update and compile expression only if it has been changed.
+    if(x != blsx.text) {
+      blsx.text = x;
+      blsx.compile();
+      if(grouping && blsx.isStatic) {
+        // Check whether the point coordinates are valid.
+        const
+            r1 = blsx.result(1),
+            r2 = r1.slice();
+        bls.boundline.validatePoints(r2);
+        if(r1.join(';') !== r2.join(';')) {
+          UI.warn('Points expression for <tt>' + bls.selector +
+              '</tt> will evaluate as ' + r2.join('; '));
+        }
+      }
+    }
+    // Clear expression results, just to be neat.
+    blsx.reset();
+    // Clear the `selected_expression` property of the constraint editor.
+    this.edited_expression = null;
+    this.updateSelectorTable();
+  }
+
+  deleteSelector() {
+    // Delete modifier from selected dataset
+    if(!this.selected) return;
+    const
+        bl = this.selected,
+        bls = this.selected.selectorByName(this.selected_selector);
+    if(bls && bls.selector) {
+      // If it is not the default selector, simply remove it from the list.
+      const i = bl.selectors.indexOf(bls);
+      if(i > 0) bl.selectors.splice(i, 1);
+      this.selected_selector = false;
+      this.updateSelectorTable();
+      MODEL.updateDimensions();
+    }
+  }
+
+  updateSelectorTable() {  
+    this.boundline_modal.element('sel-table')
+        .innerHTML = this.boundLineSelectorTable;
+  }
+
+  showBoundLineModal() {
+    // Open modal to modify data properties of selected boundline.
+    if(!this.selected) return;
+    // Ensure that bound line does not have a selected or dragged point.
+    this.on_point = -1;
+    this.dragged_point = -1;
+    this.selected_point = -1;
+    const
+        bl = this.selected,
+        md = this.boundline_modal;
+    md.element('url').value = bl.url;
+    this.updateSelectorTable();
+    this.stopEditing();
+    md.show();
+  }
+  
+  showDefaultBoundLine() {
+    // Restore and redraw default bound line.
+    if(this.selected) this.selected.restorePoints();
+    this.draw();    
+  }
+  
+  updateBoundLineProperties() {
+    // Change experiment run selectors of selected boundline.
     if(this.selected) {
-      const sel = this.bl_selectors.value.replace(
-          /[\;\,]/g, ' ').trim().replace(
-          /[^a-zA-Z0-9\+\-\%\_\s]/g, '').split(/\s+/).join(' ');
-      this.selected.selectors = sel;
-      this.bl_selectors.value = sel;
-      this.draw();
+      const
+          bl = this.selected,
+          md = this.boundline_modal;
+      bl.url = md.element('url').value;
+      this.showDefaultBoundLine();
+      md.hide();
     }
   }
   
+  showDataBoundLine(index) {
+    // Redraw diagram with selected boundline now having its points based
+    // on data for the given index.
+    if(!this.selected) return;
+    const bl = this.selected;
+    bl.setPointsFromData(index);
+    this.draw();
+    bl.restorePoints();
+  }
+  
   changeShareOfCost() {
     // Validates input of share-of-cost field
     const soc = UI.validNumericInput('constraint-share-of-cost', 'share of cost');
@@ -485,6 +839,8 @@ class ConstraintEditor {
   positionPoint() {
     // Prompt modeler for precise point coordinates.
     if(this.selected_point < 0) return;
+    // Prevent that "drag point" state persists after ESC o cancel.
+    this.dragged_point = -1;
     const
         md = this.point_modal,
         pc = this.point_div.innerHTML.split(', ');
@@ -531,7 +887,7 @@ class ConstraintEditor {
         l = this.selected,
         pi = this.dragged_point,
         lpi = l.points.length - 1;
-    // Check -- just in case
+    // Check -- just in case.
     if(!l || pi < 0 || pi > lpi) return;
     let p = l.points[pi],
         px = p[0],
@@ -540,22 +896,23 @@ class ConstraintEditor {
         maxx = (pi === 0 ? 0 : (pi === lpi ? 100 : l.points[pi + 1][0])),
         newx = Math.min(maxx, Math.max(minx, x)),
         newy = Math.min(100, Math.max(0, y));
-    // No action needed unless point has been moved 
+    // No action needed unless point has been moved.
     if(newx !== px || newy !== py) {
       p[0] = newx;
       p[1] = newy;
+      l.storePoints();
       this.draw();
       this.updateEquation();
     }
   }
 
   updateStatus() {    
-    // Displays cursor position as X and Y (in chart coordinates), and updates
-    // controls.
+    // Display cursor position as X and Y (in chart coordinates), and
+    // update controls.
     this.pos_x_div.innerHTML = 'X = ' + this.pos_x.toPrecision(3);
     this.pos_y_div.innerHTML = 'Y = ' + this.pos_y.toPrecision(3);
     this.point_div.innerHTML = '';
-    const blbtns = 'add-point del-bl';
+    const blbtns = 'add-point bl-data del-bl';
     if(this.selected) {
       if(this.selected_point >= 0) {
         const p = this.selected.points[this.selected_point];
@@ -568,26 +925,20 @@ class ConstraintEditor {
             .replace(/\.$/, '');
         this.point_div.innerHTML = `(${px}, ${py})`;
       }
-      // Check whether selected point is an end point
+      // Check whether selected point is an end point.
       const ep = this.selected_point === 0 ||
           this.selected_point === this.selected.points.length - 1;
-      // If so, do not allow deletion
+      // If so, do not allow deletion.
       UI.enableButtons(blbtns + (ep ? '' : ' del-point'));
       if(this.adding_point) this.add_point_btn.classList.add('activ');
       this.bl_type.value = this.selected.type;
       this.bl_type.style.color = 'black';
       this.bl_type.disabled = false;
-      this.bl_selectors.value = this.selected.selectors;
-      this.bl_selectors.style.backgroundColor = 'white';
-      this.bl_selectors.disabled = false;
     } else {
       UI.disableButtons(blbtns + ' del-point');
       this.bl_type.value = VM.EQ;
       this.bl_type.style.color = 'silver';
       this.bl_type.disabled = true;
-      this.bl_selectors.value = '';
-      this.bl_selectors.style.backgroundColor = 'inherit';
-      this.bl_selectors.disabled = true;
     }
   }
 
@@ -685,11 +1036,18 @@ class ConstraintEditor {
       '100</text>']);
   }
   
-  drawContour(l) {
-    // Draws infeasible area for bound line `l`
+  setContourPath(l) {
+    // Computes the contour path (which is the line path for EQ bounds)
+    // without drawing them in the chart -- used when drawing thumbnails.
+    this.drawContour(l, false);
+    this.drawLine(l, false);
+  }
+
+  drawContour(l, display=true) {
+    // Draws infeasible area for bound line `l`.
     let cp;
     if(l.type === VM.EQ) {
-      // Whole area is infeasible except for the bound line itself
+      // Whole area is infeasible except for the bound line itself.
       cp = ['M', this.point(0, 0), 'L', this.point(100 ,0), 'L',
           this.point(100, 100), 'L', this.point(0, 100), 'z'].join('');
     } else {
@@ -700,9 +1058,10 @@ class ConstraintEditor {
         cp += `L${this.point(p[0], p[1])}`;
       }
       cp += 'L' + this.point(100, base_y) + 'z';
+      // Save the contour for rapid display of thumbnails.
+      l.contour_path = cp;
     }
-    // Save the contour for rapid display of thumbnails
-    l.contour_path = cp;
+    if(!display) return;
     // NOTE: the selected bound lines have their infeasible area filled
     // with a *colored* line pattern
     const sel = l === this.selected;
@@ -711,7 +1070,7 @@ class ConstraintEditor {
         (sel ? 1 : 0.4), '"></path>']);
   }
   
-  drawLine(l) {
+  drawLine(l, display=true) {
     let color,
         width,
         pp = [],
@@ -741,6 +1100,7 @@ class ConstraintEditor {
     // For EQ bound lines, the line path is the contour; this will be
     // drawn in miniature black against a silver background
     if(l.type === VM.EQ) l.contour_path = cp;
+    if(!display) return;
     this.addSVG(['<path fill="none" stroke="', color, '" d="', cp,
       '" stroke-width="', width, '"></path>', dots]);
   }