debounce resize handler, fix useEffect() in term.tsx

frontend/app/block/block.tsx

@@ -23,7 +23,6 @@ const Block = ({ blockId, onClose }: BlockProps) => {
     let blockElem: JSX.Element = null;
     const [blockData, blockDataLoading] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", blockId));
     if (!blockId || !blockData) return null;
-    console.log("blockData: ", blockData);
     if (blockDataLoading) {
         blockElem = <CenteredDiv>Loading...</CenteredDiv>;
     } else if (blockData.view === "term") {
@@ -38,7 +37,9 @@ const Block = ({ blockId, onClose }: BlockProps) => {
     return (
         <div className="block" ref={blockRef}>
             <div key="header" className="block-header">
-                <div className="block-header-text text-fixed">Block [{blockId.substring(0, 8)}]</div>
+                <div className="block-header-text text-fixed">
+                    Block [{blockId.substring(0, 8)}] {blockData.view}
+                </div>
                 <div className="flex-spacer" />
                 <div className="close-button" onClick={onClose}>
                     <i className="fa fa-solid fa-xmark-large" />

frontend/app/view/term.tsx

@@ -8,6 +8,7 @@ import { FitAddon } from "@xterm/addon-fit";
 import type { ITheme } from "@xterm/xterm";
 import { Terminal } from "@xterm/xterm";
 import * as React from "react";
+import { debounce } from "throttle-debounce";
 
 import "./view.less";
 import "/public/xterm.css";
@@ -40,6 +41,16 @@ function getThemeFromCSSVars(el: Element): ITheme {
     return theme;
 }
 
+function handleResize(fitAddon: FitAddon, blockId: string, term: Terminal) {
+    const oldRows = term.rows;
+    const oldCols = term.cols;
+    fitAddon.fit();
+    if (oldRows !== term.rows || oldCols !== term.cols) {
+        const resizeCommand = { command: "controller:input", termsize: { rows: term.rows, cols: term.cols } };
+        BlockService.SendCommand(blockId, resizeCommand);
+    }
+}
+
 type InitialLoadDataType = {
     loaded: boolean;
     heldData: Uint8Array[];
@@ -78,16 +89,9 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
             BlockService.SendCommand(blockId, inputCmd);
         });
         // resize observer
+        const handleResize_debounced = debounce(50, handleResize);
         const rszObs = new ResizeObserver(() => {
-            const oldRows = term.rows;
-            const oldCols = term.cols;
-            fitAddon.fit();
-            if (oldRows !== term.rows || oldCols !== term.cols) {
-                BlockService.SendCommand(blockId, {
-                    command: "controller:input",
-                    termsize: { rows: term.rows, cols: term.cols },
-                });
-            }
+            handleResize_debounced(fitAddon, blockId, term);
         });
         rszObs.observe(connectElemRef.current);
 
@@ -108,7 +112,7 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
             rszObs.disconnect();
             blockSubject.release();
         };
-    }, [connectElemRef.current]);
+    }, []);
 
     React.useEffect(() => {
         if (!termRef.current) {
@@ -141,7 +145,7 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
                 initialLoadRef.current.heldData = [];
                 console.log(`terminal loaded file ${loadedBytes} bytes, ${Date.now() - startTs}ms`);
             });
-    }, [termRef.current]);
+    }, []);
 
     return (
         <div className="view-term">

frontend/app/view/view.less

@@ -23,6 +23,7 @@
         flex-grow: 1;
         min-height: 0;
         overflow: hidden;
+        line-height: 1;
     }
 }
 

frontend/faraday/lib/TileLayout.tsx

@@ -41,7 +41,6 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
         (id: string, ref: RefObject<HTMLDivElement>) => {
             setNodeRefs((prev) => {
                 prev.set(id, ref);
-                console.log("setRef", id, ref, prev);
                 return prev;
             });
         },
@@ -53,7 +52,6 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
             if (nodeRefs.has(id)) {
                 setNodeRefs((prev) => {
                     prev.delete(id);
-                    console.log("deleteRef", id, prev);
                     return prev;
                 });
             } else {
@@ -239,7 +237,6 @@ const TileNode = <T,>({ layoutNode, renderContent, transform, onLeafClose }: Til
 
     // Register the tile item as a draggable component
     useEffect(() => {
-        console.log("set drag", layoutNode);
         drag(tileNodeRef);
         dragPreview(tileNodeRef);
     }, [tileNodeRef]);

frontend/faraday/lib/tilelayout.less

@@ -66,7 +66,7 @@
         flex: 1 1 auto;
         max-height: 100%;
         max-width: 100%;
-        margin: 5px;
+        /* margin: 5px; */
     }
 
     .tile-leaf {