YFilesView

Label: :IA_Function
Property: type: YFilesView
Inherits from: Function and View

The YFilesView Function renders a visualisation of a graph using yFiles diagramming components.

Parameters

Key	Description	Default value	Possible values
`autoCompleteStatus`	Automatically retrieves missing relations between nodes.	`false`	`true`/`false`
`addAutoFilters`	Checks the "Add filters automatically" checkbox when `filters` clicked.	`true`	`true`/`false`
`canChangeRelationEnds`	Enables the possibility to drag one of the relationship's end to another node. This will trigger a `relationTargetChanged` or `relationSourceChanged` event	`false`	`true`/`false`
`canSetLayout`	Displays the button to change layout.	`true`	`true`/`false`
`canSwitchZoomToFitStatus`	Displays the button to switch zoom-to-fit status.	`true`	`true`/`false`
`canSwitchAutoCompleteStatus`	Displays the button to switch autocomplete.	`true`	`true`/`false`
`canSetFilters`	Displays the button to set filters.	`true`	`true`/`false`
`canSetStyles`	Displays the button to set styles.	`true`	`true`/`false`
`canSwitchSelectionStatus`	Displays the button to toggle selection mode.	`true`	`true`/`false`
`canSwitchOverviewStatus`	Displays the button to switch showing overview status.	`true`	`true`/`false`
`container.height`	Sets the view height.	1000	number
`container.width`	Sets the view width.	500	number
`explorable`	Double-clicking a node will load its neighbours in the view.	`true`	`true`/`false`
`exportedPdfFileName`	Allows you to specify exported PDF filename.		string
`filters`	An object of name-filter pairs.		filters object
`filterProperty`	A property on the node root that will reflect the node's filter state. Default `visible` property affects visibility. Other properties can be used e.g. for styling.	`visible`	string
`generateGroups`	Simplified parameter for creating groups.*	`[]`	Object with, for each key, an array of node objects
`groups`	Array of groups to be visualized.	`[]`	Array of group objects
`layout`	Sets the node layout.	`organic`	`organic`, `hierarchic`, `tree`, `orthogonal`, `circular`, `radial`, `seriesparallel`, `partial`, `singlecycle`, `recursiveshuffle`, `compactorthogonal`, `balloon`, `classictree`, `aspectratiotree`
`layoutOptions.edgeLabelOrientation`	Sets the orientation of the edge labels. `RELATIVE` orients the labels relative to the edges, `ABSOLUTE` orients them horizontally.	`RELATIVE`	`RELATIVE`/`ABSOLUTE`
`layoutOptions.edgeToEdgeDistance`	The minimum distance between two edges in the same layer	10	`Positive number`
`layouts`	Sets the list of the usable layouts.		`organic`, `hierarchic`, `tree`, `orthogonal`, `circular`, `radial`, `seriesparallel`, `partial`, `singlecycle`, `recursiveshuffle`, `compactorthogonal`, `balloon`, `classictree`, `aspectratiotree`
`layoutOptions.minimumLayerDistance`	The minimum distance between adjacent layers	20	`Positive number`
`layoutOptions.nodeToEdgeDistance`	The minimum distance between a node and a non-adjacent edge in the same layer	15	`Positive number`
`layoutOptions.nodeHalos`	Reserved space around the nodes	40	`Positive Number`
`layoutOptions.nodeToNodeDistance`	The minimum distance between two nodes in the same layer	30	`Positive number`
`layoutOptions.orientation`	Sets the orientation of the layout.	`TOP_TO_BOTTOM`	`TOP_TO_BOTTOM`/`LEFT_TO_RIGHT`/`BOTTOM_TO_TOP`/`RIGHT_TO_LEFT`
`name`	Name of the view.
`nodes`	The array of nodes to be visualized.	`[]`	Array of node objects
`nodeTemplates`	Vue templates for selected nodes (documented below)		Object
`relations`	The array of relations to be visualized.	`[]`	Array of relation objects **
`showOverview`	Displays overview box	`false`	`true`/`false`
`store`	Sets the default store for the YFilesView.	`application`	name of configured store
`state.selected.nodes`	Array of nodes that is selected.	`[]`	Array of node objects
`state.selected.relations`	Array of relations that is selected.	`[]`	Array of relation objects
`styles`	Object with selector-styling pairs applicable only to this YFilesView.		Styles object
`stylesEvaluation`	Determines whether all style properties should be evaluated, or only those using `evaluate(...)`. Can significantly improve performance if set to `explicit`.	`all`	`all`/`explicit`
`selectionMode`	Determines how nodes and relations can be selected, either by dragging a rectangular `marquee`, a free-form `lasso`, or only direct clicks on `individual` nodes. Selection by direct click is always enabled.	`marquee`	`marquee`, `lasso`, `individual`
`toolbarVisible`	Displays the buttons of yFiles View toolbar.	`true`	`true`/`false`
`zoomToFitStatus`	Specifies if the view should automatically zoom (out) to fit all visible nodes	`false`	`true`\|`false`

* The generateGroups parameter will generate group objects that will be set in groups. It is write-only, updated groups from groups will not appear in generateGroups. ** To visualize relations between two different stores, define meta.sourceStore and meta.targetStore on the relation
to indicate the stores of the source and target nodes.

