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;
+            handleResize_debounced(fitAddon, blockId, term);
-            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 },
-                });
-            }
         });
         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 {

package.json

@@ -26,6 +26,7 @@
         "@storybook/test": "^8.1.4",
         "@types/node": "^20.12.12",
         "@types/react": "^18.3.2",
+        "@types/throttle-debounce": "^5",
         "@types/uuid": "^9.0.8",
         "@vitejs/plugin-react": "^4.3.0",
         "@vitest/coverage-istanbul": "^1.6.0",
@@ -65,6 +66,7 @@
         "react-markdown": "^9.0.1",
         "remark-gfm": "^4.0.0",
         "rxjs": "^7.8.1",
+        "throttle-debounce": "^5.0.0",
         "uuid": "^9.0.1"
     },
     "packageManager": "yarn@4.2.1"

public/index.html

@@ -5,11 +5,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wails App</title>
-    <link rel="stylesheet" href="/public/fontawesome/css/fontawesome.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css" />
-    <link rel="stylesheet" href="/public/fontawesome/css/brands.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/brands.min.css" />
-    <link rel="stylesheet" href="/public/fontawesome/css/solid.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
-    <link rel="stylesheet" href="/public/fontawesome/css/sharp-solid.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
-    <link rel="stylesheet" href="/public/fontawesome/css/sharp-regular.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />
     <script type="module" src="/frontend/wave.ts"></script>
   </head>
   <body>

yarn.lock

@@ -3728,6 +3728,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/throttle-debounce@npm:^5":
+  version: 5.0.2
+  resolution: "@types/throttle-debounce@npm:5.0.2"
+  checksum: 10c0/526084a7b83edd5c008f193a80c1f6851421d44921e874032d63a598047e17c1a5c97fe99a9dbf806e3d0b49a40d8c4171541a32ea1911d45b5216ddf129d51a
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.2
   resolution: "@types/unist@npm:3.0.2"
@@ -11069,6 +11076,7 @@ __metadata:
     "@tanstack/react-table": "npm:^8.17.3"
     "@types/node": "npm:^20.12.12"
     "@types/react": "npm:^18.3.2"
+    "@types/throttle-debounce": "npm:^5"
     "@types/uuid": "npm:^9.0.8"
     "@vitejs/plugin-react": "npm:^4.3.0"
     "@vitest/coverage-istanbul": "npm:^1.6.0"
@@ -11094,6 +11102,7 @@ __metadata:
     remark-gfm: "npm:^4.0.0"
     rxjs: "npm:^7.8.1"
     storybook: "npm:^8.1.4"
+    throttle-debounce: "npm:^5.0.0"
     ts-node: "npm:^10.9.2"
     tslib: "npm:^2.6.2"
     typescript: "npm:^5.4.5"
@@ -11106,6 +11115,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"throttle-debounce@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "throttle-debounce@npm:5.0.0"
+  checksum: 10c0/666d5b73bfa7340c5186b244416ce965cd276e4bc91a12453ff6eddcc62f02a19c6f532305601d90c809dd5acbd45dd6eea5eb43e0a879a0b3d66d0886a4d8d2
+  languageName: node
+  linkType: hard
+
 "through2@npm:^2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"