Skip to content

refactor(dashboard): decommission the Graph view (Vue Flow node canvas) (#1689) - #1701

Merged
vybe merged 1 commit into
devfrom
refactor/1689-remove-dashboard-graph-view
Jul 20, 2026
Merged

vybe merged 1 commit into
devfrom
refactor/1689-remove-dashboard-graph-view

Conversation

@dolho

@dolho dolho commented Jul 20, 2026 •

Copy link
Copy Markdown
Contributor

What

Removes the dashboard's Graph mode (the legacy Vue Flow node canvas). Grid (magnetic tile canvas) and Timeline (default) cover fleet overview; Graph was a parallel render path (drag/positions, fit-view, reset-layout) plus four @vue-flow/* deps that no longer earned their upkeep.

Acceptance criteria — all met

  • Mode toggle offers only Grid / Timeline; all viewMode === 'graph' branches removed from Dashboard.vue (graph canvas, graph-only Reset Layout button, on-load fitView).
  • 'graph' removed from VIEW_MODES in network.js; node-position persistence removed (nodePositions, save/load/reset, onNodeDragStop + exports). setViewMode's invalid-mode fallback flipped 'graph' → 'timeline'. Shared state (working state, circuit-breaker map, the nodes computed Timeline consumes) preserved.
  • A persisted 'graph' preference degrades gracefully to the default — the VIEW_MODES.includes() guard at init and in setViewMode both route it to timeline (no error, no blank canvas).
  • AgentNode.vue + SystemAgentNode.vue deleted (Graph was their only consumer — verified). Also deleted TagClouds.vue (the graph-canvas viewport tag-cloud layer, likewise orphaned).
  • All four @vue-flow/* removed from package.json; package-lock.json regenerated so npm ci stays consistent. No @vue-flow import remains anywhere.
  • e2e updated (dashboard-grid-view.spec.js): the graph-mode assertions are gone; the smoke test now covers Grid↔Timeline coexistence.
  • Docs updated: architecture.md (dropped the Vue Flow tech-stack entry; dashboard modes now Grid/Timeline; rewrote the stale "Collaboration Dashboard" entry, which named a non-existent AgentCollaboration.vue) + the dashboard-grid-view feature flow.

Notes

  • ReplayTimeline stays (Timeline-mode replay, explicitly out of scope). It builds its lane tiles from the shared nodes computed's node.data (display_label, is_system, autonomy, avatar) — so the nodes machinery is kept; only the graph-only position/draggable persistence is removed (positions default, unrendered).
  • The Collaboration data (X-Source-Agent detection, agent_collaboration WS events) still flows and feeds Timeline — only the Vue Flow node-graph rendering is gone.

Verification

All touched SFCs compile via @vue/compiler-sfc; network.js passes node --check; grep confirms 0 @vue-flow imports (package.json + lockfile both clean). Verified against the live stack: dashboard returns 200, the Vite-served network.js shows VIEW_MODES = ['grid', 'timeline'], and the Vite-transformed Dashboard.vue has 0 graph imports.

(Frontend build/e2e run in CI — node_modules here is root-owned from the Docker build, so npm ci + the Playwright suite are the mechanical gate.)

Related to #1689

🤖 Generated with Claude Code

Fixes #1689

…s) (#1689)

The dashboard's Grid (magnetic tile canvas) and Timeline (default) modes cover
fleet-overview needs; the legacy Graph mode was a parallel Vue Flow render path
(drag/positions, fit-view, reset-layout) plus four @vue-flow/* deps that no
longer earned their upkeep.

Dashboard.vue:
- Mode toggle offers only Grid / Timeline; removed the graph canvas block
  (VueFlow + Background/Controls/MiniMap + AgentNode/SystemAgentNode + the
  TagClouds viewport layer + the collaboration-history button/panel), the
  graph-only Reset Layout button, the Tag Clouds toggle, the on-load fitView,
  resetLayout/onNodeDragStop handlers, useVueFlow(), and all vue-flow CSS +
  style/CSS imports. Timeline/Grid shared state (header stats, quick-tag
  filter, gridAgents, nodes) preserved.

network.js:
- 'graph' removed from VIEW_MODES (now ['grid','timeline']); a persisted
  'graph' preference degrades to the default (timeline) via the existing
  VIEW_MODES.includes() guard at init AND setViewMode's fallback (was 'graph'
  → now 'timeline'). setReplayMode's non-timeline target → 'grid'.
- Removed node-position persistence (nodePositions ref, saveNodePositions,
  loadNodePositions, resetNodePositions, onNodeDragStop + their exports). The
  `nodes` computed STAYS — Timeline builds its lane tiles from node.data
  (display_label, is_system, autonomy, avatar); only the graph-only
  position/draggable persistence is gone (positions default, unrendered).

Deletions + deps:
- Deleted components/AgentNode.vue, SystemAgentNode.vue, TagClouds.vue (Graph
  was their only consumer — verified no other importer).
- Removed all four @vue-flow/* from package.json; regenerated package-lock.json
  (--package-lock-only) so npm ci stays consistent.

Tests + docs:
- Updated the frontend e2e (dashboard-grid-view.spec.js): the graph-mode step
  is gone; the smoke test now asserts Grid↔Timeline coexistence.
- architecture.md (dropped the Vue Flow tech-stack entry; dashboard modes now
  Grid/Timeline; rewrote the stale "Collaboration Dashboard" entry that named a
  non-existent AgentCollaboration.vue) + the dashboard-grid-view feature flow.

All touched SFCs compile via @vue/compiler-sfc; network.js passes node --check;
no @vue-flow import remains anywhere (package.json + lockfile both clean).
Verified live: dashboard 200, VIEW_MODES=['grid','timeline'] served, 0 graph
imports in the Vite-transformed Dashboard.

Related to #1689
@dolho
dolho requested a review from vybe July 20, 2026 10:25

@vybe vybe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Validated via /validate-pr: grepped the head branch for every dangling reference — zero hits for AgentNode/SystemAgentNode/TagClouds, the removed store functions (saveNodePositions/loadNodePositions/resetNodePositions/onNodeDragStop), any @vue-flow/* import, and any remaining 'graph' literal. Stale localStorage['trinity-dashboard-view'] = 'graph' degrades to timeline via the VIEW_MODES.includes() guard, and the invalid-mode fallback in setViewMode moved off 'graph'. e2e green. All ACs met.

Minor (non-blocking, follow-up): getNodeColor() in Dashboard.vue is now dead — its only consumer was the Vue Flow MiniMap.

@vybe
vybe merged commit 9f766d1 into dev Jul 20, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants