Skip to content

Add computeProjectsView, as an overview of projects and their relationships#2520

Merged
davydkov merged 13 commits intomainfrom
compute-projects-view
Dec 28, 2025
Merged

Add computeProjectsView, as an overview of projects and their relationships#2520
davydkov merged 13 commits intomainfrom
compute-projects-view

Conversation

@davydkov
Copy link
Copy Markdown
Member

@davydkov davydkov commented Dec 28, 2025

Summary by CodeRabbit

  • New Features

    • Added projects overview feature to visualize project relationships and dependencies
    • Extended JSON export with --pretty (indented output) and --skip-layout (computed models only) options
    • Introduced dedicated projects overview page in the app UI
  • Bug Fixes

    • Fixed view computation with groups to properly handle imported elements without relationships

✏️ Tip: You can customize this high-level summary in your review settings.

davydkov and others added 13 commits December 22, 2025 04:37
… relationships

- Added ProjectsViewPrinter class to generate DOT representation of project views.
- Introduced tests for ProjectsViewPrinter to validate output with and without relationships.
- Updated buildCompounds function to accept ReadonlyArray for actors and nodes.
- Modified dotCodegenAction to await computedModel for accurate model retrieval.
- Created snapshot files for various project view scenarios including no relationships, tile layout, and two-directional relationships.
- Refactor DotPrinter to use generic types for nodes and edges, improving type safety.
- Update GraphvizParser to accept ComputedView directly, simplifying the parsing logic.
- Modify ProjectsViewPrinter to accommodate new project-specific attributes and improve layout logic.
- Adjust snapshots for ProjectsViewPrinter to reflect changes in node and edge attributes.
- Introduce new types for project edges and nodes in the graphviz module.
- Add tests for layout functionality in the GraphvizWasmAdapter, ensuring correct project view rendering.
- Added types for projects overview in _types.ts.
- Created actor logic for managing projects overview state in actor.ts.
- Introduced context for accessing the projects overview actor in context.ts.
- Developed custom edge and node types for the diagram in edgeTypes.tsx and nodeTypes.tsx.
- Implemented styles for empty nodes in styles.css.ts.
- Created hooks for accessing projects overview state and XYFlow instance in hooks.ts.
- Added main entry point for projects overview in index.ts.
- Implemented layout conversion from layouted projects view to XYFlow in layouted-to-xyflow.ts.
- Added persistence for viewport state in persistence.ts.
- Updated LikeC4ProjectsContext to use new projects overview functionality.
- Refactored routes to integrate projects overview page.
- Added virtual module for projects overview in vite-plugin.
- Updated package dependencies and workspace configuration.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Dec 28, 2025

🦋 Changeset detected

Latest commit: a63a42c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@likec4/core Major
@likec4/diagram Major
@likec4/language-server Major
likec4 Major
@likec4/playground Patch
@likec4/style-preset Major
@likec4/config Major
@likec4/generators Major
@likec4/layouts Major
@likec4/mcp Major
likec4-vscode Major
@likec4/styles Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@davydkov davydkov merged commit 82eb82c into main Dec 28, 2025
12 of 13 checks passed
@davydkov davydkov deleted the compute-projects-view branch December 28, 2025 06:19
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Dec 28, 2025

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The PR introduces multi-project support with a new computeProjectsView feature for visualizing project relationships, renames diagram event handlers from onBurgerMenuClick to onLogoClick, extends CLI export-to-JSON with --pretty and --skip-layout options, and adds projects overview UI components with routing.

Changes

