[Dynamic plugin] tracking bug

[stephanwlee]

We are building the dynamic loadable plugin system as per described in https://github.com/tensorflow/community/pull/90. This is a task tracking bug for those who are interested in following the status.

• [x] Infrastructural changes
  • plugin detection and loading: #2257
  • frontend loading of the plugin resources: #2318
  • misc: #2304, #2334, #2329, #2317, #2340,
• [x] create a "Hello World" of the dynamic plugin: #2354, #2374
• [x] write a test for the demo dynamic plugin API: #2354
• [x] document the changed plugin system: #2354, #2389
• [x] convert one of the TensorBoard plugin as a dynamic plugin: #2356
• [ ] plugin developer UX guidelines
• create a plugin library that has access to tf_storage and foundational components like runs selector
  • [ ] tf_storage iframe implementation
  • [ ] library bundling

[andrewschreiber]

I'm eagerly awaiting the completion of the dynamic plugin system. @stephanwlee and @wchargin it looks like you guys have been focused elsewhere recently. Is there a timeline on when the last two items here will be wrapped up?

[jeremysalwen]

What is the status of

TensorBoard will provide a library that helps you build a dashboard like Scalars dashboard by providing UI components.

from https://github.com/tensorflow/tensorboard/blob/javascript/ADDING_A_PLUGIN.md

[stephanwlee]

@jeremysalwen, sorry for a late reply. It was lost in my sea of emails.

I would say it has not progressed much due to lack of requests (this issue is the one you should post to for such requests). Honestly, it is much easier to write components that look reasonably close with React and other frameworks that you are more familiar with.

Now, I will say share that we now have possibilities to provide the run selector, but (1) it will pollute your JS context with global Polymer symbol (you can not use Polymer in your plugin if this happens) (2) it relies on an experimental API which we are not sure whether we should commit to, and (3) it may not get all the Angular+Redux based features that we are currently making.

What kind of library support would you need?

[jeremysalwen]

I was just curious about the option. Based on what you said I would probably be better off implementing a custom version.

[jannessm]

I am currently writing a plugin and the most important interface, I would like to have, is the opportunity to retrieve the reload triggers from the main frontend. Is there any chance to get these?

[jeremysalwen]

I have written a plugin, and I also would very much like to get the reload triggers from the main frontend. I also am interested in getting the selection state that is saved between tabs. I am implementing my own UI widgets as suggested, but I need a way to fetch that data from tensorboard in order to implement it properly.

[jannessm]

I've found a little workaround. It seems that one can access the surrounding of the iframe by js:

window.parent.document or window.frameElement.ownerDocument.

To track the updates I use:

setInterval(() => {
  const reload_button = window.parent.document.getElementsByClassName('reload-button')[0] as HTMLButtonElement;
  if (this._last_reload !== reload_button.title) {
    this._last_reload = reload_button.title;
    this.reload();
  }
}, 1000);

or by using the store:

document.getElementsByClassName('reload-button')[0].__ngContext__.find(val => !!val && !!val.isReloading$).isReloading$.subscribe(isLoading => {
if (isLoading) {
  // do update
}
})

[psybuzz]

Though clever, it is quite unfortunate to have to resort to the workaround mentioned. TensorBoard's element positions, classnames, visibility, property names, etc are all non-public interfaces that are not guaranteed to be stable. Plugins that rely on these for any duration may break.

We have heard feedback from internal teams as well, who might also benefit from a "reload trigger" in a dynamic plugin. The currently way to communicate between a plugin frame and main TensorBoard is via the plugin API in tensorboard/components/experimental/plugin_lib. A new API method for listening to reloads requires some consideration.

Would some API method signature like the following suit your use case?

async function setOnReloadFired(callback: () => any)

?

[jannessm]

This would be completely sufficient!

If there is such a way implemented, would be so kind and document how to use this lib?