feat: DAG Behavioral Changes (Canvas resource, Source Models, ... buttons)

runtime/parser/parse_canvas.go

@@ -259,7 +259,24 @@ func (p *Parser) parseCanvas(node *Node) error {
 		}
 	}
 
-	// Track canvas
+	// Collect MetricsView refs from inline components for direct Canvas -> MetricsView links in the DAG.
+	// This enables the graph to show Canvas -> MetricsView edges and ensures MetricsView changes
+	// trigger canvas reconciliation. Only inline components are checked here; external component
+	// MetricsView dependencies cascade through the Component layer (Canvas -> Component -> MetricsView).
+	existingRefs := make(map[ResourceName]bool, len(node.Refs))
+	for _, ref := range node.Refs {
+		existingRefs[ref] = true
+	}
+	for _, def := range inlineComponentDefs {
+		for _, ref := range def.refs {
+			if ref.Kind == ResourceKindMetricsView && !existingRefs[ref] {
+				node.Refs = append(node.Refs, ref)
+				existingRefs[ref] = true
+			}
+		}
+	}
+
+	// Track canvas (now with MetricsView refs included)
 	r, err := p.insertResource(ResourceKindCanvas, node.Name, node.Paths, node.Refs...)
 	if err != nil {
 		return err

runtime/parser/parse_node.go

@@ -248,26 +248,26 @@ func (p *Parser) parseStem(paths []string, ymlPath, yml, sqlPath, sql string) (*
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'type'", v)
-				break
-			}
-			res.Kind, err = ParseResourceKind(v)
-			if err != nil {
-				break
+			} else {
+				res.Kind, err = ParseResourceKind(v)
 			}
 		case "name":
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'name'", v)
-				break
+			} else {
+				res.Name = v
 			}
-			res.Name = v
 		case "connector":
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'connector'", v)
-				break
+			} else {
+				res.Connector = v
 			}
-			res.Connector = v
+		}
+		if err != nil {
+			break
 		}
 	}
 	if err != nil {

runtime/parser/parser.go

@@ -646,12 +646,13 @@ func (p *Parser) parsePaths(ctx context.Context, paths []string) error {
 	// NOTE 2: Using a map since the two-way check (necessary for reparses) may match the same resource twice.
 	modelsWithNameErrs := make(map[ResourceName]string)
 	for _, r := range p.insertedResources {
-		if r.Name.Kind == ResourceKindSource {
+		switch r.Name.Kind {
+		case ResourceKindSource:
 			n := ResourceName{Kind: ResourceKindModel, Name: r.Name.Name}.Normalized()
 			if _, ok := p.Resources[n]; ok {
 				modelsWithNameErrs[n] = r.Name.Name
 			}
-		} else if r.Name.Kind == ResourceKindModel {
+		case ResourceKindModel:
 			n := ResourceName{Kind: ResourceKindSource, Name: r.Name.Name}.Normalized()
 			if r2, ok := p.Resources[n]; ok {
 				modelsWithNameErrs[r.Name.Normalized()] = r2.Name.Name

runtime/reconcilers/canvas_test.go

@@ -60,11 +60,19 @@ rows:
 	require.NotNil(t, mv1.GetMetricsView().State.ValidSpec)
 	c1 = testruntime.GetResource(t, rt, id, runtime.ResourceKindCanvas, "c1")
 	require.NotNil(t, c1.GetCanvas().State.ValidSpec)
-	require.Len(t, c1.Meta.Refs, 2)
-	for _, componentName := range c1.Meta.Refs {
-		r := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, componentName.Name)
+	require.Len(t, c1.Meta.Refs, 3) // 2 components + 1 MetricsView (mv1)
+	var foundMvRef bool
+	for _, ref := range c1.Meta.Refs {
+		if ref.Kind == runtime.ResourceKindMetricsView {
+			require.Equal(t, "mv1", ref.Name)
+			foundMvRef = true
+			continue
+		}
+		require.Equal(t, runtime.ResourceKindComponent, ref.Kind)
+		r := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, ref.Name)
 		require.NotNil(t, r.GetComponent().State.ValidSpec)
 	}
+	require.True(t, foundMvRef, "expected a MetricsView ref for mv1")
 
 	// Fix everything
 	testruntime.PutFiles(t, rt, id, map[string]string{"m1.sql": `SELECT 'foo' as foo, 1 as x`})
@@ -92,10 +100,16 @@ rows:
 	c1 = testruntime.GetResource(t, rt, id, runtime.ResourceKindCanvas, "c1")
 	require.NotNil(t, c1.GetCanvas().State.ValidSpec)
 	require.NotEmpty(t, c1.Meta.ReconcileError)
-	require.Len(t, c1.Meta.Refs, 2)
+	require.Len(t, c1.Meta.Refs, 4) // 2 components + 2 MetricsView (doesnt_exist + mv1)
 	var valid, invalid int
-	for _, componentName := range c1.Meta.Refs {
-		r := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, componentName.Name)
+	mvRefNames := make(map[string]bool)
+	for _, ref := range c1.Meta.Refs {
+		if ref.Kind == runtime.ResourceKindMetricsView {
+			mvRefNames[ref.Name] = true
+			continue
+		}
+		require.Equal(t, runtime.ResourceKindComponent, ref.Kind)
+		r := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, ref.Name)
 		if r.GetComponent().State.ValidSpec == nil {
 			invalid++
 		} else {
@@ -104,6 +118,8 @@ rows:
 	}
 	require.Equal(t, 1, valid)
 	require.Equal(t, 1, invalid)
+	require.True(t, mvRefNames["mv1"], "expected MetricsView ref for mv1")
+	require.True(t, mvRefNames["doesnt_exist"], "expected MetricsView ref for doesnt_exist")
 }
 
 func TestCanvasValidateMetricsViewTimeConsistency(t *testing.T) {
@@ -280,7 +296,17 @@ rows:
 		c1 := testruntime.GetResource(t, rt, id, runtime.ResourceKindCanvas, "c1")
 		require.NotNil(t, c1.GetCanvas().State.DataRefreshedOn)
 
-		comp1 := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, c1.Meta.Refs[0].Name)
+		// Find the component ref (canvas refs now include MetricsView refs too)
+		var compRefName string
+		for _, ref := range c1.Meta.Refs {
+			if ref.Kind == runtime.ResourceKindComponent {
+				compRefName = ref.Name
+				break
+			}
+		}
+		require.NotEmpty(t, compRefName)
+
+		comp1 := testruntime.GetResource(t, rt, id, runtime.ResourceKindComponent, compRefName)
 		require.NotNil(t, comp1.GetComponent().State.DataRefreshedOn)
 
 		mv1 := testruntime.GetResource(t, rt, id, runtime.ResourceKindMetricsView, "mv1")

web-admin/src/components/layout/ContentContainer.svelte

@@ -2,10 +2,12 @@
   export let title = "";
   export let maxWidth = 800;
   export let showTitle = true;
+  export let flush = false;
 </script>
 
 <main
-  class="bg-surface-base size-full pt-8 pb-16 lg:pt-12 flex flex-col items-center px-8 sm:px-16 lg:px-32 2xl:px-40 overflow-y-auto"
+  class="bg-surface-base size-full pt-8 pb-16 lg:pt-12 flex flex-col items-center overflow-y-auto"
+  class:padded={!flush}
   style="scrollbar-gutter: stable;"
 >
   <section class="w-full flex flex-col gap-y-3" style:max-width="{maxWidth}px">
@@ -21,3 +23,9 @@
     <slot />
   </section>
 </main>
+
+<style lang="postcss">
+  .padded {
+    @apply px-8 sm:px-16 lg:px-32 2xl:px-40;
+  }
+</style>

web-admin/src/components/nav/LeftNav.svelte

@@ -9,17 +9,20 @@
     label: string;
     route: string;
     hasPermission?: boolean;
+    matchPrefix?: boolean;
   }[];
 </script>
 
 <div class="nav-items" style:min-width={minWidth}>
   <!-- if hasPermission is not provided, it will be undefined -->
-  {#each navItems as { label, route, hasPermission = true } (route)}
+  {#each navItems as { label, route, hasPermission = true, matchPrefix = false } (route)}
     {#if hasPermission}
       <LeftNavItem
         {label}
         link={`${basePage}${route}`}
-        selected={$page.route.id === `${baseRoute}${route}`}
+        selected={matchPrefix
+          ? ($page.route.id?.startsWith(`${baseRoute}${route}`) ?? false)
+          : $page.route.id === `${baseRoute}${route}`}
       />
     {/if}
   {/each}

web-admin/src/features/projects/status/resource-table/ProjectResources.svelte

@@ -42,6 +42,8 @@
   ]);
   filterSync.init($page.url);
 
+  export let showHeader = true;
+
   let isConfirmDialogOpen = false;
   let filterDropdownOpen = false;
   let statusDropdownOpen = false;
@@ -73,9 +75,10 @@
 
   type StatusFilter = { label: string; value: string };
   const statusFilters: StatusFilter[] = [
-    { label: "Error", value: "error" },
-    { label: "Warn", value: "warn" },
     { label: "OK", value: "ok" },
+    { label: "Pending", value: "pending" },
+    { label: "Warning", value: "warning" },
+    { label: "Errored", value: "errored" },
   ];
 
   // Resource types available for filtering (excluding internal types)
@@ -157,7 +160,9 @@
 </script>
 
 <section class="flex flex-col gap-y-4">
-  <h2 class="text-lg font-medium">Resources</h2>
+  {#if showHeader}
+    <h2 class="text-lg font-medium">Resources</h2>
+  {/if}
 
   <!-- Search, Filter, and Action Controls -->
   <div class="flex flex-row items-center gap-x-4 min-h-9">

web-admin/src/features/projects/status/resource-table/utils.spec.ts

@@ -26,25 +26,32 @@ function makeResource(
 }
 
 describe("getResourceStatus", () => {
-  it("returns 'error' when resource has reconcileError", () => {
+  it("returns 'errored' when resource has reconcileError", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileError: "something broke",
     });
-    expect(getResourceStatus(r)).toBe("error");
+    expect(getResourceStatus(r)).toBe("errored");
   });
 
-  it("returns 'warn' for PENDING status", () => {
+  it("returns 'warning' for test-only failures", () => {
+    const r = makeResource(ResourceKind.Model, "m1", {
+      reconcileError: "tests failed: some test",
+    });
+    expect(getResourceStatus(r)).toBe("warning");
+  });
+
+  it("returns 'pending' for PENDING status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_PENDING,
     });
-    expect(getResourceStatus(r)).toBe("warn");
+    expect(getResourceStatus(r)).toBe("pending");
   });
 
-  it("returns 'warn' for RUNNING status", () => {
+  it("returns 'pending' for RUNNING status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_RUNNING,
     });
-    expect(getResourceStatus(r)).toBe("warn");
+    expect(getResourceStatus(r)).toBe("pending");
   });
 
   it("returns 'ok' for IDLE status", () => {
@@ -61,12 +68,12 @@ describe("getResourceStatus", () => {
     expect(getResourceStatus(r)).toBe("ok");
   });
 
-  it("error takes priority over warn status", () => {
+  it("error takes priority over pending status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileError: "error msg",
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_RUNNING,
     });
-    expect(getResourceStatus(r)).toBe("error");
+    expect(getResourceStatus(r)).toBe("errored");
   });
 });
 
@@ -115,14 +122,14 @@ describe("filterResources", () => {
     expect(result[0].meta?.name?.name).toBe("my_model");
   });
 
-  it("filters by status 'error'", () => {
-    const result = filterResources(resources, [], "", ["error"]);
+  it("filters by status 'errored'", () => {
+    const result = filterResources(resources, [], "", ["errored"]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("errored_model");
   });
 
-  it("filters by status 'warn'", () => {
-    const result = filterResources(resources, [], "", ["warn"]);
+  it("filters by status 'pending'", () => {
+    const result = filterResources(resources, [], "", ["pending"]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("my_metrics");
   });
@@ -134,7 +141,7 @@ describe("filterResources", () => {
 
   it("combines kind + status + search filters", () => {
     const result = filterResources(resources, [ResourceKind.Model], "errored", [
-      "error",
+      "errored",
     ]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("errored_model");

web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte

@@ -6,7 +6,6 @@
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
 
   $: basePage = `/${$page.params.organization}/${$page.params.project}/-/status`;
-
   const navItems = [
     {
       label: "Overview",
@@ -17,6 +16,7 @@
       label: "Resources",
       route: "/resources",
       hasPermission: true,
+      matchPrefix: true,
     },
     {
       label: "Tables",