How to use cytoscape - 10 common examples

const localLayout = (network, groups, positions, nodeMap) => {
  console.log('Running local layout:', network, positions, nodeMap, groups)

  // Headless instance of Cyjs
  const cy = cytoscape({
    headless: true,
    elements: network.elements
  })

  console.log('CY instance:', cy)


  const groupNames = Object.keys(groups)

  console.log('GNames = ', groupNames)

  const remainingGenes = []

  let x1 = null
  let y1 = null

componentDidMount() {

    const { style, elements } = this.props

    const cy = cytoscape({
      container: this.refs.cyelement,
      layout: {
        name: 'preset' // load saved positions
      },
      style,
      elements
    })

    this.cy = cy

    // console.log(cy);
  }

renderTree ({ path, links, container }) {
    const cyLinks = this.ipfsLinksToCy(links)
    // TODO: path is currently alwasys the root cid, but this will change.
    const root = this.makeNode({ target: path }, '')

    // list of graph elements to start with
    const elements = [
      root,
      ...cyLinks
    ]

    const cy = cytoscape({
      elements: elements,
      container: container,
      ...graphOpts
    })

    if (this.props.onNodeClick) {
      cy.on('tap', async (e) => {
        const data = e.target.data()
        // map back from cyNode to ipfs link
        this.props.onNodeClick({ target: data.target, path: data.path })
      })
    }

    return cy
  }

}, {
        selector: 'edge',
        style: {
          // 'content': 'data(name)',
          'text-wrap': 'wrap',
          'curve-style' : 'bezier',
          'text-rotation': 'autorotate',
          'target-arrow-shape': 'triangle',
          'width': '4',
          //'line-color': 'data(color)',
          //'target-arrow-color': 'data(color)',
          //'background-color': 'data(color)'
        }
      }]
    });
    this.cy = cytoscape(properties);
    this.cy.ready(() => {
      this.cy.nodes().ungrabify();
      this.cy.on('tap', this.createNode);
      this.cy.on('select', this.selectNode);
      this.cy.on('unselect', this.deselectNode);
      this.cy.on('taphold', 'node', this.newEdgeStart);
      this.cy.on('tapdrag', this.newEdgeDrag);
      // this.cy.on('tapdragover', this.createEdge);
      this.cy.on('tapend', this.newEdgeEnd);
      this.cy.on('cxttap', this.openMenu);

      this.cy.on('mouseover', this.setFocus);

      this.cy.on('keydown', this.handleKeyPress);

/* 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;

// klay - https://github.com/cytoscape/cytoscape.js-klay
	klay: {
		direction: 'DOWN',
		thoroughness: 50,
		nodePlacement: 'LINEAR_SEGMENTS',
		cycleBreaking: 'GREEDY',
		spacing: 8,
		inLayerSpacingFactor: 2.0,
		edgeSpacingFactor: 0.2,
		borderSpacing: 10,
	},
	priority: edge => Math.round(edge.data('strength'))
};

// see http://js.cytoscape.org/#style
const diagramStyle = cytoscape.stylesheet()

	.selector('node')
	.css({
		'content': 'data(id)',
		'shape': 'rectangle',
		'height': '25px',
		'width': '90px',
		'padding': 0,
		'color': '#000',
		'background-color': '#ede9ed',
		'text-valign': 'center',
		'text-halign': 'center',
		'font-family': 'Lato, Verdana, Geneva, sans-serif',
		'font-size': '10px',
	})

getStyle(){
                return cytoscape.stylesheet()
                    .selector('node[sla]')
                    .css({
                        width: 60,
                        height: 60,
                        'text-valign': 'bottom',
                        'text-halign': 'center',
                        'font-family': 'Microsoft YaHei',
                        //      content: 'sla----sla',
                        'text-margin-y': 10,
                        'border-width': 10,
                        'border-color': '#2FC25B',
                        label: 'data(name)',
                    })
                    .selector(':selected')
                    .css({
                        'background-color': '#2FC25B'

const NetworkDefaultStyle = () =>
  stylesheet()
    .selector('node')
    .style({
      'font-size': 8,
      'text-valign': 'center',
      'text-halign': 'right',
      'color': 'gray',
      'text-max-width': 60,
      'text-wrap': 'wrap',
      'min-zoomed-font-size': 0.4,
      'border-color': '#D84315',
      'background-color'(e) {
        let color = 'steelblue'  // default
        if (e.data('group')) color = colors(e.data('group'))
        else if (e.data('color')) color = e.data('color')
        return e.data('selected') ? 'yellow' : color
      },

export const applyDefaultStyle = function() {
    return cytoscape.stylesheet()
      .selector('node')
        .style({
          'font-size': 6,//graphState.fontSize,
          'text-valign': 'center',
          'text-halign': 'right',
          'color': 'gray',
          'text-max-width': 60,
          'text-wrap': 'wrap',
          'min-zoomed-font-size': 0.4,
          'border-color': '#D84315',
          'background-color' : function(e) {
            var color = "#CCC"  // default
            if (e.data("group")) color = colors(e.data("group"))
            else if (e.data("color")) color = e.data("color")
            return e.data('starred') ? 'yellow' : color
          },