Handling GraphML format

The GraphML format is a standard format that describes graphs in a simplified way. It is an XML based format based on predefined tags like <node&rt; and <edge&rt; tags (see GraphML primer). All GraphML specifications are handled except hyper edges. This includes: In order to let Visualizer distinguish XML input from GraphML input, the GraphML xml must contain the surrounding <graphml> .... </graphml> tag. Other additional useful GraphML parsing and display functionalities have been added: Note: In the following paragraphs we will be using the following integration snippet. The dataProvider value refers to the used data source in each part.
	<visualizer:Visualizer
		width="100%" height="100%" 
		dataProvider="{dataProvider}"
		nodeLabelFields="name"
		linkDecoratorLabelFields="type"
		groupLabelField="name"
		layout="hierarchicalCyclic"
		coloringPolicy="bichromatic"/>

Simple GraphML integration

Beyond using standard GraphML (GraphML declarations and attributes), Visualizer is able to parse GraphML items in other non standard ways (declaring attributes and their values directly in the node or edge). It is also capable of extracting disconnected graphs, determining their topology (hierarchical or cyclic) and enabling extra features according to the GraphML data.
After parsing, each visual element in the Visualizer will have as data value an object whose properties are the declared attributes in the data it represents. These attributes are supposed to be Strings (data type recognition is not performed).

In the following snippet we describe a basic GraphML dataProvider and the generated graph. Notice how Visualizer (and Diagrammer) interpret the data (non standard attributes) and how topological structure is depicted (enabling coloring and expand/collapse feature on the hierarchical part of the data).
Implementation codeOutput
	<graphml>
		<node id="n1" name="node1"/>
		<node id="n2" name="node2"/>
		<node id="n3" name="node3"/>
		<node id="n4" name="node4"/>
		<node id="n5" name="node5"/>
		<node id="n6" name="node6"/>
		<node id="n7" name="node7"/>
		<node id="n8" name="node8"/>
		<edge id="e1" type="type1" source="n1" target="n2"/>
		<edge id="e2" type="type2" source="n1" target="n3"/>
		<edge id="e3" type="type3" source="n4" target="n5"/>
		<edge id="e4" type="type4" source="n5" target="n6"/>
		<edge id="e5" type="type5" source="n6" target="n7"/>
		<edge id="e6" type="type6" source="n7" target="n8"/>
		<edge id="e7" type="type7" source="n8" target="n4"/>
	</graphml>
	

GraphML and group integration

Groups are generated according to the standard declaration of GraphML meta nodes. The same features in simple GraphML parsing are available for GraphML parsing:
In the following snippet we describe a basic GraphML dataProvider with groups and the generated graph. Notice how Visualizer (and Diagrammer) interpret the data and groups.
Implementation codeOutput
	<graphml>
		<node id="n0" name="node0"/>
		<node id="n1" name="node1"/>
		<node id="n2" name="node2"/>
		<node id="n3" name="node3"/>
		<node id="n4" name="node4"/>
		<node id="n5" name="node5">
			<graph id="n5:" edgedefault="undirected">
				<node id="n5::n0" name="node5-0"/>
				<node id="n5::n1" name="node5-1"/>
				<node id="n5::n2" name="node5-2"/>
				<edge id="e0" source="n5::n0" target="n5::n2" type="type0"/>
				<edge id="e1" source="n5::n1" target="n5::n2" type="type1"/>
			</graph>
		</node>
		<node id="n6" name="node6">
			<graph id="n6:" edgedefault="undirected">
				<node id="n6::n0" name="node6-0">
					<graph id="n6::n0:" edgedefault="undirected">
						<node id="n6::n0::n0" name="node6-0-0"/>
					</graph>
				</node>
				<node id="n6::n1" name="node6-1"/>
				<node id="n6::n2" name="node6-2"/>
				<edge id="e10" source="n6::n1" target="n6::n0::n0" type="type10"/>
				<edge id="e11" source="n6::n1" target="n6::n2" type="type11"/>
			</graph>
		</node>
		<edge id="e2" source="n5::n2" target="n0" type="type2"/>
		<edge id="e3" source="n0" target="n2" type="type3"/>
		<edge id="e4" source="n0" target="n1" type="type4"/>
		<edge id="e5" source="n1" target="n3" type="type5"/>
		<edge id="e6" source="n3" target="n2" type="type6"/>
		<edge id="e7" source="n2" target="n4" type="type7"/>
		<edge id="e8" source="n3" target="n6::n1" type="type8"/>
		<edge id="e9" source="n6::n1" target="n4" type="type9"/>
	</graphml>
	

GraphML and ports integration

GraphML supports declaring the locations on each node where links are connected. These locations are names ports for nodes and anchors for links and the visualizer supports GraphML ports and anchors.
Each declared anchor is registered in the anchors property (a Descriptor containing anchoring description) in each visual node (ISprite instance) that specifies its anchoring. Each visual link (ILink instance) will get its sourceAnchorIndex and targetAnchorIndex properties updated with the right value (index in the source or target node anchors).

In the following snippet we describe a basic GraphML dataProvider where several anchors are defined. Notice how Visualizer (and Diagrammer) anchors are taken into account in layout and in displacing nodes.
Implementation codeOutput
	<graphml>
		<graph id="G">
				<node id="n0" name="node0">
					<port name="North"/>
					<port name="South"/>
					<port name="East"/>
					<port name="West"/>
				</node>
				<node id="n1" name="node1">
					<port name="North"/>
					<port name="South"/>
					<port name="East"/>
					<port name="West"/>
				</node>
				<node id="n2" name="node2">
					<port name="NorthWest"/>
					<port name="SouthEast"/>
					<port name="East"/>
				</node>
				<node id="n3" name="node3">
					<port name="NorthEast"/>
					<port name="SouthWest"/>
					<port name="East"/>
				</node>
				<edge source="n0" target="n3" sourceport="West" targetport="East" type="anchorable"/>
				<edge source="n0" target="n1" sourceport="South" targetport="North" type="anchorable"/>
				<edge source="n0" target="n2" sourceport="South" targetport="East" type="anchorable"/>
				<edge source="n1" target="n2"  type="nonAnchorable"/>
			</graph>
		</graphml>