Difference between revisions of "Process Path Visualizer Properties"

From Mea Wiki
Jump to navigation Jump to search
(307299)
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
WiP
+
The Process Path Visualizer is a presentation object that queries QPR ProcessDesigner and QPR EnterpriseArchitect data from QPR Suite Web Service and visualizes the relations between elements as boxes and arrows between the boxes.
  
The Process Path Visualizer is a presentation object that queries QPR ProcessDesigner and QPR EnterpriseArchitect data from QPR Suite Web Service and visualizes the relations between elements as boxes and arrows between the boxes. The visualization is on the model level, i.e. instances of elements are ignored.
+
__TOC__
  
The relations that are shown are:
+
The Process Path Visualizer shows the following relations:
 
* '''Connector'''. There are two different behaviors depending on whether the QPR Suite Web Service you are using supports the "flowroute" attribute or not:
 
* '''Connector'''. There are two different behaviors depending on whether the QPR Suite Web Service you are using supports the "flowroute" attribute or not:
 
*# "Flowroute" attribute supported: if a connector comes from or goes to a different diagram, all diagrams in the connector's path through the process hierarchy are shown as targets for the connector relation.
 
*# "Flowroute" attribute supported: if a connector comes from or goes to a different diagram, all diagrams in the connector's path through the process hierarchy are shown as targets for the connector relation.
Line 10: Line 10:
 
* '''System relations''', i.e.: attachedobjects, attachedtoobject, flows, from, fromprocesslevel, informationitems, mappeddestinationinterface, mappedsourceinterface, modelobjects, notes, organizationunit, owner, persons, processsteps, resources, to, toprocesslevel
 
* '''System relations''', i.e.: attachedobjects, attachedtoobject, flows, from, fromprocesslevel, informationitems, mappeddestinationinterface, mappedsourceinterface, modelobjects, notes, organizationunit, owner, persons, processsteps, resources, to, toprocesslevel
  
 +
Note that the Process Path Visualizer doesn't show separate instances of the model elements.
 +
 +
== Properties Tab ==
 +
The following properties can be set on the Properties tab:
 +
* '''Name''': Name of the Process Path Visualizer presentation object.
 +
* '''Description''': Description for the Process Path Visualizer presentation object.
  
 
== Presentation Tab ==
 
== Presentation Tab ==
Line 153: Line 159:
  
 
== Interaction with Boxes and Arrows ==
 
== Interaction with Boxes and Arrows ==
MO93162470 Clicking an element that is not in the path will add it to the path
+
The elements shown on the diagram are interacted with in the following way:
MO98345298 The relation visualizer will show all related elements of the elements in the selected path
+
* '''Left-clicking an element that is not in the path''' will add it to the path with its relations and related elements shown. The element will also be selected.
MO1491353723 When an element is added to the selected path, the element and all new related elements are set as selected
+
* '''Left-clicking an element that is in the path''' will hide the related elements and the relations.
MO95569137 Control-selecting elements will toggle the selection
+
* '''Shift + Control + left-clicking''' an element that is in the path will remove the element from the path.
 +
* '''Shift + left-clicking''' an element will add the element to the current selection.
 +
* '''Control + left-clicking''' elements will toggle the selection of the element.
 +
* '''Alt + left-clicking''' an element will select the element and its related elements.
 +
* '''Holding down the left mouse button and then dragging''' on an area that doesn't contain an element will enable the area selection that can be used to select multiple elements.
 +
* '''Pressing the left mouse button on an element and then dragging''' will move the selected element(s).
 +
* '''Pressing the left mouse button on an empty area and then dragging''' will move the entire diagram.
 +
* '''Mouse wheel scrolling''' will zoom the diagram
 +
 
 +
== Tips ==
 +
=== Storing the Diagram State ===
 +
