feat: Add custom table onClick behavior (#2140)

## Summary

This is the **first of a few PRs** adding customizable on-click / linking behaviors to dashboard tables. This feature is behind the `NEXT_PUBLIC_IS_DASHBOARD_LINKING_ENABLED`, which has been enabled in the preview environment and for local development.

Tables without a custom on click behavior defined will fall back to the existing on click behavior (which is linking to the search page, with group by columns passed as filters).

### Scope

In this PR:

- Support for defining a custom on click behavior linking a dashboard row to the search page.
- The source and where condition passed to the search page is customizable via handlebars templates, which can reference the column values in the clicked row.

### Not included yet

Future PRs will add:

- Linking to specific sources, without requiring a template, with source mapping during dashboard import
- Linking to dashboards, by templated dashboard name or id (with mapping during dashboard import)
- Passing templated filter values to the destination dashboard or search
- Updates to the external API to support the new onClick fields
- Updates to the MCP prompts to support generating dashboards with custom links
- Updates to the import flow to support importing bundles of linked dashboards at once
- Support for linking on other visualization types

## Screenshots or video

https://github.com/user-attachments/assets/afdd59cf-53bd-4ae5-b4fa-acc565409eb6

## How to test locally or on Vercel

This can be tested in the preview environment

## References



- Linear Issue: Closes HDX-4063
- Related PRs:

Author: pulpdrew

.changeset/sharp-weeks-impress.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/app": patch
+---
+
+feat: Add custom table onClick behavior

packages/app/.env.development

@@ -7,4 +7,5 @@ OTEL_SERVICE_NAME="hdx-oss-dev-app"
 PORT=${HYPERDX_APP_PORT}
 NODE_OPTIONS="--max-http-header-size=131072"
 NEXT_PUBLIC_HYPERDX_BASE_PATH=
-NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:${HDX_DEV_OTEL_HTTP_PORT:-4318}"
+NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:${HDX_DEV_OTEL_HTTP_PORT:-4318}"
+NEXT_PUBLIC_IS_DASHBOARD_LINKING_ENABLED=true

packages/app/scripts/run-e2e.js

@@ -58,6 +58,11 @@ const env = {
   ...process.env,
   ...(!useLocal && { E2E_FULLSTACK: 'true' }),
   ...(useDev && { E2E_USE_DEV: 'true' }),
+  // Feature flags that should always be enabled during E2E runs. NEXT_PUBLIC_*
+  // vars are baked into the build, so they must be present in env at `next
+  // build` time — not just in .env.development (which isn't loaded in prod
+  // builds).
+  NEXT_PUBLIC_IS_DASHBOARD_LINKING_ENABLED: 'true',
 };
 
 // Port configuration from HDX_E2E_* env vars (set by scripts/test-e2e.sh)

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import Link from 'next/link';
 import cx from 'classnames';
 import { UnstyledButton } from '@mantine/core';
 import { IconDownload, IconTextWrap } from '@tabler/icons-react';
@@ -35,7 +34,7 @@ export const Table = ({
   data,
   groupColumnName,
   columns,
-  getRowSearchLink,
+  onRowClick,
   tableBottom,
   enableClientSideSorting = false,
   sorting,
@@ -54,7 +53,7 @@ export const Table = ({
     sortingFn?: SortingFnOption<any>;
   }[];
   groupColumnName?: string;
-  getRowSearchLink?: (row: any) => string | null;
+  onRowClick?: (row: any, e?: React.MouseEvent) => void;
   tableBottom?: React.ReactNode;
   enableClientSideSorting?: boolean;
   sorting: SortingState;
@@ -142,40 +141,46 @@ export const Table = ({
                 formattedValue = formatNumber(value, numberFormat);
               }
 
-              if (getRowSearchLink == null) {
-                return formattedValue;
-              }
-              const link = getRowSearchLink(row.original);
+              const className = cx('align-top overflow-hidden py-1 pe-3', {
+                'text-break': wrapLinesEnabled,
+                'text-truncate': !wrapLinesEnabled,
+              });
 
-              if (!link) {
+              if (onRowClick) {
                 return (
                   <div
-                    className={cx('align-top overflow-hidden py-1 pe-3', {
-                      'text-break': wrapLinesEnabled,
-                      'text-truncate': !wrapLinesEnabled,
-                    })}
+                    role="link"
+                    tabIndex={0}
+                    className={className}
+                    style={{ cursor: 'pointer' }}
+                    // Left-click: fires onClick with button === 0. The parent
+                    // handler detects meta/ctrl for cmd/ctrl-click → new tab.
+                    onClick={e => onRowClick(row.original, e)}
+                    // Middle-click (button === 1) fires onAuxClick but NOT
+                    // onClick on non-anchor elements.
+                    onAuxClick={e => {
+                      if (e.button === 1) {
+                        e.preventDefault();
+                        onRowClick(row.original, e);
+                      }
+                    }}
+                    // Suppress the browser's middle-click autoscroll cursor on non-anchor elements.
+                    onMouseDown={e => {
+                      if (e.button === 1) e.preventDefault();
+                    }}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onRowClick(row.original);
+                      }
+                    }}
                   >
                     {formattedValue}
                   </div>
                 );
               }
 
-              return (
-                <Link
-                  href={link}
-                  className={cx('align-top overflow-hidden py-1 pe-3', {
-                    'text-break': wrapLinesEnabled,
-                    'text-truncate': !wrapLinesEnabled,
-                  })}
-                  style={{
-                    display: 'block',
-                    color: 'inherit',
-                    textDecoration: 'none',
-                  }}
-                >
-                  {formattedValue}
-                </Link>
-              );
+              return <div className={className}>{formattedValue}</div>;
             },
             size:
               i === numColumns - 2

packages/app/src/components/ChartEditor/RawSqlChartEditor.tsx

@@ -30,6 +30,7 @@ import { getAllMetricTables, usePrevious } from '@/utils';
 import { DEFAULT_TILE_ALERT } from '@/utils/alerts';
 
 import { ConnectionSelectControlled } from '../ConnectionSelect';
+import { OnClickFormButton } from '../DBEditTimeChartForm/OnClickForm/OnClickFormButton';
 import SourceSchemaPreview from '../SourceSchemaPreview';
 import { SourceSelectControlled } from '../SourceSelect';
 
@@ -43,13 +44,15 @@ export default function RawSqlChartEditor({
   control,
   setValue,
   onOpenDisplaySettings,
+  onSubmit,
   isDashboardForm,
   alert,
   dashboardId,
 }: {
   control: Control<ChartEditorFormState>;
   setValue: UseFormSetValue<ChartEditorFormState>;
   onOpenDisplaySettings: () => void;
+  onSubmit: (suppressErrorNotification?: boolean) => void;
   isDashboardForm: boolean;
   alert: ChartEditorFormState['alert'];
   dashboardId?: string;
@@ -222,13 +225,23 @@ export default function RawSqlChartEditor({
                 Add Alert
               </Button>
             )}
-          <Button
-            onClick={onOpenDisplaySettings}
-            size="compact-sm"
-            variant="secondary"
-          >
-            Display Settings
-          </Button>
+
+          <Group>
+            {displayType === DisplayType.Table && (
+              <OnClickFormButton
+                control={control}
+                setValue={setValue}
+                onSubmit={onSubmit}
+              />
+            )}
+            <Button
+              onClick={onOpenDisplaySettings}
+              size="compact-sm"
+              variant="secondary"
+            >
+              Display Settings
+            </Button>
+          </Group>
         </Group>
       </Group>
       <RawSqlChartInstructions displayType={displayType ?? DisplayType.Table} />

packages/app/src/components/ChartEditor/utils.ts

@@ -28,7 +28,7 @@ import { ChartEditorFormState } from './types';
 function normalizeChartConfig<
   C extends Pick<
     BuilderSavedChartConfig,
-    'select' | 'having' | 'orderBy' | 'displayType' | 'metricTables'
+    'select' | 'having' | 'orderBy' | 'displayType' | 'metricTables' | 'onClick'
   >,
 >(config: C, source: TSource): C {
   const isMetricSource = source.kind === SourceKind.Metric;
@@ -45,6 +45,10 @@ function normalizeChartConfig<
       config.displayType === DisplayType.Table ? config.having : undefined,
     orderBy:
       config.displayType === DisplayType.Table ? config.orderBy : undefined,
+    onClick:
+      config.onClick && config.displayType === DisplayType.Table
+        ? config.onClick
+        : undefined,
   };
 }
 
@@ -78,6 +82,7 @@ export function convertFormStateToSavedChartConfig(
         'fillNulls',
         'alignDateRangeToGranularity',
         'alert',
+        'onClick',
       ]),
       sqlTemplate: form.sqlTemplate ?? '',
       connection: form.connection ?? '',
@@ -121,6 +126,7 @@ export function convertFormStateToChartConfig(
         'compareToPreviousPeriod',
         'fillNulls',
         'alignDateRangeToGranularity',
+        'onClick',
       ]),
       sqlTemplate: form.sqlTemplate ?? '',
       connection: form.connection ?? '',

packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx

@@ -28,6 +28,7 @@ import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEdito
 import { IS_LOCAL_MODE } from '@/config';
 import { DEFAULT_TILE_ALERT } from '@/utils/alerts';
 
+import { OnClickFormButton } from './OnClickForm/OnClickFormButton';
 import { ChartSeriesEditor } from './ChartSeriesEditor';
 import { TileAlertEditor } from './TileAlertEditor';
 
@@ -259,13 +260,22 @@ export function ChartEditorControls({
                   </Button>
                 )}
             </Group>
-            <Button
-              onClick={openDisplaySettings}
-              size="compact-sm"
-              variant="secondary"
-            >
-              Display Settings
-            </Button>
+            <Group>
+              {displayType === DisplayType.Table && (
+                <OnClickFormButton
+                  control={control}
+                  setValue={setValue}
+                  onSubmit={onSubmit}
+                />
+              )}
+              <Button
+                onClick={openDisplaySettings}
+                size="compact-sm"
+                variant="secondary"
+              >
+                Display Settings
+              </Button>
+            </Group>
           </Flex>
         </>
       ) : (

packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx

@@ -589,6 +589,7 @@ export default function EditTimeChartForm({
             control={control}
             setValue={setValue}
             onOpenDisplaySettings={openDisplaySettings}
+            onSubmit={onSubmit}
             isDashboardForm={isDashboardForm}
             alert={alert}
             dashboardId={dashboardId}