Improve understandability and consistency of presentation of values and probabilities (VAP sets)

[AJamesPhillips]

Currently

• Invalid numbers are shown as NaN which is not user friendly / intelligible.
• It's also confusing to the user when there are multiple and different representations of VAP sets in the UI. There are three main locations where the VAP set values are displayed in the UI:
  1. location 1: in the node view (value_and_prediction_summary) the "present" VAP set is shown (based on sim and created datetimes)
  2. location 2: on the component form under the component title the "present" VAP set is shown (based on sim and created datetimes)
  3. location 3: in the component form under "Value Predictions" a summary of each VAP set is shown

Description (acceptance criteria)

Invalid values should not be represented as NaN but instead:

• be rendered with their text value and
• have a warning triangle next to this text value e.g. ⚠ abc
• the warning triangle should have a tooltip like 'abc' is an invalid number

Additionally:

• Invalid values should be present in the same way in all three locations in the UI
• More than 3 values should be hidden in location 2 & 3 (in the component form under the component title and for each VAP set under "Value Predictions" section)
• Values which are effected by a counterfactual type component should be indicated as such:
  • For location 1 this is current done at the VAP level when a counterfactual is in effect e.g.

• For location 2 the presence of a counterfactual's effect is also displayed under the component title:

• For location 3 we do not display anything and that's probably fine both now and in the future as the effect of the counterfactual will be clearly indicated at the component level in locations 1&2.

• Values which are effected by a state_value type component should be indicated as such:
  • For location 1 this has no indication at the moment
  • For location 2 this has a similar indication to that of a counterfactual in effect, e.g.:

• For location 3 we do not display anything and that's fine both now and in the future as the effect of the counterfactual will be clearly indicated at the component level in locations 1&2. And also because I think it would be confusing to see the other state_value component's VAP sets present on this component because when you come to edit it you'd need to get access to the original values despite just being shown the values from the other state_value component.

Why (hypothesis)

• It will make it easier for the user to understand through the UI that there are invalid numbers in VAP set values and where these invalid numbers come from.

Alternatives you've considered

None.

Additional context

None.