Information about the selected path elements, and the layout of the diagram is stored in the session context in the context variable named '''pathVisualizerData'''. You can [[QPR_UI_Workspace#Creating_bookmarks|bookmark]] the view to store the diagram state for later use. Another option is to copy the value of the pathVisualizerData context variable from the session context, store the value somewhere, and when later using the view, paste the value into the pathVisualizerData context variable in the session context.
  
MO92609881 An element and its related elements can be selected by alt-clicking the element
+
=== Decluttering the Diagram ===
MO97271424 Area selection can be used to select multiple elements
+
To keep the diagram uncluttered when adding new elements to the path, it's advisable to hide the unneeded relations (left-click an element in the path) from the elements you have previously added to the path.
MO91996093 An element can be removed from the path by shift-control clicking it
 
  
MO97365486 Elements can be moved by dragging them
 
MO181991945 Related elements can be hidden and/or displayed by clicking a path element
 
MO92211658 Shift-selecting elements will add them to current selection
 
MO96802574 The diagram can be moved by dragging it
 
MO91022041 The diagram can be zoomed with mouse wheel
 
MO97525757 Information about the selected path elements, and the layout of the diagram is stored to a context variable
 
  
- Diagram shows either selected element types/relations (include mode) or excludes selected element types/relations (exclude mode) (it not able to go beyond the excluded relations)
+
[[Category: QPR UI]]
- Element types can be hidden, meaning that the all the hidden element relations are connected to each other (usecase: hide connector objects)
 
- When user changes these selections, diagram is updated
 
- Different GoJS layout options are available (see PAPO)
 
- Object id of a selected can be bound to a context variable
 
- List of "expanded" objects can be set in the configuration
 
- Boxes can be moved in the diagram
 
- Relation names can be mapped to other names
 

Latest revision as of 05:35, 1 June 2018

The Process Path Visualizer is a presentation object that queries QPR ProcessDesigner and QPR EnterpriseArchitect data from QPR Suite Web Service and visualizes the relations between elements as boxes and arrows between the boxes.

The Process Path Visualizer shows the following relations:

  • Connector. There are two different behaviors depending on whether the QPR Suite Web Service you are using supports the "flowroute" attribute or not:
    1. "Flowroute" attribute supported: if a connector comes from or goes to a different diagram, all diagrams in the connector's path through the process hierarchy are shown as targets for the connector relation.
    2. "Flowroute" attribute not supported: Ii a connector comes from or goes to a different diagram, the connector is shown only between the from and to elements.
  • Custom attribute relation
  • System relations, i.e.: attachedobjects, attachedtoobject, flows, from, fromprocesslevel, informationitems, mappeddestinationinterface, mappedsourceinterface, modelobjects, notes, organizationunit, owner, persons, processsteps, resources, to, toprocesslevel

Note that the Process Path Visualizer doesn't show separate instances of the model elements.

Properties Tab

The following properties can be set on the Properties tab:

  • Name: Name of the Process Path Visualizer presentation object.
  • Description: Description for the Process Path Visualizer presentation object.

Presentation Tab

On the Presentation tab, you can define the visual properties of the elements and relations shown on the diagram.

It's possible to define different settings for different types of element, so that e.g. elements of an "Activity" element type and elements of a "Risk" element type are shown in different colors. The settings is a JSON string in the following format. The main object section contains default settings for the selected (in the path) and the unselected (not in the path) elements and relations, and element type specific settings.

The graphical settings for individual elements are:

  1. If element type specific settings exist, use those
  2. If default settings exist, use those
  3. Otherwise, use hard coded system settings
{
  "selected": <<element>>,
  "unselected": <<element>>,
  "relation": <<relation>>,
  "elementTypes": {
    "<element type name>" : {
      "selected": <<element>>,
      "unselected": <<element>>,
    }
  }
}

element: {
  "fill": css color string, or <<brush>>,
  "stroke": null, css color string, or <<brush>>,
  "hover": css color string, or <<brush>>,
  "strokeWidth": number
}

brush:
{
  "gradient": <"Linear" or "Radial">,
  "stops": {
    "0.0": css color string,
    "0.3": css color string,
    "1.0": css color string
  },
  "start": <<spot>>, // "start" and "stop" are used for "Linear" gradient brushes only
  "end": <<spot>> // If not present, opposite of "start" is used
}

spot: <"Top", "Bottom", "Left", "Right", "TopLeft", "TopRight", "BottomLeft", or "BottomRight">

relation: {
  "fill": css color string, or <<brush>>,
  "stroke": null, css color, or <<brush>>,
  "strokeWidth": number,
  "fromArrow": <<arrow>>,
  "toArrow": <<arrow>>
}

Example Settings

{
  "selected": {
    "fill": "#A0A0A0",
    "stroke": "#FF0000",
    "strokeWidth": 2,
    "hover": {
      "gradient": "Linear",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      },
      "start": "Top",
      "end": "Bottom"
    }
  },
  "unselected": {
    "fill": {
      "gradient": "Linear",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      },
      "start": "Left",
      "end": "Right"
    },
    "stroke": "#00FF00",
    "strokeWidth": 5,
    "hover": {
      "gradient": "Radial",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      }
    }
  },
  "relation": {
    "stroke": "#A07030",
    "strokeWidth": 2,
    "fromArrow": "triplefeathers",
    "toArrow": "opentriangle"
  },
  "elementTypes": {
    "Risk": {
      "selected": {
        "fill": "#808080",
        "hover": "#FFFFFF",
        "stroke": "black",
        "strokeWidth": 1
      },
      "unselected": {
        "fill": "red",
        "hover": "rgb(255, 128, 128)",
        "stroke": "#000000",
        "strokeWidth": 1
      }
    },
    "Core Process": {
      "selected": {
        "fill": "#D0D0D0",
        "stroke": "black",
        "strokeWidth": 1
      },
      "unselected": {
        "fill": "green",
        "stroke": "rgb(128, 128, 128)",
        "strokeWidth": 3
      }
    }
  }
}

