For those of us concerned about our dependency graphs, it would be really useful to be able to more easily find the leaf nodes, or to filter nodes in the graph by their depth.

Hello. I love this tool!
I noticed mutual dependencies are not correctly shown.

If the dep graph looks like:
A->[email protected]
B->[email protected]

C will be shown as only the child of one of either A or B, not both.

This is misleading. Could this be shown somehow?
The graphs might look a bit messier but they will be more informative.

Thanks!

Hi, thanks for this cool package, was recommended on dotJS conference yesterday.
I tried it for one of my projects, but got an error.
http://npm.anvaka.com/#/view/2d/penthouse

Error

{
  "message": "Cannot convert undefined or null to object"
}

Any ideas what this is about? A broken package.json somewhere in my dependency chain?

Let me know if there's any other info I can provide to help debug.
Thanks again!

Not sure exactly the dependency that caused this, but http://npm.anvaka.com/#!/view/2d/no-one-left-behind with this error after a while.

I think it would be super interesting for a given package to see the total number of people who can push code to the underlying dependencies. As in: how many people am I trusting when I use this package?

Site does not work for me - neither in chrome nor in safari. In chrome I can see this on the console:

DevTools failed to load source map: Could not load content for chrome-extension://gnldpbnocfnlkkicnaplmkaphfdnlplb/ContentScript/CustomisedWorkItemMessaging.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://gnldpbnocfnlkkicnaplmkaphfdnlplb/ContentScript/CaptureBrowserEvent.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for https://npm.anvaka.com/angular.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Any ideas?

I basically only care about the graph info in the tool. Can they share the same view so I don't have to click over into it?

Clicking show button doesn't do anything

Console log:

Scoped packages are packages belonging to an organization or individual, but may still be public.

I'd be really nice to be able to view those as well.

Currently it's possible to visualize only the latest version published to npm.

It'd be an amazing improvement if we'd be able to also visualize an upcoming version.

I suggest changing the version to a dropdown:

And adding the version to the URL:
http://npm.anvaka.com/#/view/{TYPE}/{PACKAGE}/{VERSION}

Maybe it's right in front of me, but is there currently no way to see labels in 3D?

It's tantalizing, as I actually do find the 3D visualization a lot more meaningful for my particularly large and tangled forest of dependencies.

The labels work fine in 2D mode.

I don't expect anyone to jump up and solve this for me, mainly I'm just curious if I straight-up missed it.

(Thanks for your excellent work on this!)

I believe the publish size of each package is being added to the npm registry.
In the meantime, you could use Package Phobia to determine the size of the package and draw the circle at a size proportional to the package size.

How does that sound?

Graph doesn't load at
http://npm.anvaka.com/#/

Error in console:

I'm using chrome.

Also doesn't work on firefox developer edition, but the reported error is slightly different.

Is it working for everyone else?

Queries to https://registry.npmjs.cf/ are giving a 526, so the graph can't be built.

{ "message": "could not find a satisfactory version for string beta" }

To reproduce, try visualizing @salesforce/command.

When hovering over the names on the left, the corresponding node in the graph should be highlighted.

I'm helping out with a node.js project which is not itself a npm package. I would love to just toss this URL into the seach field and get its dependencies (or, of course, any other packe.json):

https://raw.githubusercontent.com/hackmdio/hackmd/master/package.json

I'm trying to use local deployment using commands from, but the angular concatenation doesn't work for me.

I even try to run gulp task itself but with the same result

Uncaught TypeError: Cannot read property 'module' of undefined external.min.js:25(anonymous function) external.min.js:25(anonymous function) external.min.js:921
Uncaught ReferenceError: angular is not defined bundle.js:7370./navbar/navbar bundle.js:7370s bundle.js:1e bundle.js:1(anonymous function)

copyDist is being invoked

[22:17:58] Starting 'copyDist'...
[22:17:58] Finished 'copyDist' after 21 ms

I've tried to npm install and encountered the warnings about deprecations of two grunt tools:

npm WARN deprecated [email protected]: Deprecated in favor of grunt-contrib-watch which now have Livereload support built-in.
npm WARN deprecated [email protected]: Deprecated in favor of grunt-contrib-watch which now have Livereload support built-in.

Would be nice to have an export of the graph info containing for example

• all dependent packages with versions
• listing of licences

I've filed a bug with registry.npmjs.cf, here: npmjs-cf/meta#1

