From 0bfff64220c55c2c88a5c5fedc7fe242c5487f31 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Sun, 9 Dec 2018 21:49:31 +0100
Subject: [PATCH 1/6] Updated UIdocumentation.md

---
 docs/source/UIDocumentation.md | 366 +++++++++++++++++++++++----------
 1 file changed, 257 insertions(+), 109 deletions(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index 3c6a4044f..68a48866a 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -1,160 +1,308 @@
-Frontend Design 
-=======
-### Architecture
-```app.js``` hosts the main app and calls ```content.js```, which loads up the main app. This file contains a few functions:
-### ```content.js```
+Frontend Design
+========
+## Architecture
+(All javascript files described here can be found in the /ide/static/js/ directory of Fabrik)
+
+#### ```addCommentModal.js```
 (The top most bullet contains the name of the method and the inner bullets are params.)
-* ```openModal```
-* ```closeModal```
-* ```addNewLayer``` - invoked by ```handleClick``` and passed in a JS object with layer information. 
+
+```addCommentModal.js``` is responsible for adding comments in the interface. It has three methods:
+* ```handleClick```
+* ```addComment``` - adds comment modal to RTC
+    * event
+* ```render``` - renders the comment modals
+
+***
+
+#### ```app.js```
+```app.js``` hosts the main app, but contains nothing else than a call for ```content.js```.
+***
+
+#### ```canvas.js```
+```content.js``` invokes an instance of ```canvas.js``` that contains the following methods and params:
+* ```allowDrop```
+  * event
+* ```clickLayerEvent``` - invoked on a click of a layer or on drag of that layer
+  * event
+  * layerId
+* ```hoverLayerEvent``` - invoked on a hover
+  * event
+  * layerId
+* ```scrollCanvas``` - scrolls canvas
+* ```clickCanvas``` - invoked on click
+  * event
+* ```updateLayerPosition``` - changes layers positon based on event
+  * event
+* ```mouseUpEvent``` - invoked when mouse key becomes up
+    * event
+    * layerId
+* ```connectionEvent``` - invoked on connection; checks for cycles and modifies layers
+  * connInfo
+  * originalEvent
+* ```detachConnectionEvent``` - modifies layers
+  * connInfo
+  * originalEvent
+* ```render``` - renders canvas
+* ```drop``` - invoked on layer drop onto canvas; checks for errors
+  * event
+
+```canvas.js``` also contains the code that decides whether a node's line needs to be rerouted if it is cutting through another node.
+
+#### ```canvas.js```'s placement algorithm
+The method it uses is the following:
+```checkIfCuttingLine``` is passed in a positional block that includes x and y coordinates (it assumes a px is at the end of each x and y) for each endpoint of the line it is checking.
+Specifically, it is checking if the line formed with the coordinates in the positional block will cut into any other nodes between them.
+
+```checkIfCuttingLine``` creates then creates an equation from the x and y points by calculating the slope and using point slope form.
+
+After this, it calls ```getBetween``` to get the nodes between the x and y coordinates of the created line.
+
+The ```getBetween``` also serves the purpose of returning which direction in which the majority of the blocks between are. This is purely for performance, otherwise it would be seperated into a seperate function.
+
+After ```getBetween``` returns with the id's of the nodes are between the x and y coordinate pair, check if cutting line loops through them to check whether or not the resultant line will cut through the in between node.
+
+If it does, it will return the direction the line needs to be shifted to the parent function, ```checkCutting```, to iterate once again 80 pixels to either the left or right (depending on the return.)
+
+*This algorithmic design creates the possibility of an infinite loop if the canvas has been completely occupied  and there is no more space remaining.*
+
+***
+
+#### ```commentSidebar.js```
+Is responsible for creating the comment sidebar. Consists of:
+* ```close``` - closes sidebar
+* ```addComment``` - adds comment
+* ```render``` - renders the sidebar
+
+***
+
+#### ```commentTooltip.js```
+Is responsible for creating the comment dialog box. Consists of:
+* ```handleClick```
+* ```addComment``` - adds comment to RTC
+* ```render``` - renders the comment box
+
+***
+
+#### ```content.js```
+```content.js``` is the most important file, as it loads the main app. Here are some important functions:
+* ```openModal``` - opens modals such as "Help" or "About Us"
+* ```closeModal``` - closes previously opened modals
+* ```infoModal``` - sets info about infoModal state, and then opens that modal
+* ```faqModal``` - sets info about faqModal state, and then opens that modal
+* ```zooModal``` - imports and opens zooModal
+* ```addNewLayer``` - invoked by ```handleClick``` and passed in a JS object with layer information - adds a layer
   * layer
+  * prevLayerId
 * ```changeSelectedLayer``` - changes which layer has the selected class on it, which outlines layer to emphasize a "selection"
   * layerId
 * ```changeHoveredLayer``` - changes which layer has the hover class on it, which outlines layer to emphasize a "hover"
   * layerId
-* ```modifyLayer``` - modifies layer, passed in layer is the new layer, and layer id is the id it needs to be replaced at. 
+* ```addHighlightOnLayer``` - highlights layer by ```layerId```
+    * net
+    * layerId
+    * nextLayerId
+* ```modifyLayer``` - modifies layer, passed in layer is the new layer, and layer id is the id it needs to be replaced at.
   * layer
   * layerId
-* ```modifyLayerParams``` - modify layer params based on layer and layerId, invoked by setParams
-  * layer
+* ```deleteLayer``` - deletes layers and removes inputs and outputs for it.
   * layerId
-* ```deleteLayer``` - deletes layers and removes inputs and outputs for it. 
-  * layerId
-* ```updateParameters``` - sums total amount of parameters and updates layer's parameters
+* ```getLayerParameters``` - sums total amount of parameters and updates layer's parameters
   * layer
   * net
-* ```calculateParameters``` - loops through net and invokes ```updateParameters```
+* ```calculateParameters``` - loops through net and invokes ```getLayerParameters```
   * net
+* ```adjustParameters``` - used to adjust layer parameters based on layer, change is passed in.
+  * layer
+  * para
+  * value
+* ```modifyLayerParams``` - modifies layer params based on layer and layerId, invoked by SetParams
+  * layer
+  * layerId
 * ```loadLayerShapes``` - AJAXs to backend to model parameters
 * ```exportNet``` - AJAXs to backend and then passes back error/success
-  * framework
+    * framework
+* ```exportPrep``` - invoked by ```exportNet```; prepares for model export
+  * callback
 * ```importNet``` - AJAXs to backend and then passes back error/success
   * framework
   * id
 * ```initialiseImportedNet``` - starts prepping layer to be displayed by Fabrik, positions layers
   * net
   * net_name
-* ```changeNetName``` - invoked on the event of net name changed
+* ```changeNetName``` - invoked on the event of net name changed; changes the name of the net
   * event
-* ```adjustParameters``` - used to adjust layer parameters based on layer, change is passed in. 
-  * layer
-  * para
-  * value
-* ```changeNetStatus``` - changes boolean for rebuilding. 
+* ```changeNetStatus``` - changes boolean for rebuilding.
   * bool
-* ```changeNetPhase```
+* ```changeNetPhase``` - changes the phase of the net
   * phase
-* ```dismissError```
+* ```dismissError``` - dissmisses the error by ```errorIndex```
   * errorIndex
-* ```addError```
+* ```addError``` - adds error using ```errorText```
   * errorText
-* ```dismissAllErrors```
-* ```copyTrain``` - copy's train net for test
+* ```dismissAllErrors``` - dismisses all errors
+* ```copyTrain``` - copies the nets train option for the test option
 * ```trainOnly```
-* ```saveDb```
-* ```loadDb```
+* ```saveDb``` - creates RTC hyperlink
+* ```loadDb``` - loads model for RTC by ```id```
   * id
-* ```infoModal``` - sets info into state, and then open's modal
-* ```toggleSidebar```
-* ```zooModal```
-* ```handleClick``` - handles a click based on an event handles connections and adding layers. 
-  * event
-### ```canvas.js```
-```content.js``` invokes an instance of ```canvas.js``` that contains the following methods and params:
-* ```allowDrop```
-  * event
-* ```clickLayerEvent``` - invoked on a click of a layer, invokes ```setParams.js```
-  * event
-  * layerId
-* ```hoverLayerEvent``` - invoked on a hover
-  * event
-  * layerId
-* ```scrollCanvas```
-* ```clickCanvas```
-  * event
-* ```updateLayerPosition``` - changes layers positon based on event
-  * event
-* ```connectionEvent``` - invoked on connection, checks for cycles and modifies layers.
-  * connInfo
-  * originalEvent
-* ```detachConnectionEvent``` - modifies layers
-  * connInfo
-  * originalEvent
-* ```drop```
+* ```performSharedUpdate``` - updates RTC shared model using sockets
+    * layerId
+    * param
+    * value
+    * isProp
+* ```performSharedAdd``` - adds shared layer in RTC
+    * layer
+    * prevLayerId
+    * nextLayerId
+    * layerId
+* ```performSharedDelete``` - deletes shared layer in RTC
+    * net
+    * layerId
+    * nextLayerId
+* ```addSharedComment``` - adds comment shared in RTC
+    * layerId
+    * comment
+* ```toggleSidebar``` - toggles the visibilty of the sidebar
+* ```handleClick``` - handles a click based on an event: handles connections and adding layers.
   * event
-```canvas.js``` also contains the code that decides whether a node's line needs to be rerouted if it is cutting through another node. 
-### ```canvas.js```'s placement algorithm
-The method it uses is the following:
-```checkIfCuttingLine``` is passed in a positional block that includes x and y coordinates (it assumes a px is at the end of each x and y) for each endpoint of the line it is checking. 
-Specifically, it is checking if the line formed with the coordinates in the positional block will cut into any other nodes between them.
+* ```render``` - renders webpage using previous functions
 
-```checkIfCuttingLine``` creates then creates an equation from the x and y points by calculating the slope and using point slope form. 
+***
 
-After this, it calls ```getBetween``` to get the nodes between the x and y coordinates of the created line. 
+#### ```data.js```
+```data.js``` contains various different variables filled with data used throughout the application, it stores the layers
 
-The ```getBetween``` also serves the purpose of returning which direction in which the majority of the blocks between are. This is purely for performance, otherwise it would be seperated into a seperate function. 
+***
+#### ```error.js```
+```error.js``` contains Error React Component with two methods:
+* ```dismissError```
+* ```render``` - renders the errors
+The error is passed in through props and then displayed to the user.
 
-After ```getBetween``` returns with the id's of the nodes are between the x and y coordinate pair, check if cutting line loops through them to check whether or not the resultant line will cut through the in between node.
+***
 
-If it does, it will return the direction the line needs to be shifted to the parent function, ```checkIfCuttingNet```, to iterate once again 80 pixels to either the left or right (depending on the return.) 
+#### ```field.js```
+```field.js``` contains the various different fields used by the layer editor.
+* ```change``` - used to change the state of checkboxes; it is passed in event e.
+    * e
+* ```render``` - renders the fields
 
-*This algorithmic design creates the possibility of an infinite loop if the canvas has been completely occupied  and there is no more space remaining.*
+***
 
-### ```topbar.js```
-```topbar.js``` has no methods. It is invoked by ```content.js``` to show the top section of the sidebar. 
-### ```panZoom.js```
-```panZoom.js``` includes the functions that zoom the canvas in and out, based on various invocations.  
-### ```pane.js```
-```pane.js``` contains one method:
-* toggleClass
-```pane.js``` invokes ```paneElement.js``` to render out each element. 
-```toggleClass``` toggles classes for the dropdown on the sidebar for layer selection. 
-### ```paneElement.js``` 
-```paneElement.js``` renders out each element of the pane, it is invoked by ```pane.js```
-```pane.js``` renders out all of the layers for selection by the user.
-### ```tabs.js```
-```tabs.js``` contains no methods and is used to switch between Train and Test layers. 
-### ```layer.js```
-```layer.js``` contains no methods. It is invoked by the ```canvas.js``` and it displays the actual layering on the jsplumb container. The position of each layer is set in the state of the layer. 
-### ```jsplumb.js```
-The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of the layers. A new custom connector is created. There is an if function to check whether the node it is connecting is needing to be routed through an extension. A global variable stores this information, and the actual calculation is handled in ```checkIfCuttingNet``` and ```checkIfCuttingLine```. The global variable contains the amount of pixels it needs to move over, and it will contain direction it needs to go in (based on whether it is positive or 
+#### ```filterBar.js```
+Filters layers based on framework. It uses two methods:
+* ```changeEvent``` - filters the layers
+    * cbid
+* ```render``` - renders the filterbar on the sidebar
+
+***
+
+#### ```importTextbox.js```
+Renders the textbox for model import from text, using the three frameworks: Caffe, Keras and Tensorflow.
+
+***
+
+#### ```jsplumb.js```
+The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of the layers. A new custom connector is created. There is an if function to check whether the node it is connecting is needing to be routed through an extension. A global variable stores this information, and the actual calculation is handled in ```checkIfCuttingNet``` and ```checkIfCuttingLine```. The global variable contains the amount of pixels it needs to move over, and it will contain direction it needs to go in (based on whether it is positive or
 negative.)
 
 Please refer to the jsplumb documentation here to learn more about this API set. https://jsplumbtoolkit.com/docs.html
-### ```data.js```
-```data.js``` contains various different variables filled with data used throughout the application.
-### ```error.js```
-```error.js``` contains Error React Component with one method:
-* dismissError
-The error is passed in through props and then displayed to the user.
-### ```field.js```
-```field.js``` contains the various different fields used by the layer editor.
-* ```change```
-    * e
 
-The method change is used to change the state of checkboxes, and it is passed in event e. 
-### ```modelElement.js``` 
+***
+
+#### ```layer.js```
+```layer.js``` is invoked by ```canvas.js``` and it displays the actual layering on the jsplumb container. The position of each layer is set in the state of the layer. Its methods are:
+* ```componentDidMount``` - adds layer endpoints
+* ```componentWillUnmount``` - deletes layer endpoints
+* ```onCloseCommentModal``` - closes comment modal
+    * event
+* ```onAddComment``` - opens comment tooltip
+* ```doSharedUpdate``` - shares comment in RTC
+    * comment
+* ```openCommentSidebar``` - opens comment sidebar
+
+***
+
+#### ```login.js```
+```login.js``` is responsible for the login dialog in Fabrik. First it uses ajax to process it and later renders the login dialog.
+
+***
+
+#### ```modelElement.js```
 ```modelElement.js``` contains the component that renders out each model in the model zoo. It includes logic that onClick will trigger an importNet, as defined in ```content.js```.
-### ```modelZoo.js```
-```modelZoo.js``` contains the rendering of the modelZoo, it invokes modelElement to render the actual listing of the model.
-### ```netLayout_vertical.js``` and ```netLayout.js```
+***
+#### ```modelZoo.js```
+```modelZoo.js``` contains the rendering of the modelZoo, it invokes modelElement to render the actual listing of the model. Methods:
+* ```mouseClick``` - invoked on mouse click; toggles model categories
+    * event
+    * id
+* ```componentDidMount``` - mounts the model search code
+* ```render``` - renders the modelZoo
+
+***
+
+#### ```netLayout_vertical.js``` and ```netLayout.js```
 Both of these files contain code that determines positioning and layout of net. It is invoked by ```content.js```
-### ```setParams.js```
+
+#### ```netLayout_vertical.js```
+Defines the vertical align of network elements. ```netLayout_vertical.js``` uses a function, called ```allocatePosition``` to give the layers their position on the canvas. It finds the closest position available to the preferred position, and checks if a node is already on that position on the X axis (if one is, a position left or right is assigned). The file also uses a custom Topolical Sort to give the nodes there position (it is based on the inputs and outputs of nodes). Later it is checked if any nodes averlap and in case they do, they are moved.
+
+#### ```netLayout.js```
+```netLayout.js``` is used to check the Y attribute of nodes. The function ```allocatePosition``` finds the closest available to the preffered ones and allocates the modules. Later the nodes are checked with a DFS algorithm.
+
+***
+
+#### ```pane.js```
+```pane.js``` handles the layer panel and contains these methods:
+* ```toggleClass``` - toggles classes for the dropdown on the sidebar for layer selection
+* ```componentDidMount``` - handles element with layers: search for layers, shown elements, etc.
+* ```render``` - renders layer panel
+
+```pane.js``` invokes ```paneElement.js``` to render out each element.
+
+***
+
+#### ```paneElement.js```
+```paneElement.js``` renders out each element of the pane, it is invoked by ```pane.js```. It includes:
+* ```drag``` - allows dragging of layers
+* ```render``` - renders specific elements
+
+```pane.js``` renders out all of the layers for selection by the user.
+***
+#### ```panZoom.js```
+```panZoom.js``` includes the functions that zoom the canvas in and out, based on various invocations.
+
+***
+
+#### ```setParams.js```
 Contains the following methods:
-* ```changeProps```
+* ```changeProps``` - changes layer properties
     * prop
     * value
-* ```changeParams```
+* ```changeParams``` - changes layer parameters
     * para
     * value
 * ```close```
-* ```trainOnly```
+* ```trainOnly``` - turns model into a train-only
     * e
-    
-### ```setParams.js``` 
-allows users to change layer parameters and reads paramters through ```data.js```
-### ```tooltip.js``` and ```tooltipData.js```
+* ```handleKeyPress``` - handles layer delete after the 'delete' key is pressed
+* ```componentDidMount``` - invokes ```handleKeyPress```
+* ```componentWillUnmount``` - invokes ```handleKeyPress```
+* ```render``` - renders layer options sidebar
+
+```setParams.js``` allows users to change layer parameters and reads paramters through ```data.js```
+
+***
+#### ```tabs.js```
+```tabs.js``` is used to switch between Train and Test layers and renders those buttons.
+***
+#### ```tooltip.js``` and ```tooltipData.js```
 Both of these files contains code for tooltips and the ```tooltipData.js``` contains the actual tooltips that are rendered.
 
 note: tooltips are "hover" messages, they tell more information about something when a user hovers over an object.
- 
+***
+
+#### ```topbar.js```
+```topbar.js```  shows the top section of the sidebar. It has two methods:
+* ```chceckURL``` - checks model import URL
+* ```render``` - renders the top section of the sidebar

From f05fb9c80c78499a0a2bb6e68f3c539cd4ebb120 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Mon, 10 Dec 2018 14:41:56 +0100
Subject: [PATCH 2/6] Update UIDocumentation.md

---
 docs/source/UIDocumentation.md | 110 ++++++---------------------------
 1 file changed, 20 insertions(+), 90 deletions(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index 68a48866a..acc4b629e 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -4,12 +4,11 @@ Frontend Design
 (All javascript files described here can be found in the /ide/static/js/ directory of Fabrik)
 
 #### ```addCommentModal.js```
-(The top most bullet contains the name of the method and the inner bullets are params.)
+(The bullets contain methods specific to the file along with their explanations.)
 
-```addCommentModal.js``` is responsible for adding comments in the interface. It has three methods:
+```addCommentModal.js``` is responsible for adding comments into the interface. It has three methods:
 * ```handleClick```
 * ```addComment``` - adds comment modal to RTC
-    * event
 * ```render``` - renders the comment modals
 
 ***
@@ -19,49 +18,36 @@ Frontend Design
 ***
 
 #### ```canvas.js```
-```content.js``` invokes an instance of ```canvas.js``` that contains the following methods and params:
+```content.js``` invokes an instance of ```canvas.js``` that contains the following methods:
 * ```allowDrop```
-  * event
 * ```clickLayerEvent``` - invoked on a click of a layer or on drag of that layer
-  * event
-  * layerId
 * ```hoverLayerEvent``` - invoked on a hover
-  * event
-  * layerId
 * ```scrollCanvas``` - scrolls canvas
 * ```clickCanvas``` - invoked on click
-  * event
-* ```updateLayerPosition``` - changes layers positon based on event
-  * event
-* ```mouseUpEvent``` - invoked when mouse key becomes up
-    * event
-    * layerId
+* ```updateLayerPosition``` - changes layer positon based on event
+* ```mouseUpEvent``` - invoked when mouse key is up
 * ```connectionEvent``` - invoked on connection; checks for cycles and modifies layers
-  * connInfo
-  * originalEvent
 * ```detachConnectionEvent``` - modifies layers
-  * connInfo
-  * originalEvent
 * ```render``` - renders canvas
 * ```drop``` - invoked on layer drop onto canvas; checks for errors
-  * event
 
 ```canvas.js``` also contains the code that decides whether a node's line needs to be rerouted if it is cutting through another node.
 
 #### ```canvas.js```'s placement algorithm
-The method it uses is the following:
+The methods ```canvas.js``` uses for placement are:
+
 ```checkIfCuttingLine``` is passed in a positional block that includes x and y coordinates (it assumes a px is at the end of each x and y) for each endpoint of the line it is checking.
 Specifically, it is checking if the line formed with the coordinates in the positional block will cut into any other nodes between them.
 
-```checkIfCuttingLine``` creates then creates an equation from the x and y points by calculating the slope and using point slope form.
+```checkIfCuttingLine``` creates an equation from the x and y points by calculating the slope and using point slope form.
 
 After this, it calls ```getBetween``` to get the nodes between the x and y coordinates of the created line.
 
-The ```getBetween``` also serves the purpose of returning which direction in which the majority of the blocks between are. This is purely for performance, otherwise it would be seperated into a seperate function.
+The ```getBetween``` also serves the purpose of returning which direction the majority of the blocks between are. This implementation is purely for performance, otherwise it would be seperated into a seperate function.
 
-After ```getBetween``` returns with the id's of the nodes are between the x and y coordinate pair, check if cutting line loops through them to check whether or not the resultant line will cut through the in between node.
+After ```getBetween``` returns the IDs of the nodes between the x and y coordinate pair, it is checked if the cutting line loops through them (to see whether or not the resulting line will cut through the in between node).
 
-If it does, it will return the direction the line needs to be shifted to the parent function, ```checkCutting```, to iterate once again 80 pixels to either the left or right (depending on the return.)
+If it does cut through, ```getBetween``` will return the direction the line needs to be shifted to the parent function, ```checkCutting```, to iterate once again 80 pixels to either the left or right (depending on the return.)
 
 *This algorithmic design creates the possibility of an infinite loop if the canvas has been completely occupied  and there is no more space remaining.*
 
@@ -77,94 +63,50 @@ Is responsible for creating the comment sidebar. Consists of:
 
 #### ```commentTooltip.js```
 Is responsible for creating the comment dialog box. Consists of:
-* ```handleClick```
+* ```handleClick``` - handles user click event
 * ```addComment``` - adds comment to RTC
 * ```render``` - renders the comment box
 
 ***
 
 #### ```content.js```
-```content.js``` is the most important file, as it loads the main app. Here are some important functions:
-* ```openModal``` - opens modals such as "Help" or "About Us"
+```content.js``` is the most important file, as it loads the main app. Here are some of its important methods:
+* ```openModal``` - opens modals (such as "Help" or "About Us")
 * ```closeModal``` - closes previously opened modals
 * ```infoModal``` - sets info about infoModal state, and then opens that modal
 * ```faqModal``` - sets info about faqModal state, and then opens that modal
 * ```zooModal``` - imports and opens zooModal
 * ```addNewLayer``` - invoked by ```handleClick``` and passed in a JS object with layer information - adds a layer
-  * layer
-  * prevLayerId
 * ```changeSelectedLayer``` - changes which layer has the selected class on it, which outlines layer to emphasize a "selection"
-  * layerId
 * ```changeHoveredLayer``` - changes which layer has the hover class on it, which outlines layer to emphasize a "hover"
-  * layerId
 * ```addHighlightOnLayer``` - highlights layer by ```layerId```
-    * net
-    * layerId
-    * nextLayerId
 * ```modifyLayer``` - modifies layer, passed in layer is the new layer, and layer id is the id it needs to be replaced at.
-  * layer
-  * layerId
 * ```deleteLayer``` - deletes layers and removes inputs and outputs for it.
-  * layerId
 * ```getLayerParameters``` - sums total amount of parameters and updates layer's parameters
-  * layer
-  * net
 * ```calculateParameters``` - loops through net and invokes ```getLayerParameters```
-  * net
 * ```adjustParameters``` - used to adjust layer parameters based on layer, change is passed in.
-  * layer
-  * para
-  * value
 * ```modifyLayerParams``` - modifies layer params based on layer and layerId, invoked by SetParams
-  * layer
-  * layerId
 * ```loadLayerShapes``` - AJAXs to backend to model parameters
 * ```exportNet``` - AJAXs to backend and then passes back error/success
-    * framework
 * ```exportPrep``` - invoked by ```exportNet```; prepares for model export
-  * callback
 * ```importNet``` - AJAXs to backend and then passes back error/success
-  * framework
-  * id
 * ```initialiseImportedNet``` - starts prepping layer to be displayed by Fabrik, positions layers
-  * net
-  * net_name
 * ```changeNetName``` - invoked on the event of net name changed; changes the name of the net
-  * event
 * ```changeNetStatus``` - changes boolean for rebuilding.
-  * bool
 * ```changeNetPhase``` - changes the phase of the net
-  * phase
 * ```dismissError``` - dissmisses the error by ```errorIndex```
-  * errorIndex
 * ```addError``` - adds error using ```errorText```
-  * errorText
 * ```dismissAllErrors``` - dismisses all errors
 * ```copyTrain``` - copies the nets train option for the test option
 * ```trainOnly```
 * ```saveDb``` - creates RTC hyperlink
 * ```loadDb``` - loads model for RTC by ```id```
-  * id
 * ```performSharedUpdate``` - updates RTC shared model using sockets
-    * layerId
-    * param
-    * value
-    * isProp
 * ```performSharedAdd``` - adds shared layer in RTC
-    * layer
-    * prevLayerId
-    * nextLayerId
-    * layerId
 * ```performSharedDelete``` - deletes shared layer in RTC
-    * net
-    * layerId
-    * nextLayerId
 * ```addSharedComment``` - adds comment shared in RTC
-    * layerId
-    * comment
 * ```toggleSidebar``` - toggles the visibilty of the sidebar
 * ```handleClick``` - handles a click based on an event: handles connections and adding layers.
-  * event
 * ```render``` - renders webpage using previous functions
 
 ***
@@ -184,15 +126,13 @@ The error is passed in through props and then displayed to the user.
 #### ```field.js```
 ```field.js``` contains the various different fields used by the layer editor.
 * ```change``` - used to change the state of checkboxes; it is passed in event e.
-    * e
 * ```render``` - renders the fields
 
 ***
 
 #### ```filterBar.js```
-Filters layers based on framework. It uses two methods:
+This file filters layers based on framework. It uses two methods:
 * ```changeEvent``` - filters the layers
-    * cbid
 * ```render``` - renders the filterbar on the sidebar
 
 ***
@@ -203,8 +143,7 @@ Renders the textbox for model import from text, using the three frameworks: Caff
 ***
 
 #### ```jsplumb.js```
-The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of the layers. A new custom connector is created. There is an if function to check whether the node it is connecting is needing to be routed through an extension. A global variable stores this information, and the actual calculation is handled in ```checkIfCuttingNet``` and ```checkIfCuttingLine```. The global variable contains the amount of pixels it needs to move over, and it will contain direction it needs to go in (based on whether it is positive or
-negative.)
+The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of layers. A new custom connector is created. There is an ```if``` function to check whether the node it is connecting to is needs to be routed through an extension. A global variable stores this information, and the actual calculation is handled in ```checkIfCuttingNet``` and ```checkIfCuttingLine```. The global variable contains the amount of pixels it needs to move over, and it will contain direction it needs to go in (based on whether it is positive or negative.)
 
 Please refer to the jsplumb documentation here to learn more about this API set. https://jsplumbtoolkit.com/docs.html
 
@@ -215,16 +154,14 @@ Please refer to the jsplumb documentation here to learn more about this API set.
 * ```componentDidMount``` - adds layer endpoints
 * ```componentWillUnmount``` - deletes layer endpoints
 * ```onCloseCommentModal``` - closes comment modal
-    * event
 * ```onAddComment``` - opens comment tooltip
 * ```doSharedUpdate``` - shares comment in RTC
-    * comment
 * ```openCommentSidebar``` - opens comment sidebar
 
 ***
 
 #### ```login.js```
-```login.js``` is responsible for the login dialog in Fabrik. First it uses ajax to process it and later renders the login dialog.
+```login.js``` is responsible for the login dialog in Fabrik. First it uses AJAX to process it and later renders the login dialog.
 
 ***
 
@@ -234,8 +171,6 @@ Please refer to the jsplumb documentation here to learn more about this API set.
 #### ```modelZoo.js```
 ```modelZoo.js``` contains the rendering of the modelZoo, it invokes modelElement to render the actual listing of the model. Methods:
 * ```mouseClick``` - invoked on mouse click; toggles model categories
-    * event
-    * id
 * ```componentDidMount``` - mounts the model search code
 * ```render``` - renders the modelZoo
 
@@ -248,7 +183,7 @@ Both of these files contain code that determines positioning and layout of net.
 Defines the vertical align of network elements. ```netLayout_vertical.js``` uses a function, called ```allocatePosition``` to give the layers their position on the canvas. It finds the closest position available to the preferred position, and checks if a node is already on that position on the X axis (if one is, a position left or right is assigned). The file also uses a custom Topolical Sort to give the nodes there position (it is based on the inputs and outputs of nodes). Later it is checked if any nodes averlap and in case they do, they are moved.
 
 #### ```netLayout.js```
-```netLayout.js``` is used to check the Y attribute of nodes. The function ```allocatePosition``` finds the closest available to the preffered ones and allocates the modules. Later the nodes are checked with a DFS algorithm.
+```netLayout.js``` is used to check the Y attribute of nodes. The function ```allocatePosition``` finds the closest available position to the preffered one and allocates the module. Later the nodes are checked with a DFS algorithm (depth-first search algorithm).
 
 ***
 
@@ -277,24 +212,19 @@ Defines the vertical align of network elements. ```netLayout_vertical.js``` uses
 #### ```setParams.js```
 Contains the following methods:
 * ```changeProps``` - changes layer properties
-    * prop
-    * value
 * ```changeParams``` - changes layer parameters
-    * para
-    * value
 * ```close```
 * ```trainOnly``` - turns model into a train-only
-    * e
 * ```handleKeyPress``` - handles layer delete after the 'delete' key is pressed
 * ```componentDidMount``` - invokes ```handleKeyPress```
 * ```componentWillUnmount``` - invokes ```handleKeyPress```
 * ```render``` - renders layer options sidebar
 
-```setParams.js``` allows users to change layer parameters and reads paramters through ```data.js```
+```setParams.js``` allows users to change layer parameters and reads parameters through ```data.js```
 
 ***
 #### ```tabs.js```
-```tabs.js``` is used to switch between Train and Test layers and renders those buttons.
+```tabs.js``` is used to switch between the Train and Test model buttons and to render.
 ***
 #### ```tooltip.js``` and ```tooltipData.js```
 Both of these files contains code for tooltips and the ```tooltipData.js``` contains the actual tooltips that are rendered.

From d1627a71d9d04c3a5aed4647e33536d15aade973 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Mon, 10 Dec 2018 15:33:14 +0100
Subject: [PATCH 3/6] Update UIDocumentation.md

---
 docs/source/UIDocumentation.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index acc4b629e..2d6654fe9 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -7,7 +7,7 @@ Frontend Design
 (The bullets contain methods specific to the file along with their explanations.)
 
 ```addCommentModal.js``` is responsible for adding comments into the interface. It has three methods:
-* ```handleClick```
+* ```handleClick``` - invoked on click on modal
 * ```addComment``` - adds comment modal to RTC
 * ```render``` - renders the comment modals
 
@@ -19,7 +19,7 @@ Frontend Design
 
 #### ```canvas.js```
 ```content.js``` invokes an instance of ```canvas.js``` that contains the following methods:
-* ```allowDrop```
+* ```allowDrop``` - allows element to be dropped down
 * ```clickLayerEvent``` - invoked on a click of a layer or on drag of that layer
 * ```hoverLayerEvent``` - invoked on a hover
 * ```scrollCanvas``` - scrolls canvas
@@ -98,7 +98,7 @@ Is responsible for creating the comment dialog box. Consists of:
 * ```addError``` - adds error using ```errorText```
 * ```dismissAllErrors``` - dismisses all errors
 * ```copyTrain``` - copies the nets train option for the test option
-* ```trainOnly```
+* ```trainOnly``` - mehod responsible for Train-only models
 * ```saveDb``` - creates RTC hyperlink
 * ```loadDb``` - loads model for RTC by ```id```
 * ```performSharedUpdate``` - updates RTC shared model using sockets
@@ -117,7 +117,7 @@ Is responsible for creating the comment dialog box. Consists of:
 ***
 #### ```error.js```
 ```error.js``` contains Error React Component with two methods:
-* ```dismissError```
+* ```dismissError``` - dismisses opened error
 * ```render``` - renders the errors
 The error is passed in through props and then displayed to the user.
 
@@ -210,10 +210,10 @@ Defines the vertical align of network elements. ```netLayout_vertical.js``` uses
 ***
 
 #### ```setParams.js```
-Contains the following methods:
+Contains the following methods for the layer edition sidebar:
 * ```changeProps``` - changes layer properties
 * ```changeParams``` - changes layer parameters
-* ```close```
+* ```close``` - closes sidebar
 * ```trainOnly``` - turns model into a train-only
 * ```handleKeyPress``` - handles layer delete after the 'delete' key is pressed
 * ```componentDidMount``` - invokes ```handleKeyPress```

From b6b1ca8741c944016433ca09196134f10b732b37 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Mon, 10 Dec 2018 20:31:52 +0100
Subject: [PATCH 4/6] Update UIDocumentation.md

---
 docs/source/UIDocumentation.md | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index 2d6654fe9..7136e11cc 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -33,11 +33,10 @@ Frontend Design
 
 ```canvas.js``` also contains the code that decides whether a node's line needs to be rerouted if it is cutting through another node.
 
-#### ```canvas.js```'s placement algorithm
-The methods ```canvas.js``` uses for placement are:
-
-```checkIfCuttingLine``` is passed in a positional block that includes x and y coordinates (it assumes a px is at the end of each x and y) for each endpoint of the line it is checking.
-Specifically, it is checking if the line formed with the coordinates in the positional block will cut into any other nodes between them.
+#### ```canvas.js```'s visualisation algorithm
+The method it uses is the following:
+```checkIfCuttingLine``` takes in 2 variables: net and pos, where net has an array of all the nodes, and pos is an array of x and y coordinates checked by this method to see whether a line will cut through.
+To put it more specifically, ```checkIfCuttingLine``` checks if the line formed with the coordinates in the positional block will cut through any other nodes between them.
 
 ```checkIfCuttingLine``` creates an equation from the x and y points by calculating the slope and using point slope form.
 
@@ -88,15 +87,13 @@ Is responsible for creating the comment dialog box. Consists of:
 * ```modifyLayerParams``` - modifies layer params based on layer and layerId, invoked by SetParams
 * ```loadLayerShapes``` - AJAXs to backend to model parameters
 * ```exportNet``` - AJAXs to backend and then passes back error/success
-* ```exportPrep``` - invoked by ```exportNet```; prepares for model export
+* ```exportPrep``` - invoked by ```exportNet```; preprocessed model object for export
 * ```importNet``` - AJAXs to backend and then passes back error/success
 * ```initialiseImportedNet``` - starts prepping layer to be displayed by Fabrik, positions layers
-* ```changeNetName``` - invoked on the event of net name changed; changes the name of the net
-* ```changeNetStatus``` - changes boolean for rebuilding.
-* ```changeNetPhase``` - changes the phase of the net
-* ```dismissError``` - dissmisses the error by ```errorIndex```
-* ```addError``` - adds error using ```errorText```
-* ```dismissAllErrors``` - dismisses all errors
+* ```changeNetName``` - invoked after user starts typing in name box (placed above the model in the UI); changes the name of the net
+* ```changeNetStatus``` - takes in a boolean and changes its value (the boolean is responsible for the ```rebuildNet``` element)
+* ```changeNetPhase``` - changes the phase of the net (Train/Test)
+* ```copyTrain``` - copies the nets train phase for the test phase
 * ```copyTrain``` - copies the nets train option for the test option
 * ```trainOnly``` - mehod responsible for Train-only models
 * ```saveDb``` - creates RTC hyperlink
@@ -124,7 +121,7 @@ The error is passed in through props and then displayed to the user.
 ***
 
 #### ```field.js```
-```field.js``` contains the various different fields used by the layer editor.
+```field.js``` contains the various fields used by the layer editor.
 * ```change``` - used to change the state of checkboxes; it is passed in event e.
 * ```render``` - renders the fields
 
@@ -138,14 +135,14 @@ This file filters layers based on framework. It uses two methods:
 ***
 
 #### ```importTextbox.js```
-Renders the textbox for model import from text, using the three frameworks: Caffe, Keras and Tensorflow.
+Renders the 'Load Model From Text Input' textbox (available in the top of the main sidebar).
 
 ***
 
 #### ```jsplumb.js```
-The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of layers. A new custom connector is created. There is an ```if``` function to check whether the node it is connecting to is needs to be routed through an extension. A global variable stores this information, and the actual calculation is handled in ```checkIfCuttingNet``` and ```checkIfCuttingLine```. The global variable contains the amount of pixels it needs to move over, and it will contain direction it needs to go in (based on whether it is positive or negative.)
+The ```jsplumb.js``` file contains code that handles the arrangement and the dragging/connecting of layers. The file hosts a function, which created the arrow connector(```ArrowConnector```). Later, there is a function (```this._compute```), which draws the elements. It is responsible for creating the connectors and simultaneously checks if there isn't any cutting and if extending the connector isn't neccessary. It then creates the connectors segments and styles it appropriately. Then, in ```instance.addLayerEndpoints``` the anchors of the connector are defined.
 
-Please refer to the jsplumb documentation here to learn more about this API set. https://jsplumbtoolkit.com/docs.html
+Please refer to the jsplumb documentation here to learn more about this API set: https://jsplumbtoolkit.com/docs.html
 
 ***
 
@@ -180,7 +177,7 @@ Please refer to the jsplumb documentation here to learn more about this API set.
 Both of these files contain code that determines positioning and layout of net. It is invoked by ```content.js```
 
 #### ```netLayout_vertical.js```
-Defines the vertical align of network elements. ```netLayout_vertical.js``` uses a function, called ```allocatePosition``` to give the layers their position on the canvas. It finds the closest position available to the preferred position, and checks if a node is already on that position on the X axis (if one is, a position left or right is assigned). The file also uses a custom Topolical Sort to give the nodes there position (it is based on the inputs and outputs of nodes). Later it is checked if any nodes averlap and in case they do, they are moved.
+Defines the vertical alignment of network elements. ```netLayout_vertical.js``` uses a function, called ```allocatePosition``` to give the layers their position on the canvas. It finds the closest position available to the preferred position, and checks if a node is already on that position on the X axis (if one is, a position left or right is assigned). The file also uses a custom Topolical Sort to give the nodes their position (it is based on the inputs and outputs of nodes). Later it is checked if any nodes overlap and in case they do, they are moved.
 
 #### ```netLayout.js```
 ```netLayout.js``` is used to check the Y attribute of nodes. The function ```allocatePosition``` finds the closest available position to the preffered one and allocates the module. Later the nodes are checked with a DFS algorithm (depth-first search algorithm).

From 928a3e4d78dbf3de875e9c333c3ecc94497ae6a9 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Mon, 10 Dec 2018 20:32:09 +0100
Subject: [PATCH 5/6] Update UIDocumentation.md

---
 docs/source/UIDocumentation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index 7136e11cc..73dad5833 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -231,5 +231,5 @@ note: tooltips are "hover" messages, they tell more information about something
 
 #### ```topbar.js```
 ```topbar.js```  shows the top section of the sidebar. It has two methods:
-* ```chceckURL``` - checks model import URL
+* ```checkURL``` - checks model import URL
 * ```render``` - renders the top section of the sidebar

From 11efcfac474eefe2ffdee76bd536ea0a34570045 Mon Sep 17 00:00:00 2001
From: KKnet <37086109+kayo11@users.noreply.github.com>
Date: Tue, 11 Dec 2018 16:32:53 +0100
Subject: [PATCH 6/6] Update UIDocumentation.md

---
 docs/source/UIDocumentation.md | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/docs/source/UIDocumentation.md b/docs/source/UIDocumentation.md
index 73dad5833..8ee4a91a4 100644
--- a/docs/source/UIDocumentation.md
+++ b/docs/source/UIDocumentation.md
@@ -6,10 +6,9 @@ Frontend Design
 #### ```addCommentModal.js```
 (The bullets contain methods specific to the file along with their explanations.)
 
-```addCommentModal.js``` is responsible for adding comments into the interface. It has three methods:
+```addCommentModal.js``` is responsible for adding comments into the interface. It has the following methods:
 * ```handleClick``` - invoked on click on modal
 * ```addComment``` - adds comment modal to RTC
-* ```render``` - renders the comment modals
 
 ***
 
@@ -19,7 +18,6 @@ Frontend Design
 
 #### ```canvas.js```
 ```content.js``` invokes an instance of ```canvas.js``` that contains the following methods:
-* ```allowDrop``` - allows element to be dropped down
 * ```clickLayerEvent``` - invoked on a click of a layer or on drag of that layer
 * ```hoverLayerEvent``` - invoked on a hover
 * ```scrollCanvas``` - scrolls canvas
@@ -28,7 +26,6 @@ Frontend Design
 * ```mouseUpEvent``` - invoked when mouse key is up
 * ```connectionEvent``` - invoked on connection; checks for cycles and modifies layers
 * ```detachConnectionEvent``` - modifies layers
-* ```render``` - renders canvas
 * ```drop``` - invoked on layer drop onto canvas; checks for errors
 
 ```canvas.js``` also contains the code that decides whether a node's line needs to be rerouted if it is cutting through another node.
@@ -56,7 +53,6 @@ If it does cut through, ```getBetween``` will return the direction the line need
 Is responsible for creating the comment sidebar. Consists of:
 * ```close``` - closes sidebar
 * ```addComment``` - adds comment
-* ```render``` - renders the sidebar
 
 ***
 
@@ -64,7 +60,6 @@ Is responsible for creating the comment sidebar. Consists of:
 Is responsible for creating the comment dialog box. Consists of:
 * ```handleClick``` - handles user click event
 * ```addComment``` - adds comment to RTC
-* ```render``` - renders the comment box
 
 ***
 
@@ -104,7 +99,6 @@ Is responsible for creating the comment dialog box. Consists of:
 * ```addSharedComment``` - adds comment shared in RTC
 * ```toggleSidebar``` - toggles the visibilty of the sidebar
 * ```handleClick``` - handles a click based on an event: handles connections and adding layers.
-* ```render``` - renders webpage using previous functions
 
 ***
 
@@ -115,7 +109,6 @@ Is responsible for creating the comment dialog box. Consists of:
 #### ```error.js```
 ```error.js``` contains Error React Component with two methods:
 * ```dismissError``` - dismisses opened error
-* ```render``` - renders the errors
 The error is passed in through props and then displayed to the user.
 
 ***
@@ -123,14 +116,12 @@ The error is passed in through props and then displayed to the user.
 #### ```field.js```
 ```field.js``` contains the various fields used by the layer editor.
 * ```change``` - used to change the state of checkboxes; it is passed in event e.
-* ```render``` - renders the fields
 
 ***
 
 #### ```filterBar.js```
 This file filters layers based on framework. It uses two methods:
 * ```changeEvent``` - filters the layers
-* ```render``` - renders the filterbar on the sidebar
 
 ***
 
@@ -148,12 +139,9 @@ Please refer to the jsplumb documentation here to learn more about this API set:
 
 #### ```layer.js```
 ```layer.js``` is invoked by ```canvas.js``` and it displays the actual layering on the jsplumb container. The position of each layer is set in the state of the layer. Its methods are:
-* ```componentDidMount``` - adds layer endpoints
-* ```componentWillUnmount``` - deletes layer endpoints
 * ```onCloseCommentModal``` - closes comment modal
 * ```onAddComment``` - opens comment tooltip
 * ```doSharedUpdate``` - shares comment in RTC
-* ```openCommentSidebar``` - opens comment sidebar
 
 ***
 
@@ -167,9 +155,6 @@ Please refer to the jsplumb documentation here to learn more about this API set:
 ***
 #### ```modelZoo.js```
 ```modelZoo.js``` contains the rendering of the modelZoo, it invokes modelElement to render the actual listing of the model. Methods:
-* ```mouseClick``` - invoked on mouse click; toggles model categories
-* ```componentDidMount``` - mounts the model search code
-* ```render``` - renders the modelZoo
 
 ***
 
@@ -187,8 +172,6 @@ Defines the vertical alignment of network elements. ```netLayout_vertical.js```
 #### ```pane.js```
 ```pane.js``` handles the layer panel and contains these methods:
 * ```toggleClass``` - toggles classes for the dropdown on the sidebar for layer selection
-* ```componentDidMount``` - handles element with layers: search for layers, shown elements, etc.
-* ```render``` - renders layer panel
 
 ```pane.js``` invokes ```paneElement.js``` to render out each element.
 
@@ -197,7 +180,6 @@ Defines the vertical alignment of network elements. ```netLayout_vertical.js```
 #### ```paneElement.js```
 ```paneElement.js``` renders out each element of the pane, it is invoked by ```pane.js```. It includes:
 * ```drag``` - allows dragging of layers
-* ```render``` - renders specific elements
 
 ```pane.js``` renders out all of the layers for selection by the user.
 ***
@@ -210,12 +192,8 @@ Defines the vertical alignment of network elements. ```netLayout_vertical.js```
 Contains the following methods for the layer edition sidebar:
 * ```changeProps``` - changes layer properties
 * ```changeParams``` - changes layer parameters
-* ```close``` - closes sidebar
 * ```trainOnly``` - turns model into a train-only
 * ```handleKeyPress``` - handles layer delete after the 'delete' key is pressed
-* ```componentDidMount``` - invokes ```handleKeyPress```
-* ```componentWillUnmount``` - invokes ```handleKeyPress```
-* ```render``` - renders layer options sidebar
 
 ```setParams.js``` allows users to change layer parameters and reads parameters through ```data.js```
 
@@ -232,4 +210,3 @@ note: tooltips are "hover" messages, they tell more information about something
 #### ```topbar.js```
 ```topbar.js```  shows the top section of the sidebar. It has two methods:
 * ```checkURL``` - checks model import URL
-* ```render``` - renders the top section of the sidebar