Switching between YAML input and Graphical input

[grdw]

I'm currently thinking about how to make a nice switch between the YAML input and the graphical input for the new topology editor.

My first approach will be a little blue text link on the bottom of the graphical editor like:

Considering this an advanced feature I don't want normal users to find it that quickly.

Also after hitting the YAML-editor button the switch should point back to the graphical editor or should it?

[ChaelKruip]

Also after hitting the YAML-editor button the switch should point back to the graphical editor or should it?

I think so yes.

[grdw]

Switching works. And synching from Graphical -> YAML works. (The other way around unfortunately doesn't work yet). There is a 'thing' which might be bad or good. So I'm leaving it up to you to decide.

This is the YAML:

This is the graph:

👍 Looking good and fine.

---

When you add a new node, the YAML will look like this:

It's still valid YAML but for one, the keys are not sorted. You could for that matter also end up with this:

Still valid YAML (I guess?) but the investment costs on the bottom belong to the HV node which is a little confusing. Also I'm not sure whether or not we should display the x, y, depth and id attributes in the YAML for they make no sense. On the other hand this is a rather advanced feature and advanced feature require some technical skill so.. might also be that it's sort of nice to show these keys.

[grdw]

@antw might you have a suggestion to format the YAML properly? I'm using a library called jsyaml but I'm guessing it has to do with the way the Object is build up in Javascript.

For example:

{
   children: [ ... ]
}

After update info:

{
   children: [ ... ],
   initial_investment: 100
   ...
}

What I'd like is:

{
   initial_investment: 100,
   ...,
   children: [ ... ]
}

A way I'd do it is something like:

var a = { children: [], initial_investment: 100 },
    b = {};

Object.keys(a)
    .sort(function (c,d) { 
        return (c == 'children') ? 0 : -1;
    }).forEach(function(key) {  
        b[key] = a[key];
    });

console.log(b);