From 13f1311ed37badb2e6a9a12019350eae8f3aaa5b Mon Sep 17 00:00:00 2001
From: Daniel Drexler <aeturnum@gmail.com>
Date: Mon, 17 Aug 2020 19:52:43 -0700
Subject: [PATCH 1/3]  Various Javascript Quality of Life Improvements

Cleanups:
- Reduced unneeded calls to set callbacks
- tried to reduce amount of redundant code

Fixes:
- Ensure that all nodes and links have callbacks applied
- Links are created with all properties
- Stop graph animating while dragging edge

Changes:
- Newly created nodes are selected for editing
- Slight refactor of reset() function to seperate concerns
- Added boolean to try and stop occasional node creation when clicking
  on lines
---
 static/build.js                  | 395 +++++++++++++++++--------------
 static/polycule.js               | 159 +++++++------
 templates/create_polycule.jinja2 |   1 +
 templates/edit_polycule.jinja2   |   1 +
 4 files changed, 300 insertions(+), 256 deletions(-)

diff --git a/static/build.js b/static/build.js
index 2f212ed..05b0a85 100644
--- a/static/build.js
+++ b/static/build.js
@@ -1,38 +1,176 @@
 'use strict';
 
+function resetMenus() {
+  d3.select('#node-menu').style('display', 'none');
+  d3.select('#link-menu').style('display', 'none');
+}
+
+function closeEditMenu() {
+  selected_link = null;
+  selected_node = null;
+  editing = false;
+  resetMenus();
+}
+
+function linkName(link) {
+  return `[${link.source.name}]->[${link.target.name}]`;
+}
+
+function changeElement(target_list, target_element, f) {
+  var elements = target_list.filter(function (element) {
+    return element === target_element;
+  });
+
+  if (elements.length === 1) {
+    f(elements[0]);
+  }
+
+  startGraphAnimation();
+  return elements.length === 1;
+}
+
+function changeNode(target_node, f) {
+  var success = changeElement(window.graph.nodes, target_node, f)
+  if (!success) {
+    console.log(`Failed to find node ${target_node.name}!`);
+  }
+}
+
+function changeLink(target_link, f) {
+  var success = changeElement(window.graph.links, target_link, f)
+  if (!success) {
+    console.log(`Failed to find link ${linkName(target_link)}!`);
+  }
+}
+
+function editNode(d) {
+  d3.select('#link-menu').style('display', 'none');
+  var nodeMenu = d3.select('#node-menu');
+  nodeMenu.style('display', 'block');
+  document.getElementById('edit-node-name').value = d.name;
+  nodeMenu.select('#edit-node-name')
+    .on('keyup', function () {
+      changeNode(d, (n) => n.name = this.value);
+    });
+  document.getElementById('edit-node-r').value = d.r;
+  nodeMenu.select('#edit-node-r')
+    .on('input', function () {
+      changeNode(d, (n) => n.r = this.value);
+    });
+  document.getElementById('edit-node-dashed').checked = d.dashed;
+  nodeMenu.select('#edit-node-dashed')
+    .on('change', function () {
+      changeNode(d, (n) => n.dashed = d3.select(this).property('checked'));
+    });
+  nodeMenu.select('#delete-node')
+    .on('click', function () {
+      if (selected_node) {
+        window.graph.nodes
+          .splice(window.graph.nodes.indexOf(selected_node), 1);
+        spliceLinksForNode(selected_node);
+      }
+      closeEditMenu();
+      startGraphAnimation();
+    });
+}
+
+function editLink(d) {
+  d3.select('#node-menu').style('display', 'none');
+  var linkMenu = d3.select('#link-menu');
+  linkMenu.style('display', 'block');
+  linkMenu.select('#link-name').text(linkName(d));
+  linkMenu.select('#source-name').text(d.source.name);
+  linkMenu.select('#target-name').text(d.target.name);
+  linkMenu.select('#edit-center-text')
+    .attr('value', d.centerText ? d.centerText : '')
+    .on('keyup', function () {
+      changeLink(d, (l) => l.centerText = this.value);
+    });
+  linkMenu.select('#edit-source-text')
+    .attr('value', d.sourceText ? d.sourceText : '')
+    .on('keyup', function () {
+      changeLink(d, (l) => l.sourceText = this.value);
+    });
+  linkMenu.select('#edit-target-text')
+    .attr('value', d.targetText ? d.targetText : '')
+    .on('keyup', function () {
+      changeLink(d, (l) => l.targetText = this.value);
+    });
+  linkMenu.select('#edit-strength')
+    .attr('value', d.strength)
+    .on('input', function () {
+      changeLink(d, (l) => l.strength = this.value);
+    });
+  linkMenu.select('#edit-link-dashed')
+    .property('checked', d.dashed)
+    .on('change', function () {
+      changeLink(d, (l) => l.dashed = d3.select(this).property('checked'));
+    });
+  linkMenu.select('#delete-link')
+    .on('click', function () {
+      if (selected_link) {
+        window.graph.links
+          .splice(window.graph.links.indexOf(selected_link), 1);
+      }
+      closeEditMenu();
+      startGraphAnimation();
+    });
+}
+
+function selectElement(target) {
+  if (target === selected_link || target === selected_node) {
+    // de-select
+    closeEditMenu();
+    return;
+  }
+
+  editing = true;
+  if ('name' in target) { // selecting a node
+    selected_link = null;
+    selected_node = target;
+    editNode(target);
+  } else {
+    selected_link = target;
+    selected_node = null;
+    editLink(target);
+  }
+}
+
 function attachEvents() {
   node
-    .on('mouseover', function(d) {
-      if (!mousedown_node || d === mousedown_node) {
-        return;
+    .on('mouseover', function (d) {
+      // enlarge target node for link
+      if (mousedown_node) {
+        if (d === mousedown_node) {
+          return;
+        }
+        d3.select(this)
+          .attr('transform', d3.select(this).attr('transform') + ' scale(1.1)');
       }
-      // enlarge target node
-      d3.select(this)
-        .attr('transform', d3.select(this).attr('transform') + ' scale(1.1)');
+
     })
-    .on('mouseout', function(d) {
-      if (!mousedown_node || d === mousedown_node) {
-        return;
+    .on('mouseout', function (d) {
+      if (mousedown_node) {
+        if (d === mousedown_node) {
+          return;
+        }
+        // unenlarge target node for link
+        d3.select(this)
+          .attr('transform',
+            d3.select(this).attr('transform').replace(' scale(1.1)', ''));
       }
-      // unenlarge target node
-      d3.select(this)
-        .attr('transform',
-          d3.select(this).attr('transform').replace(' scale(1.1)', ''));
     })
-    .on('mousedown', function(d) {
+    .on('mousedown', function (d) {
       if (d3.event.ctrlKey) {
         return;
       }
 
-      // select node
+      // save mousedown_node for later handling on mouseup and
       mousedown_node = d;
-      if (mousedown_node === selected_node) {
-        selected_node = null;
-      }
-      else selected_node = mousedown_node;
-      selected_link = null;
 
-      // reposition drag line
+      // stop graph moving while we are dragging
+      stopGraphAnimation();
+      // reset drag line to be centered on mousedown_node
       drag_line
         .classed('hidden', false)
         .attr({
@@ -42,10 +180,10 @@ function attachEvents() {
           'y2': mousedown_node.y
         });
 
-      restart();
-      attachEvents()
+      // restart();
+      // attachEvents()
     })
-    .on('mouseup', function(d) {
+    .on('mouseup', function (d) {
       if (!mousedown_node) {
         return;
       }
@@ -55,50 +193,39 @@ function attachEvents() {
         .classed('hidden', true)
         .style('marker-end', '');
 
-      // check for drag-to-self
-      mouseup_node = d;
-      if (mouseup_node === mousedown_node) {
-        editing = true;
-        editNode(d);
-        resetMouseVars();
-        return;
+      // are we making a new link or clicking on a new node?
+      if (d === mousedown_node) {
+        // we clicked on a node to edit it
+        selectElement(d);
+      } else {
+        // shrink down the node we just moused over
+        d3.select(this).attr('transform', '');
+        // NB: links are strictly source < target; arrows separately specified by booleans
+        // create and then select new link
+        selectElement(addLink(mousedown_node, d));
       }
 
-      // unenlarge target node
-      d3.select(this).attr('transform', '');
-
-      // add link to graph (update if exists)
-      // NB: links are strictly source < target; arrows separately specified by booleans
-      var source, target,
-          source = mousedown_node;
-          target = mouseup_node;
-
-      var link = addLink(source, target)
-
-      // select new link
-      selected_link = link;
-      selected_node = null;
-      restart();
-      attachEvents();
+      resetMouseVars();
+      startGraphAnimation();
     });
 
   path
-    .on('mousedown', function(d) {
+    .on('mousedown', function (l) {
       if (d3.event.ctrlKey) {
         return;
       }
 
       // select link
-      mousedown_link = d;
-      if (mousedown_link === selected_link) {
-        selected_link = null;
-      } else {
-        selected_link = mousedown_link;
-      }
-      selected_node = null;
-      editLink(d);
+      selectElement(l);
       resetMouseVars();
-      restart();
+    })
+    .on('mouseover', function (l) {
+      console.log(`mouseover${linkName(l)}`);
+      mouse_over_link = true;
+    })
+    .on('mouseout', function (l) {
+      console.log(`mouseout${linkName(l)}`);
+      mouse_over_link = false;
     });
 }
 
@@ -108,20 +235,17 @@ function resetMouseVars() {
   mousedown_link = null;
 }
 
-function resetMenus() {
-  d3.select('#node-menu').style('display', 'none');
-  d3.select('#link-menu').style('display', 'none');
-}
+
 
 function writeGraph() {
   d3.select('#graph-field').html(JSON.stringify(window.graph));
 }
 
 function spliceLinksForNode(node) {
-  var toSplice = window.graph.links.filter(function(l) {
+  var toSplice = window.graph.links.filter(function (l) {
     return (l.source === node || l.target === node);
   });
-  toSplice.map(function(l) {
+  toSplice.map(function (l) {
     window.graph.links.splice(window.graph.links.indexOf(l), 1);
   });
 }
@@ -133,16 +257,15 @@ function mousedown() {
   // because :active only works in WebKit?
   svg.classed('active', true);
 
-  if (d3.event.ctrlKey || d3.event.target.nodeName !== 'svg') {
+  if (d3.event.ctrlKey || d3.event.target.nodeName !== 'svg' || mouse_over_link) {
     return;
   }
 
   // insert new node at point
   var point = d3.mouse(this)
-  addNode(point);
+  selectElement(addNode(point));
 
-  restart();
-  attachEvents();
+  startGraphAnimation();
 }
 
 function addNode(point) {
@@ -158,25 +281,36 @@ function addNode(point) {
     newNode.y = point[1];
   }
   window.graph.nodes.push(newNode);
+
+  indexNodesAndLinks();
+  attachEvents();
   return newNode;
 }
 
 function addLink(source, target) {
-  var link = window.graph.links.filter(function(l) {
+  console.log(`addLink(${source.name}, ${target.name})`)
+  var link = window.graph.links.filter(function (l) {
     return (l.source === source && l.target === target) ||
       (l.source === target && l.target === source);
   })[0];
 
-  if (link) {
-    return link;
-  } else {
+  if (!link) {
     link = {
       source: source,
       target: target,
-      strength: 10
+      strength: 10,
+      dashed: false,
+      targetText: "",
+      sourceText: "",
+      centerText: ""
     };
     window.graph.links.push(link);
+
+    indexNodesAndLinks();
+    attachEvents();
   }
+
+  return link;
 }
 
 function mousemove() {
@@ -193,9 +327,6 @@ function mousemove() {
       'x2': point[0],
       'y2': point[1]
     });
-
-  attachEvents();
-  restart();
 }
 
 function mouseup() {
@@ -214,6 +345,7 @@ function mouseup() {
 
   // clear mouse event vars
   resetMouseVars();
+  startGraphAnimation();
 }
 
 // only respond once per keydown
@@ -226,7 +358,7 @@ function keydown() {
   lastKeyDown = d3.event.keyCode;
 
   // ctrl
-  if(d3.event.keyCode === 17) {
+  if (d3.event.keyCode === 17) {
     node.call(force.drag);
     svg.classed('ctrl', true);
   }
@@ -244,123 +376,21 @@ function keyup() {
   }
 }
 
-function editNode(d) {
-  d3.select('#link-menu').style('display', 'none');
-  var nodeMenu = d3.select('#node-menu');
-  nodeMenu.style('display', 'block');
-  document.getElementById('edit-node-name').value = d.name;
-  nodeMenu.select('#edit-node-name')
-    .on('keyup', function() {
-      window.graph.nodes.filter(function(node) {
-        return node === d;
-      })[0].name = this.value;
-      restart();
-    });
-  document.getElementById('edit-node-r').value = d.r;
-  nodeMenu.select('#edit-node-r')
-    .on('input', function() {
-      window.graph.nodes.filter(function(node) {
-        return node.id === d.id;
-      })[0].r = this.value;
-      restart();
-    });
-  document.getElementById('edit-node-dashed').checked = d.dashed;
-  nodeMenu.select('#edit-node-dashed')
-    .on('change', function() {
-      window.graph.nodes.filter(function(link) {
-        return link === d;
-      })[0].dashed = d3.select(this).property('checked');
-      restart();
-    });
-  nodeMenu.select('#delete-node')
-    .on('click', function() {
-      if (selected_node) {
-        window.graph.nodes
-          .splice(window.graph.nodes.indexOf(selected_node), 1);
-        spliceLinksForNode(selected_node);
-      }
-      selected_link = null;
-      selected_node = null;
-      restart();
-      attachEvents();
-      nodeMenu.style('display', 'none');
-    });
-}
-
-function editLink(d) {
-  d3.select('#node-menu').style('display', 'none');
-  var linkMenu = d3.select('#link-menu');
-  linkMenu.style('display', 'block');
-  linkMenu.select('#source-name').text(d.source.name);
-  linkMenu.select('#target-name').text(d.target.name);
-  linkMenu.select('#edit-center-text')
-    .attr('value', d.centerText ? d.centerText : '')
-    .on('keyup', function() {
-      window.graph.links.filter(function(link) {
-        return link === d;
-      })[0].centerText = this.value;
-      restart();
-    });
-  linkMenu.select('#edit-source-text')
-    .attr('value', d.sourceText ? d.sourceText : '')
-    .on('keyup', function() {
-      window.graph.links.filter(function(link) {
-        return link === d;
-      })[0].sourceText = this.value;
-      restart();
-    });
-  linkMenu.select('#edit-target-text')
-    .attr('value', d.targetText ? d.targetText : '')
-    .on('keyup', function() {
-      window.graph.links.filter(function(link) {
-        return link === d;
-      })[0].targetText = this.value;
-      restart();
-    });
-  linkMenu.select('#edit-strength')
-    .attr('value', d.strength)
-    .on('input', function() {
-      window.graph.links.filter(function(link) {
-        return link === d;
-      })[0].strength = this.value;
-      restart();
-    });
-  linkMenu.select('#edit-link-dashed')
-    .property('checked', d.dashed)
-    .on('change', function() {
-      window.graph.links.filter(function(link) {
-        return link === d;
-      })[0].dashed = d3.select(this).property('checked');
-      restart();
-    });
-  linkMenu.select('#delete-link')
-    .on('click', function() {
-      if (selected_link) {
-        window.graph.links
-          .splice(window.graph.links.indexOf(selected_link), 1);
-      }
-      selected_link = null;
-      selected_node = null;
-      restart();
-      attachEvents();
-      linkMenu.style('display', 'none');
-    });
-}
 
 function addTemplate(template) {
   var parts = template.split(';');
   var nodes = parts[0].split(',');
   var links = parts[1].split(',');
   var builtNodes = {};
-  nodes.forEach(function(d) {
+  nodes.forEach(function (d) {
     builtNodes[d] = addNode(null);
   });
-  links.forEach(function(d) {
+  links.forEach(function (d) {
     var linkParts = d.split('-');
     addLink(builtNodes[linkParts[0]], builtNodes[linkParts[1]]);
   })
 
-  restart();
+  startGraphAnimation();
   attachEvents();
 }
 
@@ -370,8 +400,9 @@ panel.on('mousedown', mousedown)
 d3.select(window)
   .on('keydown', keydown)
   .on('keyup', keyup);
-d3.select('.expand-help').on('click', function(e) {
+d3.select('.expand-help').on('click', function (e) {
   d3.event.preventDefault();
   var body = d3.select('.instructions .body');
   body.classed('hidden', !body.classed('hidden'));
 });
+attachEvents();
\ No newline at end of file
diff --git a/static/polycule.js b/static/polycule.js
index de199e8..cfb2be2 100644
--- a/static/polycule.js
+++ b/static/polycule.js
@@ -1,16 +1,17 @@
 'use strict';
 
 // set up SVG for D3
-var width  = 960,
-    height = 500,
-    selected_node = null,
-    selected_link = null,
-    mousedown_link = null,
-    mousedown_node = null,
-    mouseup_node = null,
-    editing = false,
-    scale = window.graph.scale || 1,
-    translate = window.graph.translate || [0, 0];
+var width = 960,
+  height = 500,
+  selected_node = null,
+  selected_link = null,
+  mousedown_link = null,
+  mousedown_node = null,
+  mouseup_node = null,
+  mouse_over_link = false,
+  editing = false,
+  scale = window.graph.scale || 1,
+  translate = window.graph.translate || [0, 0];
 
 var panel = d3.select('#panel')
   .attr('oncontextmenu', 'return false;')
@@ -26,7 +27,7 @@ function zoom(newScale) {
   var oldscale = scale;
   scale += newScale;
   window.graph.scale = scale;
-  scaleContainer.attr('transform',  'scale(' + scale + ')');
+  scaleContainer.attr('transform', 'scale(' + scale + ')');
 
   translate = [
     translate[0] + ((width * oldscale) - (width * scale)),
@@ -56,10 +57,10 @@ function pan(vert, horiz) {
     //
   }
 }
-  
 
-window.graph.links.forEach(function(link) {
-  window.graph.nodes.forEach(function(node) {
+
+window.graph.links.forEach(function (link) {
+  window.graph.nodes.forEach(function (node) {
     if (node.id === link.source.id) {
       link.source = node;
     }
@@ -70,38 +71,38 @@ window.graph.links.forEach(function(link) {
 });
 
 d3.select('#in')
-  .on('click', function() {
+  .on('click', function () {
     zoom(0.1);
   });
 d3.select('#out')
-  .on('click', function() {
+  .on('click', function () {
     zoom(-0.1);
   });
 d3.select('#up')
-  .on('click', function() {
+  .on('click', function () {
     pan(10, 0);
   });
 d3.select('#down')
-  .on('click', function() {
+  .on('click', function () {
     pan(-10, 0);
   });
 d3.select('#left')
-  .on('click', function() {
+  .on('click', function () {
     pan(0, 10);
   });
 d3.select('#right')
-  .on('click', function() {
+  .on('click', function () {
     pan(0, -10);
   });
 
 // init D3 force layout
 var force = d3.layout.force()
-    .nodes(window.graph.nodes)
-    .links(window.graph.links)
-    .size([width / scale, height / scale])
-    .linkDistance(function(d) { return Math.log(3 / d.strength * 10) * 50; })
-    .charge(-500)
-    .on('tick', tick)
+  .nodes(window.graph.nodes)
+  .links(window.graph.links)
+  .size([width / scale, height / scale])
+  .linkDistance(function (d) { return Math.log(3 / d.strength * 10) * 50; })
+  .charge(-500)
+  .on('tick', tick)
 
 
 // line displayed when dragging new nodes
@@ -110,7 +111,7 @@ var drag_line = svg.append('line')
 
 // handles to link and node element groups
 var path = svg.append('g').selectAll('.link'),
-    node = svg.append('g').selectAll('.node');
+  node = svg.append('g').selectAll('.node');
 
 // update force layout (called automatically each iteration)
 function tick() {
@@ -118,49 +119,49 @@ function tick() {
     return;
   }
   path.select('line')
-    .attr('x1', function(d) { return d.source.x; })
-    .attr('y1', function(d) { return d.source.y; })
-    .attr('x2', function(d) { return d.target.x; })
-    .attr('y2', function(d) { return d.target.y; })
+    .attr('x1', function (d) { return d.source.x; })
+    .attr('y1', function (d) { return d.source.y; })
+    .attr('x2', function (d) { return d.target.x; })
+    .attr('y2', function (d) { return d.target.y; })
   path.select('.source-text')
-    .attr('dx', function(d) { return d.source.x})
-    .attr('dy', function(d) { return d.source.y + d.source.r * 2});
+    .attr('dx', function (d) { return d.source.x })
+    .attr('dy', function (d) { return d.source.y + d.source.r * 2 });
   path.select('.target-text')
-    .attr('dx', function(d) { return d.target.x})
-    .attr('dy', function(d) { return d.target.y + d.target.r * 2});
+    .attr('dx', function (d) { return d.target.x })
+    .attr('dy', function (d) { return d.target.y + d.target.r * 2 });
   path.select('.center-text')
-    .attr('dx', function(d) {
-        return (d.source.x + ((d.target.x - d.source.x) / 2));
+    .attr('dx', function (d) {
+      return (d.source.x + ((d.target.x - d.source.x) / 2));
     })
-    .attr('dy', function(d) {
-        return (d.source.y + ((d.target.y - d.source.y) / 2)) - 10;
+    .attr('dy', function (d) {
+      return (d.source.y + ((d.target.y - d.source.y) / 2)) - 10;
     });
-  node.attr('transform', function(d) {
+  node.attr('transform', function (d) {
     return 'translate(' + d.x + ',' + d.y + ')';
   });
 }
 
-// update graph (called when needed)
-function restart() {
+// (re)build graph (called when needed)
+function indexNodesAndLinks() {
   // path (link) group
   path = path.data(window.graph.links);
 
   // update existing links
-  path.classed('selected', function(d) { return d === selected_link; });
+  path.classed('selected', function (d) { return d === selected_link; });
 
 
   // add new links
   var pathG = path.enter()
     .append('g')
     .classed('link', true)
-    .classed('selected', function(d) { return d === selected_link; });
+    .classed('selected', function (d) { return d === selected_link; });
   pathG.append('line')
-    .attr('x1', function(d) { return d.source.x; })
-    .attr('y1', function(d) { return d.source.y; })
-    .attr('x2', function(d) { return d.target.x; })
-    .attr('y2', function(d) { return d.target.y; })
-    .attr('stroke-width', function(d) { return d.strength; })
-    .attr('stroke-dasharray', function(d) {
+    .attr('x1', function (d) { return d.source.x; })
+    .attr('y1', function (d) { return d.source.y; })
+    .attr('x2', function (d) { return d.target.x; })
+    .attr('y2', function (d) { return d.target.y; })
+    .attr('stroke-width', function (d) { return d.strength; })
+    .attr('stroke-dasharray', function (d) {
       if (d.dashed) {
         return '' + [d.strength / 1.5, d.strength / 1.5];
       }
@@ -175,30 +176,30 @@ function restart() {
   path.exit().remove();
 
   path.select('line')
-    .attr('stroke-width', function(d) { return d.strength; })
-    .attr('stroke-dasharray', function(d) {
+    .attr('stroke-width', function (d) { return d.strength; })
+    .attr('stroke-dasharray', function (d) {
       if (d.dashed) {
         return '' + [d.strength / 1.5, d.strength / 1.5];
       }
     });
   path.select('.center-text')
-    .text(function(d) { return d.centerText; });
+    .text(function (d) { return d.centerText; });
   path.select('.source-text')
-    .text(function(d) { return d.sourceText; });
+    .text(function (d) { return d.sourceText; });
   path.select('.target-text')
-    .text(function(d) { return d.targetText; });
-  path.on('mouseover', function(d) {
-      d3.select(this).selectAll('.meaning')
-        .classed('hidden', false);
-    })
-    .on('mouseout', function(d) {
+    .text(function (d) { return d.targetText; });
+  path.on('mouseover', function (d) {
+    d3.select(this).selectAll('.meaning')
+      .classed('hidden', false);
+  })
+    .on('mouseout', function (d) {
       d3.select(this).selectAll('.meaning')
         .classed('hidden', true);
     });
 
   // circle (node) group
   // NB: the function arg is crucial here! nodes are known by id, not by index!
-  node = node.data(window.graph.nodes, function(d) { return d.id; });
+  node = node.data(window.graph.nodes, function (d) { return d.id; });
 
   // add new nodes
   var nodeG = node.enter()
@@ -207,13 +208,13 @@ function restart() {
 
   nodeG.append('circle')
     .attr('class', 'node')
-    .attr('r', function(d) { return d.r; })
-    .attr('style', function(d) {
+    .attr('r', function (d) { return d.r; })
+    .attr('style', function (d) {
       if (d.dashed) {
         return 'fill:#ccc!important';
       }
     })
-    .attr('stroke-dasharray', function(d) {
+    .attr('stroke-dasharray', function (d) {
       if (d.dashed) {
         return '' + [d.r / 4, d.r / 4];
       }
@@ -222,40 +223,50 @@ function restart() {
   // show node IDs
   nodeG.append('text')
     .attr('x', 0)
-    .attr('y', function(d) { return -d.r - 2; })
+    .attr('y', function (d) { return -d.r - 2; })
     .attr('class', 'id')
     .attr('text-anchor', 'middle')
-    .text(function(d) { return d.name; });
+    .text(function (d) { return d.name; });
 
   node.select('circle')
-    .attr('r', function(d) { return d.r; })
-    .attr('style', function(d) {
+    .attr('r', function (d) { return d.r; })
+    .attr('style', function (d) {
       if (d.dashed) {
         return 'fill:#ccc!important';
       }
     })
-    .attr('stroke-dasharray', function(d) {
+    .attr('stroke-dasharray', function (d) {
       if (d.dashed) {
         return '' + [d.r / 4, d.r / 4];
       }
     });
 
   node.select('.id')
-    .attr('y', function(d) { return -d.r - 2; })
-    .text(function(d) { return d.name; });
+    .attr('y', function (d) { return -d.r - 2; })
+    .text(function (d) { return d.name; });
 
   // remove old nodes
   node.exit().remove();
+}
+
+function startGraphAnimation() {
+  // rebuild nodes and links
+  indexNodesAndLinks();
 
   // set the graph in motion
   force.start();
   try {
     writeGraph();
-  } catch(e) {
+  } catch (e) {
     node.call(force.drag);
   }
 }
-    
+
+// stop graph moving automatically
+function stopGraphAnimation() {
+  force.stop();
+}
+
 function panzoom() {
   d3.event.preventDefault()
   switch (d3.event.key) {
@@ -292,4 +303,4 @@ d3.select(window)
   .on('keydown', panzoom);
 
 // app starts here
-restart();
+startGraphAnimation();
\ No newline at end of file
diff --git a/templates/create_polycule.jinja2 b/templates/create_polycule.jinja2
index bfcae71..dcfb43e 100644
--- a/templates/create_polycule.jinja2
+++ b/templates/create_polycule.jinja2
@@ -35,6 +35,7 @@
         <p>Delete: <button id="delete-node">Delete node</button></p>
     </div>
     <div id="link-menu" class="menu">
+        <p>Link <span id="link-name"></span></p>
         <p>Center text: <input type="text" id="edit-center-text" /></p>
         <p>Text near <span id="source-name"></span>: <input type="text" id="edit-source-text" /></p>
         <p>Text near <span id="target-name"></span>: <input type="text" id="edit-target-text" /></p>
diff --git a/templates/edit_polycule.jinja2 b/templates/edit_polycule.jinja2
index 03be8a3..ec40315 100644
--- a/templates/edit_polycule.jinja2
+++ b/templates/edit_polycule.jinja2
@@ -35,6 +35,7 @@
         <p>Delete: <button id="delete-node">Delete node</button></p>
     </div>
     <div id="link-menu" class="menu">
+        <p>Link <span id="link-name"></span></p>
         <p>Center text: <input type="text" id="edit-center-text" /></p>
         <p>Text near <span id="source-name"></span>: <input type="text" id="edit-source-text" /></p>
         <p>Text near <span id="target-name"></span>: <input type="text" id="edit-target-text" /></p>

From 00e97b8d30f795cba9c1d0200f940f67397ca0d7 Mon Sep 17 00:00:00 2001
From: Daniel Drexler <aeturnum@gmail.com>
Date: Mon, 24 Aug 2020 16:33:54 -0700
Subject: [PATCH 2/3] Change to a change detection system

- Add Node and Link objects to centralize drawing code
- Add small system to detect changes and trigger paints
- Generally make expanding code easier in the future
- Move selection coloring into code as opposed to css
---
 static/build.js    | 386 ++++++++++++++--------------------
 static/polycule.js | 504 +++++++++++++++++++++++++++++++--------------
 static/style.css   |   2 -
 3 files changed, 500 insertions(+), 392 deletions(-)

diff --git a/static/build.js b/static/build.js
index 05b0a85..6e3bee7 100644
--- a/static/build.js
+++ b/static/build.js
@@ -12,65 +12,123 @@ function closeEditMenu() {
   resetMenus();
 }
 
-function linkName(link) {
-  return `[${link.source.name}]->[${link.target.name}]`;
+function selectElement(target) {
+  trigger_repaint_style();
+  if (target === selected_link || target === selected_node) {
+    // de-select
+    closeEditMenu();
+  } else {
+    editing = true;
+    if (target instanceof Node) { // selecting a node
+      selected_link = null;
+      selected_node = target;
+      editNode(target);
+    } else {
+      selected_link = target;
+      selected_node = null;
+      editLink(target);
+    }
+  }
 }
 
-function changeElement(target_list, target_element, f) {
-  var elements = target_list.filter(function (element) {
-    return element === target_element;
-  });
+function resetMouseVars() {
+  mousedown_node = null;
+}
 
-  if (elements.length === 1) {
-    f(elements[0]);
+// d3 events
+Link.addEvents({
+  mousedown: function (l) {
+    if (d3.event.ctrlKey) {
+      return;
+    }
+
+    // select link
+    selectElement(l);
+    resetMouseVars();
   }
+});
 
-  startGraphAnimation();
-  return elements.length === 1;
-}
+Node.addEvents({
+  mouseover: function (d) {
+    // enlarge target node for link
+    if (mousedown_node && d != mousedown_node) {
+      d.setScale(1.1);
+    }
+
+  },
+  mouseout: function (d) {
+    if (mousedown_node && d != mousedown_node) {
+      // unenlarge target node for link
+      d.setScale(1);
+    }
+  },
+  mousedown: function (d) {
+    if (d3.event.ctrlKey) {
+      return;
+    }
+
+    // save mousedown_node for later handling on mouseup and
+    mousedown_node = d;
+
+    // reset drag line to be centered on mousedown_node
+    drag_line
+      .classed('hidden', false)
+      .attr({
+        'x1': mousedown_node.x,
+        'y1': mousedown_node.y,
+        'x2': mousedown_node.x,
+        'y2': mousedown_node.y
+      });
+
+  },
+  mouseup: function (d) {
+    if (!mousedown_node) {
+      return;
+    }
+
+    // needed by FF
+    drag_line
+      .classed('hidden', true)
+      .style('marker-end', '');
 
-function changeNode(target_node, f) {
-  var success = changeElement(window.graph.nodes, target_node, f)
-  if (!success) {
-    console.log(`Failed to find node ${target_node.name}!`);
+    // are we making a new link or clicking on a new node?
+    if (d === mousedown_node) {
+      // we clicked on a node to edit it
+      selectElement(d);
+    } else {
+      // shrink down the node we just moused over
+      d.setScale(1);
+      // create and then select new link
+      selectElement(createLink(mousedown_node, d));
+    }
+
+    resetMouseVars();
+    startGraphAnimation();
   }
-}
+});
 
-function changeLink(target_link, f) {
-  var success = changeElement(window.graph.links, target_link, f)
-  if (!success) {
-    console.log(`Failed to find link ${linkName(target_link)}!`);
-  }
-}
 
 function editNode(d) {
+  // hide link menu
   d3.select('#link-menu').style('display', 'none');
   var nodeMenu = d3.select('#node-menu');
   nodeMenu.style('display', 'block');
-  document.getElementById('edit-node-name').value = d.name;
+  // We wish we could use arrow functions here but they don't have a semantic this
   nodeMenu.select('#edit-node-name')
-    .on('keyup', function () {
-      changeNode(d, (n) => n.name = this.value);
-    });
-  document.getElementById('edit-node-r').value = d.r;
+    .property('value', d.name)
+    .on('keyup', function () { d.name = this.value; });
   nodeMenu.select('#edit-node-r')
-    .on('input', function () {
-      changeNode(d, (n) => n.r = this.value);
-    });
-  document.getElementById('edit-node-dashed').checked = d.dashed;
+    .property('value', d.r)
+    .on('input', function () { d.r = this.value; });
   nodeMenu.select('#edit-node-dashed')
-    .on('change', function () {
-      changeNode(d, (n) => n.dashed = d3.select(this).property('checked'));
-    });
+    .property('value', d.dashed)
+    .on('change', function () { d.dashed = d3.select(this).property('checked') });
   nodeMenu.select('#delete-node')
     .on('click', function () {
       if (selected_node) {
-        window.graph.nodes
-          .splice(window.graph.nodes.indexOf(selected_node), 1);
-        spliceLinksForNode(selected_node);
+        removeNode(selected_node);
       }
       closeEditMenu();
-      startGraphAnimation();
     });
 }
 
@@ -78,178 +136,90 @@ function editLink(d) {
   d3.select('#node-menu').style('display', 'none');
   var linkMenu = d3.select('#link-menu');
   linkMenu.style('display', 'block');
-  linkMenu.select('#link-name').text(linkName(d));
+  linkMenu.select('#link-name').text(d.name());
   linkMenu.select('#source-name').text(d.source.name);
   linkMenu.select('#target-name').text(d.target.name);
   linkMenu.select('#edit-center-text')
-    .attr('value', d.centerText ? d.centerText : '')
-    .on('keyup', function () {
-      changeLink(d, (l) => l.centerText = this.value);
-    });
+    .property('value', d.centerText)
+    .on('keyup', function () { d.centerText = this.value; });
   linkMenu.select('#edit-source-text')
-    .attr('value', d.sourceText ? d.sourceText : '')
-    .on('keyup', function () {
-      changeLink(d, (l) => l.sourceText = this.value);
-    });
+    .property('value', d.sourceText)
+    .on('keyup', function () { d.sourceText = this.value; });
   linkMenu.select('#edit-target-text')
-    .attr('value', d.targetText ? d.targetText : '')
-    .on('keyup', function () {
-      changeLink(d, (l) => l.targetText = this.value);
-    });
+    .property('value', d.targetText)
+    .on('keyup', function () { d.targetText = this.value; });
   linkMenu.select('#edit-strength')
-    .attr('value', d.strength)
-    .on('input', function () {
-      changeLink(d, (l) => l.strength = this.value);
-    });
+    .property('value', d.strength)
+    .on('input', function () { d.strength = this.value; });
   linkMenu.select('#edit-link-dashed')
     .property('checked', d.dashed)
-    .on('change', function () {
-      changeLink(d, (l) => l.dashed = d3.select(this).property('checked'));
+    .on('click', function () {
+      d.dashed = d3.select(this).property('checked');
     });
   linkMenu.select('#delete-link')
     .on('click', function () {
       if (selected_link) {
-        window.graph.links
-          .splice(window.graph.links.indexOf(selected_link), 1);
+        removeLink(selected_link);
       }
       closeEditMenu();
-      startGraphAnimation();
     });
 }
 
-function selectElement(target) {
-  if (target === selected_link || target === selected_node) {
-    // de-select
-    closeEditMenu();
-    return;
-  }
+// Node and Link creation and destruction methods
 
-  editing = true;
-  if ('name' in target) { // selecting a node
-    selected_link = null;
-    selected_node = target;
-    editNode(target);
-  } else {
-    selected_link = target;
-    selected_node = null;
-    editLink(target);
-  }
+function createNode(point) {
+  let node = style_repaint_on_set(new Node(++window.graph.lastId, point), node_props_updated_by_tick);
+  window.graph.nodes.push(node);
+  trigger_full_repaint();
+  return node;
 }
 
-function attachEvents() {
-  node
-    .on('mouseover', function (d) {
-      // enlarge target node for link
-      if (mousedown_node) {
-        if (d === mousedown_node) {
-          return;
-        }
-        d3.select(this)
-          .attr('transform', d3.select(this).attr('transform') + ' scale(1.1)');
-      }
+function createLink(source, target) {
+  let existing = Link.search_index(window.graph.links, source, target);
 
-    })
-    .on('mouseout', function (d) {
-      if (mousedown_node) {
-        if (d === mousedown_node) {
-          return;
-        }
-        // unenlarge target node for link
-        d3.select(this)
-          .attr('transform',
-            d3.select(this).attr('transform').replace(' scale(1.1)', ''));
-      }
-    })
-    .on('mousedown', function (d) {
-      if (d3.event.ctrlKey) {
-        return;
-      }
-
-      // save mousedown_node for later handling on mouseup and
-      mousedown_node = d;
-
-      // stop graph moving while we are dragging
-      stopGraphAnimation();
-      // reset drag line to be centered on mousedown_node
-      drag_line
-        .classed('hidden', false)
-        .attr({
-          'x1': mousedown_node.x,
-          'y1': mousedown_node.y,
-          'x2': mousedown_node.x,
-          'y2': mousedown_node.y
-        });
-
-      // restart();
-      // attachEvents()
-    })
-    .on('mouseup', function (d) {
-      if (!mousedown_node) {
-        return;
-      }
-
-      // needed by FF
-      drag_line
-        .classed('hidden', true)
-        .style('marker-end', '');
-
-      // are we making a new link or clicking on a new node?
-      if (d === mousedown_node) {
-        // we clicked on a node to edit it
-        selectElement(d);
-      } else {
-        // shrink down the node we just moused over
-        d3.select(this).attr('transform', '');
-        // NB: links are strictly source < target; arrows separately specified by booleans
-        // create and then select new link
-        selectElement(addLink(mousedown_node, d));
-      }
+  if (existing) {
+    // Don't create dupliacte links
+    return existing;
+  }
 
-      resetMouseVars();
-      startGraphAnimation();
-    });
+  let link = style_repaint_on_set(new Link(source, target))
+  window.graph.links.push(link);
+  trigger_full_repaint();
+  return link;
+}
 
-  path
-    .on('mousedown', function (l) {
-      if (d3.event.ctrlKey) {
-        return;
-      }
+function removeLink(link) {
+  let was_inserted = window.graph.links.indexOf(link);
+  if (was_inserted >= 0) {
+    window.graph.links.splice(was_inserted, 1);
+  }
 
-      // select link
-      selectElement(l);
-      resetMouseVars();
-    })
-    .on('mouseover', function (l) {
-      console.log(`mouseover${linkName(l)}`);
-      mouse_over_link = true;
-    })
-    .on('mouseout', function (l) {
-      console.log(`mouseout${linkName(l)}`);
-      mouse_over_link = false;
-    });
+  trigger_full_repaint();
+  return link;
 }
 
-function resetMouseVars() {
-  mousedown_node = null;
-  mouseup_node = null;
-  mousedown_link = null;
-}
+function removeNode(node) {
+  let was_inserted = window.graph.nodes.indexOf(node);
+  if (was_inserted >= 0) {
+    // remove from node list
+    window.graph.nodes.splice(was_inserted, 1);
+    // remove all references from links
+    window.graph.links
+      .filter((l) => (l.source === node || l.target === node)).
+      forEach((link) => removeLink(link));
+  }
+  // alaways decrement, even if the node wasn't inserted for some reason
+  window.graph.lastId--;
 
+  trigger_full_repaint();
+  return node;
+}
 
 
 function writeGraph() {
   d3.select('#graph-field').html(JSON.stringify(window.graph));
 }
 
-function spliceLinksForNode(node) {
-  var toSplice = window.graph.links.filter(function (l) {
-    return (l.source === node || l.target === node);
-  });
-  toSplice.map(function (l) {
-    window.graph.links.splice(window.graph.links.indexOf(l), 1);
-  });
-}
-
 function mousedown() {
   // prevent I-bar on drag
   //d3.event.preventDefault();
@@ -263,54 +233,7 @@ function mousedown() {
 
   // insert new node at point
   var point = d3.mouse(this)
-  selectElement(addNode(point));
-
-  startGraphAnimation();
-}
-
-function addNode(point) {
-  var newNode = {
-    id: ++window.graph.lastId,
-    name: 'New ' + window.graph.lastId,
-    x: width / 2,
-    y: height / 2,
-    r: 12
-  };
-  if (point) {
-    newNode.x = point[0];
-    newNode.y = point[1];
-  }
-  window.graph.nodes.push(newNode);
-
-  indexNodesAndLinks();
-  attachEvents();
-  return newNode;
-}
-
-function addLink(source, target) {
-  console.log(`addLink(${source.name}, ${target.name})`)
-  var link = window.graph.links.filter(function (l) {
-    return (l.source === source && l.target === target) ||
-      (l.source === target && l.target === source);
-  })[0];
-
-  if (!link) {
-    link = {
-      source: source,
-      target: target,
-      strength: 10,
-      dashed: false,
-      targetText: "",
-      sourceText: "",
-      centerText: ""
-    };
-    window.graph.links.push(link);
-
-    indexNodesAndLinks();
-    attachEvents();
-  }
-
-  return link;
+  selectElement(createNode(point));
 }
 
 function mousemove() {
@@ -345,7 +268,6 @@ function mouseup() {
 
   // clear mouse event vars
   resetMouseVars();
-  startGraphAnimation();
 }
 
 // only respond once per keydown
@@ -383,15 +305,12 @@ function addTemplate(template) {
   var links = parts[1].split(',');
   var builtNodes = {};
   nodes.forEach(function (d) {
-    builtNodes[d] = addNode(null);
+    builtNodes[d] = createNode(null);
   });
   links.forEach(function (d) {
     var linkParts = d.split('-');
-    addLink(builtNodes[linkParts[0]], builtNodes[linkParts[1]]);
+    createLink(builtNodes[linkParts[0]], builtNodes[linkParts[1]]);
   })
-
-  startGraphAnimation();
-  attachEvents();
 }
 
 panel.on('mousedown', mousedown)
@@ -405,4 +324,7 @@ d3.select('.expand-help').on('click', function (e) {
   var body = d3.select('.instructions .body');
   body.classed('hidden', !body.classed('hidden'));
 });
-attachEvents();
\ No newline at end of file
+
+console.log(`Calling base start`);
+// call again, which will disable dragging behavior
+startGraphAnimation();
\ No newline at end of file
diff --git a/static/polycule.js b/static/polycule.js
index cfb2be2..dac3cdc 100644
--- a/static/polycule.js
+++ b/static/polycule.js
@@ -1,8 +1,239 @@
 'use strict';
 
+class D3EventObject {
+  /* 
+    Do not define an events static member, because the static 
+    variable would be inhereted and shared by the subclasses.
+    Instead, we define a events variable on each subclass.
+  */
+
+  static addEvent(name, func) {
+    this.events[name] = func
+  }
+
+  static addEvents(obj) {
+    Object.entries(obj).forEach(
+      ([name, f]) => this.addEvent(name, f)
+    )
+  }
+
+  static attach_events(data_binding) {
+    Object.entries(this.events).forEach(
+      ([name, f]) => (data_binding.on(name, f))
+    )
+  }
+}
+
+class Node extends D3EventObject {
+  static events = {}
+
+  constructor(id, point) {
+    super();
+    this.id = id;
+    this.name = 'New ' + id;
+    if (point) {
+      this.x = point[0];
+      this.y = point[1];
+    } else {
+      this.x = width / 2;
+      this.y = height / 2;
+    }
+    this.r = 12;
+  }
+
+  static from(json) {
+    let node = Object.assign(new Node(0), json);
+    return node;
+  }
+
+  selected() { return this === selected_node }
+
+  under_label_point() { return [this.x, this.y + this.r * 2]; }
+
+  toString() { return `${this.name}[${this.x},${this.y}]`; }
+
+  setScale(amount) {
+    if (amount != 1) {
+      this.scale = amount;
+    } else {
+      delete this.scale;
+    }
+    console.log(`${this}.setScale(${amount}) -> ${this.scale}`);
+  }
+
+  // Draw Functions
+  static set_radius(node) { return node.r; }
+  static set_stroke(node) { return node.selected() ? '#00FFFF' : '#888'; }
+  static set_style(node) { return node.dashed ? 'fill:#ccc!important' : null; }
+  static set_stroke_dash(node) { return node.dashed ? `${node.r / 4}, ${node.r / 4}` : null; }
+
+  static set_text_y(node) { return - node.r - 2; }
+  static set_text(node) { return node.name; }
+
+  static transform(node) {
+    let xform = `translate(${node.x}, ${node.y})`;
+    if (node.scale) {
+      xform += ` scale(${node.scale})`;
+    }
+    return xform;
+  }
+
+  static update_svg(data_binding) {
+    data_binding.attr('transform', Node.transform)
+    data_binding.select('text')
+      .attr('y', Node.set_text_y)
+      .text(Node.set_text);
+    data_binding.select('circle')
+      .attr('r', Node.set_radius)
+      .attr('stroke', Node.set_stroke)
+      .attr('style', Node.set_style)
+      .attr('stroke-dasharray', Node.set_stroke_dash);
+  }
+
+  static create_svg(data_binding) {
+    let node_elements = data_binding.enter()
+      .append('g')
+      .classed('node', true);
+
+    // circle (node) group
+    node_elements.append('circle')
+      .attr('r', Node.set_radius)
+      .attr('stroke', Node.set_stroke)
+      .attr('style', Node.set_style)
+      .attr('stroke-dasharray', Node.set_stroke_dash);
+
+    // show node IDs
+    node_elements.append('text')
+      .attr('class', 'node-name')
+      .attr('text-anchor', 'middle')
+      .attr('x', 0)
+      .attr('y', Node.set_text_y)
+      .text(Node.set_text);
+
+    return node_elements;
+  }
+}
+
+class Link extends D3EventObject {
+  static events = {}
+
+  constructor(source, target) {
+    super();
+    this.source = source;
+    this.target = target;
+    this.strength = 10;
+    this.dashed = false;
+    this.targetText = "";
+    this.sourceText = "";
+    this.centerText = "";
+  }
+
+  selected() {
+    return this == selected_link;
+  }
+
+  name() {
+    return `[${this.source.name}]->[${this.target.name}]`;
+  }
+
+  toString() { return this.name(); }
+
+  static search_index(index, source, target) {
+    var link = index.filter(function (l) {
+      return (l.source === source && l.target === target) ||
+        (l.source === target && l.target === source);
+    });
+
+    if (link.length) {
+      return link[0];
+    }
+
+    return null;
+  }
+
+  static from(json) {
+    return Object.assign(new Link(null, null), json);
+  }
+
+  // position setters
+  static source_x(link) { return link.source.x; }
+  static source_y(link) { return link.source.y; }
+  static target_x(link) { return link.target.x; }
+  static target_y(link) { return link.target.y; }
+  static midpoint_x(link) { return (link.source.x + ((link.target.x - link.source.x) / 2)); }
+  static midpoint_y(link) { return (link.source.y + ((link.target.y - link.source.y) / 2)); }
+  static source_text_x(link) { return link.source.under_label_point()[0]; }
+  static source_text_y(link) { return link.source.under_label_point()[1]; }
+  static target_text_x(link) { return link.target.under_label_point()[0]; }
+  static target_text_y(link) { return link.target.under_label_point()[1]; }
+
+  // style setters
+  static stroke(link) { return link.selected() ? '#00FFFF' : 'rgba(0,0,0,0.25)'; }
+  static stroke_width(link) { return link.strength; }
+  static stroke_dash(link) { return link.dashed ? `${link.strength / 1.5}, ${link.strength / 1.5}` : null; }
+
+  static update_line(data_binding) {
+    data_binding
+      .attr('x1', Link.source_x)
+      .attr('y1', Link.source_y)
+      .attr('x2', Link.target_x)
+      .attr('y2', Link.target_y)
+      .attr('stroke', Link.stroke)
+      .attr('stroke-width', Link.stroke_width)
+      .attr('stroke-dasharray', Link.stroke_dash);
+  }
+
+  static update_text(data_binding) {
+    data_binding.select('.center-text')
+      .attr('dx', Link.midpoint_x)
+      .attr('dy', Link.midpoint_y)
+      .text(function (d) { return d.centerText; });
+    data_binding.select('.source-text')
+      .attr('dx', Link.source_text_x)
+      .attr('dy', Link.source_text_y)
+      .text(function (d) { return d.sourceText; });
+    data_binding.select('.target-text')
+      .attr('dx', Link.target_text_x)
+      .attr('dy', Link.target_text_y)
+      .text(function (d) { return d.targetText; });
+  }
+
+  static update_svg(data_binding) {
+    Link.update_line(data_binding.select('line'));
+    Link.update_text(data_binding);
+  }
+
+  static create_svg(data_binding) {
+    var path_elements = data_binding.enter()
+      .append('g')
+      .classed('link', true);
+
+    Link.update_line(path_elements.append('line'));
+
+    path_elements.append('text').attr('class', 'center-text meaning hidden');
+    path_elements.append('text').attr('class', 'source-text meaning hidden');
+    path_elements.append('text').attr('class', 'target-text meaning hidden');
+
+    Link.update_text(path_elements);
+  }
+}
+
+Link.addEvents({
+  mouseover: function () {
+    d3.select(this).selectAll('.meaning').classed('hidden', false);
+  },
+  mouseout: function () {
+    d3.select(this).selectAll('.meaning').classed('hidden', true);
+  }
+})
+
 // set up SVG for D3
+const repaint_delay = 0;
 var width = 960,
   height = 500,
+  repaint_soon = null,
+  full_repaint = true,
+  node_props_updated_by_tick = ['x', 'y', 'px', 'py'],
   selected_node = null,
   selected_link = null,
   mousedown_link = null,
@@ -13,6 +244,8 @@ var width = 960,
   scale = window.graph.scale || 1,
   translate = window.graph.translate || [0, 0];
 
+// View management functions
+
 var panel = d3.select('#panel')
   .attr('oncontextmenu', 'return false;')
   .attr('width', width)
@@ -58,18 +291,6 @@ function pan(vert, horiz) {
   }
 }
 
-
-window.graph.links.forEach(function (link) {
-  window.graph.nodes.forEach(function (node) {
-    if (node.id === link.source.id) {
-      link.source = node;
-    }
-    if (node.id === link.target.id) {
-      link.target = node;
-    }
-  });
-});
-
 d3.select('#in')
   .on('click', function () {
     zoom(0.1);
@@ -95,6 +316,112 @@ d3.select('#right')
     pan(0, -10);
   });
 
+// Drawing management functions
+
+function simUpdate() {
+  Link.update_svg(path);
+  Node.update_svg(node);
+}
+
+// update force layout (called automatically each iteration)
+function repaint() {
+  if (full_repaint) {
+    path = path.data(window.graph.links);
+    // NB: the function arg is crucial here! nodes are known by id, not by index!
+    node = node.data(window.graph.nodes, function (d) { return d.id; });
+
+    // paint any new nodes
+    Link.create_svg(path);
+    Node.create_svg(node);
+
+    // attach d3 events to nodes and links
+    Link.attach_events(path);
+    Node.attach_events(node);
+
+    // remove old elements
+    node.exit().remove();
+    path.exit().remove();
+
+    // save changes if needed
+    if (typeof writeGraph != 'undefined') {
+      writeGraph();
+    }
+    // (re)start the graph moving
+    force.start();
+  } else {
+    // d3js is running a physics 'sim' on the nodes and edges, 
+    // but we need to issue the draw commands
+    Link.update_svg(path);
+    Node.update_svg(node);
+  }
+
+  // mini-repaint housekeeping
+  full_repaint = false;
+  // avoid double calls
+  clearTimeout(repaint_soon);
+  repaint_soon = null;
+}
+
+function trigger_repaint_style() {
+  if (repaint_soon === null) {
+    repaint_soon = setTimeout(repaint, repaint_delay);
+  }
+}
+
+function trigger_full_repaint() {
+  // called when we add or remove elements
+  full_repaint = true;
+  trigger_repaint_style();
+}
+
+// Use proxy objects to trigger a draw call if needed
+function style_repaint_on_set(object, props_to_ignore) {
+  if (typeof props_to_ignore === 'undefined') {
+    props_to_ignore = [];
+  }
+
+  return new Proxy(object, {
+    set: function (obj, prop, value) {
+      if (!props_to_ignore.includes(prop)) {
+        trigger_repaint_style();
+      }
+      obj[prop] = value;
+      return true;
+    },
+    deleteProperty: function (o, k) {
+      delete o[k];
+      if (!props_to_ignore.includes(prop)) {
+        trigger_repaint_style();
+      }
+      return true;
+    }
+  });
+}
+
+
+function loadNode(json) { return style_repaint_on_set(Node.from(json), node_props_updated_by_tick); }
+function loadLink(json) {
+  // we're restaring from stored JSON
+  let link = Link.from(json);
+
+  // stored version will have a deep copy, find proper references
+  window.graph.nodes.forEach(function (node) {
+    if (node.id === link.source.id) {
+      link.source = node;
+    }
+    if (node.id === link.target.id) {
+      link.target = node;
+    }
+  });
+
+  return style_repaint_on_set(link);
+}
+
+console.log(`loading graph items`);
+window.graph.nodes = window.graph.nodes.map(loadNode);
+window.graph.links = window.graph.links.map(loadLink);
+
+console.log(`creating force - full_repaint:${full_repaint}`);
 // init D3 force layout
 var force = d3.layout.force()
   .nodes(window.graph.nodes)
@@ -102,8 +429,7 @@ var force = d3.layout.force()
   .size([width / scale, height / scale])
   .linkDistance(function (d) { return Math.log(3 / d.strength * 10) * 50; })
   .charge(-500)
-  .on('tick', tick)
-
+  .on('tick', simUpdate);
 
 // line displayed when dragging new nodes
 var drag_line = svg.append('line')
@@ -113,160 +439,21 @@ var drag_line = svg.append('line')
 var path = svg.append('g').selectAll('.link'),
   node = svg.append('g').selectAll('.node');
 
-// update force layout (called automatically each iteration)
-function tick() {
-  if (!drag_line.classed('hidden')) {
-    return;
-  }
-  path.select('line')
-    .attr('x1', function (d) { return d.source.x; })
-    .attr('y1', function (d) { return d.source.y; })
-    .attr('x2', function (d) { return d.target.x; })
-    .attr('y2', function (d) { return d.target.y; })
-  path.select('.source-text')
-    .attr('dx', function (d) { return d.source.x })
-    .attr('dy', function (d) { return d.source.y + d.source.r * 2 });
-  path.select('.target-text')
-    .attr('dx', function (d) { return d.target.x })
-    .attr('dy', function (d) { return d.target.y + d.target.r * 2 });
-  path.select('.center-text')
-    .attr('dx', function (d) {
-      return (d.source.x + ((d.target.x - d.source.x) / 2));
-    })
-    .attr('dy', function (d) {
-      return (d.source.y + ((d.target.y - d.source.y) / 2)) - 10;
-    });
-  node.attr('transform', function (d) {
-    return 'translate(' + d.x + ',' + d.y + ')';
-  });
-}
-
-// (re)build graph (called when needed)
-function indexNodesAndLinks() {
-  // path (link) group
-  path = path.data(window.graph.links);
-
-  // update existing links
-  path.classed('selected', function (d) { return d === selected_link; });
-
-
-  // add new links
-  var pathG = path.enter()
-    .append('g')
-    .classed('link', true)
-    .classed('selected', function (d) { return d === selected_link; });
-  pathG.append('line')
-    .attr('x1', function (d) { return d.source.x; })
-    .attr('y1', function (d) { return d.source.y; })
-    .attr('x2', function (d) { return d.target.x; })
-    .attr('y2', function (d) { return d.target.y; })
-    .attr('stroke-width', function (d) { return d.strength; })
-    .attr('stroke-dasharray', function (d) {
-      if (d.dashed) {
-        return '' + [d.strength / 1.5, d.strength / 1.5];
-      }
-    });
-  pathG.append('text')
-    .attr('class', 'center-text meaning hidden');
-  pathG.append('text')
-    .attr('class', 'source-text meaning hidden');
-  pathG.append('text')
-    .attr('class', 'target-text meaning hidden');
-  // remove old links
-  path.exit().remove();
-
-  path.select('line')
-    .attr('stroke-width', function (d) { return d.strength; })
-    .attr('stroke-dasharray', function (d) {
-      if (d.dashed) {
-        return '' + [d.strength / 1.5, d.strength / 1.5];
-      }
-    });
-  path.select('.center-text')
-    .text(function (d) { return d.centerText; });
-  path.select('.source-text')
-    .text(function (d) { return d.sourceText; });
-  path.select('.target-text')
-    .text(function (d) { return d.targetText; });
-  path.on('mouseover', function (d) {
-    d3.select(this).selectAll('.meaning')
-      .classed('hidden', false);
-  })
-    .on('mouseout', function (d) {
-      d3.select(this).selectAll('.meaning')
-        .classed('hidden', true);
-    });
-
-  // circle (node) group
-  // NB: the function arg is crucial here! nodes are known by id, not by index!
-  node = node.data(window.graph.nodes, function (d) { return d.id; });
-
-  // add new nodes
-  var nodeG = node.enter()
-    .append('g')
-    .classed('node', true);
-
-  nodeG.append('circle')
-    .attr('class', 'node')
-    .attr('r', function (d) { return d.r; })
-    .attr('style', function (d) {
-      if (d.dashed) {
-        return 'fill:#ccc!important';
-      }
-    })
-    .attr('stroke-dasharray', function (d) {
-      if (d.dashed) {
-        return '' + [d.r / 4, d.r / 4];
-      }
-    });
-
-  // show node IDs
-  nodeG.append('text')
-    .attr('x', 0)
-    .attr('y', function (d) { return -d.r - 2; })
-    .attr('class', 'id')
-    .attr('text-anchor', 'middle')
-    .text(function (d) { return d.name; });
-
-  node.select('circle')
-    .attr('r', function (d) { return d.r; })
-    .attr('style', function (d) {
-      if (d.dashed) {
-        return 'fill:#ccc!important';
-      }
-    })
-    .attr('stroke-dasharray', function (d) {
-      if (d.dashed) {
-        return '' + [d.r / 4, d.r / 4];
-      }
-    });
-
-  node.select('.id')
-    .attr('y', function (d) { return -d.r - 2; })
-    .text(function (d) { return d.name; });
-
-  // remove old nodes
-  node.exit().remove();
-}
-
 function startGraphAnimation() {
+  console.log('startGraphAnimation');
   // rebuild nodes and links
-  indexNodesAndLinks();
+  trigger_full_repaint();
+  // don't wait 
+  repaint();
 
-  // set the graph in motion
-  force.start();
   try {
     writeGraph();
   } catch (e) {
+    // Start dragging behavior if we are not editing the graph
     node.call(force.drag);
   }
 }
 
-// stop graph moving automatically
-function stopGraphAnimation() {
-  force.stop();
-}
-
 function panzoom() {
   d3.event.preventDefault()
   switch (d3.event.key) {
@@ -302,5 +489,6 @@ function panzoom() {
 d3.select(window)
   .on('keydown', panzoom);
 
+console.log(`Calling base start`);
 // app starts here
 startGraphAnimation();
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index e6da7de..e7390bd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -85,7 +85,6 @@ form {
 }
 
 #graph .link line {
-  stroke: rgba(0,0,0,0.25);
   cursor: pointer;
 }
 
@@ -103,7 +102,6 @@ form {
 
 #graph .node circle {
     fill: #888;
-    stroke: #888;
     stroke-width: 1px;
 }
 

From 336332ad8edc533d8ed80e900533f6ae6c5829a6 Mon Sep 17 00:00:00 2001
From: Daniel Drexler <aeturnum@gmail.com>
Date: Mon, 24 Aug 2020 16:46:49 -0700
Subject: [PATCH 3/3] Remove extra log statements

---
 static/build.js    | 1 -
 static/polycule.js | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/static/build.js b/static/build.js
index 6e3bee7..267b8f8 100644
--- a/static/build.js
+++ b/static/build.js
@@ -325,6 +325,5 @@ d3.select('.expand-help').on('click', function (e) {
   body.classed('hidden', !body.classed('hidden'));
 });
 
-console.log(`Calling base start`);
 // call again, which will disable dragging behavior
 startGraphAnimation();
\ No newline at end of file
diff --git a/static/polycule.js b/static/polycule.js
index dac3cdc..48b182d 100644
--- a/static/polycule.js
+++ b/static/polycule.js
@@ -58,7 +58,6 @@ class Node extends D3EventObject {
     } else {
       delete this.scale;
     }
-    console.log(`${this}.setScale(${amount}) -> ${this.scale}`);
   }
 
   // Draw Functions
@@ -417,11 +416,9 @@ function loadLink(json) {
   return style_repaint_on_set(link);
 }
 
-console.log(`loading graph items`);
 window.graph.nodes = window.graph.nodes.map(loadNode);
 window.graph.links = window.graph.links.map(loadLink);
 
-console.log(`creating force - full_repaint:${full_repaint}`);
 // init D3 force layout
 var force = d3.layout.force()
   .nodes(window.graph.nodes)
@@ -440,7 +437,6 @@ var path = svg.append('g').selectAll('.link'),
   node = svg.append('g').selectAll('.node');
 
 function startGraphAnimation() {
-  console.log('startGraphAnimation');
   // rebuild nodes and links
   trigger_full_repaint();
   // don't wait 
@@ -489,6 +485,5 @@ function panzoom() {
 d3.select(window)
   .on('keydown', panzoom);
 
-console.log(`Calling base start`);
 // app starts here
 startGraphAnimation();
\ No newline at end of file