Conditional expressions for styles

Conditional expressions, now available only for the LED, are binary. And the only property that can change is the color of the LED, and the possibly colors are green (the default color) vs orange or red (which can be chosen based on whether the condition evaluates to true). A more powerful mechanism is needed to express several conditions for several styles (for example, one condition that determines if the LED is green, another one for yellow, another for red). Likewise a more powerful mechanism is needed to specify the style that is desired. For example a style can be "red+triangular shape", or "yellow+circular shape".

One possibility is to provide a simple mechanism so that the condition and style can be specified via the webjive UI (similar to what is done now in the widget configuration panel on the right handside of the editor of the dashboard). Another possibility - complementary with the first one - is to provide the means for the power user to specify one or more predicates in javascript - one per each condition - and one or more CSS expressions (names of CSS classes for example) one for each style that is desired. The power user would enter these expressions in the config panel. Webjive would inject those expressions in the internal representation of the dashboard.

For the UI part, see for example what the Grafana editor allows users to do. The attached screenshot show how the user could create new conditions on ranges of the value (by pressing the + sign) and the color chooser. Notice that this Grafana example shows the ability to specify simple conditions based on the attribute value only, and simple style specifications based on the color alone.  In our case, by letting the designer to enter (for example) javascript expressions, the flexibility provided to our power users can be greatly increased.

Benefit:

• the power user would have flexibility in specifying styles and conditions
• users of the dashboards will be more effective in using them.
• the dashboards will be more attractive.

Conditional styles

Conditional styling of widgets (now partly applicable to the LED widget only) can be applied also to the dial widget, to the plotting widgets, to the state and attribute display widgets. Conditional styles apply to background color, font size and style. For the plotting widget conditions might apply to ranges of values (for example, windspeed greater than 40m/s are drawn with a red solid line; or alternatively the background of the plot for speed larger than 40m/s is a light red; both kinds of styles should be expressable).

Benefit:

• users of the dashboards can quickly figure out changes in states or values, and detect if values are within certain ranges. In addition, by proper use of colors users would more quickly distinguish different areas of the screen and make associations between widgets in different areas.
• dashboards can be nicer to the eye, which will make a much more favorable impression on any external stakeholder (in public demos, videos, presentations, outreach material, etc). 
• See for example the two screenshots that are attached below: one is a dashboard that was demoed a while ago (CSP_before.png), and the other (CSP_after.png)  one is a remake of that dashboard and is what could be possible to achieve using also these conditional styles. (Thank you v.alberti for creating the remake)

Acceptance criteria

• for the LED, for state and attribute displays, for the background of visual groups (https://jira.skatelescope.org/browse/SP-693) it is possible to specify visual properties (background color, foreground color, font style, font size) that depend on values of states & attributes. At the minimum these properties need to be expressable with css classes/properties.
• two or more conditions should be specifiable (for example, 3 or more LED colors if there are 3 or more possible values).
• conditional styles should be applicable to the LED widget, as well as at least some other ones:
  • the dial, with different angular sectors;
  • the attribute/state viewer (with different syles for the values being displayed)
  • the timeseries chart, with different regions of the y-axis.
• whenever a visual property is conditional on values it is possible to specify the actual conditions that can be expressed via the editor UI via javascript predicates that are dynamically evaluated. The dashboard editor should enable the user to specify, revise, remove these predicates and conditions. 
• In some cases it might be worthwhile to let dashboard designers use appropriate visual tools to specify conditions (for example, like the attached grafana widget). It is up to the team to decide in which cases to do that.