Design Diagram: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Design Diagram Overview ==
The Design Diagram is the core component in data augmented modeling. With the Design Diagram, it's possible to show the operations in the company from different viewpoints at the same time.
The Design Diagram is the core component in data augmented modeling. With the Design Diagram, it's possible to show the operations in the company from different viewpoints at the same time.


The Design Diagram works only when the currently selected model is a Snowflake model. A model can have multiple Design Diagrams associated with it, but the Design Diagram that is shown on the dashboard can be changed only in the dashboard Edit mode.
The Design Diagram works only when the currently selected model is a Snowflake model. A model can have multiple Design Diagrams associated with it, but by default the Design Diagram that is shown on the dashboard can be changed only in the dashboard Edit mode. See below for [[#Change_the_Shown_Diagram_in_the_Dashboard_Preview_Mode|instructions]] on how to configure settings for changing the diagram in the Preview mode too.


The Design Diagram has a Canvas for drawing, a Symbol Palette, and a Toolbar.  
The Design Diagram has a Canvas for drawing, a Symbol Palette, and a Toolbar.  


The basic flow of using the Design Diagram is the following:
The basic flow of creating a Design Diagram is:


# Drag objects, e.g. process steps, roles, and applications, from the Symbol palette to the canvas.
# Drag objects, e.g. process steps, roles, and applications, from the Symbol palette to the canvas.
# For each object on the canvas, choose which event log object in the model you want to link it to. It's also possible to not do this linking and name the object yourself.
# For each object on the canvas, choose which event log object in the model you want to link it to. It's also possible to not do this linking and name the object yourself, but then the object will not visualize measure data from the model.
# Drag flows from the Symbol palette to the canvas and connect the flows to the objects to visualize how the objects are linked and interact with each other in the enterprise.
# Drag flows from the Symbol palette to the canvas and connect the flows to the objects to visualize how the objects are linked and interact with each other in the enterprise.
# Name the diagram by clicking the diagram title and typing in the name there.


The Design Diagram also has a fullscreen mode which expands the diagram to the entire screen. The fullscreen is available via the icon on the top right corner of the diagram. The fullscreen can be disabled by clicking the cross icon in the top right corner.
The Design Diagram also has a fullscreen mode which expands the diagram to the entire screen. The fullscreen is available via the icon on the top right corner of the diagram. The fullscreen can be disabled by clicking the cross icon in the top right corner.
__TOC__


== Symbol Palette ==
== Symbol Palette ==
The Symbol Palette is located on the left side of the Canvas and it's visible in the dashboard Edit mode. The Symbol Palette shows the Objects and Connectors categories. The Objects category contains an item for each textual event attribute in the currently selected model (except for event attributes that are mapped to case ids). The Connectors category contains only one item, Flow, that can connect objects in the canvas.
The Symbol Palette is located on the left side of the Canvas and it's visible in the dashboard Edit mode. The Symbol Palette shows the Objects, BPMN flows, and BPMN elements categories. The Objects category contains an item for each textual event attribute in the currently selected model (except for event attributes that are mapped to case ids). The BPMN flows category contains the Sequence, Association, and Message flows that can connect objects in the canvas.


== Toolbar ==
== Toolbar ==
Line 26: Line 27:
* '''Delete diagram''': Deletes the open diagram.
* '''Delete diagram''': Deletes the open diagram.
* '''Import diagram from file''': Creates a new diagram from a json file.
* '''Import diagram from file''': Creates a new diagram from a json file.
* '''Export diagram''': Exports diagram to a file. Following formats are available: JSON, JPG, PNG, SVG.
* '''Export diagram''': Exports the diagram to a file. Following formats are available: JSON, JPG, PNG, SVG.
* '''Cut''': Cuts selected element(s) (to paste them later).
* '''Cut''': Cuts selected element(s) (to paste them later).
* '''Copy''': Copies selected element(s) (to paste them later).
* '''Copy''': Copies selected element(s) (to paste them later).
Line 39: Line 40:
* '''Fit to window''': Sets the diagram zoom and position in a way that the entire diagram fits to the visible screen. Also shows the current zoom percentage of the diagram.
* '''Fit to window''': Sets the diagram zoom and position in a way that the entire diagram fits to the visible screen. Also shows the current zoom percentage of the diagram.
* '''Zoom in''': Zooms in the diagram by 20%.
* '''Zoom in''': Zooms in the diagram by 20%.
== Canvas ==
The canvas contains all the objects, elements, and flows that are added to it.
Right-clicking an object, an element, or a flow on the canvas will open a popup menu with the following contents:
* '''Copy''': Copies selected element(s) (to paste them later).
* '''Cut''': Cuts selected element(s) (to paste them later).
* '''Order''': Used to change the selected elements' stacking order: Bring forward, Bring to front, Send backward, and Send to back.
In addition, the popup menu contains selections for changing the different properties of the element, object, or flow.


== Object and Flow Measures ==
== Object and Flow Measures ==
Line 68: Line 79:
=== Layout Settings ===
=== Layout Settings ===
Following layout settings are available:
Following layout settings are available:
* '''Background color''': Background color of the chart area. The color can also contain partial transparency (alpha value) or even be fully transparent. When the chart background has transparency, the color of the dashboard background is visible behind the chart.
* '''Background color''': Background color of the diagram area. The color can also contain partial transparency (alpha value) or even be fully transparent. When the chart background has transparency, the color of the dashboard background is visible behind the diagram.  
* '''Border color''': Border color of the chart. Like the background, border color can also contain transparency.
* '''Border color''': Border color of the diagram. Like the background, border color can also contain transparency.
* '''Border width''': Border width of the chart in pixels. When the width is zero, border is not visible.
* '''Border width''': Border width of the diagram in pixels. When the width is zero, border is not visible.
* '''Border corner roundness''': Border corner roundness in pixels. Zero means sharp corners.
* '''Border corner roundness''': Border corner roundness in pixels. Zero means sharp corners.
* '''Color palette''': Colors for chart series come from the color palette. When in the static series mode, colors for each y-axis can be overridden in the chart settings. Like the background, the palette colors can also contain transparency.
* '''Color palette''': Colors for the backgrounds of the objects on the diagram. The background colors can be defined also by using [[Design_Diagram#Visualize_Values_With_Conditional_Formatting|conditional formatting]].


=== Filtering Settings ===
=== Filtering Settings ===
Line 80: Line 91:


Diagram filters and behavior for the diagram filtering is defined in the ''Filter'' tab having the following settings:
Diagram filters and behavior for the diagram filtering is defined in the ''Filter'' tab having the following settings:
* '''Follow Dashboard Filters''': When checked, the chart is filtered by the filters in the dashboard. When unchecked, the chart is not affected by filters in the dashboard, and thus the chart is based on data in the entire model.
* '''Follow Dashboard Filters''': When checked, the diagram is filtered by the filters in the dashboard. When unchecked, the diagram is not affected by filters in the dashboard, and thus the diagram is based on data in the entire model.
* '''Apply Chart Filters First''': When enabled, chart filter rules are applied before the dashboard filter rules for the chart. When disabled, dashboard filter rules are applied before the chart filter rules. When there are event level filters in use, the order of filter rules may affect the result because filter rules are applied to the resulting event log of the previous filter rule calculation. In certain use cases, it's desired to apply the chart filters before the dashboard filters.
* '''Apply Chart Filters First''': When enabled, chart filter rules are applied before the dashboard filter rules for the diagram. When disabled, dashboard filter rules are applied before the chart filter rules. When there are event level filters in use, the order of filter rules may affect the result because filter rules are applied to the resulting event log of the previous filter rule calculation. In certain use cases, it's desired to apply the chart filters before the dashboard filters.
* '''Chart Filter''': Button to add filter rules that affect this diagram only. Filter rules can be edited by clicking them and removed from the recycle bin icon. The diagram or dashboard component only shows cases and events that match with the defined filter rules. If there are several filter rules defined, all of the individual rules must match.
* '''Chart Filter''': Button to add filter rules that affect this diagram only. Filter rules can be edited by clicking them and removed from the recycle bin icon. The diagram or dashboard component only shows cases and events that match with the defined filter rules. If there are several filter rules defined, all of the individual rules must match.


=== Advanced Settings ===
=== Advanced Settings ===
* '''Chart settings (editable)''': All settings in a chart are stored in a single entity that are shown here. The settings can also be edited directly. There are validations in place, so invalid settings are not accepted. You can copy chart settings and use them in another chart as follows: Select all JSON and copy it to a clipboard. Go to another chart, paste the settings to the same chart settings textbox and click Save.
* '''Chart settings (editable)''': All settings in a diagram are stored in a single entity that are shown here. The settings can also be edited directly. There are validations in place, so invalid settings are not accepted. You can copy chart settings and use them in another diagram as follows: Select all JSON and copy it to a clipboard. Go to another diagram, paste the settings to the same chart settings textbox and click Save.
* '''[[Chart_Linked_Settings|Linked settings]]'''
* '''[[Chart_Linked_Settings|Linked settings]]'''
* '''Visible Case Attributes''': Only the defined case attributes are shown in settings where case attributes need to be selected from a list. This setting can be used to hide unnecessary case attributes to make lists shorter and easier to use. When no case attributes are defined, all case attributes are shown.
* '''Visible Case Attributes''': Only the defined case attributes are shown in settings where case attributes need to be selected from a list. This setting can be used to hide unnecessary case attributes to make lists shorter and easier to use. When no case attributes are defined, all case attributes are shown.
* '''Visible Event Attributes''': Only the defined event attributes are shown in settings where event attributes need to be selected from a list. This setting can be used to hide unnecessary event attributes to make lists shorter and easier to use. When no event attributes are defined, all event attributes are shown.
* '''Visible Event Attributes''': Only the defined event attributes are shown in settings where event attributes need to be selected from a list. This setting can be used to hide unnecessary event attributes to make lists shorter and easier to use. When no event attributes are defined, all event attributes are shown.
* '''Visible Event Types''': Only the defined event types are shown in settings where event types need to be selected from a list. This setting can be used to hide unnecessary event types to make lists shorter and easier to use. When no event types are defined, all event types are shown.
* '''Visible Event Types''': Only the defined event types are shown in settings where event types need to be selected from a list. This setting can be used to hide unnecessary event types to make lists shorter and easier to use. When no event types are defined, all event types are shown.
* '''Settings available in preview mode''': If there is no need for a user to change the chart settings when viewing the dashboard, this option can hide the settings in the [[QPR_ProcessAnalyzer_Dashboard_Designer#Editing_Dashboards|preview mode]]. This helps to make the dashboard cleaner looking as there is no settings button in the chart. Then changing the chart settings can only be done in the ''edit mode''.
* '''Settings available in preview mode''': If there is no need for a user to change the diagram settings when viewing the dashboard, this option can hide the settings in the [[QPR_ProcessAnalyzer_Dashboard_Designer#Editing_Dashboards|preview mode]]. This helps to make the dashboard cleaner looking as there is no settings button in the chart. Then changing the diagram settings can only be done in the ''edit mode''.
 
== Visualize Values With Conditional Formatting ==
For details how to define conditional formatting, see the [[QPR_ProcessAnalyzer_Table#Conditional_formatting|documentation for tables]]. For conditional formatting of objects, the following formatting types are available:
* '''backgroundColor''': Color of the object box background.
 
Example: Define object colors based on rules:
<syntaxhighlight lang="json" line>
{
  "backgroundColor": {
    "rules": [
      {
        "color": "#EF5254",
        "value": 10,
        "comparison": ">="
      },
      {
        "color": "#FFD851",
        "value": 6.5,
        "comparison": ">="
      },
      {
        "color": "#68DD8F"
      }
    ]
  }
}
</syntaxhighlight>
 
Example: Define flow colors using scale:
<syntaxhighlight lang="json" line>
{
  "color": {
    "scale": [
      {
        "value": {"aggregate": "max" },
        "color": "#FEA88A"
      },
      {
        "value": {"aggregate": "min" },
        "color": "#FBE8E6"
      }
    ]
  }
}
</syntaxhighlight>
 
Example: Define flow thickness:
<syntaxhighlight lang="json" line>
{
"thickness": {
"min": 5,
"max": { "aggregate": "max" }
}
}
</syntaxhighlight>
 
== Change the Shown Diagram in the Dashboard Preview Mode ==
By using the [[Chart_On-screen_Settings|On-screen settings]] and [[Chart_Linked_Settings|Linked settings]], it's possible to show a drop-down menu on the diagram for changing the shown diagram in the dashboard Preview mode.
 
For example, define the On-screen settings in the following way:
<pre>
[
{
"type": "eventtypemeasure",
"index": 0,
"parameter": "designDiagramId",
"maxWidth": 300,
"label": "Select diagram",
"control": "dynamicsingleselectlist",
"dynamicType": "DesignDiagrams"
}
]
</pre>
 
And the Linked Settings in the following way:
<pre>
[
[
{
"type": "generic",
"parameter": "designDiagramId"
},
{
"type": "eventtypemeasure",
"index": 0,
"parameter": "designDiagramId"
}
]
]
</pre>
 
 
[[Category: QPR ProcessAnalyzer]]

Latest revision as of 13:25, 4 March 2024

The Design Diagram is the core component in data augmented modeling. With the Design Diagram, it's possible to show the operations in the company from different viewpoints at the same time.

The Design Diagram works only when the currently selected model is a Snowflake model. A model can have multiple Design Diagrams associated with it, but by default the Design Diagram that is shown on the dashboard can be changed only in the dashboard Edit mode. See below for instructions on how to configure settings for changing the diagram in the Preview mode too.

The Design Diagram has a Canvas for drawing, a Symbol Palette, and a Toolbar.

The basic flow of creating a Design Diagram is:

  1. Drag objects, e.g. process steps, roles, and applications, from the Symbol palette to the canvas.
  2. For each object on the canvas, choose which event log object in the model you want to link it to. It's also possible to not do this linking and name the object yourself, but then the object will not visualize measure data from the model.
  3. Drag flows from the Symbol palette to the canvas and connect the flows to the objects to visualize how the objects are linked and interact with each other in the enterprise.
  4. Name the diagram by clicking the diagram title and typing in the name there.

The Design Diagram also has a fullscreen mode which expands the diagram to the entire screen. The fullscreen is available via the icon on the top right corner of the diagram. The fullscreen can be disabled by clicking the cross icon in the top right corner.

Symbol Palette

The Symbol Palette is located on the left side of the Canvas and it's visible in the dashboard Edit mode. The Symbol Palette shows the Objects, BPMN flows, and BPMN elements categories. The Objects category contains an item for each textual event attribute in the currently selected model (except for event attributes that are mapped to case ids). The BPMN flows category contains the Sequence, Association, and Message flows that can connect objects in the canvas.

Toolbar

The Toolbar is located above the canvas and is visible in the dashboard Edit mode.

The following tools are available on the Toolbar:

  • Select diagram: Goes to the diagram selection screen.
  • Duplicate diagram: Duplicates the open diagram.
  • Delete diagram: Deletes the open diagram.
  • Import diagram from file: Creates a new diagram from a json file.
  • Export diagram: Exports the diagram to a file. Following formats are available: JSON, JPG, PNG, SVG.
  • Cut: Cuts selected element(s) (to paste them later).
  • Copy: Copies selected element(s) (to paste them later).
  • Paste: Pastes previously cut or copied element(s).
  • Pan tool: Activates the pan tool with which the diagram can be moved by the mouse.
  • Select tool: Activates the select tool with which the elements can be selected.
  • Delete selected items: Deletes the selected elements on the diagram.
  • Change stacking order: Used to change the selected elements' stacking order: Bring forward, Bring to front, Send backward, and Send to back.
  • Align objects: Used to align the selected elements: Align left, Align center, Align right, Align top, Align middle, and Align bottom. Requires at least two objects to be selected.
  • Distribute objects: Used to distribute the selected elements: Distribute vertically, Distribute horizontally. Requires at least three objects to be selected.
  • Zoom out: Zooms out the diagram by 20%.
  • Fit to window: Sets the diagram zoom and position in a way that the entire diagram fits to the visible screen. Also shows the current zoom percentage of the diagram.
  • Zoom in: Zooms in the diagram by 20%.

Canvas

The canvas contains all the objects, elements, and flows that are added to it.

Right-clicking an object, an element, or a flow on the canvas will open a popup menu with the following contents:

  • Copy: Copies selected element(s) (to paste them later).
  • Cut: Cuts selected element(s) (to paste them later).
  • Order: Used to change the selected elements' stacking order: Bring forward, Bring to front, Send backward, and Send to back.

In addition, the popup menu contains selections for changing the different properties of the element, object, or flow.

Object and Flow Measures

The measures shown on objects and flows on the diagram are calculated automatically. By default, the object measures show in how many cases the object is involved and how many times it has occurred, whereas the flow measures show the flow occurrence duration and how many times the flow has occurred. The measure values are updated according to the currently active filters.

The Object measures are calculated in each individual object's context by using the object type as the event type.

The Flow measures are calculated in each individual flow occurrence and then aggregated into the flow level using the Aggregate setting. Those flow occurrences are selected to the calculation where the starting and ending event attribute name and value matches.

The Object and Flow measures can be configured in the Object measures and Flow measures tabs of the Design Diagram Settings.

Design Diagram Settings

Object measures tab

Zero-to-many object measures can be defined for objects, and all object types show the same measures.

  • Label: Values from measures mapped to Label are shown on the upper side of the object box.
  • 2nd label: Values from measures mapped to 2nd label are shown on the lower side of the object box.

Several measures can have the same mapping, in which case the shown values are separated with the "|" character.

The following common expression settings are available for event measures: Unit, Decimals, Custom label, Unit position, Special values, Conditional formatting, Variable name, and Dynamic filter rules.

Flow measures tab

Zero-to-many flow measures can be defined for the flows, and the measure values are shown in the middle of the flow.

  • Label: Values from measures mapped to Label are shown on the upper row on the flow.
  • 2nd label: Values from measures mapped to 2nd label are shown on the lower row on the flow.

Several flow measures can have the same mapping, in which case the shown values are separated with the "|" character.

The Following common expression settings are available for flow measures: Decimals, Unit, Custom label, Unit position, Special values, Variable name, and Dynamic filter rules.

Layout Settings

Following layout settings are available:

  • Background color: Background color of the diagram area. The color can also contain partial transparency (alpha value) or even be fully transparent. When the chart background has transparency, the color of the dashboard background is visible behind the diagram.
  • Border color: Border color of the diagram. Like the background, border color can also contain transparency.
  • Border width: Border width of the diagram in pixels. When the width is zero, border is not visible.
  • Border corner roundness: Border corner roundness in pixels. Zero means sharp corners.
  • Color palette: Colors for the backgrounds of the objects on the diagram. The background colors can be defined also by using conditional formatting.

Filtering Settings

Filters can be applied on two levels:

  • Entire dashboard: Dashboard level filters are visible in the main header and they are applied to all diagrams in the dashboard.
  • Individual diagram: Diagram level filters are applied only to the diagram or component which the filters are defined for. Filters for a diagram can be viewed and edited in the diagram settings (Filter tab). Tip: If the desired type of filter cannot be created from the Add filter dialog, create the filter first as a dashboard filter and then drag and drop the filter rule over the diagram. The filter rule is moved as a diagram filter.

Diagram filters and behavior for the diagram filtering is defined in the Filter tab having the following settings:

  • Follow Dashboard Filters: When checked, the diagram is filtered by the filters in the dashboard. When unchecked, the diagram is not affected by filters in the dashboard, and thus the diagram is based on data in the entire model.
  • Apply Chart Filters First: When enabled, chart filter rules are applied before the dashboard filter rules for the diagram. When disabled, dashboard filter rules are applied before the chart filter rules. When there are event level filters in use, the order of filter rules may affect the result because filter rules are applied to the resulting event log of the previous filter rule calculation. In certain use cases, it's desired to apply the chart filters before the dashboard filters.
  • Chart Filter: Button to add filter rules that affect this diagram only. Filter rules can be edited by clicking them and removed from the recycle bin icon. The diagram or dashboard component only shows cases and events that match with the defined filter rules. If there are several filter rules defined, all of the individual rules must match.

Advanced Settings

  • Chart settings (editable): All settings in a diagram are stored in a single entity that are shown here. The settings can also be edited directly. There are validations in place, so invalid settings are not accepted. You can copy chart settings and use them in another diagram as follows: Select all JSON and copy it to a clipboard. Go to another diagram, paste the settings to the same chart settings textbox and click Save.
  • Linked settings
  • Visible Case Attributes: Only the defined case attributes are shown in settings where case attributes need to be selected from a list. This setting can be used to hide unnecessary case attributes to make lists shorter and easier to use. When no case attributes are defined, all case attributes are shown.
  • Visible Event Attributes: Only the defined event attributes are shown in settings where event attributes need to be selected from a list. This setting can be used to hide unnecessary event attributes to make lists shorter and easier to use. When no event attributes are defined, all event attributes are shown.
  • Visible Event Types: Only the defined event types are shown in settings where event types need to be selected from a list. This setting can be used to hide unnecessary event types to make lists shorter and easier to use. When no event types are defined, all event types are shown.
  • Settings available in preview mode: If there is no need for a user to change the diagram settings when viewing the dashboard, this option can hide the settings in the preview mode. This helps to make the dashboard cleaner looking as there is no settings button in the chart. Then changing the diagram settings can only be done in the edit mode.

Visualize Values With Conditional Formatting

For details how to define conditional formatting, see the documentation for tables. For conditional formatting of objects, the following formatting types are available:

  • backgroundColor: Color of the object box background.

Example: Define object colors based on rules:

{
  "backgroundColor": {
    "rules": [
      {
        "color": "#EF5254",
        "value": 10,
        "comparison": ">="
      },
      {
        "color": "#FFD851",
        "value": 6.5,
        "comparison": ">="
      },
      {
        "color": "#68DD8F"
      }
    ]
  }
}

Example: Define flow colors using scale:

{
  "color": {
    "scale": [
      {
        "value": {"aggregate": "max" },
        "color": "#FEA88A"
      },
      {
        "value": {"aggregate": "min" },
        "color": "#FBE8E6"
      }
    ]
  }
}

Example: Define flow thickness:

{
	"thickness": {
		"min": 5,
		"max": { "aggregate": "max" }
	}
}

Change the Shown Diagram in the Dashboard Preview Mode

By using the On-screen settings and Linked settings, it's possible to show a drop-down menu on the diagram for changing the shown diagram in the dashboard Preview mode.

For example, define the On-screen settings in the following way:

[
	{
		"type": "eventtypemeasure",
		"index": 0,
		"parameter": "designDiagramId",
		"maxWidth": 300,
		"label": "Select diagram",
		"control": "dynamicsingleselectlist",
		"dynamicType": "DesignDiagrams"
	}
]

And the Linked Settings in the following way:

[
	[
		{
			"type": "generic",
			"parameter": "designDiagramId"
		},
		{
			"type": "eventtypemeasure",
			"index": 0,
			"parameter": "designDiagramId"
		}
	]
]