Cytoscape for Angular (Node) - Horizontal Scaling Issues

[Aidan Lemay]

Hello all! I am new to this forum and Cytoscape.JS in general - please bear with me!

I have an application I am developing inside of Angular using the Node Cytoscape.JS package. The cy graph is rendered within an angular card - the card is 50% of the width of the screen, but the Cytoscape element inside is allowed to take up the entirety of the card contents.

I have a dataset with a few hundred nodes using the "cose" layout. The issue we have is the rendered graph only shows up as a column inside the center of the card, taking maybe 50% of the available space (center justified). If I grab the graph render and slide it, it'll move into the open space, so I know that Cy is able to access it.

The hope is to get the graph to spread itself, widthwise, to fill the entire space it is allowed - then from there span down past the lower boundaries of the card (into the scroll area). Doing some research, I found that the "spread" layout may be a better direction to go, but after installing the package and setting up the required elements, I was met with nothing but errors. If anyone can help me with that, I'm open as well!

Currently we are trying to manipulate the layout object to fit 100% width - that object is below. Nothing in CSS or JS has made a difference. If anyone has ideas please let me know! Thank you!

cy = cytoscape({

            container: cy_container,

            elements: this.elements,

            layout: {

                name: 'cose',

                // rankDir: 'LR',

                directed: true,

                padding: 0

            },

            style: this.styleSheet,

           

           

        });

[Scooter Morris]

Greetings,

This group is for Cytoscape desktop development.  The Cytoscape.js folks hang out on stackoverflow.  I would suggest asking your question there...

-- scooter