Cytoscape layout transform option

Dash Python
3

Yes that works, here is an example:

from dash import html, Output,State, Input, Dash, no_update ,dcc, ClientsideFunction
import dash_cytoscape as cyto
import json

app = Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        style={'width': '100%', 'height': '400px'},
        stylesheet = [
            {
                'selector': 'node',
                'style': {
                    'label': 'data(label)',
                    'font-size': '50px',
                    'text-valign': 'center',
                    'text-halign': 'right',
                    'color': 'white',
                    'text-outline-width': '2px',
                    "text-wrap": "wrap",
                    'width': 'data(size)',
                    'height': 'data(size)',
                    "text-wrap": "wrap"
                }}
                
            ],
        elements=[
            # Define your nodes here with unique IDs
            {'data': {'id': 'node1','size':'150px', 'label': 'Node 1'}, "position":{"x":-200, "y":0}},
            {'data': {'id': 'node2','size':'150px', 'label': 'Node 2'}, "position":{"x":-20, "y":0}},
            {'data': {'id': 'node3','size':'150px', 'label': 'Node 3'}, "position":{"x":200, "y":0}},
        ],
        layout= {'name' : 'preset'}
    ),
    html.Button('Client-Side Callback', id='client-button'),
])

app.clientside_callback(
'''
function (n){
    let layout = {};
    layout.name = 'preset';
    layout.transform = (node, position) => {
        console.log("Transform function called");
    
        console.log("Position before:", position);
        position.x += 20;
 
        return position;
    };
    return layout;
}
''',
    Output('cytoscape', 'layout'),
    Input('client-button', 'n_clicks'),
    pevent_initial_call = True
)


if __name__ == "__main__":
    app.run_server(debug=True)