feat: add stacking to network by ogzhanolguncu · Pull Request #5316

feat: add stacking to network by ogzhanolguncu · Pull Request #5316 · unkeyed/unkey

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b5205ffc-2d4d-4711-84c8-993c291e7d8a

📥 Commits

Reviewing files that changed from the base of the PR and between 4f1417a and 542332d.

📒 Files selected for processing (1)

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx

📝 Walkthrough

Walkthrough

Adds client-side sentinel collapse state with one-time auto-collapse, memoized visible-tree and sentinelChildrenMap, stacked-instance rendering for collapsed sentinels, a unified renderDeploymentNode callback, and new node sizing/collapse constants plus updated node component APIs.

Changes

Cohort / File(s)	Summary
Deployment view `web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx`	Introduces `collapsedSentinelIds` state, `hasAutoCollapsed` ref, `toggleSentinel`, one-time auto-collapse (`computeAutoCollapsedSentinels`), `visibleTree` and `sentinelChildrenMap` memoization, and replaces the previous render helper with a `useCallback` `renderDeploymentNode`.
Node exports & types `web/apps/dashboard/.../network/unkey-flow/components/nodes/index.ts`, `web/apps/dashboard/.../nodes/types.ts`	Exports added: `COLLAPSE_THRESHOLD`, `DEFAULT_NODE_HEIGHT`, `DEFAULT_NODE_WIDTH`, and type exports `InstanceNode`/`OriginNode`. Replaced hard-coded node heights with `DEFAULT_NODE_HEIGHT` and exposed collapse threshold.
Instance node `web/apps/dashboard/.../nodes/instance-node.tsx`	`InstanceNode` props now include optional `stacked?: boolean`; RPS query is disabled when `stacked` is true, and `showBanner` is passed as `!stacked`.
Node wrapper & health banner `web/apps/dashboard/.../nodes/node-wrapper/node-wrapper.tsx`, `web/apps/dashboard/.../nodes/node-wrapper/health-banner.tsx`	`NodeWrapper` gains optional `showBanner?: boolean` (defaults true) and conditionally renders `HealthBanner`. `HealthBanner` layout adjusted to full-width with updated margins (removed dependence on `DEFAULT_NODE_WIDTH` for container classes).
Sentinel node `web/apps/dashboard/.../nodes/sentinel-node.tsx`	`SentinelNode` props now accept `isCollapsed?: boolean` and `onToggleCollapse?: () => void`; reads `instances` from `node.metadata` and renders a collapse toggle when instance count > `COLLAPSE_THRESHOLD`.
Skeleton node `web/apps/dashboard/.../nodes/skeleton-node/skeleton-node.tsx`	Skeleton node now uses inline styles driven by `DEFAULT_NODE_WIDTH`/`DEFAULT_NODE_HEIGHT` instead of fixed Tailwind width/height utility classes.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant UI as DeploymentNetworkView
    participant State as ReactState
    participant Layout as TreeLayout
    participant Sentinel as SentinelNode

    User->>UI: click collapse toggle
    UI->>State: toggleSentinel(sentinelId)
    State->>State: update collapsedSentinelIds / hasAutoCollapsed
    State-->>UI: re-render
    UI->>UI: compute visibleTree & sentinelChildrenMap (useMemo)
    UI->>Layout: render with visibleTree & renderDeploymentNode
    Layout->>Sentinel: render with isCollapsed & onToggleCollapse
    Sentinel->>UI: invoke onToggleCollapse when toggled

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete and does not follow the required template. It lacks the structured format with issue reference, type of change checkboxes, testing instructions, and required checklist items.	Complete the PR description using the required template: add issue reference, select change type, describe testing procedure, and complete all required checklist items.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding stacking functionality to the network view feature.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch add-stacking-to-network-view

📝 Coding Plan

Generate coding plan for human review comments

_{Comment @coderabbitai help to get the list of available commands and usage tips.}