I am creating a graph using cytoscape.js. It has around 700 nodes. I am using klay and dagre layouts.

When I am loading the graph, the nodes appear to be very far from each other. Also, extra white space is visible sometimes on the left and right sides and sometimes on the top and bottom.enter image description here

I want the graph to load such that it fits over the screen properly. Also, if possible, I want the edge lengths to reduce so that we can zoom in a bit more and text over nodes is visible to some extent, but I am not able to do so.

I have tried changing many properties in klay and dagre layout but nothing seems to have worked for me.

This how I am defining Klay layout

{
                name: 'klay',
                nodeDimensionsIncludeLabels: true, // Include label dimensions in node size calculations
                fit: true,
                padding: 20, // Increase padding to give more space around the graph
                animate: false,
                animateFilter: function (node, i) { return true; },
                animationDuration: 500,
                animationEasing: undefined,
                transform: function (node, pos) { return pos; },
                ready: undefined,
                stop: undefined,
                klay: {
                    addUnnecessaryBendpoints: false,
                    aspectRatio: 1.6,
                    borderSpacing: 10, // Increase border spacing
                    compactComponents: false, // Set to false if you want to prioritize minimizing edge-node overlap over compactness
                    crossingMinimization: 'LAYER_SWEEP',
                    cycleBreaking: 'GREEDY', // 'INTERACTIVE',
                    direction: 'UNDEFINED', // 'UNDEFINED',
                    edgeRouting: 'ORTHOGONAL', // Use orthogonal edge routing to minimize overlap
                    edgeSpacingFactor: 0.2, // Increase edge spacing factor to reduce edge overlap
                    feedbackEdges: true, // Do not highlight feedback edges to reduce visual clutter
                    fixedAlignment: 'NONE',
                    inLayerSpacingFactor: 0.5, // Increase in-layer spacing to reduce overlap
                    layoutHierarchy: true,
                    linearSegmentsDeflectionDampening: 0.3,
                    mergeEdges: false, // Merge edges to reduce the number of lines drawn
                    mergeHierarchyCrossingEdges: true,
                    nodeLayering: 'NETWORK_SIMPLEX', // 'NETWORK_SIMPLEX',
                    nodePlacement: 'SIMPLE',
                    randomizationSeed: 1,
                    routeSelfLoopInside: false,
                    separateConnectedComponents: true,
                    spacing: 20, // Increase overall spacing
                    thoroughness: 100
                },
                priority: function (edge) { return null; }
            }

This is how I am defining dagre layout

name: 'dagre', // The name of the layout; should be 'dagre' for the Dagre layout
                fit: true, // Whether to fit the graph to the viewport after the layout has been applied
                padding: 20, // Padding used on fit in pixels
                spacingFactor: undefined, // A positive value adjusts spacing between nodes (1 = default spacing, >1 increases spacing)
                nodeDimensionsIncludeLabels: true, // Whether to include labels in calculations of node dimensions
                animate: false, // Whether to animate changes to the node positions
                // animateFilter: function (node, i) { return true; }, // A function that determines whether to animate specific nodes
                // animationDuration: 500, // Duration of the animation in milliseconds if 'animate' is true
                // animationEasing: undefined, // Easing function used for the animation if 'animate' is true
                boundingBox: undefined, // A bounding box to constrain the layout; can be specified as `{ x1, y1, x2, y2 }` or `{ x1, y1, w, h }`
                avoidOverlap: true, // Whether to try to avoid overlap of nodes
                rankDir: 'LR', // The direction of the layout: 'TB' for top-to-bottom, 'LR' for left-to-right, 'BT' for bottom-to-top, or 'RL' for right-to-left
                ranker: 'network-simplex', // The algorithm to assign a rank to each node; can be 'network-simplex', 'tight-tree', or 'longest-path'
                dagre: {}, // Additional options to pass to the Dagre algorithm
                nodeSep: 30, // Increase node separation within the same rank
                edgeSep: 10, // Increase edge separation
                rankSep: 80, // Increase separation between ranks
                // minLen: function (edge) { return 1; }, // Set minimum edge length
                // edgeWeight: function (edge) { return 1; }, // Set edge weight
                ready: function () {}, // A callback function that is called when the layout is ready
                stop: function () {} // A callback function that is called when the layout stops

Please suggest some change in properties to achieve what I wish to.

I have tried manipulating various properties as provided on the klay and dagre layout but nothing appears to have helped.
https://github.com/cytoscape/cytoscape.js-dagre
https://github.com/cytoscape/cytoscape.js-klay