really minimal proof of concept: this might work!

williamstein · williamstein · commit 6379f7396331 · 2024-08-07T20:05:05.000Z
diff --git a/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx b/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx
@@ -1,18 +1,31 @@
+/*
+Create an immortal DOM node.  This is a way to render HTML that stays stable
+irregardless of it being unmounted/remounted.
+This supports virtualization, window splitting, etc., without loss of state.
+*/
+
 import { useCallback, useEffect, useRef } from "react";
 import $ from "jquery";
 
-// This is just an initial default height; the actual height of the iframe should
+// This is just an initial default height; the actual height of the should
 // resize to the content.
-const HEIGHT = "70vh";
+const HEIGHT = "50vh";
 
 interface Props {
-  key: string;
+  globalKey: string;
   html: string;
+  zIndex?: number;
 }
 
-const immortals: { [key: string]: any } = {};
+const immortals: { [globalKey: string]: any } = {};
+
+const Z_INDEX = 1;
 
-export default function Immortal({ key, html }: Props) {
+export default function ImmortalDomNode({
+  globalKey,
+  html,
+  zIndex = Z_INDEX, // todo: support changing?
+}: Props) {
   const divRef = useRef<any>(null);
   const eltRef = useRef<any>(null);
   const intervalRef = useRef<any>(null);
@@ -45,17 +58,18 @@ export default function Immortal({ key, html }: Props) {
       return;
     }
     let elt;
-    if (immortals[key] == null) {
-      elt = immortals[key] = $(
-        `<div style="border:0;overflow:hidden;width:100%;height:${HEIGHT};position:absolute;left:130px"/>${html}</div>`,
+    if (immortals[globalKey] == null) {
+      elt = immortals[globalKey] = $(
+        `<div id="${globalKey}" style="border:0;overflow:hidden;width:100%;height:${HEIGHT};position:absolute;left:130px;z-index:${zIndex}"/>${html}</div>`,
       );
       $("body").append(elt);
     } else {
-      elt = immortals[key];
+      elt = immortals[globalKey];
       elt.show();
     }
     eltRef.current = elt[0];
-    intervalRef.current = setInterval(position, 500);
+    intervalRef.current = setInterval(position, 1000);
+    position();
 
     return () => {
       // unmounting so hide
@@ -66,5 +80,10 @@ export default function Immortal({ key, html }: Props) {
     };
   }, []);
 
-  return <div ref={divRef} />;
+  return (
+    <div
+      ref={divRef}
+      style={{ border: "1px solid black", height: HEIGHT }}
+    ></div>
+  );
 }
diff --git a/src/packages/frontend/jupyter/output-messages/javascript.tsx b/src/packages/frontend/jupyter/output-messages/javascript.tsx
@@ -5,7 +5,7 @@
 
 import { List } from "immutable";
 import $ from "jquery";
-import React, { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { is_array } from "@cocalc/util/misc";
 import { javascript_eval } from "./javascript-eval";
 import ShowError from "@cocalc/frontend/components/error";
@@ -24,7 +24,7 @@ export const Javascript: React.FC<JavascriptProps> = (
 
   const [errors, set_errors] = useState<string | undefined>(undefined);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (value == null || node.current == null) {
       return;
     }
diff --git a/src/packages/frontend/jupyter/output-messages/mime-types/html.tsx b/src/packages/frontend/jupyter/output-messages/mime-types/html.tsx
@@ -1,10 +1,14 @@
 import register from "./register";
-import HTML from "@cocalc/frontend/components/html-ssr";
+//import HTML from "@cocalc/frontend/components/html-ssr";
+import ImmortalDomNode from "../immortal-dom-node";
+import { sha1 } from "@cocalc/util/misc";
 
 const Html = ({ value }: { value: string }) => {
+  //      <HTML value={value} />
+
   return (
     <div style={{ margin: "5px 0" }}>
-      <HTML value={value} />
+      <ImmortalDomNode html={value} globalKey={sha1(value)} />
     </div>
   );
 };
