feat: nit dag changes

[royendo]

idea is to change a bit of the behavior to prep for Rill Cloud Integration
https://www.loom.com/share/f21f8e222af24cc78f843d87d0611d0e

• instead of Click opening blue Open

• add dropdown to each node,

  • edit file
  • Refresh (models)
  • view Lineage Or Tree

• doesnt show for overlays.

• adds canvas as a component

Checklist:

• Covered by tests
• Ran it and it works as intended
• Reviewed the diff before requesting a review
• Checked for unhandled edge cases
• Linked the issues it closes
• Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
• Intend to cherry-pick into the release branch
• I'm proud of this work!

[royendo]

Code Review - DAG Nit Behavioral Fixes

Good UX improvements with the dropdown menu replacing the old toolbar. Here's my feedback:

Issues to Address

1. ResourceNode.svelte - Code duplication
The node markup is duplicated for error vs non-error cases (lines ~134-230 and ~240-330). This makes maintenance harder. Consider extracting the common parts:

<!-- Common node wrapper -->
{#snippet nodeContent()}
  <Handle ... />
  <Handle ... />
  {#if !isInOverlay}
    <div class="node-menu">...</div>
  {/if}
  <div class="icon-wrapper">...</div>
  <div class="details">...</div>
{/snippet}

{#if hasError}
  <Tooltip>
    <div class="node" ...>
      {@render nodeContent()}
    </div>
    <TooltipContent>...</TooltipContent>
  </Tooltip>
{:else}
  <div class="node" ...>
    {@render nodeContent()}
  </div>
{/if}

2. ResourceNode.svelte - Import formatting (line ~17)

import { GitFork } from "lucide-svelte";
  import { builderActions, getAttrs } from "bits-ui";

The GitFork import has inconsistent indentation.

3. ResourceNode.svelte - Unused import
NodeToolbar is still in the imports but was removed from usage. Clean this up.

4. ResourceNode.svelte - handleRefresh doesn't show feedback

function handleRefresh(e?: MouseEvent) {
    e?.stopPropagation();
    if (!isModel || !data?.resource?.meta?.name?.name) return;
    void $triggerMutation.mutateAsync({...});
}

Consider adding loading state or toast notification so users know the refresh was triggered.

5. GraphCanvas.svelte - Global CSS selector

:global(.svelte-flow .svelte-flow__pane) {
    background-color: var(--surface-background, #ffffff);
}

This could unintentionally affect other xyflow instances in the app. Consider scoping it more specifically or using a data attribute.

Minor Suggestions

• The icon size changed from 20px to 16px in the node - was this intentional?
• Consider memoizing handleViewGraph since it accesses reactive stores

Otherwise the dropdown approach is much cleaner than the old toolbar!

[royendo]

1. Code Duplication - I'd recommend accepting the duplication as a Svelte 4 limitation. The differences between the two branches are:

Error case wraps in with error tooltip content
Error case always shows status, non-error only shows if effectiveStatusLabel is truthy
Extracting to a child component would add complexity (passing many props, handling slots) for minimal benefit. The duplication is easy to maintain since changes are typically made to both blocks together.

2. Icon Size (16px) - This is intentional for the compact dropdown-based design. The node itself is more compact now, so smaller icons fit better.

3. handleViewGraph - Correct, no memoization needed. It's an event handler that reads current reactive values at click time, not a computed value that needs caching.