improvement: additional print configuration, fix race conditions in export to pdf

Author: mscolnick

frontend/src/components/data-table/TableActions.tsx

@@ -107,13 +107,13 @@ export const TableActions = <TData,>({
   };
 
   return (
-    <div className="flex items-center shrink-0 pt-1 no-print">
+    <div className="flex items-center shrink-0 pt-1">
       {onSearchQueryChange && enableSearch && (
         <Tooltip content="Search">
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={() => setIsSearchEnabled(!isSearchEnabled)}
           >
             <SearchIcon className="w-4 h-4 text-muted-foreground" />
@@ -125,7 +125,7 @@ export const TableActions = <TData,>({
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-4 h-4 text-muted-foreground" />
@@ -140,6 +140,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("row-viewer")}
+                className="print:hidden"
               >
                 <PanelRightIcon
                   className={cn(
@@ -156,6 +157,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("column-explorer")}
+                className="print:hidden"
               >
                 <ChartColumnStacked
                   className={cn(

frontend/src/components/data-table/download-actions.tsx

@@ -87,7 +87,12 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   const { locale } = useLocale();
 
   const button = (
-    <Button data-testid="download-as-button" size="xs" variant="link">
+    <Button
+      data-testid="download-as-button"
+      size="xs"
+      variant="link"
+      className="print:hidden"
+    >
       Download <ChevronDownIcon className="w-3 h-3 ml-1" />
     </Button>
   );
@@ -146,7 +151,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" className="no-print">
+      <DropdownMenuContent side="bottom" className="print:hidden">
         {options.map((option) => (
           <DropdownMenuItem
             key={option.label}

frontend/src/components/data-table/pagination.tsx

@@ -65,7 +65,7 @@ export const DataTablePagination = <TData,>({
           <span>{prettyNumber(selected, locale)} selected</span>
           <Button
             size="xs"
-            data-testid="select-all-button"
+            data-testid="select-all-button print:hidden"
             variant="link"
             className="h-4"
             onMouseDown={Events.preventFocus}
@@ -89,7 +89,7 @@ export const DataTablePagination = <TData,>({
           <span>{prettyNumber(selected, locale)} selected</span>
           <Button
             size="xs"
-            data-testid="clear-selection-button"
+            data-testid="clear-selection-button print:hidden"
             variant="link"
             className="h-4"
             onMouseDown={Events.preventFocus}
@@ -139,7 +139,7 @@ export const DataTablePagination = <TData,>({
 
   const renderPageSizeSelector = () => {
     return (
-      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1">
+      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1 print:hidden">
         <Select
           value={pageSize.toString()}
           onValueChange={(value) => table.setPageSize(Number(value))}
@@ -173,7 +173,7 @@ export const DataTablePagination = <TData,>({
         {showPageSizeSelector && renderPageSizeSelector()}
       </div>
 
-      <div className="flex items-end space-x-2">
+      <div className="flex items-end space-x-2 print:hidden">
         <Button
           size="xs"
           variant="outline"

frontend/src/components/debug/indicator.tsx

@@ -5,7 +5,7 @@ export const TailwindIndicator = () => {
   }
 
   return (
-    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold">
+    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold print:hidden">
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
         sm

frontend/src/components/editor/actions/useNotebookActions.tsx

@@ -70,6 +70,7 @@ import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
 import {
+  ADD_PRINTING_CLASS,
   downloadAsPDF,
   downloadBlob,
   downloadHTMLAsImage,
@@ -219,6 +220,8 @@ export function useNotebookActions() {
             await downloadHTMLAsImage({
               element: app,
               filename: document.title,
+              // Add body.printing ONLY when converting the whole notebook to a screenshot
+              prepare: ADD_PRINTING_CLASS,
             });
           },
         },
@@ -241,8 +244,7 @@ export function useNotebookActions() {
 
               const downloadPDF = async (progress: ProgressState) => {
                 await updateCellOutputsWithScreenshots({
-                  takeScreenshots: () =>
-                    takeScreenshots({ progress, snappy: false }),
+                  takeScreenshots: () => takeScreenshots({ progress }),
                   updateCellOutputs,
                 });
                 await downloadAsPDF({

frontend/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -123,7 +123,7 @@ export const ContextAwarePanel: React.FC = () => {
     <>
       <PanelResizeHandle
         onDragging={handleDragging}
-        className="resize-handle border-border z-20 no-print border-l"
+        className="resize-handle border-border z-20 print:hidden border-l"
       />
       <Panel defaultSize={20} minSize={15} maxSize={80}>
         {renderBody()}

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -227,7 +227,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-10",
+        "border-border print:hidden z-10",
         isSidebarOpen ? "resize-handle" : "resize-handle-collapsed",
         "vertical",
       )}
@@ -238,7 +238,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-20",
+        "border-border print:hidden z-20",
         isDeveloperPanelOpen ? "resize-handle" : "resize-handle-collapsed",
         "horizontal",
       )}
@@ -382,7 +382,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isSidebarOpen && "border-r border-l border-(--slate-7)",
       )}
       minSize={10}
@@ -427,7 +427,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isDeveloperPanelOpen && "border-t",
       )}
       minSize={10}

frontend/src/components/editor/chrome/wrapper/footer.tsx

@@ -57,7 +57,7 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none no-print text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
       <FooterItem
         className="h-full"
         tooltip={

frontend/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,7 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none print:hidden text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

frontend/src/components/editor/controls/Controls.tsx

@@ -212,7 +212,7 @@ const StopControlButton = ({
 };
 
 const topRightControls =
-  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] no-print pointer-events-auto z-30 print:hidden";
+  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] print:hidden pointer-events-auto z-30 print:hidden";
 
 const bottomRightControls =
-  "absolute bottom-5 right-5 flex flex-col gap-2 items-center no-print pointer-events-auto z-30 print:hidden";
+  "absolute bottom-5 right-5 flex flex-col gap-2 items-center print:hidden pointer-events-auto z-30 print:hidden";