When restoring the graph state, labels that contain icons are renamed to 'fn'

[IfatChitin]

Issue type

Bug report

Environment info

• Cytoscape.js version : 3.8.4
• Browser/Node.js & version : latest Chrome

Current (buggy) behaviour

When saving the graph state using cy.json() and then restoring the graph state using cy.json(json), labels that contain icons are renamed to 'fn'.

Desired behaviour

The state should be restored without changing the labels.

Minimum steps to reproduce

In the demo, click on any node and notice the label change. https://output.jsbin.com/xerowokidu

[somedmguy]

From the documentation on using functions to define styles

Note that if using functions as style values, it will not be possible to serialise and deserialise your stylesheet to JSON proper.

[josejulio]

Note that if you only care about serializing the elements, you can use:

const json = cy.json();
const elements = json.elements;
// later...
cy.json({'elements': elements});

see the demo: https://jsbin.com/vinahuwifu/1/edit?html,css,js,output

[IfatChitin]

I see, thanks. I would like to continue setting icons through functions in the style definition, but I also need the zoom, pan and maybe some other properties. I believe I will take them from the json and will set them manually. Thanks!

[josejulio]

I would like to continue setting icons through functions in the style definition, but I also need the zoom, pan and maybe some other properties.

Yes, if only the styles are being serialized incorrectly (and you pre-configure them), you can strip it away from the json such as:

const json = cy.json();
delete json.style
// ....
cy.style(preConfiguredStyle);
cy.json(json);

That way you save everything but the styles (or anything that can't be serialized) in json format.

edit: Updated the snippet with @maxkfranz suggestions, removing the call cy.json({'style': preConfiguredStyle});

[maxkfranz]

I would generally avoid calling cy.json() with non-serialisable data. It wouldn’t be congruent with use of cy.json() as a getter. You could replace the cy.json(style) call with cy.style().

On Sep 17, 2019, at 15:54, Josejulio Martínez notifications@github.com wrote:

I would like to continue setting icons through functions in the style definition, but I also need the zoom, pan and maybe some other properties.

Yes, if only the styles are being serialized incorrectly (and you pre-configure them), you can strip it away from the json such as:

const json = cy.json(); delete json.style // .... cy.json({'style': preConfiguredStyle}); cy.json(json); That way you save everything but the styles (or anything that can't be serialized) in json format.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cytoscape/cytoscape.js/issues/2516?email_source=notifications&email_token=AAHRO42W3EMZWMGAC344T23QKEYWBA5CNFSM4IVSGIG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD65WTJI#issuecomment-532375973, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHRO43ULKTCQXO4E346SK3QKEYWBANCNFSM4IVSGIGQ.

[IfatChitin]

Thanks! My style doesn't change and it is defined as an object. This solved my issue in a satisfactory way:

cy.json(json); cy.style(myPredefinedStyle);