onlywei/explain-git-with-d3

Use D3 to visualize simple git branching operations.

explain-git-with-d3's Issues

Zen mode

A ZenMode would be great, I think this would be a great presentation tool. Zen mode will get rid of the stuff around the command line and viz

Allow head and @ as alias to HEAD

On osx and windows, head is the same as HEAD.

And as of git 1.8.5, @ is also the same.

Add an export feature

I did not found any way to export the graph to a SVG file. Is it possible? How hard would it be to add such feature (if missing)?

Arrows pointing the wrong direction

Shouldn't the arrows between commits be pointing in the opposite direction? i.e., The arrow from the first commit should point to the 2nd commit. The 2nd commit should merge to the 3rd.

And during a merge, the arrow should point from the source branch to the target branch.

Or am I completely misunderstanding something?

`git merge` on up-to-date branch generates a bogus commit

To reproduce:

1. Open the git commit example
2. Run git checkout -b newbranch
3. Run git commit
4. Run git merge master

Expected Results: "Already up-to-date".

Actual Results: It generates a weird franken-commit:

This also happens with git rebase origin/master on the Update Private Local Branch with Latest from Origin example:

In this instance, my-branch originally pointed at dccdc4d..., and the git rebase origin/master command created two new commits even though my-branch was already up-to-date.

fetch

explain-git-with-d3-master1.zip

explain-git-with-d3-master1.zip

`git push` doesn't push to correct origin branch

On master branch after merging a new-created branch named "feature", git push will push the branch "feature" to origin master, which is expected to be master.

Add undo button for if we accidentally mistype something while doing a demo

Commands with multiple whitespaces are not accepted and it is not obvious why

When I accidentally type any command with two whitespaces, it shows as if it is with one in between words in the log but at the same time, it does not work ("I don't understand"). It is not obvious what is the problem.

Cannot commit to branch with `/` in name

Simple Description

I cannot commit to branches with the / character, and I assume there may be other valid git branch names with special characters that might fail in this app.

Reproduction

1. Start app clean
2. git checkout -b feat/a
3. New branch not highlighted, despite the fact that HEAD points to the appropriate commit
4. git commit
5. No new commit node in graph and receive the following error in console

   Not a good idea to make commits while in a detached HEAD state.

6. git checkout -b feat-b
7. New branch highlighted and HEAD points to appropriate commit
8. git commit
9. New node added, branch moved, HEAD follows; all as expected

Expectation

I've seen many orgs that use / in branch names for things like release/9.5, bug/PROD-1234, feat/SOME-9876. Would be nice to allow / in the name and maybe investigate other valid special characters in branch names and allow them.

Suggestion: Github Pages

If you want, you can use Github Pages since all the files are html/css/js. That way you won't have to upload to ftp each time?

Show visually that HEAD points to a branch, not usually a commit

This would make the git checkout example clearer, when you git checkout bb92e0e like it suggests. Right now the only difference from git checkout master is the “Current Branch” text at the top left of the visualization, which is easily missed.

This would also make the git checkout -b example clearer. If you git checkout -b foo and git checkout -b bar, it looks like HEAD is just another branch, but colored green because it’s the most important.

It could look something like this:

Current Branch: master

  ╭────╮
--│    │
  ╰────╯
 bb92e0e…
 [master] ← [HEAD]
 [tested]

Current Branch: detached HEAD

  ╭────╮
--│    │
  ╰────╯ ↖︎
 bb92e0e… [HEAD]
 [master]
 [tested]

Make the specific examples linkable

I would imagine this to include adding specific url fragment at the end of an url and parsing it at page load to initialize the specific example.

What would be even better is to be able to make my own custom examples. It would include serializing the current commit and origin data to json, converting it to base64 and add it to an url fragment or parameter.

This site is already pretty useful for explaining git concepts. Even laymen can digest most of what is happening. Since I plan to use it in presentations, loading an example instantly would be great.

Add list of supported commands

Pop up modal window with list of supported commands

Exiting Zen mode?

Is there a way to exit Zen mode (without refreshing the browser)? If so, I haven't been able to figure it out.

reset gives odd error

In a fresh session in the playground:

$ git reset --hard HEAD^
newLoc.tags is undefined

