From 2883acc26bcc028fb11139978b7f41ab41560f8c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 23 Mar 2026 03:31:58 +0000
Subject: [PATCH] feat: add 'Open in Chart Explorer' button on Search page

Adds a button in the Search page toolbar that navigates to Chart Explorer
with the current source and WHERE clause pre-populated. This allows users
to quickly go from a search query to charting without re-selecting the
data source or re-entering filters.

The button appears as an icon (chart dots) next to the Save/Alerts buttons,
with a tooltip reading 'Open in Chart Explorer'. It builds a Chart Explorer
URL containing the config (source, where, whereLanguage) and the current
time range (from, to).

Resolves HDX-3781

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 packages/app/src/DBSearchPage.tsx | 37 +++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 454a9bded..cb45ac320 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -65,6 +65,7 @@ import {
 import { notifications } from '@mantine/notifications';
 import {
   IconBolt,
+  IconChartDots,
   IconPlayerPlay,
   IconPlus,
   IconTags,
@@ -74,6 +75,7 @@ import { useIsFetching } from '@tanstack/react-query';
 import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
 
+import { DEFAULT_CHART_CONFIG } from '@/ChartUtils';
 import { ContactSupportText } from '@/components/ContactSupportText';
 import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
 import { DBTimeChart } from '@/components/DBTimeChart';
@@ -1313,6 +1315,27 @@ function DBSearchPage() {
     ],
   );
 
+  const chartExplorerUrl = useMemo(() => {
+    if (!searchedSource) return null;
+    const config = {
+      ...DEFAULT_CHART_CONFIG,
+      source: searchedSource.id,
+      where: searchedConfig.where || '',
+      whereLanguage: searchedConfig.whereLanguage || 'lucene',
+    };
+    const qParams = new URLSearchParams({
+      config: JSON.stringify(config),
+      from: searchedTimeRange[0].getTime().toString(),
+      to: searchedTimeRange[1].getTime().toString(),
+    });
+    return `/chart?${qParams.toString()}`;
+  }, [
+    searchedSource,
+    searchedConfig.where,
+    searchedConfig.whereLanguage,
+    searchedTimeRange,
+  ]);
+
   const handleTableError = useCallback(
     (error: Error | ClickHouseQueryError) => {
       setIsLive(false);
@@ -1631,6 +1654,20 @@ function DBSearchPage() {
                 Alerts
               </Button>
             )}
+            {chartExplorerUrl && (
+              <Tooltip label="Open in Chart Explorer" withinPortal>
+                <ActionIcon
+                  component="a"
+                  href={chartExplorerUrl}
+                  data-testid="open-in-chart-explorer-button"
+                  variant="secondary"
+                  size="input-xs"
+                  style={{ flexShrink: 0 }}
+                >
+                  <IconChartDots size={14} />
+                </ActionIcon>
+              </Tooltip>
+            )}
             {!!savedSearch && (
               <>
                 <Tags