make it so cached iframe uses immortal dom node

williamstein · williamstein · commit 87688ace412a · 2024-08-07T21:39:59.000Z
- this is just partly done, and still has the old code
- but it seems dramatically better than before and fixes the subtle bug
  of state loss on frame change, and also is better at resizing to the
  content
diff --git a/src/packages/frontend/jupyter/output-messages/iframe.tsx b/src/packages/frontend/jupyter/output-messages/iframe.tsx
@@ -15,13 +15,17 @@ import useCounter from "@cocalc/frontend/app-framework/counter-hook";
 import { get_blob_url } from "../server-urls";
 import CachedIFrame from "./cached-iframe";
 import { useIFrameContext } from "@cocalc/frontend/jupyter/cell-list";
+import HTML from "./mime-types/html";
 
 // This impact loading the iframe data from the backend project (via the sha1 hash).
 // Doing retries is useful, e.g., since the project might not be running.
 const MAX_ATTEMPTS = 10;
 const MAX_WAIT = 5000;
 const BACKOFF = 1.3;
 
+const HEIGHT = "70vh";
+const WIDTH = "max(800px,70vw)";
+
 interface Props {
   sha1: string;
   project_id: string;
@@ -31,12 +35,18 @@ interface Props {
 export default function IFrame(props: Props) {
   // we only use cached iframe if the iframecontext is setup, e.g., it is in Jupyter notebooks, but not in whiteboards.
   const iframeContext = useIFrameContext();
-  return iframeContext.iframeDivRef == null || props.cacheId == null ? (
-    <NonCachedIFrame {...props} />
-  ) : (
+  if (iframeContext.iframeDivRef == null || props.cacheId == null) {
+    return <NonCachedIFrame {...props} />;
+  } else {
+    const src = get_blob_url(props.project_id, "html", props.sha1);
+    return (
+      <HTML
+        value={`<iframe src="${src}" style="border:0;height:${HEIGHT};width:${WIDTH}"/>`}
+      />
+    );
     // @ts-ignore
-    <CachedIFrame {...props} />
-  );
+    return <CachedIFrame {...props} />;
+  }
 }
 
 function NonCachedIFrame({ sha1, project_id }: Props) {
diff --git a/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx b/src/packages/frontend/jupyter/output-messages/immortal-dom-node.tsx
@@ -19,6 +19,8 @@ const immortals: { [globalKey: string]: any } = {};
 
 const Z_INDEX = 1;
 
+const SCROLL_COUNT = 10;
+
 // make it really standout:
 // const PADDING = 5;
 // const STYLE = {
@@ -47,7 +49,8 @@ export default function ImmortalDomNode({
     if (divRef.current == null) {
       return;
     }
-    const elt = getElt()[0];
+    const jElt = getElt();
+    const elt = jElt[0];
     const eltRect = elt.getBoundingClientRect();
     const divRect = divRef.current.getBoundingClientRect();
 
@@ -82,19 +85,39 @@ export default function ImmortalDomNode({
       console.log({ parentRect, eltRect });
       // Calculate the overlap area
       const top = Math.max(0, parentRect.top - eltRect.top);
-      const right = Math.min(eltRect.width, parentRect.right - eltRect.left);
+      // leave 30px on right so to not block scrollbar
+      const right = Math.min(
+        eltRect.width,
+        parentRect.right - 30 - eltRect.left,
+      );
       const bottom = Math.min(eltRect.height, parentRect.bottom - eltRect.top);
       const left = Math.max(0, parentRect.left - eltRect.left);
 
       // Apply clip-path to elt to make it visible only inside of parentRect:
       elt.style.clipPath = `polygon(${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px)`;
+
+      // if its an iframe resize it
+      if (html.toLowerCase().startsWith("<iframe")) {
+        const iframe = jElt.find("iframe");
+        if (iframe.length > 0) {
+          var iframeBody = iframe.contents().find("body");
+          if (iframeBody.length > 0) {
+            // Get dimensions of the iframe's body
+            //const width = iframeBody.outerWidth();
+            const height = iframeBody.outerHeight();
+            //iframe[0].style.width = `${width}px`;
+            iframe[0].style.height = `${height}px`;
+            iframeBody[0].style["overflow-y"] = "hidden";
+          }
+        }
+      }
     }
   }, []);
 
   const getElt = () => {
     if (immortals[globalKey] == null) {
       const elt = (immortals[globalKey] = $(
-        `<div id="${globalKey}" style="border:0;position:absolute;z-index:${zIndex}"/>${html}</div>`,
+        `<div id="${globalKey}" style="border:0;position:absolute;overflow-y:hidden;z-index:${zIndex}"/>${html}</div>`,
       ));
       $("body").append(elt);
       return elt;
@@ -135,7 +158,7 @@ export default function ImmortalDomNode({
         // in order to make it so the iframe doesn't appear
         // to just get "dragged along" nearly as much, as
         // onScroll is throttled.
-        count = Math.min(100, count + 100);
+        count = Math.min(SCROLL_COUNT, SCROLL_COUNT + 100);
         while (count > 0) {
           position();
           await new Promise(requestAnimationFrame);