Support referencing a unique abbreviated commit hash, like “bb92”

In the git checkout example, I tried to type git checkout bb92 to check out the commit labeled “bb92e0e…” on the graph. I got the error “Cannot find commit: bb92”. I had to type the full 7-character name to perform the checkout command.

Abbreviated commits hashes should work, to save the user typing when exploring Git. The command line should only display an error if the hash is ambiguous, like “Ambiguous abbreviated ref: e”, or if no commit begins with that prefix, like “No such ref: 123”.

The code that identifies a ref given its name is getCommit in historyview.js.

My Updated/Maintained Fork with scrolling

I have a fork going at https://github.com/JakeGinnivan/explain-git-with-d3 being hosted at http://jake.ginnivan.net/explain-git-with-d3/ which has a bunch of extra features like:

• Scrolling
• --no-ff commits
• tag support
• zen mode (fullscreen, no noise mode. Useful for presentations)

Hopefully this stuff gets merged into this repo eventually, until then feel free to submit pull requests to my fork and I will review/merge and update my hosted version

typo in git merge section

Current text:
...snapshot will have the all of the work that has been done...

Change to:
...snapshot will have all of the work that has been done...

Support git tag

Would be useful when explaining GitFlow

donating simgity.com

Hi there, not a real issue but couldn't find another way to contact you.

This is pretty cool and I have been meaning to do sort of this for some time now. I even registered a domain for it: simgity.com (a simulator for git) and I'd happily donate it to you if you want.

Improvements to the style & to the text content

@maya did some very cool work on the style of the page: https://github.com/maya/explain-git-with-d3

I changed some text to make it more accessible to a git novice.

If you're open to it, I'd suggest renaming the repo from "explain-git-with-d3" -> "understanding-git-visually". The difference being that it shifts the subject of the project from the creators and the tools that you used to the person learning git and what value this tool brings them.

PS Very cool project! Hope this helps!

Support HEAD~n

HEAD~n (or more generally <rev>~n) refers to the n-th generation ancestor (see git help gitrevision).

Standalone visualizer of git history

Would love to see a standalone git visualizer tool that users could user on their repositories based on this visualization! If in the browser and hooks up to a github repository, even better! Consider it a feature request. (Anything like this already available?). The visualization scheme here is nice.

Orphans a referenced commit object

It seems like it's grey'ed out commit fd94e4e I created in a branch and then merged. See the attached image below.

Unless I'm interpreting this wrong, it seems grey commits are prune-able (outside of the reflog which isn't visualized here), but this clearly has references in place from master. Excellent job otherwise! I'll likely use this to help explain the revision tree operations to people. Thank you.

web app does not recognize "Git someting" because of a capital letter

When I prepare a sequence of GIT commands for the lesson I put it to the Google Doc which automatically changes the first letter to capital one. In the terminal, command starting with uppercase is not a problem.

delete mention of old url in readme?

hey,
just discovered your project via a friend. Looks promising!
Reading the readme, I figured out http://www.wei-wang.com/ExplainGitWithD3/
does not work, whereas the other url you mention in your update seems to work. Maybe you should consider deleting the first url in the readme?
best
Arnaud

Dead link can be updated

https://onlywei.github.io/explain-git-with-d3/#reset

This hard/soft/mixed link can be updated to this link: https://git-scm.com/book/en/v2/Git-Tools-Reset-Demystified

"git branch" treats unknown/not-implemented flags as the branch name.

For example, git branch -a creates a branch called "-a" instead of listing all of the branches or saying "I don't understand that".

"null is not an object" after doing checkout -b

starting with http://onlywei.github.io/explain-git-with-d3/#fetchrebase:

git fetch
Fetched 3 commits on master.
git rebase master
git rebase my-branch
Already up-to-date.
git checkout master
git checkout master
git commit
git rebase origin/master
git checkout my-branch
git commit
git rebase master
git checkout dccdc4d
git rebase my-branch
Cannot find commit: null
git checkout -b new
null is not an object (evaluating 'this.getCommit('HEAD').tags')

js errors in frontend

git push should update origin/master

try the following:

git commit
git fetch
git merge origin/master
git push

