immortal dom nodes -- this commit actually works very well and doesn't have any issues with overlap, multiple cells with same html, etc.

williamstein · williamstein · commit dd689f022fb8 · 2024-08-07T22:22:48.000Z
... BUT!  It has no strategy or technique for garbage collection! It's a
big heinous memory leaker.
diff --git a/src/packages/frontend/jupyter/output-messages/iframe.tsx b/src/packages/frontend/jupyter/output-messages/iframe.tsx
@@ -30,6 +30,7 @@ interface Props {
   sha1: string;
   project_id: string;
   cacheId?: string;
+  index?: number;
 }
 
 export default function IFrame(props: Props) {
@@ -41,6 +42,8 @@ export default function IFrame(props: Props) {
     const src = get_blob_url(props.project_id, "html", props.sha1);
     return (
       <HTML
+        id={props.cacheId}
+        index={props.index}
         value={`<iframe src="${src}" style="border:0;height:${HEIGHT};width:${WIDTH}"/>`}
       />
     );
diff --git a/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx b/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx
@@ -8,9 +8,10 @@ import { useCallback, useEffect, useRef } from "react";
 import $ from "jquery";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { useIFrameContext } from "@cocalc/frontend/jupyter/cell-list";
+import { sha1 } from "@cocalc/util/misc";
 
 interface Props {
-  globalKey: string;
+  docId: string;
   html: string;
   zIndex?: number;
 }
@@ -35,15 +36,17 @@ const PADDING = 0;
 const STYLE = {} as const;
 
 export default function ImmortalDomNode({
-  globalKey,
+  docId,
   html,
   zIndex = Z_INDEX, // todo: support changing?
 }: Props) {
   const divRef = useRef<any>(null);
   const intervalRef = useRef<any>(null);
-  const { isVisible } = useFrameContext();
+  const { isVisible, project_id, path, id } = useFrameContext();
   const iframeContext = useIFrameContext();
 
+  const globalKey = sha1(`${project_id}-${id}-${docId}-${path}-${html}`);
+
   const position = useCallback(() => {
     // make it so elt is exactly positioned on top of divRef.current using CSS
     if (divRef.current == null) {
@@ -82,7 +85,6 @@ export default function ImmortalDomNode({
     const parent = $(iframeContext.cellListDivRef?.current)[0];
     if (parent != null) {
       const parentRect = parent.getBoundingClientRect();
-      console.log({ parentRect, eltRect });
       // Calculate the overlap area
       const top = Math.max(0, parentRect.top - eltRect.top);
       // leave 30px on right so to not block scrollbar
@@ -149,8 +151,9 @@ export default function ImmortalDomNode({
   }, [isVisible]);
 
   useEffect(() => {
-    intervalRef.current = setInterval(position, 1000);
-
+    // TOOD: can we get rid of interval by using a resize observer on
+    // this iframeContext.cellListDivRef?
+    intervalRef.current = setInterval(position, 500);
     if (iframeContext.iframeOnScrolls != null) {
       let count = 0;
       iframeContext.iframeOnScrolls[globalKey] = async () => {
@@ -168,6 +171,9 @@ export default function ImmortalDomNode({
         position();
       };
     }
+    position();
+    setTimeout(position, 0);
+    setTimeout(position, 5);
 
     return () => {
       delete iframeContext.iframeOnScrolls?.[globalKey];
diff --git a/src/packages/frontend/jupyter/output-messages/message.tsx b/src/packages/frontend/jupyter/output-messages/message.tsx
@@ -56,6 +56,7 @@ interface CellOutputMessageProps {
   actions?: JupyterActions; // optional  - not needed by most messages
   name?: string;
   id?: string; // optional, and not usually needed either; this is the id of the cell.  It is needed for iframe + windowing.
+  index?: number;
   trust?: boolean; // is notebook trusted by the user (if not won't eval javascript)
 }
 
@@ -71,6 +72,7 @@ export const CellOutputMessage: React.FC<CellOutputMessageProps> = React.memo(
         name={props.name}
         trust={props.trust}
         id={props.id}
+        index={props.index}
       />
     );
   },
@@ -137,6 +139,7 @@ export const CellOutputMessages: React.FC<CellOutputMessagesProps> = React.memo(
         v.push(
           <CellOutputMessage
             key={n}
+            index={n}
             message={mesg}
             project_id={project_id}
             directory={directory}
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,14 +1,21 @@
 import register from "./register";
 //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 }) => {
+const Html = ({
+  value,
+  id,
+  index,
+}: {
+  value: string;
+  id?: string;
+  index?: number;
+}) => {
   //      <HTML value={value} />
-
+  console.log("HTML", { id, index });
   return (
     <div style={{ margin: "5px 0" }}>
-      <ImmortalDomNode html={value} globalKey={sha1(value)} />
+      <ImmortalDomNode html={value} docId={`${id}-${index}`} />
     </div>
   );
 };
diff --git a/src/packages/frontend/jupyter/output-messages/mime-types/iframe.tsx b/src/packages/frontend/jupyter/output-messages/mime-types/iframe.tsx
@@ -1,9 +1,16 @@
 import register from "./register";
 import IFrame from "../iframe";
 
-register("iframe", 7, ({ id, project_id, value }) => {
+register("iframe", 7, ({ id, project_id, value, index }) => {
   if (value == null || project_id == null) {
     return <pre>iframe must specify project_id and sha1</pre>;
   }
-  return <IFrame cacheId={id} sha1={value} project_id={project_id} />;
+  return (
+    <IFrame
+      cacheId={id}
+      sha1={value}
+      project_id={project_id}
+      index={index}
+    />
+  );
 });
diff --git a/src/packages/frontend/jupyter/output-messages/mime-types/register.ts b/src/packages/frontend/jupyter/output-messages/mime-types/register.ts
@@ -24,6 +24,7 @@ export interface HandlerProps {
   name?: string;
   trust?: boolean;
   id?: string;
+  index?: number;
 }
 
 type Handler = React.FC<HandlerProps>;

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ export interface HandlerProps {`
`24`	`24`	`name?: string;`
`25`	`25`	`trust?: boolean;`
`26`	`26`	`id?: string;`
	`27`	`+ index?: number;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`type Handler = React.FC<HandlerProps>;`