Accessing the scope within callbacks

[matyasfodor]

I'm refactoring this code: https://github.com/DD-DeCaF/metabolica-ui-pathways/blob/master/src/pathways/escher.service.ts#L34

In this function I have to access both my EscherService's context and the Builder's context. The callback would normally access the builder scope with the this keyword, but that can't be used, since the context binding won't work with arrow functions. I could work it around but the solution is not very nice:

first_load_callback: ((escherService) => {
// This function is bound to the Builder ..
  return function () {
    // So this `this` references the non-lexical, Builder context
    return escherService.firstloadCallback(this);
  };
// This `this` references escherService
})(this)

I can propose two changes that could make this work nicely:

• Pass this as the first parameter of the callback (instead of applying it) This is potentially hard to migrate, because it changes the way the API works.

• Non-blocking callback call: The callbacks in the CallbackManager are called synchronously. This is misleading IMO, I'd expect them to be called asynchronously. In this case I could save the builder on my scope, and access it inside the callback:

Creating the builder:

this.builder = escher.Builder(
    null,
    // ...
);

Accessing both contexts in the callback:

// ...
options = {
  first_load_callback: () => {
    // builder instance:
    this.builder 
    // EscherService context;
    this
  }

This is currently not possible, since the synchronous call. My my proposal is to wrap the call of the callbacks in a setTimeout or in promises.

What do you think about this issue? Do you think it is possible to mitigate this issue with one of these solutions?

[zakandrewking]

I see the problem. You're right: The first-load callback makes more sense behind a defer (setTimeout(fn, 0)).

However, I will probably keep the rest of the callbacks synchronous. They are used throughout Escher, and I'm not sure what effects would result from generally switching to asynchronous callbacks.

You could also try:

let builder;
builder = escher.Builder(
  ...,
  {
    first_load_callback: () => {
      console.log(builder);
    }
  }
);

[matyasfodor]

I just realized, using this callback is not even necessary, since the whole map creation is synchronous. I could just execute the function after the builder object was created.

[zakandrewking]

Just to have it here, I tried the method above with let and it did not work.

This is a general annoyance of using Builder within React or Angular where users will want references to both the Escher this and the React/Angular this.