GUI -- [ONOS-89] Creating affinity colors for ONOS instances. (WIP)

- added d3utils.cat7() to provide color scales.
- added 'equals' and 'dash' ids for key binding.
- added theme() callback to let views know when the theme changed.
- re-bound test keys (0, dash, equals)

Change-Id: Ie6c6140451ddab567e26c2ea17d65395fa9cc829

web/gui/src/main/webapp/d3Utils.js

@@ -119,10 +119,100 @@
             .attr('in', String);
     }
 
+    // --- Ordinal scales for 7 values.
+    // TODO: tune colors for light and dark themes
+
+    var lightNorm = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#e377c2', '#bcbd22', '#17becf'],
+        lightMute = ['#aec7e8', '#98df8a', '#ff9896', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5'],
+        darkNorm = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#e377c2', '#bcbd22', '#17becf'],
+        darkMute = ['#aec7e8', '#98df8a', '#ff9896', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5'];
+
+    function cat7() {
+        var colors = {
+                light: {
+                    norm: d3.scale.ordinal().range(lightNorm),
+                    mute: d3.scale.ordinal().range(lightMute)
+                },
+                dark: {
+                    norm: d3.scale.ordinal().range(darkNorm),
+                    mute: d3.scale.ordinal().range(darkMute)
+                }
+            },
+            tcid = 'd3utilTestCard';
+
+        function get(id, muted, theme) {
+            // NOTE: since we are lazily assigning domain ids, we need to
+            //       get the color from all 4 scales, to keep the domains
+            //       in sync.
+            var ln = colors.light.norm(id),
+                lm = colors.light.mute(id),
+                dn = colors.dark.norm(id),
+                dm = colors.dark.mute(id);
+            if (theme === 'dark') {
+                return muted ? dm : dn;
+            } else {
+                return muted ? lm : ln;
+            }
+        }
+
+        function testCard(svg) {
+            var g = svg.select('g#' + tcid),
+                dom = d3.range(7),
+                k, muted, theme, what;
+
+            if (!g.empty()) {
+                g.remove();
+
+            } else {
+                g = svg.append('g')
+                    .attr('id', tcid)
+                    .attr('transform', 'scale(4)translate(20,20)');
+
+                for (k=0; k<4; k++) {
+                    muted = k%2;
+                    what = muted ? ' muted' : ' normal';
+                    theme = k < 2 ? 'light' : 'dark';
+                    dom.forEach(function (id, i) {
+                        var x = i * 20,
+                            y = k * 20,
+                            f = get(id, muted, theme);
+                        g.append('circle').attr({
+                            cx: x,
+                            cy: y,
+                            r: 5,
+                            fill: f
+                        });
+                    });
+                    g.append('rect').attr({
+                        x: 140,
+                        y: k * 20 - 5,
+                        width: 32,
+                        height: 10,
+                        rx: 2,
+                        fill: '#888'
+                    });
+                    g.append('text').text(theme + what)
+                        .attr({
+                            x: 142,
+                            y: k * 20 + 2,
+                            fill: 'white'
+                        })
+                        .style('font-size', '4pt');
+                }
+            }
+        }
+
+        return {
+            testCard: testCard,
+            get: get
+        };
+    }
+
     // === register the functions as a library
     onos.ui.addLib('d3util', {
         createDragBehavior: createDragBehavior,
-        appendGlow: appendGlow
+        appendGlow: appendGlow,
+        cat7: cat7
     });
 
 }(ONOS));

web/gui/src/main/webapp/onos2.js

@@ -93,6 +93,8 @@
                 case 40: return 'downArrow';
                 case 91: return 'cmdLeft';
                 case 93: return 'cmdRight';
+                case 187: return 'equals';
+                case 189: return 'dash';
                 case 191: return 'slash';
                 default:
                     if ((code >= 48 && code <= 57) ||
@@ -446,6 +448,7 @@
             current.theme = (current.theme === 'light') ? 'dark' : 'light';
             body.classed('light dark', false);
             body.classed(current.theme, true);
+            theme(view);
             return true;
         }
 
