Introduction

The “Graphical View“ is a data flow diagram.

Data flow diagram represents a flow of data coming from data sources, combined or transformed through operators in order to obtain one or several data targets.

For more general information on auto-layouts, see: Diagram Auto-Layout.

Anatomy

Orientation

The orientation is horizontal. The left to right reading conventions places inputs on the left and the outputs on the right with the flow going left to right.

The first “line” (A) is read first. So, the result of this data flow is displayed on this line (C)

Then, the most important part of the diagram must be displayed at the top : the global output is on the top right.

Then the sources on the left and the target(s) on the right.

The most important part of the diagram must be displayed on the first “line”: the main flow (A). It indicates that all the rows of the input source (B), passing through many operators, except filter operators, will arrive in the target (B).

Alignment

The horizontal alignment (A) of the shapes at the left (B) and the right (D) of an operator (B) will indicate that the transformation of the data will keep the number of data rows.

This signification is not valid for the filter operator which has one input and one output aligned for aesthetics reasons but changes by definition the number of rows.

The vertical alignment (G) concerns the shapes (F) when they are the input of the same operator (F).

Spacing

The horizontal space between two shapes (B) is 3 rem (48px) at zoom=1.

The vertical spacing between two branches (A) is 1.5 rem (24px).

Port Position on Operators

The join operator is not a symmetric operator: Join(Table1, Table2) and Join(Table2, Table1) does not give the same data. This difference must be seen on the shape.

The union operator is a symmetric operator. Each table merged has the importance. The two input ports are on the left side of the operator. The only particularity can be the order of the data rows are generated by default: the data rows of the top input (A) are listed before the ones of the bottom input (B).

Operators with a single input have the port centered on the left side of the operator and the output, as usual, centered on the right side.

Behaviors and Interactions

Adding an operator

When adding an operator, between two shapes, an auto-layout is applied. The right-most shape, that will become the output of the operator will not move, the left-most shape or all the branch of its left will move to the left. In that way, less shapes are moved on average.

Removing an operator

When removing an operator having only one input, the input and the output shape are directly connected, and the auto-layout is applied.

When removing (SE) an operator having two inputs (B), the main or first input shape (A) is directly connected (SF) to the output shape (C) and the other input (D) remains at the same position relative to the first shape (A) with its output connected to nothing (E)

Switching the connection of two inputs

The switch can be done in three ways:

Other ways to perform the switch may be also considered later (not detailed here)

Switching the connection of two inputs by multi-selecting the shapes

After selecting the two shapes (B, C), a specific contextual toolbar appears with the switch icon (A). Once pressed, the two shapes and their respective branches (if any) are switched (SB). In fact, their connections to the input ports of the operator are switched and an auto-layout is applied.

Switching inputs of an operator with the contextual menu

After calling the context menu on the operator, the “Switch inputs” is selected. The two inputs branches connected to the input ports of the operator are switched and the auto-layout is applied.

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.