Graph Visualization Client Side

GUI is based on the open source library SpringGraph, which had been modified in order to fit project's needs, and on Web Services to browse the “LinkedElements" links of items from our server side.

Main flow

The main flow of the client size is represented by the following diagram:

clientFlow.jpg

Implementation

Application

MainApplication.mxml - The entry point for the application. The main page of the application which is written in .mxml formmat.
This file contains description of all the contained elements such as the SearchBox, SearchButton, and also implementation on needed event which are triggered by user's actions.

ItemView.mxml - Represents a physical graph item. Contains the description of single DB element which is basically a node in the graph. Defines the node size and other display settings. Also handles the DoubleClick event.

DBItem.as - The class behind the ItemView.mxml. Represents a single DB element and contains all the logic. On creation, retreives the data from the server and analyze the returned xml file to extract the name, image url and related DB items. For each one of the related elements the same process occurs.

DBId.as -Handles the convertion between item's name and item's id. Since graph's elements must be unique, each has a representation of id in the DB. Users are not aware of this (and shouldn't be) and so when input is passed as name (string) it is converted to id.

EdgeSettings.as - Represents the setting of the edges in the graph - color, thickness, the bond strength of two items, and the list of shared work (movies on IMDB, publications on DBLP).

DBService.as - Handles connection to the server to retreive the data by calling the php files. The calls are made by HTTP Request and on response from the serever, the delegate function given to the method is called on the client side. The services are unique for IMDB and DBLP and according to the chosen DB a specific call for a specific php file is made.

SpringGraph Flex Component

SpringGraph is an Adobe Flex 2.0 component that displays a set of items that are linked to each other. The component calculates the layout for the items using algorithms that are based on the size and links of each item, and draws lines to represent the links. The component allows the user to drag and/or interact with individual items. The SpringGraph component was slightly changed by us in order to present the strength of each connection between two items. For IMDB it represents the number of movies/TV shows the two actors appeared on together, and for DBLP it represents the number of articles the two wrote together.
The SpringGraph needs to be provided of two things:

DATA

  • The data for the SpringGraph was provided by us using a data structure called Graph. The data itself was of course taken from the http response we got from the server.

VIEW

  • The View is the way an item should look like. That was implemented by us (see above) as an .mxml file format which defined for the SpringGraph the visuality of a single item.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License