Skip to content

Add alternate/conditional path support for dynamic views#10

Merged
Jrakru merged 5 commits into
feat/alternate-parallel-fullfrom
copilot/start-implementation-process
Nov 8, 2025
Merged

Add alternate/conditional path support for dynamic views#10
Jrakru merged 5 commits into
feat/alternate-parallel-fullfrom
copilot/start-implementation-process

Conversation

Copilot AI commented Nov 7, 2025

Copy link
Copy Markdown

Description

Implements alternate blocks for dynamic views, enabling conditional/alternative flow modeling in sequence diagrams (similar to UML alt blocks).

dynamic view payment {
  customer -> frontend "order"
  
  alternate {
    frontend -> payment "credit card"
    frontend -> cache "stored method"
  }
  
  payment -> backend "confirm"
}

Key Changes

Grammar & Types

  • Added alternate/alt keywords to Langium grammar
  • New DynamicStepsAlternate type with __alternate property
  • Alternate steps use : separator in IDs (step-02:1) vs . for parallel (step-01.1)

Layout Engine

  • findAlternateRects() groups alternate areas for rendering
  • getAlternateBoxes() calculates bounds in sequence layouter
  • Added null filtering before groupBy to prevent incorrect grouping

UI Rendering

  • SequenceAlternateArea component with distinctive styling:
    • Dashed border (vs solid for parallel)
    • Blue theme (vs gray)
    • "ALT" label (vs "PARALLEL")
  • Registered seq-alternate node type in XYFlow

Visual Distinction

Feature Parallel Alternate
Border Solid Dashed
Color Gray Blue
Label PARALLEL ALT
ID Format step-N.M step-N:M

Checklist

  • I've thoroughly read the latest contribution guidelines.
  • I've rebased my branch onto main before creating this PR.
  • My commit messages follow conventional spec
  • I've added tests to cover my changes (if applicable).
  • I've verified that all new and existing tests have passed locally for mobile, tablet, and desktop screen sizes.
  • My change requires documentation updates.
  • I've updated the documentation accordingly.
Original prompt

Start implementation

[Chronological Review: The conversation began with the user requesting a review of the implementation of features outlined in the document titled "Implementation Plan — Branching Experience PR03–PR05." The user then indicated a desire to start the implementation process.]

[Intent Mapping:

  • User requested to "review that we have implemented all the features in this document."
  • User subsequently requested to "Start implementation."]

[Technical Inventory:

  • Document referenced: "Implementation Plan — Branching Experience PR03–PR05."
  • Current repository: "likec4," branch: "feat/alternate-parallel-full."]

[Code Archaeology:

  • Active file: "/home/jpw/git/internal_likec4/implementation_plan_pr3_to_pr5.md," which contains an implementation plan for features related to branching experience.]

[Progress Assessment:

  • The user is in the process of confirming the implementation of features and is ready to begin the implementation phase.]

