feat | Vertical branches in Git Diagram

[mastersibin]

A new feature that helps create Vertical branches for GitDiagram.
Resolves #2585
Issue #4451 closed as a duplicate, please refer to #2585
Discussed #3772

[codecov]

Codecov Report

Merging #4639 (bb7b349) into develop (38f2ff0) will increase coverage by 31.80%.
The diff coverage is 100.00%.

Additional details and impacted files

@@             Coverage Diff              @@
##           develop    #4639       +/-   ##
============================================
+ Coverage    45.32%   77.13%   +31.80%     
============================================
  Files           52      143       +91     
  Lines         6645    14535     +7890     
  Branches        18      516      +498     
============================================
+ Hits          3012    11211     +8199     
+ Misses        3633     3219      -414     
- Partials         0      105      +105     

Flag	Coverage Δ
e2e	84.09% <100.00%> (?)
unit	45.32% <ø> (ø)

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

Impacted Files	Coverage Δ
...kages/mermaid/src/diagrams/git/gitGraphRenderer.js	98.14% <100.00%> (ø)

... and 136 files with indirect coverage changes

[nirname]

We need tests covering this feature. Without them it would be very difficult to say if smth broke

[nirname]

Looks great!
Some recommendations:

• Branches names unfortunately overlap each other. May be we need an option to turn them 45 degree.
• Perhaps it would be better to place labels for commits at the right or at the left depending on how close the commit is to the left or right side of the rendered image

[mastersibin]

Looks great! Some recommendations:

• Branches names unfortunately overlap each other. May be we need an option to turn them 45 degree.
• Perhaps it would be better to place labels for commits at the right or at the left depending on how close the commit is to the left or right side of the rendered image

Agree, I'll make the branch names turn 45 degrees.
What if both left and right branches are close, how would we put the labels then?

[nirname]

You could play around while placing labels. Ensure that they are not cut, may be some edge-cases in tests would cover that

[mastersibin]

You could play around while placing labels. Ensure that they are not cut, maybe some edge-cases in tests would cover that

If the label is long it will cut no matter what. Can we have some threshold, that we guarantee, below which it won't cut?

[nirname]

Not sure, there is no correct answer to that. Every diagram at some point will become unreadable. You simply cannot fit certain image in a very small boundaries. But for the majority of the cases I would simply took some real branches names for instance from that very project, or from any other one and would put them in a test case

[mastersibin]

Not sure, there is no correct answer to that. Every diagram at some point will become unreadable. You simply cannot fit certain image in a very small boundaries. But for the majority of the cases I would simply took some real branches names for instance from that very project, or from any other one and would put them in a test case

One thing I found was, if you rotate branch names, it will interfere with the title of the diagram. A probable solution can be, to space branches according to branch name length.

[nirname]

This could be refactored a little bit to be more readable, but that is not the task. Great job. I am approving it. The only missing thing is the documentation. It would be great to add it with this PR, so as not to forget about it.

[nirname]

I am merging this, but the code in its current state needs total refactoring, this is very difficult to understand what is happening there. Perhaps we need to redo the whole thing

[mermaid-bot]

@mastersibin, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.

[yogeshg]

Is it me, or should this work in github?

gitGraph TB:
       commit id: "1"
       commit id: "2"
       commit id: "3"

Loading

[nirname]

@yogeshg I think this is because of GitHub. You can check if it is working on mermaid.live

[yogeshg]

Oh gotcha. Thanks for the information. Since what version is this present in? Also, Do you know where I can request GitHub to update that version?