msg perf monaco

Author: malinskibeniamin

frontend/src/components/misc/KowlJsonView.test.tsx

@@ -0,0 +1,141 @@
+import { act, render, waitFor } from '../../test-utils';
+import { KowlJsonView } from './KowlJsonView';
+
+const { editorLayoutSpy, editorPropsSpy } = vi.hoisted(() => ({
+  editorLayoutSpy: vi.fn(),
+  editorPropsSpy: vi.fn(),
+}));
+
+vi.mock('./KowlEditor', async () => {
+  const React = await import('react');
+
+  return {
+    __esModule: true,
+    default: (props: any) => {
+      editorPropsSpy(props);
+
+      React.useEffect(() => {
+        props.onMount?.({
+          layout: editorLayoutSpy,
+        });
+      }, [props.onMount]);
+
+      return <div data-testid="mock-kowl-editor">{props.value}</div>;
+    },
+  };
+});
+
+describe('KowlJsonView', () => {
+  let originalResizeObserver: typeof ResizeObserver | undefined;
+  let resizeCallback: ResizeObserverCallback | undefined;
+  let currentSize = { width: 640, height: 384 };
+  let getBoundingClientRectSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    editorLayoutSpy.mockReset();
+    editorPropsSpy.mockReset();
+    resizeCallback = undefined;
+    currentSize = { width: 640, height: 384 };
+
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+    originalResizeObserver = globalThis.ResizeObserver;
+    class ResizeObserverMock {
+      observe = vi.fn();
+      disconnect = vi.fn();
+
+      constructor(callback: ResizeObserverCallback) {
+        resizeCallback = callback;
+      }
+    }
+
+    vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+    getBoundingClientRectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({
+      width: currentSize.width,
+      height: currentSize.height,
+      top: 0,
+      left: 0,
+      right: currentSize.width,
+      bottom: currentSize.height,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }));
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    getBoundingClientRectSpy.mockRestore();
+
+    if (originalResizeObserver) {
+      globalThis.ResizeObserver = originalResizeObserver;
+    } else {
+      delete (globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    }
+  });
+
+  test('uses the lightweight read-only monaco preset and manually lays out the editor', async () => {
+    render(<KowlJsonView srcObj={{ market: 'BSEX' }} />);
+
+    await waitFor(() => {
+      expect(editorLayoutSpy).toHaveBeenCalledWith({ width: 640, height: 384 });
+    });
+
+    expect(editorPropsSpy).toHaveBeenCalled();
+    expect(editorPropsSpy.mock.lastCall?.[0].options).toMatchObject({
+      readOnly: true,
+      domReadOnly: true,
+      automaticLayout: false,
+      folding: false,
+      showFoldingControls: 'never',
+      lineNumbers: 'off',
+      renderLineHighlight: 'none',
+      renderValidationDecorations: 'off',
+      hover: { enabled: false },
+      links: false,
+      matchBrackets: 'never',
+      stickyScroll: { enabled: false },
+      guides: {
+        indentation: false,
+        highlightActiveIndentation: false,
+        bracketPairs: false,
+        bracketPairsHorizontal: false,
+        highlightActiveBracketPair: false,
+      },
+      unicodeHighlight: {
+        ambiguousCharacters: false,
+        invisibleCharacters: false,
+      },
+    });
+  });
+
+  test('relayouts only when the container size changes', async () => {
+    render(<KowlJsonView srcObj={{ market: 'BSEX' }} />);
+
+    await waitFor(() => {
+      expect(editorLayoutSpy).toHaveBeenCalledTimes(1);
+    });
+
+    act(() => {
+      resizeCallback?.([] as ResizeObserverEntry[], {} as ResizeObserver);
+    });
+
+    expect(editorLayoutSpy).toHaveBeenCalledTimes(1);
+
+    currentSize = { width: 800, height: 480 };
+
+    act(() => {
+      resizeCallback?.([] as ResizeObserverEntry[], {} as ResizeObserver);
+    });
+
+    await waitFor(() => {
+      expect(editorLayoutSpy).toHaveBeenCalledTimes(2);
+    });
+
+    expect(editorLayoutSpy).toHaveBeenLastCalledWith({ width: 800, height: 480 });
+  });
+});

