Stylesheet for cytoscape does not take affect. Text and graph does not show correctly - cytoscape.js

Question

I am trying to create a following graph using cytoscape.
https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/
I have installed cytoscape-sbgn-stylesheet and cytoscape as dependency on my angular app.
Here is the code for the angular app
import { AfterViewInit, Component, ElementRef, ViewChild } from '#angular/core';
import * as cytoscape from 'cytoscape';
import sbgnStylesheet from 'cytoscape-sbgn-stylesheet';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
#ViewChild('cy') el: ElementRef;
ngAfterViewInit() {
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
stylesheet: sbgnStylesheet(cytoscape),
elements :[] //copied from https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet/blob/master/demo.json
layout: {
name: 'preset',
},
});
}
}
Html File
```
But I do not see the actual styles of the graph and I do not see any labels as well. What am I doing wrong?
Here is the picture that I see with no styling of nodes and no labels

Answer 1

The debugging took way too long, but the mistake was quite small, just use this:
style: sbgnStylesheet(cytoscape),
instead of:
stylesheet: sbgnStylesheet(cytoscape),
This is an error on the cytoscape-sbgn-stylesheet repositories README, the Usage passage clearly states to use "stylesheet", though the demo uses "style" as per usual.
Here is the revised version of your stackblitz