User interface architecture
CubeViz has a certain architecture which is inspired by MVC pattern and BackboneJs. On this page you will find an overview about how CubeViz is integrate into OntoWiki and about its architecture.
OntoWiki's standard theme is divided into three areas: the sidebar, head area and content area. The following description is related to OntoWiki 0.9.10.
It contains modules which were registered by components. CubeViz uses sidebar to register a module which provides an user interface to configure facets for the exploration.
CubeViz add a couple of items to the main menu. Each item is basically a link to a certain area of CubeViz.
The part of OntoWiki is heavily used by each component. Here a component provides their user interfaces and interacts with an user. CubeViz uses this area to provide visualization and exploration tools.
This image illustrates two of CubeViz user interfaces. On the left side there is the interface for exploration and visualization of DataCube information. It uses the left sidebar and the content area.
On the right side you see an illustration of the analyze user interface, which gives you an overview about a certain DataCube and if it fits the Check Constraints. This user interface only uses the content area, but if you previously selected a model containing DataCube information, you will see the left sidebar, as in the exploration and visualization part, as well.
Inspired by BackboneJs, CubeViz uses a similar architecture to manage the parts of the user interface. Basically, there are two types of elements: views and models.
A view represents a certain part of the user interface and acts like a view and controller from the MVC-pattern. It interacts with the user, display data and trigger events, if necessary.
On the other hand, a model represents a certain part of the business logic. A view uses the models to gather information or do something else, almost like in MVC-pattern.
In CubeViz there is a class CubeViz_View_Application. It is located in folder typescript/src/Model/CubeViz/View and manages view instances. Furthermore it provides a mechanism to enable communication between the views. That was not possible in Backbonejs, each View is autarchical and acts without taking care of the other views. But the mentioned class group several views together and provides function to enable catching events triggered by foreign views. An instance of CubeViz_View_Application has to group a certain amount of views, which represents a semantic group. For instance, the user interface of the left sidebar consists of several views, together they form the left sidebar.
Each view has to be derived from class CubeViz_View_Abstract. It provides a couple of functions which helps the View to interact with the application and other views.
The event handling is basically the same as in Backbonejs, but in CubeViz there are two types of events: local and global events.
A local one shows only in the view itself, but a global event is getting triggered by one of the views of the application and all registered views getting informed about that. That means, a view can trigger local events which are only acts in itself or trigger a global event.
To setup global event there are these functions, which are part of CubeViz_View_Abstract:
Function bindGlobalEvents gets a list of objects, which specify the event name and the related event handler. Here an example:
this.bindGlobalEvents([
{
name: "onStart_application",
handler: this.onStart_application
}
]);
In this example bindGlobalEvents gets one object, which registers the function onStart_application of the related View for the global event onStart_application. Usually, you use the same name for event handler and event name.
Internally, CubeViz attaches global events to the application instance using on-function of jQuery. Here the related code:
/*
* event object example:
* ---------------------
* {
name: onChange_visualizationName
* handler: function(event, data){...}
* }
*/
$(self).on(event.name, $.proxy(event.handler, callee));
Using the proxy-function of jQuery enables to set the related view as callee. So if you are using the keyword this in the event handler, you will be located in the related view and so be able to use its functions. Altogether, there are only a handful functions which provide these event functionality but everything relies on jQuery functions such as
The following illustration shows how the event system and view interaction works. The example is based on the left sidebar. You see a list of six views which are together the dataselection module. That module is represented by an application instance, which manages these six views. In the example illustration, the event onChange_selectedDS was triggered using function triggerGlobalEvent. First the event was triggered and afterwards, the application calls the event handler for all registered views. This will result in a full reload of the left sidebar.
In this section we introduce you into the TypeScript file and folder structure of CubeViz and their purpose. The root folder is located under typescript/src. Furthermore introducing the according frontend file which contains the HTML.
View related files are located under: View/DataSelectionModule. The left sidebar consists of the following files (sort by view order):
- DataSet.ts
- Slice.ts
- Attribute.ts
- Measure.ts
- Component.ts
- Footer.ts
Related models are located under Model/DataCube, in case you wanna handle DataCube elements. The Views heavily rely on these classes. The files under Model/CubeViz are not really important, except the View_Abstract and View_Application.
According template file containing HTML:
- public/templates/cubeviz/DataselectionModule.phtml
The folder indexAction contains all related files for Visualization, Exploration and Visualization Selector. Additionally it also has the header and export area. The related files are named by the mentioned user interface parts:
- ExportArea.ts
- Header.ts
- Legend.ts
- Visualization.ts
- VisualizationSelector.ts
The visualization part heavily relies on the classes located in Model/CubeViz/Visualization, because they provide functions to prepare retrieved information and setup adequate visualizations. CubeViz in version 1.0 supports HighCharts and D3js as visualization libraries. Related files are located under:
- D3js: folder Model/CubeViz/Visualization/D3js
- HighCharts: folder Model/CubeViz/Visualization/HighCharts
The structure of the HighCharts folder differs from D3js, because in D3js there is one class to handle everything. But in HighCharts there is the class Chart.ts and every other classes is derived from it. It provides the main functionality and some other classes adapt it, even its barely. For instance, Pie.ts has a different way to prepare the data.
According template file containing HTML:
- public/templates/cubeviz/index.phtml
Related files are located in folder CompareAction. They are:
- DatasetSelection.ts
- DimensionOverview.ts
- GeneralDatasetInformation.ts
- MeasureAndAttributeInformation.ts
- ModelSelection.ts
- VisualizationSetup.ts
File VisualizationSetup.ts is the center of the generation of merged DataCubes. The files Model- and DatasetSelection.ts only handles the selection of a two models and data sets. And the files GeneralDatasetInformation.ts and MeasureAndAttributeInformation.ts display information about DataCube-elements and statistical information about the values itself.
The following file
- ClusterVisualization.ts
is a little bit different, because it creates an artificial DataCube to visualize clusters.
According template file containing HTML:
- public/templates/cubeviz/compare.phtml