@@ -546,6 +549,13 @@
             }
         }
 
+        function theme() {
+            // allow current view to react to theme event...
+            if (current.view) {
+                current.view.theme(current.ctx, current.flags);
+            }
+        }
+
         // ..........................................................
         // View class
         //   Captures state information about a view.
@@ -607,7 +617,7 @@
                     dataLoadError: this.dataLoadError,
                     alert: this.alert,
                     flash: this.flash,
-                    theme: this.theme
+                    getTheme: this.getTheme
                 }
             },
 
@@ -672,6 +682,16 @@
                 }
             },
 
+            theme: function (ctx, flags) {
+                var c = ctx | '',
+                    fn = isF(this.cb.theme);
+                traceFn('View.theme', this.vid);
+                if (fn) {
+                    trace('THEME cb for ' + this.vid);
+                    fn(this.token(), c, flags);
+                }
+            },
+
             error: function (ctx, flags) {
                 var c = ctx || '',
                     fn = isF(this.cb.error);
@@ -699,7 +719,7 @@
                 setKeyBindings(keyArg);
             },
 
-            theme: function () {
+            getTheme: function () {
                 return current.theme;
             },
 

web/gui/src/main/webapp/topo2.js

@@ -136,9 +136,9 @@
     // key bindings
     var keyDispatch = {
         // TODO: remove these "development only" bindings
-        M: testMe,
+        0: testMe,
-        S: injectStartupEvents,
+        equals: injectStartupEvents,
-        space: injectTestEvent,
+        dash: injectTestEvent,
 
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
@@ -189,7 +189,8 @@
         onosOrder = [],
         oiBox,
         oiShowMaster = false,
-        portLabelsOn = false;
+        portLabelsOn = false,
+        cat7 = d3u.cat7();
 
     var hoverModeAll = 1,
         hoverModeFlows = 2,
@@ -240,8 +241,9 @@
     // Key Callbacks
 
     function testMe(view) {
-        //view.alert('Theme is ' + view.theme());
+        //view.alert('Theme is ' + view.getTheme());
         //view.flash('This is some text');
+        cat7.testCard(svg);
     }
 
     function abortIfLive() {
@@ -862,12 +864,17 @@
         return true;
     }
 
+    function colorAffinity(on) {
+        // FIXME: need to code this portion up.
+    }
 
     function toggleInstances() {
         if (!oiBox.isVisible()) {
             oiBox.show();
+            colorAffinity(true);
         } else {
             oiBox.hide();
+            colorAffinity(false);
         }
     }
 
@@ -1123,6 +1130,13 @@
         });
 
         // operate on existing + new onoses here
+        // set the affinity colors...
+        onoses.each(function (d) {
+            var el = d3.select(this),
+                rect = el.select('svg').select('rect'),
+                col = instColor(d.id, d.online);
+            rect.style('fill', col);
+        });
 
         // adjust the panel size appropriately...
         oiBox.width(instDim.w * onosOrder.length);
@@ -1132,6 +1146,10 @@
         onoses.exit().remove();
     }
 
+    function instColor(id, online) {
+        return cat7.get(id, !online, network.view.getTheme());
+    }
+
     function clickInst(d) {
         var el = d3.select(this),
             aff = el.classed('affinity');
@@ -2571,6 +2589,12 @@
             .select('g').attr('transform', birdTranslate(w, h));
     }
 
+    function theme(view, ctx, flags) {
+        updateInstances();
+        // TODO: update other theme-affected elements
+
+    }
+
     function birdTranslate(w, h) {
         var bdim = config.birdDim;
         return 'translate('+((w-bdim)*.4)+','+((h-bdim)*.1)+')';
@@ -2583,7 +2607,8 @@
         preload: preload,
         load: load,
         unload: unload,
-        resize: resize
+        resize: resize,
+        theme: theme
     });
 
     summaryPane = onos.ui.addFloatingPanel('topo-summary');