Removed legacy GUI.

FIxed an NPE in the devices table.
Added cord-gui to obs.exclude

Change-Id: I18a53d2c44c6c97fb7f5d16b7446942a1a37ddca

@@ -3,3 +3,4 @@
 .*/build/conf/.*
 .*/build/conf/.*
 .*/docs/.*
 .*/docs/.*
 .*/openflow/drivers/.*
 .*/openflow/drivers/.*
+.*/cord-gui/.*
\ No newline at end of file

@@ -121,6 +121,8 @@ public class DeviceViewMessageHandler extends UiMessageHandler {
             boolean available = ds.isAvailable(id);
             boolean available = ds.isAvailable(id);
             String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
             String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
 
 
+            String protocol = dev.annotations().value(PROTOCOL);
+
             row.cell(ID, id)
             row.cell(ID, id)
                 .cell(AVAILABLE, available)
                 .cell(AVAILABLE, available)
                 .cell(AVAILABLE_IID, iconId)
                 .cell(AVAILABLE_IID, iconId)
@@ -128,7 +130,7 @@ public class DeviceViewMessageHandler extends UiMessageHandler {
                 .cell(MFR, dev.manufacturer())
                 .cell(MFR, dev.manufacturer())
                 .cell(HW, dev.hwVersion())
                 .cell(HW, dev.hwVersion())
                 .cell(SW, dev.swVersion())
                 .cell(SW, dev.swVersion())
-                .cell(PROTOCOL, dev.annotations().value(PROTOCOL))
+                .cell(PROTOCOL, protocol != null ? protocol : "")
                 .cell(NUM_PORTS, ds.getPorts(id).size())
                 .cell(NUM_PORTS, ds.getPorts(id).size())
                 .cell(MASTER_ID, ms.getMasterFor(id));
                 .cell(MASTER_ID, ms.getMasterFor(id));
         }
         }

-/*
- * Copyright 2014-2015 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package org.onosproject.ui.impl;
-
-import org.eclipse.jetty.websocket.WebSocket;
-import org.eclipse.jetty.websocket.WebSocketServlet;
-import org.onlab.osgi.DefaultServiceDirectory;
-import org.onlab.osgi.ServiceDirectory;
-
-import javax.servlet.ServletException;
-import javax.servlet.http.HttpServletRequest;
-import java.util.HashSet;
-import java.util.Iterator;
-import java.util.Set;
-import java.util.Timer;
-import java.util.TimerTask;
-
-/**
- * Web socket servlet capable of creating various sockets for the user interface.
- */
-@Deprecated
-public class GuiWebSocketServlet extends WebSocketServlet {
-
-    private static final long PING_DELAY_MS = 5000;
-
-    private ServiceDirectory directory = new DefaultServiceDirectory();
-
-    private final Set<TopologyViewWebSocket> sockets = new HashSet<>();
-    private final Timer timer = new Timer();
-    private final TimerTask pruner = new Pruner();
-
-    @Override
-    public void init() throws ServletException {
-        super.init();
-        timer.schedule(pruner, PING_DELAY_MS, PING_DELAY_MS);
-    }
-
-    @Override
-    public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
-        TopologyViewWebSocket socket = new TopologyViewWebSocket(directory);
-        synchronized (sockets) {
-            sockets.add(socket);
-        }
-        return socket;
-    }
-
-    // Task for pruning web-sockets that are idle.
-    private class Pruner extends TimerTask {
-        @Override
-        public void run() {
-            synchronized (sockets) {
-                Iterator<TopologyViewWebSocket> it = sockets.iterator();
-                while (it.hasNext()) {
-                    TopologyViewWebSocket socket = it.next();
-                    if (socket.isIdle()) {
-                        it.remove();
-                        socket.close();
-                    }
-                }
-            }
-        }
-    }
-}

