[Tooling] Visualizing a Score JSON Graph

[hydrosquall]

Are there any existing tools that people use to visualize what a NFGrapher JSON Score looks like, similar to what Airflow UI provides for visualizing task DAGs?

[kirbysayshi]

Not released, no! It also depends on what type of visualization you want. If it's the connections/edges, then no there isn't anything right now. If it's what each node is doing, there is a visualizer prototype shown when playing from the JSON tab of https://spotify.github.io/NFPlayerJS/.

[hydrosquall]

Got it :)! I saw the what each node is doing visual when trying out CanvasPowered. Can you think of any situations where being able to that sort of graph would be helpful?

I'd only build it if there were interest, but might prioritize something else if not. I found this sort of diagram helpful when trying to understand the WebAudioApi, but am not sure if it's helpful to people just at the "learning the API" stage, or if more experienced developers like yourself would use something like this too.

Example: https://developer.mozilla.org/en-US/docs/Web/API/AudioNode

[hydrosquall]

Spun up a small notebook that accepts a NFGrapher Json specification, and returns an interactive (zoom and pannable) illustration of the DAG. Tooltips don't seem to work well in this environment (for now), so I am just writing the node specific parameters to the browser console.

The kitchen-sink Json isn't especially interesting because it's linear, but this may be useful for debugging scores in the future.

Link: https://observablehq.com/@hydrosquall/nfgrapherjs-score-visualizer

[kirbysayshi]

Cool! One thing we played with internally was being able to create scores using an editor like this. It was never more than a prototype, but it did let people create some pretty cool Scores using just the raw grapher properties.