after the push, the branch origin/master has not been updated from its position got after the fetch, which is not consistent with how git actually works (it should end up on the same commit as master).

Scrollbar

When we play with your interface, and add many object on tree view, you should show scrollbars if content is more larger than the container

New commits interrupt rendering of past commits

If the user quickly enters git commit repeatedly, the rendering of the new commits appears to interrupt the rendering of past commits. It would be difficult to reproduce this behavior by typing the full command git commit repeatedly. Instead, type git commit once and then use the up arrow to select the previous command and press enter. Doing so in rapid succession results in something like the following:

The generated code:

<g class="commits">
    <text class="id-label" x="590" y="114">d80cc13..</text>
    <text class="id-label" x="500" y="114">930215d..</text>
    <text class="id-label" x="410" y="114">78a3c03..</text>
    <text class="id-label" x="320" y="114">9c30525..</text>
    <text class="id-label" x="230" y="114">da24642..</text>
    <text class="id-label" x="140" y="114">1fb4ff4..</text>
    <text class="id-label" x="50" y="114">e137e9b..</text>
    <circle id="ExplainGitCommit-e137e9b" class="commit" cx="50" cy="80" r="20"></circle>
    <circle id="ExplainGitCommit-1fb4ff4" class="commit" cx="140" cy="80" r="20"></circle>
    <circle id="ExplainGitCommit-da24642" class="commit" cx="230" cy="80" r="1.7241377279999999"></circle>
    <circle id="ExplainGitCommit-9c30525" class="commit" cx="320" cy="80" r="3.093314208"></circle>
    <circle id="ExplainGitCommit-78a3c03" class="commit" cx="410" cy="80" r="1.744826144"></circle>
    <circle id="ExplainGitCommit-930215d" class="commit" cx="500" cy="80" r="2.4304032960000006"></circle>
    <circle id="ExplainGitCommit-d80cc13" class="commit checked-out" cx="590" cy="80" r="20"></circle>
</g>

Notice the radius of each commit circle.

Finally, I wanted to say thank you for this extremely useful tool!

Create app to watch a real git repo?

I've been thinking it would be very cool to have a version of your app that just sits and watches a real git repo as you make commits, pulls, pushes, rebases, etc. and shows the effects visually. It would be especially useful when teaching people about git techniques, because it would provide instant feedback on what just happened to the repo DAG, and we'd still be able to look at git log, etc. for more detailed information.

Do you know anything like this that exists, and/or do you think it's worth adding as a variant here?

Allow merge commits in detached head state

In http://onlywei.github.io/explain-git-with-d3/#freeplay:

Do whatever you want in this free playground.

$ git checkout HEAD
$ git commit
$ git commit
# generated hash: d525e9e...
$ git checkout master
$ git checkout -b branch1
$ git commit
$ git commit
git checkout d525e9e
$ git merge branch1
Not a good idea to make commits while in a detached HEAD state.

I thought I was allowed to do anything here? 😄

Load javascript and css locally after switching to github pages

If you decide to host on GitHub pages as shown in #2, you should also think about pointing all relevant js and css from local so that you can load via https.

no license

Hi. Have you considered adding a license for your code so other people can play with it?

When a tag is checked out, current branch should say "DETACHED HEAD"

Right now it doesn't look like detached head is updated.

Remote ref does not update with push

The following screenshot illustrates the bug:

The gray box representing the origin/dev ref should be updated after pushing, but instead it requires typing git fetch again.

Javascript error with "no-ff" merge

When I try to show no-ff merge I get (tried both positions):

git merge --no-ff master
Cannot read property 'parent' of null
git merge master --no-ff
Cannot read property 'parent' of null

thank you for this tool!

hi all

thank you for this wonderful tool. it's amazing. it's helped me understand git.

chrs

rebase --onto

Would be great to have a support for git rebase --onto.

What an awesome learning tool! ❤️

Allow checkout of feature/branch style branch naming

I assume it thinks it's a remote. A workaround is to use feature-branch naming instead

`branchStartCommit is null` on `git merge --no-ff`

On the git merge example, enter the following commands

git checkout dev
git merge master
git checkout master
git merge --no-ff dev

This results in the error branchStartCommit is null.