stable unsafe html: better implementation of clipping

Author: williamstein

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

@@ -37,7 +37,7 @@ import { Cell } from "./cell";
 import HeadingTagComponent from "./heading-tag";
 interface StableHtmlContextType {
   cellListDivRef?: MutableRefObject<any>;
-  iframeOnScrolls?: { [key: string]: () => void };
+  htmlOnScrolls?: { [key: string]: () => void };
 }
 const StableHtmlContext = createContext<StableHtmlContextType>({});
 export const useStableHtmlContext: () => StableHtmlContextType = () => {
@@ -408,7 +408,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     }
   }
 
-  function render_cell({
+  function renderCell({
     id,
     isScrolling,
     index,
@@ -439,6 +439,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
         }}
       />
     ) : undefined;
+
     return (
       <div key={id}>
         <Cell
@@ -505,8 +506,8 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               ...scrollState,
               id: cellListRef.current?.get(scrollState.index),
             };
-            for (const key in iframeOnScrolls) {
-              iframeOnScrolls[key]();
+            for (const key in htmlOnScrolls) {
+              htmlOnScrolls[key]();
             }
           },
           scrollerRef: handleCellListRef,
@@ -539,13 +540,13 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     });
   }, [cell_list]);
 
-  const iframeOnScrolls = useMemo(() => {
+  const htmlOnScrolls = useMemo(() => {
     return {};
   }, []);
   useEffect(() => {
     if (!use_windowed_list) return;
-    for (const key in iframeOnScrolls) {
-      iframeOnScrolls[key]();
+    for (const key in htmlOnScrolls) {
+      htmlOnScrolls[key]();
     }
   }, [cells]);
 
@@ -557,7 +558,9 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   if (use_windowed_list) {
     body = (
-      <StableHtmlContext.Provider value={{ cellListDivRef, iframeOnScrolls }}>
+      <StableHtmlContext.Provider
+        value={{ cellListDivRef, htmlOnScrolls }}
+      >
         <div ref={cellListDivRef} className="smc-vfill">
           <Virtuoso
             ref={virtuosoRef}
@@ -593,7 +596,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               if (id == null) return null;
               const h = virtuosoHeightsRef.current[index];
               if (actions == null) {
-                return render_cell({
+                return renderCell({
                   id,
                   isScrolling: false,
                   index,
@@ -602,7 +605,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               return (
                 <SortableItem id={id} key={id}>
                   <DivTempHeight height={h ? `${h}px` : undefined}>
-                    {render_cell({
+                    {renderCell({
                       id,
                       isScrolling: false,
                       index,
@@ -631,7 +634,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     cell_list.forEach((id: string) => {
       v.push(
         <SortableItem id={id} key={id}>
-          {render_cell({
+          {renderCell({
             id,
             isScrolling: false,
             index,
@@ -681,7 +684,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
               fontSize: `${font_size}px`,
             }}
           >
-            {render_cell({ id })}
+            {renderCell({ id })}
           </div>
         )}
         onDragStart={(id) => {

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

@@ -79,6 +79,9 @@ export function CellOutput({
         ...style,
       }}
       cocalc-test="cell-output"
+      className={
+        "cocalc-output-div" /* used by stable unsafe html for clipping */
+      }
     >
       {!hidePrompt && <ControlColumn cell={cell} actions={actions} id={id} />}
       <OutputColumn
@@ -193,11 +196,7 @@ function ControlColumn({ actions, cell, id }) {
   }
   if (actions != null) {
     return (
-      <OutputToggle
-        actions={actions}
-        id={id}
-        scrolled={cell.get("scrolled")}
-      >
+      <OutputToggle actions={actions} id={id} scrolled={cell.get("scrolled")}>
         {prompt}
       </OutputToggle>
     );

src/packages/frontend/jupyter/cell.tsx

@@ -60,7 +60,6 @@ interface Props {
   isLast?: boolean;
   dragHandle?: JSX.Element;
   read_only?: boolean;
-  outputDivRef?;
 }
 
 function areEqual(props: Props, nextProps: Props): boolean {
@@ -165,7 +164,6 @@ 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/stable-unsafe-html.tsx

@@ -79,6 +79,7 @@ export default function StableUnsafeHtml({
   zIndex = Z_INDEX, // todo: support changing?
 }: Props) {
   const divRef = useRef<any>(null);
+  const cellOutputDivRef = useRef<any>(null);
   const intervalRef = useRef<any>(null);
   const { isVisible, project_id, path, id } = useFrameContext();
   const stableHtmlContext = useStableHtmlContext();
@@ -131,15 +132,11 @@ export default function StableUnsafeHtml({
         parentRect.right - SCROLL_WIDTH - eltRect.left,
       );
 
-      // .closest('.a');
-      //const bottom = Math.min(eltRect.height, parentRect.bottom - eltRect.top);
-      // We do this so that if the output is COLLAPSED, then the html doesn't
+      // The bottom is complicated because if the output is COLLAPSED, then the html doesn't
       // go outside the shortened div.  We do not do anything regarding making
       // scroll work in there though -- if you want to see the whole thing, you
       // must not collapse it.
-      const containerRect = $(divRef.current)
-        .closest(".cocalc-output-div")[0]
-        ?.getBoundingClientRect();
+      const containerRect = cellOutputDivRef.current?.getBoundingClientRect();
       const bottom = Math.max(
         top,
         Math.min(
@@ -221,8 +218,8 @@ export default function StableUnsafeHtml({
       position,
       POSITION_WHEN_MOUNTED_INTERVAL_MS,
     );
-    if (stableHtmlContext.iframeOnScrolls != null) {
-      stableHtmlContext.iframeOnScrolls[globalKey] = async () => {
+    if (stableHtmlContext.htmlOnScrolls != null) {
+      stableHtmlContext.htmlOnScrolls[globalKey] = async () => {
         position();
         await new Promise(requestAnimationFrame);
         position();
@@ -232,12 +229,22 @@ export default function StableUnsafeHtml({
     setTimeout(position, 0);
 
     return () => {
-      delete stableHtmlContext.iframeOnScrolls?.[globalKey];
+      delete stableHtmlContext.htmlOnScrolls?.[globalKey];
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
   }, []);
 
+  useEffect(() => {
+    // This is "ugly jquery"... but I did try 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.
+    cellOutputDivRef.current = $(divRef.current).closest(
+      ".cocalc-output-div",
+    )[0];
+  }, []);
+
   return <div ref={divRef} style={STYLE}></div>;
 }