Revision 3b4b6180217c1e39177c6bf0cf03ae4525832c6a (click the page title to view the current version)
Changes from 3b4b6180217c1e39177c6bf0cf03ae4525832c6a to cc8c34d6bb0d7a658ba9f88f197af07974033916---
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:
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,
* `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
`init
`loadingAndProcessing
`error
`ready
views
`graph
`table
`analysis
```
For example, our [public instance of the visualizer](http://t3-necsis.cs.uwaterloo.ca:8092) could be described as follows after it's loaded:
For example, our [public instance of the visualizer](https://wiselab.uwaterloo.ca:8092) could be described as follows after it's loaded:
```clafer
viz1 : ClaferMooVisualizer
[ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
[ deployedAtURL = "wiselab.uwaterloo.ca:8092" ]
[ init ]
```
We model each abstract state individually.
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.
```clafer
abstract mux init
claferFileURL -> string ?
claferFileUpload -> string ?
```
There are three possibilities here:
There are three possibilities here:
1) the empty visualizer is opened
```clafer
viz2 : ClaferMooVisualizer
[ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
[ deployedAtURL = "wiselab.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:
2) the visualizer is opened with a `claferFileURL`, e.g., entering this URL `https://wiselab.uwaterloo.ca:8092/?claferFileURL=server/model.cfr` will first load the visualizer in this state:
```clafer
viz3 : ClaferMooVisualizer
[ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
[ deployedAtURL = "wiselab.uwaterloo.ca:8092" ]
[ claferFileURL = "server/model.cfr" ]
```
3) after 1), the file is selected and the `Upload` button is pressed:
```clafer
viz4 : ClaferMooVisualizer
[ deployedAtURL = "t3-necsis.cs.uwaterloo.ca:8092" ]
[ deployedAtURL = "wiselab.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`.
```clafer
abstract loadingAndProcessing
```
## The state `error`
There are a few possible errors that can occur during loading and processing.
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
minimizee
maximizee
```
For example, the [Android4](t3-necsis.cs.uwaterloo.ca:8091/MOO/Android4) optimization problem has four quality dimensions:
For example, the [Android4](https://wiselab.uwaterloo.ca/modelwiki/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 ]
[ maximizee ]
minEnergy : Goal
minEnergy : Goal
[ dimension = energy ]
[ minimizee ]
maxSecurity : Goal
[ dimension = security ]
[ maximizee ]
minMass : Goal
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:
```clafer
abstract ready
goals -> Goal +
```
For example, the visualizer's state `ready` would look as follows:
```clafer
r1 : ready
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
g1 : graph
[ xAxis = performance ]
[ yAxis = energy ]
[ opacity = security ]
[ size = mass ]
[ bubble = bubbles ]
```
the users can change which dimension will be displayed by which means.
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
```
```{.clafer .summary}
```
End
