Skip to content

Conversation

darshanr0107
Copy link
Contributor

@darshanr0107 darshanr0107 commented Jul 4, 2025

📑 Summary

This PR introduces a validation check and corresponding warning when a block's width exceeds the configured number of columns.
Currently, blocks that span beyond the available column count cause render unexpected spaces without clear feedback to the user.

Resolves #6633

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 Tasks

Make sure you

  • 📖 have read the contribution guidelines
  • 💻 have added necessary unit/e2e tests.
  • 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
  • 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Copy link

changeset-bot bot commented Jul 4, 2025

🦋 Changeset detected

Latest commit: f683b03

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

This PR includes changesets to release 2 packages
Name Type
mermaid Patch
@mermaid-js/examples Patch

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

Copy link

netlify bot commented Jul 4, 2025

Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit f683b03
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/6879f5c9db5210000899cea9
😎 Deploy Preview https://deploy-preview-6717--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

pkg-pr-new bot commented Jul 4, 2025

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@6717

mermaid

npm i https://pkg.pr.new/mermaid-js/mermaid@6717

@mermaid-js/layout-elk

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6717

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6717

@mermaid-js/parser

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6717

@mermaid-js/tiny

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/tiny@6717

commit: f683b03

Copy link

codecov bot commented Jul 4, 2025

Codecov Report

Attention: Patch coverage is 0% with 12 lines in your changes missing coverage. Please review.

Project coverage is 3.70%. Comparing base (5b241bb) to head (f683b03).
Report is 22 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid/src/diagrams/block/blockDB.ts 0.00% 12 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #6717      +/-   ##
==========================================
- Coverage     3.70%   3.70%   -0.01%     
==========================================
  Files          454     454              
  Lines        44724   44736      +12     
  Branches       707     707              
==========================================
  Hits          1659    1659              
- Misses       43065   43077      +12     
Flag Coverage Δ
unit 3.70% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
packages/mermaid/src/diagrams/block/blockDB.ts 0.00% <0.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link

argos-ci bot commented Jul 4, 2025

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Jul 18, 2025, 7:32 AM

Copy link
Contributor

@Copilot Copilot AI left a comment

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 a validation check to ensure no block’s width exceeds the configured column count and surfaces a clear error when it does.

  • Introduces a runtime check in blockDB.ts that throws an error if any block’s widthInColumns exceeds the declared columns.
  • Adds a unit test in block.spec.ts to verify the new error is thrown when a block is too wide.
  • Updates the Changeset to document this bugfix.

Reviewed Changes

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

File Description
packages/mermaid/src/diagrams/block/parser/block.spec.ts Adds a test to verify an error is thrown for over-wide blocks
packages/mermaid/src/diagrams/block/blockDB.ts Implements the width-vs-columns validation and throws an error
.changeset/ninety-roses-turn.md Records the patch changeset for this bugfix

@mermaid-js mermaid-js deleted a comment from Copilot AI Jul 9, 2025
Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

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

Please make changes suggested by copilot

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
@darshanr0107
Copy link
Contributor Author

Please make changes suggested by copilot

resolved in ac97624

@darshanr0107 darshanr0107 requested a review from sidharthv96 July 16, 2025 07:42
@shubhamparikh2704 shubhamparikh2704 assigned knsv and unassigned knsv Jul 17, 2025
aloisklink

This comment was marked as resolved.

Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

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

LGTM, the only other improvement would to update the changeset/PR title/PR description to say that we're only logging a warning instead.

@darshanr0107 darshanr0107 changed the title 6633: Add error message for blocks exceeding column width 6633: Log warning for blocks exceeding column width Jul 18, 2025
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
@darshanr0107 darshanr0107 requested a review from aloisklink July 18, 2025 07:21
@aloisklink aloisklink enabled auto-merge July 18, 2025 07:28
@aloisklink aloisklink added this pull request to the merge queue Jul 18, 2025
Merged via the queue into develop with commit 9faf2f9 Jul 18, 2025
25 checks passed
@aloisklink aloisklink deleted the 6633-Stacking-blocks-renders-unexpected-space branch July 18, 2025 07:41
This was referenced Aug 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Stacking blocks renders unexpected space
5 participants