From 587b528159bfa33a8f9335b7fbb047763abe38d3 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 10 Feb 2025 14:47:01 +0530
Subject: [PATCH 1/4] Add component error state svelte component

---
 .../canvas/components/ComponentError.svelte   | 29 +++++++++++++++++++
 .../canvas/components/charts/Chart.svelte     |  7 ++---
 .../features/canvas/components/kpi/KPI.svelte |  7 ++---
 .../components/table/TableTemplate.svelte     |  7 ++---
 .../canvas/components/table/selector.ts       |  4 +--
 5 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 web-common/src/features/canvas/components/ComponentError.svelte

diff --git a/web-common/src/features/canvas/components/ComponentError.svelte b/web-common/src/features/canvas/components/ComponentError.svelte
new file mode 100644
index 00000000000..d083abbacf7
--- /dev/null
+++ b/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="20px" />
+  </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 bg-red-50 text-red-600 rounded-lg border border-red-200;
+  }
+
+  .error-icon {
+    @apply p-3 bg-red-100 rounded-full;
+  }
+
+  .error-message {
+    @apply text-base font-medium text-center max-w-md;
+  }
+</style>
diff --git a/web-common/src/features/canvas/components/charts/Chart.svelte b/web-common/src/features/canvas/components/charts/Chart.svelte
index 4150cb62d8a..46ff73f6362 100644
--- a/web-common/src/features/canvas/components/charts/Chart.svelte
+++ b/web-common/src/features/canvas/components/charts/Chart.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import VegaLiteRenderer from "@rilldata/web-common/components/vega/VegaLiteRenderer.svelte";
   import type { ChartSpec } from "@rilldata/web-common/features/canvas/components/charts";
+  import ComponentError from "@rilldata/web-common/features/canvas/components/ComponentError.svelte";
   import ComponentTitle from "@rilldata/web-common/features/canvas/ComponentTitle.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
@@ -86,9 +87,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}
diff --git a/web-common/src/features/canvas/components/kpi/KPI.svelte b/web-common/src/features/canvas/components/kpi/KPI.svelte
index a60d76a532c..ea4e3001afe 100644
--- a/web-common/src/features/canvas/components/kpi/KPI.svelte
+++ b/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">
diff --git a/web-common/src/features/canvas/components/table/TableTemplate.svelte b/web-common/src/features/canvas/components/table/TableTemplate.svelte
index 59246951cab..8395c255279 100644
--- a/web-common/src/features/canvas/components/table/TableTemplate.svelte
+++ b/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}
diff --git a/web-common/src/features/canvas/components/table/selector.ts b/web-common/src/features/canvas/components/table/selector.ts
index 081174291b0..2db29d8265c 100644
--- a/web-common/src/features/canvas/components/table/selector.ts
+++ b/web-common/src/features/canvas/components/table/selector.ts
@@ -104,7 +104,7 @@ export function validateTableSchema(
         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 +119,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 {

From a4b23cb6374a4cc03eb33f29e228275afb6e806c Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 10 Feb 2025 16:14:39 +0530
Subject: [PATCH 2/4] Allow changing metrics view for table

---
 web-common/src/features/canvas/components/table/index.ts  | 8 +-------
 .../src/features/canvas/components/table/selector.ts      | 7 +++++++
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/canvas/components/table/index.ts b/web-common/src/features/canvas/components/table/index.ts
index abd0d58fd84..34bf1084156 100644
--- a/web-common/src/features/canvas/components/table/index.ts
+++ b/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> {
diff --git a/web-common/src/features/canvas/components/table/selector.ts b/web-common/src/features/canvas/components/table/selector.ts
index 2db29d8265c..77ab2c50dee 100644
--- a/web-common/src/features/canvas/components/table/selector.ts
+++ b/web-common/src/features/canvas/components/table/selector.ts
@@ -99,6 +99,13 @@ 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(", ");

From eee0ee04db8fd2902fa59b9ddb0eb3fd30042e31 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 10 Feb 2025 16:26:32 +0530
Subject: [PATCH 3/4] Add error component to image

---
 .../src/features/canvas/components/image/Image.svelte  | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/web-common/src/features/canvas/components/image/Image.svelte b/web-common/src/features/canvas/components/image/Image.svelte
index e5aa6eaf768..e785e8f3df4 100644
--- a/web-common/src/features/canvas/components/image/Image.svelte
+++ b/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>

From 6a589d6b2a58c42800c7043bfc9e984ee5d8605a Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 10 Feb 2025 23:08:12 +0530
Subject: [PATCH 4/4] UI review

---
 .../src/features/canvas/components/ComponentError.svelte    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-common/src/features/canvas/components/ComponentError.svelte b/web-common/src/features/canvas/components/ComponentError.svelte
index d083abbacf7..d3d322b2cd2 100644
--- a/web-common/src/features/canvas/components/ComponentError.svelte
+++ b/web-common/src/features/canvas/components/ComponentError.svelte
@@ -6,7 +6,7 @@
 
 <div class="component-error">
   <div class="error-icon">
-    <CrossIcon size="20px" />
+    <CrossIcon size="12px" />
   </div>
   <div class="error-message">
     {error ?? "Component Error"}
@@ -16,11 +16,11 @@
 <style lang="postcss">
   .component-error {
     @apply flex flex-col gap-y-3 w-full h-full items-center justify-center p-4;
-    @apply bg-red-50 text-red-600 rounded-lg border border-red-200;
+    @apply text-red-600 bg-red-50/50 rounded-lg border border-red-200;
   }
 
   .error-icon {
-    @apply p-3 bg-red-100 rounded-full;
+    @apply p-2 bg-red-100 rounded-full;
   }
 
   .error-message {