feat(console): improve log entry expansion check performance

apps/wing-console/console/ui/package.json

@@ -47,7 +47,6 @@
     "linkifyjs": "^4.1.3",
     "lodash.debounce": "^4.0.8",
     "lodash.escape": "^4.0.1",
-    "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "nanoid": "^4.0.2",
     "react-dom": "^18.3.1",
@@ -68,7 +67,6 @@
     "@types/d3-selection": "^3.0.10",
     "@types/d3-zoom": "^3.0.8",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/lodash.throttle": "^4.1.9",
     "@types/lodash.uniqby": "^4.7.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

apps/wing-console/console/ui/src/features/explorer-pane/zoom-pane.tsx

@@ -17,10 +17,11 @@ import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import type { ReactNode } from "react";
 import { useEvent } from "react-use";
 
+import { useRafThrottle } from "../../use-raf-throttle.js";
+import { useResizeObserver } from "../../use-resize-observer.js";
 import { useAppLocalStorage } from "../localstorage-context/use-localstorage.js";
 
 import { MapControls } from "./map-controls.js";
-import { useRafThrottle } from "./use-raf-throttle.js";
 
 export interface Viewport {
   x: number;
@@ -312,25 +313,16 @@ export const ZoomPane = forwardRef<ZoomPaneRef, ZoomPaneProps>((props, ref) => {
     containerRef.current,
   );
 
-  const fixViewport = useCallback(() => {
-    setViewTransform((viewTransform) => {
-      return restrict(viewTransform);
-    });
-  }, [restrict, setViewTransform]);
-
-  const throttledFixViewport = useRafThrottle(fixViewport);
-
-  useEffect(() => {
-    const myObserver = new ResizeObserver(() => {
-      throttledFixViewport();
-    });
-
-    myObserver.observe(containerRef.current!);
-
-    return () => {
-      myObserver.disconnect();
-    };
-  }, [throttledFixViewport]);
+  useResizeObserver(
+    useRafThrottle(
+      useCallback(() => {
+        setViewTransform((viewTransform) => {
+          return restrict(viewTransform);
+        });
+      }, [restrict, setViewTransform]),
+    ),
+    containerRef,
+  );
 
   const zoomIn = useCallback(() => {
     const container = containerRef.current;

apps/wing-console/console/ui/src/features/logs-pane/console-logs.tsx

@@ -1,8 +1,4 @@
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/outline";
+import { ChevronRightIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import {
   useTheme,
   ResourceIcon,
@@ -11,7 +7,6 @@ import {
 import type { LogEntry } from "@wingconsole/server";
 import classNames from "classnames";
 import Linkify from "linkify-react";
-import throttle from "lodash.throttle";
 import {
   Fragment,
   memo,
@@ -22,6 +17,9 @@ import {
   useState,
 } from "react";
 
+import { useRafThrottle } from "../../use-raf-throttle.js";
+import { useResizeObserver } from "../../use-resize-observer.js";
+
 const shortDateTimeFormat = new Intl.DateTimeFormat(undefined, {
   hour: "2-digit",
   minute: "2-digit",
@@ -75,8 +73,8 @@ const LogEntryRow = memo(
     const expandableRef = useRef<HTMLPreElement>(null);
     const [overflows, setOverflows] = useState(false);
 
-    useEffect(() => {
-      const computeOverflows = throttle(() => {
+    const computeOverflows = useRafThrottle(
+      useCallback(() => {
         const element = expandableRef.current?.parentNode as HTMLPreElement;
         if (!element) {
           return;
@@ -85,25 +83,17 @@ const LogEntryRow = memo(
           element.offsetWidth < element.scrollWidth ||
             log.message?.indexOf("\n") !== -1,
         );
-      }, 500);
+      }, [log.message]),
+    );
 
-      computeOverflows();
+    const containerRef = useRef<HTMLDivElement>(null);
+    useResizeObserver(computeOverflows, containerRef);
 
-      window.addEventListener("resize", computeOverflows);
-      return () => {
-        window.removeEventListener("resize", computeOverflows);
-      };
-    }, [log.message]);
     const [canBeExpanded, setCanBeExpanded] = useState(false);
     useEffect(() => {
       setCanBeExpanded(overflows || expanded);
     }, [expanded, overflows]);
 
-    const ChevronIcon = useMemo(
-      () => (expanded ? ChevronDownIcon : ChevronRightIcon),
-      [expanded],
-    );
-
     const resourceName = useMemo(
       () => log.ctx?.label || nodePathBaseName(log.ctx?.sourcePath ?? ""),
       [log.ctx?.label, log.ctx?.sourcePath],
@@ -128,6 +118,7 @@ const LogEntryRow = memo(
         {/*TODO: Fix a11y*/}
         {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
         <div
+          ref={containerRef}
           className={classNames(
             "group w-full",
             "flex min-w-0",
@@ -180,14 +171,17 @@ const LogEntryRow = memo(
           >
             {canBeExpanded && (
               <button
+                className="select-none"
                 onClick={() => {
                   setExpanded((expanded) => !expanded);
                 }}
               >
-                <ChevronIcon
+                <ChevronRightIcon
                   className={classNames(
                     "w-3.5 h-3.5",
                     "mr-0.5 inline-block -mt-0.5",
+                    expanded && "transform rotate-90",
+                    "transition",
                     theme.text1,
                     theme.text1Hover,
                   )}

apps/wing-console/console/ui/src/use-resize-observer.ts

@@ -0,0 +1,35 @@
+import type { RefObject } from "react";
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * A hook that observes the resize of an element.
+ */
+export const useResizeObserver = (
+  callback: ResizeObserverCallback,
+  ref: RefObject<Element | null>,
+) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const [observer] = useState(
+    () =>
+      new ResizeObserver((entries, observer) => {
+        callbackRef.current(entries, observer);
+      }),
+  );
+
+  useEffect(() => {
+    const current = ref.current;
+    if (!current) {
+      return;
+    }
+
+    observer.observe(current);
+
+    return () => {
+      observer.unobserve(current);
+    };
+  }, [observer, ref]);
+};