Skip to content

fix: transient canvas query errors when adding new components #9501

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
djbarnwal merged 4 commits into from
May 26, 2026
Merged

fix: transient canvas query errors when adding new components #9501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e7956c
fix: flashing red error on charts
djbarnwal May 25, 2026
5cd0e47
fix: flashing error in pivot table
djbarnwal May 25, 2026
dbd7970
rewrite branches to be readable
djbarnwal May 25, 2026
2bb8a9c
add comment
djbarnwal May 26, 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
7 changes: 3 additions & 4 deletions web-common/src/features/canvas/components/BaseCanvasComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {
V1TimeRange,
} from "@rilldata/web-common/runtime-client";
import type { ComponentType, SvelteComponent } from "svelte";
import type { Readable } from "svelte/store";
import { derived, get, writable, type Writable } from "svelte/store";
import { mergeFilters } from "../../dashboards/pivot/pivot-merge-filters";
import {
Expand All @@ -31,9 +32,8 @@ import type {
ComponentPath,
SearchParamsStore,
} from "../stores/canvas-entity";
import { TimeState } from "../stores/time-state";
import type { FilterState } from "../stores/filter-state";
import type { Readable } from "svelte/store";
import { TimeState } from "../stores/time-state";

export abstract class BaseCanvasComponent<T = ComponentSpec> {
id: string;
Expand Down Expand Up @@ -198,8 +198,7 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
],
set,
) => {
const hasTimeSeries =
hasTimeSeriesMap.get(this.metricsViewName) ?? false;
const hasTimeSeries = hasTimeSeriesMap.get(this.metricsViewName);

const mvFilters = metricsViewFilters.get(this.metricsViewName);

Expand Down
18 changes: 16 additions & 2 deletions web-common/src/features/canvas/components/pivot/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,14 @@ export function createPivotConfig(
const { timeRange, comparisonTimeRange, where } = $timeAndFilterStore;
const metricsViewName = $tableSpec.metrics_view;
const metricsView =
$canvasData?.data?.metricsViews[metricsViewName]?.state?.validSpec ??
{};
$canvasData?.data?.metricsViews[metricsViewName]?.state?.validSpec;
const ready =
!!metricsViewName &&
!!metricsView &&
($timeAndFilterStore.hasTimeSeries === false ||
($timeAndFilterStore.hasTimeSeries === true &&
!!timeRange?.start &&
!!timeRange?.end));

let queryWhere: V1Expression | undefined;
if (!$selfFiltered || $selfFiltered.size === 0) {
Expand All @@ -135,6 +141,7 @@ export function createPivotConfig(
comparisonTimeRange,
pivotState,
timeRange,
ready,
)
: processPivot(
$tableSpec,
Expand All @@ -145,6 +152,7 @@ export function createPivotConfig(
comparisonTimeRange,
pivotState,
timeRange,
ready,
);
},
);
Expand All @@ -159,9 +167,11 @@ export function processPivot(
comparisonTimeRange: V1TimeRange | undefined,
pivotState: Writable<PivotState>,
timeRange: V1TimeRange,
ready: boolean,
) {
if (!$tableSpec) {
return {
ready: false,
measureNames: [],
rowDimensionNames: [],
colDimensionNames: [],
Expand All @@ -182,6 +192,7 @@ export function processPivot(
$timeAndFilterStore.showTimeComparison;

const config: PivotDataStoreConfig = {
ready,
measureNames: ($tableSpec?.measures || []).flatMap((name) => {
const group = [name];
if (enableComparison) {
Expand Down Expand Up @@ -239,9 +250,11 @@ export function processFlat(
comparisonTimeRange: V1TimeRange | undefined,
pivotState: Writable<PivotState>,
timeRange: V1TimeRange,
ready: boolean,
) {
if (!$tableSpec) {
return {
ready: false,
measureNames: [],
rowDimensionNames: [],
colDimensionNames: [],
Expand Down Expand Up @@ -269,6 +282,7 @@ export function processFlat(
$timeAndFilterStore.showTimeComparison;

const config: PivotDataStoreConfig = {
ready,
measureNames: (measures || []).flatMap((name) => {
const group = [name];
if (enableComparison) {
Expand Down
10 changes: 6 additions & 4 deletions web-common/src/features/components/charts/cartesian/CartesianChartProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
type Writable,
} from "svelte/store";
import {
canQueryWithTimeRange,
getFilterWithNullHandling,
isSortByDelta,
vegaSortToAggregationSort,
Expand Down Expand Up @@ -186,6 +187,7 @@ export class CartesianChartProvider {
const dimensionName = config.x?.field;
const rawSort = config.x?.sort;
const sortIsDelta = isSortByDelta(rawSort);
const requiresTimeRange = config.x?.type === "temporal";

if (config.x?.type === "nominal" && dimensionName) {
limit = config.x.limit ?? 100;
Expand Down Expand Up @@ -218,7 +220,7 @@ export class CartesianChartProvider {
} = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
config.x?.type === "nominal" &&
!Array.isArray(config.x?.sort) &&
!!dimensionName;
Expand Down Expand Up @@ -292,7 +294,7 @@ export class CartesianChartProvider {
const enabled =
$visible &&
!hasExplicitColorValues &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
hasColorDimension &&
!!colorDimensionName &&
!!colorLimit;
Expand Down Expand Up @@ -342,7 +344,7 @@ export class CartesianChartProvider {
const topNColorData = $topNColorQuery?.data?.data;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
!!measures?.length &&
!!dimensions?.length &&
(hasColorDimension &&
Expand Down Expand Up @@ -448,7 +450,7 @@ export class CartesianChartProvider {
comparisonTimeRange?.end
? comparisonTimeRange
: undefined,
fillMissing: config.x?.type === "temporal",
fillMissing: requiresTimeRange,
limit: hasColorDimension || !limit ? "5000" : limit?.toString(),
},
{
Expand Down
13 changes: 8 additions & 5 deletions web-common/src/features/components/charts/circular/CircularChartProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ import {
type Readable,
type Writable,
} from "svelte/store";
import { getFilterWithNullHandling } from "../query-util";
import {
canQueryWithTimeRange,
getFilterWithNullHandling,
} from "../query-util";
import {
OTHER_VALUE,
OTHER_VALUE_DOMAIN_KEY,
Expand Down Expand Up @@ -106,7 +109,7 @@ export class CircularChartProvider {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!colorDimensionName &&
config.color?.type === "nominal" &&
!Array.isArray(config.color?.sort);
Expand Down Expand Up @@ -146,7 +149,7 @@ export class CircularChartProvider {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!config.measure?.field;

const totalWhere = getFilterWithNullHandling(where, config.color);
Expand Down Expand Up @@ -192,7 +195,7 @@ export class CircularChartProvider {
showOther &&
!!visibleValues &&
visibleValues.length > 0 &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!config.measure?.field &&
!!colorDimensionName;

Expand Down Expand Up @@ -245,7 +248,7 @@ export class CircularChartProvider {
const topNColorData = $topNColorQuery?.data?.data;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!measures?.length &&
(config.color?.type === "nominal" &&
!Array.isArray(config.color?.sort)
Expand Down
8 changes: 5 additions & 3 deletions web-common/src/features/components/charts/combo/ComboChartProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
type Writable,
} from "svelte/store";
import {
canQueryWithTimeRange,
getFilterWithNullHandling,
vegaSortToAggregationSort,
} from "../query-util";
Expand Down Expand Up @@ -101,14 +102,15 @@ export class ComboChartProvider {
}

const dimensionName = config.x?.field;
const requiresTimeRange = config.x?.type === "temporal";

const xAxisQueryOptionsStore = derived(
[timeAndFilterStore, visibleStore],
([$timeAndFilterStore, $visible]) => {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!dimensionName &&
config?.x?.type === "nominal" &&
!Array.isArray(config.x?.sort) &&
Expand Down Expand Up @@ -162,7 +164,7 @@ export class ComboChartProvider {

const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange, requiresTimeRange) &&
!!measures?.length &&
(config.x?.type === "nominal" && !Array.isArray(config.x?.sort)
? xTopNData !== undefined
Expand Down Expand Up @@ -215,7 +217,7 @@ export class ComboChartProvider {
dimensions,
where: combinedWhere,
timeRange,
fillMissing: config.x?.type === "temporal",
fillMissing: requiresTimeRange,
sort:
config.x?.type === "temporal"
? [{ name: config.x?.field, desc: false }]
Expand Down
7 changes: 6 additions & 1 deletion web-common/src/features/components/charts/data-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,15 @@ export function getChartData<T extends ChartSpec = ChartSpec>(

const domainValues = getDomainValues();
const hasComparison = $timeAndFilterStore.showTimeComparison;
const waitingForTimeState =
Copy link
Copy Markdown
Collaborator

@AdityaHegde AdityaHegde May 26, 2026

Choose a reason for hiding this comment

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

Do not need a isFetching check on sources of timeAndFilterStore?

Copy link
Copy Markdown
Member Author

@djbarnwal djbarnwal May 26, 2026

Choose a reason for hiding this comment

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

I think just a check on the timeRange is fine.

$timeAndFilterStore.hasTimeSeries === undefined ||
($timeAndFilterStore.hasTimeSeries === true &&
(!$timeAndFilterStore.timeRange?.start ||
!$timeAndFilterStore.timeRange?.end));

return {
data: data || [],
isFetching: chartData?.isFetching ?? false,
isFetching: waitingForTimeState || (chartData?.isFetching ?? false),
error: chartData?.error,
fields: fieldSpecMap,
domainValues,
Expand Down
9 changes: 6 additions & 3 deletions web-common/src/features/components/charts/funnel/FunnelChartProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@ import {
type Readable,
type Writable,
} from "svelte/store";
import { getFilterWithNullHandling } from "../query-util";
import {
canQueryWithTimeRange,
getFilterWithNullHandling,
} from "../query-util";

export type FunnelMode = "width" | "order";
export type FunnelColorMode = "stage" | "measure" | "name" | "value";
Expand Down Expand Up @@ -131,7 +134,7 @@ export class FunnelChartProvider {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!stageDimensionName &&
!isMultiMeasure &&
!Array.isArray(config.stage?.sort);
Expand Down Expand Up @@ -167,7 +170,7 @@ export class FunnelChartProvider {
const topNStageData = $topNStageQuery?.data?.data;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!measures?.length &&
(isMultiMeasure || !!dimensions?.length) &&
(!isMultiMeasure &&
Expand Down
7 changes: 4 additions & 3 deletions web-common/src/features/components/charts/heatmap/HeatmapChartProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
type Writable,
} from "svelte/store";
import {
canQueryWithTimeRange,
getFilterWithNullHandling,
vegaSortToAggregationSort,
} from "../query-util";
Expand Down Expand Up @@ -89,7 +90,7 @@ export class HeatmapChartProvider {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!config.x?.field &&
config?.x?.type !== "temporal" &&
!Array.isArray(config.x?.sort);
Expand Down Expand Up @@ -134,7 +135,7 @@ export class HeatmapChartProvider {
const { timeRange, where, hasTimeSeries } = $timeAndFilterStore;
const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
!!config.y?.field &&
config?.y?.type !== "temporal" &&
!Array.isArray(config.y?.sort);
Expand Down Expand Up @@ -185,7 +186,7 @@ export class HeatmapChartProvider {

const enabled =
$visible &&
(!hasTimeSeries || (!!timeRange?.start && !!timeRange?.end)) &&
canQueryWithTimeRange(hasTimeSeries, timeRange) &&
(config.x?.type === "nominal" && !Array.isArray(config.x?.sort)
? xTopNData !== undefined
: true) &&
Expand Down
14 changes: 14 additions & 0 deletions web-common/src/features/components/charts/query-util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,22 @@ import { createInExpression } from "@rilldata/web-common/features/dashboards/sto
import type {
V1Expression,
V1MetricsViewAggregationSort,
V1TimeRange,
} from "@rilldata/web-common/runtime-client";

export function canQueryWithTimeRange(
hasTimeSeries: boolean | undefined,
timeRange: V1TimeRange | undefined,
requiresTimeRange = false,
): boolean {
const hasTimeRange = !!timeRange?.start && !!timeRange?.end;
if (requiresTimeRange) return hasTimeRange;
if (hasTimeSeries === false) return true;
if (hasTimeSeries === true) return hasTimeRange;
// hasTimeSeries === undefined: metrics view spec not yet resolved, block the query.
return false;
Comment thread
djbarnwal marked this conversation as resolved.
}

export function getFilterWithNullHandling(
where: V1Expression | undefined,
fieldConfig: FieldConfig | undefined,
Expand Down
Loading
Loading