gitgraph.js
gitgraph.js copied to clipboard
nicoespeon
Add event handlers on whole commit line (vertical mode)
I want to build exactly as in this image, how can I achieve this?
Each and every row must hold an id and those must be clickable, and upon clicking it I need to console log the id of the row which was clicked.
Right now I have this:
Hi @IsaacHub 👋
Interesting use case, thanks for providing the detailed screenshot.
First of all, I think you're still using the gitgraph.js package. This one has been deprecated and I'd suggest you to move to @gitgraph/js (or @gitgraph/react), if possible. There are breaking changes though, here's a guide that could help: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/gitgraph-js/MIGRATE_FROM_GITGRAPH.JS.md
If you're stuck with v1, there's a onClick() option you could pass to each commit. But I'm not sure it would do exactly as you need.
Now, speaking about @gitgraph/js (or react) package, we provide different events handlers. For example, you can provide a onMessageClick() option that will execute when you click on the commit message part. Here's the list of the existing use-cases we support: https://github.com/nicoespeon/gitgraph.js/blob/master/packages/stories/src/gitgraph-js/3-events.stories.tsx
However, there's no event handler on the "line" as your screenshot suggest. Actually, there is no such lines in the current rendering. For the moment, this would be the best englobing target we would have:
As you can see, it doesn't regroup the line as you'd expect. Plus, there's no event handler on such group for the moment.
Would onMessageClick() be good enough for your use-case though?
I think it's an interesting use case though. I feel it wouldn't be too hard to add a line object in vertical mode that would allow to interact with the whole commit.
Especially to achieve the "hover" effect that looks quite neat to highlight a commit.
But it might be redundant with the existing handlers (onMessageClick() and onClick() especially). I would like to think about it twice before adding more handlers around.
What do you think @fabien0102?
Yes! finally I have achieved it! I had to modify the svg-elements.ts and gitgraph.ts files inside gitgraph-js folder, of course I copied it from node_modules and put it in assets folder (angular project) and imported those files from here instead of node_modules.
The green highlight is the one I clicked and corresponding details will be shown on the right, and blue highlight is what I'm hovering, and all commits are generated from JSON, The drawback is whenever a new version of this library is released then I need to do these changes again, or don't update at all.
As you can see I have given id and class to identify the elements because all elements are <g> elements, and by putting id and class, it became easy to style. I achieved highlighting by creating <rect> element and attached to dom using .prepend() in the component file.
Wow, great job @IsaacHub, the result looks really nice 👏
Thanks for sharing. The idea of using id and classes to identify the DOM element is a good idea indeed.
If you feel like it, don't hesitate to fork the source code and open a PR with your changes. Modulo some eventual improvements, it would be the best way for you to get this directly baked in the node_modules library, so you'd be able to update again 😉
@IsaacHub would you share what you've done there? Looks fantastic and I'm trying to achieve the same thing on my app. Thanks!!
@IsaacHub I'm also interested in that! Can you shed some light on that? Or @Danita can you share something also? Thanks!
I ended doing all drawing and interaction on my part and just using the library to draw the lines only.
@IsaacHub Would love to see how you pulled this off. Mind sharing? I'm working on a project that has similar row selecting need and your contribution would be much appreciated.
@IsaacHub Bump. Would love to see this be a part of the gitgraph repo too. To make it easier on your part, I think we'd even be interested in just some snippets of code used to get here, even if some assembly is required.
Hate to be a bother @IsaacHub but it would be super cool if you could add some more color to this.
My implementation is just a Bootstrap list-group with sufficient left padding to make room, superimposed on the gitgraph generated graph, which is absolutely positioned inside a common container.
Very nice @Danita Thanks for sharing. It looks like the next best thing. Although I bet you're having to sync the row height between the two. That makes me a little nervous especially with variable height line wrapping content in the list view but I suppose it could work.
@levi217 Yes, this limits you to having fixed height rows; but is the best I could get.
I think an option to get this to work on @gitgraph/js is to wrap each commit rendered inside a <rect> that would take the whole space and could be styled: https://github.com/nicoespeon/gitgraph.js/blob/46a98c9f145224d0c41afb472b5580bc4644aaa1/packages/gitgraph-js/src/gitgraph.ts#L295
We might even be able to add specific classes depending if the commit is selected. That will allow people to override style using CSS.
