How to register cytoscape-automove in python dash?

Dash Python
1

I really want to use the cool functions of automove in my dash cytoscape graph.

What is the best way to do it? As I am not familiar with JS it is difficult for me to understand the cytoscape instances and the correct way of registering automove.

I see two possibilities there (neither of them worked so far):

  1. Adding cytoscape-automove.js in the assets folder.
  • I am not sure it is possible to register a js extension when cytoscape is already initiated . I had errors like this ReferenceError: cytoscape is not defined or TypeError: cytoscape is not a function
  1. Modifying the dash_cytoscape package by cloning it and npm install cytoscape-automove.
  • Is it even a good idea?) I am desperate as you can see.
  • I have tried to npm run build:all but I suspect the way I am registering automove in the files is incorrect… I am using a testing clienside callback in the app:
app.clientside_callback(
    """
    function(elements) {
        var cy = window.cy;
        if (!cy) {
            console.error("Cytoscape instance is not available.");
            return '';
        }
    
        // Check if automove is available
        if (typeof cy.nodes().automove !== 'function') {
            console.error("Automove is not available!");
            return '';
        }
        console.log("Automove available:", typeof cy.nodes().automove);
    
        cy.nodes().automove({
            reposition: 'mean',
            nodesMatching: cy.nodes(),
            dragWith: cy.nodes()
        });
        return '';
    }
    """,
    Output('dummy-output', 'children'),
    [Input('graph', 'elements')]
)

and getting “Automove is not available!” of course…

Could someone push me in the right direction? I’d appreciate any advice! :sweat_smile: