How to use the cytoscape.use function in cytoscape

/* eslint-disable import/prefer-default-export */
import Cytoscape from './components/Cytoscape.react';
import CytoscapeJS from 'cytoscape';
import coseBilkent from 'cytoscape-cose-bilkent';
import cola from 'cytoscape-cola';
import dagre from 'cytoscape-dagre';
import euler from 'cytoscape-euler';
import klay from 'cytoscape-klay';
import spread from 'cytoscape-spread';

CytoscapeJS.use(coseBilkent);
CytoscapeJS.use(cola);
CytoscapeJS.use(dagre);
CytoscapeJS.use(euler);
CytoscapeJS.use(klay);
CytoscapeJS.use(spread);

export {
    Cytoscape
};

import React, { Component } from 'react';
import cytoscape from 'cytoscape';
import cycola from 'cytoscape-cola';
import dagre from 'cytoscape-dagre';
import coseBilkent from 'cytoscape-cose-bilkent';
import klay from 'cytoscape-klay';
import popper from 'cytoscape-popper';
import { PfColors } from '../../components/Pf/PfColors';

cytoscape.use(cycola);
cytoscape.use(dagre);
cytoscape.use(coseBilkent);
cytoscape.use(klay);
cytoscape.use(popper);

interface ReactCytoscapeProps {
  containerID?: string; // the div ID that contains the cy graph
  elements?: any; // defines all the nodes, edges, and groups - this is the low-level graph data
  style?: any;
  styleContainer?: any;
  cytoscapeOptions?: any;
  layout?: any;
  cyRef?: (cy: any) => void; // to be called when cy graph is initially created
}

export default class ReactCytoscape extends Component {
  cy: any;
  container: any;

deleteElement,
  selectElement,
  setStartElement,
  updateElementPosition,
  saveEditorState,
  toggleBreakpoint
} from "../../../redux/actions";
import {Classes, ContextMenu, Divider, Menu, MenuDivider, MenuItem, ResizeSensor} from "@blueprintjs/core";
import { debounce } from "debounce";
import uuid from "uuid/v1"
import Cytoscape from "cytoscape";
import coseBilkent from 'cytoscape-cose-bilkent';
import stylesheet from "./editor-stylesheet";
import "./style.css";

Cytoscape.use( coseBilkent );

class EditorComponent extends Component {

