Introduction

Elastic Search is a Flex component that enables filtering and discovering of large amounts of data given several properties (filters). It can be considered as an information management and visualization tool. It is used specialy to browse the multi-facetted data structure in an interactive and navigable way. Using a custom parsing method and filtering engine, any data (or metadata) can be clearly and properly filtered. The component has several options for user interaction and visual customization.

Back to Top

Integration

Elastic Search can be integrated easily in any Flex application. Developer will only need to :

Import the SWC containing Elastic Searh component
Insert in the MXML code
Specify the dataProvider (XML, CSV, ArrayCollection) thanks to our data parsing library, Kap Lab components are now able to handle any data source.
Specify the main parameters
Specify other optional parameters (see the section below)

Basic Integration Sample

Back to Top

Data Provider

ElasticSearch was designed to handle any type of data. Using a common internal data parsing model, it enables advanced interpretation of any input data via reconstruction options that can applied on CSV files and ICollectionView instances. Thus, using Elastic Search, any data have different meanings.

Like other Kap Lab components, Elastic Search handles the following data input:

ICollectionView instances including XML, ArrayCollection;
Objects with children property or with a custom TreeDataDescriptor;
CSV files.

ICollectionView data

An ICollectionView is a view onto a collection of data. All Classes implementing the ICollectionView interface (XML, XMLListCollection, ArrayCollection) are handled in the same way by the component.

In the following example, we show how Elastic Search provide an innovative way to filter an XML input and show extra data patterns.

XML Integration Sample

MXML Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:elasticsearch="fr.kapit.elasticsearch.*" xmlns:kapit="fr.kapit.*">
	<mx:ArrayCollection id="myDataProvider">
		<mx:Object name="Jodie" country="Belgique" language="French" continent="Europe"/>
		<mx:Object name="Kate" country="Australia" language="English" continent="Asia Pacific"/>
		<mx:Object name="David" country="USA" language="English" continent="Europe"/>
		<mx:Object name="Nicolas" country="Russia" language="Russian" continent="Europe"/>
		<mx:Object name="Michael" country="USA" language="English" continent="Europe"/>
		<mx:Object name="Isabelle" country="France" language="French" continent="Europe"/>
		<mx:Object name="Dudek" country="Russia" language="Russian" continent="Europe"/>
		<mx:Object name="Hilary" country="USA" language="English" continent="Europe"/>
		<mx:Object name="Georges" country="Finland" language="English" continent="Europe"/>
		<mx:Object name="Fani" country="Italia" language="Italian" continent="Europe"/>
		<mx:Object name="Bertrand" country="France" language="French" continent="Europe"/>
		<mx:Object name="Cyril" country="France" language="French" continent="Europe"/>
		<mx:Object name="François" country="Belgique" language="French" continent="Europe"/>
		<mx:Object name="Slim" country="Tunisia" language="Arabic" continent="Africa"/>
		<mx:Object name="Patrick" country="France" language="French" continent="Europe"/>
		<mx:Object name="Abdu" country="Nigeria" language="Nigerian" continent="Africa"/>
	</mx:ArrayCollection>
	<mx:VBox width="100%">	
		<elasticsearch:ElasticSearch
		height="270"
		width="100%"
		filterListFontColor="0x111111"
		firstColor="0x4b98da"
		lastColor="0xc9dfec"
		filterTitleFillColors="{['0xAADDAE','0xDDDDAE']}"
		filterTitleFillAlphas="{['0.4','0.2']}"
		dataProvider="{myDataProvider}"
		filterProperties="{['continent','country','language','name']}" 
		filterLabels="{['Continent','Country','Language','Student']}"/>
	</mx:VBox>
</mx:Application>

Output

Back to Top

CSV Files

CSV Files are organized in rows and columns using a CSV delimiter. A data field have a row index and column index, generally described in a String format while it can represent a Date, a Number or other content. Elastic Search handles CSV parsing, reconstruction and data content interpretation via a set of options. In this part we will show how Elastic Search meets needs for CSV content management and interpretation.

Elastic Search provides a set of properties enabling an advanced CSV data input parsing and analysis. These properties and methods are following:

REQUIRED idColumnHeader : used to define ID column for CSV rows;
OPTIONAL csvDelimiter : used to indicate the delimiter of the CSV file(by default it is set to ";");
OPTIONAL withHeaders : used to indicate if the first row should be considered as column headers (by default is set to true);
OPTIONAL recordDelimiter : used to indicates the delimiter of a field (if it exists). It is generally used when data field content contains CSVDelimiter string as in such situations CSV parsing produces wrong results. By default, the recordDelimiter property is "" and can be modified when needed.
OPTIONAL reportingFunction: used to transform the data fields arrays into a real data by applying standard or custom functions.
It is advised to visit the Components Data Input section of all Kap Lab components to get more details about the data parsing properties and functions.

CSV File Integration Sample

Back to Top

Objects with children property or with customTreeDataDescriptor

