diff --git a/uiref/src/main/java/org/onosproject/uiref/DemoLink.java b/uiref/src/main/java/org/onosproject/uiref/DemoLink.java
new file mode 100644
index 0000000..54e9234
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/DemoLink.java
@@ -0,0 +1,55 @@
+/*
+ * 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.uiref;
+
+import org.onosproject.net.Link;
+import org.onosproject.net.LinkKey;
+import org.onosproject.ui.topo.BiLink;
+import org.onosproject.ui.topo.LinkHighlight;
+import org.onosproject.ui.topo.LinkHighlight.Flavor;
+
+/**
+ * Our demo concrete class of a bi-link. We give it state so we can decide
+ * how to create link highlights.
+ */
+public class DemoLink extends BiLink {
+
+    private boolean important = false;
+    private String label = null;
+
+    public DemoLink(LinkKey key, Link link) {
+        super(key, link);
+    }
+
+    public DemoLink makeImportant() {
+        important = true;
+        return this;
+    }
+
+    public DemoLink setLabel(String label) {
+        this.label = label;
+        return this;
+    }
+
+    @Override
+    public LinkHighlight highlight(Enum<?> anEnum) {
+        Flavor flavor = important ? Flavor.PRIMARY_HIGHLIGHT
+                                  : Flavor.SECONDARY_HIGHLIGHT;
+        return new LinkHighlight(this.linkId(), flavor)
+                .setLabel(label);
+    }
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/DemoLinkMap.java b/uiref/src/main/java/org/onosproject/uiref/DemoLinkMap.java
new file mode 100644
index 0000000..754a735
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/DemoLinkMap.java
@@ -0,0 +1,31 @@
+/*
+ * 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.uiref;
+
+import org.onosproject.net.Link;
+import org.onosproject.net.LinkKey;
+import org.onosproject.ui.topo.BiLinkMap;
+
+/**
+ * Our concrete link map.
+ */
+public class DemoLinkMap extends BiLinkMap<DemoLink> {
+    @Override
+    protected DemoLink create(LinkKey linkKey, Link link) {
+        return new DemoLink(linkKey, link);
+    }
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefComponent.java b/uiref/src/main/java/org/onosproject/uiref/UiRefComponent.java
deleted file mode 100644
index 8f46dea..0000000
--- a/uiref/src/main/java/org/onosproject/uiref/UiRefComponent.java
+++ /dev/null
@@ -1,28 +0,0 @@
-package org.onosproject.uiref;
-
-import org.apache.felix.scr.annotations.Activate;
-import org.apache.felix.scr.annotations.Component;
-import org.apache.felix.scr.annotations.Deactivate;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-
-/**
- * UI Reference Component.
- */
-@Component(immediate = true)
-public class UiRefComponent {
-    private final Logger log = LoggerFactory.getLogger(getClass());
-
-
-    @Activate
-    public void activate() {
-//        appId = coreService.registerApplication("org.onosproject.uiref");
-        log.info("Started");
-    }
-
-    @Deactivate
-    public void deactivate() {
-        log.info("Stopped");
-    }
-
-}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefCustomViewMessageHandler.java b/uiref/src/main/java/org/onosproject/uiref/UiRefCustomViewMessageHandler.java
new file mode 100644
index 0000000..caf7fae
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/UiRefCustomViewMessageHandler.java
@@ -0,0 +1,75 @@
+/*
+ * 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.uiref;
+
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiMessageHandler;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.Collection;
+
+/**
+ * Message handler for UI Ref custom-view.
+ */
+public class UiRefCustomViewMessageHandler extends UiMessageHandler {
+
+    private static final String UI_REF_CUSTOM_DATA_REQ = "uiRefCustomDataRequest";
+    private static final String UI_REF_CUSTOM_DATA_RESP = "uiRefCustomDataResponse";
+
+    private static final String NUMBER = "number";
+    private static final String SQUARE = "square";
+    private static final String CUBE = "cube";
+    private static final String MESSAGE = "message";
+    private static final String MSG_FORMAT = "Next increment is %d units";
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    private long someNumber = 1;
+    private long someIncrement = 1;
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new UiRefCustomDataRequestHandler()
+        );
+    }
+
+    // handler for custom-view data requests
+    private final class UiRefCustomDataRequestHandler extends RequestHandler {
+
+        private UiRefCustomDataRequestHandler() {
+            super(UI_REF_CUSTOM_DATA_REQ);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            someIncrement++;
+            someNumber += someIncrement;
+            log.debug("Computing data for {}...", someNumber);
+
+            ObjectNode result = objectNode();
+            result.put(NUMBER, someNumber);
+            result.put(SQUARE, someNumber * someNumber);
+            result.put(CUBE, someNumber * someNumber * someNumber);
+            result.put(MESSAGE, String.format(MSG_FORMAT, someIncrement + 1));
+            sendMessage(UI_REF_CUSTOM_DATA_RESP, 0, result);
+        }
+    }
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefTableViewMessageHandler.java b/uiref/src/main/java/org/onosproject/uiref/UiRefTableViewMessageHandler.java
new file mode 100644
index 0000000..4cf6ace
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/UiRefTableViewMessageHandler.java
@@ -0,0 +1,196 @@
+/*
+ * 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.uiref;
+
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.table.TableModel;
+import org.onosproject.ui.table.TableRequestHandler;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.List;
+
+/**
+ * Message handler for UI Ref table-view.
+ */
+public class UiRefTableViewMessageHandler extends UiMessageHandler {
+
+    private static final String UI_REF_TABLE_DATA_REQ = "uiRefTableDataRequest";
+    private static final String UI_REF_TABLE_DATA_RESP = "uiRefTableDataResponse";
+    private static final String UI_REF_TABLES = "uiRefTables";
+
+    private static final String UI_REF_TABLE_DETAIL_REQ = "uiRefTableDetailsRequest";
+    private static final String UI_REF_TABLE_DETAIL_RESP = "uiRefTableDetailsResponse";
+    private static final String DETAILS = "details";
+
+    private static final String ID = "id";
+    private static final String LABEL = "label";
+    private static final String CODE = "code";
+    private static final String COMMENT = "comment";
+    private static final String RESULT = "result";
+
+    private static final String[] COLUMN_IDS = {ID, LABEL, CODE};
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new UiRefTableDataRequestHandler(),
+                new UiRefTableDetailRequestHandler()
+        );
+    }
+
+    // handler for table view data requests
+    private final class UiRefTableDataRequestHandler extends TableRequestHandler {
+
+        private UiRefTableDataRequestHandler() {
+            super(UI_REF_TABLE_DATA_REQ, UI_REF_TABLE_DATA_RESP, UI_REF_TABLES);
+        }
+
+        // if necessary, override defaultColumnId() -- if it isn't "id"
+
+        @Override
+        protected String[] getColumnIds() {
+            return COLUMN_IDS;
+        }
+
+        // if required, override createTableModel() to set
+        // column formatters / comparators
+
+        @Override
+        protected void populateTable(TableModel tm, ObjectNode payload) {
+            // === NOTE: the table model supplied here will have been created
+            // via  a call to createTableModel(). To assign non-default
+            // cell formatters or comparators to the table model, override
+            // createTableModel() and set them there.
+
+            // === retrieve table row items from some service... for example:
+            // SomeService ss = get(SomeService.class);
+            // List<Item> items = ss.getItems()
+
+            // fake data for demonstration purposes...
+            List<Item> items = getItems();
+            for (Item item: items) {
+                populateRow(tm.addRow(), item);
+            }
+        }
+
+        private void populateRow(TableModel.Row row, Item item) {
+            row.cell(ID, item.id())
+                    .cell(LABEL, item.label())
+                    .cell(CODE, item.code());
+        }
+    }
+
+
+    // handler for table view item details requests
+    private final class UiRefTableDetailRequestHandler extends RequestHandler {
+
+        private UiRefTableDetailRequestHandler() {
+            super(UI_REF_TABLE_DETAIL_REQ);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID, "(none)");
+
+            // SomeService ss = get(SomeService.class);
+            // Item item = ss.getItemDetails(id)
+
+            // fake data for demonstration purposes...
+            Item item = getItem(id);
+
+            ObjectNode rootNode = objectNode();
+            ObjectNode data = objectNode();
+            rootNode.set(DETAILS, data);
+
+            if (item == null) {
+                rootNode.put(RESULT, "Item with id '" + id + "' not found");
+                log.warn("attempted to get item detail for id '{}'", id);
+
+            } else {
+                rootNode.put(RESULT, "Found item with id '" + id + "'");
+
+                data.put(ID, item.id());
+                data.put(LABEL, item.label());
+                data.put(CODE, item.code());
+                data.put(COMMENT, "Some arbitrary comment");
+            }
+
+            sendMessage(UI_REF_TABLE_DETAIL_RESP, 0, rootNode);
+        }
+    }
+
+
+    // ===================================================================
+    // NOTE: The code below this line is to create fake data for this
+    //       sample code. Normally you would use existing services to
+    //       provide real data.
+
+    // Lookup a single item.
+    private static Item getItem(String id) {
+        // We realize this code is really inefficient, but
+        // it suffices for our purposes of demonstration...
+        for (Item item : getItems()) {
+            if (item.id().equals(id)) {
+                return item;
+            }
+        }
+        return null;
+    }
+
+    // Produce a list of items.
+    private static List<Item> getItems() {
+        List<Item> items = new ArrayList<>();
+        items.add(new Item("item-1", "foo", 42));
+        items.add(new Item("item-2", "bar", 99));
+        items.add(new Item("item-3", "baz", 65));
+        return items;
+    }
+
+    // Simple model class to provide sample data
+    private static class Item {
+        private final String id;
+        private final String label;
+        private final int code;
+
+        Item(String id, String label, int code) {
+            this.id = id;
+            this.label = label;
+            this.code = code;
+        }
+
+        String id() {
+            return id;
+        }
+
+        String label() {
+            return label;
+        }
+
+        int code() {
+            return code;
+        }
+    }
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlay.java b/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlay.java
new file mode 100644
index 0000000..63b65ba
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlay.java
@@ -0,0 +1,78 @@
+/*
+ * 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.uiref;
+
+import org.onosproject.net.DeviceId;
+import org.onosproject.ui.UiTopoOverlay;
+import org.onosproject.ui.topo.ButtonId;
+import org.onosproject.ui.topo.PropertyPanel;
+import org.onosproject.ui.topo.TopoConstants;
+
+import static org.onosproject.ui.topo.TopoConstants.Properties.FLOWS;
+import static org.onosproject.ui.topo.TopoConstants.Properties.INTENTS;
+import static org.onosproject.ui.topo.TopoConstants.Properties.LATITUDE;
+import static org.onosproject.ui.topo.TopoConstants.Properties.LONGITUDE;
+import static org.onosproject.ui.topo.TopoConstants.Properties.TOPOLOGY_SSCS;
+import static org.onosproject.ui.topo.TopoConstants.Properties.TUNNELS;
+import static org.onosproject.ui.topo.TopoConstants.Properties.VERSION;
+
+/**
+ * UI Reference Topology Overlay hooks.
+ */
+public class UiRefTopoOverlay extends UiTopoOverlay {
+    // NOTE: this must match the ID defined in uiRefTopov.js
+    private static final String OVERLAY_ID = "ui-ref-overlay";
+
+    private static final String MY_TITLE = "My App Rocks!";
+    private static final String MY_VERSION = "Beta-1.0.0042";
+    private static final String MY_DEVICE_TITLE = "I changed the title";
+
+    private static final ButtonId FOO_BUTTON = new ButtonId("foo");
+    private static final ButtonId BAR_BUTTON = new ButtonId("bar");
+
+    public UiRefTopoOverlay() {
+        super(OVERLAY_ID);
+    }
+
+
+    @Override
+    public void modifySummary(PropertyPanel pp) {
+        pp.title(MY_TITLE)
+                .typeId(TopoConstants.Glyphs.CROWN)
+                .removeProps(
+                        TOPOLOGY_SSCS,
+                        INTENTS,
+                        TUNNELS,
+                        FLOWS,
+                        VERSION
+                )
+                .addProp(VERSION, MY_VERSION);
+    }
+
+    @Override
+    public void modifyDeviceDetails(PropertyPanel pp, DeviceId deviceId) {
+        pp.title(MY_DEVICE_TITLE);
+        pp.removeProps(LATITUDE, LONGITUDE);
+
+        pp.addButton(FOO_BUTTON)
+                .addButton(BAR_BUTTON);
+
+        pp.removeButtons(TopoConstants.CoreButtons.SHOW_PORT_VIEW)
+                .removeButtons(TopoConstants.CoreButtons.SHOW_GROUP_VIEW);
+    }
+
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlayMessageHandler.java b/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlayMessageHandler.java
new file mode 100644
index 0000000..18fc4e2
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/UiRefTopoOverlayMessageHandler.java
@@ -0,0 +1,333 @@
+/*
+ * 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.uiref;
+
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.base.Strings;
+import com.google.common.collect.ImmutableSet;
+import org.onlab.osgi.ServiceDirectory;
+import org.onosproject.net.Device;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.Element;
+import org.onosproject.net.HostId;
+import org.onosproject.net.Link;
+import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.host.HostService;
+import org.onosproject.net.link.LinkService;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiConnection;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.topo.DeviceHighlight;
+import org.onosproject.ui.topo.Highlights;
+import org.onosproject.ui.topo.NodeBadge;
+import org.onosproject.ui.topo.TopoJson;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.Collection;
+import java.util.HashSet;
+import java.util.Set;
+import java.util.Timer;
+import java.util.TimerTask;
+
+/**
+ * Message handler for Topology overlay events.
+ */
+public class UiRefTopoOverlayMessageHandler extends UiMessageHandler {
+
+    private static final String UI_REF_TOPOV_DISPLAY_START = "uiRefTopovDisplayStart";
+    private static final String UI_REF_TOPOV_DISPLAY_UPDATE = "uiRefTopovDisplayUpdate";
+    private static final String UI_REF_TOPOV_DISPLAY_STOP = "uiRefTopovDisplayStop";
+
+    private static final String ID = "id";
+    private static final String MODE = "mode";
+
+    private static final long UPDATE_PERIOD_MS = 1000;
+
+    private static final Link[] EMPTY_LINK_SET = new Link[0];
+
+    private enum Mode { IDLE, MOUSE, LINK }
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    private DeviceService deviceService;
+    private HostService hostService;
+    private LinkService linkService;
+
+    private final Timer timer = new Timer("ui-ref-overlay");
+    private TimerTask demoTask = null;
+    private Mode currentMode = Mode.IDLE;
+    private Element elementOfNote;
+    private Link[] linkSet = EMPTY_LINK_SET;
+    private int linkIndex;
+
+
+    // ===============-=-=-=-=-=-======================-=-=-=-=-=-=-================================
+
+
+    @Override
+    public void init(UiConnection connection, ServiceDirectory directory) {
+        super.init(connection, directory);
+        deviceService = directory.get(DeviceService.class);
+        hostService = directory.get(HostService.class);
+        linkService = directory.get(LinkService.class);
+    }
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new DisplayStartHandler(),
+                new DisplayUpdateHandler(),
+                new DisplayStopHandler()
+        );
+    }
+
+    // === -------------------------
+    // === Handler classes
+
+    private final class DisplayStartHandler extends RequestHandler {
+        public DisplayStartHandler() {
+            super(UI_REF_TOPOV_DISPLAY_START);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String mode = string(payload, MODE);
+
+            log.debug("Start Display: mode [{}]", mode);
+            clearState();
+            clearForMode();
+
+            switch (mode) {
+                case "mouse":
+                    currentMode = Mode.MOUSE;
+                    cancelTask();
+                    sendMouseData();
+                    break;
+
+                case "link":
+                    currentMode = Mode.LINK;
+                    scheduleTask();
+                    initLinkSet();
+                    sendLinkData();
+                    break;
+
+                default:
+                    currentMode = Mode.IDLE;
+                    cancelTask();
+                    break;
+            }
+        }
+    }
+
+    private final class DisplayUpdateHandler extends RequestHandler {
+        public DisplayUpdateHandler() {
+            super(UI_REF_TOPOV_DISPLAY_UPDATE);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID);
+            log.debug("Update Display: id [{}]", id);
+            if (!Strings.isNullOrEmpty(id)) {
+                updateForMode(id);
+            } else {
+                clearForMode();
+            }
+        }
+    }
+
+    private final class DisplayStopHandler extends RequestHandler {
+        public DisplayStopHandler() {
+            super(UI_REF_TOPOV_DISPLAY_STOP);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            log.debug("Stop Display");
+            cancelTask();
+            clearState();
+            clearForMode();
+        }
+    }
+
+    // === ------------
+
+    private void clearState() {
+        currentMode = Mode.IDLE;
+        elementOfNote = null;
+        linkSet = EMPTY_LINK_SET;
+    }
+
+    private void updateForMode(String id) {
+        log.debug("host service: {}", hostService);
+        log.debug("device service: {}", deviceService);
+
+        try {
+            HostId hid = HostId.hostId(id);
+            log.debug("host id {}", hid);
+            elementOfNote = hostService.getHost(hid);
+            log.debug("host element {}", elementOfNote);
+
+        } catch (Exception e) {
+            try {
+                DeviceId did = DeviceId.deviceId(id);
+                log.debug("device id {}", did);
+                elementOfNote = deviceService.getDevice(did);
+                log.debug("device element {}", elementOfNote);
+
+            } catch (Exception e2) {
+                log.debug("Unable to process ID [{}]", id);
+                elementOfNote = null;
+            }
+        }
+
+        switch (currentMode) {
+            case MOUSE:
+                sendMouseData();
+                break;
+
+            case LINK:
+                sendLinkData();
+                break;
+
+            default:
+                break;
+        }
+
+    }
+
+    private void clearForMode() {
+        sendHighlights(new Highlights());
+    }
+
+    private void sendHighlights(Highlights highlights) {
+        sendMessage(TopoJson.highlightsMessage(highlights));
+    }
+
+
+    private void sendMouseData() {
+        if (elementOfNote != null && elementOfNote instanceof Device) {
+            DeviceId devId = (DeviceId) elementOfNote.id();
+            Set<Link> links = linkService.getDeviceEgressLinks(devId);
+            Highlights highlights = fromLinks(links, devId);
+            addDeviceBadge(highlights, devId, links.size());
+            sendHighlights(highlights);
+        }
+        // Note: could also process Host, if available
+    }
+
+    private void addDeviceBadge(Highlights h, DeviceId devId, int n) {
+        DeviceHighlight dh = new DeviceHighlight(devId.toString());
+        dh.setBadge(createBadge(n));
+        h.add(dh);
+    }
+
+    private NodeBadge createBadge(int n) {
+        NodeBadge.Status status = n > 3 ? NodeBadge.Status.ERROR : NodeBadge.Status.WARN;
+        String noun = n > 3 ? "(critical)" : "(problematic)";
+        String msg = "Egress links: " + n + " " + noun;
+        return NodeBadge.number(status, n, msg);
+    }
+
+    private Highlights fromLinks(Set<Link> links, DeviceId devId) {
+        DemoLinkMap linkMap = new DemoLinkMap();
+        if (links != null) {
+            log.debug("Processing {} links", links.size());
+            links.forEach(linkMap::add);
+        } else {
+            log.debug("No egress links found for device {}", devId);
+        }
+
+        Highlights highlights = new Highlights();
+
+        for (DemoLink dlink : linkMap.biLinks()) {
+            dlink.makeImportant().setLabel("Yo!");
+            highlights.add(dlink.highlight(null));
+        }
+        return highlights;
+    }
+
+    private void initLinkSet() {
+        Set<Link> links = new HashSet<>();
+        for (Link link : linkService.getActiveLinks()) {
+            links.add(link);
+        }
+        linkSet = links.toArray(new Link[links.size()]);
+        linkIndex = 0;
+        log.debug("initialized link set to {}", linkSet.length);
+    }
+
+    private void sendLinkData() {
+        DemoLinkMap linkMap = new DemoLinkMap();
+        for (Link link : linkSet) {
+            linkMap.add(link);
+        }
+        DemoLink dl = linkMap.add(linkSet[linkIndex]);
+        dl.makeImportant().setLabel(Integer.toString(linkIndex));
+        log.debug("sending link data (index {})", linkIndex);
+
+        linkIndex += 1;
+        if (linkIndex >= linkSet.length) {
+            linkIndex = 0;
+        }
+
+        Highlights highlights = new Highlights();
+        for (DemoLink dlink : linkMap.biLinks()) {
+            highlights.add(dlink.highlight(null));
+        }
+
+        sendHighlights(highlights);
+    }
+
+    private synchronized void scheduleTask() {
+        if (demoTask == null) {
+            log.debug("Starting up demo task...");
+            demoTask = new DisplayUpdateTask();
+            timer.schedule(demoTask, UPDATE_PERIOD_MS, UPDATE_PERIOD_MS);
+        } else {
+            log.debug("(demo task already running");
+        }
+    }
+
+    private synchronized void cancelTask() {
+        if (demoTask != null) {
+            demoTask.cancel();
+            demoTask = null;
+        }
+    }
+
+
+    private class DisplayUpdateTask extends TimerTask {
+        @Override
+        public void run() {
+            try {
+                switch (currentMode) {
+                    case LINK:
+                        sendLinkData();
+                        break;
+
+                    default:
+                        break;
+                }
+            } catch (Exception e) {
+                log.warn("Unable to process demo task: {}", e.getMessage());
+                log.debug("Oops", e);
+            }
+        }
+    }
+}
diff --git a/uiref/src/main/java/org/onosproject/uiref/UiRefUiComponent.java b/uiref/src/main/java/org/onosproject/uiref/UiRefUiComponent.java
new file mode 100644
index 0000000..1aa4a2a
--- /dev/null
+++ b/uiref/src/main/java/org/onosproject/uiref/UiRefUiComponent.java
@@ -0,0 +1,101 @@
+/*
+ * 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.uiref;
+
+import com.google.common.collect.ImmutableList;
+import org.apache.felix.scr.annotations.Activate;
+import org.apache.felix.scr.annotations.Component;
+import org.apache.felix.scr.annotations.Deactivate;
+import org.apache.felix.scr.annotations.Reference;
+import org.apache.felix.scr.annotations.ReferenceCardinality;
+import org.onosproject.ui.UiExtension;
+import org.onosproject.ui.UiExtensionService;
+import org.onosproject.ui.UiMessageHandlerFactory;
+import org.onosproject.ui.UiTopoOverlayFactory;
+import org.onosproject.ui.UiView;
+import org.onosproject.ui.UiViewHidden;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.List;
+
+/**
+ * UI Reference component. When activated, registers a {@link UiExtension} with
+ * the {@link UiExtensionService}, so that new content is injected into the
+ * ONOS Web UI. This example injects two new views (custom and table) as well
+ * as providing a topology view overlay.
+ */
+@Component(immediate = true)
+public class UiRefUiComponent {
+
+    private static final ClassLoader CL = UiRefUiComponent.class.getClassLoader();
+
+    // There should be matching directory names under ~/resources/app/view/
+    private static final String CUSTOM_VIEW_ID = "uiRefCustom";
+    private static final String TABLE_VIEW_ID = "uiRefTable";
+    private static final String TOPOV_VIEW_ID = "uiRefTopov";
+
+    // Text to appear in the UI navigation pane
+    private static final String CUSTOM_VIEW_TEXT = "UI Ref Custom";
+    private static final String TABLE_VIEW_TEXT = "UI Ref Table";
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
+    protected UiExtensionService uiExtensionService;
+
+    // List of application views
+    private final List<UiView> uiViews = ImmutableList.of(
+            new UiView(UiView.Category.OTHER, CUSTOM_VIEW_ID, CUSTOM_VIEW_TEXT),
+            new UiView(UiView.Category.OTHER, TABLE_VIEW_ID, TABLE_VIEW_TEXT),
+            new UiViewHidden(TOPOV_VIEW_ID)
+    );
+
+    // Factory for message handlers
+    private final UiMessageHandlerFactory messageHandlerFactory =
+            () -> ImmutableList.of(
+                    new UiRefCustomViewMessageHandler(),
+                    new UiRefTableViewMessageHandler(),
+                    new UiRefTopoOverlayMessageHandler()
+            );
+
+    // Factory for topology overlays
+    private final UiTopoOverlayFactory topoOverlayFactory =
+            () -> ImmutableList.of(
+                    new UiRefTopoOverlay()
+            );
+
+    // Build our UI extension definition
+    private UiExtension extension =
+            new UiExtension.Builder(CL, uiViews)
+                    .messageHandlerFactory(messageHandlerFactory)
+                    .topoOverlayFactory(topoOverlayFactory)
+                    .build();
+
+    @Activate
+    protected void activate() {
+        uiExtensionService.register(extension);
+        log.info("Started");
+    }
+
+    @Deactivate
+    protected void deactivate() {
+        uiExtensionService.unregister(extension);
+        log.info("Stopped");
+    }
+
+}
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
new file mode 100644
index 0000000..e9f99b3
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
@@ -0,0 +1,48 @@
+/* css for UI Reference App custom view */
+
+#ov-ui-ref-custom {
+    padding: 20px;
+}
+.light #ov-ui-ref-custom {
+    color: navy;
+}
+.dark #ov-ui-ref-custom {
+    color: #88f;
+}
+
+#ov-ui-ref-custom .button-panel {
+    margin: 10px;
+    width: 200px;
+}
+
+.light #ov-ui-ref-custom .button-panel {
+    background-color: #ccf;
+}
+.dark #ov-ui-ref-custom .button-panel {
+    background-color: #444;
+}
+
+#ov-ui-ref-custom .my-button {
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+}
+
+.light #ov-ui-ref-custom .my-button {
+    color: white;
+    background-color: #99d;
+}
+.dark #ov-ui-ref-custom .my-button {
+    color: black;
+    background-color: #aaa;
+}
+
+#ov-ui-ref-custom .number {
+    font-size: 140%;
+    text-align: right;
+}
+
+#ov-ui-ref-custom .quote {
+    margin: 10px 20px;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
new file mode 100644
index 0000000..30b32ff
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
@@ -0,0 +1,32 @@
+<!-- partial HTML -->
+<div id="ov-ui-ref-custom">
+    <div class="button-panel">
+        <div class="my-button" ng-click="getData()">
+            Fetch Data
+        </div>
+    </div>
+
+    <div class="data-panel">
+        <table>
+            <tr>
+                <td> Number </td>
+                <td class="number"> {{data.number}} </td>
+            </tr>
+            <tr>
+                <td> Square </td>
+                <td class="number"> {{data.square}} </td>
+            </tr>
+            <tr>
+                <td> Cube </td>
+                <td class="number"> {{data.cube}} </td>
+            </tr>
+        </table>
+
+        <p>
+            A message from our sponsors:
+        </p>
+        <p>
+            <span class="quote"> {{data.message}} </span>
+        </p>
+    </div>
+</div>
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
new file mode 100644
index 0000000..025efc3
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
@@ -0,0 +1,69 @@
+// js for UI Reference App custom view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, wss, ks;
+
+    // constants
+    var dataReq = 'uiRefCustomDataRequest',
+        dataResp = 'uiRefCustomDataResponse';
+
+    function addKeyBindings() {
+        var map = {
+            space: [getData, 'Fetch data from server'],
+
+            _helpFormat: [
+                ['space']
+            ]
+        };
+
+        ks.keyBindings(map);
+    }
+
+    function getData() {
+        wss.sendEvent(dataReq);
+    }
+
+    function respDataCb(data) {
+        $scope.data = data;
+        $scope.$apply();
+    }
+
+
+    angular.module('ovUiRefCustom', [])
+        .controller('OvUiRefCustomCtrl',
+        ['$log', '$scope', 'WebSocketService', 'KeyService',
+
+            function (_$log_, _$scope_, _wss_, _ks_) {
+                $log = _$log_;
+                $scope = _$scope_;
+                wss = _wss_;
+                ks = _ks_;
+
+                var handlers = {};
+                $scope.data = {};
+
+                // data response handler
+                handlers[dataResp] = respDataCb;
+                wss.bindHandlers(handlers);
+
+                addKeyBindings();
+
+                // custom click handler
+                $scope.getData = getData;
+
+                // get data the first time...
+                getData();
+
+                // cleanup
+                $scope.$on('$destroy', function () {
+                    wss.unbindHandlers(handlers);
+                    ks.unbindKeys();
+                    $log.log('OvUiRefCustomCtrl has been destroyed');
+                });
+
+                $log.log('OvUiRefCustomCtrl has been created');
+            }]);
+
+}());
diff --git a/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.css b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.css
new file mode 100644
index 0000000..55fee9f
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.css
@@ -0,0 +1,35 @@
+/* css for UI Reference App table view */
+
+#ov-ui-ref-table h2 {
+    display: inline-block;
+}
+
+/* Panel Styling */
+#ov-ui-ref-table-item-details-panel.floatpanel {
+    position: absolute;
+    top: 115px;
+}
+
+.light #ov-ui-ref-table-item-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #ov-ui-ref-table-item-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#ov-ui-ref-table-item-details-panel h3 {
+    margin: 0;
+    font-size: large;
+}
+
+#ov-ui-ref-table-item-details-panel h4 {
+    margin: 0;
+}
+
+#ov-ui-ref-table-item-details-panel td {
+    padding: 5px;
+}
+#ov-ui-ref-table-item-details-panel td.label {
+    font-style: italic;
+    opacity: 0.8;
+}
diff --git a/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.html b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.html
new file mode 100644
index 0000000..2936bcb
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.html
@@ -0,0 +1,46 @@
+<!-- partial HTML -->
+<div id="ov-ui-ref-table">
+    <div class="tabular-header">
+        <h2>Items ({{tableData.length}} total)</h2>
+        <div class="ctrl-btns">
+            <div class="refresh" ng-class="{active: autoRefresh}"
+                 icon icon-id="refresh" icon-size="36"
+                 tooltip tt-msg="autoRefreshTip"
+                 ng-click="toggleRefresh()"></div>
+        </div>
+    </div>
+
+    <div class="summary-list" onos-table-resize>
+
+        <div class="table-header" onos-sortable-header>
+            <table>
+                <tr>
+                    <td colId="id" sortable>Item ID </td>
+                    <td colId="label" sortable>Label </td>
+                    <td colId="code" sortable>Code </td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table>
+                <tr ng-if="!tableData.length" class="no-data">
+                    <td colspan="3">
+                        No Items found
+                    </td>
+                </tr>
+
+                <tr ng-repeat="item in tableData track by $index"
+                    ng-click="selectCallback($event, item)"
+                    ng-class="{selected: item.id === selId}">
+                    <td>{{item.id}}</td>
+                    <td>{{item.label}}</td>
+                    <td>{{item.code}}</td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+
+    <ov-ui-ref-table-item-details-panel></ov-ui-ref-table-item-details-panel>
+</div>
diff --git a/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js
new file mode 100644
index 0000000..70a082e
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTable/uiRefTable.js
@@ -0,0 +1,141 @@
+// js for UI Reference App table view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, fs, wss;
+
+    // constants
+    var detailsReq = 'uiRefTableDetailsRequest',
+        detailsResp = 'uiRefTableDetailsResponse',
+        pName = 'ov-ui-ref-table-item-details-panel',
+
+        propOrder = ['id', 'label', 'code'],
+        friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
+
+
+    function addProp(tbody, index, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).html(txt);
+        }
+        addCell('label', friendlyProps[index] + ' :');
+        addCell('value', value);
+    }
+
+    function populatePanel(panel) {
+        var title = panel.append('h3'),
+            tbody = panel.append('table').append('tbody');
+
+        title.text('Item Details');
+
+        propOrder.forEach(function (prop, i) {
+            addProp(tbody, i, $scope.panelDetails[prop]);
+        });
+
+        panel.append('hr');
+        panel.append('h4').text('Comments');
+        panel.append('p').text($scope.panelDetails.comment);
+    }
+
+    function respDetailsCb(data) {
+        $scope.panelDetails = data.details;
+        $scope.$apply();
+    }
+
+    angular.module('ovUiRefTable', [])
+        .controller('OvUiRefTableCtrl',
+        ['$log', '$scope', 'TableBuilderService',
+            'FnService', 'WebSocketService',
+
+            function (_$log_, _$scope_, tbs, _fs_, _wss_) {
+                $log = _$log_;
+                $scope = _$scope_;
+                fs = _fs_;
+                wss = _wss_;
+
+                var handlers = {};
+                $scope.panelDetails = {};
+
+                // details response handler
+                handlers[detailsResp] = respDetailsCb;
+                wss.bindHandlers(handlers);
+
+                // custom selection callback
+                function selCb($event, row) {
+                    if ($scope.selId) {
+                        wss.sendEvent(detailsReq, { id: row.id });
+                    } else {
+                        $scope.hidePanel();
+                    }
+                    $log.debug('Got a click on:', row);
+                }
+
+                // TableBuilderService creating a table for us
+                tbs.buildTable({
+                    scope: $scope,
+                    tag: 'uiRefTable',
+                    selCb: selCb
+                });
+
+                // cleanup
+                $scope.$on('$destroy', function () {
+                    wss.unbindHandlers(handlers);
+                    $log.log('OvUiRefTableCtrl has been destroyed');
+                });
+
+                $log.log('OvUiRefTableCtrl has been created');
+            }])
+
+        .directive('ovUiRefTableItemDetailsPanel', ['PanelService', 'KeyService',
+            function (ps, ks) {
+                return {
+                    restrict: 'E',
+                    link: function (scope, element, attrs) {
+                        // insert details panel with PanelService
+                        // create the panel
+                        var panel = ps.createPanel(pName, {
+                            width: 200,
+                            margin: 20,
+                            hideMargin: 0
+                        });
+                        panel.hide();
+                        scope.hidePanel = function () { panel.hide(); };
+
+                        function closePanel() {
+                            if (panel.isVisible()) {
+                                $scope.selId = null;
+                                panel.hide();
+                                return true;
+                            }
+                            return false;
+                        }
+
+                        // create key bindings to handle panel
+                        ks.keyBindings({
+                            esc: [closePanel, 'Close the details panel'],
+                            _helpFormat: ['esc']
+                        });
+                        ks.gestureNotes([
+                            ['click', 'Select a row to show item details']
+                        ]);
+
+                        // update the panel's contents when the data is changed
+                        scope.$watch('panelDetails', function () {
+                            if (!fs.isEmptyObject(scope.panelDetails)) {
+                                panel.empty();
+                                populatePanel(panel);
+                                panel.show();
+                            }
+                        });
+
+                        // cleanup on destroyed scope
+                        scope.$on('$destroy', function () {
+                            ks.unbindKeys();
+                            ps.destroyPanel(pName);
+                        });
+                    }
+                };
+            }]);
+}());
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css
new file mode 100644
index 0000000..e794fc2
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css
@@ -0,0 +1 @@
+/* css for UI Reference App topology overlay */
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html
new file mode 100644
index 0000000..eed3013
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html
@@ -0,0 +1,4 @@
+<!-- partial HTML -->
+<div id="ov-ui-ref-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js
new file mode 100644
index 0000000..338c1d5
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js
@@ -0,0 +1,88 @@
+/*
+ Sample Demo module. This contains the "business logic" for the topology
+ overlay that we are implementing.
+ */
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss;
+
+    // constants
+    var displayStart = 'uiRefTopovDisplayStart',
+        displayUpdate = 'uiRefTopovDisplayUpdate',
+        displayStop = 'uiRefTopovDisplayStop';
+
+    // internal state
+    var currentMode = null;
+
+
+    // === ---------------------------
+    // === Helper functions
+
+    function sendDisplayStart(mode) {
+        wss.sendEvent(displayStart, {
+            mode: mode
+        });
+    }
+
+    function sendDisplayUpdate(what) {
+        wss.sendEvent(displayUpdate, {
+            id: what ? what.id : ''
+        });
+    }
+
+    function sendDisplayStop() {
+        wss.sendEvent(displayStop);
+    }
+
+    // === ---------------------------
+    // === Main API functions
+
+    function startDisplay(mode) {
+        if (currentMode === mode) {
+            $log.debug('(in mode', mode, 'already)');
+        } else {
+            currentMode = mode;
+            sendDisplayStart(mode);
+            flash.flash('Starting display mode: ' + mode);
+        }
+    }
+
+    function updateDisplay(m) {
+        if (currentMode) {
+            sendDisplayUpdate(m);
+        }
+    }
+
+    function stopDisplay() {
+        if (currentMode) {
+            currentMode = null;
+            sendDisplayStop();
+            flash.flash('Canceling display mode');
+            return true;
+        }
+        return false;
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+
+    angular.module('ovUiRefTopov', [])
+        .factory('UiRefTopovDemoService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
+
+            function (_$log_, _fs_, _flash_, _wss_) {
+                $log = _$log_;
+                fs = _fs_;
+                flash = _flash_;
+                wss = _wss_;
+
+                return {
+                    startDisplay: startDisplay,
+                    updateDisplay: updateDisplay,
+                    stopDisplay: stopDisplay
+                };
+            }]);
+}());
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
new file mode 100644
index 0000000..7d137a2
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
@@ -0,0 +1,143 @@
+// UI Reference App - topology overlay - client side
+//
+// This is the glue that binds our business logic (in uiRefTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, stds;
+
+    // internal state should be kept in the service module (not here)
+
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in UiRefTopoOverlay
+        overlayId: 'ui-ref-overlay',
+        glyphId: '*star4',
+        tooltip: 'UI Reference Overlay',
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'star4' is installed as 'ui-ref-overlay-star4'
+        // They can be referenced (from this overlay) as '*star4'
+        // That is, the '*' prefix stands in for 'ui-ref-overlay-'
+        glyphs: {
+            star4: {
+                vb: '0 0 8 8',
+                d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+            },
+            banner: {
+                vb: '0 0 6 6',
+                d: 'M1,1v4l2,-2l2,2v-4z'
+            }
+        },
+
+        activate: function () {
+            $log.debug("UI Ref topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            stds.stopDisplay();
+            $log.debug("UI Ref topology overlay DEACTIVATED");
+        },
+
+        // detail panel button definitions
+        buttons: {
+            foo: {
+                gid: 'chain',
+                tt: 'A FOO action',
+                cb: function (data) {
+                    $log.debug('FOO action invoked with data:', data);
+                }
+            },
+            bar: {
+                gid: '*banner',
+                tt: 'A BAR action',
+                cb: function (data) {
+                    $log.debug('BAR action invoked with data:', data);
+                }
+            }
+        },
+
+        // Key bindings for traffic overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        keyBindings: {
+            0: {
+                cb: function () { stds.stopDisplay(); },
+                tt: 'Cancel Display Mode',
+                gid: 'xMark'
+            },
+            V: {
+                cb: function () { stds.startDisplay('mouse'); },
+                tt: 'Start Mouse Mode',
+                gid: '*banner'
+            },
+            F: {
+                cb: function () { stds.startDisplay('link'); },
+                tt: 'Start Link Mode',
+                gid: 'chain'
+            },
+            G: {
+                cb: buttonCallback,
+                tt: 'Uses the G key',
+                gid: 'crown'
+            },
+
+            _keyOrder: [
+                '0', 'V', 'F', 'G'
+            ]
+        },
+
+        hooks: {
+            // hook for handling escape key
+            // Must return true to consume ESC, false otherwise.
+            escape: function () {
+                // Must return true to consume ESC, false otherwise.
+                return stds.stopDisplay();
+            },
+
+            // hooks for when the selection changes...
+            empty: function () {
+                selectionCallback('empty');
+            },
+            single: function (data) {
+                selectionCallback('single', data);
+            },
+            multi: function (selectOrder) {
+                selectionCallback('multi', selectOrder);
+                tov.addDetailButton('foo');
+                tov.addDetailButton('bar');
+            },
+            mouseover: function (m) {
+                // m has id, class, and type properties
+                $log.debug('mouseover:', m);
+                stds.updateDisplay(m);
+            },
+            mouseout: function () {
+                $log.debug('mouseout');
+                stds.updateDisplay();
+            }
+        }
+    };
+
+
+    function buttonCallback(x) {
+        $log.debug('Toolbar-button callback', x);
+    }
+
+    function selectionCallback(x, d) {
+        $log.debug('Selection callback', x, d);
+    }
+
+    // invoke code to register with the overlay service
+    angular.module('ovUiRefTopov')
+        .run(['$log', 'TopoOverlayService', 'UiRefTopovDemoService',
+
+            function (_$log_, _tov_, _stds_) {
+                $log = _$log_;
+                tov = _tov_;
+                stds = _stds_;
+                tov.register(overlay);
+            }]);
+
+}());
diff --git a/uiref/src/main/resources/css.html b/uiref/src/main/resources/css.html
new file mode 100644
index 0000000..563a7c3
--- /dev/null
+++ b/uiref/src/main/resources/css.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="app/view/uiRefCustom/uiRefCustom.css">
+<link rel="stylesheet" href="app/view/uiRefTable/uiRefTable.css">
+<link rel="stylesheet" href="app/view/uiRefTopov/uiRefTopov.css">
\ No newline at end of file
diff --git a/uiref/src/main/resources/js.html b/uiref/src/main/resources/js.html
new file mode 100644
index 0000000..8578a3e
--- /dev/null
+++ b/uiref/src/main/resources/js.html
@@ -0,0 +1,4 @@
+<script src="app/view/uiRefCustom/uiRefCustom.js"></script>
+<script src="app/view/uiRefTable/uiRefTable.js"></script>
+<script src="app/view/uiRefTopov/uiRefTopovDemo.js"></script>
+<script src="app/view/uiRefTopov/uiRefTopovOverlay.js"></script>
\ No newline at end of file