  updateColors = ({ elements }) => {
    const { model: { id }} = this.props;
    const visited = this.props.execution.visited[id];
    elements.forEach(element => {
      const key = `${id},${element.data.id}`;
      element.data.name = element.data.name || "";
      if (this.props.execution.breakpoints[key]) {
        element.data.color = 'Red';
      } else if (visited && visited[element.data.id]) {
        element.data.color = 'LightGreen';
      } else {
        if (this.props.model.startElementId === element.data.id) {
          element.data.color = 'LightGreen';

created () {
            if (typeof cytoscape('core', 'popper') !== 'function') {
                cytoscape.use(popper)
            }
            if (typeof cytoscape('core', 'dagre') !== 'function') {
                cytoscape.use(dagre)
            }
        },
        mounted () {

import fcose from "cytoscape-fcose";
import cola from "cytoscape-cola";
import dagre from "cytoscape-dagre";
import klay from "cytoscape-klay";
import dblclick from "cytoscape-dblclick";

import { colors, graphStyles, dagreOptions, colaOptions, klayOptions, fcoseOptions } from "./config";
import { getUniqueRelationshipId } from "../../../utils/utilities";

import "./GraphViewerCytoscapeComponent.scss";

cytoscape.use(klay);
cytoscape.use(dagre);
cytoscape.use(cola);
cytoscape.use(fcose);
cytoscape.use(dblclick);

export const GraphViewerCytoscapeLayouts = {
  "Cola": colaOptions,
  "Dagre": dagreOptions,
  "fCoSE": fcoseOptions,
  "Klay": klayOptions
};

export class GraphViewerCytoscapeComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { };
    this.graphControl = null;
    this.selectedNodes = [];
    this.layout = "Klay";

import * as React from 'react';
import * as Cy from 'cytoscape';

import { GraphStyles } from './graphs/GraphStyles';
import canvas from 'cytoscape-canvas';
import cytoscape from 'cytoscape';
import cycola from 'cytoscape-cola';
import dagre from 'cytoscape-dagre';
import coseBilkent from 'cytoscape-cose-bilkent';
import GroupCompoundLayout from './Layout/GroupCompoundLayout';
import popper from 'cytoscape-popper';
const nodeHtmlLabel = require('cy-node-html-label');

cytoscape.use(canvas);
cytoscape.use(cycola);
cytoscape.use(dagre);
cytoscape.use(coseBilkent);
cytoscape.use(popper);
cytoscape('layout', 'group-compound-layout', GroupCompoundLayout);
nodeHtmlLabel(cytoscape);

type CytoscapeReactWrapperProps = {};

type CytoscapeReactWrapperState = {};

const styleContainer: React.CSSProperties = {
  height: '100%'
};

/**
 * The purpose of this wrapper is very simple and minimal - to provide a long-lived <div> element that can be used</div>

created () {
            if (typeof cytoscape('core', 'popper') !== 'function') {
                cytoscape.use(popper)
            }
            if (typeof cytoscape('core', 'dagre') !== 'function') {
                cytoscape.use(dagre)
            }
        },
        mounted () {

import React from "react";
import CytoscapeComponent from "react-cytoscapejs";
import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import cola from "cytoscape-cola";
import dagre from "cytoscape-dagre";
import klay from "cytoscape-klay";
import dblclick from "cytoscape-dblclick";

import { colors, graphStyles, dagreOptions, colaOptions, klayOptions, fcoseOptions } from "./config";
import { getUniqueRelationshipId } from "../../../utils/utilities";

import "./GraphViewerCytoscapeComponent.scss";

cytoscape.use(klay);
cytoscape.use(dagre);
cytoscape.use(cola);
cytoscape.use(fcose);
cytoscape.use(dblclick);

export const GraphViewerCytoscapeLayouts = {
  "Cola": colaOptions,
  "Dagre": dagreOptions,
  "fCoSE": fcoseOptions,
  "Klay": klayOptions
};

export class GraphViewerCytoscapeComponent extends React.Component {

  constructor(props) {
    super(props);

import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import cola from "cytoscape-cola";
import dagre from "cytoscape-dagre";
import klay from "cytoscape-klay";
import dblclick from "cytoscape-dblclick";

import { colors, graphStyles, dagreOptions, colaOptions, klayOptions, fcoseOptions } from "./config";
import { getUniqueRelationshipId } from "../../../utils/utilities";

import "./GraphViewerCytoscapeComponent.scss";

cytoscape.use(klay);
cytoscape.use(dagre);
cytoscape.use(cola);
cytoscape.use(fcose);
cytoscape.use(dblclick);

export const GraphViewerCytoscapeLayouts = {
  "Cola": colaOptions,
  "Dagre": dagreOptions,
  "fCoSE": fcoseOptions,
  "Klay": klayOptions
};

export class GraphViewerCytoscapeComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { };
    this.graphControl = null;
    this.selectedNodes = [];

import Cytoscape from 'cytoscape'
import COSEBilkent from 'cytoscape-cose-bilkent'

import React, { useEffect, useState } from 'react'
import CytoscapeComponent from 'react-cytoscapejs'

Cytoscape.use(COSEBilkent)

import DEFAULT_STYLE from './visualstyle'
import './style.css'
import Warning from './Warning'
import LoadingPanel from '../PropertyPanel/LoadingPanel'
let cyInstance = null

const BASE_STYLE = { width: '100%', height: '100%', background: '#222522' }

const PRESET_LAYOUT = {
  name: 'preset',
  padding: 6
}

const COCENTRIC_LAYOUT = {
  name: 'concentric',