From b2774ed981fb01a51da5101381ebc4e1f4a202d7 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 18 Jan 2016 18:06:02 +0100
Subject: [PATCH] Fixes scope from crashing with "long" edges.

Long edges are those w/ a lot of points on them. Which can pop up in
heavily connected layouts.
---
 client/app/scripts/charts/edge.js             |  6 +-
 client/app/scripts/charts/nodes-layout.js     |  3 +
 client/app/scripts/components/app.js          |  2 +
 .../app/scripts/components/debug-toolbar.js   | 71 +++++++++++++++++++
 client/app/styles/main.less                   | 14 ++++
 5 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 client/app/scripts/components/debug-toolbar.js

diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
index 44d7e6a06..665bee48f 100644
--- a/client/app/scripts/charts/edge.js
+++ b/client/app/scripts/charts/edge.js
@@ -84,11 +84,11 @@ export default class Edge extends React.Component {
   }
 
   ensureSameLength(points) {
-    // Spring needs constant list length, hoping that dagre will insert never more than 10
-    const length = 10;
+    // Spring needs constant list length, hoping that dagre will insert never more than 30
+    const length = 30;
     let missing = length - points.length;
 
-    while (missing) {
+    while (missing > 0) {
       points.unshift(points[0]);
       missing = length - points.length;
     }
diff --git a/client/app/scripts/charts/nodes-layout.js b/client/app/scripts/charts/nodes-layout.js
index c4db147ad..8504236b2 100644
--- a/client/app/scripts/charts/nodes-layout.js
+++ b/client/app/scripts/charts/nodes-layout.js
@@ -359,6 +359,9 @@ export function doLayout(immNodes, immEdges, opts) {
     const graph = cache.graph;
     const nodesWithDegrees = updateNodeDegrees(immNodes, immEdges);
     layout = runLayoutEngine(graph, nodesWithDegrees, immEdges, opts);
+    if (!layout) {
+      return layout;
+    }
     layout = layoutSingleNodes(layout, opts);
     layout = shiftLayoutToCenter(layout, opts);
   }
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 032079b0e..c495a8b22 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -12,6 +12,7 @@ import Details from './details';
 import Nodes from './nodes';
 import EmbeddedTerminal from './embedded-terminal';
 import { getRouter } from '../utils/router-utils';
+import { showingDebugToolbar, DebugToolbar } from './debug-toolbar.js';
 
 const ESC_KEY_CODE = 27;
 
@@ -79,6 +80,7 @@ export default class App extends React.Component {
 
     return (
       <div className="app">
+        {showingDebugToolbar() && <DebugToolbar />}
         {showingDetails && <Details nodes={this.state.nodes}
           controlError={this.state.controlError}
           controlPending={this.state.controlPending}
diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js
new file mode 100644
index 000000000..1d11e62fe
--- /dev/null
+++ b/client/app/scripts/components/debug-toolbar.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import _ from 'lodash';
+
+import debug from 'debug';
+const log = debug('scope:debug-panel');
+
+import { receiveNodesDelta } from '../actions/app-actions';
+import AppStore from '../stores/app-store';
+
+
+const sample = function(collection) {
+  return _.range(_.random(4)).map(() => _.sample(collection));
+};
+
+const deltaAdd = function(name, adjacency = []) {
+  return {
+    'adjacency': adjacency,
+    'controls': {},
+    'id': name,
+    'label_major': name,
+    'label_minor': 'weave-1',
+    'latest': {},
+    'metadata': {},
+    'origins': [],
+    'rank': 'alpine'
+  };
+};
+
+function addNodes(n) {
+  const ns = AppStore.getNodes();
+  const nodeNames = ns.keySeq().toJS();
+  const newNodeNames = _.range(ns.size, ns.size + n).map((i) => 'zing' + i);
+  const allNodes = _(nodeNames).concat(newNodeNames).value();
+
+  receiveNodesDelta({
+    add: newNodeNames.map((name) => deltaAdd(name, sample(allNodes)))
+  });
+}
+
+export function showingDebugToolbar() {
+  return Boolean(localStorage.debugToolbar);
+}
+
+export class DebugToolbar extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.onChange = this.onChange.bind(this);
+    this.state = {
+      nodesToAdd: 30
+    };
+  }
+
+  onChange(ev) {
+    this.setState({nodesToAdd: parseInt(ev.target.value, 10)});
+  }
+
+  render() {
+    log('rending debug panel');
+
+    return (
+      <div className="debug-panel">
+        <label>Add nodes </label>
+        <button onClick={() => addNodes(1)}>+1</button>
+        <button onClick={() => addNodes(10)}>+10</button>
+        <input type="number" onChange={this.onChange} value={this.state.nodesToAdd} />
+        <button onClick={() => addNodes(this.state.nodesToAdd)}>+</button>
+      </div>
+    );
+  }
+}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index a4d965c70..ecd0178d2 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -715,3 +715,17 @@ h2 {
     color: @text-color;
   }
 }
+
+//
+// Debug panel!
+//
+
+.debug-panel {
+  .shadow-2;
+  background-color: #fff;
+  top: 10px;
+  position: absolute;
+  padding: 10px;
+  left: 10px;
+  z-index: 10000;
+}