Initial documentation for Topo2
Change-Id: I4c77de2f556e57dcb3ae194a47dc3f7c6ebfb8e4
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2.md
new file mode 100644
index 0000000..c583b0d
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2.md
@@ -0,0 +1,9 @@
+ONOS Web UI - Topo2 Documentation
+====================================
+
+Topo2.js is the entry point to the Region Aware Topology view.
+Its purpose is to create all the necessary SVG DOM Objects and to initiate
+the services required.
+
+#Exposed methods
+Does not expose a public API.
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Background.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Background.md
new file mode 100644
index 0000000..0d71b51
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Background.md
@@ -0,0 +1,22 @@
+ONOS Web UI - Topo2Background Documentation
+====================================
+
+Topo2Background is a class that manages which type or background is displayed for
+the current region. It receives a JSON object from the Topo2CurrentLayout event determines the
+type of background and then renders.
+
+#Exposed methods
+##init()
+* Adds an svg group for the background
+* Initiates the Map and Sprite Service
+* Adds a zoomer to the local scope
+
+##addLayout(data: json)
+This method determines the type of background to to be shown with the
+given `data`
+
+##getBackgroundType()
+Returns the current background type
+
+##resetZoom()
+Repositions the background pan and zoom to the default values specified in the background json
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Breadcrumb.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Breadcrumb.md
new file mode 100644
index 0000000..374925a
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Breadcrumb.md
@@ -0,0 +1,19 @@
+ONOS Web UI - Topo2Breadcrumb Documentation
+====================================
+
+Topo2BreadcrumbService is used to render the current depth and location of the users view.
+It also provides a way of navigating backwards through the regions
+
+#Exposed methods
+##init()
+* Creates an SVG Group for the breadcrumsb
+* Renders to DOM
+
+##addBreadcrumb(crumbs: json)
+Takes a json object of current breadcrumb paths and renders them to the DOM
+
+##addLayout(_layout_: Topo2LayoutSevice)
+Adds a local reference for the Topo2LayoutService
+
+##hide()
+Hides the breadcrumb element from the viewport
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Collection.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Collection.md
new file mode 100644
index 0000000..856167c
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Collection.md
@@ -0,0 +1,41 @@
+ONOS Web UI - Topo2Collection.js Documentation
+====================================
+
+Topo2Collection is a Class that contains a Collection of Models.
+
+#Usage
+```Javacsript
+// Empty Collection
+var collection = new Collection();
+
+// Create a Collection with data
+var collection = new Collection([]: JsonArray)
+```
+
+#Exposed methods
+## initialize()
+Is called after the Object Creation
+
+## add(data: any)
+If data is a Json Object/Array, it will convert the data to a `Model` object
+If data is a `Model` it will be added with no conversion.
+Note that an `id` property is required.
+
+## remove(model: Model)
+Find and remove the Model from the collection
+
+## get(id: string)
+Returns a model with the given Id.
+
+## sort()
+Require the `comparator` property to be set on the collection.
+If set it will order the models in which the `comparator` determines.
+
+## filter(comparator: function)
+Returns an array of Models selected by the filter
+
+## empty()
+Clears and resets the collection
+
+## toJSON()
+Returns a JSON Array of all the models in the collection
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Device.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Device.md
new file mode 100644
index 0000000..7d54e3d
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Device.md
@@ -0,0 +1,33 @@
+ONOS Web UI - Topo2Device Documentation
+====================================
+
+Returns a new collection of Device Models
+
+# Collection
+## Exposed methods
+See README.Topo2Collection
+
+#Model
+## Exposed methods
+
+### initialize()
+Calls the super method.
+
+### onChange()
+Called when the model properties change.
+Updates the classNames, visibility and Device Color.
+
+### icon()
+Returns the icon to be used for the device
+
+### showDetails()
+Displays the details panel
+
+### displayMastership()
+Sets the visibility of the Device for the selected mastership
+
+### setOfflineVisibility()
+Hides or Shows according to the value specified in the topo2_prefs['offline_devices']
+
+### onExit()
+Runs the exit animate and removal of the device
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2DevicesDetailsPanel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2DevicesDetailsPanel.md
new file mode 100644
index 0000000..b7d7794
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2DevicesDetailsPanel.md
@@ -0,0 +1,32 @@
+ONOS Web UI - Topo2DeviceDetailsPanel Documentation
+====================================
+
+The details panel for devices
+
+#Exposed methods
+## init()
+Binds handlers and creates a Panel instance
+
+## updateDetails()
+Requests the details via WebSockets and updates the view
+
+## showMulti()
+Lists the selected nodes (more than 1) in the details panel
+
+## toggle()
+Show or hide the details panel based on it's current visibility
+
+## show()
+Shows the details panel
+
+## hide()
+Hides the details panel
+
+## destroy()
+Removes the details panel and unbinds any websocket events
+
+## isVisible()
+returns the visibility state of the details panel
+
+## getInstance()
+returns the details panel instance
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Event.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Event.md
new file mode 100644
index 0000000..e72957e
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Event.md
@@ -0,0 +1,14 @@
+ONOS Web UI - Topo2Event Documentation
+====================================
+
+WebSocket Events entry point for the Region Aware Topology
+
+#Exposed methods
+## bindHandlers()
+Creates the handlers for WebSocket Communications
+
+## start()
+Sends the `Topo2Start` event to the WebSocket connection
+
+## stop()
+Sends the `Topo2Stop` event to the WebSocket connection and unbinds handlers
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Force.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Force.md
new file mode 100644
index 0000000..545f2d7
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Force.md
@@ -0,0 +1,30 @@
+ONOS Web UI - Topo2Force Documentation
+======================================
+
+#Exposed methods
+## init
+Setup the required services
+
+## newDim(_dims_: array [w, h])
+Updates the width and height of the viewport
+
+## destroy
+Unbinds all events and cleans up handlers
+
+## topo2AllInstances(), topo2CurrentLayout(), topo2CurrentRegion(), topo2PeerRegions(), topo2UiModelEvent
+WebSocketEvent entry point that passes the data on to the necessary services
+
+## showMastership
+Entry Point for the showMastership selection
+
+## updateNodes
+Updates all the nodes in the current region after the use of a keyboard shortcut. Subject to change.
+
+## updateLinks
+Updates all the links in the current region after the use of a keyboard shortcut. Subject to change.
+
+## resetNodeLocation
+Resets a node to its default coordinates. Used as an entry point for the keyboard event. Subject to change.
+
+## unpin
+Removes the fixed position of a node. Used as an entry point for the Keyboard shortcut. Subject to change.
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Host.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Host.md
new file mode 100644
index 0000000..765726f
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Host.md
@@ -0,0 +1,36 @@
+ONOS Web UI - Topo2Host Documentation
+====================================
+
+Returns a new collection of Host Models
+
+# Collection
+## Exposed methods
+See README.Topo2Collection
+
+#Model
+## Exposed methods
+
+### initialize()
+Calls the super method.
+
+### onChange()
+Called when the model properties change.
+Updates the classNames, visibility and Device Color.
+
+### showDetails()
+Displays the details panel
+
+### icon()
+Returns the icon to be used for the device
+
+### label()
+Returns the label for the host
+
+### setScale()
+Determines the scale of the icon
+
+### setVisibility()
+Hides or Shows according to the value specified in the topo2_prefs['offline_devices']
+
+### onEnter()
+Creates a host node to be placed within the DOM
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2HostsPanel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2HostsPanel.md
new file mode 100644
index 0000000..571fd16
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2HostsPanel.md
@@ -0,0 +1,27 @@
+ONOS Web UI - Topo2HostsPanel Documentation
+====================================
+
+The details panel for hosts
+
+#Exposed methods
+
+## init()
+Binds handlers and creates a Panel instance
+
+## displayPanel()
+calls init() and adds the renders the hosts data into the panel
+
+## toggle()
+Show or hide the hosts panel based on it's current visibility
+
+## show()
+Shows the hosts panel
+
+## hide()
+Hides the hosts panel
+
+## destroy()
+Removes the details panel and unbinds any websocket events
+
+## isVisible()
+returns the visibility state of the hosts panel
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Instance.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Instance.md
new file mode 100644
index 0000000..3682e81
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Instance.md
@@ -0,0 +1,22 @@
+ONOS Web UI - Topo2Instance Documentation
+============================================
+
+The Instance panel
+
+#Exposed methods
+
+## init()
+Creates the Panel Instance
+Binds events to the theme service
+
+## bindCommands(data: json)
+Updates or adds all the instances contained in data.members
+
+## getActionEntry()
+Shows or hides the panel based on the panels current visibility
+
+## destroy()
+Removes from the DOM and unbinds event handlers
+
+## isVisible()
+Returns the visibility state of the instance panel
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2KeyCommands.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2KeyCommands.md
new file mode 100644
index 0000000..3fa287e
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2KeyCommands.md
@@ -0,0 +1,14 @@
+ONOS Web UI - Topo2KeyCommands Documentation
+====================================
+
+#Exposed methods
+
+## init(_t2fs_: Topo2Force, _t2tbs_: Topo2Toolbar)
+Adds a local reference to the services
+Binds the default key events
+
+## bindCommands(additional: json)
+Add and handle additional key bindings
+
+## getActionEntry()
+Returns a Key entry
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Label.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Label.md
new file mode 100644
index 0000000..d230adb
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Label.md
@@ -0,0 +1,44 @@
+ONOS Web UI - Topo2Label Documentation
+====================================
+
+This is a base class for creating a label
+
+#Exposed methods
+
+## initialize()
+## onChange()
+By default:
+updates the label text if `this.set({label: 'value'})` is called
+updates the position if `this.set({x: 'value', y: 'value'})` is called
+
+## applyStyles()
+Applies the style property (`this.get('styles')`) to the DOM elements
+
+## renderText()
+Creates the default rendering for the text
+
+## renderIcon()
+Creates the default rendering for the icon
+
+## render()
+Creates the default DOM structure for the entire label.
+Calls `this.renderIcon()` and `this.renderText()`
+
+## remove()
+Removes the label from the DOM
+
+# Overrides
+## setPosition()
+Must set properties x and y
+```Javascript
+this.set({
+ x: 10,
+ y: 20,
+})
+```
+
+## setScale()
+Called whenever a user scales the topology view
+
+## beforeRender()
+## afterRender()
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkLabel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkLabel.md
new file mode 100644
index 0000000..642f5cb
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkLabel.md
@@ -0,0 +1,26 @@
+ONOS Web UI - Topo2LinkLabel Documentation
+====================================
+
+Creates a link label
+
+#Exposed methods
+
+## onChange()
+Updates the link and calls the super method.
+
+## linkLabelCSSClass()
+Adds a css class to the label
+
+## setPosition()
+Finds the link and calculates the middle point of the link.
+Sets x and y values.
+
+## setScale()
+Scales the link to with a consistent size
+
+## beforeRender()
+Creates a reference in the corresponding link
+
+## remove()
+Removes the label from the DOM
+Removes the reference to the link
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkPanel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkPanel.md
new file mode 100644
index 0000000..f7d65d1
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2LinkPanel.md
@@ -0,0 +1,27 @@
+ONOS Web UI - Topo2LinkPanel Documentation
+====================================
+
+The details panel for links
+
+#Exposed methods
+
+## init()
+Binds handlers and creates a Panel instance
+
+## displayLink()
+calls init() and adds the renders the link data into the panel
+
+## toggle()
+Show or hide the links panel based on it's current visibility
+
+## show()
+Shows the links panel
+
+## hide()
+Hides the links panel
+
+## destroy()
+Removes the details panel and unbinds any websocket events
+
+## isVisible()
+returns the visibility state of the links panel
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Map.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Map.md
new file mode 100644
index 0000000..5b5e6fc
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Map.md
@@ -0,0 +1,19 @@
+ONOS Web UI - Topo2Map Documentation
+====================================
+
+Adds a map to the background of the Topology
+
+#Exposed methods
+
+## init()
+## setUpMap(mapId: string, mapFilePath: string, mapScale: number)
+Loads specified map as a promise
+
+## resetZoom()
+Resets pan and zoom to defaults
+
+## zoomCallback()
+Updates the stroke width to be consistent throughout zoom levels
+
+## getCurrentMap()
+Hides the links panel
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2MapConfig.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2MapConfig.md
new file mode 100644
index 0000000..c0a20b7
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2MapConfig.md
@@ -0,0 +1,9 @@
+ONOS Web UI - Topo2MapConfig Documentation
+====================================
+
+Service to get value for the current map.
+
+#Exposed methods
+
+## projection()
+Returns the current map projection
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Mastership.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Mastership.md
new file mode 100644
index 0000000..0696eac
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Mastership.md
@@ -0,0 +1,14 @@
+ONOS Web UI - Topo2Mastership Documentation
+====================================
+Service that controls the selection and display of masterships
+
+#Exposed methods
+
+## displayMastership()
+Updates the nodes to display mastership
+
+## mastership()
+returns the current selected mastership
+
+## setMastership(id: string)
+Sets the mastership value and calls display mastership
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Model.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Model.md
new file mode 100644
index 0000000..4a8a285
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Model.md
@@ -0,0 +1,28 @@
+ONOS Web UI - Topo2Model.js Documentation
+====================================
+
+Topo2Collection is a Class that contains a Collection of Models.
+
+#Usage
+```Javacsript
+var model = new Model();
+```
+
+#Exposed methods
+## initialize()
+Is called after the Object Creation
+
+## onChange(property: string, value: any, options: object)
+Method to be overridden
+
+## get(key: string)
+Returns the attribute matching the key given
+
+## set({key: string, value: any})
+Sets the model[key] value
+
+## toJSON()
+Returns a JSON Array of all the models in the collection
+
+## remove()
+Removes the model from the collection (if any) it's associated with
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NoDeviceConnected.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NoDeviceConnected.md
new file mode 100644
index 0000000..bcfa916
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NoDeviceConnected.md
@@ -0,0 +1,11 @@
+ONOS Web UI - Topo2Panel.js Documentation
+====================================
+
+Displays the 'No devices connected' message
+
+#Exposed methods
+## init()
+Creates the DOM Elements and calls `render()`
+
+## render()
+Renders the message to the view
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NodePosition.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NodePosition.md
new file mode 100644
index 0000000..d9218bd
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2NodePosition.md
@@ -0,0 +1,12 @@
+ONOS Web UI - Topo2NodePosition.js Documentation
+====================================
+
+Topo2Collection is a Class that contains a Collection of Models.
+
+#Exposed methods
+## positionNode(node: Model, forUpdate: bool)
+Places a node within the Topology, will use `setLongLat` is location is available
+or a default location if location is not set
+
+## setLongLat(el: Model)
+Positions node in the topology. Either with Lat and Long (geo) values or X and Y (grid)
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Panel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Panel.md
new file mode 100644
index 0000000..c2e7f9c
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Panel.md
@@ -0,0 +1,29 @@
+ONOS Web UI - Topo2Panel.js Documentation
+====================================
+
+Base class for a Panel in Topo2
+
+#Exposed methods
+## initialize()
+calls `super()`
+
+## setup()
+Ensures an empty panel and creates the content regions (header, body, footer)
+
+## appendToHeader(el)
+Adds a DOM node to the Header
+
+## appendToBody(el)
+Adds a DOM node to the body
+
+## appendToFooter(el)
+Adds a DOM node to the footer
+
+## emptyRegions()
+Clears the Header, Body and Footer of the Panel
+
+## destroy()
+Removes the Panel from the DOM
+
+## isVisible()
+Returns the visibility state of the Panel
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2PeerRegion.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2PeerRegion.md
new file mode 100644
index 0000000..e4e9907
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2PeerRegion.md
@@ -0,0 +1,21 @@
+ONOS Web UI - Topo2PeerRegion.js Documentation
+====================================
+
+Base class for a Panel in Topo2
+
+#Exposed methods
+## initialize(el)
+Adds a DOM node to the body
+
+## onChange(el)
+Updates the class name depending on state.
+Inherited from `Topo2NodeModel`
+
+## showDetails()
+Shows the sub region details panel
+
+## icon()
+Returns a string of the icon name
+
+## navigateToRegion()
+Calls the `Topo2RegionNavigationService`
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2RegionNavigation.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2RegionNavigation.md
new file mode 100644
index 0000000..c724426
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2RegionNavigation.md
@@ -0,0 +1,21 @@
+ONOS Web UI - Topo2RegionNavigation.js Documentation
+====================================
+
+# Internal methods
+## notifyListeners(el)
+Adds a DOM node to the body
+
+## navigateToRegion(id: string)
+Requests the region nodes via WebSockets
+Notifies any listeners that a regionNavigation is about to happen ('region:navigation-start')
+
+## navigateToRegionComplete()
+Notifies any listeners that a regionNavigation has completed ('region:navigation-complete')
+
+#Exposed methods
+## addListener()
+Ensures an empty panel and creates the content regions (header, body, footer)
+
+## destroy()
+Resets state and removes the listeners
+
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Select.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Select.md
new file mode 100644
index 0000000..d294b4d
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Select.md
@@ -0,0 +1,28 @@
+ONOS Web UI - Topo2Select.js Documentation
+====================================
+
+This class also watches mouse move events to highlight the nearest link.
+This will eventually be refactored into it's own class.
+
+#Internal methods
+## updateDetails
+Will update the visible details panel content with selected node(s).
+
+## removeNode
+Used to remove a node when multiselect is enabled and device is deselected
+
+#Exposed methods
+## init()
+Sets up the internal references to the zoomer and SVG layer
+
+## selectObject(node, multiSelectEnabled)
+```
+Node: The selected node in the topology
+MultiSelectEnabled: (true/false) if multi select is enabled for the node type
+```
+Selects the node passed in to the method and updates internal cache
+
+## clearSelection()
+Empties the internal selection cache and updates the details panel accordingly
+
+
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SpriteLayer.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SpriteLayer.md
new file mode 100644
index 0000000..ddb4721
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SpriteLayer.md
@@ -0,0 +1,33 @@
+ONOS Web UI - Topo2SpriteLayer.js Documentation
+====================================
+
+This class is to be used by Topo2Background only and should not be called directly.
+
+#Internal methods
+## init
+Sets up internal references when the class is created
+
+## loadLayout
+Loads the layout definition from the json payload.
+Calls renderLayout when complete.
+Returns a promise for consistency with Topo2Map
+
+## createSpriteDefs
+Creates and adds the sprite definitions for the layout to the dom
+
+## getWidth
+Returns width of the configured sprite layout
+
+## getHeight
+Returns height of the configured sprite layout
+
+## renderSprite
+Renders a specific sprite to the dom using the sprite definitions
+and the configurations (width, height, fill, stroke , etc).
+
+## renderLayout
+Renders the SVG layout with the correct viewport dimentions
+specified in the configuration
+
+## renderGrid
+For Debugging purposes renders a background grid to the DOM
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SubRegion.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SubRegion.md
new file mode 100644
index 0000000..cff61d9
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SubRegion.md
@@ -0,0 +1,23 @@
+ONOS Web UI - Topo2SubRegion.js Documentation
+====================================
+
+## Properties
+```
+events: dblclick, click
+nodeType: 'sub-region'
+```
+
+## Internal Methods
+
+## onChange()
+Updates class names when the model's attributes change
+
+## showDetails()
+Called on a click events. Selects and shows the details panel for the sub-region
+
+## icon()
+Sets the icon to be used based on the attributes
+`this.type or default to 'm_cloud'`
+
+##navigateToRegion()
+Called on dblclick events. Calls the RegionNavigationService reveal the sub-region's nodes
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SummaryPanel.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SummaryPanel.md
new file mode 100644
index 0000000..26d756f
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2SummaryPanel.md
@@ -0,0 +1,16 @@
+ONOS Web UI - Topo2SummaryPanel.js Documentation
+====================================
+
+# Methods
+
+## init
+Creates the DOM objects and internal references
+
+## toggle
+Shows or hides the panel based on visibility
+
+## destroy
+Removes from DOM and clears Web Socket event listeners
+
+## isVisible()
+returns true or false
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Toolbar.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Toolbar.md
new file mode 100644
index 0000000..457c0de
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Toolbar.md
@@ -0,0 +1,28 @@
+ONOS Web UI - Topo2Toolbar.js Documentation
+====================================
+
+# Methods
+
+## init
+Creates the DOM nodes and builds the Toolbar
+
+
+#Internal
+
+## initKeyData
+Reads the KeyMap data and creates a reference to the callback for each command
+
+## getKey
+Finds the key in the KeyMap data
+
+## addButton
+Adds a button to the toolbar
+
+## addToggle
+Adds a toggle button to the toolbar
+
+## toggle
+Shows or hides the toolbar based on it's current visibility
+
+## destroy
+Removes from DOM and clears references
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2View.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2View.md
new file mode 100644
index 0000000..5692c06
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2View.md
@@ -0,0 +1,19 @@
+ONOS Web UI - Topo2View.js Documentation
+====================================
+
+API Subject to change soon.
+
+# Methods
+## newDim(_dimensions: [w,h])
+Updates the dimension property to `_dimensions`
+
+## getDimenstions()
+Returns current viewport dimensions
+
+## togglePortHighlights()
+To be refactored.
+Toggles the port highlight preference
+
+## getPortHighlighting
+To be refactored.
+Gets the current value for port highlighting (true/false)
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Zoom.md b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Zoom.md
new file mode 100644
index 0000000..25d970c
--- /dev/null
+++ b/web/gui/src/main/webapp/_doc/view/topo2/README.Topo2Zoom.md
@@ -0,0 +1,30 @@
+ONOS Web UI - Topo2Zoom.js Documentation
+====================================
+
+API Subject to change soon.
+
+# Methods
+## getZoomer
+returns the internal reference to the zoomer
+
+## createZoomer
+creates a new d3.zoom layer
+
+## addZoomEventListener(callback: function)
+Subscribes a callback to the zoom event
+
+## removeZoomEventListener(callback: function)
+Removes callback subscription
+
+## scale
+Returns the zoomer scale values
+
+## AdjustmentScale(min: int, max: int)
+A helper method to limit the visual size of an object.
+Cap on how small an object can become and also how large it can be.
+
+## panAndZoom(translate: array, scale: number, transition: int)
+Pans and zooms the zoom layer over a given (`transition`) time.
+If transition = 0 the pan and zoom is instant, else it is a time in milliseconds.
+
+