working further on polishing stable html rendering

Author: williamstein

src/packages/frontend/jupyter/output-messages/cached-iframe.tsx

@@ -13,7 +13,6 @@ import ReactDOM from "react-dom";
 import useIsMountedRef from "@cocalc/frontend/app-framework/is-mounted-hook";
 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";
 
@@ -24,7 +23,7 @@ const MAX_WAIT = 5000;
 const BACKOFF = 1.3;
 
 const HEIGHT = "70vh";
-const WIDTH = "max(800px,70vw)";
+const WIDTH = "100vw";
 
 interface Props {
   sha1: string;
@@ -53,8 +52,6 @@ export default function IFrame(props: Props) {
         value={`<iframe src="${src}" style="border:0;height:${HEIGHT};width:${WIDTH}"/>`}
       />
     );
-    // @ts-ignore
-    return <CachedIFrame {...props} />;
   }
 }
 

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

@@ -31,8 +31,18 @@ import { useIFrameContext } from "@cocalc/frontend/jupyter/cell-list";
 import { sha1 } from "@cocalc/util/misc";
 import TTL from "@isaacs/ttlcache";
 
+// AFter this many seconds, an element that hasn't been in the react dom and whose
+// parent hasn't been scrolled, will get un-rendered.
 const IDLE_TIMEOUT_S = 10 * 60; // 10 minutes
+// If there are more than this many elements, old ones are un-rendered.
 const MAX_ELEMENTS = 500; // max items
+// Rough assumption about size of scrollbar.
+const SCROLL_WIDTH = 30;
+// we have to put the html on top of the notebook to be visible.  This is the z-index we use.
+const Z_INDEX = 1;
+// no matter what when the html is in the REACT dom, it will have its position updated this frequently.
+// it also gets updated on scroll of the cell list.
+const POSITION_WHEN_MOUNTED_INTERVAL_MS = 500;
 
 const cache = new TTL<string, any>({
   ttl: IDLE_TIMEOUT_S * 1000,
@@ -43,11 +53,6 @@ const cache = new TTL<string, any>({
     elt.remove();
   },
 });
-// const cache: { [globalKey: string]: any } = {};
-
-const Z_INDEX = 1;
-
-const SCROLL_COUNT = 25;
 
 // make it really standout:
 // const PADDING = 5;
@@ -110,9 +115,9 @@ export default function StableUnsafeHtml({
     divRef.current.style.height = `${
       eltRect.bottom - eltRect.top + 2 * PADDING
     }px`;
-    divRef.current.style.width = `${
-      eltRect.right - eltRect.left + 2 * PADDING
-    }px`;
+    //     divRef.current.style.width = `${
+    //       eltRect.right - eltRect.left + 2 * PADDING
+    //     }px`;
 
     // clip our immortal html so it isn't visible outside the parent
     const parent = $(iframeContext.cellListDivRef?.current)[0];
@@ -123,26 +128,29 @@ export default function StableUnsafeHtml({
       // leave 30px on right so to not block scrollbar
       const right = Math.min(
         eltRect.width,
-        parentRect.right - 30 - eltRect.left,
+        parentRect.right - SCROLL_WIDTH - 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)`;
 
+      // Set widht, so it possible to scroll horizontally and see whatever widget is in the output.
+      const w = $(divRef.current).width();
+      if (w) {
+        elt.style.width = `${w}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";
           }
         }
       }
@@ -152,7 +160,7 @@ export default function StableUnsafeHtml({
   const getElt = () => {
     if (!cache.has(globalKey)) {
       const elt = $(
-        `<div id="${globalKey}" style="border:0;position:absolute;overflow-y:hidden;z-index:${zIndex}"/>${html}</div>`,
+        `<div id="${globalKey}" style="border:0;position:absolute;overflow:auto;z-index:${zIndex}"/>${html}</div>`,
       );
       // @ts-ignore
       elt.process_smc_links();
@@ -191,27 +199,19 @@ export default function StableUnsafeHtml({
   useEffect(() => {
     // TOOD: can we get rid of interval by using a resize observer on
     // this iframeContext.cellListDivRef?
-    intervalRef.current = setInterval(position, 500);
+    intervalRef.current = setInterval(
+      position,
+      POSITION_WHEN_MOUNTED_INTERVAL_MS,
+    );
     if (iframeContext.iframeOnScrolls != null) {
-      let count = 0;
       iframeContext.iframeOnScrolls[globalKey] = async () => {
-        // We run position a lot whenever there is a scroll
-        // in order to make it so the iframe doesn't appear
-        // to just get "dragged along" nearly as much, as
-        // onScroll is throttled.
-        count = SCROLL_COUNT;
-        while (count > 0) {
-          position();
-          await new Promise(requestAnimationFrame);
-          count -= 1;
-        }
-        // throw in an update when we're done.
+        position();
+        await new Promise(requestAnimationFrame);
         position();
       };
     }
     position();
     setTimeout(position, 0);
-    setTimeout(position, 5);
 
     return () => {
       delete iframeContext.iframeOnScrolls?.[globalKey];