3 ms·

Show HN: Hosted JavaScript dependency tree graphs for GitHub READMEs

56 points by fiatjaf 9y ago

me_bx 9y ago
Nice one. Glitch (the hosting service) is returning 504 errors, but it's easy to run it locally: cd /tmp git clone https://github.com/fiatjaf/node-dependencies-view.git cd node-dependencies-view/ npm install npm start Then in the browser http://localhost:3000/username/repoName Feedback: * In repos containing many modules, the svg is really too wide, even when decreasing ratio to 0.1. A more space-efficient layout could possibly be found. Vertical instead of horizontal, perhaps? * Fails to render anything whenever a module is not found (e.g. `require('./params')`). Proper fallback may be implemented.
- fiatjaf 9y ago
  Thank you for the feedback and run instructions. I don't know how to make Graphviz reorganize the nodes in a more vertical ratio. If you set the "ratio" parameter to, say, 0.5, or 1, it will output a very vertical graph, but at the expense of really small letters. I have to dig more into http://www.graphviz.org/Documentation/dotguide.pdf http://www.graphviz.org/Documentation/dotguide.pdf
  - joshka 9y ago
    I recently came across a neat graph project, which could help you solve part of the problem. https://github.com/fogleman/GraphLayout https://github.com/fogleman/GraphLayout via https://www.michaelfogleman.com/ https://www.michaelfogleman.com/
  - WorldMaker 9y ago
    Looks like: graph [rankdir = "LR"] I often skim the Gallery looking for an example that roughly like something I want and then click to view its source. In this case this one seems left to right: http://graphviz.org/content/psg http://graphviz.org/content/psg
api_or_ipa 9y ago
Question: How is your approach better than just recursively traversing package.json files? Seems like you're downloading a lot of stuff onto your server when you could keep it all in the client.
- fiatjaf 9y ago
  I'm not recursively traversing package.json, just making a graph out of a single repository. External packages are only referenced by name, not on their internals. Reading the whole repository has the advantage of making links between files in that same repository visible, instead just an opaque mass of packages depending on packages. Also, recursively fetching thousands of package.json files will sometimes (most times, I would argue) be more resource-intensive than just downloading a single repo. Finally, it's been done on the server because that way the generated image can be placed on GitHub's README.md.

56 points by fiatjaf 9y ago

Nice one. Glitch (the hosting service) is returning 504 errors, but it's easy to run it locally: cd /tmp git clone https://github.com/fiatjaf/node-dependencies-view.git cd node-dependencies-view/ npm install npm start Then in the browser http://localhost:3000/username/repoName Feedback: * In repos containing many modules, the svg is really too wide, even when decreasing ratio to 0.1. A more space-efficient layout could possibly be found. Vertical instead of horizontal, perhaps? * Fails to render anything whenever a module is not found (e.g. `require('./params')`). Proper fallback may be implemented.

fiatjaf 9y ago
Thank you for the feedback and run instructions. I don't know how to make Graphviz reorganize the nodes in a more vertical ratio. If you set the "ratio" parameter to, say, 0.5, or 1, it will output a very vertical graph, but at the expense of really small letters. I have to dig more into http://www.graphviz.org/Documentation/dotguide.pdf http://www.graphviz.org/Documentation/dotguide.pdf
- joshka 9y ago
  I recently came across a neat graph project, which could help you solve part of the problem. https://github.com/fogleman/GraphLayout https://github.com/fogleman/GraphLayout via https://www.michaelfogleman.com/ https://www.michaelfogleman.com/
- WorldMaker 9y ago
  Looks like: graph [rankdir = "LR"] I often skim the Gallery looking for an example that roughly like something I want and then click to view its source. In this case this one seems left to right: http://graphviz.org/content/psg http://graphviz.org/content/psg

api_or_ipa 9y ago

Question: How is your approach better than just recursively traversing package.json files? Seems like you're downloading a lot of stuff onto your server when you could keep it all in the client.

fiatjaf 9y ago
I'm not recursively traversing package.json, just making a graph out of a single repository. External packages are only referenced by name, not on their internals. Reading the whole repository has the advantage of making links between files in that same repository visible, instead just an opaque mass of packages depending on packages. Also, recursively fetching thousands of package.json files will sometimes (most times, I would argue) be more resource-intensive than just downloading a single repo. Finally, it's been done on the server because that way the generated image can be placed on GitHub's README.md.