From c77b607786e389dfdc466fc20a74853ad900a52d Mon Sep 17 00:00:00 2001
From: Aaron Knudtson <87577305+knudtty@users.noreply.github.com>
Date: Thu, 23 Oct 2025 23:07:03 +0200
Subject: [PATCH 1/2] fix: memoize inputs to fix performance issues

---
 .changeset/angry-scissors-flow.md             |  5 +++++
 packages/app/src/DBSearchPage.tsx             | 11 ++++++----
 .../components/DBSqlRowTableWithSidebar.tsx   | 20 +++++++++----------
 3 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/angry-scissors-flow.md

diff --git a/.changeset/angry-scissors-flow.md b/.changeset/angry-scissors-flow.md
new file mode 100644
index 000000000..cca7e8d97
--- /dev/null
+++ b/.changeset/angry-scissors-flow.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: memoize inputs to fix text input performance
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index a13dc9a26..703e74e0b 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1180,9 +1180,12 @@ function DBSearchPage() {
   );
   // Parse the orderBy string into a SortingState. We need the string
   // version in other places so we keep this parser separate.
-  const orderByConfig = parseAsSortingStateString.parse(
-    searchedConfig.orderBy ?? '',
-  );
+  const initialSortBy = useMemo(() => {
+    const orderBy = parseAsSortingStateString.parse(
+      searchedConfig.orderBy ?? '',
+    );
+    return orderBy ? [orderBy] : [];
+  }, [searchedConfig.orderBy]);
 
   const handleTimeRangeSelect = useCallback(
     (d1: Date, d2: Date) => {
@@ -1796,7 +1799,7 @@ function DBSearchPage() {
                           denoiseResults={denoiseResults}
                           collapseAllRows={collapseAllRows}
                           onSortingChange={onSortingChange}
-                          initialSortBy={orderByConfig ? [orderByConfig] : []}
+                          initialSortBy={initialSortBy}
                         />
                       )}
                   </>
diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
index 7a43391b2..d36046e94 100644
--- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
+++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
@@ -74,6 +74,14 @@ export default function DBSqlRowTableWithSideBar({
     setRowId(null);
     setRowSource(null);
   }, [setRowId, setRowSource]);
+  const renderRowDetails = useCallback((r: { [key: string]: unknown }) => {
+    if (!sourceData) {
+      return <div className="p-3 text-muted">Loading...</div>;
+    }
+    return (
+      <RowOverviewPanelWrapper source={sourceData} rowId={r.id as string} />
+    );
+  }, []);
 
   return (
     <RowSidePanelContext.Provider value={context ?? {}}>
@@ -97,17 +105,7 @@ export default function DBSqlRowTableWithSideBar({
         onSortingChange={onSortingChange}
         denoiseResults={denoiseResults}
         initialSortBy={initialSortBy}
-        renderRowDetails={r => {
-          if (!sourceData) {
-            return <div className="p-3 text-muted">Loading...</div>;
-          }
-          return (
-            <RowOverviewPanelWrapper
-              source={sourceData}
-              rowId={r.id as string}
-            />
-          );
-        }}
+        renderRowDetails={renderRowDetails}
         onScroll={onScroll}
         onError={onError}
         onExpandedRowsChange={onExpandedRowsChange}

From fd7790f0466017295efa29c19b0ec57355884812 Mon Sep 17 00:00:00 2001
From: Aaron Knudtson <87577305+knudtty@users.noreply.github.com>
Date: Thu, 23 Oct 2025 23:18:59 +0200
Subject: [PATCH 2/2] fix dependency oopsie

---
 .../components/DBSqlRowTableWithSidebar.tsx   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
index d36046e94..89d8f632f 100644
--- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
+++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
@@ -74,14 +74,17 @@ export default function DBSqlRowTableWithSideBar({
     setRowId(null);
     setRowSource(null);
   }, [setRowId, setRowSource]);
-  const renderRowDetails = useCallback((r: { [key: string]: unknown }) => {
-    if (!sourceData) {
-      return <div className="p-3 text-muted">Loading...</div>;
-    }
-    return (
-      <RowOverviewPanelWrapper source={sourceData} rowId={r.id as string} />
-    );
-  }, []);
+  const renderRowDetails = useCallback(
+    (r: { [key: string]: unknown }) => {
+      if (!sourceData) {
+        return <div className="p-3 text-muted">Loading...</div>;
+      }
+      return (
+        <RowOverviewPanelWrapper source={sourceData} rowId={r.id as string} />
+      );
+    },
+    [sourceData],
+  );
 
   return (
     <RowSidePanelContext.Provider value={context ?? {}}>