feat: display pivot query errors in UI

web-common/src/features/dashboards/pivot/PivotDisplay.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import PivotError from "@rilldata/web-common/features/dashboards/pivot/PivotError.svelte";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
+  import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import PivotEmpty from "./PivotEmpty.svelte";
   import PivotHeader from "./PivotHeader.svelte";
   import PivotSidebar from "./PivotSidebar.svelte";
   import PivotTable from "./PivotTable.svelte";
   import PivotToolbar from "./PivotToolbar.svelte";
   import { usePivotDataStore } from "./pivot-data-store";
-  import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
 
   const stateManagers = getStateManagers();
 
@@ -39,7 +40,9 @@
     >
       <PivotToolbar {isFetching} bind:showPanels />
 
-      {#if !$pivotDataStore?.data || $pivotDataStore?.data?.length === 0}
+      {#if $pivotDataStore?.error?.length}
+        <PivotError errors={$pivotDataStore.error} />
+      {:else if !$pivotDataStore?.data || $pivotDataStore?.data?.length === 0}
         <PivotEmpty {assembled} {isFetching} />
       {:else}
         <PivotTable {pivotDataStore} />

web-common/src/features/dashboards/pivot/PivotError.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { PivotQueryError } from "./types";
+
+  export let errors: PivotQueryError[];
+
+  function removeDuplicates(errors: PivotQueryError[]): PivotQueryError[] {
+    const seen = new Set();
+    return errors.filter((error) => {
+      const key = `${error.statusCode}-${error.message}`;
+      if (seen.has(key)) {
+        return false;
+      } else {
+        seen.add(key);
+        return true;
+      }
+    });
+  }
+
+  let uniqueErrors = removeDuplicates(errors);
+</script>
+
+<div class="flex flex-col items-center w-full h-full">
+  <span class="text-3xl font-normal m-2">Sorry, unexpected query error!</span>
+  <div class="text-base text-gray-600 mt-4">
+    One or more APIs failed with the following error{uniqueErrors.length !== 1
+      ? "s"
+      : ""}:
+  </div>
+
+  {#each uniqueErrors as error}
+    <div class="flex text-base gap-x-2">
+      <span class="text-red-600 font-semibold">{error.statusCode} :</span>
+      <span class="text-gray-700">{error.message}</span>
+    </div>
+  {/each}
+</div>

web-common/src/features/dashboards/pivot/pivot-data-store.ts

@@ -12,12 +12,14 @@ import type {
   V1MetricsViewAggregationResponse,
   V1MetricsViewAggregationResponseDataItem,
 } from "@rilldata/web-common/runtime-client";
+import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
 import type { ColumnDef } from "@tanstack/svelte-table";
 import { type Readable, derived, readable } from "svelte/store";
 import { getColumnDefForPivot } from "./pivot-column-definition";
 import {
   addExpandedDataToPivot,
+  getExpandedQueryErrors,
   queryExpandedRowMeasureValues,
 } from "./pivot-expansion";
 import {
@@ -39,6 +41,8 @@ import {
 } from "./pivot-table-transformations";
 import {
   canEnablePivotComparison,
+  getErrorFromResponses,
+  getErrorState,
   getFilterForPivotTable,
   getFiltersForCell,
   getPivotConfigKey,
@@ -53,10 +57,10 @@ import {
   COMPARISON_DELTA,
   COMPARISON_PERCENT,
   PivotChipType,
-  type PivotFilter,
   type PivotDataRow,
   type PivotDataStore,
   type PivotDataStoreConfig,
+  type PivotFilter,
   type PivotTimeConfig,
 } from "./types";
 
@@ -350,6 +354,9 @@ export function createPivotDataStore(
             totalColumns: 0,
           });
         }
+        if (columnDimensionAxes?.error && columnDimensionAxes?.error.length) {
+          return columnSet(getErrorState(columnDimensionAxes.error));
+        }
         const anchorDimension = rowDimensionNames[0];
 
         const {
@@ -383,11 +390,11 @@ export function createPivotDataStore(
 
         let globalTotalsQuery:
           | Readable<null>
-          | CreateQueryResult<V1MetricsViewAggregationResponse, unknown> =
+          | CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> =
           readable(null);
         let totalsRowQuery:
           | Readable<null>
-          | CreateQueryResult<V1MetricsViewAggregationResponse, unknown> =
+          | CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> =
           readable(null);
         if (rowDimensionNames.length && measureNames.length) {
           globalTotalsQuery = createPivotAggregationRowQuery(
@@ -446,6 +453,19 @@ export function createPivotDataStore(
               });
             }
 
+            // check for errors in the responses
+            const totalErrors = getErrorFromResponses([
+              globalTotalsResponse,
+              totalsRowResponse,
+            ]);
+
+            if (totalErrors.length || rowDimensionAxes?.error?.length) {
+              const allErrors = totalErrors.concat(
+                rowDimensionAxes?.error || [],
+              );
+              return axesSet(getErrorState(allErrors));
+            }
+
             /**
              * If there are no axes values, return an empty table
              */
@@ -491,7 +511,7 @@ export function createPivotDataStore(
 
             let initialTableCellQuery:
               | Readable<null>
-              | CreateQueryResult<V1MetricsViewAggregationResponse, unknown> =
+              | CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> =
               readable(null);
 
             let columnDef: ColumnDef<PivotDataRow>[] = [];
@@ -540,6 +560,20 @@ export function createPivotDataStore(
                   });
                 }
 
+                const tableCellQueryError = getErrorFromResponses([
+                  initialTableCellData,
+                ]);
+
+                if (
+                  tableCellQueryError.length ||
+                  rowMeasureTotalsAxesQuery?.error?.length
+                ) {
+                  const allErrors = tableCellQueryError.concat(
+                    rowMeasureTotalsAxesQuery?.error || [],
+                  );
+                  return cellSet(getErrorState(allErrors));
+                }
+
                 const mergedRowTotals = mergeRowTotalsInOrder(
                   rowDimensionValues,
                   axesRowTotals,
@@ -602,6 +636,11 @@ export function createPivotDataStore(
                     prepareNestedPivotData(pivotData, rowDimensionNames);
                     let tableDataExpanded: PivotDataRow[] = pivotData;
                     if (expandedRowMeasureValues?.length) {
+                      const queryErrors = getExpandedQueryErrors(
+                        expandedRowMeasureValues,
+                      );
+                      if (queryErrors.length) return getErrorState(queryErrors);
+
                       tableDataExpanded = addExpandedDataToPivot(
                         config,
                         pivotData,

web-common/src/features/dashboards/pivot/pivot-expansion.ts

@@ -11,6 +11,7 @@ import type {
   V1MetricsViewAggregationResponse,
   V1MetricsViewAggregationResponseDataItem,
 } from "@rilldata/web-common/runtime-client";
+import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
 import { type Readable, derived, readable, writable } from "svelte/store";
 import {
@@ -23,6 +24,7 @@ import {
   reduceTableCellDataIntoRows,
 } from "./pivot-table-transformations";
 import {
+  getErrorFromResponses,
   getFilterForPivotTable,
   getSortFilteredMeasureBody,
   getSortForAccessor,
@@ -31,7 +33,12 @@ import {
   isTimeDimension,
   mergeTimeStrings,
 } from "./pivot-utils";
-import type { PivotDataRow, PivotDataStoreConfig, TimeFilters } from "./types";
+import type {
+  PivotDataRow,
+  PivotDataStoreConfig,
+  PivotQueryError,
+  TimeFilters,
+} from "./types";
 
 /**
  * Extracts and organizes dimension values from a nested array structure
@@ -139,11 +146,26 @@ export function createSubTableCellQuery(
 interface ExpandedRowMeasureValues {
   isFetching: boolean;
   expandIndex: string;
+  error?: PivotQueryError[];
   rowDimensionValues: string[];
   data: V1MetricsViewAggregationResponseDataItem[];
   totals: V1MetricsViewAggregationResponseDataItem[];
 }
 
+export function getExpandedErrorState(
+  errors: PivotQueryError[],
+  expandIndex: string,
+): ExpandedRowMeasureValues {
+  return {
+    isFetching: false,
+    error: errors,
+    expandIndex,
+    rowDimensionValues: [],
+    totals: [],
+    data: [],
+  };
+}
+
 /**
  * For each expanded row, create a query for the sub table
  * and return the query result along with the expanded row index
@@ -270,6 +292,11 @@ export function queryExpandedRowMeasureValues(
           ),
         ],
         ([expandIndex, subRowDimensions], axisSet) => {
+          if (subRowDimensions?.error?.length) {
+            return axisSet(
+              getExpandedErrorState(subRowDimensions.error, expandIndex),
+            );
+          }
           if (subRowDimensions?.isFetching) {
             const rowMeasureValuesEmpty: ExpandedRowMeasureValues = {
               isFetching: true,
@@ -300,7 +327,7 @@ export function queryExpandedRowMeasureValues(
 
           let subTableQuery:
             | Readable<null>
-            | CreateQueryResult<V1MetricsViewAggregationResponse, unknown> =
+            | CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> =
             readable(null);
 
           if (config.colDimensionNames.length) {
@@ -319,6 +346,13 @@ export function queryExpandedRowMeasureValues(
           return derived(
             [subRowAxesQueryForMeasureTotals, subTableQuery],
             ([subRowTotals, subTableData]) => {
+              const subTableQueryError = getErrorFromResponses([subTableData]);
+              if (subTableQueryError.length || subRowTotals?.error?.length) {
+                const allErrors = subTableQueryError.concat(
+                  subRowTotals?.error || [],
+                );
+                return getExpandedErrorState(allErrors, expandIndex);
+              }
               if (subRowTotals?.isFetching) {
                 const rowMeasureValueWithoutSubTable: ExpandedRowMeasureValues =
                   {
@@ -470,3 +504,11 @@ export function addExpandedDataToPivot(
   });
   return pivotData;
 }
+
+export function getExpandedQueryErrors(
+  expandedRowMeasureValues: ExpandedRowMeasureValues[],
+): PivotQueryError[] {
+  return expandedRowMeasureValues
+    .flatMap((expandedRow) => expandedRow.error || [])
+    .filter((error) => error !== undefined);
+}

web-common/src/features/dashboards/pivot/pivot-queries.ts

@@ -9,15 +9,17 @@ import {
   type V1Expression,
   type V1MetricsViewAggregationDimension,
   type V1MetricsViewAggregationMeasure,
+  type V1MetricsViewAggregationResponse,
   type V1MetricsViewAggregationResponseDataItem,
   type V1MetricsViewAggregationSort,
   createQueryServiceMetricsViewAggregation,
-  type V1MetricsViewAggregationResponse,
 } from "@rilldata/web-common/runtime-client";
+import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
 import { type Readable, derived, readable } from "svelte/store";
 import { mergeFilters } from "./pivot-merge-filters";
 import {
+  getErrorFromResponses,
   getFilterForMeasuresTotalsAxesQuery,
   getTimeGrainFromDimension,
   isTimeDimension,
@@ -28,6 +30,7 @@ import {
   COMPARISON_PERCENT,
   type PivotAxesData,
   type PivotDataStoreConfig,
+  type PivotQueryError,
 } from "./types";
 
 /**
@@ -43,7 +46,7 @@ export function createPivotAggregationRowQuery(
   limit = "100",
   offset = "0",
   timeRange: TimeRangeString | undefined = undefined,
-): CreateQueryResult<V1MetricsViewAggregationResponse> {
+): CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> {
   if (!sort.length) {
     sort = [
       {
@@ -178,6 +181,15 @@ export function getAxisForDimensions(
       // Wait for all data to populate
       if (data.some((d) => d?.isFetching)) return { isFetching: true };
 
+      // Check for errors in any of the queries
+      const errors: PivotQueryError[] = getErrorFromResponses(data);
+      if (errors.length) {
+        return {
+          isFetching: false,
+          error: errors,
+        };
+      }
+
       data.forEach((d, i: number) => {
         const dimensionName = dimensions[i];