@@ -52,7 +52,7 @@ public class TopologyResource extends BaseResource {
         ArrayNode devices = mapper.createArrayNode();
         ArrayNode devices = mapper.createArrayNode();
         ArrayNode hosts = mapper.createArrayNode();
         ArrayNode hosts = mapper.createArrayNode();
 
 
-        Map<String, ObjectNode> metaUi = TopologyViewMessages.getMetaUi();
+        Map<String, ObjectNode> metaUi = TopologyViewMessageHandler.getMetaUi();
         for (String id : metaUi.keySet()) {
         for (String id : metaUi.keySet()) {
             ObjectNode memento = metaUi.get(id);
             ObjectNode memento = metaUi.get(id);
             if (id.charAt(17) == '/') {
             if (id.charAt(17) == '/') {

-/*
- * Copyright 2014-2015 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package org.onosproject.ui.impl;
-
-import com.fasterxml.jackson.databind.JsonNode;
-import com.fasterxml.jackson.databind.ObjectMapper;
-import com.fasterxml.jackson.databind.node.ArrayNode;
-import com.fasterxml.jackson.databind.node.ObjectNode;
-import org.onlab.osgi.ServiceDirectory;
-import org.onlab.packet.IpAddress;
-import org.onosproject.cluster.ClusterEvent;
-import org.onosproject.cluster.ClusterService;
-import org.onosproject.cluster.ControllerNode;
-import org.onosproject.cluster.NodeId;
-import org.onosproject.core.CoreService;
-import org.onosproject.mastership.MastershipService;
-import org.onosproject.net.Annotated;
-import org.onosproject.net.AnnotationKeys;
-import org.onosproject.net.Annotations;
-import org.onosproject.net.ConnectPoint;
-import org.onosproject.net.DefaultEdgeLink;
-import org.onosproject.net.Device;
-import org.onosproject.net.DeviceId;
-import org.onosproject.net.EdgeLink;
-import org.onosproject.net.Host;
-import org.onosproject.net.HostId;
-import org.onosproject.net.HostLocation;
-import org.onosproject.net.Link;
-import org.onosproject.net.LinkKey;
-import org.onosproject.net.PortNumber;
-import org.onosproject.net.device.DeviceEvent;
-import org.onosproject.net.device.DeviceService;
-import org.onosproject.net.flow.FlowEntry;
-import org.onosproject.net.flow.FlowRuleService;
-import org.onosproject.net.flow.TrafficTreatment;
-import org.onosproject.net.flow.instructions.Instruction;
-import org.onosproject.net.flow.instructions.Instructions.OutputInstruction;
-import org.onosproject.net.host.HostEvent;
-import org.onosproject.net.host.HostService;
-import org.onosproject.net.intent.Intent;
-import org.onosproject.net.intent.IntentService;
-import org.onosproject.net.intent.LinkCollectionIntent;
-import org.onosproject.net.intent.OpticalConnectivityIntent;
-import org.onosproject.net.intent.OpticalPathIntent;
-import org.onosproject.net.intent.PathIntent;
-import org.onosproject.net.link.LinkEvent;
-import org.onosproject.net.link.LinkService;
-import org.onosproject.net.provider.ProviderId;
-import org.onosproject.net.statistic.Load;
-import org.onosproject.net.statistic.StatisticService;
-import org.onosproject.net.topology.Topology;
-import org.onosproject.net.topology.TopologyService;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-
-import java.text.DecimalFormat;
-import java.util.ArrayList;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.Iterator;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-import java.util.concurrent.ConcurrentHashMap;
-
-import static com.google.common.base.Preconditions.checkNotNull;
-import static com.google.common.base.Strings.isNullOrEmpty;
-import static org.onosproject.cluster.ClusterEvent.Type.INSTANCE_ADDED;
-import static org.onosproject.cluster.ClusterEvent.Type.INSTANCE_REMOVED;
-import static org.onosproject.cluster.ControllerNode.State.ACTIVE;
-import static org.onosproject.net.DeviceId.deviceId;
-import static org.onosproject.net.HostId.hostId;
-import static org.onosproject.net.LinkKey.linkKey;
-import static org.onosproject.net.PortNumber.P0;
-import static org.onosproject.net.PortNumber.portNumber;
-import static org.onosproject.net.device.DeviceEvent.Type.DEVICE_ADDED;
-import static org.onosproject.net.device.DeviceEvent.Type.DEVICE_REMOVED;
-import static org.onosproject.net.host.HostEvent.Type.HOST_ADDED;
-import static org.onosproject.net.host.HostEvent.Type.HOST_REMOVED;
-import static org.onosproject.net.link.LinkEvent.Type.LINK_ADDED;
-import static org.onosproject.net.link.LinkEvent.Type.LINK_REMOVED;
-
-/**
- * Facility for creating messages bound for the topology viewer.
- */
-@Deprecated
-public abstract class TopologyViewMessages {
-
-    protected static final Logger log = LoggerFactory.getLogger(TopologyViewMessages.class);
-
-    private static final ProviderId PID = new ProviderId("core", "org.onosproject.core", true);
-    private static final String COMPACT = "%s/%s-%s/%s";
-
-    private static final double KB = 1024;
-    private static final double MB = 1024 * KB;
-    private static final double GB = 1024 * MB;
-
-    private static final String GB_UNIT = "GB";
-    private static final String MB_UNIT = "MB";
-    private static final String KB_UNIT = "KB";
-    private static final String B_UNIT = "B";
-
-    protected final ServiceDirectory directory;
-    protected final ClusterService clusterService;
-    protected final DeviceService deviceService;
-    protected final LinkService linkService;
-    protected final HostService hostService;
-    protected final MastershipService mastershipService;
-    protected final IntentService intentService;
-    protected final FlowRuleService flowService;
-    protected final StatisticService statService;
-    protected final TopologyService topologyService;
-
-    protected final ObjectMapper mapper = new ObjectMapper();
-    private final String version;
-
-    // TODO: extract into an external & durable state; good enough for now and demo
-    private static Map<String, ObjectNode> metaUi = new ConcurrentHashMap<>();
-
-    /**
-     * Returns read-only view of the meta-ui information.
-     *
-     * @return map of id to meta-ui mementos
-     */
-    static Map<String, ObjectNode> getMetaUi() {
-        return Collections.unmodifiableMap(metaUi);
-    }
-
-    /**
-     * Creates a messaging facility for creating messages for topology viewer.
-     *
-     * @param directory service directory
-     */
-    protected TopologyViewMessages(ServiceDirectory directory) {
-        this.directory = checkNotNull(directory, "Directory cannot be null");
-        clusterService = directory.get(ClusterService.class);
-        deviceService = directory.get(DeviceService.class);
-        linkService = directory.get(LinkService.class);
-        hostService = directory.get(HostService.class);
-        mastershipService = directory.get(MastershipService.class);
-        intentService = directory.get(IntentService.class);
-        flowService = directory.get(FlowRuleService.class);
-        statService = directory.get(StatisticService.class);
-        topologyService = directory.get(TopologyService.class);
-
-        String ver = directory.get(CoreService.class).version().toString();
-        version = ver.replace(".SNAPSHOT", "*").replaceFirst("~.*$", "");
-    }
-
-    // Retrieves the payload from the specified event.
-    protected ObjectNode payload(ObjectNode event) {
-        return (ObjectNode) event.path("payload");
-    }
-
-    // Returns the specified node property as a number
-    protected long number(ObjectNode node, String name) {
-        return node.path(name).asLong();
-    }
-
-    // Returns the specified node property as a string.
-    protected String string(ObjectNode node, String name) {
-        return node.path(name).asText();
-    }
-
-    // Returns the specified node property as a string.
-    protected String string(ObjectNode node, String name, String defaultValue) {
-        return node.path(name).asText(defaultValue);
-    }
-
-    // Returns the specified set of IP addresses as a string.
-    private String ip(Set<IpAddress> ipAddresses) {
-        Iterator<IpAddress> it = ipAddresses.iterator();
-        return it.hasNext() ? it.next().toString() : "unknown";
-    }
-
-    // Produces JSON structure from annotations.
-    private JsonNode props(Annotations annotations) {
-        ObjectNode props = mapper.createObjectNode();
-        if (annotations != null) {
-            for (String key : annotations.keys()) {
-                props.put(key, annotations.value(key));
-            }
-        }
-        return props;
-    }
-
-    // Produces an informational log message event bound to the client.
-    protected ObjectNode info(long id, String message) {
-        return message("info", id, message);
-    }
-
-    // Produces a warning log message event bound to the client.
-    protected ObjectNode warning(long id, String message) {
-        return message("warning", id, message);
-    }
-
-    // Produces an error log message event bound to the client.
-    protected ObjectNode error(long id, String message) {
-        return message("error", id, message);
-    }
-
-    // Produces a log message event bound to the client.
-    private ObjectNode message(String severity, long id, String message) {
-        return envelope("message", id,
-                        mapper.createObjectNode()
-                                .put("severity", severity)
-                                .put("message", message));
-    }
-
-    // Puts the payload into an envelope and returns it.
-    protected ObjectNode envelope(String type, long sid, ObjectNode payload) {
-        ObjectNode event = mapper.createObjectNode();
-        event.put("event", type);
-        if (sid > 0) {
-            event.put("sid", sid);
-        }
-        event.set("payload", payload);
-        return event;
-    }
-
-    // Produces a set of all hosts listed in the specified JSON array.
-    protected Set<Host> getHosts(ArrayNode array) {
-        Set<Host> hosts = new HashSet<>();
-        if (array != null) {
-            for (JsonNode node : array) {
-                try {
-                    addHost(hosts, hostId(node.asText()));
-                } catch (IllegalArgumentException e) {
-                    log.debug("Skipping ID {}", node.asText());
-                }
-            }
-        }
-        return hosts;
-    }
-
-    // Adds the specified host to the set of hosts.
-    private void addHost(Set<Host> hosts, HostId hostId) {
-        Host host = hostService.getHost(hostId);
-        if (host != null) {
-            hosts.add(host);
-        }
-    }
-
-
-    // Produces a set of all devices listed in the specified JSON array.
-    protected Set<Device> getDevices(ArrayNode array) {
-        Set<Device> devices = new HashSet<>();
-        if (array != null) {
-            for (JsonNode node : array) {
-                try {
-                    addDevice(devices, deviceId(node.asText()));
-                } catch (IllegalArgumentException e) {
-                    log.debug("Skipping ID {}", node.asText());
-                }
-            }
-        }
-        return devices;
-    }
-
-    private void addDevice(Set<Device> devices, DeviceId deviceId) {
-        Device device = deviceService.getDevice(deviceId);
-        if (device != null) {
-            devices.add(device);
-        }
-    }
-
-    protected void addHover(Set<Host> hosts, Set<Device> devices, String hover) {
-        try {
-            addHost(hosts, hostId(hover));
-        } catch (IllegalArgumentException e) {
-            try {
-                addDevice(devices, deviceId(hover));
-            } catch (IllegalArgumentException ne) {
-                log.debug("Skipping ID {}", hover);
-            }
-        }
-    }
-
-    // Produces a cluster instance message to the client.
-    protected ObjectNode instanceMessage(ClusterEvent event, String messageType) {
-        ControllerNode node = event.subject();
-        int switchCount = mastershipService.getDevicesOf(node.id()).size();
-        ObjectNode payload = mapper.createObjectNode()
-                .put("id", node.id().toString())
-                .put("ip", node.ip().toString())
-                .put("online", clusterService.getState(node.id()) == ACTIVE)
-                .put("uiAttached", event.subject().equals(clusterService.getLocalNode()))
-                .put("switches", switchCount);
-
-        ArrayNode labels = mapper.createArrayNode();
-        labels.add(node.id().toString());
-        labels.add(node.ip().toString());
-
-        // Add labels, props and stuff the payload into envelope.
-        payload.set("labels", labels);
-        addMetaUi(node.id().toString(), payload);
-
-        String type = messageType != null ? messageType :
-                ((event.type() == INSTANCE_ADDED) ? "addInstance" :
-                        ((event.type() == INSTANCE_REMOVED ? "removeInstance" :
-                                "addInstance")));
-        return envelope(type, 0, payload);
-    }
-
-    // Produces a device event message to the client.
-    protected ObjectNode deviceMessage(DeviceEvent event) {
-        Device device = event.subject();
-        ObjectNode payload = mapper.createObjectNode()
-                .put("id", device.id().toString())
-                .put("type", device.type().toString().toLowerCase())
-                .put("online", deviceService.isAvailable(device.id()))
-                .put("master", master(device.id()));
-
-        // Generate labels: id, chassis id, no-label, optional-name
-        String name = device.annotations().value(AnnotationKeys.NAME);
-        ArrayNode labels = mapper.createArrayNode();
-        labels.add("");
-        labels.add(isNullOrEmpty(name) ? device.id().toString() : name);
-        labels.add(device.id().toString());
-
-        // Add labels, props and stuff the payload into envelope.
-        payload.set("labels", labels);
-        payload.set("props", props(device.annotations()));
-        addGeoLocation(device, payload);
-        addMetaUi(device.id().toString(), payload);
-
-        String type = (event.type() == DEVICE_ADDED) ? "addDevice" :
-                ((event.type() == DEVICE_REMOVED) ? "removeDevice" : "updateDevice");
-        return envelope(type, 0, payload);
-    }
-
-    // Produces a link event message to the client.
-    protected ObjectNode linkMessage(LinkEvent event) {
-        Link link = event.subject();
-        ObjectNode payload = mapper.createObjectNode()
-                .put("id", compactLinkString(link))
-                .put("type", link.type().toString().toLowerCase())
-                .put("online", link.state() == Link.State.ACTIVE)
-                .put("linkWidth", 1.2)
-                .put("src", link.src().deviceId().toString())
-                .put("srcPort", link.src().port().toString())
-                .put("dst", link.dst().deviceId().toString())
-                .put("dstPort", link.dst().port().toString());
-        String type = (event.type() == LINK_ADDED) ? "addLink" :
-                ((event.type() == LINK_REMOVED) ? "removeLink" : "updateLink");
-        return envelope(type, 0, payload);
-    }
-
-    // Produces a host event message to the client.
-    protected ObjectNode hostMessage(HostEvent event) {
-        Host host = event.subject();
-        String hostType = host.annotations().value(AnnotationKeys.TYPE);
-        ObjectNode payload = mapper.createObjectNode()
-                .put("id", host.id().toString())
-                .put("type", isNullOrEmpty(hostType) ? "endstation" : hostType)
-                .put("ingress", compactLinkString(edgeLink(host, true)))
-                .put("egress", compactLinkString(edgeLink(host, false)));
-        payload.set("cp", hostConnect(mapper, host.location()));
-        payload.set("labels", labels(mapper, ip(host.ipAddresses()),
-                                     host.mac().toString()));
-        payload.set("props", props(host.annotations()));
-        addGeoLocation(host, payload);
-        addMetaUi(host.id().toString(), payload);
-
-        String type = (event.type() == HOST_ADDED) ? "addHost" :
-                ((event.type() == HOST_REMOVED) ? "removeHost" : "updateHost");
-        return envelope(type, 0, payload);
-    }
-
-    // Encodes the specified host location into a JSON object.
-    private ObjectNode hostConnect(ObjectMapper mapper, HostLocation location) {
-        return mapper.createObjectNode()
-                .put("device", location.deviceId().toString())
-                .put("port", location.port().toLong());
-    }
-
-    // Encodes the specified list of labels a JSON array.
-    private ArrayNode labels(ObjectMapper mapper, String... labels) {
-        ArrayNode json = mapper.createArrayNode();
-        for (String label : labels) {
-            json.add(label);
-        }
-        return json;
-    }
-
-    // Returns the name of the master node for the specified device id.
-    private String master(DeviceId deviceId) {
-        NodeId master = mastershipService.getMasterFor(deviceId);
-        return master != null ? master.toString() : "";
-    }
-
-    // Generates an edge link from the specified host location.
-    private EdgeLink edgeLink(Host host, boolean ingress) {
-        return new DefaultEdgeLink(PID, new ConnectPoint(host.id(), portNumber(0)),
-                                   host.location(), ingress);
-    }
-
-    // Adds meta UI information for the specified object.
-    private void addMetaUi(String id, ObjectNode payload) {
-        ObjectNode meta = metaUi.get(id);
-        if (meta != null) {
-            payload.set("metaUi", meta);
-        }
-    }
-
-    // Adds a geo location JSON to the specified payload object.
-    private void addGeoLocation(Annotated annotated, ObjectNode payload) {
-        Annotations annotations = annotated.annotations();
-        if (annotations == null) {
-            return;
-        }
-
-        String slat = annotations.value(AnnotationKeys.LATITUDE);
-        String slng = annotations.value(AnnotationKeys.LONGITUDE);
-        try {
-            if (slat != null && slng != null && !slat.isEmpty() && !slng.isEmpty()) {
-                double lat = Double.parseDouble(slat);
-                double lng = Double.parseDouble(slng);
-                ObjectNode loc = mapper.createObjectNode()
-                        .put("type", "latlng").put("lat", lat).put("lng", lng);
-                payload.set("location", loc);
-            }
-        } catch (NumberFormatException e) {
-            log.warn("Invalid geo data latitude={}; longiture={}", slat, slng);
-        }
-    }
-
-    // Updates meta UI information for the specified object.
-    protected void updateMetaUi(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        metaUi.put(string(payload, "id"), (ObjectNode) payload.path("memento"));
-    }
-
-    // Returns summary response.
-    protected ObjectNode summmaryMessage(long sid) {
-        Topology topology = topologyService.currentTopology();
-        return envelope("showSummary", sid,
-                        json("ONOS Summary", "node",
-                             new Prop("Devices", format(topology.deviceCount())),
-                             new Prop("Links", format(topology.linkCount())),
-                             new Prop("Hosts", format(hostService.getHostCount())),
-                             new Prop("Topology SCCs", format(topology.clusterCount())),
-                             new Separator(),
-                             new Prop("Intents", format(intentService.getIntentCount())),
-                             new Prop("Flows", format(flowService.getFlowRuleCount())),
-                             new Prop("Version", version)));
-    }
-
-    // Returns device details response.
-    protected ObjectNode deviceDetails(DeviceId deviceId, long sid) {
-        Device device = deviceService.getDevice(deviceId);
-        Annotations annot = device.annotations();
-        String name = annot.value(AnnotationKeys.NAME);
-        int portCount = deviceService.getPorts(deviceId).size();
-        int flowCount = getFlowCount(deviceId);
-        return envelope("showDetails", sid,
-                        json(isNullOrEmpty(name) ? deviceId.toString() : name,
-                             device.type().toString().toLowerCase(),
-                             new Prop("URI", deviceId.toString()),
-                             new Prop("Vendor", device.manufacturer()),
-                             new Prop("H/W Version", device.hwVersion()),
-                             new Prop("S/W Version", device.swVersion()),
-                             new Prop("Serial Number", device.serialNumber()),
-                             new Prop("Protocol", annot.value(AnnotationKeys.PROTOCOL)),
-                             new Separator(),
-                             new Prop("Master", master(deviceId)),
-                             new Prop("Latitude", annot.value(AnnotationKeys.LATITUDE)),
-                             new Prop("Longitude", annot.value(AnnotationKeys.LONGITUDE)),
-                             new Separator(),
-                             new Prop("Ports", Integer.toString(portCount)),
-                             new Prop("Flows", Integer.toString(flowCount))));
-    }
-
-    protected int getFlowCount(DeviceId deviceId) {
-        int count = 0;
-        Iterator<FlowEntry> it = flowService.getFlowEntries(deviceId).iterator();
-        while (it.hasNext()) {
-            count++;
-            it.next();
-        }
-        return count;
-    }
-
-    // Counts all entries that egress on the given device links.
-    protected Map<Link, Integer> getFlowCounts(DeviceId deviceId) {
-        List<FlowEntry> entries = new ArrayList<>();
-        Set<Link> links = new HashSet<>(linkService.getDeviceEgressLinks(deviceId));
-        Set<Host> hosts = hostService.getConnectedHosts(deviceId);
-        Iterator<FlowEntry> it = flowService.getFlowEntries(deviceId).iterator();
-        while (it.hasNext()) {
-            entries.add(it.next());
-        }
-
-        // Add all edge links to the set
-        if (hosts != null) {
-            for (Host host : hosts) {
-                links.add(new DefaultEdgeLink(host.providerId(),
-                                              new ConnectPoint(host.id(), P0),
-                                              host.location(), false));
-            }
-        }
-
-        Map<Link, Integer> counts = new HashMap<>();
-        for (Link link : links) {
-            counts.put(link, getEgressFlows(link, entries));
-        }
-        return counts;
-    }
-
-    // Counts all entries that egress on the link source port.
-    private Integer getEgressFlows(Link link, List<FlowEntry> entries) {
-        int count = 0;
-        PortNumber out = link.src().port();
-        for (FlowEntry entry : entries) {
-            TrafficTreatment treatment = entry.treatment();
-            for (Instruction instruction : treatment.allInstructions()) {
-                if (instruction.type() == Instruction.Type.OUTPUT &&
-                        ((OutputInstruction) instruction).port().equals(out)) {
-                    count++;
-                }
-            }
-        }
-        return count;
-    }
-
-
-    // Returns host details response.
-    protected ObjectNode hostDetails(HostId hostId, long sid) {
-        Host host = hostService.getHost(hostId);
-        Annotations annot = host.annotations();
-        String type = annot.value(AnnotationKeys.TYPE);
-        String name = annot.value(AnnotationKeys.NAME);
-        String vlan = host.vlan().toString();
-        return envelope("showDetails", sid,
-                        json(isNullOrEmpty(name) ? hostId.toString() : name,
-                             isNullOrEmpty(type) ? "endstation" : type,
-                             new Prop("MAC", host.mac().toString()),
-                             new Prop("IP", host.ipAddresses().toString().replaceAll("[\\[\\]]", "")),
-                             new Prop("VLAN", vlan.equals("-1") ? "none" : vlan),
-                             new Separator(),
-                             new Prop("Latitude", annot.value(AnnotationKeys.LATITUDE)),
-                             new Prop("Longitude", annot.value(AnnotationKeys.LONGITUDE))));
-    }
-
-
-    // Produces JSON message to trigger traffic overview visualization
-    protected ObjectNode trafficSummaryMessage(long sid) {
-        ObjectNode payload = mapper.createObjectNode();
-        ArrayNode paths = mapper.createArrayNode();
-        payload.set("paths", paths);
-
-        ObjectNode pathNodeN = mapper.createObjectNode();
-        ArrayNode linksNodeN = mapper.createArrayNode();
-        ArrayNode labelsN = mapper.createArrayNode();
-
-        pathNodeN.put("class", "plain").put("traffic", false);
-        pathNodeN.set("links", linksNodeN);
-        pathNodeN.set("labels", labelsN);
-        paths.add(pathNodeN);
-
-        ObjectNode pathNodeT = mapper.createObjectNode();
-        ArrayNode linksNodeT = mapper.createArrayNode();
-        ArrayNode labelsT = mapper.createArrayNode();
-
-        pathNodeT.put("class", "secondary").put("traffic", true);
-        pathNodeT.set("links", linksNodeT);
-        pathNodeT.set("labels", labelsT);
-        paths.add(pathNodeT);
-
-        for (BiLink link : consolidateLinks(linkService.getLinks())) {
-            boolean bi = link.two != null;
-            if (isInfrastructureEgress(link.one) ||
-                    (bi && isInfrastructureEgress(link.two))) {
-                link.addLoad(statService.load(link.one));
-                link.addLoad(bi ? statService.load(link.two) : null);
-                if (link.hasTraffic) {
-                    linksNodeT.add(compactLinkString(link.one));
-                    labelsT.add(formatBytes(link.bytes));
-                } else {
-                    linksNodeN.add(compactLinkString(link.one));
-                    labelsN.add("");
-                }
-            }
-        }
-        return envelope("showTraffic", sid, payload);
-    }
-
-    private Collection<BiLink> consolidateLinks(Iterable<Link> links) {
-        Map<LinkKey, BiLink> biLinks = new HashMap<>();
-        for (Link link : links) {
-            addLink(biLinks, link);
-        }
-        return biLinks.values();
-    }
-
-    // Produces JSON message to trigger flow overview visualization
-    protected ObjectNode flowSummaryMessage(long sid, Set<Device> devices) {
-        ObjectNode payload = mapper.createObjectNode();
-        ArrayNode paths = mapper.createArrayNode();
-        payload.set("paths", paths);
-
-        for (Device device : devices) {
-            Map<Link, Integer> counts = getFlowCounts(device.id());
-            for (Link link : counts.keySet()) {
-                addLinkFlows(link, paths, counts.get(link));
-            }
-        }
-        return envelope("showTraffic", sid, payload);
-    }
-
-    private void addLinkFlows(Link link, ArrayNode paths, Integer count) {
-        ObjectNode pathNode = mapper.createObjectNode();
-        ArrayNode linksNode = mapper.createArrayNode();
-        ArrayNode labels = mapper.createArrayNode();
-        boolean noFlows = count == null || count == 0;
-        pathNode.put("class", noFlows ? "secondary" : "primary");
-        pathNode.put("traffic", false);
-        pathNode.set("links", linksNode.add(compactLinkString(link)));
-        pathNode.set("labels", labels.add(noFlows ? "" : (count.toString() +
-                (count == 1 ? " flow" : " flows"))));
-        paths.add(pathNode);
-    }
-
-
-    // Produces JSON message to trigger traffic visualization
-    protected ObjectNode trafficMessage(long sid, TrafficClass... trafficClasses) {
-        ObjectNode payload = mapper.createObjectNode();
-        ArrayNode paths = mapper.createArrayNode();
-        payload.set("paths", paths);
-
-        // Classify links based on their traffic traffic first...
-        Map<LinkKey, BiLink> biLinks = classifyLinkTraffic(trafficClasses);
-
-        // Then separate the links into their respective classes and send them out.
-        Map<String, ObjectNode> pathNodes = new HashMap<>();
-        for (BiLink biLink : biLinks.values()) {
-            boolean hasTraffic = biLink.hasTraffic;
-            String tc = (biLink.classes + (hasTraffic ? " animated" : "")).trim();
-            ObjectNode pathNode = pathNodes.get(tc);
-            if (pathNode == null) {
-                pathNode = mapper.createObjectNode()
-                        .put("class", tc).put("traffic", hasTraffic);
-                pathNode.set("links", mapper.createArrayNode());
-                pathNode.set("labels", mapper.createArrayNode());
-                pathNodes.put(tc, pathNode);
-                paths.add(pathNode);
-            }
-            ((ArrayNode) pathNode.path("links")).add(compactLinkString(biLink.one));
-            ((ArrayNode) pathNode.path("labels")).add(hasTraffic ? formatBytes(biLink.bytes) : "");
-        }
-
-        return envelope("showTraffic", sid, payload);
-    }
-
-    // Classifies the link traffic according to the specified classes.
-    private Map<LinkKey, BiLink> classifyLinkTraffic(TrafficClass... trafficClasses) {
-        Map<LinkKey, BiLink> biLinks = new HashMap<>();
-        for (TrafficClass trafficClass : trafficClasses) {
-            for (Intent intent : trafficClass.intents) {
-                boolean isOptical = intent instanceof OpticalConnectivityIntent;
-                List<Intent> installables = intentService.getInstallableIntents(intent.key());
-                if (installables != null) {
-                    for (Intent installable : installables) {
-                        String type = isOptical ? trafficClass.type + " optical" : trafficClass.type;
-                        if (installable instanceof PathIntent) {
-                            classifyLinks(type, biLinks, trafficClass.showTraffic,
-                                          ((PathIntent) installable).path().links());
-                        } else if (installable instanceof LinkCollectionIntent) {
-                            classifyLinks(type, biLinks, trafficClass.showTraffic,
-                                          ((LinkCollectionIntent) installable).links());
-                        } else if (installable instanceof OpticalPathIntent) {
-                            classifyLinks(type, biLinks, trafficClass.showTraffic,
-                                    ((OpticalPathIntent) installable).path().links());
-                        }
-                    }
-                }
-            }
-        }
-        return biLinks;
-    }
-
-
-    // Adds the link segments (path or tree) associated with the specified
-    // connectivity intent
-    private void classifyLinks(String type, Map<LinkKey, BiLink> biLinks,
-                               boolean showTraffic, Iterable<Link> links) {
-        if (links != null) {
-            for (Link link : links) {
-                BiLink biLink = addLink(biLinks, link);
-                if (isInfrastructureEgress(link)) {
-                    if (showTraffic) {
-                        biLink.addLoad(statService.load(link));
-                    }
-                    biLink.addClass(type);
-                }
-            }
-        }
-    }
-
-
-    private BiLink addLink(Map<LinkKey, BiLink> biLinks, Link link) {
-        LinkKey key = canonicalLinkKey(link);
-        BiLink biLink = biLinks.get(key);
-        if (biLink != null) {
-            biLink.setOther(link);
-        } else {
-            biLink = new BiLink(key, link);
-            biLinks.put(key, biLink);
-        }
-        return biLink;
-    }
-
-
-    // Adds the link segments (path or tree) associated with the specified
-    // connectivity intent
-    protected void addPathTraffic(ArrayNode paths, String type, String trafficType,
-                                  Iterable<Link> links) {
-        ObjectNode pathNode = mapper.createObjectNode();
-        ArrayNode linksNode = mapper.createArrayNode();
-
-        if (links != null) {
-            ArrayNode labels = mapper.createArrayNode();
-            boolean hasTraffic = false;
-            for (Link link : links) {
-                if (isInfrastructureEgress(link)) {
-                    linksNode.add(compactLinkString(link));
-                    Load load = statService.load(link);
-                    String label = "";
-                    if (load.rate() > 0) {
-                        hasTraffic = true;
-                        label = formatBytes(load.latest());
-                    }
-                    labels.add(label);
-                }
-            }
-            pathNode.put("class", hasTraffic ? type + " " + trafficType : type);
-            pathNode.put("traffic", hasTraffic);
-            pathNode.set("links", linksNode);
-            pathNode.set("labels", labels);
-            paths.add(pathNode);
-        }
-    }
-
-    // Poor-mans formatting to get the labels with byte counts looking nice.
-    private String formatBytes(long bytes) {
-        String unit;
-        double value;
-        if (bytes > GB) {
-            value = bytes / GB;
-            unit = GB_UNIT;
-        } else if (bytes > MB) {
-            value = bytes / MB;
-            unit = MB_UNIT;
-        } else if (bytes > KB) {
-            value = bytes / KB;
-            unit = KB_UNIT;
-        } else {
-            value = bytes;
-            unit = B_UNIT;
-        }
-        DecimalFormat format = new DecimalFormat("#,###.##");
-        return format.format(value) + " " + unit;
-    }
-
-    // Formats the given number into a string.
-    private String format(Number number) {
-        DecimalFormat format = new DecimalFormat("#,###");
-        return format.format(number);
-    }
-
-    private boolean isInfrastructureEgress(Link link) {
-        return link.src().elementId() instanceof DeviceId;
-    }
-
-    // Produces compact string representation of a link.
-    private static String compactLinkString(Link link) {
-        return String.format(COMPACT, link.src().elementId(), link.src().port(),
-                             link.dst().elementId(), link.dst().port());
-    }
-
-    // Produces JSON property details.
-    private ObjectNode json(String id, String type, Prop... props) {
-        ObjectMapper mapper = new ObjectMapper();
-        ObjectNode result = mapper.createObjectNode()
-                .put("id", id).put("type", type);
-        ObjectNode pnode = mapper.createObjectNode();
-        ArrayNode porder = mapper.createArrayNode();
-        for (Prop p : props) {
-            porder.add(p.key);
-            pnode.put(p.key, p.value);
-        }
-        result.set("propOrder", porder);
-        result.set("props", pnode);
-        return result;
-    }
-
-    // Produces canonical link key, i.e. one that will match link and its inverse.
-    private LinkKey canonicalLinkKey(Link link) {
-        String sn = link.src().elementId().toString();
-        String dn = link.dst().elementId().toString();
-        return sn.compareTo(dn) < 0 ?
-                linkKey(link.src(), link.dst()) : linkKey(link.dst(), link.src());
-    }
-
-    // Representation of link and its inverse and any traffic data.
-    private class BiLink {
-        public final LinkKey key;
-        public final Link one;
-        public Link two;
-        public boolean hasTraffic = false;
-        public long bytes = 0;
-        public String classes = "";
-
-        BiLink(LinkKey key, Link link) {
-            this.key = key;
-            this.one = link;
-        }
-
-        void setOther(Link link) {
-            this.two = link;
-        }
-
-        void addLoad(Load load) {
-            if (load != null) {
-                this.hasTraffic = hasTraffic || load.rate() > 0;
-                this.bytes += load.latest();
-            }
-        }
-
-        void addClass(String trafficClass) {
-            classes = classes + " " + trafficClass;
-        }
-    }
-
-    // Auxiliary key/value carrier.
-    private class Prop {
-        public final String key;
-        public final String value;
-
-        protected Prop(String key, String value) {
-            this.key = key;
-            this.value = value;
-        }
-    }
-
-    // Auxiliary properties separator
-    private class Separator extends Prop {
-        protected Separator() {
-            super("-", "");
-        }
-    }
-
-    // Auxiliary carrier of data for requesting traffic message.
-    protected class TrafficClass {
-        public final boolean showTraffic;
-        public final String type;
-        public final Iterable<Intent> intents;
-
-        TrafficClass(String type, Iterable<Intent> intents) {
-            this(type, intents, false);
-        }
-
-        TrafficClass(String type, Iterable<Intent> intents, boolean showTraffic) {
-            this.type = type;
-            this.intents = intents;
-            this.showTraffic = showTraffic;
-        }
-    }
-
-}

-/*
- * Copyright 2014-2015 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package org.onosproject.ui.impl;
-
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Set;
-import java.util.Timer;
-import java.util.TimerTask;
-
-import org.eclipse.jetty.websocket.WebSocket;
-import org.onlab.osgi.ServiceDirectory;
-import org.onlab.util.AbstractAccumulator;
-import org.onlab.util.Accumulator;
-import org.onosproject.cluster.ClusterEvent;
-import org.onosproject.cluster.ClusterEventListener;
-import org.onosproject.cluster.ControllerNode;
-import org.onosproject.core.ApplicationId;
-import org.onosproject.core.CoreService;
-import org.onosproject.event.Event;
-import org.onosproject.mastership.MastershipAdminService;
-import org.onosproject.mastership.MastershipEvent;
-import org.onosproject.mastership.MastershipListener;
-import org.onosproject.net.ConnectPoint;
-import org.onosproject.net.Device;
-import org.onosproject.net.Host;
-import org.onosproject.net.HostId;
-import org.onosproject.net.HostLocation;
-import org.onosproject.net.Link;
-import org.onosproject.net.device.DeviceEvent;
-import org.onosproject.net.device.DeviceListener;
-import org.onosproject.net.flow.DefaultTrafficSelector;
-import org.onosproject.net.flow.DefaultTrafficTreatment;
-import org.onosproject.net.flow.FlowRuleEvent;
-import org.onosproject.net.flow.FlowRuleListener;
-import org.onosproject.net.flow.TrafficSelector;
-import org.onosproject.net.flow.TrafficTreatment;
-import org.onosproject.net.host.HostEvent;
-import org.onosproject.net.host.HostListener;
-import org.onosproject.net.intent.HostToHostIntent;
-import org.onosproject.net.intent.Intent;
-import org.onosproject.net.intent.IntentEvent;
-import org.onosproject.net.intent.IntentListener;
-import org.onosproject.net.intent.MultiPointToSinglePointIntent;
-import org.onosproject.net.link.LinkEvent;
-import org.onosproject.net.link.LinkListener;
-
-import com.fasterxml.jackson.databind.JsonNode;
-import com.fasterxml.jackson.databind.node.ArrayNode;
-import com.fasterxml.jackson.databind.node.ObjectNode;
-
-import static com.google.common.base.Strings.isNullOrEmpty;
-import static org.onosproject.cluster.ClusterEvent.Type.INSTANCE_ADDED;
-import static org.onosproject.net.DeviceId.deviceId;
-import static org.onosproject.net.HostId.hostId;
-import static org.onosproject.net.device.DeviceEvent.Type.DEVICE_ADDED;
-import static org.onosproject.net.device.DeviceEvent.Type.DEVICE_UPDATED;
-import static org.onosproject.net.host.HostEvent.Type.HOST_ADDED;
-import static org.onosproject.net.link.LinkEvent.Type.LINK_ADDED;
-
-/**
- * Web socket capable of interacting with the GUI topology view.
- */
-@Deprecated
-public class TopologyViewWebSocket
-        extends TopologyViewMessages
-        implements WebSocket.OnTextMessage, WebSocket.OnControl {
-
-    private static final long MAX_AGE_MS = 15000;
-
-    private static final byte PING = 0x9;
-    private static final byte PONG = 0xA;
-    private static final byte[] PING_DATA = new byte[]{(byte) 0xde, (byte) 0xad};
-
-    private static final String APP_ID = "org.onosproject.gui";
-
-    private static final long TRAFFIC_FREQUENCY = 5000;
-    private static final long SUMMARY_FREQUENCY = 30000;
-
-    private static final Comparator<? super ControllerNode> NODE_COMPARATOR =
-            new Comparator<ControllerNode>() {
-                @Override
-                public int compare(ControllerNode o1, ControllerNode o2) {
-                    return o1.id().toString().compareTo(o2.id().toString());
-                }
-            };
-
-
-    private final Timer timer = new Timer("topology-view");
-
-    private static final int MAX_EVENTS = 1000;
-    private static final int MAX_BATCH_MS = 5000;
-    private static final int MAX_IDLE_MS = 1000;
-
-    private final ApplicationId appId;
-
-    private Connection connection;
-    private FrameConnection control;
-
-    private final ClusterEventListener clusterListener = new InternalClusterListener();
-    private final MastershipListener mastershipListener = new InternalMastershipListener();
-    private final DeviceListener deviceListener = new InternalDeviceListener();
-    private final LinkListener linkListener = new InternalLinkListener();
-    private final HostListener hostListener = new InternalHostListener();
-    private final IntentListener intentListener = new InternalIntentListener();
-    private final FlowRuleListener flowListener = new InternalFlowListener();
-
-    private final Accumulator<Event> eventAccummulator = new InternalEventAccummulator();
-
-    private TimerTask trafficTask;
-    private ObjectNode trafficEvent;
-
-    private TimerTask summaryTask;
-    private ObjectNode summaryEvent;
-
-    private long lastActive = System.currentTimeMillis();
-    private boolean listenersRemoved = false;
-
-    private TopologyViewIntentFilter intentFilter;
-
-    // Current selection context
-    private Set<Host> selectedHosts;
-    private Set<Device> selectedDevices;
-    private List<Intent> selectedIntents;
-    private int currentIntentIndex = -1;
-
-    /**
-     * Creates a new web-socket for serving data to GUI topology view.
-     *
-     * @param directory service directory
-     */
-    public TopologyViewWebSocket(ServiceDirectory directory) {
-        super(directory);
-        intentFilter = new TopologyViewIntentFilter(intentService, deviceService,
-                                                    hostService, linkService);
-        appId = directory.get(CoreService.class).registerApplication(APP_ID);
-    }
-
-    /**
-     * Issues a close on the connection.
-     */
-    synchronized void close() {
-        removeListeners();
-        if (connection.isOpen()) {
-            connection.close();
-        }
-    }
-
-    /**
-     * Indicates if this connection is idle.
-     *
-     * @return true if idle or closed
-     */
-    synchronized boolean isIdle() {
-        boolean idle = (System.currentTimeMillis() - lastActive) > MAX_AGE_MS;
-        if (idle || (connection != null && !connection.isOpen())) {
-            return true;
-        } else if (connection != null) {
-            try {
-                control.sendControl(PING, PING_DATA, 0, PING_DATA.length);
-            } catch (IOException e) {
-                log.warn("Unable to send ping message due to: ", e);
-            }
-        }
-        return false;
-    }
-
-    @Override
-    public void onOpen(Connection connection) {
-        log.info("Legacy GUI client connected");
-        this.connection = connection;
-        this.control = (FrameConnection) connection;
-        addListeners();
-
-        sendAllInstances(null);
-        sendAllDevices();
-        sendAllLinks();
-        sendAllHosts();
-    }
-
-    @Override
-    public synchronized void onClose(int closeCode, String message) {
-        removeListeners();
-        timer.cancel();
-        log.info("Legacy GUI client disconnected");
-    }
-
-    @Override
-    public boolean onControl(byte controlCode, byte[] data, int offset, int length) {
-        lastActive = System.currentTimeMillis();
-        return true;
-    }
-
-    @Override
-    public void onMessage(String data) {
-        lastActive = System.currentTimeMillis();
-        try {
-            processMessage((ObjectNode) mapper.reader().readTree(data));
-        } catch (Exception e) {
-            log.warn("Unable to parse GUI request {} due to {}", data, e);
-            log.debug("Boom!!!", e);
-        }
-    }
-
-    // Processes the specified event.
-    private void processMessage(ObjectNode event) {
-        String type = string(event, "event", "unknown");
-        if (type.equals("requestDetails")) {
-            requestDetails(event);
-        } else if (type.equals("updateMeta")) {
-            updateMetaUi(event);
-
-        } else if (type.equals("addHostIntent")) {
-            createHostIntent(event);
-        } else if (type.equals("addMultiSourceIntent")) {
-            createMultiSourceIntent(event);
-
-        } else if (type.equals("requestRelatedIntents")) {
-            stopTrafficMonitoring();
-            requestRelatedIntents(event);
-
-        } else if (type.equals("requestNextRelatedIntent")) {
-            stopTrafficMonitoring();
-            requestAnotherRelatedIntent(event, +1);
-        } else if (type.equals("requestPrevRelatedIntent")) {
-            stopTrafficMonitoring();
-            requestAnotherRelatedIntent(event, -1);
-        } else if (type.equals("requestSelectedIntentTraffic")) {
-            requestSelectedIntentTraffic(event);
-            startTrafficMonitoring(event);
-
-        } else if (type.equals("requestAllTraffic")) {
-            requestAllTraffic(event);
-            startTrafficMonitoring(event);
-
-        } else if (type.equals("requestDeviceLinkFlows")) {
-            requestDeviceLinkFlows(event);
-            startTrafficMonitoring(event);
-
-        } else if (type.equals("cancelTraffic")) {
-            cancelTraffic(event);
-
-        } else if (type.equals("requestSummary")) {
-            requestSummary(event);
-            startSummaryMonitoring(event);
-        } else if (type.equals("cancelSummary")) {
-            stopSummaryMonitoring();
-
-        } else if (type.equals("equalizeMasters")) {
-            equalizeMasters(event);
-        }
-    }
-
-    // Sends the specified data to the client.
-    protected synchronized void sendMessage(ObjectNode data) {
-        try {
-            if (connection.isOpen()) {
-                connection.sendMessage(data.toString());
-            }
-        } catch (IOException e) {
-            log.warn("Unable to send message {} to GUI due to {}", data, e);
-            log.debug("Boom!!!", e);
-        }
-    }
-
-    // Sends all controller nodes to the client as node-added messages.
-    private void sendAllInstances(String messageType) {
-        List<ControllerNode> nodes = new ArrayList<>(clusterService.getNodes());
-        Collections.sort(nodes, NODE_COMPARATOR);
-        for (ControllerNode node : nodes) {
-            sendMessage(instanceMessage(new ClusterEvent(INSTANCE_ADDED, node),
-                                        messageType));
-        }
-    }
-
-    // Sends all devices to the client as device-added messages.
-    private void sendAllDevices() {
-        // Send optical first, others later for layered rendering
-        for (Device device : deviceService.getDevices()) {
-            if (device.type() == Device.Type.ROADM) {
-                sendMessage(deviceMessage(new DeviceEvent(DEVICE_ADDED, device)));
-            }
-        }
-        for (Device device : deviceService.getDevices()) {
-            if (device.type() != Device.Type.ROADM) {
-                sendMessage(deviceMessage(new DeviceEvent(DEVICE_ADDED, device)));
-            }
-        }
-    }
-
-    // Sends all links to the client as link-added messages.
-    private void sendAllLinks() {
-        // Send optical first, others later for layered rendering
-        for (Link link : linkService.getLinks()) {
-            if (link.type() == Link.Type.OPTICAL) {
-                sendMessage(linkMessage(new LinkEvent(LINK_ADDED, link)));
-            }
-        }
-        for (Link link : linkService.getLinks()) {
-            if (link.type() != Link.Type.OPTICAL) {
-                sendMessage(linkMessage(new LinkEvent(LINK_ADDED, link)));
-            }
-        }
-    }
-
-    // Sends all hosts to the client as host-added messages.
-    private void sendAllHosts() {
-        for (Host host : hostService.getHosts()) {
-            sendMessage(hostMessage(new HostEvent(HOST_ADDED, host)));
-        }
-    }
-
-    // Sends back device or host details.
-    private void requestDetails(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        String type = string(payload, "class", "unknown");
-        long sid = number(event, "sid");
-
-        if (type.equals("device")) {
-            sendMessage(deviceDetails(deviceId(string(payload, "id")), sid));
-        } else if (type.equals("host")) {
-            sendMessage(hostDetails(hostId(string(payload, "id")), sid));
-        }
-    }
-
-
-    // Creates host-to-host intent.
-    private void createHostIntent(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        long id = number(event, "sid");
-        // TODO: add protection against device ids and non-existent hosts.
-        HostId one = hostId(string(payload, "one"));
-        HostId two = hostId(string(payload, "two"));
-
-        HostToHostIntent intent =
-                HostToHostIntent.builder()
-                        .appId(appId)
-                        .one(one)
-                        .two(two)
-                        .build();
-
-
-        intentService.submit(intent);
-        startMonitoringIntent(event, intent);
-    }
-
-    // Creates multi-source-to-single-dest intent.
-    private void createMultiSourceIntent(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        long id = number(event, "sid");
-        // TODO: add protection against device ids and non-existent hosts.
-        Set<HostId> src = getHostIds((ArrayNode) payload.path("src"));
-        HostId dst = hostId(string(payload, "dst"));
-        Host dstHost = hostService.getHost(dst);
-
-        Set<ConnectPoint> ingressPoints = getHostLocations(src);
-
-        // FIXME: clearly, this is not enough
-        TrafficSelector selector = DefaultTrafficSelector.builder()
-                .matchEthDst(dstHost.mac()).build();
-        TrafficTreatment treatment = DefaultTrafficTreatment.emptyTreatment();
-
-        MultiPointToSinglePointIntent intent =
-                MultiPointToSinglePointIntent.builder()
-                        .appId(appId)
-                        .selector(selector)
-                        .treatment(treatment)
-                        .ingressPoints(ingressPoints)
-                        .egressPoint(dstHost.location())
-                        .build();
-
-        intentService.submit(intent);
-        startMonitoringIntent(event, intent);
-    }
-
-
-    private synchronized void startMonitoringIntent(ObjectNode event, Intent intent) {
-        selectedHosts = new HashSet<>();
-        selectedDevices = new HashSet<>();
-        selectedIntents = new ArrayList<>();
-        selectedIntents.add(intent);
-        currentIntentIndex = -1;
-        requestAnotherRelatedIntent(event, +1);
-        requestSelectedIntentTraffic(event);
-    }
-
-
-    private Set<ConnectPoint> getHostLocations(Set<HostId> hostIds) {
-        Set<ConnectPoint> points = new HashSet<>();
-        for (HostId hostId : hostIds) {
-            points.add(getHostLocation(hostId));
-        }
-        return points;
-    }
-
-    private HostLocation getHostLocation(HostId hostId) {
-        return hostService.getHost(hostId).location();
-    }
-
-    // Produces a list of host ids from the specified JSON array.
-    private Set<HostId> getHostIds(ArrayNode ids) {
-        Set<HostId> hostIds = new HashSet<>();
-        for (JsonNode id : ids) {
-            hostIds.add(hostId(id.asText()));
-        }
-        return hostIds;
-    }
-
-
-    private synchronized long startTrafficMonitoring(ObjectNode event) {
-        stopTrafficMonitoring();
-        trafficEvent = event;
-        trafficTask = new TrafficMonitor();
-        timer.schedule(trafficTask, TRAFFIC_FREQUENCY, TRAFFIC_FREQUENCY);
-        return number(event, "sid");
-    }
-
-    private synchronized void stopTrafficMonitoring() {
-        if (trafficTask != null) {
-            trafficTask.cancel();
-            trafficTask = null;
-            trafficEvent = null;
-        }
-    }
-
-    // Subscribes for host traffic messages.
-    private synchronized void requestAllTraffic(ObjectNode event) {
-        long sid = startTrafficMonitoring(event);
-        sendMessage(trafficSummaryMessage(sid));
-    }
-
-    private void requestDeviceLinkFlows(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        long sid = startTrafficMonitoring(event);
-
-        // Get the set of selected hosts and their intents.
-        ArrayNode ids = (ArrayNode) payload.path("ids");
-        Set<Host> hosts = new HashSet<>();
-        Set<Device> devices = getDevices(ids);
-
-        // If there is a hover node, include it in the hosts and find intents.
-        String hover = string(payload, "hover");
-        if (!isNullOrEmpty(hover)) {
-            addHover(hosts, devices, hover);
-        }
-        sendMessage(flowSummaryMessage(sid, devices));
-    }
-
-
-    // Requests related intents message.
-    private synchronized void requestRelatedIntents(ObjectNode event) {
-        ObjectNode payload = payload(event);
-        if (!payload.has("ids")) {
-            return;
-        }
-
-        long sid = number(event, "sid");
-
-        // Cancel any other traffic monitoring mode.
-        stopTrafficMonitoring();
-
-        // Get the set of selected hosts and their intents.
-        ArrayNode ids = (ArrayNode) payload.path("ids");
-        selectedHosts = getHosts(ids);
-        selectedDevices = getDevices(ids);
-        selectedIntents = intentFilter.findPathIntents(selectedHosts, selectedDevices,
-                                                       intentService.getIntents());
-        currentIntentIndex = -1;
-
-        if (haveSelectedIntents()) {
-            // Send a message to highlight all links of all monitored intents.
-            sendMessage(trafficMessage(sid, new TrafficClass("primary", selectedIntents)));
-        }
-
-        // FIXME: Re-introduce one the client click vs hover gesture stuff is sorted out.
-//        String hover = string(payload, "hover");
-//        if (!isNullOrEmpty(hover)) {
-//            // If there is a hover node, include it in the selection and find intents.
-//            processHoverExtendedSelection(sid, hover);
-//        }
-    }
-
-    private boolean haveSelectedIntents() {
-        return selectedIntents != null && !selectedIntents.isEmpty();
-    }
-
-    // Processes the selection extended with hovered item to segregate items
-    // into primary (those including the hover) vs secondary highlights.
-    private void processHoverExtendedSelection(long sid, String hover) {
-        Set<Host> hoverSelHosts = new HashSet<>(selectedHosts);
-        Set<Device> hoverSelDevices = new HashSet<>(selectedDevices);
-        addHover(hoverSelHosts, hoverSelDevices, hover);
-
-        List<Intent> primary = selectedIntents == null ? new ArrayList<>() :
-                intentFilter.findPathIntents(hoverSelHosts, hoverSelDevices,
-                                             selectedIntents);
-        Set<Intent> secondary = new HashSet<>(selectedIntents);
-        secondary.removeAll(primary);
-
-        // Send a message to highlight all links of all monitored intents.
-        sendMessage(trafficMessage(sid, new TrafficClass("primary", primary),
-                                   new TrafficClass("secondary", secondary)));
-    }
-
-    // Requests next or previous related intent.
-    private void requestAnotherRelatedIntent(ObjectNode event, int offset) {
-        if (haveSelectedIntents()) {
-            currentIntentIndex = currentIntentIndex + offset;
-            if (currentIntentIndex < 0) {
-                currentIntentIndex = selectedIntents.size() - 1;
-            } else if (currentIntentIndex >= selectedIntents.size()) {
-                currentIntentIndex = 0;
-            }
-            sendSelectedIntent(event);
-        }
-    }
-
-    // Sends traffic information on the related intents with the currently
-    // selected intent highlighted.
-    private void sendSelectedIntent(ObjectNode event) {
-        Intent selectedIntent = selectedIntents.get(currentIntentIndex);
-        log.info("Requested next intent {}", selectedIntent.id());
-
-        Set<Intent> primary = new HashSet<>();
-        primary.add(selectedIntent);
-
-        Set<Intent> secondary = new HashSet<>(selectedIntents);
-        secondary.remove(selectedIntent);
-
-        // Send a message to highlight all links of the selected intent.
-        sendMessage(trafficMessage(number(event, "sid"),
-                                   new TrafficClass("primary", primary),
-                                   new TrafficClass("secondary", secondary)));
-    }
-
-    // Requests monitoring of traffic for the selected intent.
-    private void requestSelectedIntentTraffic(ObjectNode event) {
-        if (haveSelectedIntents()) {
-            if (currentIntentIndex < 0) {
-                currentIntentIndex = 0;
-            }
-            Intent selectedIntent = selectedIntents.get(currentIntentIndex);
-            log.info("Requested traffic for selected {}", selectedIntent.id());
-
-            Set<Intent> primary = new HashSet<>();
-            primary.add(selectedIntent);
-
-            // Send a message to highlight all links of the selected intent.
-            sendMessage(trafficMessage(number(event, "sid"),
-                                       new TrafficClass("primary", primary, true)));
-        }
-    }
-
-    // Cancels sending traffic messages.
-    private void cancelTraffic(ObjectNode event) {
-        selectedIntents = null;
-        sendMessage(trafficMessage(number(event, "sid")));
-        stopTrafficMonitoring();
-    }
-
-
-    private synchronized long startSummaryMonitoring(ObjectNode event) {
-        stopSummaryMonitoring();
-        summaryEvent = event;
-        summaryTask = new SummaryMonitor();
-        timer.schedule(summaryTask, SUMMARY_FREQUENCY, SUMMARY_FREQUENCY);
-        return number(event, "sid");
-    }
-
-    private synchronized void stopSummaryMonitoring() {
-        if (summaryEvent != null) {
-            summaryTask.cancel();
-            summaryTask = null;
-            summaryEvent = null;
-        }
-    }
-
-    // Subscribes for summary messages.
-    private synchronized void requestSummary(ObjectNode event) {
-        sendMessage(summmaryMessage(number(event, "sid")));
-    }
-
-
-    // Forces mastership role rebalancing.
-    private void equalizeMasters(ObjectNode event) {
-        directory.get(MastershipAdminService.class).balanceRoles();
-    }
-
-
-    // Adds all internal listeners.
-    private void addListeners() {
-        clusterService.addListener(clusterListener);
-        mastershipService.addListener(mastershipListener);
-        deviceService.addListener(deviceListener);
-        linkService.addListener(linkListener);
-        hostService.addListener(hostListener);
-        intentService.addListener(intentListener);
-        flowService.addListener(flowListener);
-    }
-
-    // Removes all internal listeners.
-    private synchronized void removeListeners() {
-        if (!listenersRemoved) {
-            listenersRemoved = true;
-            clusterService.removeListener(clusterListener);
-            mastershipService.removeListener(mastershipListener);
-            deviceService.removeListener(deviceListener);
-            linkService.removeListener(linkListener);
-            hostService.removeListener(hostListener);
-            intentService.removeListener(intentListener);
-            flowService.removeListener(flowListener);
-        }
-    }
-
-    // Cluster event listener.
-    private class InternalClusterListener implements ClusterEventListener {
-        @Override
-        public void event(ClusterEvent event) {
-            sendMessage(instanceMessage(event, null));
-        }
-    }
-
-    // Mastership change listener
-    private class InternalMastershipListener implements MastershipListener {
-        @Override
-        public void event(MastershipEvent event) {
-            sendAllInstances("updateInstance");
-            Device device = deviceService.getDevice(event.subject());
-            sendMessage(deviceMessage(new DeviceEvent(DEVICE_UPDATED, device)));
-        }
-    }
-
-    // Device event listener.
-    private class InternalDeviceListener implements DeviceListener {
-        @Override
-        public void event(DeviceEvent event) {
-            sendMessage(deviceMessage(event));
-            eventAccummulator.add(event);
-        }
-    }
-
-    // Link event listener.
-    private class InternalLinkListener implements LinkListener {
-        @Override
-        public void event(LinkEvent event) {
-            sendMessage(linkMessage(event));
-            eventAccummulator.add(event);
-        }
-    }
-
-    // Host event listener.
-    private class InternalHostListener implements HostListener {
-        @Override
-        public void event(HostEvent event) {
-            sendMessage(hostMessage(event));
-            eventAccummulator.add(event);
-        }
-    }
-
-    // Intent event listener.
-    private class InternalIntentListener implements IntentListener {
-        @Override
-        public void event(IntentEvent event) {
-            if (trafficEvent != null) {
-                requestSelectedIntentTraffic(trafficEvent);
-            }
-            eventAccummulator.add(event);
-        }
-    }
-
-    // Intent event listener.
-    private class InternalFlowListener implements FlowRuleListener {
-        @Override
-        public void event(FlowRuleEvent event) {
-            eventAccummulator.add(event);
-        }
-    }
-
-    // Periodic update of the traffic information
-    private class TrafficMonitor extends TimerTask {
-        @Override
-        public void run() {
-            try {
-                if (trafficEvent != null) {
-                    String type = string(trafficEvent, "event", "unknown");
-                    if (type.equals("requestAllTraffic")) {
-                        requestAllTraffic(trafficEvent);
-                    } else if (type.equals("requestDeviceLinkFlows")) {
-                        requestDeviceLinkFlows(trafficEvent);
-                    } else if (type.equals("requestSelectedIntentTraffic")) {
-                        requestSelectedIntentTraffic(trafficEvent);
-                    }
-                }
-            } catch (Exception e) {
-                log.warn("Unable to handle traffic request due to {}", e.getMessage());
-                log.debug("Boom!", e);
-            }
-        }
-    }
-
-    // Periodic update of the summary information
-    private class SummaryMonitor extends TimerTask {
-        @Override
-        public void run() {
-            try {
-                if (summaryEvent != null) {
-                    requestSummary(summaryEvent);
-                }
-            } catch (Exception e) {
-                log.warn("Unable to handle summary request due to {}", e.getMessage());
-                log.debug("Boom!", e);
-            }
-        }
-    }
-
-    // Accumulates events to drive methodic update of the summary pane.
-    private class InternalEventAccummulator extends AbstractAccumulator<Event> {
-        protected InternalEventAccummulator() {
-            super(new Timer("topo-summary"), MAX_EVENTS, MAX_BATCH_MS, MAX_IDLE_MS);
-        }
-
-        @Override
-        public void processItems(List<Event> items) {
-            try {
-                if (summaryEvent != null) {
-                    sendMessage(summmaryMessage(0));
-                }
-            } catch (Exception e) {
-                log.warn("Unable to handle summary request due to {}", e.getMessage());
-                log.debug("Boom!", e);
-            }
-        }
-    }
-}
-

@@ -161,15 +161,4 @@
         <url-pattern>/websock/*</url-pattern>
         <url-pattern>/websock/*</url-pattern>
     </servlet-mapping>
     </servlet-mapping>
 
 
-    <servlet>
-        <servlet-name>Legacy Web Socket Service</servlet-name>
-        <servlet-class>org.onosproject.ui.impl.GuiWebSocketServlet</servlet-class>
-        <load-on-startup>2</load-on-startup>
-    </servlet>
-
-    <servlet-mapping>
-        <servlet-name>Legacy Web Socket Service</servlet-name>
-        <url-pattern>/ws/*</url-pattern>
-    </servlet-mapping>
-
 </web-app>
 </web-app>

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Base CSS file
- */
-
-html {
-    font-family: sans-serif;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-}
-
-body {
-    margin: 0;
-}

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- D3 Utilities CSS file
- */
-
-#d3u .light.norm.c1 {
-  color: #1f77b4;
-}
-
-#d3u .light.norm.c2 {
-  color: #2ca02c;
-}
-
-#d3u .light.norm.c3 {
-  color: #d62728;
-}
-
-#d3u .light.norm.c4 {
-  color: #9467bd;
-}
-
-#d3u .light.norm.c5 {
-  color: #e377c2;
-}
-
-#d3u .light.norm.c6 {
-  color: #bcbd22;
-}
-
-#d3u .light.norm.c7 {
-  color: #17becf;
-}
-
-
-
-#d3u .light.mute.c1 {
-  color: #aec7e8;
-}
-
-#d3u .light.mute.c2 {
-  color: #98df8a;
-}
-
-#d3u .light.mute.c3 {
-  color: #ff9896;
-}
-
-#d3u .light.mute.c4 {
-  color: #c5b0d5;
-}
-
-#d3u .light.mute.c5 {
-  color: #f7b6d2;
-}
-
-#d3u .light.mute.c6 {
-  color: #dbdb8d;
-}
-
-#d3u .light.mute.c7 {
-  color: #9edae5;
-}
-
-
-
-#d3u .dark.norm.c1 {
-  color: #1f77b4;
-}
-
-#d3u .dark.norm.c2 {
-  color: #2ca02c;
-}
-
-#d3u .dark.norm.c3 {
-  color: #d62728;
-}
-
-#d3u .dark.norm.c4 {
-  color: #9467bd;
-}
-
-#d3u .dark.norm.c5 {
-  color: #e377c2;
-}
-
-#d3u .dark.norm.c6 {
-  color: #bcbd22;
-}
-
-#d3u .dark.norm.c7 {
-  color: #17becf;
-}
-
-
-
-#d3u .dark.mute.c1 {
-  color: #aec7e8;
-}
-
-#d3u .dark.mute.c2 {
-  color: #639a56;
-}
-
-#d3u .dark.mute.c3 {
-  color: #ff9896;
-}
-
-#d3u .dark.mute.c4 {
-  color: #c5b0d5;
-}
-
-#d3u .dark.mute.c5 {
-  color: #f7b6d2;
-}
-
-#d3u .dark.mute.c6 {
-  color: #dbdb8d;
-}
-
-#d3u .dark.mute.c7 {
-  color: #9edae5;
-}
-

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Utility functions for D3 visualizations.
- */
-
-(function (onos) {
-    'use strict';
-
-    function isF(f) {
-        return $.isFunction(f) ? f : null;
-    }
-
-    // TODO: sensible defaults
-    function createDragBehavior(force, selectCb, atDragEnd,
-                                dragEnabled, clickEnabled) {
-        var draggedThreshold = d3.scale.linear()
-                .domain([0, 0.1])
-                .range([5, 20])
-                .clamp(true),
-            drag,
-            fSel = isF(selectCb),
-            fEnd = isF(atDragEnd),
-            fDEn = isF(dragEnabled),
-            fCEn = isF(clickEnabled),
-            bad = [];
-
-        function naf(what) {
-            return 'd3util.createDragBehavior(): '+ what + ' is not a function';
-        }
-
-        if (!fSel) {
-            bad.push(naf('selectCb'));
-        }
-        if (!fEnd) {
-            bad.push(naf('atDragEnd'));
-        }
-        if (!fDEn) {
-            bad.push(naf('dragEnabled'));
-        }
-        if (!fCEn) {
-            bad.push(naf('clickEnabled'));
-        }
-
-        if (bad.length) {
-            alert(bad.join('\n'));
-            return null;
-        }
-
-
-        function dragged(d) {
-            var threshold = draggedThreshold(force.alpha()),
-                dx = d.oldX - d.px,
-                dy = d.oldY - d.py;
-            if (Math.abs(dx) >= threshold || Math.abs(dy) >= threshold) {
-                d.dragged = true;
-            }
-            return d.dragged;
-        }
-
-        drag = d3.behavior.drag()
-            .origin(function(d) { return d; })
-            .on('dragstart', function(d) {
-                if (clickEnabled() || dragEnabled()) {
-                    d3.event.sourceEvent.stopPropagation();
-
-                    d.oldX = d.x;
-                    d.oldY = d.y;
-                    d.dragged = false;
-                    d.fixed |= 2;
-                    d.dragStarted = true;
-                }
-            })
-            .on('drag', function(d) {
-                if (dragEnabled()) {
-                    d.px = d3.event.x;
-                    d.py = d3.event.y;
-                    if (dragged(d)) {
-                        if (!force.alpha()) {
-                            force.alpha(.025);
-                        }
-                    }
-                }
-            })
-            .on('dragend', function(d) {
-                if (d.dragStarted) {
-                    d.dragStarted = false;
-                    if (!dragged(d)) {
-                        // consider this the same as a 'click'
-                        // (selection of a node)
-                        if (clickEnabled()) {
-                            selectCb(d, this); // TODO: set 'this' context instead of param
-                        }
-                    }
-                    d.fixed &= ~6;
-
-                    // hook at the end of a drag gesture
-                    if (dragEnabled()) {
-                        atDragEnd(d, this); // TODO: set 'this' context instead of param
-                    }
-                }
-            });
-
-        return drag;
-    }
-
-    function loadGlow(defs) {
-        // TODO: parameterize color
-
-        var glow = defs.append('filter')
-            .attr('x', '-50%')
-            .attr('y', '-50%')
-            .attr('width', '200%')
-            .attr('height', '200%')
-            .attr('id', 'blue-glow');
-
-        glow.append('feColorMatrix')
-            .attr('type', 'matrix')
-            .attr('values',
-                '0 0 0 0  0 ' +
-                '0 0 0 0  0 ' +
-                '0 0 0 0  .7 ' +
-                '0 0 0 1  0 ');
-
-        glow.append('feGaussianBlur')
-            .attr('stdDeviation', 3)
-            .attr('result', 'coloredBlur');
-
-        glow.append('feMerge').selectAll('feMergeNode')
-            .data(['coloredBlur', 'SourceGraphic'])
-            .enter().append('feMergeNode')
-            .attr('in', String);
-    }
-
-    // --- Ordinal scales for 7 values.
-    // TODO: tune colors for light and dark themes
-    // Note: These colors look good on the white background. Still, need to tune for dark.
-
-    //               blue       brown      brick red  sea green  purple     dark teal  lime
-    var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
-        lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
-
-        darkNorm  = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
-        darkMute  = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'];
-
-    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,
-        loadGlow: loadGlow,
-        cat7: cat7
-    });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Geometry library - based on work by Mike Bostock.
- */
-
-(function() {
-
-    if (typeof geo == 'undefined') {
-        geo = {};
-    }
-
-    var tolerance = 1e-10;
-
-    function eq(a, b) {
-        return (Math.abs(a - b) < tolerance);
-    }
-
-    function gt(a, b) {
-        return (a - b > -tolerance);
-    }
-
-    function lt(a, b) {
-        return gt(b, a);
-    }
-
-    geo.eq = eq;
-    geo.gt = gt;
-    geo.lt = lt;
-
-    geo.LineSegment = function(x1, y1, x2, y2) {
-        this.x1 = x1;
-        this.y1 = y1;
-        this.x2 = x2;
-        this.y2 = y2;
-
-        // Ax + By = C
-        this.a = y2 - y1;
-        this.b = x1 - x2;
-        this.c = x1 * this.a + y1 * this.b;
-
-        if (eq(this.a, 0) && eq(this.b, 0)) {
-            throw new Error(
-                'Cannot construct a LineSegment with two equal endpoints.');
-        }
-    };
-
-    geo.LineSegment.prototype.intersect = function(that) {
-        var d = (this.x1 - this.x2) * (that.y1 - that.y2) -
-            (this.y1 - this.y2) * (that.x1 - that.x2);
-
-        if (eq(d, 0)) {
-            // The two lines are parallel or very close.
-            return {
-                x : NaN,
-                y : NaN
-            };
-        }
-
-        var t1  = this.x1 * this.y2 - this.y1 * this.x2,
-            t2  = that.x1 * that.y2 - that.y1 * that.x2,
-            x   = (t1 * (that.x1 - that.x2) - t2 * (this.x1 - this.x2)) / d,
-            y   = (t1 * (that.y1 - that.y2) - t2 * (this.y1 - this.y2)) / d,
-            in1 = (gt(x, Math.min(this.x1, this.x2)) && lt(x, Math.max(this.x1, this.x2)) &&
-                gt(y, Math.min(this.y1, this.y2)) && lt(y, Math.max(this.y1, this.y2))),
-            in2 = (gt(x, Math.min(that.x1, that.x2)) && lt(x, Math.max(that.x1, that.x2)) &&
-                gt(y, Math.min(that.y1, that.y2)) && lt(y, Math.max(that.y1, that.y2)));
-
-        return {
-            x   : x,
-            y   : y,
-            in1 : in1,
-            in2 : in2
-        };
-    };
-
-    geo.LineSegment.prototype.x = function(y) {
-        // x = (C - By) / a;
-        if (this.a) {
-            return (this.c - this.b * y) / this.a;
-        } else {
-            // a == 0 -> horizontal line
-            return NaN;
-        }
-    };
-
-    geo.LineSegment.prototype.y = function(x) {
-        // y = (C - Ax) / b;
-        if (this.b) {
-            return (this.c - this.a * x) / this.b;
-        } else {
-            // b == 0 -> vertical line
-            return NaN;
-        }
-    };
-
-    geo.LineSegment.prototype.length = function() {
-        return Math.sqrt(
-                (this.y2 - this.y1) * (this.y2 - this.y1) +
-                (this.x2 - this.x1) * (this.x2 - this.x1));
-    };
-
-    geo.LineSegment.prototype.offset = function(x, y) {
-        return new geo.LineSegment(
-                this.x1 + x, this.y1 + y,
-                this.x2 + x, this.y2 + y);
-    };
-
-})();

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS -- SVG Glyphs Library.
- */
-
-
-(function (onos) {
-    'use strict';
-
-    var birdViewBox = '352 224 113 112',
-
-        birdData = {
-            bird: "M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9," +
-            "9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3," +
-            "1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6," +
-            "3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1," +
-            "1-1.9,1.9-2.9,2.9c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5" +
-            "-1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18c18.3" +
-            "-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2," +
-            "0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6c-2.3" +
-            "-1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4," +
-            "6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7c-2-11.2-8.4" +
-            "-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2" +
-            "C429.9,285.5,426.7,293.2,427.7,300.4z"
-        },
-
-        glyphViewBox = '0 0 110 110',
-
-        glyphData = {
-            unknown: "M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5" +
-            "h-30a5,5,0,0,1-5-5z",
-
-            node: "M15,100a5,5,0,0,1-5-5v-65a5,5,0,0,1,5-5h80a5,5,0,0,1,5,5" +
-            "v65a5,5,0,0,1-5,5zM14,22.5l11-11a10,3,0,0,1,10-2h40a10,3,0,0,1," +
-            "10,2l11,11zM16,35a5,5,0,0,1,10,0a5,5,0,0,1-10,0z",
-
-            switch: "M10,20a10,10,0,0,1,10-10h70a10,10,0,0,1,10,10v70a10,10," +
-            "0,0,1-10,10h-70a10,10,0,0,1-10-10zM60,26l12,0,0-8,18,13-18,13,0" +
-            "-8-12,0zM60,60l12,0,0-8,18,13-18,13,0-8-12,0zM50,40l-12,0,0-8" +
-            "-18,13,18,13,0-8,12,0zM50,74l-12,0,0-8-18,13,18,13,0-8,12,0z",
-
-            roadm: "M10,35l25-25h40l25,25v40l-25,25h-40l-25-25zM58,26l12,0,0" +
-            "-8,18,13-18,13,0-8-12,0zM58,60l12,0,0-8,18,13-18,13,0-8-12,0z" +
-            "M52,40l-12,0,0-8-18,13,18,13,0-8,12,0zM52,74l-12,0,0-8-18,13," +
-            "18,13,0-8,12,0z",
-
-            endstation: "M10,15a5,5,0,0,1,5-5h65a5,5,0,0,1,5,5v80a5,5,0,0,1" +
-            "-5,5h-65a5,5,0,0,1-5-5zM87.5,14l11,11a3,10,0,0,1,2,10v40a3,10," +
-            "0,0,1,-2,10l-11,11zM17,19a2,2,0,0,1,2-2h56a2,2,0,0,1,2,2v26a2," +
-            "2,0,0,1-2,2h-56a2,2,0,0,1-2-2zM20,20h54v10h-54zM20,33h54v10h" +
-            "-54zM42,70a5,5,0,0,1,10,0a5,5,0,0,1-10,0z",
-
-            router: "M10,55A45,45,0,0,1,100,55A45,45,0,0,1,10,55M20,50l12,0," +
-            "0-8,18,13-18,13,0-8-12,0zM90,50l-12,0,0-8-18,13,18,13,0-8,12,0z" +
-            "M50,47l0-12-8,0,13-18,13,18-8,0,0,12zM50,63l0,12-8,0,13,18,13" +
-            "-18-8,0,0-12z",
-
-            bgpSpeaker: "M10,40a45,35,0,0,1,90,0Q100,77,55,100Q10,77,10,40z" +
-            "M50,29l12,0,0-8,18,13-18,13,0-8-12,0zM60,57l-12,0,0-8-18,13," +
-            "18,13,0-8,12,0z",
- 
-            chain: "M60.4,77.6c-4.9,5.2-9.6,11.3-15.3,16.3c-8.6,7.5-20.4,6.8" +
-            "-28-0.8c-7.7-7.7-8.4-19.6-0.8-28.4c6.5-7.4,13.5-14.4,20.9-20.9" +
-            "c7.5-6.7,19.2-6.7,26.5-0.8c3.5,2.8,4.4,6.1,2.2,8.7c-2.7,3.1" +
-            "-5.5,2.5-8.5,0.3c-4.7-3.4-9.7-3.2-14,0.9C37.1,58.7,31,64.8," +
-            "25.2,71c-4.2,4.4-4.2,10.6-0.6,14.3c3.7,3.7,9.7,3.7,14.3-0.4" +
-            "c2.9-2.5,5.3-5.5,8.3-8c1-0.9,3-1.1,4.4-0.9C54.8,76.3,57.9,77.1," +
-            "60.4,77.6zM49.2,32.2c5-5.2,9.7-10.9,15.2-15.7c12.8-11,31.2" +
-            "-4.9,34.3,11.2C100,34.2,98.3,40.2,94,45c-6.7,7.4-13.7,14.6" +
-            "-21.2,21.2C65.1,73,53.2,72.7,46,66.5c-3.2-2.8-3.9-5.8-1.6-8.4" +
-            "c2.6-2.9,5.3-2.4,8.2-0.3c5.2,3.7,10,3.3,14.7-1.1c5.8-5.6,11.6" +
-            "-11.3,17.2-17.2c4.6-4.8,4.9-11.1,0.9-15c-3.9-3.9-10.1-3.4-15," +
-            "1.2c-3.1,2.9-5.7,7.4-9.3,8.5C57.6,35.3,53,33,49.2,32.2z",
-
-            crown: "M99.5,21.6c0,3-2.3,5.4-5.1,5.4c-0.3,0-0.7,0-1-0.1c-1.8," +
-            "4-4.8,10-7.2,17.3c-3.4,10.6-0.9,26.2,2.7,27.3C90.4,72,91.3," +
-            "75,88,75H22.7c-3.3,0-2.4-3-0.9-3.5c3.6-1.1,6.1-16.7,2.7-27.3" +
-            "c-2.4-7.4-5.4-13.5-7.2-17.5c-0.5,0.2-1,0.3-1.6,0.3c-2.8,0" +
-            "-5.1-2.4-5.1-5.4c0-3,2.3-5.4,5.1-5.4c2.8,0,5.1,2.4,5.1,5.4c0," +
-            "1-0.2,1.9-0.7,2.7c0.7,0.8,1.4,1.6,2.4,2.6c8.8,8.9,11.9,12.7," +
-            "18.1,11.7c6.5-1,11-8.2,13.3-14.1c-2-0.8-3.3-2.7-3.3-5.1c0-3," +
-            "2.3-5.4,5.1-5.4c2.8,0,5.1,2.4,5.1,5.4c0,2.5-1.6,4.5-3.7,5.2" +
-            "c2.3,5.9,6.8,13,13.2,14c6.2,1,9.3-2.7,18.1-11.7c0.7-0.7,1.4" +
-            "-1.5,2-2.1c-0.6-0.9-1-2-1-3.1c0-3,2.3-5.4,5.1-5.4C97.2,16.2," +
-            "99.5,18.6,99.5,21.6zM92,87.9c0,2.2-1.7,4.1-3.8,4.1H22.4c" +
-            "-2.1,0-4.4-1.9-4.4-4.1v-3.3c0-2.2,2.3-4.5,4.4-4.5h65.8c2.1," +
-            "0,3.8,2.3,3.8,4.5V87.9z"
-        },
-
-        badgeViewBox = '0 0 10 10',
-
-        badgeData = {
-            uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" +
-            "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," +
-            ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
-            "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z"
-        };
-
-    function defStuff(defs, viewbox, data) {
-        d3.map(data).keys().forEach(function (key) {
-            defs.append('symbol')
-                .attr({ id: key, viewBox: viewbox })
-                .append('path').attr('d', data[key]);
-        });
-    }
-
-    function loadDefs(defs) {
-        defStuff(defs, birdViewBox,  birdData);
-        defStuff(defs, glyphViewBox, glyphData);
-        defStuff(defs, badgeViewBox, badgeData);
-    }
-
-    onos.ui.addLib('glyphs', {
-        loadDefs: loadDefs
-    });
-
-}(ONOS));

