feat: collapsible react flow #621
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughThis update introduces a collapsible tree context for resource relationship visualization, restructures the relationships diagram to consume context-based state, and simplifies the layout logic by removing focused node centering. Several new hooks, types, and components are added, while sidebar and status logic is modularized or refactored for clarity and maintainability. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageContent
participant CollapsibleTreeProvider
participant RelationshipsDiagram
participant SystemStatus
User->>PageContent: Load with focusedResource, resources, edges
PageContent->>CollapsibleTreeProvider: Provide context (resources, edges, focusedResource)
CollapsibleTreeProvider->>RelationshipsDiagram: Provide nodes, edges, expand/collapse handlers
RelationshipsDiagram->>SystemStatus: For each node, show system job status
User->>RelationshipsDiagram: Expand/collapse resource nodes
RelationshipsDiagram->>CollapsibleTreeProvider: Update expanded/collapsed state
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/webservice/src/app/[workspaceSlug]/(app)/_components/reactflow/layout.ts(2 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/CollapsibleTreeContext.tsx(1 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/PageContent.tsx(1 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/RelationshipsDiagram.tsx(3 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/page.tsx(2 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/ResourceNode.tsx(1 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/SystemStatus.tsx(1 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/useResourceCollapsibleToggle.ts(1 hunks)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
⚙️ CodeRabbit Configuration File
**/*.{js,jsx,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*.{js,jsx,ts,tsx,json,css,md,yml,yaml}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (10)
📓 Common learnings
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#601
File: e2e/tests/api/policies/retry-policy.spec.ts:23-24
Timestamp: 2025-06-24T23:52:50.732Z
Learning: The user adityachoudhari26 prefers not to add null safety checks or defensive programming in test code, particularly in e2e tests, as they prioritize simplicity and focus on the main functionality being tested rather than comprehensive error handling within the test itself.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#601
File: e2e/tests/api/policies/retry-policy.spec.ts:117-130
Timestamp: 2025-06-24T23:53:25.398Z
Learning: User adityachoudhari26 prefers to keep non-null assertions in e2e test code without extensive null safety checks, reasoning that test failures serve the same purpose of catching issues and the extra validation doesn't add much value in test contexts.
apps/webservice/src/app/[workspaceSlug]/(app)/_components/reactflow/layout.ts (2)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#183
File: apps/webservice/src/app/[workspaceSlug]/_components/environment-drawer/Overview.tsx:46-57
Timestamp: 2024-10-30T00:03:57.878Z
Learning: Accessibility and validation feedback improvements are not desired for form fields in the `Overview` component within `apps/webservice/src/app/[workspaceSlug]/_components/environment-drawer/Overview.tsx`.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/page.tsx (4)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#237
File: apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx:43-50
Timestamp: 2024-11-27T23:16:35.580Z
Learning: In `DeploymentResourceDrawer.tsx`, the `isOpen` variable already checks whether `deploymentId`, `environmentId`, and `resourceId` are non-null, so additional null checks in query `enabled` conditions are not necessary.
Learnt from: zacharyblasczyk
PR: ctrlplanedev/ctrlplane#363
File: apps/webservice/tsconfig.json:14-15
Timestamp: 2025-03-09T08:56:53.603Z
Learning: In the ctrlplane project, they use Next.js standalone output mode, which means they intentionally exclude `.next/types` in their tsconfig.json despite including `.next/types/**/*.ts` in their include pattern.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/ResourceNode.tsx (2)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#237
File: apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx:43-50
Timestamp: 2024-11-27T23:16:35.580Z
Learning: In `DeploymentResourceDrawer.tsx`, the `isOpen` variable already checks whether `deploymentId`, `environmentId`, and `resourceId` are non-null, so additional null checks in query `enabled` conditions are not necessary.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/SystemStatus.tsx (3)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#287
File: packages/validators/src/jobs/conditions/status-condition.ts:4-4
Timestamp: 2025-01-21T19:52:22.838Z
Learning: In apps/webservice/src/app/api/github/webhook/workflow/handler.ts, the external "completed" status is intentionally mapped to JobStatus.Successful to handle GitHub workflow status conversions.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#237
File: apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx:43-50
Timestamp: 2024-11-27T23:16:35.580Z
Learning: In `DeploymentResourceDrawer.tsx`, the `isOpen` variable already checks whether `deploymentId`, `environmentId`, and `resourceId` are non-null, so additional null checks in query `enabled` conditions are not necessary.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/types.ts (3)
Learnt from: CR
PR: ctrlplanedev/ctrlplane#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T21:36:42.935Z
Learning: Applies to **/*.{ts,tsx} : Consistent type imports: `import type { Type } from "module"`
Learnt from: CR
PR: ctrlplanedev/ctrlplane#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T21:36:42.935Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript with explicit types (prefer interfaces for public APIs)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/PageContent.tsx (2)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/RelationshipsDiagram.tsx (3)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#237
File: apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx:43-50
Timestamp: 2024-11-27T23:16:35.580Z
Learning: In `DeploymentResourceDrawer.tsx`, the `isOpen` variable already checks whether `deploymentId`, `environmentId`, and `resourceId` are non-null, so additional null checks in query `enabled` conditions are not necessary.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/useResourceCollapsibleToggle.ts (2)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#237
File: apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx:43-50
Timestamp: 2024-11-27T23:16:35.580Z
Learning: In `DeploymentResourceDrawer.tsx`, the `isOpen` variable already checks whether `deploymentId`, `environmentId`, and `resourceId` are non-null, so additional null checks in query `enabled` conditions are not necessary.
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#188
File: apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx:42-44
Timestamp: 2024-11-01T02:35:07.352Z
Learning: In `apps/webservice/src/app/[workspaceSlug]/_components/release-channel-drawer/Usage.tsx`, within the `Usage` component, the arrays used for filtering inherited environments are expected to remain small. Therefore, performance optimizations for this filtering logic are not necessary.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/CollapsibleTreeContext.tsx (1)
Learnt from: adityachoudhari26
PR: ctrlplanedev/ctrlplane#165
File: apps/webservice/src/app/[workspaceSlug]/_components/relationships/RelationshipsDiagramDependencies.tsx:185-189
Timestamp: 2024-10-24T21:31:17.820Z
Learning: In `RelationshipsDiagramDependencies.tsx`, when using React Flow's `BaseEdge`, the `markerStart` prop may intentionally use the `markerEnd` value to flip the arrow direction because 'source depends on target' logic is applied. These are intrinsic attributes of the React Flow `BaseEdge` component and cannot be renamed or changed.
🧬 Code Graph Analysis (4)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/SystemStatus.tsx (3)
packages/db/src/schema/job.ts (1)
JobStatus(149-149)packages/validators/src/jobs/index.ts (2)
failedStatuses(54-59)activeStatus(32-32)packages/ui/src/skeleton.tsx (1)
Skeleton(15-15)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/types.ts (2)
packages/api/src/index.ts (1)
RouterOutputs(33-33)packages/db/src/schema/resource-relationship-rule.ts (1)
ResourceRelationshipRule(232-233)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/RelationshipsDiagram.tsx (1)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/CollapsibleTreeContext.tsx (1)
useCollapsibleTree(43-51)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/useResourceCollapsibleToggle.ts (2)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/types.ts (1)
Edge(9-13)apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/CollapsibleTreeContext.tsx (1)
useCollapsibleTree(43-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build (linux/amd64)
- GitHub Check: Typecheck
- GitHub Check: Lint
🔇 Additional comments (15)
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/types.ts (1)
1-13: LGTM! Well-structured type definitions.The type definitions follow TypeScript best practices with proper
import typesyntax and efficient use of indexed access types to extract nested structures. TheEdgetype clearly defines the relationship structure with appropriate schema references.apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/page.tsx (2)
5-5: LGTM! Clean import addition.The import follows the established pattern and supports the architectural refactoring.
32-36: LGTM! Excellent refactoring to centralize layout logic.The simplification from multiple sidebar components to a single
PageContentcomponent improves maintainability and follows the single responsibility principle. The props being passed match the expected data structure.apps/webservice/src/app/[workspaceSlug]/(app)/_components/reactflow/layout.ts (3)
61-61: LGTM! Dual position assignment for React Flow compatibility.The assignment of both direct
x, yproperties and nestedpositionobject appears intentional for React Flow compatibility, supporting the new collapsible tree architecture.
110-112: LGTM! Configurable fitView parameters.The configurable padding and maxZoom parameters provide better control over the view fitting behavior, with reasonable defaults.
115-115: LGTM! Correct dependency update.The addition of
configto the useEffect dependencies is correct and prevents stale closures.apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/ResourceNode.tsx (4)
13-17: LGTM! Good import organization.The imports are well-organized with proper type imports and the new modular components support the improved architecture.
19-25: LGTM! Clean integration of collapsible toggle functionality.The NodeHeader component cleanly integrates the collapsible toggle hook, following the new context-driven architecture.
40-57: LGTM! Intuitive expand/collapse UI logic.The conditional rendering of expand/collapse buttons based on hidden children count provides a clear and intuitive user experience. The logic correctly handles both states.
118-118: LGTM! Good separation of concerns.The extraction of SystemStatus to its own component improves modularity and maintainability.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/useResourceCollapsibleToggle.ts (3)
4-7: LGTM! Correct edge filtering for direct children.The function correctly identifies direct children by filtering edges where the resource is the target.
9-23: LGTM! Proper BFS implementation for descendants.The breadth-first search implementation correctly finds all descendants using a queue and Set for visited tracking. The algorithm handles the graph traversal properly.
25-49: LGTM! Well-structured hook with clear logic.The hook provides a clean interface for managing collapsible state with proper integration of the context. The expand/collapse logic is intuitive - expand shows hidden direct children, collapse removes all descendants.
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/RelationshipsDiagram.tsx (1)
36-52: Clean refactor to use context-based state management.The migration from local state to context-based state management via
useCollapsibleTreeis well executed. The component is now more focused and delegates graph state management appropriately.apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/CollapsibleTreeContext.tsx (1)
156-168: Correct implementation of edge reversal pattern.The source/target reversal is properly implemented and well-documented. This aligns with the established pattern where the target represents the parent in ctrlplane's relationship model.
Comment on lines
+66
to
+68
| const statuses = (data ?? []).map((d) => d.status); | ||
| const { numSuccessful, Icon } = getStatusInfo( | ||
| statuses as (JobStatus | null)[], |
Contributor
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify if the type assertion is necessary.
The type assertion as (JobStatus | null)[] on line 68 might be redundant if the TRPC query response is properly typed. Consider verifying the API response type definition to ensure type safety without explicit assertions.
🏁 Script executed:
#!/bin/bash
# Description: Check the API response type for systemOverview query
# Search for the systemOverview query definition
ast-grep --pattern 'systemOverview: $_'
# Also search with ripgrep for broader context
rg -A 10 "systemOverview.*useQuery|systemOverview.*query" --type tsLength of output: 1699
🏁 Script executed:
#!/bin/bash
# Search for the systemOverview procedure definition in TRPC routers
rg -n "systemOverview" --type tsLength of output: 311
🏁 Script executed:
#!/bin/bash
# Show the definition and return type of resourceSystemOverview
rg -n "resourceSystemOverview" -A5 -B5 packages/api/src/router/resource/resources.tsLength of output: 1099
🏁 Script executed:
#!/bin/bash
# Show the definition and resourceSystemOverview procedure including its return type
rg -n "export const resourceSystemOverview" -A20 -B5 packages/api/src/router/resource/resource-system-overview.tsLength of output: 989
🏁 Script executed:
#!/bin/bash
# Print the implementation of resourceSystemOverview to inspect its return type
sed -n '1,200p' packages/api/src/router/resource/resource-system-overview.tsLength of output: 2223
Remove unnecessary type assertion on statuses
The TRPC systemOverview query already returns items typed as { status: JobStatus | null }[], so this cast is redundant. You can safely drop the as (JobStatus | null)[] on line 68.
• apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/SystemStatus.tsx:68
🤖 Prompt for AI Agents
In
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/resource-node/SystemStatus.tsx
around lines 66 to 68, remove the unnecessary type assertion "as (JobStatus |
null)[]" on the "statuses" variable passed to getStatusInfo, since the TRPC
systemOverview query already types the data correctly. Simply pass "statuses"
without casting.
| defaultOpen={[]} | ||
| > | ||
| <div className="relative flex h-full w-full"> | ||
| <SidebarInset className="h-[calc(100vh-56px-64px-2px)] min-w-0"> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded height calculation with a more maintainable approach.
The height calculation h-[calc(100vh-56px-64px-2px)] uses magic numbers that could break if UI element heights change. Consider using CSS variables or a flexbox/grid layout that automatically adjusts to available space.
- <SidebarInset className="h-[calc(100vh-56px-64px-2px)] min-w-0">
+ <SidebarInset className="flex-1 min-h-0 min-w-0">Additionally, ensure the parent container uses flex flex-col h-full to enable proper height distribution.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <SidebarInset className="h-[calc(100vh-56px-64px-2px)] min-w-0"> | |
| <SidebarInset className="flex-1 min-h-0 min-w-0"> |
🤖 Prompt for AI Agents
In
apps/webservice/src/app/[workspaceSlug]/(app)/resources/(raw)/[resourceId]/visualize/PageContent.tsx
at line 39, replace the hardcoded height calculation
h-[calc(100vh-56px-64px-2px)] with a more maintainable layout using flexbox or
grid. Remove the fixed height and instead ensure the parent container uses flex
flex-col h-full to allow the SidebarInset component to automatically fill the
available space without relying on magic numbers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Refactor
Bug Fixes