---
title: Abstract State of ClaferMoo Visualizer
toc: false
categories: dogfooding
...

> Back to [Clafer Tools](/ClaferTools/Overview)

[ClaferMoo Visualizer](https://github.com/gsdlab/claferMooVisualizer) 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: 

* `initial`, 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.

```clafer
abstract ClaferMooVisualizer
    deployedAtURL : string
    xor state
        `initial
        `loadingAndProcessing
        `error
        `ready
    views
        `graph
        `table
        `analysis
```

For example, our [public instance of the visualizer](http://gsd.uwaterloo.ca:5002) could be described as follows after it's loaded:

```clafer
viz1 : ClaferMooVisualizer
    [ deployedAtURL = "gsd.uwaterloo.ca:5002" ]
    [ initial ]
```

We model each abstract state individually. 

## The state `initial`

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

```clafer
abstract mux initial
    claferFileURL : string ?
    claferFileUpload : string ?
```

There are three possibilities here: 

1) the empty visualizer is opened

```clafer
viz2 : ClaferMooVisualizer
    [ deployedAtURL = "gsd.uwaterloo.ca:5002" ]
    [ initial ]
    [ no claferFileURL ]
    [ no claferFileUpload ]
```

2) the visualizer is opened with a `claferFileURL`, e.g., entering this URL `http://gsd.uwaterloo.ca:5002/?claferFileURL=server/model.cfr` will first load the visualizer in this state:

```clafer
viz3 : ClaferMooVisualizer
    [ deployedAtURL = "gsd.uwaterloo.ca:5002" ]
    [ claferFileURL = "server/model.cfr" ]
```

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

```clafer
viz4 : ClaferMooVisualizer
    [ deployedAtURL = "gsd.uwaterloo.ca:5002" ]
    [ 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`.

```clafer
abstract loadingAndProcessing
```

## The state `error`

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

```clafer
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 `Dimension`s and optimization `Goal`s.

```clafer
abstract Dimension

abstract Goal
   dimension -> Dimension
   xor kind
      minimize
      maximize
```

For example, the [Android4](gsd.uwaterloo.ca:5001/MOO/Android4) optimization problem has four quality dimensions:

```clafer
performance : Dimension
energy : Dimension
security : Dimension
mass : Dimension
```

and four optimization goals:

```clafer
maxPerformance : Goal
    [ dimension = performance ]
    [ maximize ]

minEnergy : Goal 
    [ dimension = energy ]
    [ minimize ]

maxSecurity : Goal
    [ dimension = security ]
    [ maximize ]

minMass : Goal 
    [ dimension = mass ]
    [ minimize ]
```

there maybe more than four dimensions and goals.

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

```clafer
abstract ready
   goals -> Goal +
```

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

```clafer
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.

```clafer
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:

```clafer
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.

```clafer
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:

```clafer
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`

```clafer
abstract table
```

## The view `analysis`

```clafer
abstract analysis
```


End