-<!DOCTYPE html>
-<!--
-  ~ Copyright 2014 Open Networking Laboratory
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
-<!--
-  ONOS UI - single page web app
-  Version 1.1
-  -->
-<html>
-<head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="../img/onos-logo.png">
-    <title>ONOS</title>
-
-    <!-- Third party library code included here -->
-    <!--TODO: use the minified version of d3, once debugging is complete -->
-    <script src="../tp/d3.js"></script>
-    <script src="../tp/topojson.v1.min.js"></script>
-    <script src="../tp/jquery-2.1.1.min.js"></script>
-
-    <!-- ONOS UI Framework included here -->
-    <script src="onos.js"></script>
-
-    <!-- Framework and library stylesheets included here -->
-    <link rel="stylesheet" href="base.css">
-    <link rel="stylesheet" href="onos.css">
-    <link rel="stylesheet" href="onosMast.css">
-    <link rel="stylesheet" href="onosFloatPanel.css">
-    <link rel="stylesheet" href="onosFlash.css">
-    <link rel="stylesheet" href="onosQuickHelp.css">
-
-    <!-- This is where contributed stylesheets get INJECTED -->
-    <!-- TODO: replace with template marker and inject refs server-side -->
-    <link rel="stylesheet" href="topo.css">
-</head>
-<body>
-    <div id="frame">
-        <div id="mast">
-            <!-- NOTE: masthead injected here by mast.js -->
-        </div>
-        <div id="view">
-            <!-- NOTE: views injected here by onos.js -->
-        </div>
-        <div id="floatPanels">
-            <!-- NOTE: floating panels injected here, as needed -->
-            <!--       see onos.ui.addFloatingPanel             -->
-        </div>
-        <div id="alerts">
-            <!-- NOTE: alert content injected here, as needed -->
-        </div>
-        <div id="feedback">
-            <!-- NOTE: feedback flashes to user -->
-        </div>
-        <div id="quickhelp">
-            <!-- NOTE: key bindings and mouse gesture help -->
-        </div>
-    </div>
-
-    <!-- Initialize the UI...-->
-    <script type="text/javascript">
-        var ONOS = $.onos({
-            comment: 'configuration options',
-            theme: 'dark',
-            startVid: 'topo'
-        });
-    </script>
-
-    <!-- Library modules included here -->
-    <script src="d3Utils.js"></script>
-    <script src="geometry.js"></script>
-    <script src="glyphs.js"></script>
-
-    <!-- Framework modules included here -->
-    <script src="onosMast.js"></script>
-    <script src="onosFlash.js"></script>
-    <script src="onosQuickHelp.js"></script>
-
-    <!-- View Module Templates; REMOVE THESE LINES, FOR PRODUCTION -->
-    <script src="module-svg-template.js"></script>
-    <script src="module-div-template.js"></script>
-
-    <!-- Sample Views; REMOVE THESE LINES, FOR PRODUCTION -->
-    <script src="sample.js"></script>
-    <script src="sampleRadio.js"></script>
-    <script src="sampleKeys.js"></script>
-    <script src="sampleHash.js"></script>
-
-    <!-- Contributed (application) views injected here -->
-    <!-- TODO: replace with template marker and inject refs server-side -->
-    <script src="topo.js"></script>
-
-    <!-- finally, build the UI-->
-    <script type="text/javascript">
-        $(ONOS.buildUi);
-    </script>
-
-</body>
-</html>

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Module template file for DIV based view.
- */
-
-(function (onos) {
-    'use strict';
-
-    var list,
-        data = [ 'foo', 'bar', 'baz' ];
-
-    // invoked only the first time the view is loaded
-    //  - used to initialize the view contents
-    function init(view, ctx, flags) {
-        // NOTE: view.$div is a D3 selection of the view's div
-        list = view.$div.append('ul');
-        // ... further code to initialize the SVG view ...
-
-    }
-
-    // invoked just prior to loading the view
-    //  - used to clear the view of stale data
-    function reset(view, ctx, flags) {
-
-    }
-
-    // invoked when the view is loaded
-    //  - used to load data into the view,
-    //     when the view is shown
-    function load(view, ctx, flags) {
-        list.selectAll('li')
-            .data(data)
-            .enter()
-            .append('li')
-            .text(function (d) { return d; })
-    }
-
-    // invoked when the view is unloaded
-    //  - used to clean up data that should be removed,
-    //     when the view is hidden
-    function unload(view, ctx, flags) {
-
-    }
-
-    // invoked when the view is resized
-    //  - used to reconfigure elements to the new view size
-    function resize(view, ctx, flags) {
-        var w = view.width(),
-            h = view.height();
-
-    }
-
-    // invoked when the framework needs to alert the view of an error
-    //  - (EXPERIMENTAL -- not currently used)
-    function error(view, ctx, flags) {
-
-    }
-
-    // ================================================================
-    // == register the view here, with links to lifecycle callbacks
-
-    // A typical setup that initializes the view once, then reacts to
-    // load and resize events would look like this:
-
-    onos.ui.addView('myDivViewId', {
-        init: init,
-        load: load,
-        resize: resize
-    });
-
-    // A minimum setup that builds the view every time it is loaded
-    // would look like this:
-    //
-    //  onos.ui.addView('myViewId', {
-    //      reset: true,    // clear view contents on reset
-    //      load: load
-    //  });
-
-    // The complete gamut of callbacks would look like this:
-    //
-    //  onos.ui.addView('myViewId', {
-    //      init: init,
-    //      reset: reset,
-    //      load: load,
-    //      unload: unload,
-    //      resize: resize,
-    //      error: error
-    //  });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Module template file for SVG based view.
- */
-
-(function (onos) {
-    'use strict';
-
-    var svg,
-        data = [ 60 ];
-
-    // invoked only the first time the view is loaded
-    //  - used to initialize the view contents
-    function init(view, ctx, flags) {
-        svg = view.$div.append('svg');
-        resize(view);
-        // ... further code to initialize the SVG view ...
-
-    }
-
-    // invoked just prior to loading the view
-    //  - used to clear the view of stale data
-    function reset(view, ctx, flags) {
-        // e.g. clear svg of all objects...
-        // svg.html('');
-
-    }
-
-    // invoked when the view is loaded
-    //  - used to load data into the view,
-    //     when the view is shown
-    function load(view, ctx, flags) {
-        var w = view.width(),
-            h = view.height();
-
-        // as an example...
-        svg.selectAll('circle')
-            .data(data)
-            .enter()
-            .append('circle')
-            .attr({
-                cx: w / 2,
-                cy: h / 2,
-                r: function (d) { return d; }
-            })
-            .style({
-                fill: 'goldenrod',
-                stroke: 'black',
-                'stroke-width': 3.5,
-            });
-    }
-
-    // invoked when the view is unloaded
-    //  - used to clean up data that should be removed,
-    //     when the view is hidden
-    function unload(view, ctx, flags) {
-
-    }
-
-    // invoked when the view is resized
-    //  - used to reconfigure elements to the new size of the view
-    function resize(view, ctx, flags) {
-        var w = view.width(),
-            h = view.height();
-
-        // resize svg layer to match new size of view
-        svg.attr({
-            width: w,
-            height: h
-        });
-
-        // as an example...
-        svg.selectAll('circle')
-            .attr({
-                cx: w / 2,
-                cy: h / 2
-            });
-
-        // ... further code to handle resize of view ...
-
-    }
-
-    // invoked when the framework needs to alert the view of an error
-    //  - (EXPERIMENTAL -- not currently used)
-    function error(view, ctx, flags) {
-
-    }
-
-    // ================================================================
-    // == register the view here, with links to lifecycle callbacks
-
-    // A typical setup that initializes the view once, then reacts to
-    // load and resize events would look like this:
-
-    onos.ui.addView('mySvgViewId', {
-        init: init,
-        load: load,
-        resize: resize
-    });
-
-    // A minimum setup that builds the view every time it is loaded
-    // would look like this:
-    //
-    //  onos.ui.addView('myViewId', {
-    //      reset: true,    // clear view contents on reset
-    //      load: load
-    //  });
-
-    // The complete gamut of callbacks would look like this:
-    //
-    //  onos.ui.addView('myViewId', {
-    //      init: init,
-    //      reset: reset,
-    //      load: load,
-    //      unload: unload,
-    //      resize: resize,
-    //      error: error
-    //  });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Base Framework -- CSS file
- */
-
-html, body {
-    height: 100%;
-}
-
-/* This is to ensure that the body does not expand to account for the
-   flyout details pane, that is positioned "off screen".
- */
-body {
-    overflow: hidden;
-}
-
-#frame {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-}
-
-div.onosView {
-    display: none;
-}
-
-div.onosView.currentView {
-    display: block;
-}
-
-
-#alerts {
-    display: none;
-    position: absolute;
-    z-index: 1200;
-    opacity: 0.65;
-    background-color: #006;
-    color: white;
-    top: 80px;
-    left: 40px;
-    padding: 3px 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    box-shadow: 0px 2px 12px #777;
-}
-
-#alerts pre {
-    margin: 0.2em 6px;
-}
-
-#alerts span.close {
-    color: #6af;
-    float: right;
-    right: 2px;
-    cursor: pointer;
-}
-
-#alerts span.close:hover {
-    color: #fff;
-}
-
-#alerts p.footnote {
-    text-align: right;
-    font-size: 8pt;
-    margin: 8px 0 0 0;
-    color: #66d;
-}
-
-#floatPanels {
-    z-index: 1100;
-}
-
-#flyout {
-    position: absolute;
-    display: block;
-    top: 10%;
-    width: 280px;
-    right: -300px;
-    opacity: 0;
-    background-color: rgba(255,255,255,0.8);
-
-    padding: 10px;
-    color: black;
-    font-size: 10pt;
-    box-shadow: 2px 2px 16px #777;
-}
-
-#flyout h2 {
-    margin: 8px 4px;
-    color: black;
-    vertical-align: middle;
-}
-
-#flyout h2 img {
-    height: 32px;
-    padding-right: 8px;
-    vertical-align: middle;
-}
-
-#flyout p, table {
-    margin: 4px 4px;
-}
-
-#flyout td.label {
-    font-style: italic;
-    color: #777;
-    padding-right: 12px;
-}
-
-#flyout td.value {
-
-}
-
-#flyout hr {
-    height: 1px;
-    color: #ccc;
-    background-color: #ccc;
-    border: 0;
-}

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Base Framework
- */
-
-(function ($) {
-    'use strict';
-    var tsI = new Date().getTime(),         // initialize time stamp
-        tsB,                                // build time stamp
-        mastHeight = 36,                    // see mast2.css
-        defaultVid = 'sample';
-
-
-    // attach our main function to the jQuery object
-    $.onos = function (options) {
-        var uiApi,
-            viewApi,
-            navApi,
-            libApi,
-            exported = {};
-
-        var defaultOptions = {
-            trace: false,
-            theme: 'dark',
-            startVid: defaultVid
-        };
-
-        // compute runtime settings
-        var settings = $.extend({}, defaultOptions, options);
-
-        // set the selected theme
-        d3.select('body').classed(settings.theme, true);
-
-        // internal state
-        var views = {},
-            fpanels = {},
-            current = {
-                view: null,
-                ctx: '',
-                flags: {},
-                theme: settings.theme
-            },
-            built = false,
-            buildErrors = [],
-            keyHandler = {
-                globalKeys: {},
-                maskedKeys: {},
-                viewKeys: {},
-                viewFn: null,
-                viewGestures: []
-            },
-            alerts = {
-                open: false,
-                count: 0
-            };
-
-        // DOM elements etc.
-        // TODO: verify existence of following elements...
-        var $view = d3.select('#view'),
-            $floatPanels = d3.select('#floatPanels'),
-            $alerts = d3.select('#alerts'),
-            // note, following elements added programmatically...
-            $mastRadio;
-
-
-        function whatKey(code) {
-            switch (code) {
-                case 13: return 'enter';
-                case 16: return 'shift';
-                case 17: return 'ctrl';
-                case 18: return 'alt';
-                case 27: return 'esc';
-                case 32: return 'space';
-                case 37: return 'leftArrow';
-                case 38: return 'upArrow';
-                case 39: return 'rightArrow';
-                case 40: return 'downArrow';
-                case 91: return 'cmdLeft';
-                case 93: return 'cmdRight';
-                case 187: return 'equals';
-                case 189: return 'dash';
-                case 191: return 'slash';
-                case 192: return 'backQuote';
-                case 220: return 'backSlash';
-                default:
-                    if ((code >= 48 && code <= 57) ||
-                        (code >= 65 && code <= 90)) {
-                        return String.fromCharCode(code);
-                    } else if (code >= 112 && code <= 123) {
-                        return 'F' + (code - 111);
-                    }
-                    return '.';
-            }
-        }
-
-
-        // ..........................................................
-        // Internal functions
-
-        // throw an error
-        function throwError(msg) {
-            // separate function, as we might add tracing here too, later
-            throw new Error(msg);
-        }
-
-        function doError(msg) {
-            console.error(msg);
-            doAlert(msg);
-        }
-
-        function trace(msg) {
-            if (settings.trace) {
-                console.log(msg);
-            }
-        }
-
-        function traceFn(fn, params) {
-            if (settings.trace) {
-                console.log('*FN* ' + fn + '(...): ' + params);
-            }
-        }
-
-        // hash navigation
-        function hash() {
-            var hash = window.location.hash,
-                redo = false,
-                view,
-                t;
-
-            traceFn('hash', hash);
-
-            if (!hash) {
-                hash = settings.startVid;
-                redo = true;
-            }
-
-            t = parseHash(hash);
-            if (!t || !t.vid) {
-                doError('Unable to parse target hash: "' + hash + '"');
-            }
-
-            view = views[t.vid];
-            if (!view) {
-                doError('No view defined with id: ' + t.vid);
-            }
-
-            if (redo) {
-                window.location.hash = makeHash(t);
-                // the above will result in a hashchange event, invoking
-                // this function again
-            } else {
-                // hash was not modified... navigate to where we need to be
-                navigate(hash, view, t);
-            }
-        }
-
-        function parseHash(s) {
-            // extract navigation coordinates from the supplied string
-            // "vid,ctx?flag1,flag2" --> { vid:vid, ctx:ctx, flags:{...} }
-            traceFn('parseHash', s);
-
-            // look for use of flags, first
-            var vidctx,
-                vid,
-                ctx,
-                flags,
-                flagMap,
-                m;
-
-            // RE that includes flags ('?flag1,flag2')
-            m = /^[#]{0,1}(.+)\?(.+)$/.exec(s);
-            if (m) {
-                vidctx = m[1];
-                flags = m[2];
-                flagMap = {};
-            } else {
-                // no flags
-                m = /^[#]{0,1}((.+)(,.+)*)$/.exec(s);
-                if (m) {
-                    vidctx = m[1];
-                } else {
-                    // bad hash
-                    return null;
-                }
-            }
-
-            vidctx = vidctx.split(',');
-            vid = vidctx[0];
-            ctx = vidctx[1];
-            if (flags) {
-                flags.split(',').forEach(function (f) {
-                    flagMap[f.trim()] = true;
-                });
-            }
-
-            return {
-                vid: vid.trim(),
-                ctx: ctx ? ctx.trim() : '',
-                flags: flagMap
-            };
-
-        }
-
-        function makeHash(t, ctx, flags) {
-            traceFn('makeHash');
-            // make a hash string from the given navigation coordinates,
-            // and optional flags map.
-            // if t is not an object, then it is a vid
-            var h = t,
-                c = ctx || '',
-                f = $.isPlainObject(flags) ? flags : null;
-
-            if ($.isPlainObject(t)) {
-                h = t.vid;
-                c = t.ctx || '';
-                f = t.flags || null;
-            }
-
-            if (c) {
-                h += ',' + c;
-            }
-            if (f) {
-                h += '?' + d3.map(f).keys().join(',');
-            }
-            trace('hash = "' + h + '"');
-            return h;
-        }
-
-        function navigate(hash, view, t) {
-            traceFn('navigate', view.vid);
-            // closePanes()     // flyouts etc.
-            // updateNav()      // accordion / selected nav item etc.
-            createView(view);
-            setView(view, hash, t);
-        }
-
-        function buildError(msg) {
-            buildErrors.push(msg);
-        }
-
-        function reportBuildErrors() {
-            traceFn('reportBuildErrors');
-            var nerr = buildErrors.length,
-                errmsg;
-            if (!nerr) {
-                console.log('(no build errors)');
-            } else {
-                errmsg = 'Build errors: ' + nerr + ' found...\n\n' +
-                    buildErrors.join('\n');
-                doAlert(errmsg);
-                console.error(errmsg);
-            }
-        }
-
-        // returns the reference if it is a function, null otherwise
-        function isF(f) {
-            return $.isFunction(f) ? f : null;
-        }
-
-        // returns the reference if it is an array, null otherwise
-        function isA(a) {
-            return $.isArray(a) ? a : null;
-        }
-
-        // ..........................................................
-        // View life-cycle functions
-
-        function setViewDimensions(sel) {
-            var w = window.innerWidth,
-                h = window.innerHeight - mastHeight;
-            sel.each(function () {
-                $(this)
-                    .css('width', w + 'px')
-                    .css('height', h + 'px')
-            });
-        }
-
-        function createView(view) {
-            var $d;
-
-            // lazy initialization of the view
-            if (view && !view.$div) {
-                trace('creating view for ' + view.vid);
-                $d = $view.append('div')
-                        .attr({
-                            id: view.vid,
-                            class: 'onosView'
-                         });
-                setViewDimensions($d);
-                view.$div = $d;   // cache a reference to the D3 selection
-            }
-        }
-
-        function setView(view, hash, t) {
-            traceFn('setView', view.vid);
-            // set the specified view as current, while invoking the
-            // appropriate life-cycle callbacks
-
-            // first, we'll start by closing the alerts pane, if open
-            closeAlerts();
-
-            // if there is a current view, and it is not the same as
-            // the incoming view, then unload it...
-            if (current.view && (current.view.vid !== view.vid)) {
-                current.view.unload();
-
-                // detach radio buttons, key handlers, etc.
-                $('#mastRadio').children().detach();
-                keyHandler.viewKeys = {};
-                keyHandler.viewFn = null;
-            }
-
-            // cache new view and context
-            current.view = view;
-            current.ctx = t.ctx || '';
-            current.flags = t.flags || {};
-
-            // init is called only once, after the view is in the DOM
-            if (!view.inited) {
-                view.init(current.ctx, current.flags);
-                view.inited = true;
-            }
-
-            // clear the view of stale data
-            view.reset();
-
-            // load the view
-            view.load(current.ctx, current.flags);
-        }
-
-        // generate 'unique' id by prefixing view id
-        function makeUid(view, id) {
-            return view.vid + '-' + id;
-        }
-
-        // restore id by removing view id prefix
-        function unmakeUid(view, uid) {
-            var re = new RegExp('^' + view.vid + '-');
-            return uid.replace(re, '');
-        }
-
-        function setRadioButtons(vid, btnSet) {
-            var view = views[vid],
-                btnG,
-                api = {};
-
-            // lazily create the buttons...
-            if (!(btnG = view.radioButtons)) {
-                btnG = d3.select(document.createElement('div'));
-                btnG.buttonDef = {};
-
-                btnSet.forEach(function (btn, i) {
-                    var bid = btn.id || 'b' + i,
-                        txt = btn.text || 'Button #' + i,
-                        uid = makeUid(view, bid),
-                        button = btnG.append('span')
-                        .attr({
-                            id: uid,
-                            class: 'radio'
-                        })
-                        .text(txt);
-
-                    btn.id = bid;
-                    btnG.buttonDef[uid] = btn;
-
-                    if (i === 0) {
-                        button.classed('active', true);
-                        btnG.selected = bid;
-                    }
-                });
-
-                btnG.selectAll('span')
-                    .on('click', function (d) {
-                        var button = d3.select(this),
-                            uid = button.attr('id'),
-                            btn = btnG.buttonDef[uid],
-                            act = button.classed('active');
-
-                        if (!act) {
-                            btnG.selectAll('span').classed('active', false);
-                            button.classed('active', true);
-                            btnG.selected = btn.id;
-                            if (isF(btn.cb)) {
-                                btn.cb(view.token(), btn);
-                            }
-                        }
-                    });
-
-                view.radioButtons = btnG;
-
-                api.selected = function () {
-                    return btnG.selected;
-                }
-            }
-
-            // attach the buttons to the masthead
-            $mastRadio.node().appendChild(btnG.node());
-            // return an api for interacting with the button set
-            return api;
-        }
-
-        function setupGlobalKeys() {
-            $.extend(keyHandler, {
-                globalKeys: {
-                    backSlash: [quickHelp, 'Show / hide Quick Help'],
-                    slash: [quickHelp, 'Show / hide Quick Help'],
-                    esc: [escapeKey, 'Dismiss dialog or cancel selections'],
-                    T: [toggleTheme, "Toggle theme"]
-                },
-                globalFormat: ['backSlash', 'slash', 'esc', 'T'],
-
-                // Masked keys are global key handlers that always return true.
-                // That is, the view will never see the event for that key.
-                maskedKeys: {
-                    slash: true,
-                    backSlash: true,
-                    T: true
-                }
-            });
-        }
-
-        function quickHelp(view, key, code, ev) {
-            libApi.quickHelp.show(keyHandler);
-            return true;
-        }
-
-        function escapeKey(view, key, code, ev) {
-            if (alerts.open) {
-                closeAlerts();
-                return true;
-            }
-            if (libApi.quickHelp.hide()) {
-                return true;
-            }
-            return false;
-        }
-
-        function toggleTheme(view, key, code, ev) {
-            var body = d3.select('body');
-            current.theme = (current.theme === 'light') ? 'dark' : 'light';
-            body.classed('light dark', false);
-            body.classed(current.theme, true);
-            theme(view);
-            return true;
-        }
-
-        function setGestureNotes(g) {
-            keyHandler.viewGestures = isA(g) || [];
-        }
-
-        function setKeyBindings(keyArg) {
-            var viewKeys,
-                masked = [];
-
-            if ($.isFunction(keyArg)) {
-                // set general key handler callback
-                keyHandler.viewFn = keyArg;
-            } else {
-                // set specific key filter map
-                viewKeys = d3.map(keyArg).keys();
-                viewKeys.forEach(function (key) {
-                    if (keyHandler.maskedKeys[key]) {
-                        masked.push('  Key "' + key + '" is reserved');
-                    }
-                });
-
-                if (masked.length) {
-                    doAlert('WARNING...\n\nsetKeys():\n' + masked.join('\n'));
-                }
-                keyHandler.viewKeys = keyArg;
-            }
-        }
-
-        function keyIn() {
-            var event = d3.event,
-                keyCode = event.keyCode,
-                key = whatKey(keyCode),
-                kh = keyHandler,
-                gk = kh.globalKeys[key],
-                gcb = isF(gk) || (isA(gk) && isF(gk[0])),
-                vk = kh.viewKeys[key],
-                vcb = isF(vk) || (isA(vk) && isF(vk[0])) || isF(kh.viewFn),
-                token = current.view.token();
-
-            // global callback?
-            if (gcb && gcb(token, key, keyCode, event)) {
-                // if the event was 'handled', we are done
-                return;
-            }
-            // otherwise, let the view callback have a shot
-            if (vcb) {
-                vcb(token, key, keyCode, event);
-            }
-        }
-
-        function createAlerts() {
-            $alerts.style('display', 'block');
-            $alerts.append('span')
-                .attr('class', 'close')
-                .text('X')
-                .on('click', closeAlerts);
-            $alerts.append('pre');
-            $alerts.append('p').attr('class', 'footnote')
-                .text('Press ESCAPE to close');
-            alerts.open = true;
-            alerts.count = 0;
-        }
-
-        function closeAlerts() {
-            $alerts.style('display', 'none')
-                .html('');
-            alerts.open = false;
-        }
-
-        function addAlert(msg) {
-            var lines,
-                oldContent;
-
-            if (alerts.count) {
-                oldContent = $alerts.select('pre').html();
-            }
-
-            lines = msg.split('\n');
-            lines[0] += '  '; // spacing so we don't crowd 'X'
-            lines = lines.join('\n');
-
-            if (oldContent) {
-                lines += '\n----\n' + oldContent;
-            }
-
-            $alerts.select('pre').html(lines);
-            alerts.count++;
-        }
-
-        function doAlert(msg) {
-            if (!alerts.open) {
-                createAlerts();
-            }
-            addAlert(msg);
-        }
-
-        function resize(e) {
-            d3.selectAll('.onosView').call(setViewDimensions);
-            // allow current view to react to resize event...
-            if (current.view) {
-                current.view.resize(current.ctx, current.flags);
-            }
-        }
-
-        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.
-
-        // Constructor
-        //      vid : view id
-        //      nid : id of associated nav-item (optional)
-        //      cb  : callbacks (init, reset, load, unload, resize, theme, error)
-        function View(vid) {
-            var av = 'addView(): ',
-                args = Array.prototype.slice.call(arguments),
-                nid,
-                cb;
-
-            args.shift();   // first arg is always vid
-            if (typeof args[0] === 'string') {  // nid specified
-                nid = args.shift();
-            }
-            cb = args.shift();
-
-            this.vid = vid;
-
-            if (validateViewArgs(vid)) {
-                this.nid = nid;     // explicit navitem id (can be null)
-                this.cb = $.isPlainObject(cb) ? cb : {};    // callbacks
-                this.$div = null;               // view not yet added to DOM
-                this.radioButtons = null;       // no radio buttons yet
-                this.ok = true;                 // valid view
-            }
-        }
-
-        function validateViewArgs(vid) {
-            var av = "ui.addView(...): ",
-                ok = false;
-            if (typeof vid !== 'string' || !vid) {
-                doError(av + 'vid required');
-            } else if (views[vid]) {
-                doError(av + 'View ID "' + vid + '" already exists');
-            } else {
-                ok = true;
-            }
-            return ok;
-        }
-
-        var viewInstanceMethods = {
-            token: function () {
-                return {
-                    // attributes
-                    vid: this.vid,
-                    nid: this.nid,
-                    $div: this.$div,
-
-                    // functions
-                    width: this.width,
-                    height: this.height,
-                    uid: this.uid,
-                    setRadio: this.setRadio,
-                    setKeys: this.setKeys,
-                    setGestures: this.setGestures,
-                    dataLoadError: this.dataLoadError,
-                    alert: this.alert,
-                    flash: this.flash,
-                    getTheme: this.getTheme
-                }
-            },
-
-            // == Life-cycle functions
-            // TODO: factor common code out of life-cycle
-            init: function (ctx, flags) {
-                var c = ctx || '',
-                    fn = isF(this.cb.init);
-                traceFn('View.init', this.vid + ', ' + c);
-                if (fn) {
-                    trace('INIT cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                }
-            },
-
-            reset: function (ctx, flags) {
-                var c = ctx || '',
-                    fn = isF(this.cb.reset);
-                traceFn('View.reset', this.vid);
-                if (fn) {
-                    trace('RESET cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                } else if (this.cb.reset === true) {
-                    // boolean true signifies "clear view"
-                    trace('  [true] cleaing view...');
-                    viewApi.empty();
-                }
-            },
-
-            load: function (ctx, flags) {
-                var c = ctx || '',
-                    fn = isF(this.cb.load);
-                traceFn('View.load', this.vid + ', ' + c);
-                this.$div.classed('currentView', true);
-                if (fn) {
-                    trace('LOAD cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                }
-            },
-
-            unload: function (ctx, flags) {
-                var c = ctx | '',
-                    fn = isF(this.cb.unload);
-                traceFn('View.unload', this.vid);
-                this.$div.classed('currentView', false);
-                if (fn) {
-                    trace('UNLOAD cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                }
-            },
-
-            resize: function (ctx, flags) {
-                var c = ctx || '',
-                    fn = isF(this.cb.resize),
-                    w = this.width(),
-                    h = this.height();
-                traceFn('View.resize', this.vid + '/' + c +
-                        ' [' + w + 'x' + h + ']');
-                if (fn) {
-                    trace('RESIZE cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                }
-            },
-
-            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);
-                traceFn('View.error', this.vid + ', ' + c);
-                if (fn) {
-                    trace('ERROR cb for ' + this.vid);
-                    fn(this.token(), c, flags);
-                }
-            },
-
-            // == Token API functions
-            width: function () {
-                return $(this.$div.node()).width();
-            },
-
-            height: function () {
-                return $(this.$div.node()).height();
-            },
-
-            setRadio: function (btnSet) {
-                return setRadioButtons(this.vid, btnSet);
-            },
-
-            setKeys: function (keyArg) {
-                setKeyBindings(keyArg);
-            },
-
-            setGestures: function (g) {
-                setGestureNotes(g);
-            },
-
-            getTheme: function () {
-                return current.theme;
-            },
-
-            uid: function (id) {
-                return makeUid(this, id);
-            },
-
-            // TODO : add exportApi and importApi methods
-            // TODO : implement custom dialogs
-
-            // Consider enhancing alert mechanism to handle multiples
-            // as individually closable.
-            alert: function (msg) {
-                doAlert(msg);
-            },
-
-            flash: function (msg) {
-                libApi.feedback.flash(msg);
-            },
-
-            dataLoadError: function (err, url) {
-                var msg = 'Data Load Error\n\n' +
-                    err.status + ' -- ' + err.statusText + '\n\n' +
-                    'relative-url: "' + url + '"\n\n' +
-                    'complete-url: "' + err.responseURL + '"';
-                this.alert(msg);
-            }
-
-            // TODO: consider schedule, clearTimer, etc.
-        };
-
-        // attach instance methods to the view prototype
-        $.extend(View.prototype, viewInstanceMethods);
-
-        // ..........................................................
-        // UI API
-
-        var fpConfig = {
-            TR: {
-                side: 'right'
-            },
-            TL: {
-                side: 'left'
-            }
-        };
-
-        uiApi = {
-            addLib: function (libName, api) {
-                // TODO: validation of args
-                libApi[libName] = api;
-            },
-
-            // TODO: implement floating panel as a class
-            // TODO: parameterize position (currently hard-coded to TopRight)
-            /*
-             * Creates div in floating panels block, with the given id.
-             * Returns panel token used to interact with the panel
-             */
-            addFloatingPanel: function (id, position) {
-                var pos = position || 'TR',
-                    cfg = fpConfig[pos],
-                    el,
-                    fp,
-                    on = false;
-
-                if (fpanels[id]) {
-                    buildError('Float panel with id "' + id + '" already exists.');
-                    return null;
-                }
-
-                el = $floatPanels.append('div')
-                    .attr('id', id)
-                    .attr('class', 'fpanel')
-                    .style('opacity', 0);
-
-                // has to be called after el is set.
-                el.style(cfg.side, pxHide());
-
-                function pxShow() {
-                    return '20px';
-                }
-                function pxHide() {
-                    return (-20 - widthVal()) + 'px';
-                }
-                function noPx(what) {
-                    return el.style(what).replace(/px$/, '');
-                }
-                function widthVal() {
-                    return noPx('width');
-                }
-                function heightVal() {
-                    return noPx('height');
-                }
-
-                function noop() {}
-
-                fp = {
-                    id: id,
-                    el: el,
-                    pos: pos,
-                    isVisible: function () {
-                        return on;
-                    },
-
-                    show: function (cb) {
-                        var endCb = isF(cb) || noop;
-                        on = true;
-                        el.transition().duration(750)
-                            .each('end', endCb)
-                            .style(cfg.side, pxShow())
-                            .style('opacity', 1);
-                    },
-                    hide: function (cb) {
-                        var endCb = isF(cb) || noop;
-                        on = false;
-                        el.transition().duration(750)
-                            .each('end', endCb)
-                            .style(cfg.side, pxHide())
-                            .style('opacity', 0);
-                    },
-                    empty: function () {
-                        return el.html('');
-                    },
-                    append: function (what) {
-                        return el.append(what);
-                    },
-                    width: function (w) {
-                        if (w === undefined) {
-                            return widthVal();
-                        }
-                        el.style('width', w + 'px');
-                    },
-                    height: function (h) {
-                        if (h === undefined) {
-                            return heightVal();
-                        }
-                        el.style('height', h + 'px');
-                    }
-                };
-                fpanels[id] = fp;
-                return fp;
-            },
-
-            // TODO: it remains to be seen whether we keep this style of docs
-            /** @api ui addView( vid, nid, cb )
-             * Adds a view to the UI.
-             * <p>
-             * Views are loaded/unloaded into the view content pane at
-             * appropriate times, by the navigation framework. This method
-             * adds a view to the UI and returns a token object representing
-             * the view. A view's token is always passed as the first
-             * argument to each of the view's life-cycle callback functions.
-             * <p>
-             * Note that if the view is directly referenced by a nav-item,
-             * or in a group of views with one of those views referenced by
-             * a nav-item, then the <i>nid</i> argument can be omitted as
-             * the framework can infer it.
-             * <p>
-             * <i>cb</i> is a plain object containing callback functions:
-             * "init", "reset", "load", "unload", "resize", "theme", "error".
-             * <pre>
-             *     function myLoad(view, ctx) { ... }
-             *     ...
-             *     // short form...
-             *     onos.ui.addView('viewId', {
-             *         load: myLoad
-             *     });
-             * </pre>
-             *
-             * @param vid (string) [*] view ID (a unique DOM element id)
-             * @param nid (string) nav-item ID (a unique DOM element id)
-             * @param cb (object) [*] callbacks object
-             * @return the view token
-             */
-            addView: function (vid, nid, cb) {
-                traceFn('addView', vid);
-                var view = new View(vid, nid, cb),
-                    token;
-                if (view.ok) {
-                    views[vid] = view;
-                    token = view.token();
-                } else {
-                    token = { vid: view.vid, bad: true };
-                }
-                return token;
-            }
-        };
-
-        // ..........................................................
-        // View API
-
-        // TODO: deprecated
-        viewApi = {
-            /** @api view empty( )
-             * Empties the current view.
-             * <p>
-             * More specifically, removes all DOM elements from the
-             * current view's display div.
-             */
-            empty: function () {
-                if (!current.view) {
-                    return;
-                }
-                current.view.$div.html('');
-            }
-        };
-
-        // ..........................................................
-        // Nav API
-        navApi = {
-
-        };
-
-        // ..........................................................
-        // Library API
-        libApi = {
-
-        };
-
-        // ..........................................................
-        // Exported API
-
-        // function to be called from index.html to build the ONOS UI
-        function buildOnosUi() {
-            tsB = new Date().getTime();
-            tsI = tsB - tsI; // initialization duration
-
-            console.log('ONOS UI initialized in ' + tsI + 'ms');
-
-            if (built) {
-                throwError("ONOS UI already built!");
-            }
-            built = true;
-
-            $mastRadio = d3.select('#mastRadio');
-
-            $(window).on('hashchange', hash);
-            $(window).on('resize', resize);
-
-            d3.select('body').on('keydown', keyIn);
-            setupGlobalKeys();
-
-            // Invoke hashchange callback to navigate to content
-            // indicated by the window location hash.
-            hash();
-
-            // If there were any build errors, report them
-            reportBuildErrors();
-        }
-
-        // export the api and build-UI function
-        return {
-            ui: uiApi,
-            lib: libApi,
-            //view: viewApi,
-            nav: navApi,
-            buildUi: buildOnosUi,
-            exported: exported
-        };
-    };
-
-}(jQuery));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Feedback layer -- CSS file
- */
-
-#feedback {
-    z-index: 1400;
-}
-
-#feedback svg {
-    position: absolute;
-    bottom: 0;
-    opacity: 0.8;
-}
-
-#feedback svg g.feedbackItem {
-    background-color: teal;
-}
-
-#feedback svg g.feedbackItem rect {
-    fill: #ccc;
-}
-
-#feedback svg g.feedbackItem text {
-    fill: #333;
-    stroke: none;
-    text-anchor: middle;
-    alignment-baseline: middle;
-
-    font-size: 16pt;
-}

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Feedback layer
-
- Defines the feedback layer for the UI. Used to give user visual feedback
- of choices, typically responding to keystrokes.
- */
-
-(function (onos){
-    'use strict';
-
-    // API's
-    var api = onos.api;
-
-    // Config variables
-    var w = '100%',
-        h = 200,
-        fade = 200,
-        showFor = 1200,
-        vb = '-200 -' + (h/2) + ' 400 ' + h,
-        xpad = 20,
-        ypad = 10;
-
-    // State variables
-    var timer = null,
-        data = [];
-
-    // DOM elements and the like
-    var fb = d3.select('#feedback');
-
-    var svg;
-
-    //var svg = fb.append('svg').attr({
-    //    width: w,
-    //    height: h,
-    //    viewBox: vb
-    //});
-
-    function computeBox(el) {
-        var text = el.select('text'),
-            box = text.node().getBBox();
-
-        // center
-        box.x = -box.width / 2;
-        box.y = -box.height / 2;
-
-        // add some padding
-        box.x -= xpad;
-        box.width += xpad * 2;
-        box.y -= ypad;
-        box.height += ypad * 2;
-
-        return box;
-    }
-
-    function updateFeedback() {
-        if (!svg) {
-            svg = fb.append('svg').attr({
-                width: w,
-                height: h,
-                viewBox: vb
-            });
-        }
-
-        var items = svg.selectAll('.feedbackItem')
-            .data(data);
-
-        var entering = items.enter()
-            .append('g')
-            .attr({
-                class: 'feedbackItem',
-                opacity: 0
-            })
-            .transition()
-            .duration(fade)
-            .attr('opacity', 1);
-
-        entering.each(function (d) {
-            var el = d3.select(this),
-                box;
-
-            d.el = el;
-            el.append('rect').attr({ rx: 10, ry: 10});
-            el.append('text').text(d.label);
-            box = computeBox(el);
-            el.select('rect').attr(box);
-        });
-
-        items.exit()
-            .transition()
-            .duration(fade)
-            .attr({ opacity: 0})
-            .remove();
-
-        if (svg && data.length === 0) {
-            svg.transition()
-                .delay(fade + 10)
-                .remove();
-            svg = null;
-        }
-    }
-
-    function clearFlash() {
-        if (timer) {
-            clearInterval(timer);
-        }
-        data = [];
-        updateFeedback();
-    }
-
-    // for now, simply display some text feedback
-    function flash(text) {
-        // cancel old scheduled event if there was one
-        if (timer) {
-            clearInterval(timer);
-        }
-        timer = setInterval(function () {
-            clearFlash();
-        }, showFor);
-
-        data = [{
-            label: text
-        }];
-        updateFeedback();
-    }
-
-    onos.ui.addLib('feedback', {
-        flash: flash
-    });
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Floating Panels -- CSS file
- */
-
-.fpanel {
-    position: absolute;
-    z-index: 100;
-    display: block;
-    top: 64px;
-    width: 260px;
-    right: -300px;
-    opacity: 0;
-    background-color: rgba(255,255,255,0.8);
-
-    padding: 10px;
-    color: black;
-    font-size: 10pt;
-
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    box-shadow: 0px 2px 12px #777;
-}
-
-/* TODO: light/dark themes */
-.light .fpanel {
-
-}
-.dark .fpanel {
-
-}

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Masthead -- CSS file
- */
-
-#mast {
-    height: 36px;
-    padding: 4px;
-    vertical-align: baseline;
-}
-
-.light #mast {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
-}
-.dark #mast {
-    background-color: #444;
-    box-shadow: 0 2px 8px #777;
-}
-
-#mast img#logo {
-    height: 38px;
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
-#mast span.title {
-    font-size: 14pt;
-    font-style: italic;
-    vertical-align: 12px;
-}
-
-.light #mast span.title {
-    color: #369;
-}
-.dark #mast span.title {
-    color: #eee;
-}
-
-#mast span.right {
-    padding-top: 8px;
-    padding-right: 16px;
-    float: right;
-}
-
-#mast span.radio {
-    font-size: 10pt;
-    margin: 4px 2px;
-    padding: 1px 6px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
-.light #mast span.radio {
-    border: 1px dotted #222;
-    color: #eee;
-}
-.dark #mast span.radio {
-    border: 1px dotted #bbb;
-    color: #888;
-}
-
-#mast span.radio.active {
-    padding: 1px 6px;
-}
-
-.light #mast span.radio.active {
-    background-color: #bbb;
-    border: 1px solid #eee;
-    color: #666;
-
-}
-.dark #mast span.radio.active {
-    background-color: #222;
-    border: 1px solid #eee;
-    color: #78a;
-}
-
-/* Button Bar */
-
-#bb {
-    margin: 0 30px;
-    padding: 0 2px;
-}
-
-#bb .btn {
-    margin: 0 4px;
-    padding: 2px 6px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    font-size: 9pt;
-    cursor: pointer;
-}
-
-.light #bb .btn {
-    border: 1px solid #fff;
-    border-right-color: #444;
-    border-bottom-color: #444;
-    color: #222;
-}
-
-.light #bb .btn.active {
-    border: 1px solid #444;
-    border-right-color: #fff;
-    border-bottom-color: #fff;
-    background-color: #888;
-    color: #ddf;
-}
-
-.dark #bb .btn {
-    border: 1px solid #888;
-    border-right-color: #111;
-    border-bottom-color: #111;
-    color: #888;
-}
-
-.dark #bb .btn.active {
-    border: 1px solid #111;
-    border-right-color: #888;
-    border-bottom-color: #888;
-    background-color: #555;
-    color: #78a;
-}
-

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Masthead script
-
- Defines the masthead for the UI. Injects logo and title, as well as providing
- the placeholder for a set of radio buttons.
- */
-
-(function (onos){
-    'use strict';
-
-    // API's
-    var api = onos.api;
-
-    // Config variables
-    var guiTitle = 'Open Network Operating System';
-
-    // DOM elements and the like
-    var mast = d3.select('#mast');
-
-    mast.append('img')
-        .attr({
-            id: 'logo',
-            src: 'onos-logo.png'
-        });
-
-    mast.append('span')
-        .attr({
-            class: 'title'
-        })
-        .text(guiTitle);
-
-    mast.append('span')
-        .attr({
-            id: 'mastRadio',
-            class: 'right'
-        });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Quick Help layer -- CSS file
- */
-
-#quickhelp {
-    z-index: 1300;
-}
-
-#quickhelp svg {
-    position: absolute;
-    top: 180px;
-    opacity: 1;
-}
-
-#quickhelp svg g.help rect {
-    fill: black;
-    opacity: 0.7;
-}
-
-#quickhelp svg text.title {
-    font-size: 10pt;
-    font-style: italic;
-    text-anchor: middle;
-    fill: #999;
-}
-
-#quickhelp svg g.keyItem {
-    fill: white;
-}
-
-#quickhelp svg g line.qhrowsep {
-    stroke: #888;
-    stroke-dasharray: 2 2;
-}
-
-#quickhelp svg text {
-    font-size: 7pt;
-    alignment-baseline: middle;
-}
-
-#quickhelp svg text.key {
-    fill: #add;
-}
-
-#quickhelp svg text.desc {
-    fill: #ddd;
-}
-

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Quick Help Layer
-
- Defines the key-map layer for the UI. Used to give user a list of
- key bindings; both global, and for the current view.
- */
-
-(function (onos){
-    'use strict';
-
-    // Config variables
-    var w = '100%',
-        h = '80%',
-        fade = 500,
-        vb = '-200 0 400 400';
-
-    // layout configuration
-    var pad = 10,
-        offy = 45,
-        sepYDelta = 20,
-        colXDelta = 16,
-        yTextSpc = 12,
-        offDesc = 8;
-
-    // State variables
-    var data = [],
-        yCount;
-
-    // DOM elements and the like
-    var qhdiv = d3.select('#quickhelp'),
-        svg = qhdiv.select('svg'),
-        pane, rect, items;
-
-    // General functions
-    function isA(a) { return $.isArray(a) ? a : null; }
-    function isS(s) { return typeof s === 'string'; }
-
-    function cap(s) {
-        return s.replace(/^[a-z]/, function (m) { return m.toUpperCase(); });
-    }
-
-    var keyDisp = {
-        equals: '=',
-        dash: '-',
-        slash: '/',
-        backSlash: '\\',
-        backQuote: '`',
-        leftArrow: 'L-arrow',
-        upArrow: 'U-arrow',
-        rightArrow: 'R-arrow',
-        downArrow: 'D-arrow'
-    };
-
-    function mkKeyDisp(id) {
-        var v = keyDisp[id] || id;
-        return cap(v);
-    }
-
-    function addSeparator(el, i) {
-        var y = sepYDelta/2 - 5;
-        el.append('line')
-            .attr({ 'class': 'qhrowsep', x1: 0, y1: y, x2: 0, y2: y });
-    }
-
-    function addContent(el, data, ri) {
-        var xCount = 0,
-            clsPfx = 'qh-r' + ri + '-c';
-
-        function addColumn(el, c, i) {
-            var cls = clsPfx + i,
-                oy = 0,
-                aggKey = el.append('g').attr('visibility', 'hidden'),
-                gcol = el.append('g').attr({
-                   'class': cls,
-                    transform: translate(xCount, 0)
-                });
-
-            c.forEach(function (j) {
-                var k = j[0],
-                    v = j[1];
-
-                if (k !== '-') {
-                    aggKey.append('text').text(k);
-
-                    gcol.append('text').text(k)
-                        .attr({
-                            'class': 'key',
-                            y: oy
-                        });
-                    gcol.append('text').text(v)
-                        .attr({
-                            'class': 'desc',
-                            y: oy
-                        });
-                }
-
-                oy += yTextSpc;
-            });
-
-            // adjust position of descriptions, based on widest key
-            var kbox = aggKey.node().getBBox(),
-                ox = kbox.width + offDesc;
-            gcol.selectAll('.desc').attr('x', ox);
-            aggKey.remove();
-
-            // now update x-offset for next column
-            var bbox = gcol.node().getBBox();
-            xCount += bbox.width + colXDelta;
-        }
-
-        data.forEach(function (d, i) {
-            addColumn(el, d, i);
-        });
-
-        // finally, return the height of the row..
-        return el.node().getBBox().height;
-    }
-
-    function updateKeyItems() {
-        var rows = items.selectAll('.qhRow').data(data);
-
-        yCount = offy;
-
-        var entering = rows.enter()
-            .append('g')
-            .attr({
-                'class': 'qhrow'
-            });
-
-        entering.each(function (r, i) {
-            var el = d3.select(this),
-                sep = r.type === 'sep',
-                dy;
-
-            el.attr('transform', translate(0, yCount));
-
-            if (sep) {
-                addSeparator(el, i);
-                yCount += sepYDelta;
-            } else {
-                dy = addContent(el, r.data, i);
-                yCount += dy;
-            }
-        });
-
-        // size the backing rectangle
-        var ibox = items.node().getBBox(),
-            paneW = ibox.width + pad * 2,
-            paneH = ibox.height + offy;
-
-        items.selectAll('.qhrowsep').attr('x2', ibox.width);
-        items.attr('transform', translate(-paneW/2, -pad));
-        rect.attr({
-            width: paneW,
-            height: paneH,
-            transform: translate(-paneW/2-pad, 0)
-        });
-
-    }
-
-    function translate(x, y) {
-        return 'translate(' + x + ',' + y + ')';
-    }
-
-    function checkFmt(fmt) {
-        // should be a single array of keys,
-        // or array of arrays of keys (one per column).
-        // return null if there is a problem.
-        var a = isA(fmt),
-            n = a && a.length,
-            ns = 0,
-            na = 0;
-
-        if (n) {
-            // it is an array which has some content
-            a.forEach(function (d) {
-                isA(d) && na++;
-                isS(d) && ns++;
-            });
-            if (na === n || ns === n) {
-                // all arrays or all strings...
-                return a;
-            }
-        }
-        return null;
-    }
-
-    function buildBlock(map, fmt) {
-        var b = [];
-        fmt.forEach(function (k) {
-            var v = map.get(k),
-                a = isA(v),
-                d = (a && a[1]);
-
-            // '-' marks a separator; d is the description
-            if (k === '-' || d) {
-                b.push([mkKeyDisp(k), d]);
-            }
-        });
-        return b;
-    }
-
-    function emptyRow() {
-        return { type: 'row', data: []};
-    }
-
-    function mkArrRow(fmt) {
-        var d = emptyRow();
-        d.data.push(fmt);
-        return d;
-    }
-
-    function mkColumnarRow(map, fmt) {
-        var d = emptyRow();
-        fmt.forEach(function (a) {
-            d.data.push(buildBlock(map, a));
-        });
-        return d;
-    }
-
-    function mkMapRow(map, fmt) {
-        var d = emptyRow();
-        d.data.push(buildBlock(map, fmt));
-        return d;
-    }
-
-    function addRow(row) {
-        var d = row || { type: 'sep' };
-        data.push(d);
-    }
-
-    function aggregateData(bindings) {
-        var hf = '_helpFormat',
-            gmap = d3.map(bindings.globalKeys),
-            gfmt = bindings.globalFormat,
-            vmap = d3.map(bindings.viewKeys),
-            vgest = bindings.viewGestures,
-            vfmt, vkeys;
-
-        // filter out help format entry
-        vfmt = checkFmt(vmap.get(hf));
-        vmap.remove(hf);
-
-        // if bad (or no) format, fallback to sorted keys
-        if (!vfmt) {
-            vkeys = vmap.keys();
-            vfmt = vkeys.sort();
-        }
-
-        data = [];
-
-        addRow(mkMapRow(gmap, gfmt));
-        addRow();
-        addRow(isA(vfmt[0]) ? mkColumnarRow(vmap, vfmt) : mkMapRow(vmap, vfmt));
-        addRow();
-        addRow(mkArrRow(vgest));
-    }
-
-
-    function popBind(bindings) {
-        pane = svg.append('g')
-            .attr({
-                class: 'help',
-                opacity: 0
-            });
-
-        rect = pane.append('rect')
-            .attr('rx', 8);
-
-        pane.append('text')
-            .text('Quick Help')
-            .attr({
-                class: 'title',
-                dy: '1.2em',
-                transform: translate(-pad,0)
-            });
-
-        items = pane.append('g');
-        aggregateData(bindings);
-        updateKeyItems();
-
-        _fade(1);
-    }
-
-    function fadeBindings() {
-        _fade(0);
-    }
-
-    function _fade(o) {
-        svg.selectAll('g.help')
-            .transition()
-            .duration(fade)
-            .attr('opacity', o);
-    }
-
-    function addSvg() {
-        svg = qhdiv.append('svg')
-            .attr({
-                width: w,
-                height: h,
-                viewBox: vb
-            });
-    }
-
-    function removeSvg() {
-        svg.transition()
-            .delay(fade + 20)
-            .remove();
-    }
-
-    function showQuickHelp(bindings) {
-        svg = qhdiv.select('svg');
-        if (svg.empty()) {
-            addSvg();
-            popBind(bindings);
-        } else {
-            hideQuickHelp();
-        }
-    }
-
-    function hideQuickHelp() {
-        svg = qhdiv.select('svg');
-        if (!svg.empty()) {
-            fadeBindings();
-            removeSvg();
-            return true;
-        }
-        return false;
-    }
-
-    onos.ui.addLib('quickHelp', {
-        show: showQuickHelp,
-        hide: hideQuickHelp
-    });
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Sample module file to illustrate framework integration.
- */
-
-(function (onos) {
-    'use strict';
-
-    var pi = Math.PI,
-        svg,
-        dotG,
-        nCircles = 12,
-        circleData = [],
-        dotId = 0,
-        angle = 360 / nCircles,
-        baseAngle = -90 - angle,
-        groupRadius = 120,
-        dotRadius = 24,
-        dotMoveMs = 800,
-        dotAppearMs = 300,
-        dotEase = 'elastic',
-        colorScale = d3.scale.linear()
-            .domain([-pi/2, 2*pi/4, 3*pi/2])
-            .range(['green', 'goldenrod', 'blue']);
-
-    // set the size of the SVG layer to match that of the view
-    function sizeSvg(view) {
-        svg.attr({
-            width: view.width(),
-            height: view.height()
-        });
-    }
-
-    // gets invoked only the first time the view is loaded
-    function init(view, ctx, flags) {
-        // prepare our SVG layer...
-        svg = view.$div.append('svg');
-        sizeSvg(view);
-        dotG = svg.append('g').attr('id', 'dots');
-    }
-
-    // gets invoked just before our view is loaded
-    function reset(view, ctx, flags) {
-        // clear dot group and reset circle data
-        dotG.html('');
-        circleData = [];
-        // also clear text, if any
-        svg.selectAll('text').remove();
-    }
-
-    function updateCirclePositions(view, addNew) {
-        var w = view.width(),
-            h = view.height(),
-            ox = w / 2,
-            oy = h / 2;
-
-        // reposition existing dots
-        circleData.forEach(function (c, i) {
-            var inc = addNew ? 1 : 0,
-                theta = ((i + inc) * angle + baseAngle) * pi/180,
-                dx = Math.cos(theta) * groupRadius,
-                dy = Math.sin(theta) * groupRadius,
-                x = ox + dx,
-                y = oy + dy;
-            if (!addNew && i === 0) {
-                x = ox;
-                y = oy;
-            }
-            c.cx = x;
-            c.cy = y;
-            c.rgb = colorScale(theta);
-        });
-
-        if (addNew) {
-            // introduce a new dot
-            circleData.unshift({
-                cx: ox,
-                cy: oy,
-                id: dotId++
-            });
-        }
-
-        // +1 to account for the circle in the center..
-        if (circleData.length > nCircles + 1) {
-            circleData.splice(nCircles + 1, 1);
-        }
-    }
-
-    function doCircles(view) {
-        var ox = view.width() / 2,
-            oy = view.height() / 2,
-            stroke = 'black',
-            fill = 'red',
-            hoverFill = 'magenta';
-
-        // move existing circles, and add a new one
-        updateCirclePositions(view, true);
-
-        var circ = dotG.selectAll('circle')
-            .data(circleData, function (d) { return d.id; });
-
-        // operate on existing elements
-        circ.on('mouseover', null)
-            .on('mouseout', null)
-            .on('click', null)
-            .transition()
-            .duration(dotMoveMs)
-            .ease(dotEase)
-            .attr({
-                cx: function (d) { return d.cx; },
-                cy: function (d) { return d.cy; }
-            })
-            .style({
-                cursor: 'default',
-                fill: function (d) { return d.rgb; }
-            });
-
-        // operate on entering elements
-        circ.enter()
-            .append('circle')
-            .attr({
-                cx: function (d) { return d.cx; },
-                cy: function (d) { return d.cy; },
-                r: 0
-            })
-            .style({
-                fill: fill,
-                stroke: stroke,
-                'stroke-width': 3.5,
-                cursor: 'pointer',
-                opacity: 0
-            })
-            .on('mouseover', function (d) {
-                d3.select(this).style('fill', hoverFill);
-            })
-            .on('mouseout', function (d) {
-                d3.select(this).style('fill', fill);
-            })
-            .on('click', function (d) {
-                setTimeout(function() {
-                    doCircles(view, true);
-                }, 10);
-            })
-            .transition()
-            .delay(dotMoveMs)
-            .duration(dotAppearMs)
-            .attr('r', dotRadius)
-            .style('opacity', 1);
-
-        // operate on exiting elements
-        circ.exit()
-            .transition()
-            .duration(750)
-            .style('opacity', 0)
-            .attr({
-                cx: ox,
-                cy: oy,
-                r: groupRadius - dotRadius
-            })
-            .remove();
-    }
-
-    function load(view, ctx, flags) {
-        var ctxText = ctx ? 'Context is "' + ctx + '"' : '';
-
-        // display our view context
-        if (ctxText) {
-            svg.append('text')
-                .text(ctxText)
-                .attr({
-                    x: 20,
-                    y: '1.5em'
-                })
-                .style({
-                    fill: 'darkgreen',
-                    'font-size': '20pt'
-                });
-        }
-
-        doCircles(view);
-    }
-
-    function resize(view, ctx, flags) {
-        sizeSvg(view);
-        updateCirclePositions(view);
-
-        // move exiting dots into new positions, relative to view size
-        var circ = dotG.selectAll('circle')
-            .data(circleData, function (d) { return d.id; });
-        circ.attr({
-                cx: function (d) { return d.cx; },
-                cy: function (d) { return d.cy; }
-            });
-    }
-
-    // == register our view here, with links to lifecycle callbacks
-
-    onos.ui.addView('sample', {
-        init: init,
-        reset: reset,
-        load: load,
-        resize: resize
-    });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Sample view to illustrate hash formats.
- */
-
-(function (onos) {
-    'use strict';
-
-    var intro = "Try using the following hashes in the address bar:",
-        hashPrefix = '#sampleHash',
-        suffixes = [
-            '',
-            ',one',
-            ',two',
-            ',context,ignored',
-            ',context,ignored?a,b,c',
-            ',two?foo',
-            ',three?foo,bar'
-        ],
-        $d;
-
-    function note(txt) {
-        $d.append('p')
-            .text(txt)
-            .style({
-                'font-size': '10pt',
-                color: 'darkorange',
-                padding: '0 20px',
-                margin: 0
-            });
-    }
-
-    function para(txt, color) {
-        var c = color || 'black';
-        $d.append('p')
-            .text(txt)
-            .style({
-                padding: '2px 8px',
-                color: c
-            });
-    }
-
-    function load(view, ctx, flags) {
-        var c = ctx || '(undefined)',
-            f = flags ? d3.map(flags).keys() : [];
-
-        $d = view.$div;
-
-        para(intro);
-
-        suffixes.forEach(function (s) {
-            note(hashPrefix + s);
-        });
-
-        para('View ID: ' + view.vid, 'blue');
-        para('Context: ' + c, 'blue');
-        para('Flags: { ' + f.join(', ') + ' }', 'magenta');
-    }
-
-    // == register the view here, with links to lifecycle callbacks
-
-    onos.ui.addView('sampleHash', {
-        reset: true,    // empty the div on reset
-        load: load
-    });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Sample view to illustrate key bindings.
- */
-
-(function (onos) {
-    'use strict';
-
-    var keyDispatch = {
-        Z: keyUndo,
-        X: keyCut,
-        C: keyCopy,
-        V: keyPaste,
-        space: keySpace
-    };
-
-    function keyUndo(view) {
-        note(view, 'Z = UNDO');
-    }
-
-    function keyCut(view) {
-        note(view, 'X = CUT');
-    }
-
-    function keyCopy(view) {
-        note(view, 'C = COPY');
-    }
-
-    function keyPaste(view) {
-        note(view, 'V = PASTE');
-    }
-
-    function keySpace(view) {
-        note(view, 'The SpaceBar');
-    }
-
-    function note(view, msg) {
-        view.$div.append('p')
-            .text(msg)
-            .style({
-                'font-size': '10pt',
-                color: 'darkorange',
-                padding: '0 20px',
-                margin: 0
-            });
-    }
-
-    function keyCallback(view, key, keyCode, event) {
-        note(view, 'Key = ' + key + ' KeyCode = ' + keyCode);
-    }
-
-    function load(view, ctx) {
-        // this maps specific keys to specific functions (1)
-        view.setKeys(keyDispatch);
-        // whereas, this installs a general key handler function (2)
-        view.setKeys(keyCallback);
-
-        // Note that (1) takes precedence over (2)
-
-        view.$div.append('p')
-            .text('Press a key or two (try Z,X,C,V and others) ...')
-            .style('padding', '2px 8px');
-    }
-
-    // == register the view here, with links to lifecycle callbacks
-
-    onos.ui.addView('sampleKeys', {
-        reset: true,    // empty the div on reset
-        load: load
-    });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Sample view to illustrate radio buttons.
- */
-
-(function (onos) {
-    'use strict';
-
-    var intro = [ 'Yo, radio button set...', 'Time to shine' ],
-        btnSet = [
-            { text: 'First Button', cb: cbRadio },
-            { text: 'Second Button', cb: cbRadio },
-            { text: 'Third Button', cb: cbRadio }
-        ];
-
-    // radio button callback
-    function cbRadio(view, btn) {
-        write(view, 'You pressed the ' + btn.text);
-    }
-
-    function write(view, msg) {
-        view.$div.append('p')
-            .text(msg)
-            .style({
-                'font-size': '10pt',
-                color: 'green',
-                padding: '0 20px',
-                margin: '2px'
-            });
-    }
-
-    // invoked when the view is loaded
-    function load(view, ctx) {
-        view.setRadio(btnSet);
-
-        view.$div.selectAll('p')
-            .data(intro)
-            .enter()
-            .append('p')
-            .text(function (d) { return d; })
-            .style('padding', '2px 8px');
-    }
-
-    // == register the view here, with links to lifecycle callbacks
-
-    onos.ui.addView('sampleRadio', {
-        reset: true,    // empty the div on reset
-        load: load
-    });
-
-}(ONOS));

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Topology view -- CSS file
- */
-
-#topo svg #topo-bg {
-    opacity: 0.5;
-}
-
-#topo #map {
-    stroke-width: 2px;
-    stroke: #eee;
-    fill: transparent;
-}
-
-/* TODO: move glyphs into framework */
-
-#topo svg .glyphIcon {
-    fill: black;
-    stroke: none;
-    fill-rule: evenodd;
-}
-#topo svg .glyphIcon rect {
-    fill: #ddd;
-    stroke: none;
-}
-
-
-#topo svg .noDevsLayer {
-    visibility: hidden;
-}
-
-#topo svg .noDevsLayer text {
-    font-size: 60pt;
-    font-style: italic;
-    fill: #dde;
-}
-
-#topo svg .noDevsBird {
-    fill: #ecd;
-}
-
-/* NODES */
-
-#topo svg .node {
-    cursor: pointer;
-}
-
-#topo svg .node.selected rect,
-#topo svg .node.selected circle {
-    fill: #f90;
-    filter: url(#blue-glow);
-}
-
-#topo svg .node text {
-    pointer-events: none;
-}
-
-/* Device Nodes */
-
-#topo svg .node.device {
-}
-
-#topo svg .node.device rect {
-    stroke-width: 1.5;
-}
-
-#topo svg .node.device.fixed rect {
-    stroke-width: 1.5;
-    stroke: #ccc;
-}
-
-/* note: device is offline without the 'online' class */
-#topo svg .node.device {
-    fill: #777;
-}
-
-#topo svg .node.device.online {
-    fill: #6e7fa3;
-}
-
-/* note: device is offline without the 'online' class */
-#topo svg .node.device text {
-    fill: #bbb;
-    font: 10pt sans-serif;
-}
-
-#topo svg .node.device.online text {
-    fill: white;
-}
-
-#topo svg .node.device .glyphIcon rect {
-    fill: #aaa;
-}
-#topo svg .node.device .glyphIcon use {
-    fill: #777;
-}
-#topo svg .node.device.selected .glyphIcon rect {
-    fill: #f90;
-}
-#topo svg .node.device.online .glyphIcon rect {
-    fill: #ccc;
-}
-#topo svg .node.device.online .glyphIcon use {
-    fill: #000;
-}
-#topo svg .node.device.online.selected .glyphIcon rect {
-    fill: #f90;
-}
-
-
-/* Host Nodes */
-
-#topo svg .node.host {
-    stroke: #000;
-}
-
-#topo svg .node.host text {
-    fill: #846;
-    stroke: none;
-    font: 9pt sans-serif;
-}
-
-svg .node.host circle {
-    stroke: #000;
-    fill: #edb;
-}
-
-/* LINKS */
-
-#topo svg .link {
-    opacity: .9;
-}
-
-#topo svg .link.inactive {
-    opacity: .5;
-    stroke-dasharray: 8 4;
-}
-
-#topo svg .link.secondary {
-    stroke: rgba(0,153,51,0.5);
-    stroke-width: 3px;
-}
-#topo svg .link.primary {
-    stroke: #ffA300;
-    stroke-width: 4px;
-}
-#topo svg .link.animated {
-    stroke: #ffA300;
-}
-
-#topo svg .link.secondary.optical {
-    stroke: rgba(128,64,255,0.5);
-    stroke-width: 4px;
-}
-#topo svg .link.primary.optical {
-    stroke: #74f;
-    stroke-width: 6px;
-}
-#topo svg .link.animated.optical {
-    stroke: #74f;
-    stroke-width: 10px;
-}
-
-#topo svg .linkLabel rect {
-    fill: #eee;
-    stroke: none;
-}
-#topo svg .linkLabel text {
-    text-anchor: middle;
-    stroke: #777;
-    stroke-width: 0.1;
-    font-size: 9pt;
-}
-
-/* Fly-in summary pane */
-
-#topo-summary {
-    /* gets base CSS from .fpanel in floatPanel.css */
-    top: 64px;
-}
-
-#topo-summary svg {
-    display: inline-block;
-    width: 42px;
-    height: 42px;
-}
-
-#topo-summary svg .glyphIcon {
-    fill: black;
-    stroke: none;
-    fill-rule: evenodd;
-}
-
-#topo-summary h2 {
-    position: absolute;
-    margin: 0 4px;
-    top: 20px;
-    left: 50px;
-    color: black;
-}
-
-#topo-summary h3 {
-    margin: 0 4px;
-    top: 20px;
-    left: 50px;
-    color: black;
-}
-
-#topo-summary p, table {
-    margin: 4px 4px;
-}
-
-#topo-summary td.label {
-    font-style: italic;
-    color: #777;
-    padding-right: 12px;
-}
-
-#topo-summary td.value {
-}
-
-#topo-summary hr {
-    height: 1px;
-    color: #ccc;
-    background-color: #ccc;
-    border: 0;
-}
-
-/* Fly-in details pane */
-
-#topo-detail {
-    /* gets base CSS from .fpanel in floatPanel.css */
-    top: 320px;
-
-}
-
-#topo-detail svg {
-    display: inline-block;
-    width: 42px;
-    height: 42px;
-}
-
-#topo-detail svg .glyphIcon {
-    fill: black;
-    stroke: none;
-    fill-rule: evenodd;
-}
-
-#topo-detail h2 {
-    position: absolute;
-    margin: 0 4px;
-    top: 20px;
-    left: 50px;
-    color: black;
-}
-
-#topo-detail h3 {
-    margin: 0 4px;
-    top: 20px;
-    left: 50px;
-    color: black;
-}
-
-#topo-detail p, table {
-    margin: 4px 4px;
-}
-
-#topo-detail td.label {
-    font-style: italic;
-    color: #777;
-    padding-right: 12px;
-}
-
-#topo-detail td.value {
-}
-
-
-#topo-detail .actionBtn {
-    margin: 6px 12px;
-    padding: 2px 6px;
-    font-size: 9pt;
-    cursor: pointer;
-    width: 200px;
-    text-align: center;
-
-    /* theme specific... */
-    border: 2px solid #ddd;
-    border-radius: 4px;
-    color: #eee;
-    background: #888;
-}
-
-#topo-detail .actionBtn:hover {
-    /* theme specific... */
-    border: 2px solid #ddd;
-    color: #eee;
-    background: #444;
-}
-
-
-#topo-detail hr {
-    height: 1px;
-    color: #ccc;
-    background-color: #ccc;
-    border: 0;
-}
-
-/* ONOS instance stuff */
-
-#topo-oibox {
-    height: 100px;
-}
-
-#topo-oibox div.onosInst {
-    display: inline-block;
-    width: 170px;
-    height: 85px;
-    cursor: pointer;
-}
-
-#topo-oibox svg rect {
-    fill: #ccc;
-    stroke: #aaa;
-    stroke-width: 3.5;
-}
-#topo-oibox .online svg rect {
-    opacity: 1;
-    fill: #9cf;
-    stroke: #555;
-}
-
-#topo-oibox svg .glyphIcon {
-    fill: #888;
-    fill-rule: evenodd;
-}
-#topo-oibox .online svg .glyphIcon {
-    fill: #000;
-}
-
-#topo-oibox svg .badgeIcon {
-    fill: #777;
-    fill-rule: evenodd;
-}
-
-#topo-oibox .online svg .badgeIcon {
-    fill: #fff;
-}
-
-#topo-oibox svg text {
-    text-anchor: middle;
-    fill: #777;
-}
-#topo-oibox .online svg text {
-    fill: #eee;
-}
-
-#topo-oibox svg text.instTitle {
-    font-size: 11pt;
-    font-weight: bold;
-}
-#topo-oibox svg text.instLabel {
-    font-size: 9pt;
-    font-style: italic;
-}
-
-#topo-oibox .onosInst.mastership {
-    opacity: 0.3;
-}
-#topo-oibox .onosInst.mastership.affinity {
-    opacity: 1.0;
-}
-#topo-oibox .onosInst.mastership.affinity svg rect {
-    filter: url(#blue-glow);
-}
-
-
-#topo svg .suppressed {
-    opacity: 0.2;
-}
-
-/* Death Mask (starts hidden) */
-
-#topo-mask {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 10000px;
-    height: 8000px;
-    z-index: 5000;
-    background-color: rgba(0,0,0,0.75);
-    padding: 60px;
-}
-
-#topo-mask p {
-    margin: 8px 20px;
-    color: #ddd;
-    font-size: 14pt;
-    font-style: italic;
-}
-

