Handling ICollection format

Basic Integration

The ICollectionView instances are commonly used to convey Hierarchical data. It includes :

Thus, when using this format as a data input of Visualizer, it will be interpreted as a hierarchical graph with expand/collapse option. All Classes implementing the ICollectionView interface are treated in the same way. The treatment is even extended to Arrays and raw objects by converting them to parse-safe ICollectionView instances.
Visualizer uses tree descriptors and cursors to dive into the hierarchy and create the corresponding graph. Using such a process, nodes are created with the corresponding data unit (e.g XML node) and links are implicitly interpreted from the hierarchy and then created. Note that for ArrayCollection instances, update events are handled and automatically considered in the current rendered graph.
In the following example, we use a simple ArrayCollection instance to feed the Visualizer with an organizational chart. The data input can be an XML, any object with children property or even an array.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:visualizer="fr.kapit.visualizer.*">
	<fx:Declarations>
		<s:ArrayCollection id="dataProvider">
			<fx:Object name="Visualizer">
				<fx:children>
					<fx:Object name="Parsing"/>
					<fx:Object name="Data"/>
					<fx:Object name="Layout">
						<fx:children>
							<fx:Object name="Algorithms"/>
							<fx:Object name="Computation"/>
							<fx:Object name="Graph Drawing"/>
						</fx:children>
					</fx:Object>
					<fx:Object name="Flex">
						<fx:children>
							<fx:Object name="Component"/>
							<fx:Object name="Styles"/>
							<fx:Object name="AS3"/>
							<fx:Object name="Halo/Spark"/>
						</fx:children>
					</fx:Object>
					<fx:Object name="Flexibility"/>
					<fx:Object name="Speed"/>
				</fx:children>
			</fx:Object>
		</s:ArrayCollection>
	</fx:Declarations>
	<visualizer:Visualizer 
		width="100%" height="100%" 
		dataProvider="{dataProvider}"
		nodeLabelFields="name"
		layout="mindMap">
	</visualizer:Visualizer>
</s:Application>

Advanced Integration

In major business applications, data is conveyed in an ICollectionView based data structure (XML or ArrayCollection). Analyzing such data based on its structural patterns (hierarchical aspect) cannot often give a correct picture of the information behind it. The information conveyed can be cyclic or grouped structures which can be extracted via object properties and instance referencing.
To illustrate this concern, let's consider an array collection containing objects with children property. The children value is an array containing references to some object instances in memory. The array collection is created at CREATION_COMPLETE of the Visualizer based on object instances already created.
<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			protected function visualizer_creationCompleteHandler(event:FlexEvent):void
			{
				var dataProvider:ArrayCollection = new ArrayCollection([o1]);
				o1.children = [o2,o7];
				o2.children= [o3,o4,o5,o6];
				o7.children= [o3,o8,o9,o10,o6];
				visualizer.dataProvider = dataProvider;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:Object id="friendRelationShip" name="friend"/>
		<fx:Object id="colleagueRelationShip" name="colleague"/>
		<fx:Object id="o1" name="Me" uid="1" favorite="{friendRelationShip}"/>
		<fx:Object id="o2" name="Jean" uid="2" group="Friends" favourite="{friendRelationShip}"/>
		<fx:Object id="o3" name="Bedis" uid="3" group="Friends" favourite="{friendRelationShip}"/>
		<fx:Object id="o4" name="Yoann" uid="4" group="Professional contacts" favourite="{colleagueRelationShip}"/>
		<fx:Object id="o5" name="Didier" uid="5" group="Friends" favourite="{friendRelationShip}"/>
		<fx:Object id="o6" name="Yin" uid="6" group="Friends" favourite="{friendRelationShip}"/>
		<fx:Object id="o7" name="Vincent" uid="7" group="Professional contacts" favourite="{colleagueRelationShip}"/>
		<fx:Object id="o8" name="Badou" uid="8" group="Professional contacts" favourite="{colleagueRelationShip}"/>
		<fx:Object id="o9" name="Benoit" uid="9" group="Professional contacts" favourite="{colleagueRelationShip}"/>
		<fx:Object id="o10" name="Yann" uid="10" group="Professional contacts" favourite="{colleagueRelationShip}"/>
		<fx:Object id="o11" name="Alexis" uid="11" group="Professional contacts" favourite="{colleagueRelationShip}"/>
	</fx:Declarations>
Integrating such a dataProvider will provide biased information about the data provider and its structural patterns in addition to redundant information.
Code snippet Output
 <visualizer:Visualizer 
	id="visualizer" 
	width="100%" height="100%"
	nodeLabelFields="name"
	layout="hierarchicalCyclic"
	creationComplete="visualizer1_creationCompleteHandler(event)"/>

We can see that redundant instances "Bedis" and "Yin" are present as children of "Jean" and "Vincent" and there are no cycles created. "Bedis" and "Yin" are represented by two nodes each and the graph is hierarchical which is not the correct representation of the data. Visualizer offers the possibility to correctly interpret the data via a set of properties (idProperty, groupProperty and linkProperty). We will be discussing each of these properties by taking the above data as dataProvider and taking a graph visualization as an integration scenario.

Using idProperty

For any data item in any ICollectionView dataProvider, idProperty is the property whose value is considered as the unique id of the item (node, group or link). In the dataProvider defined above, the uid property value refers to the unique identifier of the data item and consequently of the visual node. Setting the idProperty to uid enables generating a cyclic graph that represents correctly the dataProvider.
The following snippet describes the Visualizer integration of such a scenario and its output.
Code snippet Output
 <visualizer:Visualizer 
	id="visualizer" 
	width="100%" height="100%" 
	idProperty="uid"
	nodeLabelFields="name"
	layout="hierarchicalCyclic"
	creationComplete="visualizer1_creationCompleteHandler(event)"/>

Using groupProperty

Any data item in any ICollectionView dataProvider can be depending to a given contextual domain (in our case relationship dependency). It can be important in some business application to show such dependency via grouping implementation in Visualizer. This need is provided via the groupProperty property in Visualizer. It indicates on each item the property which value refers to the group dependency. The value is considered as the unique id of the group.
This property won't work on ICollectionView dataProvider if the idProperty isn't set to a correct value.
The following snippet describes the Visualizer integration of such a scenario and its output.
Code snippet Output
 <visualizer:Visualizer 
	id="visualizer" 
	width="100%" height="100%" 
	idProperty="uid"
	groupProperty="group"
	nodeLabelFields="name"
	layout="hierarchicalCyclic"
	creationComplete="visualizer1_creationCompleteHandler(event)"/>

Using linkProperty

The difficulty with interpreted ICollectionView data providers is that we aren't able to define a data for each interpreted link. As each link is created based on the structural patterns of the data input (hierarchy), the link is missing data. Visualizer offers the possibility to add such information on interpreted links via linkProperty. This property refers to a property in a node data object which value will be assigned to the created link. The value is assigned to the link created between the node data object and its parent in the ICollectionView structure.
The following snippet describes the Visualizer integration of such scenario and its output.
Code snippet Output
 <visualizer:Visualizer 
	id="visualizer" 
	width="100%" height="100%" 
	idProperty="uid"
	linkProperty="favourite"
	nodeLabelFields="name"
	linkDecoratorLabelFields="name"
	layout="hierarchicalCyclic"
	creationComplete="visualizer1_creationCompleteHandler(event)"/>