Adding a backbone to the app

Internship diaries #3

By the end of the 12th week, the data mapper tool front end was almost complete. And I had learned a huge list of functionalities of d3 as well as Backbone. It’s quite amazing how BackboneJS can provide an object oriented approach to Javascript. My application was completely converted into a bunch of models, collections and views interacting with each other.

The models of the app are as follows:

1. Operator – The container/operator box with a collection of nodes
2. Container(extending Operator) – Input/output containers
3. Node – The elements of the container. A node has a text, a text type, node type(object, array or leaf) and a type(input or output) which decides the placement of anchor.
4. Anchor – The arrow heads that are assigned to leaf nodes. Anchors of type output are draggable while the others are not.
5. Connector – The line that connects nodes through anchors. Each connector has a source node, source container, target node and target container. 

The collections of the app:

1. Operators – a collection of all the operators. The drawContainer function is responsible for drawing a container with the specified input count and output count on the canvas.
2. Connectors – a collection of all the connectors added to the app. The functions include findFromSource and findFromTarget which intakes a node and returns the connectors which have the specified node as the source or target respectively.
3. Nodelist – each container has a collection of nodes. The functions include getNodeFromDOMObject which returns the node  in the collection when the DOM object is specified.

Views initialize the app itself and the important functionalities. 

1. Canvas - The app is initiated by the CanvasView which initializes the required views and models of the app.
2. LoadFile – The file handling is managed by the LoadFileView which reads the specified file and draws the tree structure in the container.
3. OperatorPanel – This view is responsible for binding events to operator addition.

The mappings

At the event of calculating the mappings, the app outputs four arrays:

1. Variable list – an array of nodes. The id of the node in the array is used for the adjacency list.
2. Operators – a list of operators in the model, including direct operators.
3. Input adjacency list – each entry of the array corresponds to each operator and the inputs connected to the operator. Assumed that each node has only one input.
[input-nodes-of-op1, input-nodes-of-op2, ….] →  [2, 3] , [1, 2] …..
4. Output adjacency list – each entry of the array corresponds to each operator and the outputs connected to the operator. Assumed that each node can have multiple outputs, which is again an array.
[ [output-nodes-of-op1, output-nodes-of-op2, …... ]  → [ [9], [10, 11] ] , [ [7, 8], [10] ]….