Frontend API

export class GraphController

Provide all the methods used to interact with the displayed graph, such as adding and removing nodes and edges and also manage the layout of the elements on the graph.

Created by antoine on 10/07/17.

addNode (node: Node)

Add the given node on the graph.

• Parameters: node — the node to add

addNodes(n: Array)

Add the given nodes on the graph.

• Parameters: n — the new nodes.

removeNode (node: Node)

Remove the given node from the graph.

• Parameters: node — the node to remove.

addEdge (edge: Edge)

Add the given edge on the graph.

• Parameters: edge — the new edge.

removeGraphNodesThatAreNotInThisSet (nodes: Array)

Remove the nodes that are displayed on the graph but not included in the given set.

• Parameters: nodes — the exhaustive list of nodes that must be displayed onto the graph

removeEdge(edge: Edge)

Remove the given edge from the graph.

• Parameters: edge — the edge to remove.

updateEdge (oldEdge: Edge, newEdge: Edge)

Replace all the information of an edge with new ones.

• Parameters:
  • oldEdge — the edge to replace
  • newEdge — the new edge

private removeNodeFromId (id: string)

Remove a node to the graph from its id

• Parameters: id — the id of the node to remove

private updateSourceConnectedEdge (attr: any)

Update the connectedEdge field of the node connected to the given edge’s source.

• Parameters: attr — the cell.attr of the edge that triggered the change:source event

private updateTargetConnectedEdge (attr: any)

Update the connectedEdge field of the node connected to the given edge’s target.

• Parameters: attr — the cell.attr of the edge that triggered the change:target event

addEdgeSourceOnWaitingLink (cell: any)

Add the source part of an edge that is in the “linkWaitingForSrc” list and remove it from the list. Then it calls flowComponent.createEdge that will send a ‘graph:addedge’ message to the server in order to confirm the creation of the edge. If every goes well, this UI will receive a message graph:addedge in return add process, resulting in a new edge on the graph.

• Parameters: cell — the jointjs cell of the edge

addEdgeTargetOnWaitingLink (cell: any)

Add the source part of an edge that is in the “linkWaitingForTgt” list and remove it from the list. Then it calls flowComponent.createEdge that will send a ‘graph:addedge’ message to the server in order to confirm the creation of the edge. If every goes well, this UI will receive a message graph:addedge in return add process, resulting in a new edge on the graph.

• Parameters: cell — the jointjs cell of the edge

displayNodesOnSameLine (nodes: Array)

Add all the given nodes on one line on the graph.

• Parameters: nodes — the nodes to display

nodeStartRunning (id: string)

Highlight the node with the given id to show the user that the node is running.

• Parameters: id — id of the running node

nodeStopRunning (id: string)

Remove the highlighting of the node with the given id to show the user that the node is not running anymore.

• Parameters: id — id of the running node

removeRunningClassOnAllNodes ()

Remove the .running class from all nodes on the graph to make sure no ones is seen as running. Usually use this method when the simulation is finished.

createBlockForNode(node: Node)

Create a JointJS block for the given node.

• Parameters: node — the source node
• Returns: dia.Element — the resulting jointJS block

nextPosition (): Object

Return the most appropriate coordinate where to put a new element on the graph.

• Returns: {x — number, y: number}} the coordinates

private occupiedZone (): Object

Returns the x0, y0 coordinates, width and height of the zone occupied by the workflow on the graph.

• Returns: {x0 — number, y0: number, width: number, height: number}} the coordinates and size of the occupied zone

private findFirstNodes (nodes: Array)

Determines which nodes are the first one in the given list and returns the list of them. The first nodes are the ones with no dependencies. In other words, the ones with no other nodes connected to their inports.

Those first nodes are the ones to display on top of the graph and also the first ones to execute when running the workflow.

• Parameters: nodes — the list of nodes in which to do the computation
• Returns: Array<Node> — the list of nodes without dependencies

addedEdge (cell: any)

To call when the user added an edge on the graph. This method must be called right after the edge is created. At that moment, only the src OR the tgt element will be defined, so we store the edge in a list, either “linkWaitingForSrc” or “linkWaitingForTgt” and another event will be triggered when the other side of the edge will be connected.

• Parameters: cell — the newly created edge

removedEdge (cell: any)

The user wants to remove the given edge from the workflow. Send this information to the server.

• Parameters: cell — the edge removed from the graph.

edgeChanged (cell: any)

The given edge’s metadata change. Send its new metadata to the server.

• Parameters: cell — the updated edge’s cell.

removedNode (evt: MouseEvent)

The user wants to remove the given node from the workflow. Send this information to the server.

• Parameters: evt — the event triggered.

private addGraphEventListeners ()

Configure the graph event listeners to subscribe to and the methods they should call when triggered.

private getIds (objects: Array): Array

Returns an Array containing the ids of all the elements that are in the given array of objects.

• Parameters: objects — the array to use for the computation
• Returns: Array — the ids of all the elements present in the given array of objects

private getJointCellsNodesIds (): Array

Return an array containing the ids of all the nodes displayed on the graph.

• Returns: Array — containing the ids of all the nodes displayed on the graph.