Any chance of getting support for optional and dev dependencies? It'd be good to be able to analyze the complexity of dev installs too. 😸

The color gradient will indicate how many steps to central (original) node. Maybe color gradients of 4-5 steps will be enough, nodes more far from 4-5 steps will be paint all the same color (grey, white, or similar color)

Hello,

I've got an out of memory error with the following library:

@grapecity/wijmo.all

return $http.jsonp('http://isaacs.iriscouch.com/registry/_design/scratch/_view/byField', {

This is probably not up to date anymore and might be going away soon.

The new skimdb registy is at https://registry.npmjs.org/, though I don't know how to find the same view.

While looking awesome (thanks!!!), there is one practical aspect that I think is missing -- an ability to filter the graph to just one scope, or a sub-string search. For example, if I maintain a large number of components that cross-depend on one another, it would greatly help to view just my components (they would probably share organizational scope in npm. Once again, thanks for an awesome tool!

Hi, Thanks a lot for your awesome work. Is it possible to specify a local npm server like verdaccio to be used with npm graph ?
Regards,
Blured.

Hello, With all the new install issues with V7 of npm, many folks are left confused with the older peer dependency versions that have not been updated, breaking their install.

It would be very helpful to see the peers and the version in this tree - especially since the npm pages themselves don't show this.

The only way I am aware of is "npm info name-of-module peerDependencies" & looking at the installed package json.

A Big thank you to all contributors of this project!!

Thanks for this cool tool!
I was exploring the website today but faced this issue. I am not sure whether this ticket is duplicate or not.
Getting this error in console when I am clicking on 'Show'

TypeError: $http.get(...).success is not a function
    at Object.link (bundle.js:18080)
    at external.min.js:17
    at external.min.js:89
    at Ca (external.min.js:89)
    at p (external.min.js:73)
    at g (external.min.js:65)
    at p (external.min.js:73)
    at g (external.min.js:65)
    at external.min.js:64
    at external.min.js:70
    at d (external.min.js:67)
    at m (external.min.js:71)
    at external.min.js:330
    at external.min.js:151
    at m.$digest (external.min.js:152)
    at m.$apply (external.min.js:155) "<div typeahead-match="" index="$index" match="match" query="query" template-url="match.templateUrl" class="ng-isolate-scope">"

Would be very helpful to have release dates for the versions too.
This way it would be easier to spot problematic depencencies or other issues.

Thank you.

I'd like to check [email protected]. It would be nice to support a version string in that format

Have bookmarked this page... it would be nice to have a favicon

This is somewhat related to #24

Instead of pointing to a package.json file with a URL, it would be great to allow uploading a package.json file available locally (of course, that would not upload it elsewhere than inside a client-side <input type=file> as everything is done client-side). This would allow visualizing the dependencies of a project even if the project package.json is not available on a public url.

End-user applications are often not published as NPM packages.
Yet, it would be interesting to see what are the dependencies of various apps.

Is it possible to do with the current setup, or would you consider adding it?

when running the tool with derhuerst/vbb-rest (which has a github dependency), it fails with Error {}.

Add a field where user can limit the max number of steps. Like npm ls --dept "number"

Vivaldi (a web browser based on Chromium) uses "right-click and drag" gestures for navigation (like "right-click and drag left" to go back), and when viewing the graph in 3D, the "right-click and drag" of the browser is still active over the one from the graph, so it gets pretty tricky to actually pan the 3D graph.

I believe there should be a way for the web page to specify that it expects to receive "right-click and drag" gestures, so the browser ignores them.

Vivaldi Help | Mouse Gestures

For open source projects, it would be really cool to see a graph of dependents for a project too. Maybe a toggle to show dependents vs dependencies?

Error happens on every keystroke (in console) when typing in a module name.

P.S. "Hi" from npm.broofa.com :-)

How to setup this to be used by a private NPM registry?

I tried changing https://github.com/anvaka/npmgraph.an/blob/master/src/scripts/config.js#L1 with my registry

• https://registry.npmjs.mycompany.net
• https://registry.npmjs.mycompany.net/_design/scratch/_view/byField

I'm getting the following error while loading the app in the browser

Thanks and awesome Job!
Marcello

I've recently used this site and was wondering if sorting the names and licenses by alphabetical order could help a user find specific dependencies? If so, I'd like to take a shot at this. Thank you @anvaka and hope to hear from you soon.

The tool doesn't appear to work in firefox :(