Styles

YFilesView nodes, relations and groups can be styled in 3 ways:

1. User's styles

By default, the UserStyles of the currently logged in user will be applied to YFilesView.

2. UserStyles connected to YFilesView

The user's own styles can be replaced by UserStyles connected directly to the YFilesView with a USES relation:

(:IA_Function{type:YFilesView})-[:USES]->(:IA_UserStyles)

Any number of UserStyles can be connected to the YFilesView. They will be applied in order of the optional index property on the USES relation (no index is equivalent to index: 0). Styles with higher indexes will be applied later, overriding those with lower indexes.

Once a single UserStyles node is connected to the YFilesView, the user's own styles will no longer be applied.

3. YFilesView `styles` parameter

Finally, specific styles can be overridden using the styles parameter on the YFilesView. Styles from either the user (1) or connected UserStyles (2) will still be applied before. Styles defined in the styles will override other styles matching the same nodes/relations/groups.

4. Vue node templates

The $nodeTemplates parameter is an object with keys as a valid node selector (ex: node:label1:label2[property=value]) and the value a valid Vue(SVG) template. Please note that it does not make sense to use event bindings (v-on:) as you cannot declare functions for the template.

The root element of the template should be a <g>.

The template should create an element (ex: <rect>) that sets the node dimensions (width and height). You can insert HTML in the template by using <foreignObject> element.

Node properties can be accessed using the tag variable. For example tag.labels is the node's labels and tag.properties.name is the name property.

Available data in the template

Name	Description	Possible values
focused	Node is focused	Boolean
highlighted	Node is highlighted	Boolean
layout	Size and position of the node {x, y, width, height}	Object
selected	Node is selected	Boolean
tag	Node structure ({id, labels, properties, meta, ...})	Object
zoom	Zoom level	Number

To create clickable elements add class trigger-click to that element. Any data-<param-key>="<value>" attributes (<param-key> and <value> are arbitrary values) will be available as trigger data. To include the complete node set data-id, data-store attributes to the node's id and store.

Template example:

<g>
	<rect v-if="tag.selected" :width="500" :height="200" rx="5" fill="#DFFF00" stroke="orange" stroke-width="30" >
	</rect>
	<rect v-else :width="500" :height="200" rx="5" fill="#DFFF00" stroke="#DFFF00" stroke-width="3" >
	</rect>
	<template v-if="zoom >= 0.7">
		<foreignObject x="10" y="10" width="480" height="180">
			<div style="display: flex; flex-direction: column; height: 100%;">
				<div style="font-size: 12px; color: black;">
					<p style="white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; font-weight: 600;">
					{{tag.properties.title}}</p>
					<p style="white-space: normal; overflow: hidden; text-overflow: ellipsis;">
					{{tag.elementType}}</p>
				</div>
				<textarea class="scrollable" style="resize:none; width:100%; height:45%; margin-top: 5px; margin-bottom: 5px;  background-color: midnightblue; color: cyan; font-size: 10px;">
				{{tag.properties.description}}
				</textarea>
				<div style="display: flex; justify-content: center;">
					<button class="trigger-click" data-action="action" :data-id="tag.id" :data-store="tag.meta.store">
						Action
					</button>
				</div>
			</div>
		</foreignObject>
	</template>
	<template v-else>
		<foreignObject x="10" y="10" width="480" height="180" pointerEvents="all">
			<div style="font-size: 24px; color: black;">
				<p style="white-space: normal; overflow: hidden; text-overflow: ellipsis; font-weight: bold;">
					{{tag.properties.title}}
				</p>
			</div>
		</foreignObject>
	</template>
</g>

Setting the template in the YFilesView node properties:

nodeTemplates: evaluate({
	'node:Example': '<g><rect v-if="tag.selected" :width="500" :height="200" rx="5" fill="#DFFF00" stroke="orange" stroke-width="30" ></rect><rect v-else :width="500" :height="200" rx="5" fill="#DFFF00" stroke="#DFFF00" stroke-width="3" ></rect><template v-if="zoom >= 0.7"><foreignObject x="10" y="10" width="480" height="180"><div style="display: flex; flex-direction: column; height: 100%;"><div style="font-size: 12px; color: black;"><p style="white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; font-weight: 600;">{{tag.properties.title}}</p><p style="white-space: normal; overflow: hidden; text-overflow: ellipsis;">{{tag.elementType}}</p></div><textarea class="scrollable" style="resize:none; width:100%; height:45%; margin-top: 5px; margin-bottom: 5px;  background-color: midnightblue; color: cyan; font-size: 10px;">{{tag.properties.description}}</textarea><div style="display: flex; justify-content: center;"><button class="trigger-click" data-action="action" :data-id="tag.id" :data-store="tag.meta.store">Action</button></div></div></foreignObject></template><template v-else><foreignObject x="10" y="10" width="480" height="180" pointerEvents="all"><div style="font-size: 24px; color: black;"><p style="white-space: normal; overflow: hidden; text-overflow: ellipsis; font-weight: bold;">{{tag.properties.title}}</p></div></foreignObject></template></g>'
})