From dbc9d7dc6a02e3df044ccbe8154c023c52dd175e Mon Sep 17 00:00:00 2001
From: Brandon Pereira <brandon.pereira@clickhouse.com>
Date: Wed, 17 Sep 2025 10:35:27 -0600
Subject: [PATCH 1/4] fix: improve search results to isolate graph query errors
  to the graph component

Fixes: HDX-2398
---
 packages/app/src/DBSearchPage.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 3e41563bd..e43552484 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1169,15 +1169,6 @@ function DBSearchPage() {
     [onTimeRangeSelect],
   );
 
-  const onTimeChartError = useCallback(
-    (error: Error | ClickHouseQueryError) =>
-      setQueryErrors(prev => ({
-        ...prev,
-        DBTimeChart: error,
-      })),
-    [setQueryErrors],
-  );
-
   const filtersChartConfig = useMemo<ChartConfigWithDateRange>(() => {
     const overrides = {
       orderBy: undefined,
@@ -1575,7 +1566,6 @@ function DBSearchPage() {
                           showDisplaySwitcher={false}
                           queryKeyPrefix={QUERY_KEY_PREFIX}
                           onTimeRangeSelect={handleTimeRangeSelect}
-                          onError={onTimeChartError}
                         />
                       </Box>
                     )}
@@ -1687,7 +1677,6 @@ function DBSearchPage() {
                             showDisplaySwitcher={false}
                             queryKeyPrefix={QUERY_KEY_PREFIX}
                             onTimeRangeSelect={handleTimeRangeSelect}
-                            onError={onTimeChartError}
                           />
                         </Box>
                       )}

From 9eb2a33ac9a2efdcaafe000fc48b7d6c68f29112 Mon Sep 17 00:00:00 2001
From: Brandon Pereira <brandon.pereira@clickhouse.com>
Date: Wed, 17 Sep 2025 10:36:33 -0600
Subject: [PATCH 2/4] small fix to ensure the delta mode panel can be scrolled

---
 packages/app/src/components/DBDeltaChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/components/DBDeltaChart.tsx b/packages/app/src/components/DBDeltaChart.tsx
index 52cfbb4b0..cd6966f9b 100644
--- a/packages/app/src/components/DBDeltaChart.tsx
+++ b/packages/app/src/components/DBDeltaChart.tsx
@@ -370,7 +370,7 @@ export default function DBDeltaChart({
   const PAGE_SIZE = 12;
 
   return (
-    <Box>
+    <Box style={{ overflow: 'auto' }}>
       <Flex justify="flex-end" mx="md" mb="md">
         <Pagination
           size="xs"

From a7c8849cc1c3e9df4e868c24b2e9a493e8d17029 Mon Sep 17 00:00:00 2001
From: Brandon Pereira <brandon.pereira@clickhouse.com>
Date: Wed, 17 Sep 2025 10:41:22 -0600
Subject: [PATCH 3/4] add changeset

---
 .changeset/chilly-peaches-perform.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chilly-peaches-perform.md

diff --git a/.changeset/chilly-peaches-perform.md b/.changeset/chilly-peaches-perform.md
new file mode 100644
index 000000000..1cfcde91c
--- /dev/null
+++ b/.changeset/chilly-peaches-perform.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Improve search error isolation

From 446c10f59f6c9c8af5110bf6137d605423631c26 Mon Sep 17 00:00:00 2001
From: Brandon Pereira <brandon.pereira@clickhouse.com>
Date: Wed, 17 Sep 2025 13:38:18 -0600
Subject: [PATCH 4/4] tweak ui to show error details in a modal

---
 packages/app/src/components/DBTimeChart.tsx | 75 +++++++++++++--------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 12f69b16a..1fdd117dc 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 import { add } from 'date-fns';
@@ -8,9 +8,10 @@ import {
   ChartConfigWithDateRange,
   DisplayType,
 } from '@hyperdx/common-utils/dist/types';
-import { Box, Button, Code, Collapse, Text } from '@mantine/core';
+import { Button, Code, Group, Modal, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
+import { IconArrowsDiagonal } from '@tabler/icons-react';
 
 import { formatResponseForTimeChart, useTimeChartSettings } from '@/ChartUtils';
 import { convertGranularityToSeconds } from '@/ChartUtils';
@@ -26,7 +27,6 @@ function DBTimeChartComponent({
   config,
   enabled = true,
   logReferenceTimestamp,
-  onError,
   onSettled,
   onTimeRangeSelect,
   queryKeyPrefix,
@@ -39,7 +39,6 @@ function DBTimeChartComponent({
   config: ChartConfigWithDateRange;
   enabled?: boolean;
   logReferenceTimestamp?: number;
-  onError?: (error: Error | ClickHouseQueryError) => void;
   onSettled?: () => void;
   onTimeRangeSelect?: (start: Date, end: Date) => void;
   queryKeyPrefix?: string;
@@ -49,6 +48,7 @@ function DBTimeChartComponent({
   showLegend?: boolean;
   sourceId?: string;
 }) {
+  const [isErrorExpanded, errorExpansion] = useDisclosure(false);
   const {
     displayType: displayTypeProp,
     dateRange,
@@ -67,9 +67,14 @@ function DBTimeChartComponent({
       placeholderData: (prev: any) => prev,
       queryKey: [queryKeyPrefix, queriedConfig],
       enabled,
-      onError,
     });
 
+  useEffect(() => {
+    if (!isError && isErrorExpanded) {
+      errorExpansion.close();
+    }
+  }, [isError, isErrorExpanded, errorExpansion]);
+
   const isLoadingOrPlaceholder = isLoading || isPlaceholderData;
   const { data: source } = useSource({ id: sourceId });
 
@@ -178,31 +183,47 @@ function DBTimeChartComponent({
       Loading Chart Data...
     </div>
   ) : isError ? (
-    <div className="h-100 w-100 align-items-center justify-content-center text-muted overflow-auto">
+    <div className="h-100 w-100 d-flex g-1 flex-column align-items-center justify-content-center text-muted overflow-auto">
       <Text ta="center" size="sm" mt="sm">
         Error loading chart, please check your query or try again later.
       </Text>
-      <Box mt="sm">
-        <Text my="sm" size="sm" ta="center">
-          Error Message:
-        </Text>
-        <Code
-          block
-          style={{
-            whiteSpace: 'pre-wrap',
-          }}
-        >
-          {error.message}
-        </Code>
-        {error instanceof ClickHouseQueryError && (
-          <>
-            <Text my="sm" size="sm" ta="center">
-              Sent Query:
-            </Text>
-            <SQLPreview data={error?.query} />
-          </>
-        )}
-      </Box>
+      <Button
+        className="mx-auto"
+        variant="subtle"
+        onClick={() => errorExpansion.open()}
+      >
+        <Group gap="xxs">
+          <IconArrowsDiagonal size={16} />
+          See Error Details
+        </Group>
+      </Button>
+      <Modal
+        opened={isErrorExpanded}
+        onClose={() => errorExpansion.close()}
+        title="Error Details"
+      >
+        <Group align="start">
+          <Text size="sm" ta="center">
+            Error Message:
+          </Text>
+          <Code
+            block
+            style={{
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            {error.message}
+          </Code>
+          {error instanceof ClickHouseQueryError && (
+            <>
+              <Text my="sm" size="sm" ta="center">
+                Sent Query:
+              </Text>
+              <SQLPreview data={error?.query} />
+            </>
+          )}
+        </Group>
+      </Modal>
     </div>
   ) : graphResults.length === 0 ? (
     <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">