fix: stabilize message viewer subComponent identity to prevent Monaco editor remounting

The subComponent prop passed to DataTable was an inline arrow function,
causing React to treat it as a new component type on every MobX-triggered
re-render. During gRPC streaming searches, each arriving message triggered
a re-render that unmounted and remounted all expanded Monaco editors,
leading to 21+ seconds of scripting on protobuf-schema topics.

- Wrap subComponent, onCopyKey, onCopyValue in useCallback for stable refs
- Disable Monaco automaticLayout, use single debounced ResizeObserver instead
- Memoize JSON.stringify in KowlJsonView to avoid redundant serialization
- Remove dead expandedKeys/toggleRecordExpand code from pre-DataTable era

Author: weeco

frontend/src/components/misc/KowlJsonView.tsx

@@ -11,15 +11,40 @@
 
 import { Box } from '@redpanda-data/ui';
 import { observer } from 'mobx-react';
-import type { CSSProperties } from 'react';
-import KowlEditor from './KowlEditor';
+import { type CSSProperties, useEffect, useMemo, useRef } from 'react';
+import KowlEditor, { type IStandaloneCodeEditor } from './KowlEditor';
 
 export const KowlJsonView = observer(
   (props: {
     srcObj: object | string | null | undefined;
     style?: CSSProperties;
   }) => {
-    const str = typeof props.srcObj === 'string' ? props.srcObj : JSON.stringify(props.srcObj, undefined, 4);
+    const str = useMemo(
+      () => (typeof props.srcObj === 'string' ? props.srcObj : JSON.stringify(props.srcObj, undefined, 4)),
+      [props.srcObj],
+    );
+
+    const editorRef = useRef<IStandaloneCodeEditor | null>(null);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      let timeoutId: ReturnType<typeof setTimeout>;
+      const observer = new ResizeObserver(() => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          editorRef.current?.layout();
+        }, 150);
+      });
+
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+        clearTimeout(timeoutId);
+      };
+    }, []);
 
     return (
       <Box
@@ -34,16 +59,19 @@ export const KowlJsonView = observer(
          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.
+         We disable automaticLayout and instead use a single debounced ResizeObserver per editor to avoid both
+         the Safari loop and the performance overhead of many concurrent ResizeObservers during re-renders.
          */}
-        <Box position="absolute" h="full" w="full">
+        <Box position="absolute" h="full" w="full" ref={containerRef}>
           <KowlEditor
             value={str}
             language="json"
+            onMount={(editor) => {
+              editorRef.current = editor;
+            }}
             options={{
               readOnly: true,
-              // automaticLayout: false // too much lag on chrome
+              automaticLayout: false,
             }}
           />
         </Box>

frontend/src/components/pages/topics/Tab.Messages/index.tsx

@@ -10,18 +10,9 @@
  */
 
 import { DownloadIcon, KebabHorizontalIcon, SkipIcon, SyncIcon, XCircleIcon } from '@primer/octicons-react';
-import {
-  type IReactionDisposer,
-  action,
-  autorun,
-  computed,
-  makeObservable,
-  observable,
-  transaction,
-  untracked,
-} from 'mobx';
+import { type IReactionDisposer, autorun, computed, makeObservable, observable, transaction, untracked } from 'mobx';
 import { observer } from 'mobx-react';
-import React, { Component, type FC, type ReactNode, useState } from 'react';
+import React, { Component, type FC, type ReactNode, useCallback, useState } from 'react';
 import { type MessageSearch, type MessageSearchRequest, api, createMessageSearch } from '../../../../state/backendApi';
 import type { Payload, Topic, TopicAction } from '../../../../state/restInterfaces';
 import type { TopicMessage } from '../../../../state/restInterfaces';
@@ -250,8 +241,6 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
   currentSearchRun: string | null = null;
 
   @observable downloadMessages: TopicMessage[] | null = null;
-  @observable expandedKeys: React.Key[] = [];
-
   constructor(props: TopicMessageViewProps) {
     super(props);
     this.executeMessageSearch = this.executeMessageSearch.bind(this); // needed because we must pass the function directly as 'submit' prop
@@ -750,29 +739,35 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
     const tsFormat = uiState.topicSettings.previewTimestamps;
     const hasKeyTags = uiState.topicSettings.previewTags.count((x) => x.isActive && x.searchInMessageKey) > 0;
 
-    function onCopyValue(original: TopicMessage) {
-      navigator.clipboard
-        .writeText(getPayloadAsString(original.value.payload ?? original.value.rawBytes))
-        .then(() => {
-          toast({
-            status: 'success',
-            description: 'Value copied to clipboard',
-          });
-        })
-        .catch(navigatorClipboardErrorHandler);
-    }
+    const onCopyValue = useCallback(
+      (original: TopicMessage) => {
+        navigator.clipboard
+          .writeText(getPayloadAsString(original.value.payload ?? original.value.rawBytes))
+          .then(() => {
+            toast({
+              status: 'success',
+              description: 'Value copied to clipboard',
+            });
+          })
+          .catch(navigatorClipboardErrorHandler);
+      },
+      [toast],
+    );
 
-    function onCopyKey(original: TopicMessage) {
-      navigator.clipboard
-        .writeText(getPayloadAsString(original.key.payload ?? original.key.rawBytes))
-        .then(() => {
-          toast({
-            status: 'success',
-            description: 'Key copied to clipboard',
-          });
-        })
-        .catch(navigatorClipboardErrorHandler);
-    }
+    const onCopyKey = useCallback(
+      (original: TopicMessage) => {
+        navigator.clipboard
+          .writeText(getPayloadAsString(original.key.payload ?? original.key.rawBytes))
+          .then(() => {
+            toast({
+              status: 'success',
+              description: 'Key copied to clipboard',
+            });
+          })
+          .catch(navigatorClipboardErrorHandler);
+      },
+      [toast],
+    );
 
     const isValueDeserializerActive =
       uiState.topicSettings.searchParams.valueDeserializer !== null &&
@@ -991,18 +986,21 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
               query.pageSize = String(pageSize);
             });
           })}
-          subComponent={({ row: { original } }) => (
-            <ExpandedMessage
-              msg={original}
-              loadLargeMessage={() =>
-                this.loadLargeMessage(this.props.topic.topicName, original.partitionID, original.offset)
-              }
-              onDownloadRecord={() => {
-                this.downloadMessages = [original];
-              }}
-              onCopyKey={onCopyKey}
-              onCopyValue={onCopyValue}
-            />
+          subComponent={useCallback(
+            ({ row: { original } }: { row: { original: TopicMessage } }) => (
+              <ExpandedMessage
+                msg={original}
+                loadLargeMessage={() =>
+                  this.loadLargeMessage(this.props.topic.topicName, original.partitionID, original.offset)
+                }
+                onDownloadRecord={() => {
+                  this.downloadMessages = [original];
+                }}
+                onCopyKey={onCopyKey}
+                onCopyValue={onCopyValue}
+              />
+            ),
+            [onCopyKey, onCopyValue],
           )}
         />
         <Button
@@ -1044,15 +1042,6 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
     );
   });
 
-  @action toggleRecordExpand(r: TopicMessage) {
-    const key = `${r.offset} ${r.partitionID}${r.timestamp}`;
-    // try collapsing it, removeAll returns the number of matches
-    const removed = this.expandedKeys.removeAll((x) => x === key);
-    if (removed === 0)
-      // wasn't expanded, so expand it now
-      this.expandedKeys.push(key);
-  }
-
   async executeMessageSearch(): Promise<TopicMessage[]> {
     const searchParams = uiState.topicSettings.searchParams;
     const canUseFilters =