[Context Validation:

  • The conversation captures the user's intent to verify completed features and initiate the implementation, which is critical for continuity.]

[Recent Commands Analysis:

  • Last Agent Commands: The user requested a review of the implementation and then indicated to start the implementation.
  • Tool Results Summary: No specific tool results were returned as the conversation focused on user requests rather than tool executions.
  • Pre-Summary State: The agent was actively discussing the implementation plan and preparing to start the implementation when the token budget was exceeded.
  • Operation Context: The commands executed were directly related to the user's goal of confirming and starting the implementation of features outlined in the document.]
1. Conversation Overview: - Primary Objectives: The user requested to "review that we have implemented all the features in this document" and then indicated to "Start implementation." - Session Context: The conversation focused on reviewing the implementation of features from the "Implementation Plan — Branching Experience PR03–PR05" and preparing to start the implementation phase. - User Intent Evolution: The user transitioned from reviewing the implementation status to initiating the implementation process.
  1. Technical Foundation:
  • Document: "Implementation Plan — Branching Experience PR03–PR05" outlines features for implementation.
  • Repository: "likec4," current branch: "feat/alternate-parallel-full."
  1. Codebase Status:
  • File Name: "/home/jpw/git/internal_likec4/implementation_plan_pr3_to_pr5.md"
  • Purpose: Contains the implementation plan for features related to branching experience.
  • Current State: The user is confirming the implementation of features and is ready to start the implementation.
  • Key Code Segments: Not specified in the recent exchanges.
  • Dependencies: Relates to the overall project goals of enhancing the branching experience.
  1. Problem Resolution:
  • Issues Encountered: None explicitly mentioned; focus was on confirming feature implementation.
  • Solutions Implemented: Not applicable as the conversation was about reviewing and starting implementation.
  • Debugging Context: No ongoing troubleshooting efforts were noted.
  • Lessons Learned: Insights into the implementation process may emerge as the user begins the implementation.
  1. Progress Tracking:
  • Completed Tasks: Review of features is in progress.
  • Partially Complete Work: User is ready to start the implementation phase.
  • Validated Outcomes: None confirmed yet as the implementation has not started.
  1. Active Work State:
  • Current Focus: The user was preparing to start the implementation of features from the plan.
  • Recent Context: The last exchanges involved confirming the implementation status and readiness to begin.
  • Working Code: No specific code snippets were discussed recently.
  • Immediate Context: The user was focused on confirming the implementation of features before starting.
  1. Recent Operations:
  • Last Agent Commands: User requested to review the implementation and then to start the implementation.
  • Tool Results Summary: No specific tool results were returned; the focus was on user requests.
  • Pre-Summary State: The agent was discussing the implementation plan and preparing to start the implementation.
  • Operation Context: The commands executed were directly related to the user's goal of confirming and starting the implementation of features.
  1. Continuation Plan:
  • Pending Task 1: Confirm the implementation of all features in the document before starting.
  • Pending Task 2: Begin the implementation process as indicated by the user.
  • Priority Information: Confirming feature implementation is urgent before proceeding.
  • Next Action: Start the implementation as per the user's request.
TITLE: Starting Implementation of Branching Features

Created from VS Code via the GitHub Pull Request extension.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@coderabbitai

coderabbitai Bot commented Nov 7, 2025

Copy link
Copy Markdown

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)
Validation error: Unrecognized key(s) in object: 'ignore'
⚙️ Configuration instructions
  • Please see the configuration documentation for more information.
  • You can also validate your configuration using the online YAML validator.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch copilot/start-implementation-process

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

Copilot AI and others added 4 commits November 7, 2025 03:20
Co-authored-by: Jrakru <11872436+Jrakru@users.noreply.github.com>
Co-authored-by: Jrakru <11872436+Jrakru@users.noreply.github.com>
Co-authored-by: Jrakru <11872436+Jrakru@users.noreply.github.com>
Co-authored-by: Jrakru <11872436+Jrakru@users.noreply.github.com>
Copilot AI changed the title [WIP] Start implementation of branching experience features Add alternate/conditional path support for dynamic views Nov 7, 2025
Copilot AI requested a review from Jrakru November 7, 2025 03:43
@Jrakru

Jrakru commented Nov 8, 2025

Copy link
Copy Markdown
Owner

@copilot are all of our tests passing

Copilot AI commented Nov 8, 2025

Copy link
Copy Markdown
Author

@copilot are all of our tests passing

Yes! All tests are passing:

157 test files passed
1,389 tests passed (4 skipped, 1 todo)
No type errors

The test suite completed successfully in ~51 seconds, covering all packages including language-server, core, layouts, and diagram. The alternate paths implementation has been validated and all existing functionality remains intact.

@Jrakru

Jrakru commented Nov 8, 2025

Copy link
Copy Markdown
Owner

@copilot can you create a new branch will all those changes

Copilot AI commented Nov 8, 2025

Copy link
Copy Markdown
Author

@copilot can you create a new branch will all those changes

All the changes are already on the current branch copilot/start-implementation-process. If you'd like to create a new branch with a different name, you can run these commands locally:

# Create new branch from the base commit
git checkout -b feat/alternate-conditional-paths 19c1b40

# Cherry-pick all the implementation commits
git cherry-pick 2a3357c e4e0136 30bd34b 0989e08

# Push to remote
git push origin feat/alternate-conditional-paths

The branch includes:

  • 4 commits with all alternate paths implementation
  • 18 files changed: 357 insertions, 19 deletions
  • Full coverage: grammar, parser, types, compute, layout, and UI

Would you like me to help with anything else regarding these changes?

@Jrakru Jrakru marked this pull request as ready for review November 8, 2025 09:28
Copilot AI review requested due to automatic review settings November 8, 2025 09:28
@Jrakru Jrakru merged commit 598d7ac into feat/alternate-parallel-full Nov 8, 2025
7 checks passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull Request Overview

This PR adds support for alternate steps in dynamic/sequence diagrams, allowing users to define alternative execution paths in sequence views using alternate or alt blocks, similar to the existing parallel blocks.

  • Introduces new grammar rules, types, and parsing logic for alternate steps
  • Implements layout computation for alternate areas with visual distinction (dashed borders, blue coloring)
  • Adds rendering support for alternate step areas in the diagram UI

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/core/src/types/scalar.ts Updates stepEdgeId function to support alternate steps with colon separator
packages/core/src/types/view-parsed.dynamic.ts Adds DynamicStepsAlternate type and helper functions for alternate steps
packages/core/src/types/view-layouted.ts Adds AlternateArea interface for layouted alternate areas
packages/core/src/compute-view/dynamic-view/compute.ts Implements step processing logic for alternate steps
packages/core/src/compute-view/dynamic-view/utils.ts Adds flattening logic for alternate steps
packages/language-server/src/like-c4.langium Adds grammar rules for DynamicViewAlternateSteps
packages/language-server/src/model/parser/ViewsParser.ts Implements parsing of alternate steps from AST
packages/language-server/src/model/tests/model-parser-dynamic-views.spec.ts Adds test coverage for alternate step parsing
packages/layouts/src/sequence/_types.ts Adds AlternateRect and SequenceAlternateArea types
packages/layouts/src/sequence/utils.ts Implements findAlternateRects function for layout computation
packages/layouts/src/sequence/layouter.ts Adds layouter support for alternate rectangles
packages/layouts/src/sequence/sequence-view.ts Integrates alternate areas into sequence layout
packages/diagram/src/likec4diagram/xyflow-sequence/const.ts Defines z-index and color constants for alternate areas
packages/diagram/src/likec4diagram/xyflow-sequence/sequence-layout.ts Converts alternate areas to XYFlow nodes
packages/diagram/src/likec4diagram/custom/nodes/SequenceActorNode.tsx Implements SequenceAlternateArea component with dashed border styling
packages/diagram/src/likec4diagram/types.ts Adds type definitions for alternate area nodes
packages/diagram/src/likec4diagram/custom/nodes/index.tsx Exports SequenceAlternateArea component
packages/diagram/src/likec4diagram/DiagramXYFlow.tsx Registers alternate area node type

@@ -144,9 +144,13 @@ export function EdgeId(id: string): EdgeId {

export type StepEdgeIdLiteral = `step-${number}` | `step-${number}.${number}`

Copilot AI Nov 8, 2025

Copy link

Choose a reason for hiding this comment

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

The StepEdgeIdLiteral type is missing the alternate step format with colon separator. Since stepEdgeId can now return IDs like step-01:1 when isAlternate is true, the type should include step-${number}:${number}.

Suggested change
export type StepEdgeIdLiteral = `step-${number}` | `step-${number}.${number}`
export type StepEdgeIdLiteral = `step-${number}` | `step-${number}.${number}` | `step-${number}:${number}`

Copilot uses AI. Check for mistakes.
Comment on lines +46 to +78
export function findAlternateRects(steps: Array<Step>): Array<AlternateRect> {
// Filter out steps without alternatePrefix before grouping
const stepsWithAlternatePrefix = steps.filter(s => s.alternatePrefix != null)
return pipe(
stepsWithAlternatePrefix,
groupBy(s => s.alternatePrefix!), // Non-null assertion safe after filter
mapValues((steps, alternatePrefix) => {
return steps.reduce(
(acc, step) => {
acc.min.column = Math.min(acc.min.column, step.from.column, step.to.column)
acc.min.row = Math.min(acc.min.row, step.from.row, step.to.row)

acc.max.column = Math.max(acc.max.column, step.from.column, step.to.column)
acc.max.row = Math.max(acc.max.row, step.from.row, step.to.row)

return acc
},
{
alternatePrefix,
min: {
column: Infinity,
row: Infinity,
},
max: {
column: -Infinity,
row: -Infinity,
},
} as AlternateRect,
)
}),
values(),
)
}

Copilot AI Nov 8, 2025

Copy link

Choose a reason for hiding this comment

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

The findAlternateRects function is nearly identical to findParallelRects (lines 9-41), with only the property name differing (alternatePrefix vs parallelPrefix). Consider extracting a generic helper function to reduce code duplication and improve maintainability.

Copilot uses AI. Check for mistakes.
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.

3 participants