deleting a lot of complicated code from the jupyter cell list which isn't needed with our new approach

Author: williamstein

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

@@ -21,8 +21,6 @@ import {
   useRef,
 } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-import { useDebounce } from "use-debounce";
-
 import { CSS, React, useIsMountedRef } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import {
@@ -38,7 +36,6 @@ import { JupyterActions } from "./browser-actions";
 import { Cell } from "./cell";
 import HeadingTagComponent from "./heading-tag";
 interface StableHtmlContextType {
-  iframeDivRef?: MutableRefObject<any>;
   cellListDivRef?: MutableRefObject<any>;
   iframeOnScrolls?: { [key: string]: () => void };
 }
@@ -51,7 +48,6 @@ export const useStableHtmlContext: () => StableHtmlContextType = () => {
 //  - iframe cell  (hidden at top)
 //  - style cell   (hidden at top)
 //  - padding (at the bottom)
-const EXTRA_TOP_CELLS = 2;
 const EXTRA_BOTTOM_CELLS = 1;
 
 const CELL_VISIBLE_THRESH = 50;
@@ -67,11 +63,6 @@ const BOTTOM_PADDING_CELL = (
   ></div>
 );
 
-const ITEM_STYLE: CSS = {
-  height: "1px",
-  overflow: "hidden",
-};
-
 interface CellListProps {
   actions?: JupyterActions; // if not defined, then everything is read only
   cell_list: immutable.List<string>; // list of ids of cells in order
@@ -284,9 +275,6 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
   }
 
   function scrollCellListVirtuoso(scroll: Scroll) {
-    // NOTE: below we add EXTRA_TOP_CELLS to the index to compensate
-    // for the first fixed hidden cell that contains all
-    // of the output iframes!
     if (typeof scroll == "number") {
       // scroll to a number is not meaningful for virtuoso; it might
       // be requested maybe (?) due to scroll restore and switching
@@ -304,7 +292,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
         // We ONLY scroll if the cell is not in the visible, since
         // react-virtuoso's "scrollIntoView" aggressively scrolls, even
         // if the item is in view.
-        const n = index + EXTRA_TOP_CELLS;
+        const n = index;
         let isNotVisible = false;
         let align: "start" | "center" | "end" = "start";
         if (n < virtuosoRangeRef.current.startIndex) {
@@ -346,40 +334,40 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
         }
       } else if (scroll == "cell top") {
         virtuosoRef.current?.scrollToIndex({
-          index: index + EXTRA_TOP_CELLS,
+          index,
         });
         // hack which seems necessary for jupyter at least.
         requestAnimationFrame(
           () =>
             virtuosoRef.current?.scrollToIndex({
-              index: index + EXTRA_TOP_CELLS,
+              index,
             }),
         );
       }
     } else if (scroll.startsWith("list")) {
       if (scroll == "list up") {
         const index = virtuosoRangeRef.current?.startIndex;
         virtuosoRef.current?.scrollToIndex({
-          index: index + EXTRA_TOP_CELLS,
+          index,
           align: "end",
         });
         requestAnimationFrame(
           () =>
             virtuosoRef.current?.scrollToIndex({
-              index: index + EXTRA_TOP_CELLS,
+              index,
               align: "end",
             }),
         );
       } else if (scroll == "list down") {
         const index = virtuosoRangeRef.current?.endIndex;
         virtuosoRef.current?.scrollToIndex({
-          index: index + EXTRA_TOP_CELLS,
+          index,
           align: "start",
         });
         requestAnimationFrame(
           () =>
             virtuosoRef.current?.scrollToIndex({
-              index: index + EXTRA_TOP_CELLS,
+              index,
               align: "start",
             }),
         );
@@ -515,7 +503,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           onScroll: (scrollState) => {
             lastScrollStateRef.current = {
               ...scrollState,
-              id: cellListRef.current?.get(scrollState.index - EXTRA_TOP_CELLS),
+              id: cellListRef.current?.get(scrollState.index),
             };
             for (const key in iframeOnScrolls) {
               iframeOnScrolls[key]();
@@ -539,16 +527,13 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     if (index == null) {
       return;
     }
-    // index + EXTRA_TOP_CELLS because of iframe and style cells
-    // the offset+1 is I think compensating for a bug maybe in
-    // virtuoso or our use of it.
     virtuosoRef.current?.scrollToIndex({
-      index: index + EXTRA_TOP_CELLS,
+      index,
       offset: offset + 1,
     });
     requestAnimationFrame(() => {
       virtuosoRef.current?.scrollToIndex({
-        index: index + EXTRA_TOP_CELLS,
+        index,
         offset: offset + 1,
       });
     });
@@ -564,62 +549,26 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     }
   }, [cells]);
 
-  // allStyles -- the CSS in <style> blocks in text/html outputs
-  // of all cells.  We gather this and place it in a special cell
-  // at the top, since that such css doesn't disappear when the cells
-  // that produced it are scrolled off the screen. See
-  //    https://github.com/sagemathinc/cocalc/issues/5943
-  // We only update allStyles with a debounce of 1s, since it
-  // can be time consuming as it involves a scan of the entire notebook.
-  const [debouncedCells] = useDebounce(cells, 1000);
-  const allStyles = useMemo(() => {
-    if (!use_windowed_list) return "";
-    let value = "";
-    cell_list.forEach((id) => {
-      (debouncedCells.getIn([id, "output"]) as any)?.forEach((output) => {
-        // I hit a case in prod of output not being defined. Given the
-        // debounce and how debouncedCells might not match up with cell_list,
-        // and how output is going from markdown cells or maybe cleared cells,
-        // it seems plausible output could contain an undefined entry.
-        const html = output?.getIn(["data", "text/html"]);
-        if (html?.includes("style")) {
-          // parse out and include style tags
-          for (const x of $("<div>" + html + "</div>").find("style")) {
-            value += x.innerHTML.trim() + "\n\n";
-          }
-        }
-      });
-    });
-    return value;
-  }, [debouncedCells, use_windowed_list]);
-
   const fileContext = useFileContext();
 
   let body;
 
-  const iframeDivRef = useRef<HTMLDivElement>(null);
   const cellListDivRef = useRef<HTMLDivElement>(null);
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   if (use_windowed_list) {
     body = (
-      <StableHtmlContext.Provider
-        value={{ iframeDivRef, cellListDivRef, iframeOnScrolls }}
-      >
+      <StableHtmlContext.Provider value={{ cellListDivRef, iframeOnScrolls }}>
         <div ref={cellListDivRef} className="smc-vfill">
           <Virtuoso
             ref={virtuosoRef}
             onClick={actions != null && complete != null ? on_click : undefined}
-            topItemCount={EXTRA_TOP_CELLS}
+            topItemCount={0}
             style={{
               fontSize: `${font_size}px`,
               flex: 1,
               overflowX: "hidden",
             }}
-            totalCount={
-              cell_list.size +
-              EXTRA_TOP_CELLS /* +EXTRA_TOP_CELLS due to the iframe cell and style cell at the top */ +
-              EXTRA_BOTTOM_CELLS
-            }
+            totalCount={cell_list.size + EXTRA_BOTTOM_CELLS}
             itemSize={(el) => {
               // We capture measured heights -- see big coment above the
               // the DivTempHeight component below for why this is needed
@@ -637,29 +586,17 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               return h;
             }}
             itemContent={(index) => {
-              if (index == 0) {
-                return (
-                  <div key="iframes" ref={iframeDivRef} style={ITEM_STYLE}>
-                    iframes here
-                  </div>
-                );
-              } else if (index == 1) {
-                return (
-                  <div key="styles" ref={iframeDivRef} style={ITEM_STYLE}>
-                    <style>{allStyles}</style>
-                  </div>
-                );
-              } else if (index == cell_list.size + EXTRA_TOP_CELLS) {
+              if (index == cell_list.size) {
                 return BOTTOM_PADDING_CELL;
               }
-              const id = cell_list.get(index - EXTRA_TOP_CELLS);
+              const id = cell_list.get(index);
               if (id == null) return null;
               const h = virtuosoHeightsRef.current[index];
               if (actions == null) {
                 return render_cell({
                   id,
                   isScrolling: false,
-                  index: index - EXTRA_TOP_CELLS,
+                  index,
                 });
               }
               return (
@@ -668,7 +605,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
                     {render_cell({
                       id,
                       isScrolling: false,
-                      index: index - EXTRA_TOP_CELLS,
+                      index,
                       isFirst: id === cell_list.get(0),
                       isLast: id === cell_list.get(-1),
                     })}

src/packages/frontend/jupyter/cell.tsx

@@ -60,6 +60,7 @@ interface Props {
   isLast?: boolean;
   dragHandle?: JSX.Element;
   read_only?: boolean;
+  outputDivRef?;
 }
 
 function areEqual(props: Props, nextProps: Props): boolean {
@@ -164,6 +165,7 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
         trust={props.trust}
         complete={props.is_current && props.complete != null}
         llmTools={props.llmTools}
+        divRef={props.outputDivRef}
       />
     );
   }

src/packages/frontend/jupyter/output-messages/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 { useStableHtmlContext } 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).
@@ -35,12 +34,7 @@ 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 stableHtmlContext = useStableHtmlContext();
-  if (
-    stableHtmlContext.iframeDivRef == null ||
-    props.cacheId == null ||
-    !props.trust
-  ) {
+  if (props.cacheId == null || !props.trust) {
     return <NonCachedIFrame {...props} />;
   } else {
     const src = get_blob_url(props.project_id, "html", props.sha1);
@@ -90,7 +84,7 @@ function NonCachedIFrame({ sha1, project_id }: Props) {
       ref={iframeRef}
       src={get_blob_url(project_id, "html", sha1) + `&attempts=${attempts}`}
       onError={load_error}
-      style={{ border: 0, width: "100%", minHeight: "500px" }}
+      style={{ border: 0, width: WIDTH, minHeight: HEIGHT }}
     />
   );
 }