Graphs are unreadable past 15 dependencies

[fregante]

Hi! This is a great tool but I'm struggling to make it useful. Graphs are not a great way to represent dependencies because shared dependencies are pulled so far right and away from their importers, forcing you to follow thousands of pixels of lines.

The entry point has 6 direct dependencies, can you spot them in less than 10 seconds? 10 seconds is a long time to spot 6 dependencies.

The solution here is to use the textual output and that cleanly shows you the 6 dependencies… if you only find the entry point in this list in alphabetical order:

auth/token.ts
  ../node_modules/fast-deep-equal/index.js
  ../node_modules/js-cookie/src/js.cookie.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  chrome.ts
  telemetry/rollbar.ts
background/logging.ts
  ../node_modules/idb/with-async-ittr.js
  ../node_modules/lodash/lodash.js
  ../node_modules/serialize-error/index.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/uuid/dist/index.js
  ../node_modules/webext-detect-page/index.js
  background/protocol.ts
  background/telemetry.ts
  chrome.ts
  contentScript/connection.ts
  core.ts
  errors.ts
  telemetry/rollbar.ts
  utils/expectContext.ts
background/popup.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
  background/protocol.ts
  helpers.ts
  utils/expectContext.ts
background/protocol.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/uuid/dist/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webext-patterns/index.js
  ../node_modules/webext-polyfill-kinda/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  chrome.ts
  messaging/protocol.ts
background/telemetry.ts
  ../node_modules/axios/index.js
  ../node_modules/lodash/lodash.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/uuid/dist/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  auth/token.ts
  background/protocol.ts
  chrome.ts
  options/loader.ts
  services/baseService.ts
  utils.ts
chrome.ts
  ../node_modules/lodash/isEmpty.js
  ../node_modules/p-defer/index.js
  ../node_modules/p-timeout/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  utils/expectContext.ts
components/AsyncButton.tsx
  ../node_modules/react-bootstrap/cjs/Button.js
  ../node_modules/react/index.js
contentScript/backgroundProtocol.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/webext-detect-page/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  errors.ts
  messaging/protocol.ts
  utils/expectContext.ts
contentScript/connection.ts
  contentScript/notify.ts
contentScript/notify.ts
  ../node_modules/lodash/lodash.js
  contentScript/backgroundProtocol.ts
core.ts
  ../node_modules/@rjsf/core/dist/cjs/index.js
  ../node_modules/@types/json-schema/index.d.ts
  ../node_modules/axios/index.js
  ../node_modules/lodash/lodash.js
  ../node_modules/serialize-error/index.js
  ../node_modules/type-fest/index.d.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
devTools/editor/components/Centered.tsx
  ../node_modules/react-bootstrap/cjs/index.js
  ../node_modules/react/index.js
errors.ts
  ../node_modules/serialize-error/index.js
  core.ts
extensionContext.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
helpers.ts
  ../node_modules/handlebars/lib/index.js
  ../node_modules/lodash/isPlainObject.js
  ../node_modules/lodash/mapKeys.js
  ../node_modules/lodash/mapValues.js
  ../node_modules/lodash/pickBy.js
  ../node_modules/mustache/mustache.js
  ../node_modules/nunjucks/index.js
  core.ts
  utils.ts
messaging/protocol.ts
  ../node_modules/is-promise/index.js
  ../node_modules/serialize-error/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  core.ts
options/loader.ts
  ../node_modules/type-fest/index.d.ts
  ../node_modules/webextension-polyfill-ts/lib/index.js
  core.ts
permissionsPopup.tsx
  ../node_modules/bootstrap/dist/css/bootstrap.min.css
  ../node_modules/react-dom/index.js
  ../node_modules/react/index.js
  extensionContext.ts
  popups/PermissionsPopup.tsx
  telemetry/rollbar.ts
popups/PermissionsPopup.tsx
  ../node_modules/@fortawesome/free-solid-svg-icons/index.js
  ../node_modules/@fortawesome/react-fontawesome/index.js
  ../node_modules/react-bootstrap/cjs/index.js
  ../node_modules/react/index.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  components/AsyncButton.tsx
  devTools/editor/components/Centered.tsx
  errors.ts
  telemetry/logging.ts
  utils/permissions.ts
services/baseService.ts
  ../node_modules/lodash/isEmpty.js
  ../node_modules/react/index.js
  ../node_modules/use-async-effect/index.js
  chrome.ts
telemetry/logging.ts
  ../node_modules/serialize-error/index.js
  ../node_modules/webext-detect-page/index.js
  background/logging.ts
  chrome.ts
  core.ts
  telemetry/rollbar.ts
telemetry/rollbar.ts
  ../node_modules/rollbar/src/server/rollbar.js
  background/telemetry.ts
  chrome.ts
utils.ts
  ../node_modules/lodash/lodash.js
  ../node_modules/type-fest/index.d.ts
utils/expectContext.ts
  ../node_modules/webext-detect-page/index.js
utils/permissions.ts
  ../node_modules/lodash/groupBy.js
  ../node_modules/lodash/sortBy.js
  ../node_modules/lodash/uniq.js
  ../node_modules/webextension-polyfill-ts/lib/index.js
  background/popup.ts
  background/protocol.ts

Additionally the list is monodimensional: I can see the 6 dependencies, but then I can't follow them easily.

[fregante]

If you're familiar with macOS, this should give you a good idea of how I'd expect to be able to explore the dependencies in a project:

It gives you a clear view of each dependency and sub dependency:

• the entry point has 6 dependencies
• rollbar has 2 dependencies
• chrome has 1 dependency

It's interactive but doesn't have to be: Shared dependencies can just end with a symbol, e.g. chrome.ts above could just show a non-linked extensionContext.ts item, which is on the second level already.

[fregante]

I just realized that I can get what I'm suggesting by just opening each file and reading its import statements 🤔

What that lacks though is the ability to see the dependency branch (i.e. not just one list of imports at a time, but both the parents and the children of each dependency, like in the Finder screenshot above)

[PabloLION]

seems hard to do. what about we make the graph "reactive" and nodes and expand / collapse by clicking them?