Parameter-based Interaction

Cyclotron provides support for dashboard parameters, i.e., values that can be used in the configuration of dashboard components such as widgets and data sources to filter/drive the visualization of the information (e.g. a dynamic URL), as well as to hold constant information shared by different components (e.g. connection information).

Parameters can be defined in the dedicated editor section, where an input form (e.g. textbox, checkbox, dropdown menu, etc.) and a change event handler (i.e. function(parameterName, newValue, oldValue){}, called when the parameter is updated to perform some operation, like re-executing a data source) can optionally be configured.

In the original implementation, parameters can only be set explicitly, either:

  • via dashboard URL as a query parameter: http://cyclotron/my-dashboard?numberOfHours=8
  • via their input form in the Header widget, which can additionally display an “Update” button with an associated event handler
  • within JavaScript code, via the global Cyclotron object: Cyclotron.parameters.numberOfHours = 24;

In order to overcome this limit and allow for more interaction between dashboard components, the platform fork includes a mechanism of automatic update and consequent reload of the affected components.

Parameter Generation

Some widgets (e.g. time slider, OpenLayers map) generate events that can trigger the update of a parameter, that is, some value is produced and automatically assigned to the parameter. For example, the event generated by the time slider is the selection of a date/time by sliding and the value produced is the selected date/time.

When the event is fired, the change (in the form of the message parameter:<param_name>:update) is broadcasted to the whole dashboard by a built-in function, so that any components (data sources or widgets) using that parameter react to the update.

Subscription to Parameter Updates

On the other side, the configuration of widgets and data sources can be made parametric via the use of wildcards, which will be replaced with the current parameter value at loading. The wildcard syntax is #{parameterName} and the widget/data source must subscribe to that parameter, so that whenever it is updated they are updated consequently. For example, a parameter defined in the editor as

{
    "name": "currentStation",
    "defaultValue": "7"
}

can be used in the configuration of a data source as follows:

{
    "name": "stationData",
    "type": "json",
    "parameterSubscription": ["currentStation"],
    "url": "https://localhost:8080/dss/services/db/#{currentStation}"
}

If a widget or data source subscribes to a parameter, a listener associated to that parameter change broadcast is set and when an update is broadcasted (as the message parameter:<param_name>:update), the wildcards are replaced with the new value and the component is reloaded.