Remove old canvas deprecated properties

runtime/compilers/rillv1/parse_component.go

@@ -90,6 +90,8 @@ func (p *Parser) parseComponentYAML(tmp *ComponentYAML) (*runtimev1.ComponentSpe
 			break
 		}
 
+
+		// TODO: Activate validation later when in prod
 		// if err := componentTemplateSchema.Validate(map[string]any{renderer: props}); err != nil {
 		// 	return nil, nil, fmt.Errorf(`failed to validate renderer %q: %w`, renderer, err)
 		// }

web-admin/src/features/embeds/CanvasEmbed.svelte

@@ -8,15 +8,14 @@
   export let instanceId: string;
   export let canvasName: string;
 
+  // TODO: Remove later
+  let columns = 12;
+  let gap = 4;
   $: canvasQuery = useResource(instanceId, canvasName, ResourceKind.Canvas);
 
   $: canvas = $canvasQuery.data?.canvas.spec;
 
-  $: ({
-    items = [],
-    columns,
-    gap,
-  } = canvas || { items: [], columns: 24, gap: 2 });
+  $: ({ items = [] } = canvas || { items: [], columns: 24, gap: 2 });
 </script>
 
 <CanvasDashboardEmbed {canvasName} {columns} {items} {gap} />

web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte

@@ -14,11 +14,10 @@
 
   $: canvas = $canvasQuery.data?.canvas.spec;
 
-  $: ({
-    items = [],
-    columns,
-    gap,
-  } = canvas || { items: [], columns: 24, gap: 2 });
+  // TODO: Remove later
+  let columns = 12;
+  let gap = 4;
+  $: ({ items = [] } = canvas || { items: [], columns: 24, gap: 2 });
 </script>
 
 <CanvasDashboardEmbed {canvasName} {columns} {items} {gap} />

web-common/src/features/canvas-components/render/VegaLiteRenderer.svelte → web-common/src/components/vega/VegaLiteRenderer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
-  import { getRillTheme } from "@rilldata/web-common/features/canvas-components/render/vega-config";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import {
     type EmbedOptions,
@@ -10,7 +9,8 @@
     type VisualizationSpec,
   } from "svelte-vega";
   import { get } from "svelte/store";
-  import type { ExpressionFunction, VLTooltipFormatter } from "../types";
+  import type { ExpressionFunction, VLTooltipFormatter } from "./types";
+  import { getRillTheme } from "./vega-config";
   import { VegaLiteTooltipHandler } from "./vega-tooltip";
 
   export let data: Record<string, unknown> = {};

web-common/src/features/canvas-components/render/VegaRenderer.svelte → web-common/src/components/vega/VegaRenderer.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { get } from "svelte/store";
+  import { onDestroy } from "svelte";
   import {
+    type EmbedOptions,
     type SignalListeners,
     Vega,
     type View,
     type VisualizationSpec,
-    type EmbedOptions,
   } from "svelte-vega";
-  import type { ExpressionFunction, VLTooltipFormatter } from "../types";
-  import { VegaLiteTooltipHandler } from "./vega-tooltip";
-  import { onDestroy } from "svelte";
+  import { get } from "svelte/store";
+  import type { ExpressionFunction, VLTooltipFormatter } from "./types";
   import { getRillTheme } from "./vega-config";
+  import { VegaLiteTooltipHandler } from "./vega-tooltip";
 
   export let data: Record<string, unknown> = {};
   export let spec: VisualizationSpec;

web-common/src/features/canvas-components/types.ts → web-common/src/components/vega/types.ts

@@ -1,5 +1,6 @@
 import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
 
+// TODO: Consolidate with Canvas components types
 /**
  * Type definitions for common chart types supported by Vega
  */

web-common/src/features/canvas-components/render/vega-tooltip.ts → web-common/src/components/vega/vega-tooltip.ts

@@ -1,13 +1,13 @@
-import {
-  mouseLocationToBoundingRect,
-  placeElement,
-} from "@rilldata/web-common/lib/place-element";
 import type {
   Alignment,
   Location,
 } from "@rilldata/web-common/lib/place-element";
+import {
+  mouseLocationToBoundingRect,
+  placeElement,
+} from "@rilldata/web-common/lib/place-element";
 import type { View } from "svelte-vega";
-import type { VLTooltipFormatter } from "../types";
+import type { VLTooltipFormatter } from "./types";
 
 const TOOLTIP_ID = "rill-vg-tooltip";
 

web-common/src/features/canvas-components/ComponentStatusDisplay.svelte → web-common/src/features/canvas-components_deprecated/ComponentStatusDisplay.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
-  import {
-    chartPromptsStore,
-    ChartPromptStatus,
-  } from "@rilldata/web-common/features/canvas-components/prompt/chartPrompt";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { chartPromptsStore, ChartPromptStatus } from "./prompt/chartPrompt";
 
   export let componentName: string;
   export let isFetching: boolean;

