Sync view state between Python and JS

[kylebarron]

Right now we include an _initial_view_state that lets Python set the initial view state.

deckgl allows you to pass in an initialViewState param which then lets deck manage the internal view state. Or you can manage the view state independently from deck, which you update with onViewStateChange and pass into deck's viewState parameter.

• Set the state from python but allow the JS side to vary independently (otherwise you couldn't pan)
• Debounce for messages from JS -> Python to not clog the web socket
• not debounce for setting the view state from onViewStateChange (because we don't want to slow the deck updates)

The existing implementation of useModelState (in anywidget/react) is:

export function useModelState(key) {
  let model = useModel();
  let [value, setValue] = React.useState(model.get(key));
  React.useEffect(() => {
    let callback = () => setValue(model.get(key));
    model.on(`change:${key}`, callback);
    return () => model.off(`change:${key}`, callback);
  }, [model, key]);
  return [
    value,
    (value) => {
      model.set(key, value);
      model.save_changes();
    },
  ];
}

We probably want something like useModelStateDebounced which returns a callback that immediately calls model.set(key, value) but debounces for model.save_changes().

Note to self: https://www.joshwcomeau.com/snippets/javascript/debounce/ for implementation of debounce + note to use useMemo in react. It's unclear if we do want useMemo because we seemingly do want to re-render the react component on every view state change, because deck is reactive and won't re-render the full map

[manzt]

FWIW, I think this would be a really useful feature to add to @anywidget/react (as in a new hook or extending the existing hook).

[batpad]

@kylebarron I see what you're trying to do in #113 - yea, the debounce is not going to work defined where you have it - I think there's roughly two options here if we want to try with this approach:

• Put the debounce where you have the callback for onViewStateChange: https://github.com/developmentseed/lonboard/pull/113/files#diff-c2f8ec75103ae661341f239c22352142d1d5e965cad55b19cfb978902500106cR77 . But you don't want to do that because you want to update the state and have a single source of truth - here I still think what we could have is a useModelState and useModelStateUnsynced or so - where calling useModelStateUnsynced just never calls the model.save_changes() method. And that should be okay? (And then be more intentional about when you call useModelState to actually sync with python). I can try sketching this out.
• If you really want something like a useModelStateDebounced where that method "debounces" the calls to .save_changes(), you'd need to have a way within that function to store state of when the last call to .save_changes() had been made, and conditionally make that call - if this was a traditional REST API, I'd imagine one could create some queue system and be intelligent about it based on the response callback from the server, and cancel previous calls, etc. Would have to think about this, but could also potentially sketch something out.

@kylebarron do you know if this all works if you comment out the model.save_changes() line? I'll probably try and fix up your branch and give this a whirl - we should definitely be able to get this to work.