Local Visualization

[RilDev]

Good day,

I found out about this project today and I'm very impressed! It would be a great tool for people on my team (myself included) to get to know quickly code bases we are not familiar with.

But we don't use GitHub in my company.

Is there a way to run this repo-visualizer locally? A bit like what was done here: https://octo-repo-visualization.vercel.app

Thank you!

[Wattenberger]

Hey @RilDev, thanks for the kind words! The GitHub Action is basically just running this node script:

https://github.com/githubocto/repo-visualizer/blob/main/src/index.jsx

which gets bundled with this npm command:

https://github.com/githubocto/repo-visualizer/blob/main/package.json#L3

You should be able to get it working outside of GitHub Actions with minor tweaks!

[RilDev]

Thank you very much, I'll be trying this out soon !

[noklam]

Thank you very much, I'll be trying this out soon !

@RilDev Any luck or hints how can we do this?

[RilDev]

Hi @noklam I didn't get around to do it yet. You know, stuff happened!

It was starting to weigh on my conscience actually. Like I said I would do it and then didn't. Thanks for this opportunity of actually keeping my word!

I'll be experimenting with it today!

[noklam]

@RilDev Thanks :) I am not familiar with node so I am trying to making tweak to it.

https://github.com/githubocto/repo-visualizer/blob/main/src/index.js seems creating the SVG diagram, ideally would love to keep the interactive feature just like https://octo-repo-visualization.vercel.app

[RilDev]

Alright, let's get things going!

Here is the fork I'll be pushing my modifications on: https://github.com/RilDev/repo-visualizer

So far I just commented out the Github actions related code and generate the SVG using yarn build.

@Wattenberger could you tell me more about the interactive app https://octo-repo-visualization.vercel.app? Is it generated by another project?

[noklam]

It looks like it read from GitHub directly, so we need to configure it to read source code from Local Repository, I am not sure if there are additional metadata that only exist in GitHub Repo. Then we also need to figure out how to run the interactive demo.

…

On Wed, Nov 3, 2021 at 4:11 PM RilDev ***@***.***> wrote: Alright, let's get things going! Here is the fork I'll be pushing my modifications on: https://github.com/RilDev/repo-visualizer So far I just commented out the Github actions related code and generate the SVG using yarn build. @Wattenberger <https://github.com/Wattenberger> could you tell me more about the interactive app https://octo-repo-visualization.vercel.app? Is it generated by another project? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#36 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AELAWLYWQMTB3SKFYPZY7CLUKDVERANCNFSM5DF427ZA> .

[robatwilliams]

To generate static diagram locally using RilDev's (thanks!) fork above.

1. checkout @RilDev's fork, yarn
2. Uncomment src/index.js from line 102 downwards - you've commented out a bit too much
3. yarn build
4. Change working directory to the directory you want analysed
5. node ../../repo-visualizer/index.js

Other things you can hack:

• increase the hard-coded dimensions from 1000 in Tree.tsx, for a big codebase
• add excluded paths in index.jsx:30
• adjust the function that decides whether to enable each circle in Tree.tsx

[RilDev]

Hi there @robatwilliams! Thanks for the tips, I was able to get it to work!

I also updated my fork: https://github.com/RilDev/repo-visualizer

Thanks for the help!