# Perspective component building: horizontal git branch **URL:** \ **Category:** Module Development\ **Tags:** ignition81, perspective\ **Created:** [November 15, 2022, 9:19am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513 "2022-11-15T09:19:42Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [November 15, 2022, 9:19am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/1 "2022-11-15T09:19:42Z")
Hi all, I'm having to need to track the current progress of my product when they move through the production process. The idea was to have some sort of horizontal GIT branch visual, where the dots would have a checkmark when done, and else empty. A bit like this image: ![git-branches-merge](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d19837bbaf82a71ab35b2a62c5f8776af8e900a.png) Would any of you have done something like this before? If not, does any of you have any tips on getting started on building my own component? For example, a question I have for building modules is, how can you test your code really quickly without having it to import allot in your gateway? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 15, 2022, 11:02am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/2 "2022-11-15T11:02:23Z")
This would be possible without making a module. You could create a script that parses some input to make a graph like this into the svg component. That will require some "logical coding" ect. Or if you want a module you can easily import one of the many librabrys from npm like react-flow or gitgraph which do things like that.(many many more libraries). Then you'll have to do some "techinal coding" to make everything work in ignition. > [@louagejasper](#): > > tips on getting started on building my own component? > **[ignition-sdk-examples/perspective-component at master ·...](https://github.com/inductiveautomation/ignition-sdk-examples/tree/master/perspective-component)** > > master/perspective-component The easiest is to make a react component first and test that out with all the tools in node. Then once that works you can import the component into the igntion bit where you link all the props and events. I believe i read somewhere you could directly build your module into the right folders so you didnt need to import it, but i never tried that ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [November 15, 2022, 11:21am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/3 "2022-11-15T11:21:37Z")
Thanks Victor! The SVG way seems a bit limited to me, because each dot will probably has to be hovereable/clickeable (I assume that makes it much harder). Would your SVG approach be maintainable? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 15, 2022, 11:24am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/4 "2022-11-15T11:24:10Z")
I recently made an js inject svg clicker (for version 8.1.22) > [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/5): > > Gonna try to keep this topic updated with all my cool injectings stuck_out_tongue Version 8.1.22 svg clicker wink You can also easily add classes to the groups to create hover effects. This would be a nice project to make a module about though. ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [November 15, 2022, 11:31am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/5 "2022-11-15T11:31:06Z")
I saw your post indeed. Ok, so a module would be better suited for this use case you think? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 15, 2022, 11:34am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/6 "2022-11-15T11:34:04Z")
Idk, both seem viable to me. Being able to make a perspective module is definitly nice. So for that alone it would be great:p Importing the drawing logic from one of the libraries would also be really easy. But if you have no experience with js/module building. **And no time** to figure it out. Than svg is just as good, and might be easier to edit to your needs than using a library and having to change a module. ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [November 15, 2022, 12:05pm UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/7 "2022-11-15T12:05:48Z")
Thanks for the advice. I'm going to try building the module. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [November 15, 2022, 4:49pm UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/8 "2022-11-15T16:49:43Z")
Consider this as a possible starting point: > > > This adds another perspective module component example, in the most simplified f…orm possible. There is no front-end tooling, and only the minimal required APIs for registering a component are demonstrated. > > This example is not 'production grade', as it is intended to be useful as a learning tool rather than the basis of a new module. > > Fixes #81 ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [November 21, 2024, 8:40am UTC](https://forum.inductiveautomation.com/t/perspective-component-building-horizontal-git-branch/66513/9 "2024-11-21T08:40:03Z")
For the ones bumping onto this, I've posted the finishing of the component in a new topic: > [@Perspective Branching Component by Mustry Solutions](https://forum.inductiveautomation.com/t/perspective-branching-component-by-mustry-solutions/72101): > > Hi community, I just wanted to take the time to thank this community for sharing information with each other, I really appreciate the open culture. I'm not always responding allot myself on topics, but I wanted to give back to the community, so we've build a Perspective component, called 'The Branching Component'. It's actually inspired by code source control and having the need for track and trace at customers where flows are very hard to track. The results look like this for example: