Skip to content

feat: Optionally apply dashboard filters to tile editor preview #3093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 2 commits into from
Sep 9, 2026
Merged

feat: Optionally apply dashboard filters to tile editor preview #3093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2f9e9d
feat: Optionally apply dashboard filters to tile editor preview
pulpdrew Sep 8, 2026
05188c4
Merge branch 'main' into drew/filters-in-tile-editor
kodiakhq[bot] Sep 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/tile-editor-dashboard-filters.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@hyperdx/common-utils': patch
'@hyperdx/app': patch
---

feat: Optionally apply the dashboard's filter selections to the tile editor preview
56 changes: 32 additions & 24 deletions packages/app/src/DBDashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ import {
Granularity,
isTimeSeriesDisplayType,
} from '@hyperdx/common-utils/dist/core/utils';
import { getBlockingRequiredFilters } from '@hyperdx/common-utils/dist/dashboardFilterValues';
import {
configConsumesBroadcastFilters,
getBlockingRequiredFilters,
} from '@hyperdx/common-utils/dist/dashboardFilterValues';
import {
displayTypeRequiresSource,
isBuilderChartConfig,
Expand Down Expand Up @@ -596,19 +599,10 @@ const Tile = ({
[serializedTileVariables],
);

// Whether a broadcast filter reaches this tile's query at all. PromQL tiles
// are handed no filters, and a raw-SQL tile drops them without a source or
// without a macro to apply them.
const consumesBroadcastFilters = useMemo(() => {
if (isPromqlSavedChartConfig(chart.config)) return false;
if (isRawSqlSavedChartConfig(chart.config)) {
return (
!!chart.config.source &&
!isMissingFiltersMacro(chart.config.sqlTemplate)
);
}
return true;
}, [chart.config]);
const consumesBroadcastFilters = useMemo(

@github-actions github-actions Bot Sep 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — Tile and tile-editor now resolve "what the dashboard contributes to this tile" in two places

Tile still computes consumesBroadcastFilters + getBlockingRequiredFilters(...) + the filter array inline (DBDashboardPage.tsx:602-634), while the editor routes the identical decision through the new resolveTilePreviewFilters (packages/app/src/components/DBEditTimeChartForm/utils.ts:203). The premise of this feature is that the preview queries what the tile does, so these must not drift; have Tile call resolveTilePreviewFilters({ ..., applySelections: true }) and derive its serialized memo inputs from the result instead of keeping a parallel copy.

() => configConsumesBroadcastFilters(chart.config, chart.config.source),
[chart.config],
);

// Serialized for the same reason as `tileVariables`: any change to the
// dashboard's filters hands this tile a new array, and only a change to the
Expand Down Expand Up @@ -1627,6 +1621,8 @@ const EditTileModal = ({
isSaving,
dateRange,
variables,
getDashboardFilters,
unsatisfiedRequiredFilters,
}: {
dashboardId?: string;
chart: Tile | undefined;
Expand All @@ -1635,6 +1631,8 @@ const EditTileModal = ({
isSaving?: boolean;
onSave: (chart: Tile) => void;
variables?: ChartVariable[];
getDashboardFilters: (sourceId: string | undefined) => Filter[];
unsatisfiedRequiredFilters?: DashboardFilter[];
}) => {
const contextZIndex = useZIndex();
const modalZIndex = contextZIndex + 10;
Expand Down Expand Up @@ -1694,6 +1692,8 @@ const EditTileModal = ({
dashboardId={dashboardId}
chartConfig={chart.config}
variables={variables}
getDashboardFilters={getDashboardFilters}
unsatisfiedRequiredFilters={unsatisfiedRequiredFilters}
dateRange={dateRange}
isSaving={isSaving}
onSave={config => {
Expand Down Expand Up @@ -2397,6 +2397,20 @@ function DBDashboardPage({
[dashboard, setDashboard],
);

// The dashboard's search input plus the filter selections that broadcast to
// `sourceId`. Shared with the tile editor so its preview queries what the
// tile does.
const getTileFilters = useCallback(
(sourceId: string | undefined): Filter[] => [
{
type: whereLanguage === 'sql' ? 'sql' : 'lucene',
condition: where,
},
...getFilterQueriesForSource(sourceId),
],
[where, whereLanguage, getFilterQueriesForSource],
);

const renderTileComponent = useCallback(
(chart: Tile) => {
// Resolve the tile's source ID so per-source-scoped filters can be
Expand All @@ -2415,13 +2429,7 @@ function DBDashboardPage({
granularity={
isRefreshEnabled ? granularityOverride : (granularity ?? undefined)
}
filters={[
{
type: whereLanguage === 'sql' ? 'sql' : 'lucene',
condition: where,
},
...getFilterQueriesForSource(tileSourceId),
]}
filters={getTileFilters(tileSourceId)}
variables={variables}
unsatisfiedRequiredFilters={unsatisfiedRequiredFilters}
onTimeRangeSelect={onTimeRangeSelect}
Expand Down Expand Up @@ -2520,12 +2528,10 @@ function DBDashboardPage({
highlightedTileId,
confirm,
setDashboard,
where,
whereLanguage,
onTimeRangeSelect,
showAlertAnnotations,
showReleaseAnnotations,
getFilterQueriesForSource,
getTileFilters,
variables,
unsatisfiedRequiredFilters,
moveTargetContainers,
Expand Down Expand Up @@ -3217,6 +3223,8 @@ function DBDashboardPage({
}}
dateRange={searchedTimeRange}
variables={variables}
getDashboardFilters={getTileFilters}
unsatisfiedRequiredFilters={unsatisfiedRequiredFilters}
isSaving={isSaving}
onSave={newChart => {
if (dashboard == null) {
Expand Down
54 changes: 51 additions & 3 deletions packages/app/src/components/DBEditTimeChartForm/ChartActionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import { Control, UseFormHandleSubmit } from 'react-hook-form';
import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
import { SavedChartConfig } from '@hyperdx/common-utils/dist/types';
import { ActionIcon, Button, Flex, Menu } from '@mantine/core';
import {
ActionIcon,
Box,
Button,
Flex,
Menu,
Switch,
Tooltip,
} from '@mantine/core';
import {
IconDotsVertical,
IconLayoutGrid,
Expand All @@ -14,6 +22,41 @@ import { TimePicker } from '@/components/TimePicker';
import { IS_LOCAL_MODE } from '@/config';
import { GranularityPickerControlled } from '@/GranularityPicker';

import { tabQueriesData } from './utils';

export type DashboardFiltersToggleProps = {
checked: boolean;
disabledReason?: string;
onChange: (checked: boolean) => void;
};

function DashboardFiltersToggle({
checked,
disabledReason,
onChange,
}: DashboardFiltersToggleProps) {
const isDisabled = disabledReason != null;
const tooltip = isDisabled
? disabledReason
: 'Apply dashboard-level filter and variable selections to the chart preview';

return (
<Tooltip label={tooltip} position="top" multiline maw={320}>
<Box data-testid="apply-dashboard-filters">
<Switch
label="Apply filters"
size="sm"
labelPosition="left"
checked={checked}
disabled={isDisabled}
onChange={event => onChange(event.currentTarget.checked)}
style={isDisabled ? { pointerEvents: 'none' } : undefined}
/>
</Box>
</Tooltip>
);
}

type ChartActionBarProps = {
control: Control<ChartEditorFormState>;
handleSubmit: UseFormHandleSubmit<ChartEditorFormState>;
Expand All @@ -31,6 +74,7 @@ type ChartActionBarProps = {
displayedTimeInputValue?: string;
setDisplayedTimeInputValue?: (value: string) => void;
onTimeRangeSearch?: (value: string) => void;
filtersToggle?: DashboardFiltersToggleProps;
setSaveToDashboardModalOpen: (open: boolean) => void;
};

Expand All @@ -51,6 +95,7 @@ export function ChartActionBar({
displayedTimeInputValue,
setDisplayedTimeInputValue,
onTimeRangeSearch,
filtersToggle,
setSaveToDashboardModalOpen,
}: ChartActionBarProps) {
return (
Expand Down Expand Up @@ -78,6 +123,9 @@ export function ChartActionBar({
)}
</Flex>
<Flex gap="sm" mb="sm" align="center" justify="end">
{filtersToggle != null && tabQueriesData(activeTab) && (
<DashboardFiltersToggle {...filtersToggle} />
)}
{(activeTab === 'table' ||
activeTab === 'pie' ||
activeTab === 'bar') &&
Expand All @@ -97,7 +145,7 @@ export function ChartActionBar({
/>
</div>
)}
{activeTab !== 'markdown' &&
{tabQueriesData(activeTab) &&
setDisplayedTimeInputValue != null &&
displayedTimeInputValue != null &&
onTimeRangeSearch != null && (
Expand All @@ -115,7 +163,7 @@ export function ChartActionBar({
{activeTab === 'time' && (
<GranularityPickerControlled control={control} name="granularity" />
)}
{activeTab !== 'markdown' && (
{tabQueriesData(activeTab) && (
<Button
data-testid="chart-run-query-button"
variant="primary"
Expand Down
21 changes: 19 additions & 2 deletions packages/app/src/components/DBEditTimeChartForm/ChartPreviewPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import {
buildRenderedPromqlExpression,
buildSampleEventsConfig,
isQueryReady,
tabQueriesData,
} from './utils';

/** Why a preview accordion is empty before its tile has been run. */
Expand Down Expand Up @@ -142,6 +143,8 @@ type ChartPreviewPanelProps = {
showSampleEvents: boolean;
showGeneratedPromql: boolean;
dbTimeChartConfig?: ChartConfigWithDateRange;
/** Required dashboard filters with nothing selected that block this tile. */
missingRequiredFilterNames?: string[];
setValue: (name: 'orderBy', value: string) => void;
onSubmit: () => void;
};
Expand All @@ -159,6 +162,7 @@ export function ChartPreviewPanel({
showSampleEvents,
showGeneratedPromql,
dbTimeChartConfig,
missingRequiredFilterNames,
setValue,
onSubmit,
}: ChartPreviewPanelProps) {
Expand All @@ -169,7 +173,11 @@ export function ChartPreviewPanel({
[queriedConfig],
);

const queryReady = !!isQueryReady(queriedConfig);
const blockingFilterNames = missingRequiredFilterNames ?? [];
const isBlockedByRequiredFilters =
blockingFilterNames.length > 0 && tabQueriesData(activeTab);
const queryReady =
!isBlockedByRequiredFilters && !!isQueryReady(queriedConfig);

const onTableSortingChange = useCallback(
(sortState: SortingState | null) => {
Expand Down Expand Up @@ -203,7 +211,16 @@ export function ChartPreviewPanel({

return (
<>
{!queryReady && activeTab !== 'markdown' ? (
{isBlockedByRequiredFilters ? (
Comment thread
pulpdrew marked this conversation as resolved.
Resolved
<EmptyState
description={`Missing required filters: ${blockingFilterNames.join(
Comment thread
pulpdrew marked this conversation as resolved.
Resolved

@jordan-simonovski jordan-simonovski Sep 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this point at the switch?

The message asks for a value, but the filter bar is behind the modal, so the user has to close the editor to give it one. Turning "Apply filters" off is the only thing available from here. It also moves the wording off the tile's copy of this string, which says "load this tile":

description={`Missing required filters: ${blockingFilterNames.join(', ')}. Select a value for each on the dashboard, or turn off "Apply filters" to preview without them.`}

', ',
)}. Select a value for each to preview this tile.`}
variant="card"
fullWidth
data-testid="preview-missing-required-filters"
/>
) : !queryReady && tabQueriesData(activeTab) ? (
<EmptyState
description="Please start by defining your chart above and then click the play button to query data."
variant="card"
Expand Down
Loading
Loading