Concentric layout doesn't work on ipycytoscape because it's not possible to set levelWidth argument

[k-b-00]

Hello

[I am new to GitHub and somewhat new to data science; please forgive any obvious questions.]

I am trying to use the concentric layout for my CytoscapeWidget but whenever I try to pass the 'concentric' and 'levelWidth' arguments as keyword arguments, ipycytoscape does not seem to reflect changes in the visualization. I have tried following the documentation at https://js.cytoscape.org/#layouts (as referenced to in the docstring for the set_layout method) and could not get the additional parameters to work as intended. I assume this is because 'concentric' and 'levelWidth' require functions (see https://js.cytoscape.org/#layouts/concentric).

As mentioned above, I'm somewhat new to data science (and have no experience with TypeScript/JavaScript) so I just tried a bunch of stuff to see if anything would stick.

I tried to:

• Pass the argument as a string
• Pass the argument as a raw string
• Pass level data and centrality data as Python lists and dictionaries
• Pass a lambda function

I should mention though that I am able to get a concentric layout by simply passing name='concentric' to set_layout(), but there are only a few nodes in the middle and the rest are in one large ring on outskirts of the graph.

My goal is to build multiple rings of nodes within the concentric layout based on degree centrality, with nodes of higher centrality towards the middle.

My question is whether or not these other parameters (i.e., 'concentric' and 'levelWidth') are currently supported. If so, what is the correct syntax for using them within ipycytoscape and what is the correct way more generally to pass arguments to ipycytoscape for parameters that require functions.

Thanks in advance for any help; I've really enjoyed using ipycytoscape so far :) Keep up the good work!

[marimeireles]

Hey @k-b-00, thank you for opening the issue :)

As mentioned above, I'm somewhat new to data science (and have no experience with TypeScript/JavaScript) so I just tried a bunch of stuff to see if anything would stick.

ipycytoscape offers an interface in python, so you should use python to create your visualizations. we're only based in the original cytoscape lib (which is written in js). But you're right to check for cytoscape docs as we try to keep compatibility with their API, we try to offer all functionalities that they offer.

Ok, so looking into the cytoscape example I was trying to mimic when I added this kind of layout and comparing it with our concentric example, there's obviously something wrong.

This is how ours looks:

In contrast to the one using cytoscape:

[marimeireles]

What I found on other examples on cytoscape:

1. Other layouts use a layout implementation like the following:

  cytoscape( 'layout', 'cola', impl ); // register with cytoscape.js

See [1] and [2].

2. There are still some other more compelx ways of using it, but still they're just assigning the template name string to the cytoscape obj somehow, see [3] and [4].

3. If you look at how the concetric example uses this layout:

      layout: {
        name: 'concentric',
        concentric: function( node ){
          return node.degree();
        },
        levelWidth: function( nodes ){
          return 2;
        }
      },

Is very different, it's using this levelWidth attr that we don't have in our code. Our setLayout method is super simple and accepts a string only. For this visualization to work properly we need to encapsulate something more generic.

I can't think on how to do this out of the box like this, but, if someone has any idea on how to tackle the project feel free to either do it or just add thoughts to this issue!

Thank you very much for posting the issue @k-b-00 :) it was super helpful!
Sorry that ipycytoscape doesn't cover that yet and glad you're enjoying the rest of the project.

[k-b-00]

@marimeireles thanks for the response!

Just to add further documentation to the issue, it seems that ipycytoscape (version 1.2.0) will start to create concentric rings at a certain threshold (which I assume is set to the cytoscape.js default) as opposed to not at all. For example, in this visualization, I have one node with connections to all other nodes, a second node (top of picture) with connections to two other nodes, and then the rest of the nodes just have a singular connection to the first node:

When I add 6 additional connections to the second node, it becomes placed in the center, as if it were a separate ring, with the most central node still at the exact middle of the visualization:

[shadiakiki1986]

This cannot be done in ipycytoscape because ipywidgets forces all data sent to the front end to go through json serialization. Instead, I patched the cytoscape.js default concentric functions (as noted in the comment above on Feb 12) so that it reads a clevel field in the node data dict.

FNSED="/home/shadi/miniconda3/envs/voila-apps4/share/jupyter/nbextensions/jupyter-cytoscape/index.js"
cp "$FNSED" "$FNSED.bkpshadi"
sed -i "s/return e\.degree()/return e\.data('clevel')/g" "$FNSED"
sed -i "s/return e.maxDegree()\/4/return 0.5/g" "$FNSED"

Here is a (messy) notebook that demonstrates this: link

Ideally, cytoscape.js would integrate reading a field clevel for example (or concentric_level) in its default function, so that ipycytoscape can set this field without having to apply the above patch. I'll create an issue there maybe it gets integrated