metrics-on-canvas review feedback updates.

- Refactor some things.
- Fixes heptagon moc rendering
- Experiment w/ duller colors.

client/app/scripts/components/debug-toolbar.js

@@ -7,11 +7,14 @@ const log = debug('scope:debug-panel');
 
 import { receiveNodesDelta } from '../actions/app-actions';
 import AppStore from '../stores/app-store';
+import { getNodeColor, getNodeColorDark } from '../utils/color-utils';
 
 
 const SHAPES = ['square', 'hexagon', 'heptagon', 'circle'];
 const NODE_COUNTS = [1, 2, 3];
 const STACK_VARIANTS = [false, true];
+const METRIC_FILLS = [0, 0.1, 50, 99.9, 100];
+
 
 const sample = (collection) => _.range(_.random(4)).map(() => _.sample(collection));
 
@@ -26,8 +29,11 @@ const shapeTypes = {
 
 const LABEL_PREFIXES = _.range('A'.charCodeAt(), 'Z'.charCodeAt() + 1)
   .map(n => String.fromCharCode(n));
+
+
 const randomLetter = () => _.sample(LABEL_PREFIXES);
 
+
 const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, nodeCount = 1) => ({
   adjacency,
   controls: {},
@@ -44,6 +50,18 @@ const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, nodeCou
 });
 
 
+function addMetrics(node, v) {
+  const availableMetrics = AppStore.getAvailableCanvasMetrics().toJS();
+  const metrics = availableMetrics.length > 0 ? availableMetrics : [
+    {id: 'host_cpu_usage_percent', label: 'CPU'}
+  ];
+
+  return Object.assign({}, node, {
+    metrics: metrics.map(m => Object.assign({}, m, {max: 100, value: v}))
+  });
+}
+
+
 function label(shape, stacked) {
   const type = shapeTypes[shape];
   return stacked ? `Group of ${type[1]}` : type[0];
@@ -62,6 +80,17 @@ function addAllVariants() {
 }
 
 
+function addAllMetricVariants() {
+  const newNodes = _.flattenDeep(METRIC_FILLS.map((v, i) => (
+    SHAPES.map(s => [addMetrics(deltaAdd(label(s) + i, [], s), v)])
+  )));
+
+  receiveNodesDelta({
+    add: newNodes
+  });
+}
+
+
 function addNodes(n) {
   const ns = AppStore.getNodes();
   const nodeNames = ns.keySeq().toJS();
@@ -109,8 +138,10 @@ export class DebugToolbar extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.onChange = this.onChange.bind(this);
+    this.toggleColors = this.toggleColors.bind(this);
     this.state = {
-      nodesToAdd: 30
+      nodesToAdd: 30,
+      showColors: false
     };
   }
 
@@ -118,6 +149,12 @@ export class DebugToolbar extends React.Component {
     this.setState({nodesToAdd: parseInt(ev.target.value, 10)});
   }
 
+  toggleColors() {
+    this.setState({
+      showColors: !this.state.showColors
+    });
+  }
+
   render() {
     log('rending debug panel');
 
@@ -130,6 +167,7 @@ export class DebugToolbar extends React.Component {
           <input type="number" onChange={this.onChange} value={this.state.nodesToAdd} />
           <button onClick={() => addNodes(this.state.nodesToAdd)}>+</button>
           <button onClick={() => addAllVariants()}>Variants</button>
+          <button onClick={() => addAllMetricVariants()}>Metric Variants</button>
         </div>
 
         <div>
@@ -139,6 +177,25 @@ export class DebugToolbar extends React.Component {
           <button onClick={() => enableLog('app-key-press')}>scope:app-key-press</button>
           <button onClick={() => disableLog()}>Disable log</button>
         </div>
+
+        <div>
+          <label>Colors</label>
+          <button onClick={this.toggleColors}>toggle</button>
+        </div>
+
+        {this.state.showColors && [getNodeColor, getNodeColorDark].map(fn => (
+          <table>
+            <tbody>
+              {LABEL_PREFIXES.map(r => (
+                <tr key={r}>
+                  {LABEL_PREFIXES.map(c => (
+                    <td key={c} title={`(${r}, ${c})`} style={{backgroundColor: fn(r, c)}}></td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ))}
       </div>
     );
   }