widgets: get k3d to not crash when putting tab in background using visibility context

Author: williamstein

src/packages/frontend/jupyter/output-messages/ipywidget.tsx

@@ -7,6 +7,9 @@ import { Icon } from "@cocalc/frontend/components/icon";
 import { Alert, Button } from "antd";
 import type { JupyterActions } from "../browser-actions";
 import { Map } from "immutable";
+import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+
+// TODO: it would be better if somehow this were in @cocalc/jupyter, to 100% ensure css stays aligned.
 require("@jupyter-widgets/controls/css/widgets.css");
 
 let loadFontAwesomeDone = false;
@@ -34,9 +37,13 @@ export function IpyWidget({ id: cell_id, value, actions }: WidgetProps) {
   // console.log("IpyWidget", { value: value.toJS(), actions });
   const [unknown, setUnknown] = useState<boolean>(false);
   const divRef = useRef<any>(null);
+  // We *ONLY* render widgets when they are visible.  Why?
+  //  (1) some widgets -- k3d labels!! -- assume they are visible, and just totally crash if not, due to bad code
+  //  (2) efficiency.
+  const { isVisible } = useFrameContext();
 
   useEffect(() => {
-    if (actions == null) {
+    if (actions == null || !isVisible) {
       // console.log("IpyWidget: not rendering due to actions=null");
       return;
     }
@@ -64,7 +71,11 @@ export function IpyWidget({ id: cell_id, value, actions }: WidgetProps) {
       return;
     }
     render({ manager, id, div });
-  }, []);
+
+    return () => {
+      $(div).empty();
+    };
+  }, [isVisible]);
 
   if (unknown) {
     const msg = "Run cell to load widget.";

src/packages/frontend/jupyter/widgets/manager.ts

@@ -24,6 +24,8 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import type { JupyterActions } from "@cocalc/frontend/jupyter/browser-actions";
 import { FileContext } from "@cocalc/frontend/lib/file-context";
+import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+
 import { delay } from "awaiting";
 
 const K3D_DELAY_MS = 25;
@@ -718,14 +720,23 @@ class Environment implements WidgetEnvironment {
     // widgets will refresh if you scroll them off the screen and back.
     const trust = actions.store.get("trust");
     const component = React.createElement(
-      FileContext.Provider,
+      FrameContext.Provider,
       {
-        value: { noSanitize: trust, project_id },
+        // @ts-ignore -- we aren't filling in all the standard stuff
+        // also we just always put isVisible true, since the output widget itself
+        // (which has proper context) gets not rendered and that contains this.
+        value: { isVisible: true },
       },
       React.createElement(
-        CellOutputMessage,
-        { message, actions, project_id, trust },
-        null,
+        FileContext.Provider,
+        {
+          value: { noSanitize: trust, project_id },
+        },
+        React.createElement(
+          CellOutputMessage,
+          { message, actions, project_id, trust },
+          null,
+        ),
       ),
     );
     const root = ReactDOM.createRoot(myDiv);