In some applications, it can be interesting to display the content of internal data structures like in the case of administration or introspection application. Elastic Search allows such functionality, as the developper should only give the reference to its object instance and a custom Tree Data Descriptor (via the treeDataDescriptor property) allowing custom navigation inside the object (only if it doesn't have the children property).
The options used for ICollectionView instance described previously can be applied to this kind of data format.

Back to Top

Rendering

Filters Rendering

REQUIRED filterProperties: this property is used to specify the properties used to browse the data source. In case of an XML data source, the user should add at '@' before each attribute;
OPTIONAL filterLabels : array containing titles of each facet, the filterLabels property should be an array and should be ordered in the same way that filterProperties are.

In order to let the user interact with Elastic Search, the component exposes some methods that enable the developer to customize the browsing pattern of the metadata values at run time.

addFIlter: used to add a new filter to Elastic Search of it doesn't exist yet. This method gets a filterProperty(string) and the the filterLabel(String) as parameters;
removeFilter: this method used to remove an existing filter. It uses a String like filterProperty.

In order to have access to all the properties available for Elastic Search please refer to the ASDoc.

Back to Top

Colors Rendering

In order to allow users to interact and to zoom on specific values or approaches on Elastic Search, users can provide a color policy and choose their color combinations. The color of each item is generated relatively to its weight. So a brighter background indicates a higher weight (occurrence) of the metadata value compared to the overall values. To visualize these characteristics, the developer can set the following properties:

colorPolicy Property: this property is used to choose the policy that the user wishes to use to create his color distribution. This property can get three possible values: bichromatic, monochromatic or spectrum.
firtColor: this color is used to choose the color of the item that has the lowest weight. The color code should be decimal initialized by an '0X'. for example the black color is set : 0x000000
lastColor: this property is used to set the color of the metadata value that has the highest weight. The color should have the same format as the firstcolor property.

These are the possible scenarios:

No coloring property is introduced. Elastic Search uses the spectrum policy that is defined as a default policy.
The firstcolor is set: the monochromatic policy is used
The first and the last color are defined: Elastic Search uses the bichromatic policy to generate to color of each item. The colors are generated using the RGB (Red,Green,Blue) system and the occurrence of each metadata value compared to the overall souce.

Back to Top

Display Rendering

The main feature of Elastic Search is browsing the multi-facetted data structure in an easy way. This is enhanced by visualizing the relative proportion of metadata compared to the whole data source. Elastic Search is enhanced with two properties : itemMaxHeight and itemMinHeight that are used to calculate the height of each metadata value and visualize its relative proportion by size.
The relative properties are:

itemMaxHeight: this value indicates the height of the item with the higher weight compared to the overall distribution. The default value is 100.
itemMinHeight: this value indicates the height of the item with a lower weight compared to the overall distribution. The default value is 20.
useDefaultHeight: this property gets a Boolean value. When it is set to true, Elastic Search will visualize all the items with the same size. The default value of this property is False.
showToolTip: used to enable/disable the toolTip display.

Back to Top

Events

Elastic Search shares its status and user interaction facts using events. The developer just needs to register (listen) to one of these events to perform a given task.

The events are listed as following :

Change : dispatched when a filter is changed;
filterBroken : dispatched when a new filter is selected
filterFinished : dispatched once all the filters are dispatched

Back to Top

Styles

Elastic Search can be styled given a Style Object containing several properties (color, thickness, alpha, dashed or not, extremities rendering). By setting the styleChanged property, the filterLists are re-styled given information in the provided style object.
To customize the display of the component, the developer can style the filterList, the filterTitle or even styling the itemRenderer.
To get the used style, Elastic Search exposes a method getStyle.

Back to Top

Common Style

In this section we will begin by describing the common properties between the three styling aspects. These styling paramaters are common between the list and the title of each item of Elastic Search. the Style name is formed by the styleObject (filterList, filterTitle) and the property name. for example for the borderThickeness, we find the filterListBorderThickness and the filterTitleBorderThickeness.

These common styling properties are:

Border Style

borderThickeness : Item thickeness (1 by default);
BorderColor: Item border color (0x000000 by default);
BorderAlpha: Item border alpha (0x000000 by default);

Font Style

fontColor: Item font color (0x000000 by default);
fontFamily: Item font family;
fontWeight: Item font weight;
fontSize: Item font size;

Fill Style

fillColor : Item fill color;
fillAlpha : Item fill alpha (1 by default);

Back to Top

Specific Style

In this section, we will descibe some private styling objects that are specific for each item of Elastic Search.

List Style

gap : The gap between the different lists;
size : the list size;

Title Style

textAlign: the title text align;
height : the title height;

Item Style

The behaviour and state of Elastic Search can be also styled by providing a item renderer style object that describes the item rendering at roll over ( via itemRollOverColor property ) or click ( via the
itemSelectionColor property).

The Item Renderer can be also customized using these style attributes :

itemBackgroundColor: Item background color ;
itemDisabledColor: Unselcted (idle) Item color ;
itemSelectionSize: Selected Item size ;
itemReducedSize: Reduced Item size ;
itemSize: Item size ;

The behaviour and state of Elastic Search style is defined by the combination of the item, list and title provided style object.

To get more information about the different styles, please refer to the AsDoc.

Back to Top

Developer Guide