I am seeking some troubleshooting advice on the following setup:
I'm working on a pop-out / new window functionality for the callback graph debugger in OSS Dash.
Goal: Be able to use the callback graph debugger / cytoscapejs in an standalone window, independent from the main dash/react app.
Currently this functionality exists as a div/graph inside the existing Dash app / page The debugger front-end is built in react, and uses state stored in redux to build the debugging data that is fed into the react-cytoscape component that encapsulates the cytoscapejs functionality.
I've used the window.open / create portal functionality to accomplish my goal of moving the existing div container to a new location
This introduced the following problems:
- styles were not present: fixed that by copying / applying the styles to the new window
- some interactivity was not working since some of the cytoscapejs event handlers were bound to the window (old): I have modified all event handlers in cytoscapejs to attach to the cytoscapejs container instead of window. For now it's good enough for testing purposes, but might need some rework later.
Currently most things works, except: (I think they are 3 variations of the same underlying problem.)
- When maximizing the new window, the actual graph on the canvas disappears
- restored when resizing to smaller size
- When moving the new window to a new screen / virtual desktop updates/interactivity stops
- restored when moving the window back
- When the new window is not maximized, but also not over the app window (from where it is portal-ed) there are no updates.
- restored when putting the app window underneath
Things I have tried:
- Confirm that my window open/createportal setup is working correctly
- I added a simple counter component alongside the cytoscapecomponent, which does behave correctly and updates in all situations.
- Alt-tab / cycling windows does update the new window
- I think this proves that mouse event handlers or activity tracking or something would not be to blame for the issue
- Although sometimes the graph stops updating visually or is removed completely it still does its job. for example changing the layout type or search for a node (like apply a style to the node) do work. somehow these changes get queued / performed and are visible on the next update (resize or app underneath window).
- I confirmed that in all cases the props and state are updated and sent to react-cytoscapejs component.
- I guess this would mean that the problem most probably lies within the cytoscapejs code
- I have tested different browsers (chrome, firefox) which gave a bit different result:
- Chrome:
- Never shows the graph when maximixed
- Graph freezes and interactions get delayed to the next render (maximized, other screen, same screen not over active app page)
- No NeedDraw debug logging in cytoscapejs until over parent and not maximized (NeedDraw logging appears instantly after putting the window non-maximized over the parent)
- Firefox:
- Shows the graph when maximized
- Limited interaction is possible (but everything happens very slow) when maximized and on another screen/virtual desktop, not over the active app.
- update time increases each interaction (like double each time and gets reset every time you switch to the main app)
- confirmed by delayed logging out NeedDraw from cytoscapejs
- Chrome:
In any other situation, cytoscape behaves normal/fast as it is without the new window/portal
Main question:
- Why does the component stop updating when not over the original app / or when the new window obstructs the original app (maximized)