DataMapperWebApp

As an intern of the WSO2, this is my working project for implementing the wso2 data mapping tool as a static web app.

Executable static data mapping tool

BackboneJS structure of the app

The models of the app are as follows:

1. Operator – The container/operator box with a collection of nodes. Direct mappings are considered to be connected to an operator called “direct”.
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] ]….