Style not rendering from formats generated cytoscape json data.

[steampoweredtaco]

While working on another issue I was attempting to visualize my networks to better demonstrate the results. I am using the formats WriteCryptoScapes function and using the Cryptoscape desktop app which I think the README.md is referring to as the Cryptoscape App.

The styles appear to be written to the JSON file (see attach, remove .txt extension required by github) 1-1-0.json.txt

However, no styles or formatting is shown at all. Perhaps I just don't know how to use the app correctly. I've tried 3.9.1 and a few older versions of the Cryptospace app with the same results. See the GIF to see how I'm importing the json file and the resulting default style:

I expect the style as in the file which seems to be the same formatting applied in the example shown in the README.md of this repository.

I'm using v3 of goNEAT. Perhaps there is a regression in the formater, it only works with a certain version of the Cryptospace app, or it is user error on my part that isn't obvious?

As always thanks for your time.

[yaricom]

The network graph which saved in CytoscapeJS format should look like the following https://github.com/yaricom/goNEAT/blob/master/contents/xor/xor_winner_phenome_6-11.cyjs. You can open this file in the Cytoscape app to see how it looks. Also, you can create this file yourself by running XOR experiment as described at https://github.com/yaricom/goNEAT/wiki/XOR-Experiment

It has very basic formatting/styles incorporated. Everything else is up to you using rich functionality provided by the Cytoscape application.

[yaricom]

In nutshell you need to do the following:

• File->Import->Network from File
• Layout->Circular Layout

You can also play with other layouts. Additionally, you can use Tools->Analyze Network->Analyze as Direct Graph to calculate some crucial graph parameters which can be used to further modify graph. For example, you can use Neighborhood Connectivity to resize graph nodes, etc.

Hope my explanations helps.

[steampoweredtaco]

The network graph which saved in CytoscapeJS format should look like the following https://github.com/yaricom/goNEAT/blob/master/contents/xor/xor_winner_phenome_6-11.cyjs. You can open this file in the Cytoscape app to see how it looks. Also, you can create this file yourself by running XOR experiment as described at https://github.com/yaricom/goNEAT/wiki/XOR-Experiment

It has very basic formatting/styles incorporated. Everything else is up to you using rich functionality provided by the Cytoscape application.

My issue is that the style information in the json file is not being displayed by CytoscapeJS. Did you see my gif I posted originally?

Here is another gif using the file you attached, noticed how the style information that is in the json file is not displayed.

Here is an export of the JSON that shows the style information that should be displayed:

    "elements": {
        "nodes": [
            {
                "data": {
                    "activation_function": "SigmoidSteepenedActivation",
                    "activation_value": 0,
                    "background-color": "#FFCC33",
                    "border-color": "#CCCCCC",
                    "control_node": false,
                    "id": "1",
                    "in_connections_count": 0,
                    "neuron_type": "BIAS",
                    "node_type": "SENSOR",
                    "out_connections_count": 3,
                    "parent": "",
                    "shape": "pentagon",
                    "trait": "Trait #1 ( 0.075000 0.205371 0.000000 0.000000 0.000000 0.040503 0.231639 0.135507 )"
                },
                "selectable": true
            },

Notice Node ID 1 in the network should be shaped like a pentagon. Notice how in the output after importing the file as you describe is a rectangle and so are all the other nodes:

Is there a bug in the generation of these files?

Is the generated file incompatible with the recent versions of Cryptoscape App?

[steampoweredtaco]

OK, so I'm not sure if this is how you're supposed to do it or a workaround. I got it working by going to the style section and using passthrough mappings to the column values defined in the JSON. See: Resulting in a better view (I mapped some styles from the columns in edge as well)

I guess I was expecting that cryptoscape would natively support the style generated in the JSON file. Is that possible?

[yaricom]

Hello!

I'm happy to learn that you got nice visuals. The Cytoscape application had it own styles (a lot of them) with particular style applied by default. So, it requires some adjustments to get beautiful visualizations.

The format that used to save network graphs is compatible with Cytoscape JS library that can be incorporated into HTML pages. However, it was not main goal of this encoder to support all particulars of this format. It encodes all necessary data to represent the network graph, leaving to the end user all necessary efforts to make it appealing.

Cheers!

[steampoweredtaco]

I understand. Thanks for all the tips as well.