Soy nuevo en este foro y en Cytoscape.JS en general. ¡Tengan paciencia conmigo!

Tengo una aplicación que estoy desarrollando dentro de Angular usando el paquete Node Cytoscape.JS. El gráfico cy se representa dentro de una tarjeta angular: la tarjeta tiene el 50 % del ancho de la pantalla, pero el elemento Cytoscape del interior puede ocupar la totalidad del contenido de la tarjeta.

Tengo un conjunto de datos con unos pocos cientos de nodos que usan el diseño "cose". El problema que tenemos es que el gráfico renderizado solo se muestra como una columna dentro del centro de la tarjeta, ocupando quizás el 50% del espacio disponible (centrado justificado). Si tomo el renderizado del gráfico y lo deslizo, se moverá al espacio abierto, por lo que sé que Cy puede acceder a él.

La esperanza es lograr que el gráfico se extienda, a lo ancho, para llenar todo el espacio permitido, y luego, desde allí, pasar los límites inferiores de la tarjeta (hacia el área de desplazamiento). Investigando un poco, descubrí que el diseño de "spread" puede ser una mejor dirección a seguir, pero después de instalar el paquete y configurar los elementos necesarios, solo encontré errores. Si alguien puede ayudarme con eso, ¡también estoy abierto!

Actualmente estamos tratando de manipular el objeto de diseño para que se ajuste al 100% del ancho; ese objeto está debajo. Nada en CSS o JS ha marcado la diferencia. Si alguien tiene ideas por favor hágamelo saber! ¡Gracias!

 cy = cytoscape({ container: cy_container, elements: this.elements, layout: { name: 'cose', // rankDir: 'LR', directed: true, padding: 0 }, style: this.styleSheet, });