Canvas: Gracefully handle error states

web-common/src/features/canvas/components/ComponentError.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import CrossIcon from "@rilldata/web-common/components/icons/CrossIcon.svelte";
+
+  export let error: string | undefined;
+</script>
+
+<div class="component-error">
+  <div class="error-icon">
+    <CrossIcon size="12px" />
+  </div>
+  <div class="error-message">
+    {error ?? "Component Error"}
+  </div>
+</div>
+
+<style lang="postcss">
+  .component-error {
+    @apply flex flex-col gap-y-3 w-full h-full items-center justify-center p-4;
+    @apply text-red-600 bg-red-50/50 rounded-lg border border-red-200;
+  }
+
+  .error-icon {
+    @apply p-2 bg-red-100 rounded-full;
+  }
+
+  .error-message {
+    @apply text-base font-medium text-center max-w-md;
+  }
+</style>

web-common/src/features/canvas/components/charts/Chart.svelte

@@ -2,6 +2,7 @@
   import VegaLiteRenderer from "@rilldata/web-common/components/vega/VegaLiteRenderer.svelte";
   import ComponentHeader from "@rilldata/web-common/features/canvas/ComponentHeader.svelte";
   import type { ChartSpec } from "@rilldata/web-common/features/canvas/components/charts";
+  import ComponentError from "@rilldata/web-common/features/canvas/components/ComponentError.svelte";
   import { getComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/util";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
@@ -93,9 +94,5 @@
     {/if}
   {/if}
 {:else}
-  <div
-    class="flex w-full h-full p-2 text-xl bg-white items-center justify-center text-red-500"
-  >
-    {$schema.error}
-  </div>
+  <ComponentError error={$schema.error} />
 {/if}

web-common/src/features/canvas/components/image/Image.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ComponentError from "@rilldata/web-common/features/canvas/components/ComponentError.svelte";
   import type { ImageProperties } from "@rilldata/web-common/features/templates/types";
   import type { V1ComponentSpecRendererProperties } from "@rilldata/web-common/runtime-client";
   import httpClient from "@rilldata/web-common/runtime-client/http-client";
@@ -77,7 +78,7 @@
 </script>
 
 {#if errorMessage}
-  <div class="error-message">{errorMessage}</div>
+  <ComponentError error={errorMessage} />
 {:else}
   <img
     src={imageSrc || ""}
@@ -86,10 +87,3 @@
     style={styleString}
   />
 {/if}
-
-<style>
-  .error-message {
-    color: red;
-    font-weight: bold;
-  }
-</style>

web-common/src/features/canvas/components/kpi/KPI.svelte

@@ -2,6 +2,7 @@
   import { SimpleDataGraphic } from "@rilldata/web-common/components/data-graphic/elements";
   import { ChunkedLine } from "@rilldata/web-common/components/data-graphic/marks";
   import PercentageChange from "@rilldata/web-common/components/data-types/PercentageChange.svelte";
+  import ComponentError from "@rilldata/web-common/features/canvas/components/ComponentError.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import {
     MainAreaColorGradientDark,
@@ -179,11 +180,7 @@
     </div>
   {/if}
 {:else}
-  <div
-    class="flex w-full h-full p-2 text-xl bg-white items-center justify-center text-red-500"
-  >
-    {$schema.error}
-  </div>
+  <ComponentError error={$schema.error} />
 {/if}
 
 <style lang="postcss">

web-common/src/features/canvas/components/table/TableTemplate.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ComponentError from "@rilldata/web-common/features/canvas/components/ComponentError.svelte";
   import type { TableSpec } from "@rilldata/web-common/features/canvas/components/table";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import { createPivotDataStore } from "@rilldata/web-common/features/dashboards/pivot/pivot-data-store";
@@ -74,11 +75,7 @@
 
 <div class="overflow-y-auto h-full">
   {#if !$schema.isValid}
-    <div
-      class="flex w-full h-full p-2 text-xl bg-white items-center justify-center text-red-500"
-    >
-      {$schema.error}
-    </div>
+    <ComponentError error={$schema.error} />
   {:else if pivotDataStore && pivotConfig && $pivotConfig}
     <TableRenderer
       {pivotDataStore}

web-common/src/features/canvas/components/table/index.ts

@@ -40,13 +40,7 @@ export class TableCanvasComponent extends BaseCanvasComponent<TableSpec> {
   }
 
   isValid(spec: TableSpec): boolean {
-    return (
-      typeof spec.metrics_view === "string" &&
-      ((Array.isArray(spec.measures) && spec.measures.length > 0) ||
-        (Array.isArray(spec.row_dimensions) &&
-          spec.row_dimensions.length > 0) ||
-        (Array.isArray(spec.col_dimensions) && spec.col_dimensions.length > 0))
-    );
+    return typeof spec.metrics_view === "string";
   }
 
   inputParams(): InputParams<TableSpec> {

web-common/src/features/canvas/components/table/selector.ts

@@ -99,12 +99,19 @@ export function validateTableSchema(
           error: `Metrics view ${metrics_view} not found`,
         };
       }
+
+      if (!measures.length && !rowDimensions.length && !colDimensions.length) {
+        return {
+          isValid: false,
+          error: "Select at least one measure or dimension for the table",
+        };
+      }
       const validateMeasuresRes = validateMeasures(metricsView, measures);
       if (!validateMeasuresRes.isValid) {
         const invalidMeasures = validateMeasuresRes.invalidMeasures.join(", ");
         return {
           isValid: false,
-          error: `Invalid measure(s) ${invalidMeasures} selected for the table`,
+          error: `Invalid measure(s) "${invalidMeasures}" selected for the table`,
         };
       }
 
@@ -119,7 +126,7 @@ export function validateTableSchema(
 
         return {
           isValid: false,
-          error: `Invalid dimension(s) ${invalidDimensions} selected for the table`,
+          error: `Invalid dimension(s) "${invalidDimensions}" selected for the table`,
         };
       }
       return {