Added keydown handler.

Some refactoring.
Cleaned up debug configuration.
Links now clipped to edges of node rectangles.
Updated ONOS icon (just a placeholder for now)

@@ -26,13 +26,19 @@
 (function (onos) {
 (function (onos) {
     'use strict';
     'use strict';
 
 
+    // reference to the framework api
     var api = onos.api;
     var api = onos.api;
 
 
+    // configuration data
     var config = {
     var config = {
+            debugOn: false,
+            debug: {
+                showNodeXY: true,
+                showKeyHandler: false
+            },
             options: {
             options: {
                 layering: true,
                 layering: true,
-                collisionPrevention: true,
-                showNodeXY: true
+                collisionPrevention: true
             },
             },
             XjsonUrl: 'rs/topology/graph',
             XjsonUrl: 'rs/topology/graph',
             jsonUrl: 'network.json',
             jsonUrl: 'network.json',
@@ -88,20 +94,28 @@
             },
             },
             hostLinkWidth: 1.0,
             hostLinkWidth: 1.0,
             mouseOutTimerDelayMs: 120
             mouseOutTimerDelayMs: 120
-        },
-        view = {},
+        };
+
+    // state variables
+    var view = {},
         network = {},
         network = {},
         selected = {},
         selected = {},
         highlighted = null,
         highlighted = null,
         viewMode = 'showAll';
         viewMode = 'showAll';
 
 
 
 
+    function debug(what) {
+        return config.debugOn && config.debug[what];
+    }
+
+    // load the topology view of the network
     function loadNetworkView() {
     function loadNetworkView() {
         // Hey, here I am, calling something on the ONOS api:
         // Hey, here I am, calling something on the ONOS api:
         api.printTime();
         api.printTime();
 
 
         resize();
         resize();
 
 
+        // go get our network data from the server...
         d3.json(config.jsonUrl, function (err, data) {
         d3.json(config.jsonUrl, function (err, data) {
             if (err) {
             if (err) {
                 alert('Oops! Error reading JSON...\n\n' +
                 alert('Oops! Error reading JSON...\n\n' +
@@ -109,14 +123,23 @@
                     'Error: ' + err.message);
                     'Error: ' + err.message);
                 return;
                 return;
             }
             }
-            console.log("here is the JSON data...");
-            console.log(data);
+//            console.log("here is the JSON data...");
+//            console.log(data);
 
 
             network.data = data;
             network.data = data;
             drawNetwork();
             drawNetwork();
         });
         });
 
 
-        $(document).on('click', '.select-object', function() {
+        // while we wait for the data, set up the handlers...
+        setUpClickHandler();
+        setUpRadioButtonHandler();
+        setUpKeyHandler();
+        $(window).on('resize', resize);
+    }
+
+    function setUpClickHandler() {
+        // click handler for "selectable" objects
+        $(document).on('click', '.select-object', function () {
             // when any object of class "select-object" is clicked...
             // when any object of class "select-object" is clicked...
             // TODO: get a reference to the object via lookup...
             // TODO: get a reference to the object via lookup...
             var obj = network.lookup[$(this).data('id')];
             var obj = network.lookup[$(this).data('id')];
@@ -126,25 +149,67 @@
             // stop propagation of event (I think) ...
             // stop propagation of event (I think) ...
             return false;
             return false;
         });
         });
+    }
 
 
-        $(window).on('resize', resize);
-
-        // set up radio button behavior
-        d3.selectAll("#displayModes .radio").on('click', function() {
-            var id = d3.select(this).attr("id");
+    function setUpRadioButtonHandler() {
+        d3.selectAll('#displayModes .radio').on('click', function () {
+            var id = d3.select(this).attr('id');
             if (id !== viewMode) {
             if (id !== viewMode) {
                 radioButton('displayModes', id);
                 radioButton('displayModes', id);
                 viewMode = id;
                 viewMode = id;
-                alert("action: " + id);
+                alert('action: ' + id);
             }
             }
         });
         });
     }
     }
 
 
+    function setUpKeyHandler() {
+        d3.select('body')
+            .on('keydown', function () {
+                processKeyEvent();
+                if (debug('showKeyHandler')) {
+                    network.svg.append('text')
+                        .attr('x', 5)
+                        .attr('y', 15)
+                        .style('font-size', '20pt')
+                        .text('keyCode: ' + d3.event.keyCode +
+                            ' applied to : ' + contextLabel())
+                        .transition().duration(2000)
+                        .style('font-size', '2pt')
+                        .style('fill-opacity', 0.01)
+                        .remove();
+                }
+            });
+    }
+
     function radioButton(group, id) {
     function radioButton(group, id) {
         d3.selectAll("#" + group + " .radio").classed("active", false);
         d3.selectAll("#" + group + " .radio").classed("active", false);
         d3.select("#" + group + " #" + id).classed("active", true);
         d3.select("#" + group + " #" + id).classed("active", true);
     }
     }
 
 
+    function contextLabel() {
+        return highlighted === null ? "(nothing)" : highlighted.id;
+    }
+
+    function processKeyEvent() {
+        var code = d3.event.keyCode;
+        switch (code) {
+            case 76:    // L
+                cycleLabels();
+                break;
+            case 80:    // P
+                togglePorts();
+        }
+
+    }
+
+    function cycleLabels() {
+        alert('Cycle Labels - context = ' + contextLabel());
+    }
+
+    function togglePorts() {
+        alert('Toggle Ports - context = ' + contextLabel());
+    }
+
 
 
     // ========================================================
     // ========================================================
 
 
@@ -430,8 +495,9 @@
                 // adjusted the bounds of the rectangle...
                 // adjusted the bounds of the rectangle...
             }
             }
 
 