web-common/src/features/canvas-components/ComponentsHeader.svelte → web-common/src/features/canvas-components_deprecated/ComponentsHeader.svelte

@@ -2,7 +2,6 @@
   import { goto } from "$app/navigation";
   import { Button } from "@rilldata/web-common/components/button";
   import PanelCTA from "@rilldata/web-common/components/panel/PanelCTA.svelte";
-  import GenerateVegaSpecPrompt from "@rilldata/web-common/features/canvas-components/prompt/GenerateVegaSpecPrompt.svelte";
   import {
     extractFileName,
     splitFolderAndFileName,
@@ -11,6 +10,7 @@
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { WorkspaceHeader } from "@rilldata/web-common/layout/workspace";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import GenerateVegaSpecPrompt from "./prompt/GenerateVegaSpecPrompt.svelte";
 
   export let filePath: string;
   export let hasUnsavedChanges: boolean;

web-common/src/features/canvas-components/prompt/ChartPromptHistoryDisplay.svelte → web-common/src/features/canvas-components_deprecated/prompt/ChartPromptHistoryDisplay.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { Button } from "@rilldata/web-common/components/button";
   import RefreshIcon from "@rilldata/web-common/components/icons/RefreshIcon.svelte";
-  import { chartPromptsStore } from "@rilldata/web-common/features/canvas-components/prompt/chartPrompt";
   import { createEventDispatcher } from "svelte";
+  import { chartPromptsStore } from "./chartPrompt";
 
   export let entityName: string;
 

web-common/src/features/canvas-components/prompt/GenerateChartYAMLPrompt.svelte → web-common/src/features/canvas-components_deprecated/prompt/GenerateChartYAMLPrompt.svelte

@@ -2,12 +2,12 @@
   import { Button } from "@rilldata/web-common/components/button";
   import * as Dialog from "@rilldata/web-common/components/dialog-v2";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import ChartPromptHistoryDisplay from "@rilldata/web-common/features/canvas-components/prompt/ChartPromptHistoryDisplay.svelte";
-  import { createFullChartGenerator } from "@rilldata/web-common/features/canvas-components/prompt/generateChart";
   import { useAllFileNames } from "@rilldata/web-common/features/entity-management/file-selectors";
   import { getName } from "@rilldata/web-common/features/entity-management/name-utils";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
+  import ChartPromptHistoryDisplay from "./ChartPromptHistoryDisplay.svelte";
+  import { createFullChartGenerator } from "./generateChart";
 
   export let open: boolean;
   export let table: string = "";

web-common/src/features/canvas-components/prompt/GenerateVegaSpecPrompt.svelte → web-common/src/features/canvas-components_deprecated/prompt/GenerateVegaSpecPrompt.svelte

@@ -2,9 +2,9 @@
   import { Button } from "@rilldata/web-common/components/button";
   import * as Dialog from "@rilldata/web-common/components/dialog-v2";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import ChartPromptHistoryDisplay from "@rilldata/web-common/features/canvas-components/prompt/ChartPromptHistoryDisplay.svelte";
-  import { createChartGenerator } from "@rilldata/web-common/features/canvas-components/prompt/generateChart";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import ChartPromptHistoryDisplay from "./ChartPromptHistoryDisplay.svelte";
+  import { createChartGenerator } from "./generateChart";
 
   export let open: boolean;
   export let chart: string;

web-common/src/features/canvas-components/prompt/chartPromptStatus.ts → web-common/src/features/canvas-components_deprecated/prompt/chartPromptStatus.ts

@@ -1,5 +1,5 @@
-import type { ChartPromptStatus } from "@rilldata/web-common/features/canvas-components/prompt/chartPrompt";
 import { type Readable, type Updater, writable } from "svelte/store";
+import type { ChartPromptStatus } from "./chartPrompt";
 
 export type ChartPromptState = {
   charts: Record<string, ChartPromptStatus>;

web-common/src/features/canvas-components/prompt/generateChart.spec.ts → web-common/src/features/canvas-components_deprecated/prompt/generateChart.spec.ts

@@ -1,5 +1,5 @@
-import { getChartYaml } from "@rilldata/web-common/features/canvas-components/chartYaml";
 import { describe, expect, it } from "vitest";
+import { getChartYaml } from "../chartYaml";
 
 const VegaLiteSpec = `{
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

web-common/src/features/canvas-components/prompt/generateChart.ts → web-common/src/features/canvas-components_deprecated/prompt/generateChart.ts

@@ -1,13 +1,4 @@
 import { goto } from "$app/navigation";
-import {
-  getChartYaml,
-  parseChartYaml,
-} from "@rilldata/web-common/features/canvas-components/chartYaml";
-import {
-  ChartPromptStatus,
-  chartPromptsStore,
-} from "@rilldata/web-common/features/canvas-components/prompt/chartPrompt";
-import { useComponent } from "@rilldata/web-common/features/canvas-components/selectors";
 import { getFileAPIPathFromNameAndType } from "@rilldata/web-common/features/entity-management/entity-mappers";
 import { EntityType } from "@rilldata/web-common/features/entity-management/types";
 import {
@@ -18,6 +9,9 @@ import {
   runtimeServicePutFile,
 } from "@rilldata/web-common/runtime-client";
 import { get } from "svelte/store";
+import { getChartYaml, parseChartYaml } from "../chartYaml";
+import { useComponent } from "../selectors";
+import { ChartPromptStatus, chartPromptsStore } from "./chartPrompt";
 
 export function createChartGenerator(
   instanceId: string,

web-common/src/features/canvas/Canvas.svelte

@@ -10,11 +10,15 @@
   $: selectedIndex = $canvasStore?.selectedComponentIndex;
 
   let showGrid = true;
+
+  // TODO: Remove later when we move to new tiling system
+  const columns = 24;
+  const gap = 1;
+
   let spec: V1CanvasSpec = {
-    columns: 20,
-    gap: 4,
     items: [],
   };
+
   $: ({
     saveLocalContent: updateComponentFile,
     autoSave,
@@ -25,7 +29,7 @@
 
   $: spec = structuredClone($validSpecStore ?? spec);
 
-  $: ({ items = [], columns = 20, gap = 4, variables = [] } = spec);
+  $: ({ items = [], variables = [] } = spec);
 
   async function handleDeleteEvent(
     e: CustomEvent<{

web-common/src/features/canvas/CanvasDashboardEmbed.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
-  import {
-    type V1CanvasItem,
-    type V1ComponentVariable,
-  } from "@rilldata/web-common/runtime-client";
+  import { type V1CanvasItem } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { setContext } from "svelte";
   import Component from "./Component.svelte";
   import * as defaults from "./constants";
   import DashboardWrapper from "./DashboardWrapper.svelte";
-  import { canvasVariablesStore } from "./variables-store";
 
   export let canvasName: string;
   export let columns = 20;
   export let items: V1CanvasItem[];
   export let gap = 4;
   export let chartView = false;
-  export let variables: V1ComponentVariable[] = [];
 
   let contentRect: DOMRectReadOnly = new DOMRectReadOnly(0, 0, 0, 0);
   setContext("rill::canvas:name", canvasName);
@@ -36,10 +31,6 @@
     const bottom = Number(el.height) + Number(el.y);
     return Math.max(max, bottom);
   }, 0);
-
-  $: if (variables.length && canvasName) {
-    canvasVariablesStore.init(canvasName, variables);
-  }
 </script>
 
 <DashboardWrapper

web-common/src/features/canvas/CanvasThemeProvider.svelte

@@ -1,29 +1,24 @@
 <script lang="ts">
-  // import { page } from "$app/stores";
-  // import { getStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
-  // import { setTheme } from "@rilldata/web-common/features/themes/actions";
-  // import { useTheme } from "@rilldata/web-common/features/themes/selectors";
-  // import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  // import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import { setTheme } from "@rilldata/web-common/features/themes/actions";
+  import { useTheme } from "@rilldata/web-common/features/themes/selectors";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { onMount } from "svelte";
 
-  // const { validSpecStore } = getStateManagers();
-  // $: themeFromUrl = $page.url.searchParams.get("theme");
+  const { validSpecStore } = getCanvasStateManagers();
+  $: themeFromUrl = $page.url.searchParams.get("theme");
 
-  // let theme: ReturnType<typeof useTheme>;
-  // $: themeName = themeFromUrl ?? $validSpecStore?.theme
-  // $: if (themeName) theme = useTheme($runtime.instanceId, themeName);
+  let theme: ReturnType<typeof useTheme>;
+  $: themeName = themeFromUrl ?? $validSpecStore?.theme;
+  $: if (themeName) theme = useTheme($runtime.instanceId, themeName);
 
-  // $: setTheme(
-  //   $theme?.data?.theme?.spec ?? $validSpecStore?.embeddedTheme,
-  // );
+  $: setTheme($theme?.data?.theme?.spec ?? $validSpecStore?.embeddedTheme);
 
-  // onMount(() => {
-  //   // Handle the case where we have data in cache but the dashboard is not mounted yet
-  //   setTheme(
-  //     $theme?.data?.theme?.spec ??
-  //       $validSpecStore?.data?.explore?.embeddedTheme,
-  //   );
-  // });
+  onMount(() => {
+    // Handle the case where we have data in cache but the dashboard is not mounted yet
+    setTheme($theme?.data?.theme?.spec ?? $validSpecStore?.embeddedTheme);
+  });
 </script>
 
 <slot />