Back to Clafer Tools

ClaferMoo Visualizer is a graphical user interface (GUI) for multi-objective optimization space visualization and exploration for product lines. It is an interactive tool with complex state and many constraints among the GUI elements. In this page, we attempt to model the variability of the abstract state of the visualizer.

The tool ClaferMooVisualizer

The visualizer can be in one of four states:

• init, when empty GUI is loaded and it is ready to open a file,
• loadingAndProcessing, when a file is being loaded, compiled, and optimized,
• error, when the processing resulted in an error, and
• ready, when the GUI has been populated with optimization results and the users perform their tasks.

The visualizer also provides three main views: graph, table, and analysis, which are always opened in any state.

abstract ClaferMooVisualizer
    deployedAtURL -> string
    xor state
        `init
        `loadingAndProcessing
        `error
        `ready
    views
        `graph
        `table
        `analysis

For example, our public instance of the visualizer could be described as follows after it’s loaded:

viz1 : ClaferMooVisualizer
    [ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
    [ init ]

We model each abstract state individually.

The state init

In this state, the visualizer is ready to either open a file from a provided claferFileURL or upload from the provided upload dialog.

abstract mux init
    claferFileURL -> string ?
    claferFileUpload -> string ?

There are three possibilities here:

1. the empty visualizer is opened

viz2 : ClaferMooVisualizer
    [ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
    [ init ]
    [ no claferFileURL ]
    [ no claferFileUpload ]

2. the visualizer is opened with a claferFileURL, e.g., entering this URL http://t3-necsis.cs.uwaterloo.ca:8092/?claferFileURL=server/model.cfr will first load the visualizer in this state:

viz3 : ClaferMooVisualizer
    [ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
    [ claferFileURL = "server/model.cfr" ]

3. after 1), the file is selected and the Upload button is pressed:

viz4 : ClaferMooVisualizer
    [ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
    [ claferFileUpload = "model.cfr" ]

It is not possible to provide both the claferFileURL and claferFileUpload since the file from URL is processed immediately not giving the user to select the file and press the Upload button.

The state loadingAndProcessing

In this state, the GUI is displaying the Loading and Processing ... message and then immediately transitions to either the state error or ready.

abstract loadingAndProcessing

The state error

There are a few possible errors that can occur during loading and processing.

abstract xor error
    xor loading
        invalidClaferFileURL -> string
        parseError -> string
        compileError -> string
        missingGoals
    xor processing
        optimizationError -> string
        timeout
        outOfMemory

The state ready

This is the main state in which the views are populated with data and the users can perform the optimization space exploration.

The optimization problem contains a number of quality Dimensions and optimization Goals.

abstract Dimension

abstract Goal
    dimension -> Dimension
    xor kind
        minimizee
        maximizee

For example, the Android4 optimization problem has four quality dimensions:

performance : Dimension
energy : Dimension
security : Dimension
mass : Dimension

and four optimization goals:

maxPerformance : Goal
    [ dimension = performance ]
    [ maximizee ]

minEnergy : Goal 
    [ dimension = energy ]
    [ minimizee ]

maxSecurity : Goal
    [ dimension = security ]
    [ maximizee ]

minMass : Goal 
    [ dimension = mass ]
    [ minimizee ]

there maybe more than four dimensions and goals.

in the state ready, the visualizer maintains and displays the list of the goals:

abstract ready
   goals -> Goal +

For example, the visualizer’s state ready would look as follows:

r1 : ready 
    [ goals = maxPerformance, minEnergy, maxSecurity, minMass ]

The view graph

This view, displays bubbles in an up to four dimensional space at the same time. Each bubble represents an optimal product.

abstract Product

abstract Bubble
    x -> integer
    y -> integer
    opacity -> integer
    size -> integer
    product -> Product

[ all disj b1; b2 : Bubble | b1.product != b2.product ]   // disjoint
[ # Bubble = # Product ]                                  // cover

In our example problem, there will be 28 bubbles representing 28 optimal products:

products : Product 28
bubbles : Bubble 28

Different dimensions are visualized using four means: xAxis, yAxis, opacity, and size. Different dimensions can be visualized by the above means as follows but no two means can display the same dimension.

abstract graph
    xAxis -> Dimension
    yAxis -> Dimension
    opacity -> Dimension
    size -> Dimension
    [ xAxis != yAxis && xAxis != opacity && xAxis != size ]
    [ yAxis != opacity && yAxis != size ]
    [ opacity != size ]
    bubble -> Bubble *

For example, the graph view will be loaded by default with the following assignment of dimensions:

g1 : graph 
    [ xAxis = performance ]
    [ yAxis = energy ]
    [ opacity = security ]
    [ size = mass ]
    [ bubble = bubbles ]

the users can change which dimension will be displayed by which means. This is particularly important in case there are more than four dimensions - the users can pick the four dimensions they want to visualize.

TODO: assignment of x, y, opacity, and size values to bubbles from products.

The view table

abstract table

The view analysis

abstract analysis

End