-            // for debugging...
-            if (config.options.showNodeXY) {
+            // debug function to show the modelled x,y coordinates of nodes...
+            if (debug('showNodeXY')) {
+                node.select('rect').attr('fill-opacity', 0.5);
                 node.append('circle')
                 node.append('circle')
                     .attr({
                     .attr({
                         class: 'debug',
                         class: 'debug',
@@ -599,34 +665,41 @@
             preventCollisions();
             preventCollisions();
         }
         }
 
 
-        // TODO: use intersection technique for source end of link also
-        network.link
-            .attr('x1', function(d) {
-                return d.source.x;
-            })
-            .attr('y1', function(d) {
-                return d.source.y;
-            })
-            .each(function(d) {
-                var x = d.target.x,
-                    y = d.target.y,
-                    line = new geo.LineSegment(d.source.x, d.source.y, x, y);
+        // clip visualization of links at bounds of nodes...
+        network.link.each(function(d) {
+                var xs = d.source.x,
+                    ys = d.source.y,
+                    xt = d.target.x,
+                    yt = d.target.y,
+                    line = new geo.LineSegment(xs, ys, xt, yt),
+                    e, ix;
+
+                for (e in d.source.edge) {
+                    ix = line.intersect(d.source.edge[e].offset(xs, ys));
+                    if (ix.in1 && ix.in2) {
+                        xs = ix.x;
+                        ys = ix.y;
+                        break;
+                    }
+                }
 
 
-                for (var e in d.target.edge) {
-                    var ix = line.intersect(d.target.edge[e].offset(x,y));
+                for (e in d.target.edge) {
+                    ix = line.intersect(d.target.edge[e].offset(xt, yt));
                     if (ix.in1 && ix.in2) {
                     if (ix.in1 && ix.in2) {
-                        x = ix.x;
-                        y = ix.y;
+                        xt = ix.x;
+                        yt = ix.y;
                         break;
                         break;
                     }
                     }
                 }
                 }
 
 
                 d3.select(this)
                 d3.select(this)
-                    .attr('x2', x)
-                    .attr('y2', y);
-
+                    .attr('x1', xs)
+                    .attr('y1', ys)
+                    .attr('x2', xt)
+                    .attr('y2', yt);
             });
             });
 
 
+        // position each node by translating the node (group) by x,y
         network.node
         network.node
             .attr('transform', function(d) {
             .attr('transform', function(d) {
                 return translate(d.x, d.y);
                 return translate(d.x, d.y);

@@ -82,7 +82,7 @@ svg {
 svg .link {
 svg .link {
     fill: none;
     fill: none;
     stroke: #666;
     stroke: #666;
-    stroke-width: 1.5px;
+    stroke-width: 2.0px;
     opacity: .7;
     opacity: .7;
     /*marker-end: url(#end);*/
     /*marker-end: url(#end);*/