-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS network topology viewer - version 1.1
- */
-
-(function (onos) {
-    'use strict';
-
-    // shorter names for library APIs
-    var d3u = onos.lib.d3util,
-        gly = onos.lib.glyphs;
-
-    // configuration data
-    var config = {
-        useLiveData: true,
-        fnTrace: true,
-        debugOn: false,
-        birdDim: 400,
-        options: {
-            showBackground: true
-        },
-        webSockUrl: '../ws/topology',
-        data: {
-            live: {
-                jsonUrl: '../rs/topology/graph',
-                detailPrefix: '../rs/topology/graph/',
-                detailSuffix: ''
-            },
-            fake: {
-                jsonUrl: 'json/network2.json',
-                detailPrefix: 'json/',
-                detailSuffix: '.json'
-            }
-        },
-        labels: {
-            imgPad: 16,
-            padLR: 4,
-            padTB: 3,
-            marginLR: 3,
-            marginTB: 2,
-            port: {
-                gap: 3,
-                width: 18,
-                height: 14
-            }
-        },
-        topo: {
-            linkBaseColor: '#666',
-            linkInColor: '#66f',
-            linkInWidth: 12,
-            linkOutColor: '#f00',
-            linkOutWidth: 10
-        },
-        icons: {
-            device: {
-                dim: 36,
-                rx: 4,
-                xoff: -20,
-                yoff: -18
-            },
-            host: {
-                defaultRadius: 9,
-                radius: {
-                    endstation: 14,
-                    bgpSpeaker: 14,
-                    router: 14
-                }
-            }
-        },
-        force: {
-            note_for_links: 'link.type is used to differentiate',
-            linkDistance: {
-                direct: 100,
-                optical: 120,
-                hostLink: 3
-            },
-            linkStrength: {
-                direct: 1.0,
-                optical: 1.0,
-                hostLink: 1.0
-            },
-            note_for_nodes: 'node.class is used to differentiate',
-            charge: {
-                device: -8000,
-                host: -5000
-            }
-        },
-        // see below in creation of viewBox on main svg
-        logicalSize: 1000
-    };
-
-    // radio buttons
-    var layerButtons = [
-            { text: 'All Layers', id: 'all', cb: showAllLayers },
-            { text: 'Packet Only', id: 'pkt', cb: showPacketLayer },
-            { text: 'Optical Only', id: 'opt', cb: showOpticalLayer }
-        ],
-        layerBtnSet,
-        layerBtnDispatch = {
-            all: showAllLayers,
-            pkt: showPacketLayer,
-            opt: showOpticalLayer
-        };
-
-    // key bindings
-    var keyDispatch = {
-        // ==== "development mode" ====
-        //0: testMe,
-        //equals: injectStartupEvents,
-        //dash: injectTestEvent,
-
-        O: [toggleSummary, 'Toggle ONOS summary pane'],
-        I: [toggleInstances, 'Toggle ONOS instances pane'],
-        D: [toggleDetails, 'Disable / enable details pane'],
-
-        H: [toggleHosts, 'Toggle host visibility'],
-        M: [toggleOffline, 'Toggle offline visibility'],
-        B: [toggleBg, 'Toggle background image'],
-        P: togglePorts,
-
-        X: [toggleNodeLock, 'Lock / unlock node positions'],
-        Z: [toggleOblique, 'Toggle oblique view (Experimental)'],
-        L: [cycleLabels, 'Cycle device labels'],
-        U: [unpin, 'Unpin node (hover mouse over)'],
-        R: [resetPanZoom, 'Reset pan / zoom'],
-
-        V: [showRelatedIntentsAction, 'Show all related intents'],
-        rightArrow: [showNextIntentAction, 'Show next related intent'],
-        leftArrow: [showPrevIntentAction, 'Show previous related intent'],
-        W: [showSelectedIntentTrafficAction, 'Monitor traffic of selected intent'],
-        A: [showAllTrafficAction, 'Monitor all traffic'],
-        F: [showDeviceLinkFlowsAction, 'Show device link flows'],
-
-        E: [equalizeMasters, 'Equalize mastership roles'],
-
-        esc: handleEscape,
-
-        _helpFormat: [
-            ['O', 'I', 'D', '-', 'H', 'M', 'B', 'P' ],
-            ['X', 'Z', 'L', 'U', 'R' ],
-            ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
-        ]
-    };
-
-    // mouse gestures
-    var gestures = [
-        ['click', 'Select the item and show details'],
-        ['shift-click', 'Toggle selection state'],
-        ['drag', 'Reposition (and pin) device / host'],
-        ['cmd-scroll', 'Zoom in / out'],
-        ['cmd-drag', 'Pan']
-    ];
-
-    // state variables
-    var network = {
-            view: null,     // view token reference
-            nodes: [],
-            links: [],
-            lookup: {},
-            revLinkToKey: {}
-        },
-        scenario = {
-            evDir: 'json/ev/',
-            evScenario: '/scenario.json',
-            evPrefix: '/ev_',
-            evOnos: '_onos.json',
-            evUi: '_ui.json',
-            ctx: null,
-            params: {},
-            evNumber: 0,
-            view: null
-        },
-        webSock,
-        sid = 0,
-        deviceLabelCount = 3,
-        hostLabelCount = 2,
-        deviceLabelIndex = 0,
-        hostLabelIndex = 0,
-        selections = {},
-        selectOrder = [],
-        hovered = null,
-        summaryPane,
-        detailPane,
-        antTimer = null,
-        guiSuccessor = null,
-        onosInstances = {},
-        onosOrder = [],
-        oiBox,
-        oiShowMaster = false,
-        portLabelsOn = false,
-        cat7 = d3u.cat7(),
-        colorAffinity = false,
-        showHosts = false,
-        showOffline = true,
-        useDetails = true,
-        haveDetails = false,
-        nodeLock = false,
-        oblique = false;
-
-    // constants
-    var hoverModeNone = 0,
-        hoverModeAll = 1,
-        hoverModeFlows = 2,
-        hoverModeIntents = 3,
-        hoverMode = hoverModeNone;
-
-    // D3 selections
-    var svg,
-        panZoomContainer,
-        noDevices,
-        bgImg,
-        topoG,
-        nodeG,
-        linkG,
-        linkLabelG,
-        node,
-        link,
-        linkLabel,
-        mask;
-
-    // the projection for the map background
-    var geoMapProj;
-
-    // the zoom function
-    var zoom;
-
-    // ==============================
-    // For Debugging / Development
-
-    function fnTrace(msg, id) {
-        if (config.fnTrace) {
-            console.log('FN: ' + msg + ' [' + id + ']');
-        }
-    }
-
-    function evTrace(data) {
-        fnTrace(data.event, data.payload.id);
-    }
-
-    // ==============================
-    // Key Callbacks
-
-    function flash(txt) {
-        network.view.flash(txt);
-    }
-
-    function testMe(view) {
-        //view.alert('Theme is ' + view.getTheme());
-        //view.flash('This is some text');
-        cat7.testCard(svg);
-    }
-
-    function injectTestEvent(view) {
-        if (config.useLiveData) { return; }
-
-        var sc = scenario,
-            evn = ++sc.evNumber,
-            pfx = sc.evDir + sc.ctx + sc.evPrefix + evn,
-            onosUrl = pfx + sc.evOnos,
-            uiUrl = pfx + sc.evUi,
-            stack = [
-                { url: onosUrl, cb: handleServerEvent },
-                { url: uiUrl, cb: handleUiEvent }
-            ];
-        recurseFetchEvent(stack, evn);
-    }
-
-    function recurseFetchEvent(stack, evn) {
-        var v = scenario.view,
-            frame;
-        if (stack.length === 0) {
-            v.alert('Oops!\n\nNo event #' + evn + ' found.');
-            return;
-        }
-        frame = stack.shift();
-
-        d3.json(frame.url, function (err, data) {
-            if (err) {
-                if (err.status === 404) {
-                    // if we didn't find the data, try the next stack frame
-                    recurseFetchEvent(stack, evn);
-                } else {
-                    v.alert('non-404 error:\n\n' + frame.url + '\n\n' + err);
-                }
-            } else {
-                wsTrace('test', JSON.stringify(data));
-                frame.cb(data);
-            }
-        });
-
-    }
-
-    function handleUiEvent(data) {
-        scenario.view.alert('UI Tx: ' + data.event + '\n\n' +
-            JSON.stringify(data));
-    }
-
-    function injectStartupEvents(view) {
-        var last = scenario.params.lastAuto || 0;
-        if (config.useLiveData) { return; }
-
-        while (scenario.evNumber < last) {
-            injectTestEvent(view);
-        }
-    }
-
-    function toggleBg() {
-        var vis = bgImg.style('visibility');
-        bgImg.style('visibility', visVal(vis === 'hidden'));
-    }
-
-    function opacifyBg(b) {
-        bgImg.transition()
-            .duration(1000)
-            .attr('opacity', b ? 1 : 0);
-    }
-
-    function toggleNodeLock() {
-        nodeLock = !nodeLock;
-        flash('Node positions ' + (nodeLock ? 'locked' : 'unlocked'))
-    }
-
-    function toggleOblique() {
-        oblique = !oblique;
-        if (oblique) {
-            network.force.stop();
-            toObliqueView();
-        } else {
-            toNormalView();
-        }
-    }
-
-    function toggleHosts() {
-        showHosts = !showHosts;
-        updateHostVisibility();
-        flash('Hosts ' + visVal(showHosts));
-    }
-
-    function toggleOffline() {
-        showOffline = !showOffline;
-        updateOfflineVisibility();
-        flash('Offline devices ' + visVal(showOffline));
-    }
-
-    function cycleLabels() {
-        deviceLabelIndex = (deviceLabelIndex === 2)
-            ? 0 : deviceLabelIndex + 1;
-
-        network.nodes.forEach(function (d) {
-            if (d.class === 'device') {
-                updateDeviceLabel(d);
-            }
-        });
-    }
-
-    function togglePorts(view) {
-        //view.alert('togglePorts() callback')
-    }
-
-    function unpin() {
-        if (hovered) {
-            sendUpdateMeta(hovered);
-            hovered.fixed = false;
-            hovered.el.classed('fixed', false);
-            fResume();
-        }
-    }
-
-    function handleEscape(view) {
-        if (oiShowMaster) {
-            cancelAffinity();
-        } else if (haveDetails) {
-            deselectAll();
-        } else if (oiBox.isVisible()) {
-            hideInstances();
-        } else if (summaryPane.isVisible()) {
-            cancelSummary();
-            stopAntTimer();
-        } else {
-            hoverMode = hoverModeNone;
-        }
-    }
-
-    function showNoDevs(b) {
-        noDevices.style('visibility', visVal(b));
-    }
-
-    // ==============================
-    // Oblique view ...
-
-    var obview = {
-            tt:  -.7,     // x skew y factor
-            xsk: -35,     // x skew angle
-            ysc: 0.5,     // y scale
-            pad: 50,
-            time: 1500,
-            fill: {
-                pkt: 'rgba(130,130,170,0.3)',
-                opt: 'rgba(170,130,170,0.3)'
-            },
-            id: function (tag) {
-                return 'obview-' + tag + 'Plane';
-            },
-            yt: function (h, dir) {
-                return h * obview.ysc * dir * 1.1;
-            },
-            obXform: function (h, dir) {
-                var yt = obview.yt(h, dir);
-                return scale(1, obview.ysc) + translate(0, yt) + skewX(obview.xsk);
-            },
-            noXform: function () {
-                return skewX(0) + translate(0,0) + scale(1,1);
-            },
-            xffn: null,
-            plane: {}
-    };
-
-
-    function toObliqueView() {
-        var box = nodeG.node().getBBox(),
-            ox, oy;
-
-        padBox(box, obview.pad);
-
-        ox = box.x + box.width / 2;
-        oy = box.y + box.height / 2;
-
-        // remember node lock state, then lock the nodes down
-        obview.nodeLock = nodeLock;
-        nodeLock = true;
-        opacifyBg(false);
-
-        insertPlanes(ox, oy);
-
-        obview.xffn = function (xy, dir) {
-            var yt = obview.yt(box.height, dir),
-                ax = xy.x - ox,
-                ay = xy.y - oy,
-                x = ax + ay * obview.tt,
-                y = ay * obview.ysc + obview.ysc * yt;
-            return {x: ox + x, y: oy + y};
-        };
-
-        showPlane('pkt', box, -1);
-        showPlane('opt', box, 1);
-        obTransitionNodes();
-    }
-
-    function toNormalView() {
-        obview.xffn = null;
-
-        hidePlane('pkt');
-        hidePlane('opt');
-        obTransitionNodes();
-
-        removePlanes();
-
-        // restore node lock state
-        nodeLock = obview.nodeLock;
-        opacifyBg(true);
-    }
-
-    function obTransitionNodes() {
-        var xffn = obview.xffn;
-
-        // return the direction for the node
-        // -1 for pkt layer, 1 for optical layer
-        function dir(d) {
-            return inLayer(d, 'pkt') ? -1 : 1;
-        }
-
-        if (xffn) {
-            network.nodes.forEach(function (d) {
-                var oldxy = {x: d.x, y: d.y},
-                    coords = xffn(oldxy, dir(d));
-                d.oldxy = oldxy;
-                d.px = d.x = coords.x;
-                d.py = d.y = coords.y;
-            });
-        } else {
-            network.nodes.forEach(function (d) {
-                var old = d.oldxy || {x: d.x, y: d.y};
-                d.px = d.x = old.x;
-                d.py = d.y = old.y;
-                delete d.oldxy;
-            });
-        }
-
-        node.transition()
-            .duration(obview.time)
-            .attr(tickStuff.nodeAttr);
-        link.transition()
-            .duration(obview.time)
-            .attr(tickStuff.linkAttr);
-        linkLabel.transition()
-            .duration(obview.time)
-            .attr(tickStuff.linkLabelAttr);
-    }
-
-    function showPlane(tag, box, dir) {
-        var g = obview.plane[tag];
-
-        // set box origin at center..
-        box.x = -box.width/2;
-        box.y = -box.height/2;
-
-        g.select('rect')
-            .attr(box)
-            .attr('opacity', 0)
-            .transition()
-            .duration(obview.time)
-            .attr('opacity', 1)
-            .attr('transform', obview.obXform(box.height, dir));
-    }
-
-    function hidePlane(tag) {
-        var g = obview.plane[tag];
-
-        g.select('rect')
-            .transition()
-            .duration(obview.time)
-            .attr('opacity', 0)
-            .attr('transform', obview.noXform());
-    }
-
-    function insertPlanes(ox, oy) {
-        function ins(tag) {
-            var id = obview.id(tag),
-                g = panZoomContainer.insert('g', '#topo-G')
-                    .attr('id', id)
-                    .attr('transform', translate(ox,oy));
-            g.append('rect')
-                .attr('fill', obview.fill[tag])
-                .attr('opacity', 0);
-            obview.plane[tag] = g;
-        }
-        ins('opt');
-        ins('pkt');
-    }
-
-    function removePlanes() {
-        function rem(tag) {
-            var id = obview.id(tag);
-            panZoomContainer.select('#'+id)
-                .transition()
-                .duration(obview.time + 50)
-                .remove();
-            delete obview.plane[tag];
-        }
-        rem('opt');
-        rem('pkt');
-    }
-
-    function padBox(box, p) {
-        box.x -= p;
-        box.y -= p;
-        box.width += p*2;
-        box.height += p*2;
-    }
-
-    // ==============================
-    // Radio Button Callbacks
-
-    var layerLookup = {
-        host: {
-            endstation: 'pkt', // default, if host event does not define type
-            router:     'pkt',
-            bgpSpeaker: 'pkt'
-        },
-        device: {
-            switch: 'pkt',
-            roadm: 'opt'
-        },
-        link: {
-            hostLink: 'pkt',
-            direct: 'pkt',
-            indirect: '',
-            tunnel: '',
-            optical: 'opt'
-        }
-    };
-
-    function inLayer(d, layer) {
-        var type = d.class === 'link' ? d.type() : d.type,
-            look = layerLookup[d.class],
-            lyr = look && look[type];
-        return lyr === layer;
-    }
-
-    function unsuppressLayer(which) {
-        node.each(function (d) {
-            var node = d.el;
-            if (inLayer(d, which)) {
-                node.classed('suppressed', false);
-            }
-        });
-
-        link.each(function (d) {
-            var link = d.el;
-            if (inLayer(d, which)) {
-                link.classed('suppressed', false);
-            }
-        });
-    }
-
-    function suppressLayers(b) {
-        node.classed('suppressed', b);
-        link.classed('suppressed', b);
-//        d3.selectAll('svg .port').classed('inactive', false);
-//        d3.selectAll('svg .portText').classed('inactive', false);
-    }
-
-    function showAllLayers() {
-        suppressLayers(false);
-    }
-
-    function showPacketLayer() {
-        node.classed('suppressed', true);
-        link.classed('suppressed', true);
-        unsuppressLayer('pkt');
-    }
-
-    function showOpticalLayer() {
-        node.classed('suppressed', true);
-        link.classed('suppressed', true);
-        unsuppressLayer('opt');
-    }
-
-    function restoreLayerState() {
-        layerBtnDispatch[layerBtnSet.selected()]();
-    }
-
-    // ==============================
-    // Private functions
-
-    function safeId(s) {
-        return s.replace(/[^a-z0-9]/gi, '-');
-    }
-
-    // set the size of the given element to that of the view (reduced if padded)
-    function setSize(el, view, pad) {
-        var padding = pad ? pad * 2 : 0;
-        el.attr({
-            width: view.width() - padding,
-            height: view.height() - padding
-        });
-    }
-
-    function makeNodeKey(d, what) {
-        var port = what + 'Port';
-        return d[what] + '/' + d[port];
-    }
-
-    function makeLinkKey(d, flipped) {
-        var one = flipped ? makeNodeKey(d, 'dst') : makeNodeKey(d, 'src'),
-            two = flipped ? makeNodeKey(d, 'src') : makeNodeKey(d, 'dst');
-        return one + '-' + two;
-    }
-
-    function findLinkById(id) {
-        // check to see if this is a reverse lookup, else default to given id
-        var key = network.revLinkToKey[id] || id;
-            return key && network.lookup[key];
-    }
-
-    function findLink(linkData, op) {
-        var key = makeLinkKey(linkData),
-            keyrev = makeLinkKey(linkData, 1),
-            link = network.lookup[key],
-            linkRev = network.lookup[keyrev],
-            result = {},
-            ldata = link || linkRev,
-            rawLink;
-
-        if (op === 'add') {
-            if (link) {
-                // trying to add a link that we already know about
-                result.ldata = link;
-                result.badLogic = 'addLink: link already added';
-
-            } else if (linkRev) {
-                // we found the reverse of the link to be added
-                result.ldata = linkRev;
-                if (linkRev.fromTarget) {
-                    result.badLogic = 'addLink: link already added';
-                }
-            }
-        } else if (op === 'update') {
-            if (!ldata) {
-                result.badLogic = 'updateLink: link not found';
-            } else {
-                rawLink = link ? ldata.fromSource : ldata.fromTarget;
-                result.updateWith = function (data) {
-                    $.extend(rawLink, data);
-                    restyleLinkElement(ldata);
-                }
-            }
-        } else if (op === 'remove') {
-            if (!ldata) {
-                result.badLogic = 'removeLink: link not found';
-            } else {
-                rawLink = link ? ldata.fromSource : ldata.fromTarget;
-
-                if (!rawLink) {
-                    result.badLogic = 'removeLink: link not found';
-
-                } else {
-                    result.removeRawLink = function () {
-                        if (link) {
-                            // remove fromSource
-                            ldata.fromSource = null;
-                            if (ldata.fromTarget) {
-                                // promote target into source position
-                                ldata.fromSource = ldata.fromTarget;
-                                ldata.fromTarget = null;
-                                ldata.key = keyrev;
-                                delete network.lookup[key];
-                                network.lookup[keyrev] = ldata;
-                                delete network.revLinkToKey[keyrev];
-                            }
-                        } else {
-                            // remove fromTarget
-                            ldata.fromTarget = null;
-                            delete network.revLinkToKey[keyrev];
-                        }
-                        if (ldata.fromSource) {
-                            restyleLinkElement(ldata);
-                        } else {
-                            removeLinkElement(ldata);
-                        }
-                    }
-                }
-            }
-        }
-        return result;
-    }
-
-    function addLinkUpdate(ldata, link) {
-        // add link event, but we already have the reverse link installed
-        ldata.fromTarget = link;
-        network.revLinkToKey[link.id] = ldata.key;
-        restyleLinkElement(ldata);
-    }
-
-    var allLinkTypes = 'direct indirect optical tunnel',
-        defaultLinkType = 'direct';
-
-    function restyleLinkElement(ldata) {
-        // this fn's job is to look at raw links and decide what svg classes
-        // need to be applied to the line element in the DOM
-        var el = ldata.el,
-            type = ldata.type(),
-            lw = ldata.linkWidth(),
-            online = ldata.online();
-
-        el.classed('link', true);
-        el.classed('inactive', !online);
-        el.classed(allLinkTypes, false);
-        if (type) {
-            el.classed(type, true);
-        }
-        el.transition()
-            .duration(1000)
-            .attr('stroke-width', linkScale(lw))
-            .attr('stroke', config.topo.linkBaseColor);
-    }
-
-    // ==============================
-    // Event handlers for server-pushed events
-
-    function logicError(msg) {
-        // TODO, report logic error to server, via websock, so it can be logged
-        console.warn(msg);
-    }
-
-    var eventDispatch = {
-        addInstance: addInstance,
-        addDevice: addDevice,
-        addLink: addLink,
-        addHost: addHost,
-
-        updateInstance: updateInstance,
-        updateDevice: updateDevice,
-        updateLink: updateLink,
-        updateHost: updateHost,
-
-        removeInstance: removeInstance,
-        removeDevice: removeDevice,
-        removeLink: removeLink,
-        removeHost: removeHost,
-
-        showDetails: showDetails,
-        showSummary: showSummary,
-        showTraffic: showTraffic
-    };
-
-    function addInstance(data) {
-        evTrace(data);
-        var inst = data.payload,
-            id = inst.id;
-        if (onosInstances[id]) {
-            updateInstance(data);
-            return;
-        }
-        onosInstances[id] = inst;
-        onosOrder.push(inst);
-        updateInstances();
-    }
-
-    function addDevice(data) {
-        evTrace(data);
-        var device = data.payload,
-            id = device.id,
-            d;
-
-        showNoDevs(false);
-
-        if (network.lookup[id]) {
-            updateDevice(data);
-            return;
-        }
-
-        d = createDeviceNode(device);
-        network.nodes.push(d);
-        network.lookup[id] = d;
-        updateNodes();
-        fStart();
-    }
-
-    function addLink(data) {
-        evTrace(data);
-        var link = data.payload,
-            result = findLink(link, 'add'),
-            bad = result.badLogic,
-            d = result.ldata;
-
-        if (bad) {
-            logicError(bad + ': ' + link.id);
-            return;
-        }
-
-        if (d) {
-            // we already have a backing store link for src/dst nodes
-            addLinkUpdate(d, link);
-            return;
-        }
-
-        // no backing store link yet
-        d = createLink(link);
-        if (d) {
-            network.links.push(d);
-            network.lookup[d.key] = d;
-            updateLinks();
-            fStart();
-        }
-    }
-
-    function addHost(data) {
-        evTrace(data);
-        var host = data.payload,
-            id = host.id,
-            d,
-            lnk;
-
-        if (network.lookup[id]) {
-            logicError('Host already added: ' + id);
-            return;
-        }
-
-        d = createHostNode(host);
-        network.nodes.push(d);
-        network.lookup[host.id] = d;
-        updateNodes();
-
-        lnk = createHostLink(host);
-        if (lnk) {
-            d.linkData = lnk;    // cache ref on its host
-            network.links.push(lnk);
-            network.lookup[d.ingress] = lnk;
-            network.lookup[d.egress] = lnk;
-            updateLinks();
-        }
-        fStart();
-    }
-
-    function updateInstance(data) {
-        evTrace(data);
-        var inst = data.payload,
-            id = inst.id,
-            d = onosInstances[id];
-        if (d) {
-            $.extend(d, inst);
-            updateInstances();
-        } else {
-            logicError('updateInstance lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    function updateDevice(data) {
-        evTrace(data);
-        var device = data.payload,
-            id = device.id,
-            d = network.lookup[id],
-            wasOnline;
-
-        if (d) {
-            wasOnline = d.online;
-            $.extend(d, device);
-            if (positionNode(d, true)) {
-                sendUpdateMeta(d, true);
-            }
-            updateNodes();
-            if (wasOnline !== d.online) {
-                findAttachedLinks(d.id).forEach(restyleLinkElement);
-                updateOfflineVisibility(d);
-            }
-        } else {
-            logicError('updateDevice lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    function updateLink(data) {
-        evTrace(data);
-        var link = data.payload,
-            result = findLink(link, 'update'),
-            bad = result.badLogic;
-        if (bad) {
-            logicError(bad + ': ' + link.id);
-            return;
-        }
-        result.updateWith(link);
-    }
-
-    function updateHost(data) {
-        evTrace(data);
-        var host = data.payload,
-            id = host.id,
-            d = network.lookup[id];
-        if (d) {
-            $.extend(d, host);
-            if (positionNode(d, true)) {
-                sendUpdateMeta(d, true);
-            }
-            updateNodes(d);
-        } else {
-            logicError('updateHost lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    function removeInstance(data) {
-        evTrace(data);
-        var inst = data.payload,
-            id = inst.id,
-            d = onosInstances[id];
-        if (d) {
-            var idx = find(id, onosOrder);
-            if (idx >= 0) {
-                onosOrder.splice(idx, 1);
-            }
-            delete onosInstances[id];
-            updateInstances();
-        } else {
-            logicError('updateInstance lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    function removeDevice(data) {
-        evTrace(data);
-        var device = data.payload,
-            id = device.id,
-            d = network.lookup[id];
-        if (d) {
-            removeDeviceElement(d);
-        } else {
-            logicError('removeDevice lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    function removeLink(data) {
-        evTrace(data);
-        var link = data.payload,
-            result = findLink(link, 'remove'),
-            bad = result.badLogic;
-        if (bad) {
-            // may have already removed link, if attached to removed device
-            console.warn(bad + ': ' + link.id);
-            return;
-        }
-        result.removeRawLink();
-    }
-
-    function removeHost(data) {
-        evTrace(data);
-        var host = data.payload,
-            id = host.id,
-            d = network.lookup[id];
-        if (d) {
-            removeHostElement(d, true);
-        } else {
-            // may have already removed host, if attached to removed device
-            console.warn('removeHost lookup fail. ID = "' + id + '"');
-        }
-    }
-
-    // the following events are server responses to user actions
-    function showSummary(data) {
-        evTrace(data);
-        populateSummary(data.payload);
-        showSummaryPane();
-    }
-
-    function showDetails(data) {
-        evTrace(data);
-        haveDetails = true;
-        populateDetails(data.payload);
-        if (useDetails) {
-            showDetailPane();
-        }
-    }
-
-    function showTraffic(data) {
-        evTrace(data);
-        var paths = data.payload.paths,
-            hasTraffic = false;
-
-        // Revert any links hilighted previously.
-        link.style('stroke-width', null)
-            .classed('primary secondary animated optical', false);
-        // Remove all previous labels.
-        removeLinkLabels();
-
-        // Now hilight all links in the paths payload, and attach
-        //  labels to them, if they are defined.
-        paths.forEach(function (p) {
-            var n = p.links.length,
-                i,
-                ldata;
-
-            hasTraffic = hasTraffic || p.traffic;
-            for (i=0; i<n; i++) {
-                ldata = findLinkById(p.links[i]);
-                if (ldata && ldata.el) {
-                    ldata.el.classed(p.class, true);
-                    ldata.label = p.labels[i];
-                }
-            }
-        });
-
-        updateLinks();
-
-        if (hasTraffic && !antTimer) {
-            startAntTimer();
-        } else if (!hasTraffic && antTimer) {
-            stopAntTimer();
-        }
-    }
-
-    // ...............................
-
-    function unknownEvent(data) {
-        console.warn('Unknown event type: "' + data.event + '"', data);
-    }
-
-    function handleServerEvent(data) {
-        var fn = eventDispatch[data.event] || unknownEvent;
-        fn(data);
-    }
-
-    // ==============================
-    // Out-going messages...
-
-    function nSel() {
-        return selectOrder.length;
-    }
-    function getSel(idx) {
-        return selections[selectOrder[idx]];
-    }
-    function allSelectionsClass(cls) {
-        for (var i=0, n=nSel(); i<n; i++) {
-            if (getSel(i).obj.class !== cls) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    function toggleInstances() {
-        if (!oiBox.isVisible()) {
-            showInstances();
-        } else {
-            hideInstances();
-        }
-    }
-
-    function showInstances() {
-        oiBox.show();
-        colorAffinity = true;
-        updateDeviceColors();
-    }
-
-    function hideInstances() {
-        oiBox.hide();
-        colorAffinity = false;
-        cancelAffinity();
-        updateDeviceColors();
-    }
-
-    function equalizeMasters() {
-        sendMessage('equalizeMasters');
-        flash('Equalizing master roles');
-    }
-
-    function toggleSummary() {
-        if (!summaryPane.isVisible()) {
-            requestSummary();
-        } else {
-            cancelSummary();
-        }
-    }
-
-    function requestSummary() {
-        sendMessage('requestSummary');
-    }
-
-    function cancelSummary() {
-        sendMessage('cancelSummary');
-        hideSummaryPane();
-    }
-
-    function toggleDetails() {
-        useDetails = !useDetails;
-        if (useDetails) {
-            flash('Enable details pane');
-            if (haveDetails) {
-                showDetailPane();
-            }
-        } else {
-            flash('Disable details pane');
-            hideDetailPane();
-        }
-    }
-
-    // encapsulate interaction between summary and details panes
-    function showSummaryPane() {
-        if (detailPane.isVisible()) {
-            detailPane.down(summaryPane.show);
-        } else {
-            summaryPane.show();
-        }
-    }
-
-    function hideSummaryPane() {
-        summaryPane.hide(function () {
-            if (detailPane.isVisible()) {
-                detailPane.up();
-            }
-        });
-    }
-
-    function showDetailPane() {
-        if (summaryPane.isVisible()) {
-            detailPane.down(detailPane.show);
-        } else {
-            detailPane.up(detailPane.show);
-        }
-    }
-
-    function hideDetailPane() {
-        detailPane.hide();
-    }
-
-
-    // request details for the selected element
-    // invoked from selection of a single node.
-    function requestDetails() {
-        var data = getSel(0).obj;
-        sendMessage('requestDetails', {
-            id: data.id,
-            class: data.class
-        });
-    }
-
-    function addHostIntentAction() {
-        sendMessage('addHostIntent', {
-            one: selectOrder[0],
-            two: selectOrder[1],
-            ids: selectOrder
-        });
-        flash('Host-to-Host flow added');
-    }
-
-    function addMultiSourceIntentAction() {
-        sendMessage('addMultiSourceIntent', {
-            src: selectOrder.slice(0, selectOrder.length - 1),
-            dst: selectOrder[selectOrder.length - 1],
-            ids: selectOrder
-        });
-        flash('Multi-Source flow added');
-    }
-
-    function cancelTraffic() {
-        sendMessage('cancelTraffic');
-    }
-
-    function requestTrafficForMode() {
-        if (hoverMode === hoverModeFlows) {
-            requestDeviceLinkFlows();
-        } else if (hoverMode === hoverModeIntents) {
-            requestRelatedIntents();
-        }
-    }
-
-    function showRelatedIntentsAction() {
-        hoverMode = hoverModeIntents;
-        requestRelatedIntents();
-        flash('Related Paths');
-    }
-
-    function requestRelatedIntents() {
-        function hoverValid() {
-            return hoverMode === hoverModeIntents &&
-                hovered &&
-                (hovered.class === 'host' || hovered.class === 'device');
-        }
-
-        if (validateSelectionContext()) {
-            sendMessage('requestRelatedIntents', {
-                ids: selectOrder,
-                hover: hoverValid() ? hovered.id : ''
-            });
-        }
-    }
-
-    function showNextIntentAction() {
-        hoverMode = hoverModeNone;
-        sendMessage('requestNextRelatedIntent');
-        flash('>');
-    }
-
-    function showPrevIntentAction() {
-        hoverMode = hoverModeNone;
-        sendMessage('requestPrevRelatedIntent');
-        flash('<');
-    }
-
-    function showSelectedIntentTrafficAction() {
-        hoverMode = hoverModeNone;
-        sendMessage('requestSelectedIntentTraffic');
-        flash('Traffic on Selected Path');
-    }
-
-    function showDeviceLinkFlowsAction() {
-        hoverMode = hoverModeFlows;
-        requestDeviceLinkFlows();
-        flash('Device Flows');
-    }
-
-    function requestDeviceLinkFlows() {
-        function hoverValid() {
-            return hoverMode === hoverModeFlows &&
-                hovered && (hovered.class === 'device');
-        }
-
-        if (validateSelectionContext()) {
-            sendMessage('requestDeviceLinkFlows', {
-                ids: selectOrder,
-                hover: hoverValid() ? hovered.id : ''
-            });
-        }
-    }
-
-    function showAllTrafficAction() {
-        hoverMode = hoverModeAll;
-        requestAllTraffic();
-        flash('All Traffic');
-    }
-
-    function requestAllTraffic() {
-        sendMessage('requestAllTraffic');
-    }
-
-    function validateSelectionContext() {
-        if (!hovered && nSel() === 0) {
-            cancelTraffic();
-            return false;
-        }
-        return true;
-    }
-
-
-    // ==============================
-    // onos instance panel functions
-
-    var instCfg = {
-        rectPad: 8,
-        nodeOx: 9,
-        nodeOy: 9,
-        nodeDim: 40,
-        birdOx: 19,
-        birdOy: 21,
-        birdDim: 21,
-        uiDy: 45,
-        titleDy: 30,
-        textYOff: 20,
-        textYSpc: 15
-    };
-
-    function viewBox(dim) {
-        return '0 0 ' + dim.w + ' ' + dim.h;
-    }
-
-    function instRectAttr(dim) {
-        var pad = instCfg.rectPad;
-        return {
-            x: pad,
-            y: pad,
-            width: dim.w - pad*2,
-            height: dim.h - pad*2,
-            rx: 6
-        };
-    }
-
-    function computeDim(self) {
-        var css = window.getComputedStyle(self);
-        return {
-            w: stripPx(css.width),
-            h: stripPx(css.height)
-        };
-    }
-
-    function updateInstances() {
-        var onoses = oiBox.el.selectAll('.onosInst')
-                .data(onosOrder, function (d) { return d.id; }),
-            instDim = {w:0,h:0},
-            c = instCfg;
-
-        function nSw(n) {
-            return '# Switches: ' + n;
-        }
-
-        // operate on existing onos instances if necessary
-        onoses.each(function (d) {
-            var el = d3.select(this),
-                svg = el.select('svg');
-            instDim = computeDim(this);
-
-            // update online state
-            el.classed('online', d.online);
-
-            // update ui-attached state
-            svg.select('use.uiBadge').remove();
-            if (d.uiAttached) {
-                attachUiBadge(svg);
-            }
-
-            function updAttr(id, value) {
-                svg.select('text.instLabel.'+id).text(value);
-            }
-
-            updAttr('ip', d.ip);
-            updAttr('ns', nSw(d.switches));
-        });
-
-
-        // operate on new onos instances
-        var entering = onoses.enter()
-            .append('div')
-            .attr('class', 'onosInst')
-            .classed('online', function (d) { return d.online; })
-            .on('click', clickInst);
-
-        entering.each(function (d) {
-            var el = d3.select(this),
-                rectAttr,
-                svg;
-            instDim = computeDim(this);
-            rectAttr = instRectAttr(instDim);
-
-            svg = el.append('svg').attr({
-                width: instDim.w,
-                height: instDim.h,
-                viewBox: viewBox(instDim)
-            });
-
-            svg.append('rect').attr(rectAttr);
-
-            appendBadge(svg, 14, 14, 28, '#bird');
-
-            if (d.uiAttached) {
-                attachUiBadge(svg);
-            }
-
-            var left = c.nodeOx + c.nodeDim,
-                len = rectAttr.width - left,
-                hlen = len / 2,
-                midline = hlen + left;
-
-            // title
-            svg.append('text')
-                .attr({
-                    class: 'instTitle',
-                    x: midline,
-                    y: c.titleDy
-                })
-                .text(d.id);
-
-            // a couple of attributes
-            var ty = c.titleDy + c.textYOff;
-
-            function addAttr(id, label) {
-                svg.append('text').attr({
-                    class: 'instLabel ' + id,
-                    x: midline,
-                    y: ty
-                }).text(label);
-                ty += c.textYSpc;
-            }
-
-            addAttr('ip', d.ip);
-            addAttr('ns', nSw(d.switches));
-        });
-
-        // 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);
-        oiBox.height(instDim.h);
-
-        // remove any outgoing instances
-        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');
-        if (!aff) {
-            setAffinity(el, d);
-        } else {
-            cancelAffinity();
-        }
-    }
-
-    function setAffinity(el, d) {
-        d3.selectAll('.onosInst')
-            .classed('mastership', true)
-            .classed('affinity', false);
-        el.classed('affinity', true);
-
-        suppressLayers(true);
-        node.each(function (n) {
-             if (n.master === d.id) {
-                 n.el.classed('suppressed', false);
-             }
-        });
-        oiShowMaster = true;
-    }
-
-    function cancelAffinity() {
-        d3.selectAll('.onosInst')
-            .classed('mastership affinity', false);
-        restoreLayerState();
-        oiShowMaster = false;
-    }
-
-    // TODO: these should be moved out to utility module.
-    function stripPx(s) {
-        return s.replace(/px$/,'');
-    }
-
-    function appendUse(svg, ox, oy, dim, iid, cls) {
-        var use = svg.append('use').attr({
-            transform: translate(ox,oy),
-            'xlink:href': iid,
-            width: dim,
-            height: dim
-        });
-        if (cls) {
-            use.classed(cls, true);
-        }
-        return use;
-    }
-
-    function appendGlyph(svg, ox, oy, dim, iid, cls) {
-        appendUse(svg, ox, oy, dim, iid, cls).classed('glyphIcon', true);
-    }
-
-    function appendBadge(svg, ox, oy, dim, iid, cls) {
-        appendUse(svg, ox, oy, dim, iid, cls).classed('badgeIcon', true);
-    }
-
-    function attachUiBadge(svg) {
-        appendBadge(svg, 12, instCfg.uiDy, 30, '#uiAttached', 'uiBadge');
-    }
-
-    function visVal(b) {
-        return b ? 'visible' : 'hidden';
-    }
-
-    // ==============================
-    // force layout modification functions
-
-    function translate(x, y) {
-        return 'translate(' + x + ',' + y + ')';
-    }
-    function scale(x,y) {
-        return 'scale(' + x + ',' + y + ')';
-    }
-    function skewX(x) {
-        return 'skewX(' + x + ')';
-    }
-    function rotate(deg) {
-        return 'rotate(' + deg + ')';
-    }
-
-    function missMsg(what, id) {
-        return '\n[' + what + '] "' + id + '" missing ';
-    }
-
-    function linkEndPoints(srcId, dstId) {
-        var srcNode = network.lookup[srcId],
-            dstNode = network.lookup[dstId],
-            sMiss = !srcNode ? missMsg('src', srcId) : '',
-            dMiss = !dstNode ? missMsg('dst', dstId) : '';
-
-        if (sMiss || dMiss) {
-            logicError('Node(s) not on map for link:\n' + sMiss + dMiss);
-            return null;
-        }
-        return {
-            source: srcNode,
-            target: dstNode,
-            x1: srcNode.x,
-            y1: srcNode.y,
-            x2: dstNode.x,
-            y2: dstNode.y
-        };
-    }
-
-    function createHostLink(host) {
-        var src = host.id,
-            dst = host.cp.device,
-            id = host.ingress,
-            lnk = linkEndPoints(src, dst);
-
-        if (!lnk) {
-            return null;
-        }
-
-        // Synthesize link ...
-        $.extend(lnk, {
-            key: id,
-            class: 'link',
-
-            type: function () { return 'hostLink'; },
-            online: function () {
-                // hostlink target is edge switch
-                return lnk.target.online;
-            },
-            linkWidth: function () { return 1; }
-        });
-        return lnk;
-    }
-
-    function createLink(link) {
-        var lnk = linkEndPoints(link.src, link.dst);
-
-        if (!lnk) {
-            return null;
-        }
-
-        $.extend(lnk, {
-            key: link.id,
-            class: 'link',
-            fromSource: link,
-
-            // functions to aggregate dual link state
-            type: function () {
-                var s = lnk.fromSource,
-                    t = lnk.fromTarget;
-                return (s && s.type) || (t && t.type) || defaultLinkType;
-            },
-            online: function () {
-                var s = lnk.fromSource,
-                    t = lnk.fromTarget,
-                    both = lnk.source.online && lnk.target.online;
-                return both && ((s && s.online) || (t && t.online));
-            },
-            linkWidth: function () {
-                var s = lnk.fromSource,
-                    t = lnk.fromTarget,
-                    ws = (s && s.linkWidth) || 0,
-                    wt = (t && t.linkWidth) || 0;
-                return Math.max(ws, wt);
-            }
-        });
-        return lnk;
-    }
-
-    function removeLinkLabels() {
-        network.links.forEach(function (d) {
-            d.label = '';
-        });
-    }
-
-    function showHostVis(el) {
-        el.style('visibility', visVal(showHosts));
-    }
-
-    var widthRatio = 1.4,
-        linkScale = d3.scale.linear()
-            .domain([1, 12])
-            .range([widthRatio, 12 * widthRatio])
-            .clamp(true);
-
-    function updateLinks() {
-        link = linkG.selectAll('.link')
-            .data(network.links, function (d) { return d.key; });
-
-        // operate on existing links, if necessary
-        // link .foo() .bar() ...
-
-        // operate on entering links:
-        var entering = link.enter()
-            .append('line')
-            .attr({
-                x1: function (d) { return d.x1; },
-                y1: function (d) { return d.y1; },
-                x2: function (d) { return d.x2; },
-                y2: function (d) { return d.y2; },
-                stroke: config.topo.linkInColor,
-                'stroke-width': config.topo.linkInWidth
-            });
-
-        // augment links
-        entering.each(function (d) {
-            var link = d3.select(this);
-            // provide ref to element selection from backing data....
-            d.el = link;
-            restyleLinkElement(d);
-            if (d.type() === 'hostLink') {
-                showHostVis(link);
-            }
-        });
-
-        // operate on both existing and new links, if necessary
-        //link .foo() .bar() ...
-
-        // apply or remove labels
-        var labelData = getLabelData();
-        applyLinkLabels(labelData);
-
-        // operate on exiting links:
-        link.exit()
-            .attr('stroke-dasharray', '3 3')
-            .style('opacity', 0.5)
-            .transition()
-            .duration(1500)
-            .attr({
-                'stroke-dasharray': '3 12',
-                stroke: config.topo.linkOutColor,
-                'stroke-width': config.topo.linkOutWidth
-            })
-            .style('opacity', 0.0)
-            .remove();
-
-        // NOTE: invoke a single tick to force the labels to position
-        //        onto their links.
-        tick();
-    }
-
-    function getLabelData() {
-        // create the backing data for showing labels..
-        var data = [];
-        link.each(function (d) {
-            if (d.label) {
-                data.push({
-                    id: 'lab-' + d.key,
-                    key: d.key,
-                    label: d.label,
-                    ldata: d
-                });
-            }
-        });
-        return data;
-    }
-
-    var linkLabelOffset = '0.3em';
-
-    function applyLinkLabels(data) {
-        var entering;
-
-        linkLabel = linkLabelG.selectAll('.linkLabel')
-            .data(data, function (d) { return d.id; });
-
-        // for elements already existing, we need to update the text
-        // and adjust the rectangle size to fit
-        linkLabel.each(function (d) {
-            var el = d3.select(this),
-                rect = el.select('rect'),
-                text = el.select('text');
-            text.text(d.label);
-            rect.attr(rectAroundText(el));
-        });
-
-        entering = linkLabel.enter().append('g')
-            .classed('linkLabel', true)
-            .attr('id', function (d) { return d.id; });
-
-        entering.each(function (d) {
-            var el = d3.select(this),
-                rect,
-                text,
-                parms = {
-                    x1: d.ldata.x1,
-                    y1: d.ldata.y1,
-                    x2: d.ldata.x2,
-                    y2: d.ldata.y2
-                };
-
-            d.el = el;
-            rect = el.append('rect');
-            text = el.append('text').text(d.label);
-            rect.attr(rectAroundText(el));
-            text.attr('dy', linkLabelOffset);
-
-            el.attr('transform', transformLabel(parms));
-        });
-
-        // Remove any labels that are no longer required.
-        linkLabel.exit().remove();
-    }
-
-    function rectAroundText(el) {
-        var text = el.select('text'),
-            box = text.node().getBBox();
-
-        // translate the bbox so that it is centered on [x,y]
-        box.x = -box.width / 2;
-        box.y = -box.height / 2;
-
-        // add padding
-        box.x -= 1;
-        box.width += 2;
-        return box;
-    }
-
-    function transformLabel(p) {
-        var dx = p.x2 - p.x1,
-            dy = p.y2 - p.y1,
-            xMid = dx/2 + p.x1,
-            yMid = dy/2 + p.y1;
-        return translate(xMid, yMid);
-    }
-
-    function createDeviceNode(device) {
-        // start with the object as is
-        var node = device,
-            type = device.type,
-            svgCls = type ? 'node device ' + type : 'node device';
-
-        // Augment as needed...
-        node.class = 'device';
-        node.svgClass = device.online ? svgCls + ' online' : svgCls;
-        positionNode(node);
-        return node;
-    }
-
-    function createHostNode(host) {
-        // start with the object as is
-        var node = host;
-
-        // Augment as needed...
-        node.class = 'host';
-        if (!node.type) {
-            node.type = 'endstation';
-        }
-        node.svgClass = 'node host ' + node.type;
-        positionNode(node);
-        return node;
-    }
-
-    function positionNode(node, forUpdate) {
-        var meta = node.metaUi,
-            x = meta && meta.x,
-            y = meta && meta.y,
-            xy;
-
-        // If we have [x,y] already, use that...
-        if (x && y) {
-            node.fixed = true;
-            node.px = node.x = x;
-            node.py = node.y = y;
-            return;
-        }
-
-        var location = node.location;
-        if (location && location.type === 'latlng') {
-            var coord = geoMapProj([location.lng, location.lat]);
-            node.fixed = true;
-            node.px = node.x = coord[0];
-            node.py = node.y = coord[1];
-            return true;
-        }
-
-        // if this is a node update (not a node add).. skip randomizer
-        if (forUpdate) {
-            return;
-        }
-
-        // Note: Placing incoming unpinned nodes at exactly the same point
-        //        (center of the view) causes them to explode outwards when
-        //        the force layout kicks in. So, we spread them out a bit
-        //        initially, to provide a more serene layout convergence.
-        //       Additionally, if the node is a host, we place it near
-        //        the device it is connected to.
-
-        function spread(s) {
-            return Math.floor((Math.random() * s) - s/2);
-        }
-
-        function randDim(dim) {
-            return dim / 2 + spread(dim * 0.7071);
-        }
-
-        function rand() {
-            return {
-                x: randDim(network.view.width()),
-                y: randDim(network.view.height())
-            };
-        }
-
-        function near(node) {
-            var min = 12,
-                dx = spread(12),
-                dy = spread(12);
-            return {
-                x: node.x + min + dx,
-                y: node.y + min + dy
-            };
-        }
-
-        function getDevice(cp) {
-            var d = network.lookup[cp.device];
-            return d || rand();
-        }
-
-        xy = (node.class === 'host') ? near(getDevice(node.cp)) : rand();
-        $.extend(node, xy);
-    }
-
-
-    function iconGlyphUrl(d) {
-        var which = d.type || 'unknown';
-        return '#' + which;
-    }
-
-    // returns the newly computed bounding box of the rectangle
-    function adjustRectToFitText(n) {
-        var text = n.select('text'),
-            box = text.node().getBBox(),
-            lab = config.labels;
-
-        text.attr('text-anchor', 'middle')
-            .attr('y', '-0.8em')
-            .attr('x', lab.imgPad/2);
-
-        // translate the bbox so that it is centered on [x,y]
-        box.x = -box.width / 2;
-        box.y = -box.height / 2;
-
-        // add padding
-        box.x -= (lab.padLR + lab.imgPad/2);
-        box.width += lab.padLR * 2 + lab.imgPad;
-        box.y -= lab.padTB;
-        box.height += lab.padTB * 2;
-
-        return box;
-    }
-
-    function mkSvgClass(d) {
-        return d.fixed ? d.svgClass + ' fixed' : d.svgClass;
-    }
-
-    function hostLabel(d) {
-        var idx = (hostLabelIndex < d.labels.length) ? hostLabelIndex : 0;
-        return d.labels[idx];
-    }
-    function deviceLabel(d) {
-        var idx = (deviceLabelIndex < d.labels.length) ? deviceLabelIndex : 0;
-        return d.labels[idx];
-    }
-    function trimLabel(label) {
-        return (label && label.trim()) || '';
-    }
-
-    function emptyBox() {
-        return {
-            x: -2,
-            y: -2,
-            width: 4,
-            height: 4
-        };
-    }
-
-    function updateDeviceLabel(d) {
-        var label = trimLabel(deviceLabel(d)),
-            noLabel = !label,
-            node = d.el,
-            box,
-            dx,
-            dy,
-            cfg = config.icons.device;
-
-        node.select('text')
-            .text(label)
-            .style('opacity', 0)
-            .transition()
-            .style('opacity', 1);
-
-        if (noLabel) {
-            box = emptyBox();
-            dx = -cfg.dim/2;
-            dy = -cfg.dim/2;
-        } else {
-            box = adjustRectToFitText(node);
-            dx = box.x + cfg.xoff;
-            dy = box.y + cfg.yoff;
-        }
-
-        node.select('rect')
-            .transition()
-            .attr(box);
-
-        node.select('g.deviceIcon')
-            .transition()
-            .attr('transform', translate(dx, dy));
-    }
-
-    function updateHostLabel(d) {
-        var label = trimLabel(hostLabel(d));
-        d.el.select('text').text(label);
-    }
-
-    function updateHostVisibility() {
-        var v = visVal(showHosts);
-        nodeG.selectAll('.host').style('visibility', v);
-        linkG.selectAll('.hostLink').style('visibility', v);
-    }
-
-    function findOfflineNodes() {
-        var a = [];
-        network.nodes.forEach(function (d) {
-            if (d.class === 'device' && !d.online) {
-                a.push(d);
-            }
-        });
-        return a;
-    }
-
-    function updateOfflineVisibility(dev) {
-        var so = showOffline,
-            sh = showHosts,
-            vb = 'visibility',
-            v, off, al, ah, db, b;
-
-        function updAtt(show) {
-            al.forEach(function (d) {
-                b = show && ((d.type() !== 'hostLink') || sh);
-                d.el.style(vb, visVal(b));
-            });
-            ah.forEach(function (d) {
-                b = show && sh;
-                d.el.style(vb, visVal(b));
-            });
-        }
-
-        if (dev) {
-            // updating a specific device that just toggled off/on-line
-            db = dev.online || so;
-            dev.el.style(vb, visVal(db));
-            al = findAttachedLinks(dev.id);
-            ah = findAttachedHosts(dev.id);
-            updAtt(db);
-        } else {
-            // updating all offline devices
-            v = visVal(so);
-            off = findOfflineNodes();
-            off.forEach(function (d) {
-                d.el.style(vb, v);
-                al = findAttachedLinks(d.id);
-                ah = findAttachedHosts(d.id);
-                updAtt(so);
-            });
-        }
-    }
-
-    function nodeMouseOver(d) {
-        if (hovered != d) {
-            hovered = d;
-            requestTrafficForMode();
-        }
-    }
-
-    function nodeMouseOut(d) {
-        if (hovered != null) {
-            hovered = null;
-            requestTrafficForMode();
-        }
-    }
-
-    function addHostIcon(node, radius, iid) {
-        var dim = radius * 1.5,
-            xlate = -dim / 2;
-
-        node.append('use').attr({
-            class: 'glyphIcon hostIcon',
-            transform: translate(xlate,xlate),
-            'xlink:href': iid,
-            width: dim,
-            height: dim
-        });
-    }
-
-    function updateNodes() {
-        node = nodeG.selectAll('.node')
-            .data(network.nodes, function (d) { return d.id; });
-
-        // operate on existing nodes...
-        node.filter('.device').each(function (d) {
-            var node = d.el;
-            node.classed('online', d.online);
-            updateDeviceLabel(d);
-            positionNode(d, true);
-        });
-
-        node.filter('.host').each(function (d) {
-            updateHostLabel(d);
-            positionNode(d, true);
-        });
-
-        // operate on entering nodes:
-        var entering = node.enter()
-            .append('g')
-            .attr({
-                id: function (d) { return safeId(d.id); },
-                class: mkSvgClass,
-                transform: function (d) { return translate(d.x, d.y); },
-                opacity: 0
-            })
-            .call(network.drag)
-            .on('mouseover', nodeMouseOver)
-            .on('mouseout', nodeMouseOut)
-            .transition()
-            .attr('opacity', 1);
-
-        // augment device nodes...
-        entering.filter('.device').each(function (d) {
-            var node = d3.select(this),
-                label = trimLabel(deviceLabel(d)),
-                noLabel = !label,
-                box;
-
-            // provide ref to element from backing data....
-            d.el = node;
-
-            node.append('rect').attr({ rx: 5, ry: 5 });
-            node.append('text').text(label).attr('dy', '1.1em');
-            box = adjustRectToFitText(node);
-            node.select('rect').attr(box);
-            addDeviceIcon(node, box, noLabel, iconGlyphUrl(d));
-        });
-
-        // augment host nodes...
-        entering.filter('.host').each(function (d) {
-            var node = d3.select(this),
-                cfg = config.icons.host,
-                r = cfg.radius[d.type] || cfg.defaultRadius,
-                textDy = r + 10,
-                iid = iconGlyphUrl(d);
-
-            // provide ref to element from backing data....
-            d.el = node;
-            showHostVis(node);
-
-            node.append('circle').attr('r', r);
-            if (iid) {
-                addHostIcon(node, r, iid);
-            }
-            node.append('text')
-                .text(hostLabel)
-                .attr('dy', textDy)
-                .attr('text-anchor', 'middle');
-        });
-
-        // operate on both existing and new nodes, if necessary
-        updateDeviceColors();
-
-        // operate on exiting nodes:
-        // Note that the node is removed after 2 seconds.
-        // Sub element animations should be shorter than 2 seconds.
-        var exiting = node.exit()
-            .transition()
-            .duration(2000)
-            .style('opacity', 0)
-            .remove();
-
-        // host node exits....
-        exiting.filter('.host').each(function (d) {
-            var node = d.el;
-            node.select('use')
-                .style('opacity', 0.5)
-                .transition()
-                .duration(800)
-                .style('opacity', 0);
-
-            node.select('text')
-                .style('opacity', 0.5)
-                .transition()
-                .duration(800)
-                .style('opacity', 0);
-
-            node.select('circle')
-                .style('stroke-fill', '#555')
-                .style('fill', '#888')
-                .style('opacity', 0.5)
-                .transition()
-                .duration(1500)
-                .attr('r', 0);
-        });
-
-        // device node exits....
-        exiting.filter('.device').each(function (d) {
-            var node = d.el;
-            node.select('use')
-                .style('opacity', 0.5)
-                .transition()
-                .duration(800)
-                .style('opacity', 0);
-
-            node.selectAll('rect')
-                .style('stroke-fill', '#555')
-                .style('fill', '#888')
-                .style('opacity', 0.5);
-        });
-        fResume();
-    }
-
-    var dCol = {
-        black: '#000',
-        paleblue: '#acf',
-        offwhite: '#ddd',
-        midgrey: '#888',
-        lightgrey: '#bbb',
-        orange: '#f90'
-    };
-
-    // note: these are the device icon colors without affinity
-    var dColTheme = {
-        light: {
-            online: {
-                glyph: dCol.black,
-                rect: dCol.paleblue
-            },
-            offline: {
-                glyph: dCol.midgrey,
-                rect: dCol.lightgrey
-            }
-        },
-        // TODO: theme
-        dark: {
-            online: {
-                glyph: dCol.black,
-                rect: dCol.paleblue
-            },
-            offline: {
-                glyph: dCol.midgrey,
-                rect: dCol.lightgrey
-            }
-        }
-    };
-
-    function devBaseColor(d) {
-        var t = network.view.getTheme(),
-            o = d.online ? 'online' : 'offline';
-        return dColTheme[t][o];
-    }
-
-    function setDeviceColor(d) {
-        var o = d.online,
-            s = d.el.classed('selected'),
-            c = devBaseColor(d),
-            a = instColor(d.master, o),
-            g, r,
-            icon = d.el.select('g.deviceIcon');
-
-        if (s) {
-            g = c.glyph;
-            r = dColTheme.sel;
-        } else if (colorAffinity) {
-            g = o ? a : c.glyph;
-            r = o ? dCol.offwhite : a;
-        } else {
-            g = c.glyph;
-            r = c.rect;
-        }
-
-        icon.select('use')
-            .style('fill', g);
-        icon.select('rect')
-            .style('fill', r);
-    }
-
-    function addDeviceIcon(node, box, noLabel, iid) {
-        var cfg = config.icons.device,
-            dx,
-            dy,
-            g;
-
-        if (noLabel) {
-            dx = -cfg.dim/2;
-            dy = -cfg.dim/2;
-        } else {
-            box = adjustRectToFitText(node);
-            dx = box.x + cfg.xoff;
-            dy = box.y + cfg.yoff;
-        }
-
-        g = node.append('g')
-                .attr('class', 'glyphIcon deviceIcon')
-                .attr('transform', translate(dx, dy));
-
-        g.append('rect').attr({
-            x: 0,
-            y: 0,
-            rx: cfg.rx,
-            width: cfg.dim,
-            height: cfg.dim
-        });
-
-        g.append('use').attr({
-            'xlink:href': iid,
-            width: cfg.dim,
-            height: cfg.dim
-        });
-
-    }
-
-    function find(key, array, tag) {
-        var _tag = tag || 'id',
-            idx, n, d;
-        for (idx = 0, n = array.length; idx < n; idx++) {
-            d = array[idx];
-            if (d[_tag] === key) {
-                return idx;
-            }
-        }
-        return -1;
-    }
-
-    function removeLinkElement(d) {
-        var idx = find(d.key, network.links, 'key'),
-            removed;
-        if (idx >=0) {
-            // remove from links array
-            removed = network.links.splice(idx, 1);
-            // remove from lookup cache
-            delete network.lookup[removed[0].key];
-            updateLinks();
-            fResume();
-        }
-    }
-
-    function removeHostElement(d, upd) {
-        var lu = network.lookup;
-        // first, remove associated hostLink...
-        removeLinkElement(d.linkData);
-
-        // remove hostLink bindings
-        delete lu[d.ingress];
-        delete lu[d.egress];
-
-        // remove from lookup cache
-        delete lu[d.id];
-        // remove from nodes array
-        var idx = find(d.id, network.nodes);
-        network.nodes.splice(idx, 1);
-        // remove from SVG
-        // NOTE: upd is false if we were called from removeDeviceElement()
-        if (upd) {
-            updateNodes();
-            fResume();
-        }
-    }
-
-
-    function removeDeviceElement(d) {
-        var id = d.id;
-        // first, remove associated hosts and links..
-        findAttachedHosts(id).forEach(removeHostElement);
-        findAttachedLinks(id).forEach(removeLinkElement);
-
-        // remove from lookup cache
-        delete network.lookup[id];
-        // remove from nodes array
-        var idx = find(id, network.nodes);
-        network.nodes.splice(idx, 1);
-
-        if (!network.nodes.length) {
-            showNoDevs(true);
-        }
-
-        // remove from SVG
-        updateNodes();
-        fResume();
-    }
-
-    function findAttachedHosts(devId) {
-        var hosts = [];
-        network.nodes.forEach(function (d) {
-            if (d.class === 'host' && d.cp.device === devId) {
-                hosts.push(d);
-            }
-        });
-        return hosts;
-    }
-
-    function findAttachedLinks(devId) {
-        var links = [];
-        network.links.forEach(function (d) {
-            if (d.source.id === devId || d.target.id === devId) {
-                links.push(d);
-            }
-        });
-        return links;
-    }
-
-    function fResume() {
-        if (!oblique) {
-            network.force.resume();
-        }
-    }
-
-    function fStart() {
-        if (!oblique) {
-            network.force.start();
-        }
-    }
-
-    var tickStuff = {
-        nodeAttr: {
-            transform: function (d) { return translate(d.x, d.y); }
-        },
-        linkAttr: {
-            x1: function (d) { return d.source.x; },
-            y1: function (d) { return d.source.y; },
-            x2: function (d) { return d.target.x; },
-            y2: function (d) { return d.target.y; }
-        },
-        linkLabelAttr: {
-            transform: function (d) {
-                var lnk = findLinkById(d.key);
-
-                if (lnk) {
-                    var parms = {
-                        x1: lnk.source.x,
-                        y1: lnk.source.y,
-                        x2: lnk.target.x,
-                        y2: lnk.target.y
-                    };
-                    return transformLabel(parms);
-                }
-            }
-        }
-    };
-
-    function tick() {
-        node.attr(tickStuff.nodeAttr);
-        link.attr(tickStuff.linkAttr);
-        linkLabel.attr(tickStuff.linkLabelAttr);
-    }
-
-    // ==============================
-    // Web-Socket for live data
-
-    function findGuiSuccessor() {
-        var idx = -1;
-        onosOrder.forEach(function (d, i) {
-            if (d.uiAttached) {
-                idx = i;
-            }
-        });
-
-        for (var i = 0; i < onosOrder.length - 1; i++) {
-            var ni = (idx + 1 + i) % onosOrder.length;
-            if (onosOrder[ni].online) {
-                return onosOrder[ni].ip;
-            }
-        }
-        return null;
-    }
-
-    function webSockUrl() {
-        var url = document.location.toString()
-                .replace(/\#.*/, '')
-                .replace('http://', 'ws://')
-                .replace('https://', 'wss://')
-                .replace('index.html', config.webSockUrl);
-        if (guiSuccessor) {
-            url = url.replace(location.hostname, guiSuccessor);
-        }
-        return url;
-    }
-
-    webSock = {
-        ws : null,
-        retries: 0,
-
-        connect : function() {
-            webSock.ws = new WebSocket(webSockUrl());
-
-            webSock.ws.onopen = function() {
-                noWebSock(false);
-                requestSummary();
-                showInstances();
-                webSock.retries = 0;
-            };
-
-            webSock.ws.onmessage = function(m) {
-                if (m.data) {
-                    wsTraceRx(m.data);
-                    handleServerEvent(JSON.parse(m.data));
-                }
-            };
-
-            webSock.ws.onclose = function(m) {
-                webSock.ws = null;
-                guiSuccessor = findGuiSuccessor();
-                if (guiSuccessor && webSock.retries < onosOrder.length) {
-                    webSock.retries++;
-                    webSock.connect();
-                } else {
-                    noWebSock(true);
-                }
-            };
-        },
-
-        send : function(text) {
-            if (text != null) {
-                webSock._send(text);
-            }
-        },
-
-        _send : function(message) {
-            if (webSock.ws) {
-                webSock.ws.send(message);
-            } else if (config.useLiveData) {
-                console.warn('no web socket open', message);
-            } else {
-                console.log('WS Send: ', message);
-            }
-        }
-
-    };
-
-    function noWebSock(b) {
-        mask.style('display',b ? 'block' : 'none');
-    }
-
-    function sendMessage(evType, payload) {
-        var p = payload || {},
-            toSend = {
-                event: evType,
-                sid: ++sid,
-                payload: p
-            },
-            asText = JSON.stringify(toSend);
-        wsTraceTx(asText);
-        webSock.send(asText);
-
-        // Temporary measure for debugging UI behavior ...
-        if (!config.useLiveData) {
-            handleTestSend(toSend);
-        }
-    }
-
-    function wsTraceTx(msg) {
-        wsTrace('tx', msg);
-    }
-    function wsTraceRx(msg) {
-        wsTrace('rx', msg);
-    }
-    function wsTrace(rxtx, msg) {
-        // console.log('[' + rxtx + '] ' + msg);
-    }
-
-    function handleTestSend(msg) { }
-
-    // ==============================
-    // Selection stuff
-
-    function selectObject(obj, el) {
-        var n,
-            ev = d3.event.sourceEvent;
-
-        // if the meta or alt key is pressed, we are panning/zooming, so ignore
-        if (ev.metaKey || ev.altKey) {
-            return;
-        }
-
-        if (el) {
-            n = d3.select(el);
-        } else {
-            node.each(function(d) {
-                if (d == obj) {
-                    n = d3.select(el = this);
-                }
-            });
-        }
-        if (!n) return;
-
-        if (ev.shiftKey && n.classed('selected')) {
-            deselectObject(obj.id);
-            updateDetailPane();
-            return;
-        }
-
-        if (!ev.shiftKey) {
-            deselectAll();
-        }
-
-        selections[obj.id] = { obj: obj, el: el };
-        selectOrder.push(obj.id);
-
-        n.classed('selected', true);
-        updateDeviceColors(obj);
-        updateDetailPane();
-    }
-
-    function deselectObject(id) {
-        var obj = selections[id],
-            idx;
-        if (obj) {
-            d3.select(obj.el).classed('selected', false);
-            delete selections[id];
-            idx = $.inArray(id, selectOrder);
-            if (idx >= 0) {
-                selectOrder.splice(idx, 1);
-            }
-            updateDeviceColors(obj.obj);
-        }
-    }
-
-    function deselectAll() {
-        // deselect all nodes in the network...
-        node.classed('selected', false);
-        selections = {};
-        selectOrder = [];
-        updateDeviceColors();
-        updateDetailPane();
-    }
-
-    function updateDeviceColors(d) {
-        if (d) {
-            setDeviceColor(d);
-        } else {
-            node.filter('.device').each(function (d) {
-                setDeviceColor(d);
-            });
-        }
-    }
-
-    // update the state of the detail pane, based on current selections
-    function updateDetailPane() {
-        var nSel = selectOrder.length;
-        if (!nSel) {
-            emptySelect();
-        } else if (nSel === 1) {
-            singleSelect();
-        } else {
-            multiSelect();
-        }
-    }
-
-    function emptySelect() {
-        haveDetails = false;
-        hideDetailPane();
-        cancelTraffic();
-    }
-
-    function singleSelect() {
-        // NOTE: detail is shown from showDetails event callback
-        requestDetails();
-        cancelTraffic();
-        requestTrafficForMode();
-    }
-
-    function multiSelect() {
-        haveDetails = true;
-        populateMultiSelect();
-        cancelTraffic();
-        requestTrafficForMode();
-    }
-
-    function addSep(tbody) {
-        var tr = tbody.append('tr');
-        $('<hr>').appendTo(tr.append('td').attr('colspan', 2));
-    }
-
-    function addProp(tbody, label, value) {
-        var tr = tbody.append('tr');
-
-        tr.append('td')
-            .attr('class', 'label')
-            .text(label + ' :');
-
-        tr.append('td')
-            .attr('class', 'value')
-            .text(value);
-    }
-
-    function populateMultiSelect() {
-        detailPane.empty();
-
-        var title = detailPane.append('h3'),
-            table = detailPane.append('table'),
-            tbody = table.append('tbody');
-
-        title.text('Selected Nodes');
-
-        selectOrder.forEach(function (d, i) {
-            addProp(tbody, i+1, d);
-        });
-
-        addMultiSelectActions();
-    }
-
-    function populateSummary(data) {
-        summaryPane.empty();
-
-        var svg = summaryPane.append('svg'),
-            iid = iconGlyphUrl(data);
-
-        var title = summaryPane.append('h2'),
-            table = summaryPane.append('table'),
-            tbody = table.append('tbody');
-
-        appendGlyph(svg, 0, 0, 40, iid);
-
-        svg.append('use')
-            .attr({
-                class: 'birdBadge',
-                transform: translate(8,12),
-                'xlink:href': '#bird',
-                width: 24,
-                height: 24,
-                fill: '#fff'
-            });
-
-        title.text('ONOS Summary');
-
-        data.propOrder.forEach(function(p) {
-            if (p === '-') {
-                addSep(tbody);
-            } else {
-                addProp(tbody, p, data.props[p]);
-            }
-        });
-    }
-
-    function populateDetails(data) {
-        detailPane.empty();
-
-        var svg = detailPane.append('svg'),
-            iid = iconGlyphUrl(data);
-
-        var title = detailPane.append('h2'),
-            table = detailPane.append('table'),
-            tbody = table.append('tbody');
-
-        appendGlyph(svg, 0, 0, 40, iid);
-        title.text(data.id);
-
-        data.propOrder.forEach(function(p) {
-            if (p === '-') {
-                addSep(tbody);
-            } else {
-                addProp(tbody, p, data.props[p]);
-            }
-        });
-
-        addSingleSelectActions(data);
-    }
-
-    function addSingleSelectActions(data) {
-        detailPane.append('hr');
-        // always want to allow 'show traffic'
-        addAction(detailPane, 'Show Related Traffic', showRelatedIntentsAction);
-
-        if (data.type === 'switch') {
-            addAction(detailPane, 'Show Device Flows', showDeviceLinkFlowsAction);
-        }
-    }
-
-    function addMultiSelectActions() {
-        detailPane.append('hr');
-        // always want to allow 'show traffic'
-        addAction(detailPane, 'Show Related Traffic', showRelatedIntentsAction);
-        // if exactly two hosts are selected, also want 'add host intent'
-        if (nSel() === 2 && allSelectionsClass('host')) {
-            addAction(detailPane, 'Create Host-to-Host Flow', addHostIntentAction);
-        } else if (nSel() >= 2 && allSelectionsClass('host')) {
-            addAction(detailPane, 'Create Multi-Source Flow', addMultiSourceIntentAction);
-        }
-    }
-
-    function addAction(panel, text, cb) {
-        panel.append('div')
-            .classed('actionBtn', true)
-            .text(text)
-            .on('click', cb);
-    }
-
-
-    // === Pan and Zoom behaviors...
-
-    function panZoom(translate, scale) {
-        panZoomContainer.attr('transform',
-            'translate(' + translate + ')scale(' + scale + ')');
-        // keep the map lines constant width while zooming
-        bgImg.style('stroke-width', 2.0 / scale + 'px');
-    }
-
-    function resetPanZoom() {
-        panZoom([0,0], 1);
-        zoom.translate([0,0]).scale(1);
-    }
-
-    function setupPanZoom() {
-        function zoomed() {
-            var ev = d3.event.sourceEvent;
-            // pan/zoom active when meta or alt key is pressed...
-            if (ev.metaKey || ev.altKey) {
-                panZoom(d3.event.translate, d3.event.scale);
-            }
-        }
-
-        zoom = d3.behavior.zoom()
-            .translate([0, 0])
-            .scale(1)
-            .scaleExtent([0.25, 10])
-            .on("zoom", zoomed);
-
-        svg.call(zoom);
-    }
-
-
-    function setupNoDevices() {
-        var g = noDevices.append('g');
-        appendBadge(g, 0, 0, 100, '#bird', 'noDevsBird');
-        var text = g.append('text')
-            .text('No devices are connected')
-            .attr({ x: 120, y: 80});
-    }
-
-    function repositionNoDevices() {
-        var g = noDevices.select('g');
-        var box = g.node().getBBox();
-        box.x -= box.width/2;
-        box.y -= box.height/2;
-        g.attr('transform', translate(box.x, box.y));
-    }
-
-
-    // ==============================
-    // Test harness code
-
-    function prepareScenario(view, ctx, dbg) {
-        var sc = scenario,
-            urlSc = sc.evDir + ctx + sc.evScenario;
-
-        if (!ctx) {
-            view.alert("No scenario specified (null ctx)");
-            return;
-        }
-
-        sc.view = view;
-        sc.ctx = ctx;
-        sc.debug = dbg;
-        sc.evNumber = 0;
-
-        d3.json(urlSc, function(err, data) {
-            var p = data && data.params || {},
-                desc = data && data.description || null,
-                intro = data && data.title;
-
-            if (err) {
-                view.alert('No scenario found:\n\n' + urlSc + '\n\n' + err);
-            } else {
-                sc.params = p;
-                if (desc) {
-                    intro += '\n\n  ' + desc.join('\n  ');
-                }
-                view.alert(intro);
-            }
-        });
-
-    }
-
-    function setupDefs(svg) {
-        var defs = svg.append('defs');
-        gly.loadDefs(defs);
-        d3u.loadGlow(defs);
-    }
-
-    function sendUpdateMeta(d, store) {
-        var metaUi = {},
-            ll;
-
-        if (store) {
-            ll = geoMapProj.invert([d.x, d.y]);
-            metaUi = {
-                x: d.x,
-                y: d.y,
-                lng: ll[0],
-                lat: ll[1]
-            };
-        }
-        d.metaUi = metaUi;
-        sendMessage('updateMeta', {
-            id: d.id,
-            'class': d.class,
-            memento: metaUi
-        });
-    }
-
-    // ==============================
-    // View life-cycle callbacks
-
-    function init(view, ctx, flags) {
-        var w = view.width(),
-            h = view.height(),
-            logSize = config.logicalSize,
-            fcfg = config.force;
-
-        // NOTE: view.$div is a D3 selection of the view's div
-        var viewBox = '0 0 ' + logSize + ' ' + logSize;
-        svg = view.$div.append('svg').attr('viewBox', viewBox);
-        setSize(svg, view);
-
-        // load glyphs, filters, and other definitions...
-        setupDefs(svg);
-
-        panZoomContainer = svg.append('g').attr('id', 'panZoomContainer');
-        setupPanZoom();
-
-        noDevices = svg.append('g')
-            .attr('class', 'noDevsLayer')
-            .attr('transform', translate(logSize/2, logSize/2));
-        setupNoDevices();
-
-        // group for the topology
-        topoG = panZoomContainer.append('g')
-            .attr('id', 'topo-G');
-
-        // subgroups for links, link labels, and nodes
-        linkG = topoG.append('g').attr('id', 'links');
-        linkLabelG = topoG.append('g').attr('id', 'linkLabels');
-        nodeG = topoG.append('g').attr('id', 'nodes');
-
-        // selection of links, linkLabels, and nodes
-        link = linkG.selectAll('.link');
-        linkLabel = linkLabelG.selectAll('.linkLabel');
-        node = nodeG.selectAll('.node');
-
-        function chrg(d) {
-            return fcfg.charge[d.class] || -12000;
-        }
-        function ldist(d) {
-            return fcfg.linkDistance[d.type] || 50;
-        }
-        function lstrg(d) {
-            // 0.0 - 1.0
-            return fcfg.linkStrength[d.type] || 1.0;
-        }
-
-        function selectCb(d, self) {
-            selectObject(d, self);
-        }
-
-        function atDragEnd(d, self) {
-            // once we've finished moving, pin the node in position
-            d.fixed = true;
-            d3.select(self).classed('fixed', true);
-            if (config.useLiveData) {
-                sendUpdateMeta(d, true);
-            } else {
-                console.log('Moving node ' + d.id + ' to [' + d.x + ',' + d.y + ']');
-            }
-        }
-
-        // predicate that indicates when dragging is active
-        function dragEnabled() {
-            var ev = d3.event.sourceEvent;
-            // nodeLock means we aren't allowing nodes to be dragged...
-            // meta or alt key pressed means we are zooming/panning...
-            return !nodeLock && !(ev.metaKey || ev.altKey);
-        }
-
-        // predicate that indicates when clicking is active
-        function clickEnabled() {
-            return true;
-        }
-
-        // set up the force layout
-        network.force = d3.layout.force()
-            .size([w, h])
-            .nodes(network.nodes)
-            .links(network.links)
-            .gravity(0.4)
-            .friction(0.7)
-            .charge(chrg)
-            .linkDistance(ldist)
-            .linkStrength(lstrg)
-            .on('tick', tick);
-
-        network.drag = d3u.createDragBehavior(network.force,
-            selectCb, atDragEnd, dragEnabled, clickEnabled);
-
-
-        // create mask layer for when we lose connection to server.
-        // TODO: this should be part of the framework
-
-        function para(sel, text) {
-            sel.append('p').text(text);
-        }
-
-        mask = view.$div.append('div').attr('id','topo-mask');
-        para(mask, 'Oops!');
-        para(mask, 'Web-socket connection to server closed...');
-        para(mask, 'Try refreshing the page.');
-
-        mask.append('svg')
-            .attr({
-                id: 'mask-bird',
-                width: w,
-                height: h
-            })
-            .append('g')
-            .attr('transform', birdTranslate(w, h))
-            .style('opacity', 0.3)
-            .append('use')
-                .attr({
-                    'xlink:href': '#bird',
-                    width: config.birdDim,
-                    height: config.birdDim,
-                    fill: '#111'
-                })
-    }
-
-
-    function load(view, ctx, flags) {
-        // resize, in case the window was resized while we were not loaded
-        resize(view, ctx, flags);
-
-        // cache the view token, so network topo functions can access it
-        network.view = view;
-        config.useLiveData = !flags.local;
-
-        if (!config.useLiveData) {
-            prepareScenario(view, ctx, flags.debug);
-        }
-
-        // set our radio buttons and key bindings
-        layerBtnSet = view.setRadio(layerButtons);
-        view.setKeys(keyDispatch);
-        view.setGestures(gestures);
-
-        // Load map data asynchronously; complete startup after that..
-        loadGeoJsonData();
-    }
-
-    function startAntTimer() {
-        // Note: disabled until traffic can be allotted to intents properly
-        if (false && !antTimer) {
-            var pulses = [5, 3, 1.2, 3],
-                pulse = 0;
-            antTimer = setInterval(function () {
-                pulse = pulse + 1;
-                pulse = pulse === pulses.length ? 0 : pulse;
-                d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
-            }, 200);
-        }
-    }
-
-    function stopAntTimer() {
-        if (antTimer) {
-            clearInterval(antTimer);
-            antTimer = null;
-        }
-    }
-
-    function unload(view, ctx, flags) {
-        stopAntTimer();
-    }
-
-    var geoJsonUrl = 'continental_us.json',
-        geoJson;
-
-    function loadGeoJsonData() {
-        d3.json(geoJsonUrl, function (err, data) {
-            if (err) {
-                console.error('failed to load Map data', err);
-            } else {
-                geoJson = data;
-                loadGeoMap();
-            }
-
-            repositionNoDevices();
-            showNoDevs(true);
-
-            // finally, connect to the server...
-            if (config.useLiveData) {
-                webSock.connect();
-            }
-        });
-    }
-
-    function setProjForView(path, topoData) {
-        var dim = config.logicalSize;
-
-        // start with unit scale, no translation..
-        geoMapProj.scale(1).translate([0, 0]);
-
-        // figure out dimensions of map data..
-        var b = path.bounds(topoData),
-            x1 = b[0][0],
-            y1 = b[0][1],
-            x2 = b[1][0],
-            y2 = b[1][1],
-            dx = x2 - x1,
-            dy = y2 - y1,
-            x = (x1 + x2) / 2,
-            y = (y1 + y2) / 2;
-
-        // size map to 95% of minimum dimension to fill space..
-        var s = .95 / Math.min(dx / dim, dy / dim);
-        var t = [dim / 2 - s * x, dim / 2 - s * y];
-
-        // set new scale, translation on the projection..
-        geoMapProj.scale(s).translate(t);
-    }
-
-    function loadGeoMap() {
-        fnTrace('loadGeoMap', geoJsonUrl);
-
-        // extracts the topojson data into geocoordinate-based geometry
-        var topoData = topojson.feature(geoJson, geoJson.objects.states);
-
-        // see: http://bl.ocks.org/mbostock/4707858
-        geoMapProj = d3.geo.mercator();
-        var path = d3.geo.path().projection(geoMapProj);
-
-        setProjForView(path, topoData);
-
-        bgImg = panZoomContainer.insert("g", '#topo-G');
-        bgImg.attr('id', 'map').selectAll('path')
-            .data(topoData.features)
-            .enter()
-            .append('path')
-            .attr('d', path);
-    }
-
-    function resize(view, ctx, flags) {
-        var w = view.width(),
-            h = view.height();
-
-        setSize(svg, view);
-
-        d3.select('#mask-bird').attr({ width: w, height: h})
-            .select('g').attr('transform', birdTranslate(w, h));
-    }
-
-    function theme(view, ctx, flags) {
-        updateInstances();
-        updateDeviceColors();
-    }
-
-    function birdTranslate(w, h) {
-        var bdim = config.birdDim;
-        return 'translate('+((w-bdim)*.4)+','+((h-bdim)*.1)+')';
-    }
-
-    function isF(f) { return $.isFunction(f) ? f : null; }
-    function noop() {}
-
-    function augmentDetailPane() {
-        var dp = detailPane;
-        dp.ypos = { up: 64, down: 320, current: 320};
-
-        dp._move = function (y, cb) {
-            var endCb = isF(cb) || noop,
-                yp = dp.ypos;
-            if (yp.current !== y) {
-                yp.current = y;
-                dp.el.transition().duration(300)
-                    .each('end', endCb)
-                    .style('top', yp.current + 'px');
-            } else {
-                endCb();
-            }
-        };
-
-        dp.down = function (cb) { dp._move(dp.ypos.down, cb); };
-        dp.up = function (cb) { dp._move(dp.ypos.up, cb); };
-    }
-
-    // ==============================
-    // View registration
-
-    onos.ui.addView('topo', {
-        init: init,
-        load: load,
-        unload: unload,
-        resize: resize,
-        theme: theme
-    });
-
-    summaryPane = onos.ui.addFloatingPanel('topo-summary');
-    detailPane = onos.ui.addFloatingPanel('topo-detail');
-    augmentDetailPane();
-    oiBox = onos.ui.addFloatingPanel('topo-oibox', 'TL');
-    oiBox.width(20);
-
-}(ONOS));

-/*
- * Copyright 2015 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.onosproject.ui.impl;
-
-import com.fasterxml.jackson.databind.node.ObjectNode;
-import com.google.common.collect.ImmutableSet;
-import org.junit.Before;
-import org.junit.Test;
-import org.onlab.osgi.ServiceDirectory;
-import org.onlab.osgi.TestServiceDirectory;
-import org.onlab.packet.ChassisId;
-import org.onlab.packet.IpAddress;
-import org.onlab.packet.MacAddress;
-import org.onlab.packet.VlanId;
-import org.onosproject.cluster.ClusterService;
-import org.onosproject.cluster.ClusterServiceAdapter;
-import org.onosproject.core.CoreService;
-import org.onosproject.core.CoreServiceAdapter;
-import org.onosproject.core.Version;
-import org.onosproject.mastership.MastershipService;
-import org.onosproject.mastership.MastershipServiceAdapter;
-import org.onosproject.net.DefaultDevice;
-import org.onosproject.net.DefaultHost;
-import org.onosproject.net.Device;
-import org.onosproject.net.DeviceId;
-import org.onosproject.net.Host;
-import org.onosproject.net.HostId;
-import org.onosproject.net.HostLocation;
-import org.onosproject.net.Port;
-import org.onosproject.net.PortNumber;
-import org.onosproject.net.device.DeviceService;
-import org.onosproject.net.device.DeviceServiceAdapter;
-import org.onosproject.net.flow.FlowEntry;
-import org.onosproject.net.flow.FlowRuleService;
-import org.onosproject.net.flow.FlowRuleServiceAdapter;
-import org.onosproject.net.host.HostService;
-import org.onosproject.net.host.HostServiceAdapter;
-import org.onosproject.net.intent.IntentService;
-import org.onosproject.net.intent.IntentServiceAdapter;
-import org.onosproject.net.link.LinkService;
-import org.onosproject.net.link.LinkServiceAdapter;
-import org.onosproject.net.provider.ProviderId;
-import org.onosproject.net.statistic.StatisticService;
-import org.onosproject.net.statistic.StatisticServiceAdapter;
-import org.onosproject.net.topology.TopologyService;
-import org.onosproject.net.topology.TopologyServiceAdapter;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Set;
-
-import static org.junit.Assert.assertEquals;
-
-public class TopologyViewWebSocketTest {
-
-    private static final ProviderId PID = new ProviderId("of", "foo.bar");
-    private static final ChassisId CHID = new ChassisId(123L);
-    private static final MacAddress MAC = MacAddress.valueOf("00:00:00:00:00:19");
-    private static final DeviceId DID = DeviceId.deviceId("of:foo");
-    private static final Set<IpAddress> IPS = ImmutableSet.of(IpAddress.valueOf("1.2.3.4"));
-
-    private TestWebSocket ws;
-    private TestServiceDirectory sd;
-
-    @Before
-    public void setUp() {
-        sd = new TestServiceDirectory();
-        sd.add(DeviceService.class, new TestDeviceService());
-        sd.add(ClusterService.class, new ClusterServiceAdapter());
-        sd.add(LinkService.class, new LinkServiceAdapter());
-        sd.add(HostService.class, new TestHostService());
-        sd.add(MastershipService.class, new MastershipServiceAdapter());
-        sd.add(IntentService.class, new IntentServiceAdapter());
-        sd.add(FlowRuleService.class, new TestFlowService());
-        sd.add(StatisticService.class, new StatisticServiceAdapter());
-        sd.add(TopologyService.class, new TopologyServiceAdapter());
-        sd.add(CoreService.class, new TestCoreService());
-        ws = new TestWebSocket(sd);
-    }
-
-    @Test
-    public void requestDetailsDevice() {
-        // build the request
-        String request = "{\"event\":\"requestDetails\", \"sid\":0, "
-                + "\"payload\":{\"id\":\"of:000001\",\"class\":\"device\"}}";
-        ws.onMessage(request);
-        // look at the ws reply, and verify that it is correct
-        assertEquals("incorrect id", "of:000001", ws.reply.path("payload").path("id").asText());
-        assertEquals("incorrect mfr", "foo", ws.reply.path("payload").path("props").path("Vendor").asText());
-    }
-
-    @Test
-    public void requestDetailsHost() {
-        // build the request
-        String request = "{\"event\":\"requestDetails\", \"sid\":0, "
-                + "\"payload\":{\"id\":\"00:00:00:00:00:19/-1\",\"class\":\"host\"}}";
-        ws.onMessage(request);
-        // look at the ws reply, and verify that it is correct
-        assertEquals("incorrect id", "00:00:00:00:00:19/-1", ws.reply.path("payload").path("id").asText());
-        assertEquals("incorrect ip address", "1.2.3.4", ws.reply.path("payload").path("props").path("IP").asText());
-    }
-
-    private class TestWebSocket extends TopologyViewWebSocket {
-
-        private ObjectNode reply;
-
-        /**
-         * Creates a new web-socket for serving data to GUI topology view.
-         *
-         * @param directory service directory
-         */
-        public TestWebSocket(ServiceDirectory directory) {
-            super(directory);
-        }
-
-        @Override
-        protected synchronized void sendMessage(ObjectNode data) {
-            reply = data;
-        }
-    }
-
-    private class TestCoreService extends CoreServiceAdapter {
-        @Override
-        public Version version() {
-            return Version.version("1.2.3");
-        }
-    }
-
-    private class TestDeviceService extends DeviceServiceAdapter {
-
-        @Override
-        public Device getDevice(DeviceId deviceId) {
-            return new DefaultDevice(PID, deviceId, Device.Type.SWITCH,
-                                     "foo", "hw", "sw", "sn", CHID);
-        }
-
-        @Override
-        public List<Port> getPorts(DeviceId deviceId) {
-            return new ArrayList<>();
-        }
-    }
-
-    private class TestFlowService extends FlowRuleServiceAdapter {
-        @Override
-        public Iterable<FlowEntry> getFlowEntries(DeviceId deviceId) {
-            return new ArrayList<>();
-        }
-    }
-
-    private class TestHostService extends HostServiceAdapter {
-        @Override
-        public Host getHost(HostId hostId) {
-            return new DefaultHost(PID, hostId, MAC, VlanId.NONE,
-                                   new HostLocation(DID, PortNumber.P0, 123L), IPS);
-        }
-    }
-}
\ No newline at end of file