From 6e3da8dcae938220117bd0dc245ec98083e18ce6 Mon Sep 17 00:00:00 2001 From: James Sanders Date: Sat, 21 Mar 2026 18:57:07 +0000 Subject: [PATCH 1/2] feat(chart): support ?run=true to auto-execute chart on load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Adds support for a `?run=true` query parameter on the Chart Explorer page. When present, the chart query is executed automatically once on page load instead of waiting for the user to click the run button. The motivation is external tools that translate queries from other systems into HyperDX chart configs and deeplink the user into the `/chart` page. Today the user lands on a fully-populated form but still has to click once to see results; with `?run=true` the chart renders immediately. The form gains an `autoRun` prop. When true, a latched effect calls `onSubmit()` exactly once after the source data has loaded, so form validation has the table metadata it needs. The Chart Explorer page reads `?run` via nuqs `parseAsBoolean` and passes it through. ### How to test locally or on Vercel 1. `yarn dev` in `packages/app` 2. Open `/chart?run=true&config=%7B%22name%22%3A%22%22%2C%22select%22%3A%5B%7B%22aggFn%22%3A%22count%22%2C%22aggCondition%22%3A%22%22%2C%22aggConditionLanguage%22%3A%22sql%22%2C%22valueExpression%22%3A%22%22%7D%5D%2C%22where%22%3A%22%22%2C%22whereLanguage%22%3A%22sql%22%2C%22displayType%22%3A%22line%22%2C%22granularity%22%3A%22auto%22%2C%22source%22%3A%22%22%7D` — replace `` with a real source id from your instance 3. The chart should render results without clicking the run button 4. Open the same URL without `&run=true` — the form should be populated but not executed until you click run --- .changeset/chart-explorer-auto-run.md | 5 +++++ packages/app/src/DBChartPage.tsx | 5 ++++- packages/app/src/components/DBEditTimeChartForm.tsx | 10 ++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 .changeset/chart-explorer-auto-run.md diff --git a/.changeset/chart-explorer-auto-run.md b/.changeset/chart-explorer-auto-run.md new file mode 100644 index 0000000000..fc757349d1 --- /dev/null +++ b/.changeset/chart-explorer-auto-run.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +feat: support `?run=true` query param on Chart Explorer to auto-execute the chart on load. Enables deeplinks that render results without requiring a manual click. diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx index 045ed41104..c71748f8f1 100644 --- a/packages/app/src/DBChartPage.tsx +++ b/packages/app/src/DBChartPage.tsx @@ -1,7 +1,7 @@ import { useRef, useState } from 'react'; import dynamic from 'next/dynamic'; import Head from 'next/head'; -import { parseAsJson, useQueryState } from 'nuqs'; +import { parseAsBoolean, parseAsJson, useQueryState } from 'nuqs'; import { useForm } from 'react-hook-form'; import { useHotkeys } from 'react-hotkeys-hook'; import { SavedChartConfig, SourceKind } from '@hyperdx/common-utils/dist/types'; @@ -230,6 +230,8 @@ function DBChartExplorerPage() { }), ); + const [autoRun] = useQueryState('run', parseAsBoolean.withDefault(false)); + return ( @@ -253,6 +255,7 @@ function DBChartExplorerPage() { onTimeRangeSearch={onSearch} onTimeRangeSelect={onTimeRangeSelect} submitRef={submitRef} + autoRun={autoRun} /> ); diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx index 0535efe1b7..fab369debc 100644 --- a/packages/app/src/components/DBEditTimeChartForm.tsx +++ b/packages/app/src/components/DBEditTimeChartForm.tsx @@ -546,6 +546,7 @@ export default function EditTimeChartForm({ 'data-testid': dataTestId, submitRef, isDashboardForm = false, + autoRun = false, }: { dashboardId?: string; chartConfig: SavedChartConfig; @@ -562,6 +563,7 @@ export default function EditTimeChartForm({ 'data-testid'?: string; submitRef?: React.MutableRefObject<(() => void) | undefined>; isDashboardForm?: boolean; + autoRun?: boolean; }) { const formValue: ChartEditorFormState = useMemo( () => convertSavedChartConfigToFormState(chartConfig), @@ -827,6 +829,14 @@ export default function EditTimeChartForm({ } }, [onSubmit, submitRef]); + const autoRunFired = useRef(false); + useEffect(() => { + if (autoRun && !autoRunFired.current && tableSource) { + autoRunFired.current = true; + onSubmit(); + } + }, [autoRun, tableSource, onSubmit]); + const handleSave = useCallback( (form: ChartEditorFormState) => { const errors = validateChartForm(form, tableSource, setError); From 8ea3bfcea2b17fdfb57ff36342a0177047375388 Mon Sep 17 00:00:00 2001 From: James Sanders Date: Wed, 25 Mar 2026 02:11:30 +0000 Subject: [PATCH 2/2] feat(chart): always auto-run on load instead of requiring ?run=true Per review feedback, simplify to always auto-run when the Chart Explorer loads with a valid source, rather than gating behind a ?run=true query param. The tableSource check serves as the non-empty guard. Validation errors are suppressed on the initial auto-run so users landing with an incomplete config don't see an error toast. Addresses https://github.com/hyperdxio/hyperdx/pull/1961#issuecomment-4119404498 --- .changeset/chart-explorer-auto-run.md | 2 +- packages/app/src/DBChartPage.tsx | 6 ++---- packages/app/src/components/DBEditTimeChartForm.tsx | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/.changeset/chart-explorer-auto-run.md b/.changeset/chart-explorer-auto-run.md index fc757349d1..f4258994de 100644 --- a/.changeset/chart-explorer-auto-run.md +++ b/.changeset/chart-explorer-auto-run.md @@ -2,4 +2,4 @@ "@hyperdx/app": patch --- -feat: support `?run=true` query param on Chart Explorer to auto-execute the chart on load. Enables deeplinks that render results without requiring a manual click. +feat: Chart Explorer now auto-executes the chart on load when a valid source is configured. Deeplinks render results without requiring a manual click. diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx index c71748f8f1..82f2e5e26d 100644 --- a/packages/app/src/DBChartPage.tsx +++ b/packages/app/src/DBChartPage.tsx @@ -1,7 +1,7 @@ import { useRef, useState } from 'react'; import dynamic from 'next/dynamic'; import Head from 'next/head'; -import { parseAsBoolean, parseAsJson, useQueryState } from 'nuqs'; +import { parseAsJson, useQueryState } from 'nuqs'; import { useForm } from 'react-hook-form'; import { useHotkeys } from 'react-hotkeys-hook'; import { SavedChartConfig, SourceKind } from '@hyperdx/common-utils/dist/types'; @@ -230,8 +230,6 @@ function DBChartExplorerPage() { }), ); - const [autoRun] = useQueryState('run', parseAsBoolean.withDefault(false)); - return ( @@ -255,7 +253,7 @@ function DBChartExplorerPage() { onTimeRangeSearch={onSearch} onTimeRangeSelect={onTimeRangeSelect} submitRef={submitRef} - autoRun={autoRun} + autoRun /> ); diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx index fab369debc..606c45a5d1 100644 --- a/packages/app/src/components/DBEditTimeChartForm.tsx +++ b/packages/app/src/components/DBEditTimeChartForm.tsx @@ -833,7 +833,7 @@ export default function EditTimeChartForm({ useEffect(() => { if (autoRun && !autoRunFired.current && tableSource) { autoRunFired.current = true; - onSubmit(); + onSubmit(true); } }, [autoRun, tableSource, onSubmit]);