Refresh plotly from a click handler

[FrnchFrgg]

I use the following configuration in a graph:

            type: custom:plotly-graph
            fn: $ex vars.smooth = false
            config:
              modeBarButtonsToAdd:
                - name: button1
                  click: $ex (gd) => { vars.smooth = !vars.smooth; }
            defaults:
              entity:
                filters:
                  - sliding_window_moving_average:
                      window_size: "$ex vars.smooth ? 200 : 1"
            entities:
              - entity: sensor.solar_power_of_p1
              - entity: sensor.solar_power_of_p2
              - entity: sensor.solar_production_instantanee
            hours_to_show: 24

The graph behaves as I want depending on the value I set vars.smooth to, but clicking on the button does not trigger a refresh and new execution of the filters. I can use alert(vars.smooth) in the click handler and see that the value is correctly updated.

How should I proceed ?

[dbuezas]

I didn't add a force refresh method to call, so you'd have to use a helper sensor instead. You can set it via the hass object, you'll have to put a debugger statement inside the function and see what functions are available in the hass object.
Once you can change the helper sensor value from within plotly, you can add it as an entity so it triggers an update. Then you can make it internal

[FrnchFrgg]

Creating an auxiliary HA sensor just for that feels very clunky and overkill, though.

[dbuezas]

It is. It would be easy to add a parameter to all functions that retrigers rendering, but I haven't. PR opportunity! :)

[FrnchFrgg]

The problem is actually that click: $ex (gd) => ( alert(vars); } actually seems to make an independent copy of vars at the point of execution of the $ex and bind that copy to the anonymous function closure. Any modification inside that function will not be seen by your code, and any later modification by your code (like a store_var) will not be seen by the anonymous function either.

So triggering a re-render without the ability to pass back information is useless.

[FrnchFrgg]

Similarly, gd.data (which is plotly's vision of data) contains the filters member, but your card doesn't see any changes I make (I tried to use name: $ex get("entities[0].filters[0].resample"), and/or change a window_size to see if something changed), so this is also a deep copy.

[dbuezas]

Yes, vars doesn't survive rendering. Every time the the card rerenders, vars is created from scratch to ensure the result is always the same. You could use window for more persistent vars

[FrnchFrgg]

Sadly, storing a variable in window still does not enable plotly-graph-card to see the changes. It always sees the initial value (yet using Math.random() gives a new value each time so I know it is not just the universal function not being called again). I tried some levels of indirection, but nothing seems to work (setting window.globalvar to an Object() then changing an attribute of said object, or using an Array(), hoping that even if attributes of window were made immutable, the innards of an object or an array would still be mutable).

Yet, when I put console.log(window) in the universal function or in the click handler, the Firefox console tells me that the first is equal to the second (with ===, even). Would this hint to some kind of context based sandboxing ?

[dbuezas]

There isn't, let me see the yaml

[FrnchFrgg]

            type: custom:plotly-graph
            fn: $ex { window.solar_vars = Array(); window.solar_vars[0] = false }
            config:
              modeBarButtonsToAdd:
                - name: button1
                  click: $ex (gd) => { window.solar_vars[0] = !window.solar_vars[0]; console.log(window.solar_vars); }
            defaults:
              entity:
                line:
                  shape: spline
                filters:
                  - resample: 1m
                  - exponential_moving_average:
                      alpha: "$ex { window.solar_vars[0] ? 0.05 : 1 }"
            entities:
              - entity: sensor.solar_power_of_p1
                name: P1 (Est)
              - entity: sensor.solar_power_of_p2
                name: P2 (Ouest)
              - entity: sensor.solar_production_instantanee
                name: $ex "Total" + Math.random() + window.solar_vars[0]
                fn: $ex { console.log(window.solar_vars); }
            hours_to_show: 24

[FrnchFrgg]

I found it, the second line was overwriting the array each time. I put in under an undefined guard.

[FrnchFrgg]

I found a way to make it work:

type: custom:plotly-graph
fn: $ex { window.solar_smooth = Boolean(window.solar_smooth);}
config:
  modeBarButtonsToAdd:
    - name: button1
      click: >-
        $ex (gd) => { window.solar_smooth = !window.solar_smooth;
        gd.parentElement.querySelector("#reset").click(); }
defaults:
  entity:
    line:
      shape: spline
    filters:
      - resample: 1m
      - exponential_moving_average:
          alpha: "$ex window.solar_smooth ? 0.05 : 1"
entities:
  - entity: sensor.solar_power_of_p1
    name: P1 (Est)
  - entity: sensor.solar_power_of_p2
    name: P2 (Ouest)
  - entity: sensor.solar_production_instantanee
    name: Total
hours_to_show: 24