block diagram column counting error

akumria commented 3 months ago

Description

When creating a block diagram, see the code sample below, the column counting code gets confused and mis-renders blocks.

In the first link, we have a physical server specified as occupying 5 block spaces

https://develop.git.mermaid.live/edit#pako:eNqFklFPgzAQx78KuWeca7sx0rdNk71oNNmb1ocCN0eElkAxIuG7WxDHRpi7p-u_v979L70aQh0hcAgSHX7cBGikUE4foU7KVBXOcpA67O7p-VAVcSiTVwF_qbPD_BNzAW98zPNtiYUhg3panJ7LfYMtIcQWX2eZs7YlLzH0OtMim1gVtw9x0Jo76YcqmnRKp52y6Q706HRz0QU9Ov2PYdeZ8TRsNA24kGKeyjiyf1q3lwLMAVMUwG0a4V6WiREgVGNRWRq9q1QIfC-TAl0os0gavI_ley7To4pRbHT--Lso3b64kEn1ovXA2DPwGr6As5lPPEopI75PV4sFXbpQWZmwxoXv7g2Zzftgc8_3_FXzA0RBs2I

However, it seems to take up 6.

When we move the physical server to the bottom, as I originally wanted, the "phantom column" takes the physical server

https://develop.git.mermaid.live/edit#pako:eNqFkkFvgzAMhf8K8pl1TVIoyq3tpF42dVJvW3YI4K5okCAI0xjivy-wrrQTbX1ynr4nPytuINIxAocw1dHHXYhGCuUcKtJplanS8Qapx_i6wtKQQT2F6bncG1abNSHkVcAiz52FgLdLDL3NdMgyUeX9YxJaip_MQxWPJqXjSdn4BHpMuryYgh6TXmPYbeb_NuzaNqvN874uk0im1vXXOlssPrHozB64kGGRySS2P9p0bgFmjxkK4LaNcSer1AgQqrWorIze1ioCvpNpiS5UeSwNPiTyvZDZUcU4Mbp4-j2T_lpcyKV60Xpg7Bt4A1_A2SQgPqWUkSCg89mMei7UViasdeG795DJ9FBs6gd-MG9_AMF4spg

If I then constrain the two guest sub-blocks, the render begins to look correct:

https://develop.git.mermaid.live/edit#pako:eNqFkkFvgkAQhf8KmTO17q4g2ZvaxEsbm3hrt4cFRiWFXQJLU0r4712oFWNQ5zT78r3sm8w0EOkYgUOY6ujzIUQjhXKOFem0ylTpeIPUY3xdYWkIp4N-jl_IvWW1WRNC3gUs8txZCPi4xtD7TIcsE1U-Piehpc5joIpHs1LOxrOy8T_oKevyag56ynqLYfeZy3nYrXlWm9dDXSaRTK3rv3W2WHxh0Zk9cCHDIpNJbLfadG4B5oAZCuC2jXEnq9QIEKq1qKyM3tYqAr6TaYkuVHksDT4lcl_I7KRinBhdvPydSn8xLuRSvWk9MPYNvIFv4GwSEJ9SykgQ0PlsRj0XaisT1rrw03vIZHosNvUDP5i3vwqgs3E

However in the above, the "Bins/Lib", although being specified as occupying 2 (or 3) columns, only end up occupying one.

If we remove the phsyical server, we get closer:

https://develop.git.mermaid.live/edit#pako:eNqFkTFPwzAQhf9KdHMotV3SyFtbpC4gBjYwgxNfwWpsR4kjUaL8d5xQpRSl9E32u-9073Qt5E4hcMgKl-9vMvRS2OiowePbBmtPTm6v3BWNsXVEz-2hYfO0JYS8CliVZbQS8HaJodeZHllrW98-6CxQ_Nc8tGoyKZ1OyqYn0DHp-mIKOib9j2HXmb_bsLNtIAaDlZFahXO0fUmA_0CDAnh4KtzJpvAChO0CKhvvng82B76TRY0xNKWSHu-1fK-kGV1U2rvq8efGw6ljKKV9ce7EhD_wFj6Bs1lKEkopI2lKl4sFvYvhEGzCuhi-hh4ymx_F5kmapMvuGx35nd0

Steps to reproduce

I tried using the mermaid CLI, then mermai.love (v10.9.0) and finally develop.git.mermaid.love, all of them display the same rendering issues.

Screenshots

Expected render of the Code Sample

Code Sample

block-beta
        columns 5
        block:Guest1:2
            columns 2
            blockCOG111["App A"]
            blockCOG112["App A"]
            blockCOG12["Bins/Lib"]:2
        end
        block:Guest2:3
            columns 3
            blockCOG211["App B"]
            blockCOG212["App B"]
            blockCOG213["App B"]
            blockCOG22["Bins/Lib"]:3
        end
        blockCOPhysical["Physical Server"]:5

Setup

Mermaid version:
Browser and Version: [Chrome, Edge, Firefox]

Additional Context

No response

lukedubber commented 3 months ago

Was running into the same issue and found this issue. Can confirm having the same issue. Not sure what I can add to the discussion though.

zach-flaglerhealth commented 1 month ago

The simplest reproduction I can make is:

block-beta
columns 3

block:group1:3
columns 3
    A:3
    B 
    C 
    D
end

If you remove the columns directive at the beginning and the :3 on the group, then it renders A correctly spanning the three columns.

A variant:

block-beta
columns 3

block:group1
    A:3
    B 
    C 
    D
end

produces a diagram where A takes up 2 columns, B 1, C and D are going outside of the grouping, and there is an entire extra row underneath.

Conceptually (and maybe in the code?), this seems like it might be the same problem as #5423 and #5470?

mermaid-js / mermaid