stable html -- more naming consistency and put back count param

Author: williamstein

src/packages/frontend/jupyter/cell-list.tsx

@@ -6,7 +6,7 @@
 // React component that renders the ordered list of cells
 
 declare const $: any;
-
+import useResizeObserver from "use-resize-observer";
 import { delay } from "awaiting";
 import * as immutable from "immutable";
 import { debounce } from "lodash";
@@ -37,7 +37,7 @@ import { Cell } from "./cell";
 import HeadingTagComponent from "./heading-tag";
 interface StableHtmlContextType {
   cellListDivRef?: MutableRefObject<any>;
-  htmlOnScrolls?: { [key: string]: () => void };
+  scrollOrResize?: { [key: string]: () => void };
 }
 const StableHtmlContext = createContext<StableHtmlContextType>({});
 export const useStableHtmlContext: () => StableHtmlContextType = () => {
@@ -506,8 +506,8 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               ...scrollState,
               id: cellListRef.current?.get(scrollState.index),
             };
-            for (const key in htmlOnScrolls) {
-              htmlOnScrolls[key]();
+            for (const key in scrollOrResize) {
+              scrollOrResize[key]();
             }
           },
           scrollerRef: handleCellListRef,
@@ -540,13 +540,13 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     });
   }, [cell_list]);
 
-  const htmlOnScrolls = useMemo(() => {
+  const scrollOrResize = useMemo(() => {
     return {};
   }, []);
   useEffect(() => {
     if (!use_windowed_list) return;
-    for (const key in htmlOnScrolls) {
-      htmlOnScrolls[key]();
+    for (const key in scrollOrResize) {
+      scrollOrResize[key]();
     }
   }, [cells]);
 
@@ -556,10 +556,19 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
 
   const cellListDivRef = useRef<HTMLDivElement>(null);
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
+
+  const cellListResize = useResizeObserver({ ref: cellListDivRef });
+  useEffect(() => {
+    if (!use_windowed_list) return;
+    for (const key in scrollOrResize) {
+      scrollOrResize[key]();
+    }
+  }, [cellListResize]);
+
   if (use_windowed_list) {
     body = (
       <StableHtmlContext.Provider
-        value={{ cellListDivRef, htmlOnScrolls }}
+        value={{ cellListDivRef, scrollOrResize }}
       >
         <div ref={cellListDivRef} className="smc-vfill">
           <Virtuoso

src/packages/frontend/jupyter/output-messages/stable-unsafe-html.tsx

@@ -40,9 +40,18 @@ const MAX_ELEMENTS = 500; // max items
 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;
+
+// POSITION_WHEN_MOUNTED_INTERVAL_MS: 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. This also serves to
+// ensure that this item has a recent ttl so it isn't cleared from the ttl cache.
+// It should NOT ever actually be needed, since we always update the position on
+// resize and scroll events.
+const POSITION_WHEN_MOUNTED_INTERVAL_MS = 10000;
+
+// Scroll actively this many frames after each update, due to throttling of onscroll
+// and other events. This is to eliminate lag.
+const SCROLL_COUNT = 30;
 
 const cache = new TTL<string, any>({
   ttl: IDLE_TIMEOUT_S * 1000,
@@ -121,7 +130,7 @@ export default function StableUnsafeHtml({
     //     }px`;
 
     // clip our immortal html so it isn't visible outside the parent
-    const parent = $(stableHtmlContext.cellListDivRef?.current)[0];
+    const parent = stableHtmlContext.cellListDivRef?.current;
     if (parent != null) {
       const parentRect = parent.getBoundingClientRect();
       // Calculate the overlap area
@@ -151,8 +160,8 @@ export default function StableUnsafeHtml({
       // 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();
+      // Set width, so it possible to scroll horizontally and see whatever widget is in the output.
+      const w = divRef.current.offsetWidth;
       if (w) {
         elt.style.width = `${w}px`;
       }
@@ -212,24 +221,35 @@ export default function StableUnsafeHtml({
   }, [isVisible]);
 
   useEffect(() => {
-    // TOOD: can we get rid of interval by using a resize observer on
-    // this stableHtmlContext.cellListDivRef?
     intervalRef.current = setInterval(
       position,
       POSITION_WHEN_MOUNTED_INTERVAL_MS,
     );
-    if (stableHtmlContext.htmlOnScrolls != null) {
-      stableHtmlContext.htmlOnScrolls[globalKey] = async () => {
-        position();
-        await new Promise(requestAnimationFrame);
+    if (stableHtmlContext.scrollOrResize != null) {
+      let count = 0;
+      stableHtmlContext.scrollOrResize[globalKey] = async () => {
+        if (count > 0) {
+          return;
+        }
+        // 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();
       };
     }
     position();
     setTimeout(position, 0);
 
     return () => {
-      delete stableHtmlContext.htmlOnScrolls?.[globalKey];
+      delete stableHtmlContext.scrollOrResize?.[globalKey];
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }