jupyter stable html: support disabling virtualization while having stable html

Author: williamstein

src/packages/frontend/account/editor-settings/checkboxes.tsx

@@ -30,6 +30,8 @@ const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   build_on_save: "build LaTex/Rmd files whenever it is saved to disk",
   show_exec_warning: "warn that certain files are not directly executable",
   ask_jupyter_kernel: "ask which kernel to use for a new Jupyter Notebook",
+  disable_jupyter_virtualization:
+    "render entire notebook instead of just visible part (slower and not recommended)",
   jupyter_classic: (
     <span>
       <A href="https://github.com/sagemathinc/cocalc/issues/7706">

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

@@ -143,7 +143,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     frame_actions.cell_list_div = $(cell_list_node.current);
 
     return () => {
-      save_scroll();
+      saveScroll();
       // handle focus via an event handler on window.
       // We have to do this since, e.g., codemirror editors
       // involve spans that aren't even children, etc...
@@ -180,7 +180,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     return render_loading();
   }
 
-  function save_scroll(): void {
+  const saveScroll = useCallback(() => {
     if (use_windowed_list) {
       // TODO -- virtuoso
       // We don't actually need to do anything though since our virtuoso
@@ -190,7 +190,11 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
         frameActions.current?.set_scrollTop(cell_list_node.current.scrollTop);
       }
     }
-  }
+  }, [use_windowed_list]);
+
+  const saveScrollDebounce = useMemo(() => {
+    return debounce(saveScroll, 2000);
+  }, [use_windowed_list]);
 
   async function restore_scroll(): Promise<void> {
     if (scrollTop == null || use_windowed_list) return;
@@ -543,12 +547,13 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
   const scrollOrResize = useMemo(() => {
     return {};
   }, []);
-  useEffect(() => {
-    if (!use_windowed_list) return;
+  const updateScrollOrResize = useCallback(() => {
     for (const key in scrollOrResize) {
       scrollOrResize[key]();
     }
-  }, [cells]);
+  }, []);
+
+  useEffect(updateScrollOrResize, [cells]);
 
   const fileContext = useFileContext();
 
@@ -559,17 +564,14 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
 
   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, scrollOrResize }}
-      >
+      <StableHtmlContext.Provider value={{ cellListDivRef, scrollOrResize }}>
         <div ref={cellListDivRef} className="smc-vfill">
           <Virtuoso
             ref={virtuosoRef}
@@ -658,24 +660,27 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     v.push(BOTTOM_PADDING_CELL);
 
     body = (
-      <div
-        key="cells"
-        className="smc-vfill"
-        style={{
-          fontSize: `${font_size}px`,
-          paddingLeft: "5px",
-          flex: 1,
-          overflowY: "auto",
-          overflowX: "hidden",
-        }}
-        ref={handleCellListRef}
-        onClick={actions != null && complete != null ? on_click : undefined}
-        onScroll={debounce(() => {
-          save_scroll();
-        }, 3000)}
-      >
-        {v}
-      </div>
+      <StableHtmlContext.Provider value={{ cellListDivRef, scrollOrResize }}>
+        <div
+          key="cells"
+          className="smc-vfill"
+          style={{
+            fontSize: `${font_size}px`,
+            paddingLeft: "5px",
+            flex: 1,
+            overflowY: "auto",
+            overflowX: "hidden",
+          }}
+          ref={cellListDivRef}
+          onClick={actions != null && complete != null ? on_click : undefined}
+          onScroll={() => {
+            updateScrollOrResize();
+            saveScrollDebounce();
+          }}
+        >
+          {v}
+        </div>
+      </StableHtmlContext.Provider>
     );
   }
 

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

@@ -146,6 +146,8 @@ export default function StableUnsafeHtml({
       // scroll work in there though -- if you want to see the whole thing, you
       // must not collapse it.
       const containerRect = cellOutputDivRef.current?.getBoundingClientRect();
+      //console.log({ containerRect, parentRect, eltRect });
+
       const bottom = Math.max(
         top,
         Math.min(
@@ -257,7 +259,7 @@ export default function StableUnsafeHtml({
   }, []);
 
   useEffect(() => {
-    // This is "ugly jquery"... but I did try passing this info
+    // This is "old fashioned jquery"... but I tried passing this info
     // down via stableHtmlContext and it gets REALLY complicated.
     // Also this only happens once on mount, so it's not a problem
     // regarding efficiency.