Modeling widget documentation

Note: This wiki page has not been updated for the new architecture

---

Frontend

proposals-portlet mainly relies on javascript code to edit and view simulations. This code can be found in proposals-portlet/src/main/webapp/js/modeling and consists of the core as well as a number of input and output renderers.

A renderer is a class that extends the base renderer and adds rendering functionality for two modes (view and edit) for a specific input or output. For example xcolab.modeling.inputRenderer.individualSlider.js contains the logic of creating a slider (renderEdit) or the corresponding texts (renderView).

Besides the standard inputs such as sliders or textboxes xcolab.modeling.inputsRenderer.customInputs.js is capable of rendering a wizard for EMF models based on a state machine and JSON defined in modelsadmin-portlet.

Statemachine definition example:

{
    screens : [
        {
            name : "policy",
            title : "Policy",
            description : "HTML Text",
            options : [
                {
                    name : 'policy',
                    value : 'bau',
                    title : 'Short Title',
                    description : 'Description',
                    descriptionLong : 'Longer HTML description',
                    type : 'blueArrow'
                }, ... ]

        }, ... ],
    tooltips: [
	{
	   id: 'ccs', text: 'Tooltip Text'
        }, ...],
    transitions : [ 
	{
	   fromScreen : 'energySupplyTechnologies',
	   conditions: [],
	   showRunButton : true
	},
        {
	   fromScreen : 'policy',
	   conditions: ['policy=g8_0.5'],
	   targetScreen : 'energyEfficiencyEnergySupplyTechnologies'
	}, ... ],
    defaultScreen : 'policy',
    results: [
	{
	   isDefault: true, values: {"policy": "bau", "energyEfficiency": "baseline", "energySupplyTechnologies": "allNoCarbon"}, outputs: {"input_scenario":"EMF27G1"}
	},
	{
	   values: {"policy": "bau", "energyEfficiency": "baseline", "energySupplyTechnologies": "phaseOutNuclear"}, outputs: {"input_scenario":"EMF27G3"}
	}, ... ]
}

Plotting is done using jqplot.

Besides the JS code, the modelling frontend only uses a couple of .jsp pages to reference the js and call the appropriate functions. These files can be found in proposals-portlet/src/main/webapp/WEB-INF/tags/modeling

Backend

The backend logic for models and simulations is handled in the models-portlet. Please review this documentation for more details.