Defining the Initial Path Element

The initial path element is defined by selecting a value for the sys:eapdElement context variable. Note that you may need to define the sys:eapdModel and sys:eapdElementType context variable values before you can define a value for the sys:eapdElement context variable.

After the sys:eapdElement context variable value is defined, the selected element is set as the initial path element, and its relations and related elements are shown on the diagram. Changing the value of sys:eapdElement context variable again will cause the diagram to be cleared and the new initial path element and its relations being drawn on the diagram.

Interaction with Boxes and Arrows

The elements shown on the diagram are interacted with in the following way:

  • Left-clicking an element that is not in the path will add it to the path with its relations and related elements shown. The element will also be selected.
  • Left-clicking an element that is in the path will hide the related elements and the relations.
  • Shift + Control + left-clicking an element that is in the path will remove the element from the path.
  • Shift + left-clicking an element will add the element to the current selection.
  • Control + left-clicking elements will toggle the selection of the element.
  • Alt + left-clicking an element will select the element and its related elements.
  • Holding down the left mouse button and then dragging on an area that doesn't contain an element will enable the area selection that can be used to select multiple elements.
  • Pressing the left mouse button on an element and then dragging will move the selected element(s).
  • Pressing the left mouse button on an empty area and then dragging will move the entire diagram.
  • Mouse wheel scrolling will zoom the diagram

Tips

Storing the Diagram State

Information about the selected path elements, and the layout of the diagram is stored in the session context in the context variable named pathVisualizerData. You can bookmark the view to store the diagram state for later use. Another option is to copy the value of the pathVisualizerData context variable from the session context, store the value somewhere, and when later using the view, paste the value into the pathVisualizerData context variable in the session context.

Decluttering the Diagram

To keep the diagram uncluttered when adding new elements to the path, it's advisable to hide the unneeded relations (left-click an element in the path) from the elements you have previously added to the path.