Cohort / File(s) Summary
Changesets
.changeset/*
Four changeset entries document: new computeProjectsView export (minor @likec4/core), onBurgerMenuClickonLogoClick rename (minor @likec4/diagram), groups view relation fix (patch @likec4/core), and multi-project export-to-JSON CLI options (minor @likec4/language-server, likec4)
Projects View Computation
packages/core/src/compute-view/projects-view/*
New module: compute.ts exports computeProjectsView() and buildNodesForEachModel() to create inter-project edge graphs; _types.ts defines ComputedProjectNode, ComputedProjectEdge, ComputedProjectsView and layouted variants; comprehensive test suite compute.spec.ts validates multi-project scenarios
Core Type Refinements
packages/core/src/types/view-*.ts, packages/core/src/compute-view/utils/*
Relaxed nodes/edges from mutable arrays to ReadonlyArray across BaseComputedViewProperties, BaseLayoutedViewProperties, ViewManualLayoutSnapshot; generalized utility functions (ancestorsOfNode, buildElementNotations, linkNodesWithEdges, topologicalSort) with additional type parameters for flexible node/edge subtypes
Builder Multi-Project Support
packages/core/src/builder/Builder.ts, packages/core/src/builder/Builder-style2.*
Added per-project imports map and cross-project element references; extended build() and toLikeC4Model() to accept optional projectId; new overloads for project-scoped generics; refactored element/relation creation to honor imports and prevent invalid cross-project relationships
Element & View Model Accessors
packages/core/src/model/ElementModel.ts, packages/core/src/model/DeploymentModel.ts, packages/core/src/model/view/LikeC4ViewModel.ts
Added new projectId getter to ElementModel, DeploymentModel, and LikeC4ViewModel exposing parent model's project scope; made imported fields readonly
Wildcard Predicate & Group Handling
packages/core/src/compute-view/element-view/predicates/wildcard.ts, packages/core/src/compute-view/element-view/predicates/__test__/wildcard.spec.ts, packages/core/src/compute-view/element-view/compute.ts
Refactored wildcard handling to partition root elements into project vs. imported; new internal process_predicates() with public wrapper; expanded tests for cross-project import scenarios with wildcard includes
Diagram Event Handler Rename
packages/diagram/src/LikeC4Diagram*.tsx, packages/diagram/src/LikeC4Diagram.props.ts, packages/diagram/src/context/DiagramEventHandlers.tsx
Renamed onBurgerMenuClickonLogoClick across component props, handlers, and context; updated DiagramEventHandlers to reflect new key
Projects Overview Components
packages/diagram/src/projects-overview/*
New feature: ProjectsOverview component with state-machine actor (actor.ts), React Flow integration (ProjectsOverviewXY.tsx), custom node/edge renderers, viewport persistence, navigation hooks, and panel UI; includes types and layout conversion utilities
Element Node Styling Refactor
packages/diagram/src/base-primitives/element/ElementNodeContainer.tsx, styled-system/preset/src/recipes/elementNode.ts
Removed CSS module container, replaced with recipe-based elementNode() class; new recipe in styled-system with base styles, selectability conditions, and responsive behavior
Navigation Panel Styling
packages/diagram/src/components/NavigationPanel.tsx, styled-system/preset/src/stot-recipes/navigationPanel.ts
New NavigationPanel compound component with slot recipe styling (root, body, logo, label, dropdown); LogoButton replaces BurgerButton in controls
Diagram Props & Misc
packages/diagram/src/LikeC4ProjectsOverview.tsx, packages/diagram/src/base-primitives/compound/CompoundNodeContainer.tsx, packages/diagram/src/index.ts, packages/diagram/src/likec4diagram/DiagramXYFlow.tsx
New LikeC4ProjectsOverview component and props type; updated CompoundNodeContainer props from motion-specific to plain HTMLAttributes; added zIndexMode="manual" to XYFlow; new public exports for projects-related hooks and components
Language Server Multi-Project APIs
packages/language-server/src/LikeC4LanguageServices.ts, packages/language-server/src/model/model-builder.ts
Replaced DiagramView with LayoutedView; added projectsOverview() method; new computedModel(project?) and layoutedModel(project?) async methods; refactored model-building pipeline to separate parsing data retrieval from model construction; added manualLayouts parameter to compute flow
Graphviz Printer Generalization
packages/layouts/src/graphviz/DotPrinter.ts, packages/layouts/src/graphviz/*ViewPrinter.ts, packages/layouts/src/graphviz/types.ts
Simplified DotPrinter generic from <A, V> to <V> with view-constrained typing; introduced NodeOf<V> / EdgeOf<V> type helpers; added likec4_project attribute support; new ProjectsViewPrinter class for projects view rendering
Graphviz Projects View Layout
packages/layouts/src/graphviz/GraphvizLayoter.ts, packages/layouts/src/graphviz/GraphvizParser.ts, packages/layouts/src/graphviz/QueueGraphvizLayoter.ts
Added layoutProjectsView() method to layout computed projects view; new parseGraphvizJsonOfProjectsView() for parsing projects view DOT output; integrated projects path in queued layouter
CLI Export Command Restructure
packages/likec4/src/cli/export/*
Reorganized export command: replaced nested .command() with pngCmd and jsonCmd modules; new jsonCmd handles multi-project export with --pretty and --skip-layout options; pngCmd extracted as standalone CLI builder
App Routing & Projects Overview Page
packages/likec4/app/src/routes/projects.tsx, packages/likec4/app/src/pages/ProjectsOverview.tsx, packages/likec4/app/src/pages/ViewEditor.tsx, packages/likec4/app/src/pages/ViewReact.tsx
New /projects route with ProjectsOverviewPage; updated ViewEditor to use onLogoClick and render ListenForDynamicVariantChange; exported ListenForDynamicVariantChange from ViewReact; added beforeLoad redirect for single-project workspaces
App Context & Hooks
packages/likec4/app/src/context/LikeC4ProjectsContext.tsx, packages/likec4/app/src/hooks.ts, packages/likec4/app/src/routes/__root.tsx, packages/likec4/app/src/routes/index.tsx
Refactored to use useLikeC4Projects hook; extended router context with projects array; updated useCurrentProject to use useMatches; added projects list to navigation and mask-based redirect
Public API & Exports
packages/diagram/src/index.ts, packages/likec4/src/model/index.ts, packages/core/src/compute-view/index.ts
Re-exported projects-related types and hooks; computeProjectsView and related types from @likec4/core; useChangeLikeC4Project, useLikeC4Project, LikeC4ProjectsOverview from diagram
Vite Plugin & Virtual Modules
packages/likec4/src/vite-plugin/virtuals/projects.ts, packages/likec4/src/vite-plugin/virtuals/projectsOverview.ts, packages/likec4/src/vite-plugin/modules.d.ts, packages/likec4/src/vite-plugin/plugin.ts
New projectsOverview virtual module with store and HMR; added useLikeC4Projects() and useLikeC4ProjectsOverview() hooks; integrated projects overview module into plugin registration and hot-reload logic
LikeC4 Core API
packages/likec4/src/LikeC4.ts, packages/likec4/src/LikeC4.spec.ts, e2e/bootstrap.mjs
Added syncComputedModel(project?) synchronous method; added computedModel(project?) async method alongside existing layoutedModel(); replaced calls from computedModel() to syncComputedModel() in tests
CLI Codegen & Options
packages/likec4/src/cli/codegen/handler.ts, packages/likec4/src/cli/index.ts, packages/likec4/src/cli/options.ts
Awaited computedModel() call in codegen; centralized logger configuration with configurelogger wrapper; removed useOverview CLI option; updated project option description
File System & Watcher
packages/language-server/src/filesystem/ChokidarWatcher.ts, packages/language-server/src/filesystem/LikeC4FileSystem.ts
Added directory filtering via optional Stats parameter; new isLikeC4ConfigFile and excludeNodeModules helpers; deterministic directory ordering with ensureOrder; improved file-vs-directory distinction in scanning
Logging & Formatting
packages/log/src/formatters.ts, packages/log/src/sink.ts, packages/log/src/index.ts
Replaced getConsoleSink with getConsoleFormatter in formatters; new sink.ts module provides console sinks wrapping formatter; updated re-exports to reflect new structure
Configuration & Dependencies
pnpm-workspace.yaml, packages/likec4/package.json, packages/likec4/panda.config.ts, apps/playground/package.json, packages/likec4/tsconfig*.json, styled-system/preset/src/recipes/index.ts
Added @xstate/store dependency; bumped oxlint, turbo, xstate, fast-equals, immer versions; updated @likec4/styles alias resolution; added styled-system references to tscconfigs; added elementNode and navigationPanel recipe exports
Example & Test Updates
examples/multi-project/projectB/architecture.c4, packages/core/src/builder/Builder-style2.spec.ts, packages/layouts/src/graphviz/ProjectsViewPrinter.spec.ts, packages/layouts/src/graphviz/wasm/GraphvizWasmAdapter.spec.ts
Multi-project example with cross-project imports and relationships; new builder multi-project test; projects view printer and layout adapter tests with snapshots
Manual Layout Type Updates
packages/core/src/manual-layout/__test__/fixture.ts, packages/core/src/manual-layout/applyManualLayout.ts, packages/diagram/src/editor/__tests__/fixture.ts, packages/diagram/src/likec4diagram/xyflow-sequence/utils.ts, packages/layouts/src/sequence/utils.ts
Introduced writable aliases for node/edge mutations; transitioned applyNodesManualLayout and applyEdgesManualLayout to accept ReadonlyArray; updated buildCompounds in sequence and xyflow utilities to accept readonly arrays

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • PR #2495: Introduces/refines projects manager and language server project/document resolution APIs that underpin the multi-project support and projects overview compute paths added in this PR.

Poem

🐰 Whiskers twitch with pride today,
Projects dance in organized way,
Overview blooms where relations align,
Multi-project magic makes diagrams shine!

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch compute-projects-view

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 46a1a8c and a63a42c.

⛔ Files ignored due to path filters (24)
  • e2e/tests/__screenshots__/chromium-linux/e2e-amazon-rds.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-amazon-sqs.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-amazon.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-backend.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-legacy-backend.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-legacy.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-next.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-to-amazon.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-ui-dashboard.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-ui-supportPanel.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud-ui.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-cloud.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-customer.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-deploy-1.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-dynamic-view-1.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-graphql.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-index.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-mobile.png is excluded by !**/*.png
  • packages/layouts/src/graphviz/__snapshots__/OverviewDiagramsPrinter.spec.ts.snap is excluded by !**/*.snap
  • packages/layouts/src/graphviz/__snapshots__/ProjectsViewPrinter-no-relationships.dot is excluded by !**/*.dot
  • packages/layouts/src/graphviz/__snapshots__/ProjectsViewPrinter-two-directions.dot is excluded by !**/*.dot
  • packages/layouts/src/graphviz/__snapshots__/ProjectsViewPrinter-with-relationship.dot is excluded by !**/*.dot
  • packages/layouts/src/graphviz/wasm/__snapshots__/layout-projects-view.ts.snap is excluded by !**/*.snap
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (118)
  • .changeset/clever-impalas-sin.md
  • .changeset/funky-laws-hide.md
  • .changeset/soft-coats-juggle.md
  • .changeset/tasty-humans-wave.md
  • apps/playground/package.json
  • e2e/bootstrap.mjs
  • examples/multi-project/projectB/architecture.c4
  • packages/core/src/builder/Builder-style2.spec.ts
  • packages/core/src/builder/Builder-style2.test-d.ts
  • packages/core/src/builder/Builder.ts
  • packages/core/src/compute-view/element-view/__test__/groups.spec.ts
  • packages/core/src/compute-view/element-view/compute.ts
  • packages/core/src/compute-view/element-view/memory/stage-final.ts
  • packages/core/src/compute-view/element-view/predicates/__test__/wildcard.spec.ts
  • packages/core/src/compute-view/element-view/predicates/wildcard.ts
  • packages/core/src/compute-view/index.ts
  • packages/core/src/compute-view/projects-view/_types.ts
  • packages/core/src/compute-view/projects-view/compute.spec.ts
  • packages/core/src/compute-view/projects-view/compute.ts
  • packages/core/src/compute-view/utils/ancestorsOfNode.ts
  • packages/core/src/compute-view/utils/buildElementNotations.ts
  • packages/core/src/compute-view/utils/link-nodes-with-edges.ts
  • packages/core/src/compute-view/utils/topological-sort.ts
  • packages/core/src/manual-layout/__test__/fixture.ts
  • packages/core/src/manual-layout/applyManualLayout.ts
  • packages/core/src/model/DeploymentModel.ts
  • packages/core/src/model/ElementModel.ts
  • packages/core/src/model/view/LikeC4ViewModel.ts
  • packages/core/src/types/view-computed.ts
  • packages/core/src/types/view-layouted.ts
  • packages/core/src/types/view-manual-layout.ts
  • packages/diagram/src/LikeC4Diagram.props.ts
  • packages/diagram/src/LikeC4Diagram.tsx
  • packages/diagram/src/LikeC4ProjectsOverview.tsx
  • packages/diagram/src/base-primitives/compound/CompoundNodeContainer.tsx
  • packages/diagram/src/base-primitives/element/ElementNodeContainer.css.ts
  • packages/diagram/src/base-primitives/element/ElementNodeContainer.tsx
  • packages/diagram/src/components/NavigationPanel.tsx
  • packages/diagram/src/context/DiagramEventHandlers.tsx
  • packages/diagram/src/editor/__tests__/fixture.ts
  • packages/diagram/src/hooks/useLikeC4Project.ts
  • packages/diagram/src/hooks/useLikeC4Styles.ts
  • packages/diagram/src/index.ts
  • packages/diagram/src/likec4diagram/DiagramXYFlow.tsx
  • packages/diagram/src/likec4diagram/xyflow-sequence/utils.ts
  • packages/diagram/src/navigationpanel/NavigationPanelControls.tsx
  • packages/diagram/src/navigationpanel/controls/LogoButton.tsx
  • packages/diagram/src/navigationpanel/controls/index.ts
  • packages/diagram/src/projects-overview/ProjectsOverview.tsx
  • packages/diagram/src/projects-overview/ProjectsOverviewXY.tsx
  • packages/diagram/src/projects-overview/_types.ts
  • packages/diagram/src/projects-overview/actor.ts
  • packages/diagram/src/projects-overview/context.ts
  • packages/diagram/src/projects-overview/custom/edgeTypes.tsx
  • packages/diagram/src/projects-overview/custom/index.ts
  • packages/diagram/src/projects-overview/custom/nodeTypes.tsx
  • packages/diagram/src/projects-overview/custom/styles.css.ts
  • packages/diagram/src/projects-overview/hooks.ts
  • packages/diagram/src/projects-overview/index.ts
  • packages/diagram/src/projects-overview/layouted-to-xyflow.ts
  • packages/diagram/src/projects-overview/panel/ProjectsOverviewPanel.tsx
  • packages/diagram/src/projects-overview/persistence.ts
  • packages/diagram/vite.config.ts
  • packages/language-server/src/LikeC4LanguageServices.ts
  • packages/language-server/src/filesystem/ChokidarWatcher.ts
  • packages/language-server/src/filesystem/LikeC4FileSystem.ts
  • packages/language-server/src/model/model-builder.ts
  • packages/layouts/src/graphviz/DeploymentViewPrinter.ts
  • packages/layouts/src/graphviz/DotPrinter.ts
  • packages/layouts/src/graphviz/DynamicViewPrinter.ts
  • packages/layouts/src/graphviz/ElementViewPrinter.ts
  • packages/layouts/src/graphviz/GraphvizLayoter.ts
  • packages/layouts/src/graphviz/GraphvizParser.ts
  • packages/layouts/src/graphviz/ProjectsViewPrinter.spec.ts
  • packages/layouts/src/graphviz/ProjectsViewPrinter.ts
  • packages/layouts/src/graphviz/QueueGraphvizLayoter.ts
  • packages/layouts/src/graphviz/types.ts
  • packages/layouts/src/graphviz/wasm/GraphvizWasmAdapter.spec.ts
  • packages/layouts/src/sequence/utils.ts
  • packages/likec4/app/src/components/view-page/SelectProject.tsx
  • packages/likec4/app/src/context/LikeC4ProjectsContext.tsx
  • packages/likec4/app/src/hooks.ts
  • packages/likec4/app/src/pages/ProjectsOverview.tsx
  • packages/likec4/app/src/pages/ViewEditor.tsx
  • packages/likec4/app/src/pages/ViewReact.tsx
  • packages/likec4/app/src/router.tsx
  • packages/likec4/app/src/routes/-index-overview.tsx
  • packages/likec4/app/src/routes/__root.tsx
  • packages/likec4/app/src/routes/index.tsx
  • packages/likec4/app/src/routes/projects.tsx
  • packages/likec4/app/tsconfig.json
  • packages/likec4/package.json
  • packages/likec4/panda.config.ts
  • packages/likec4/src/LikeC4.relation-extend.integration.spec.ts
  • packages/likec4/src/LikeC4.spec.ts
  • packages/likec4/src/LikeC4.ts
  • packages/likec4/src/cli/codegen/handler.ts
  • packages/likec4/src/cli/export/index.ts
  • packages/likec4/src/cli/export/json/handler.ts
  • packages/likec4/src/cli/export/png/handler.ts
  • packages/likec4/src/cli/index.ts
  • packages/likec4/src/cli/options.ts
  • packages/likec4/src/model/index.ts
  • packages/likec4/src/vite-plugin/modules.d.ts
  • packages/likec4/src/vite-plugin/plugin.ts
  • packages/likec4/src/vite-plugin/virtuals/projects.ts
  • packages/likec4/src/vite-plugin/virtuals/projectsOverview.ts
  • packages/likec4/src/vite/aliases.ts
  • packages/likec4/tsconfig.react.json
  • packages/log/src/formatters.ts
  • packages/log/src/index.ts
  • packages/log/src/sink.ts
  • packages/vscode-preview/tsconfig.src.json
  • pnpm-workspace.yaml
  • styled-system/preset/src/recipes/elementNode.ts
  • styled-system/preset/src/recipes/index.ts
  • styled-system/preset/src/stot-recipes/index.ts
  • styled-system/preset/src/stot-recipes/navigationPanel.ts

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.

❤️ Share

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

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.

1 participant