Canvas: Grid and Layout

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

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

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

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

web-common/src/components/tooltip/SlidingWords.svelte

@@ -9,18 +9,26 @@
   let mounted = false;
   let duration = 0;
   let timer;
-  let element;
+  let element: HTMLElement | null = null;
 
   let thingWidth = tweened(0, { duration: 50 });
 
   onMount(() => {
+    if (!element) return;
+
     const obs = new ResizeObserver(() => {
+      if (!element) return;
       const bbox = element.getBoundingClientRect();
       thingWidth.set(bbox.width);
     });
+
     obs.observe(element);
     thingWidth.set(element.getBoundingClientRect().width, { duration: 0 });
     mounted = true;
+
+    return () => {
+      obs.disconnect();
+    };
   });
 
   function setDuration() {

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { PlusCircleIcon } from "lucide-svelte";
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+  } from "@rilldata/web-common/components/context-menu";
+  import type { CanvasComponentType } from "./components/types";
+  import type { ComponentType, SvelteComponent } from "svelte";
+  import ChartIcon from "./icons/ChartIcon.svelte";
+  import TableIcon from "./icons/TableIcon.svelte";
+  import TextIcon from "./icons/TextIcon.svelte";
+  import BigNumberIcon from "./icons/BigNumberIcon.svelte";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  const menuItems: {
+    id: CanvasComponentType;
+    label: string;
+    icon: ComponentType<SvelteComponent>;
+  }[] = [
+    { id: "bar_chart", label: "Chart", icon: ChartIcon },
+    { id: "table", label: "Table", icon: TableIcon },
+    { id: "markdown", label: "Text", icon: TextIcon },
+    { id: "kpi", label: "KPI", icon: BigNumberIcon },
+    { id: "image", label: "Image", icon: ChartIcon },
+  ];
+
+  function handleAddComponent(componentType: CanvasComponentType) {
+    console.log("[BlankCanvas] handleAddComponent", componentType);
+    dispatch("add", { type: componentType });
+  }
+</script>
+
+<div class="size-full p-2 bg-white">
+  <ContextMenu>
+    <ContextMenuTrigger>
+      <button
+        type="button"
+        class="flex flex-col items-center gap-2 p-8 rounded-[6px] border border-slate-200 w-full"
+      >
+        <PlusCircleIcon class="w-6 h-6 text-slate-500" />
+        <span class="text-sm font-medium text-slate-500">Add a component</span>
+      </button>
+    </ContextMenuTrigger>
+    <ContextMenuContent>
+      {#each menuItems as item}
+        <ContextMenuItem
+          on:click={() => handleAddComponent(item.id)}
+          class="text-gray-700 text-xs"
+        >
+          <div class="flex flex-row gap-x-2">
+            <svelte:component this={item.icon} />
+            <span class="text-gray-700 text-xs font-normal">{item.label}</span>
+          </div>
+        </ContextMenuItem>
+      {/each}
+    </ContextMenuContent>
+  </ContextMenu>
+</div>