Find a good Variable Inspector that AREPL can use

[yozlet]

Right now, the variable inspector just prints the variable values in a very simple way. Other projects (such as VSCode) have standard Variable Inspectors that are considerably more powerful.

It'd be great to have some of those features. Even better if AREPL can get them by reusing someone else's code rather than having to write a new one. So, this is a thread for looking at existing ones, and leaning towards ease of integration rather than power & features.

Note: Keep an eye on license compatibility! We may need code that's compatible with AREPL's MIT license.

[yozlet]

This variable inspector for JupyterLab looks interesting: https://github.com/lckr/jupyterlab-variableInspector

Pros:

• TypeScript
• Fairly simple code
• Has extra columns for metadata - may be useful
• Not too dependent on Jupyter/IPython
• Same license (MIT)

Cons:

• Not all that pretty or powerful
• Takes a lot of screen space

[yozlet]

Dumping some links here that I don't currently have time to write up properly:

https://github.com/nikitakit/hydrogen-python - even simpler Variable Explorer for Python, uses React https://github.com/xyc/react-inspector - Copies the Chrome Inspector style, JSON/JS data only right now

Also may be worth diving more into nteract's work.

[Almenon]

Lots of cool stuff here!

What I'm primary looking for in a variable display is a way to remember what variables are expanded across runs (#75). Having to re-expand variables after each run is very annoying. After that would come the ability to render custom components for certain types (#73), like how jupyter can display graphs. And of course there is a bunch of other improvements I could make. What changes would you most like to see in the variable display?

Before addressing each proposed variable inspector let me explain what I'm doing currently.

Currently in the backend I get the top-level global variables from exec. (or local variables if user invokes the dump function). Once I have those I filter out unnecessary stuff like modules or functions. Then I use jsonpickle to turn it into JSON. Along the way I have some custom hooks in JSONPickle that format certain types into a more human-friendly format. There are plenty more opportunities here for massaging the data, but I just do this for a few types, like dates.

Once the frontend gets the JSON, it passes it along to renderjson. Renderjson goes through my JSON and converts it into a nice expandable display. I was planning on converting renderjson to typescript, and then adding the features I talked about earlier. But it may not be that simple. As the frontend gets more complex I will probably switch over to a library like Angular / Vue / React. If I use one of those using renderJson doesn't make much sense because it would be better to use a library made for that framework, like react-json-view.

Now let me address each variable inspector:

Jupyter variable inspector

This displays data in table form. I can see why they did this from a data science point of view - there's a lot of tables and matrices. But from a general programming perspective a tree form is preferable because a lot of variables are trees - they have properties, those properties have child properties, and so on....

Hydrogen-python

Again, table view. The inline variable display is pretty cool, though. If we want to do the same for AREPL we can steal cough "borrow" code from wolf, which does the inline variable display for VSCode. But the inline variable display was his idea - I don't want to just take it without giving credit somehow. And he's just a cool guy. He's not actively developing it anymore, though, so maybe it's fine? I need to talk to Scott and get his input on this. Worst case scenario I have to do the inline display myself, which is still doable.

In terms of functionality inline display doesn't improve much, but in terms of visuals it looks a lot better. Inline display would definitely entice more users to AREPL.

react-inspector

This seems to be meant more for javascript. In arepl-react I did try using react-json-view, and it worked out pretty well. But at the core it had the same features as renderJson - nothing to convince me to switch, unless I happen to already be using react.

[Almenon]

Did some more research recently. There's a bunch of different JSON viewers out there:

https://github.com/storybookjs/react-inspector 499 stars updated recently
https://github.com/mac-s-g/react-json-view 1.6k stars 2 years old
https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree ?? updated recntly
https://github.com/chenglou/react-treeview 1k stars 3 years old
https://github.com/Lapple/react-json-inspector 274 stars 3 years old

However I think I might prefer turning renderJson in a webcomponent. Not that I'm likely to do that anytime soon