Chart traces do not always display

[psychemedia]

The display of chart traces is unreliable. Sometimes closing and opening the chart window can get things restarted. You also need to remember to enable particular traces. And log data into the console so that it can be displayed.

One of the issues with any fix is just being mindful of not adding any delay into the control loop. It's cluttered enough already. Not sure if things can be handled better in js using other processes to monitor things and do the charting based on watching for updates somewhere else.

[psychemedia]

When traces are added, the chart component perhaps also needs updating?

So when we add traces (eg https://github.com/innovationOUtside/nbev3devsim/blob/bb9d62dc953e744191344683456d9e9156f226a6/nbev3devsim/templates/studio.js#L1161 ) should we also update the chart (eg https://plotly.com/javascript/plotlyjs-function-reference/#plotlyupdate )

Hmmm... or maybe I need to make sure that the checkboxes are adding things to the chart properly? eg https://plotly.com/javascript/plotlyjs-function-reference/#plotlyaddtraces and https://plotly.com/javascript/plotlyjs-function-reference/#plotlydeletetraces (although delete seems index based? So how do we keep track of that?)

I have completely forgotten how the chart handling works. This maybe needs reimplementing properly from scratch :-(

[psychemedia]

Not sure if the chart is properly setup in the first instance. When we click to show the chart, should we create a new chart eg as Plotly.newPlot('plotlyDiv', chart_lines);? If there is no chart previously set should we new Plot it, then .react() to update it if it does exist?

Current setup is setupFunctionToggleHandler('roboSim-display-chart', setupChartView);

So maybe update to:

function clearChart() {
  sim.previousChartTraces = [];
  set_chartlines()

  if (isEmpty($('#plotlyDiv'))) {
    Plotly.newPlot('plotlyDiv', chart_lines);
  } else {
    Plotly.react('plotlyDiv', chart_lines);
  }

Also, it's not clear that the chart lines are updated when we hit the checkboxes? How / when are lines added / removed to the chart?

In https://github.com/innovationOUtside/nbev3devsim/blob/bb9d62dc953e744191344683456d9e9156f226a6/nbev3devsim/templates/studio.js#L1215 should we be creating a new chart?

How is chart cleared?