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

[royendo]

https://www.loom.com/share/69c90f1c41df4781bfae51fb63b1966a

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 am 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.

[royendo]

A few follow up items discussed with Di once this is in

• in Cloud; reorganize the top navbar for both table and DAG:
• Move refresh all resources to inline with Resources
  [Filter Icon]. [pills .]xxxxxxxxxxxxx [mag icon] [list/graph]

collapse all filters into a dropdown like linear
Type
Source
Model
...
Status
OK
Warning
Pending
Errored
Isolated
True
False

[Di7design]

The functionality is approved. The filter bar will be in another PR, and the information box needs more design work later.

[begelundmuller]

I don't think this flattening of the DAG into the canvas' refs inside the parser is justified just for UI convenience. It has negative implications various other places, such as how the DAG is reported to AI and how reconciles get scheduled.

If needed, I suggest resolving this on the fly inside the DAG UI code instead.

[royendo]

hm, i wonder the performance implications of this (will poke around), i was actually going to pull out the backend code out of this PR (to bring it lines changed down) but sounds like we dont want to do this at all?

[royendo]

Oh Linear isnt synced weird:

hm, i wonder the performance implications of this (will poke around), i was actually going to pull out the backend code out of this PR (to bring it lines changed down) but sounds like we dont want to do this at all?

[begelundmuller]

The remaining backend changes are no-ops (same behavior as before) as far as I can tell, so would prefer no diff at all then on the backend.