frontend/src/components/misc/KowlJsonView.tsx

@@ -11,19 +11,74 @@
 
 import { Box } from '@redpanda-data/ui';
 import { observer } from 'mobx-react';
-import { type CSSProperties, useMemo } from 'react';
-import KowlEditor from './KowlEditor';
+import { type CSSProperties, useCallback, useEffect, useMemo, useRef } from 'react';
+import KowlEditor, { type IStandaloneCodeEditor } from './KowlEditor';
 
 export const KowlJsonView = observer(
   (props: {
     srcObj: object | string | null | undefined;
     style?: CSSProperties;
   }) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const editorRef = useRef<IStandaloneCodeEditor | null>(null);
+    const frameRef = useRef<number | null>(null);
+    const lastSizeRef = useRef({ width: 0, height: 0 });
     const str = useMemo(
       () => (typeof props.srcObj === 'string' ? props.srcObj : JSON.stringify(props.srcObj, undefined, 4)),
       [props.srcObj],
     );
 
+    const scheduleLayout = useCallback(() => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+
+        const editor = editorRef.current;
+        const container = containerRef.current;
+        if (!editor || !container) return;
+
+        const { width, height } = container.getBoundingClientRect();
+        if (width === 0 || height === 0) return;
+
+        const nextSize = {
+          width: Math.floor(width),
+          height: Math.floor(height),
+        };
+
+        if (nextSize.width === lastSizeRef.current.width && nextSize.height === lastSizeRef.current.height) return;
+
+        lastSizeRef.current = nextSize;
+        editor.layout(nextSize);
+      });
+    }, []);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      scheduleLayout();
+
+      if (typeof ResizeObserver === 'undefined') {
+        window.addEventListener('resize', scheduleLayout);
+
+        return () => {
+          window.removeEventListener('resize', scheduleLayout);
+          if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+        };
+      }
+
+      const observer = new ResizeObserver(() => {
+        scheduleLayout();
+      });
+      observer.observe(container);
+
+      return () => {
+        observer.disconnect();
+        if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      };
+    }, [scheduleLayout]);
+
     return (
       <Box
         display="block"
@@ -33,19 +88,39 @@ export const KowlJsonView = observer(
         style={props.style}
         position="relative"
       >
-        {/*
-         We have a problem in Safari with Monaco editor, when used with automaticLayout: true, which is a default,
-         it causes an infinite loop in Safari. It recalculates in a wrong way, changes the dimensions of a parent
-         and that triggers ResizeObserver again (see the internal implementation).
-         We tried to play with overflow, boxSizing, even manually using ResizeObserver.
-         Changing the parent to absolutely positioned element works around the issue for now.
-         */}
-        <Box position="absolute" h="full" w="full">
+        <Box ref={containerRef} position="absolute" h="full" w="full">
           <KowlEditor
             value={str}
             language="json"
+            onMount={(editor) => {
+              editorRef.current = editor;
+              lastSizeRef.current = { width: 0, height: 0 };
+              scheduleLayout();
+            }}
             options={{
               readOnly: true,
+              domReadOnly: true,
+              automaticLayout: false,
+              folding: false,
+              showFoldingControls: 'never',
+              lineNumbers: 'off',
+              renderLineHighlight: 'none',
+              renderValidationDecorations: 'off',
+              hover: { enabled: false },
+              links: false,
+              matchBrackets: 'never',
+              stickyScroll: { enabled: false },
+              guides: {
+                indentation: false,
+                highlightActiveIndentation: false,
+                bracketPairs: false,
+                bracketPairsHorizontal: false,
+                highlightActiveBracketPair: false,
+              },
+              unicodeHighlight: {
+                ambiguousCharacters: false,
+                invisibleCharacters: false,
+              },
             }}
           />
         </Box>