Create Vega devtool for easier debugging

[vaughnkoch]

Vega is awesome but very complicated. I've used the scenegraph for inspecting data but it's really easy to get lost there. Having a real devtool which could be used to inspect the scenegraph and visually show the components of what Vega generated would be super useful.

Here's an example devtool from the React dev team, which is used for a similar purpose: https://github.com/facebook/react-devtools

Maybe a first version of this would just be to dump out a user-friendly view of the scenegraph. It could be augmented by letting devs click on an element in Vega and have that zoom into the right scenegraph element in the tool (React's devtool can do this as well).

[domoritz]

Thank you for the issue. I agree that debugging is one of the weakest points of the Vega ecosystem.

We have some basic functionality already, though. You can look at the scenegraph in the Vega editor and we hope to add more debugging functionality soon. I think adding this to the editor instead of a specific browser will make the functionality available to more users. Why don't you file an issue in the editor and describe a scenegraph explorer component that you would like to have and what problems it addresses? Would you be able to help implement it?

[soul-codes]

For what this is worth, I second having the capability to debug Vega in the context of one's own application; this is something that would lend significantly better developer experience. Consider the following:

• Your data are pulled from the server and are awkward to transfer to the playground. (As a sub-scenario: you are identifying a problem that what you thought was a minimal example doesn't actually reproduce).
• You are calling various Vega object APIs such as update() that form a layer of application-specific state management on top of the Vega JSON objects, and you want to debug the effect of these API calls in your application's context.

Yes, all these could just as well be debugged in the editor, but doing it in your own app context means you avoid finicking around with error-prone and potentially frustrating human actions like copy-pasting between browser tabs.

I understand the user availability argument, so the tool doesn't have to be a browser extension. MobX, for instance, used to have an in-app inspector module that injects an inspector into your application page (although now it's deprecated in favour of browser plugins). I'd say that if we spend effort building an inspector, it could/should as well be released as a separate module that one could integrate in one's own application, including the Vega editor.

Something as simple as this would be beautiful :heart::

import { mountInspector } from 'vega-devtools'
mountInspector(); // creates a floating inspector that connects to the local Vega instance.

[jheer]

Thanks everyone for the comments! I'm reopening the issue to serve as a focal point for discussion. While I think the requested features are out of scope of the core Vega library in this repo, I could imagine another repo / project that provides improved inspection / debugging tools. (Perhaps leveraging some of the existing Editor functionality?)

[guru-florida]

FWIW We are planning on using the Vega Editor in our Developers docker stack. To simplify the use case of edit-deploy-edit loop that @soul-codes is talking about I will eventually add a Deploy button to the Vega Editor. This will simply take the Json text and insert into our Mongo DB. The VegaSpec metadata object will store our app-specific key fields of the vegaspec so we should be able to keep modifications to Vega Editor to a simple Drop Down (select a VegaSpec from Mongo) and Deploy (Save) button.

Who knows, after getting into the code, maybe that "Examples" button can basically be copied to list our KPIs stored in Mongo instead of a drop down. That would be sweet! :)

As for debugging, I am new to Vega and having some difficulty getting my data transform working. So if there was more visibility into the transform/aggregation pipeline that would help me figure out what I am doing wrong. :)

P.S. Great work on Vega team! I've loved D3 for years, so glad to have a high-level language built on top of it. :)