4

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

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)
4
  • if I understood correctly, the data is changed in the main window and should be rendered in the new window. so both of the windows should be active for it to work correctly. I think browsers tend to put windows/tabs out of focus to sleep so as long as both of the windows are visible and on the same screen - you are ok. this would be my guess. sleep could mean no repaint or no js running
    – Alissa
    Mar 22 at 13:22
  • Might be, but I don't think so, since the "counter component" which increments each second, works correctly in any circumstance. The React / JS code is running on the main window, also the state is taken and maintained there (redux). All the interactions according to my knowledge are propagated through the createPortal setup (this is why with firefox i do get a needDraw debug message on the main window when clicking on the popout window, although delayed and incrementing in delay
    – jcuypers
    Mar 22 at 14:39
  • Maybe a test case could be to have additional interactivity like a click event on the counter component in order to see if it bubbles correctly and timely in the hierarchy?
    – jcuypers
    Mar 22 at 14:42
  • 1
    interesting, maybe I'll try to reproduce your scenario with something simpler than cytoscapejs
    – Alissa
    Mar 22 at 14:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.