🏠 back to Observable

Notebook import visualizer

In this post, @mike puts out a call for visualizations of notebook imports.

I thought it might be better to continue the discussion in a new thread. To kick things off, here’s a very rough notebook that creates a diagram of notebook imports. (Suggestions, questions, comments all very welcome!)

If we suppose that there aren’t any bugs (a big ask, admittedly), the diagram depicts all the different “modules” created when the notebook is loaded, colored according to whether they are created via an import, created via “.derive”, or created indirectly via “.derive” by copying dependencies.

As an aside, I noticed that the _builtin module (containing stdlib functions) is also copied via module_derive / module_copy. I could be wrong, but it seems to me like this is unnecessary — it should be OK to simply import variables from the original _builtin module. You can play around with a proposed fix for this in the above notebook as well here. This probably doesn’t make a big difference in performance though.

Edit: I’ve updated the diagram so that you can click on a module to display the cells in an adaptation of @mike’s Notebook Visualizer beneath it.


:100: correct. It’s unnecessary for builtins, and it’s also unnecessary for simple (non-with) nested imports. We’ll land a fix for this shortly. Good sleuthing!

1 Like

Great, glad to help! I happened to notice the PR earlier tonight so I’ve actually already added a toggle to visualize how that affects things in the latest version (I’ve just now updated it to the latest commit).

While I’m here I may as well give a rundown of the other changes to the notebook. The “variable graph” is now interactive: you can click on an import node to show its corresponding module or hover over it to highlight its sibling imports and its module in the module graph. I also simplified the display of import-with modules and fixed some bugs along the way.

Edit: It could still use a lot more polish, but I’ve now published the “notebook import inspector”. I did a big reorganization so that the visualizations are at the top, and the graphs now also default to only showing “reachable” variables and modules.


Sorry for bumping this thread again, but here’s a new version that displays a live embedding of the loaded notebook and which allows you to step through its execution (it’s different enough from the previous notebook that I decided to publish it as a fork):

I would be very grateful for any comments or suggestions, esp. regarding the layout, UI, and explanations!