Intro

Diagram nodes represent model objects and can be added, moved, resized, or removed.

When to Use

Nodes in a diagram represent model objects and can be added, moved, resized, or removed. They contain minimal information to be recognized and identified, with additional details accessible through contextual panels or pop-overs. Ensuring nodes have enough information is crucial, and collapsible nodes are useful when some tasks don't require detailed content.

Anatomy

Shape

Nodes are typically rectangular and wider than tall for easy reading of horizontal text. Nodes can also be circular with labels at the bottom for specific types of diagrams.

Size

The size of a node should be set based on its content, including icons, text, or tables. Node sizes are generally multiples of 1rem, with separate designs for collapsed and expanded states.

The base node has a minimum size of 5rem (80px) and a maximum of 38rem (608px), although diagrams can set their own minimum and maximum dimensions.

Foundational Content

In the simplest nodes, only the heading and the icon panel are present, although the header can optionally include a subheading.

Due to the Network Graph, Modeler utilizes a different type of header. Whenever feasible, nodes should adhere to the general header format rather than the one used by Modeler.

1. Icon Panel: Panel that holds an icon. The background color indicates the type of the node.
2. Icon: Typically displays the object type’s icon. Some operators and step nodes within certain diagrams have dedicated icons.
3. Heading: Typically displays the object’s Business Name. Some operators and step nodes within certain diagrams have dedicated names.
4. Subheading (optional): Can be used for object’s Technical Name, object type, or any other data helpful for user context in a given diagram.
5. Expand / Collapse Arrow (optional): Icon that indicates a node can be expanded or collapsed. Currently only used for nodes that are operators and that contain measure tables (more details in Behavior & Interaction section).

Anatomy – Node Header

Optional Content

The footer is optional and may provide additional functionalities to offer quick insights into the nodes.

1. Status Bar (optional): Positioned on the bottom of the node. Status Bar can contain counters and status icons.
2. Counter (optional): Positioned on the left of the Status Bar. Counter indicates the number of measures, with a maximum of two counters. When interactable, a popover appears to display the list of measures (more details in the Behavior & Interaction section).
3. Status Icon (optional): Positioned on the right of the Status Bar. Status Icon can show deployment status when applicable, with a maximum of three status icons.
4. Measure/Dimension Table (optional): Appears on the Modeler (SAC/DSP).

Anatomy – Node Footer

Exceptional Cases

A node may display validation within the header, but this feature should be reserved exclusively for data action and multi-action nodes and avoided in other use cases.

1. Deactivated Tag (optional): Tag that indicates the status of the node.

Anatomy – Data Actions / Multi Actions Nodes, Header Validation

Validation Badges

DSP and BDC nodes may use count badge to display number of validation messages. Avoid using badge with semantic icons.

Count Badge only

Semantic node states may be used to indicate the most critical validation message state of the node.

Semantic States and Count Badge

Semantic Icons in the Status Bar may be used to indicate node states or deployment status (for DSP). Avoid using badge with semantic icons.

Semantic States and Semantic Icons

Types

Primary Node

Node design utilizes three emphasis levels to effectively differentiate and prioritize elements within diagrams.

The Primary Node (Blue) is used to provide uniform emphasis to nodes that share equal importance within the diagram, or as a primary color when in contrast with secondary an/or tertiary. Primary should be used when only one color is needed as well.

Default Node in Transformation Flows

Secondary Node

Secondary Node is used as the dominant color in diagrams that feature multiple colors for highlights or operator nodes.

Utilizing white as the primary backdrop allows additional colors used for emphasis or operational functions to stand out more prominently, creating clear visual distinctions and effectively highlighting key elements within the diagram.

Secondary Node in Analytic Model

Tertiary Node

Tertiary Node is used for lower emphasis than secondary—common use cases are for read-only or deactivated.

Tertiary Node in Data Actions

Highlight Node

Highlight Node is used when one or two nodes need visual distinction from the rest.

Highlight Node in Impact and Lineage Analysis

Operator Node

Operator Node is designated for nodes performing transformations or filters, such as joins, merges, and aggregates.

This node is reserved exclusively for operator functions and should not be used for any other purposes.

Operator Node in Graphical View

Placeholder Node

Placeholder Nodes serve as indicators for potential locations or upcoming actions, providing visual guidance without conveying definitive information.

Placeholder Node in Transformation Flows

Behavior and Interaction

States

Node – Interaction States

Expand / Collapse

Two node types require collapse and expand functionality:

• Operators

• Nodes with Measure Tables

Operator node in collapsed and expanded form

E/R Model node in collapsed and expanded form

Tooltips

Object type icons in the left icon container should have a tool tip containing the Object Type. All other icons in the node (e.g. in the status bar) should all have a descriptive tooltip.

Tooltips for Object Type and status bar icons

Counter

Counter can be a display or a button that will open a popover upon hover.

Counter as a button