Support YAML?

[kinow]

Hi,

I started testing JSON Visio to display CWL workflow files. These are normally written in YAML (e.g. https://github.com/common-workflow-language/user_guide/blob/84f22ab00a8bd73077e47801b2ccb81aff1eb79f/src/_includes/cwl/hello_world.cwl) but it is also possible to use JSON to write CWL workflows (e.g. https://github.com/common-workflow-language/cwltool/blob/e37134a90ac7a7c18254e30cff16da590b45c6d7/tests/wf/scatter-wf4.json).

To plot the YAML diagrams, I copied one of the YAML workflows and pasted into an online tool that converts YAML to JSON (YAML being a superset of JSON makes it easy, I guess).

Maybe JSON Visio could be extended to support YAML too, with some experimental feature that first converts YAML into JSON, and then renders it?

• https://onlineyamltools.com/convert-yaml-to-json
• https://jsonformatter.org/yaml-to-json
• https://www.convertjson.com/yaml-to-json.htm

The output in these three tools is the same for a CWL YAML document converted into JSON. I suspect they might be using something similar to https://www.npmjs.com/package/yaml-to-json.

Thanks for sharing jsonvisio.com! Learned about it from HackerNews.
Bruno

[osher]

The only significant difference between YAML and JSON is that YAML can express cyclic graphs, while JSON supports strictly DAGs. e.g:

---
a: &a
  links: [ *a ]

expresses a data-structure that is the equivalent to what the following JS code creates:

const a =  { links: [] }
a.links.push(a)
const doc = { a }

Which means that the visual tool may need to represent arrows going against the natural direction.

Anyway - IMHO - cool feature as it is, the use-cases for cyclic graphs in yaml are still a small minor subset of the use-cases.
Which means - we can also roll a quick solution by rejecting yamls with cyclic structures just until the UI for this is figured out

[osher]

One more note - since YAML is a superset of JSON - every yaml parser is also a JSON parser.
We may want to consider using just one parser, no need a strategy pattern or an if and a fallback or anything sophisticated.

If we're going sophisticataed - then we can consider using an AST representation instead of just the runtime data - this will allow us to support visualization of comments (from JSONC, yaml, TOML, and who knows what future formats we may consider)

[KarlHeitmann]

Take a look at what @AykutSarac said here, performance mode hides what can't be displayed on the viewport. This remembers me lazy loading concept. If the algorithm is being applied only in the visible part of the canvas, then the recursivity you mentioned on the comment should not be a problem at all.

We can add in the I/O pipe (reading JSON data -> generate JSON representation of the JSON tree -> get edges and nodes -> draw graph using reaflow) an interchangeable function that is applied if input data is in JSON format, YAML format, or anythin else. This will be the "parsing" stage. Once the parsing stage is finished, the output of the stage is sent back to the pipe in order to generate the JSON representation of the tree to draw. This feature should be simple to do.

[lucasfcnunes]

yq does lots of smart transformations, json with comments (jsonc), comments manipulation, even edits/inplace updates!

# About
yq is a portable command-line YAML, JSON, XML, CSV and properties processor

# Updates/edits:
https://mikefarah.gitbook.io/yq/v/v4.x/commands/evaluate
https://mikefarah.gitbook.io/yq/operators/select#select-and-update-matching-values-in-map
---

https://github.com/mikefarah/yq

"Controlling" this binary as a dependency could ease the heavy work.

[DannyBen]

Having YAML support would be dreamy. Is it my understanding that it will happen?
YAML is much easier to write by hand than JSON - so this can be cool to create charts by typing.

[AykutSarac]

YAML file type will be supported once #27 & #51 gets fixed. They are the biggest troubles currently in the parsing algorithm.

[KarlHeitmann]

I left you a comment on #51 , I think there is a design problem that is causing the bug, because when the algorithm find a nested object, it converts it into an array to apply later on the recursive function. If you convert the object into an array, you will have some weird output when weird objects are sent as input to the algorithm (like an object whose only pair key-value is a nested object: it will render an empty node).

I have 2 suggestions:

• When you have a nested object, render inside the node the text "{}", and make it clickable. So whenever the user clicks the nested object, the same function that is applied to the complete JSON data in the editor is applied to the nested object, and a new canvas will be generated. Solving this should be very simple, the problem is that I don't know how to make clickable a text inside a reaflow node.

• This will be trickier: make a new set of function to be applied only in object types, first you check if the associated value the iterator is on is an Array, if it is an array, you apply the recursive function you already wrote. If it is an Object instead, you will have to apply a new function to render a nested object, and you will have to create the CSS to paint the nested object different, to distinguish it from a nested array element. This approach will solve the problem, but I don't like it because the implementation is complex, and anyways you will wind up with a giganting graph, difficult to browse.

In the first suggestion you've got the advantage that you will start with a general overview of the data you want to visualize, because all the nested objects will be collapsed and hidden inside the nodes. As long as you need to see the details of your JSON data, you will crack the nested objects (fractal) and you will zoom in, applying the functions you already have written. Very cool, like the Benoit Mandelbrot Fractal.